feat/ canvas style (#116)

* feat(entity): adding downloader

* feat(entity): adding style

* feat(entity): adding copy

* feat(entity): renaming

* feat(entity): adding style

* feat(entity): adding style

* feat(entity): adding style

* feat(entity): adding style

* feat(entity): adding style

* feat(entity): adding style

* feat(entity): adding style

* feat(entity): adding style

* feat(entity): adding style

* feat(entity): fixed eslinter

front/src/enums/CanvasColor.ts

@@ -1,5 +1,5 @@
 export enum CanvasColor {
-  BACKGROUND = '#ffffff',
+  DEFAULT_BACKGROUND = '#ffffff',
   BORDER = '#E2E8F0',
 
   SELECTED = '#057aff',
@@ -8,5 +8,5 @@ export enum CanvasColor {
   DEFAULT = '#000000',
 
   TITLE = '#333333',
-  CONTENT = '#666666',
+  TEXT = '#9ca3af',
 }

front/src/pipes/Text.pipe.ts

@@ -0,0 +1,7 @@
+const TextPipe = {
+  capitalizeFirstLetter (string: string): string {
+    return string.charAt(0).toUpperCase() + string.slice(1)
+  }
+}
+
+export default TextPipe

front/src/services/board/drawer/Base.drawer.ts

@@ -22,7 +22,6 @@ const BaseDrawer = (): TBaseDrawer => {
 
     update (entity: TEntityOrCreate) {
       this.entity = entity
-      this.factory!.update(entity)
     },
 
     updateEntityPosition () {

front/src/services/board/drawer/Network.drawer.ts

@@ -20,7 +20,7 @@ const NetworkDrawer = (network: TEntityOrCreate, context: CanvasRenderingContext
       this.Linker = CommonLinker
 
       this.factory = NetworkFactory()
-      this.factory.create(network, context)
+      this.factory.create(this)
 
       this.Connector = ConnectorBuilder(this, CommonConnector)
       this.createConnectors()

front/src/services/board/drawer/Service.drawer.ts

@@ -20,7 +20,7 @@ const ServiceDrawer = (service: TEntityOrCreate, context: CanvasRenderingContext
       this.Linker = CommonLinker
 
       this.factory = ServiceFactory()
-      this.factory.create(service, context)
+      this.factory.create(this)
 
       this.Connector = ConnectorBuilder(this, CommonConnector)
       this.createConnectors()

front/src/services/board/drawer/Volume.drawer.ts

@@ -20,7 +20,7 @@ const VolumeDrawer = (volume: TEntityOrCreate, context: CanvasRenderingContext2D
       this.Linker = CommonLinker
 
       this.factory = VolumeFactory()
-      this.factory.create(volume, context)
+      this.factory.create(this)
 
       this.Connector = ConnectorBuilder(this, CommonConnector)
       this.createConnectors()

front/src/services/board/drawer/factories/Base.factory.ts

@@ -2,26 +2,21 @@ import { type TBaseFactory } from '../../../../types/board/drawer/factories/Base
 import StateFactory from './State.factory'
 import { type IPosition } from '../../../../interfaces/Position.interface'
 import CommonBases from '../Common.bases'
-import { type TEntityOrCreate } from '../../../../types/Entity'
-import { CanvasColor } from '../../../../enums/CanvasColor'
+import TextPipe from '../../../../pipes/Text.pipe'
+import { type TDrawer } from '../../../../types/Drawer'
 
 const BaseFactory: TBaseFactory = {
   ...CommonBases,
   ...StateFactory,
 
-  create (entity: TEntityOrCreate, context: CanvasRenderingContext2D): void {
-    this.context = context
-    this.name = entity.name
-    this.positionX = isNaN(entity.positionX) ? this.positionX : entity.positionX
-    this.positionY = isNaN(entity.positionY) ? this.positionY : entity.positionY
-  },
-
-  update (entity: TEntityOrCreate): void {
-    this.name = entity.name
+  create (drawer: TDrawer): void {
+    this.drawer = drawer
+    this.positionX = isNaN(drawer.entity!.positionX) ? this.positionX : drawer.entity!.positionX
+    this.positionY = isNaN(drawer.entity!.positionY) ? this.positionY : drawer.entity!.positionY
   },
 
   isSelected ({ x, y }: IPosition): boolean {
-    return this.context!.isPointInPath(this.path, x, y)
+    return this.drawer!.context!.isPointInPath(this.path, x, y)
   },
 
   updatePosition (position: IPosition): void {
@@ -31,43 +26,48 @@ const BaseFactory: TBaseFactory = {
 
   position (withOffset: number = 0): IPosition {
     return {
-      x: this.positionX - withOffset,
-      y: this.positionY - withOffset
+      x: this.positionX - withOffset, y: this.positionY - withOffset
     }
   },
 
   draw (): void {
+    const context = this.drawer!.context!
+
     const rectangle = new Path2D()
 
-    this.context!.beginPath()
+    if (this.beforeDraw != null) this.beforeDraw()
 
-    this.context!.beginPath()
-    this.context!.lineWidth = 3
+    context.beginPath()
+    context.lineWidth = 5
     rectangle.roundRect(this.positionX, this.positionY, this.width, this.height, [10])
-    this.context!.stroke()
+    context.stroke()
 
-    this.context!.strokeStyle = CanvasColor.BORDER
-    this.context!.fillStyle = CanvasColor.BACKGROUND
-    this.context!.beginPath()
-    this.context!.roundRect(this.positionX, this.positionY, this.width, this.height, [10])
+    context.strokeStyle = this.borderColor
+    context.fillStyle = this.backgroundColor
+    context.beginPath()
+    context.roundRect(this.positionX, this.positionY, this.width, this.height, [10])
 
     if (this.selected) {
-      this.context!.strokeStyle = CanvasColor.SELECTED
+      context.strokeStyle = this.selectedColor
     } else if (this.onHover) {
-      this.context!.strokeStyle = CanvasColor.ON_HOVER
+      context.strokeStyle = this.onHoverColor
     }
 
-    this.context!.stroke(rectangle)
-    this.context!.fill()
-    this.context!.closePath()
+    context.stroke(rectangle)
+    context.fill()
+    context.closePath()
+
+    const marginX: number = this.positionX + this.marginText
+
+    context.fillStyle = this.titleColor
+    context.font = 'bold 20px Arial'
+    context.fillText(TextPipe.capitalizeFirstLetter(this.drawer!.entity!.name), marginX, this.positionY + 80)
 
-    this.context!.fillStyle = CanvasColor.TITLE
-    this.context!.font = 'bold 20px Arial'
-    this.context!.fillText(this.name, this.positionX + this.marginText, this.positionY + this.topMarginTitle)
+    context.fillStyle = this.textColor
+    context.font = '20px Arial'
+    context.fillText(TextPipe.capitalizeFirstLetter(this.type!), marginX, this.positionY + 45)
 
-    this.context!.fillStyle = CanvasColor.CONTENT
-    this.context!.font = '16px Arial'
-    this.context!.fillText(this.type!, this.positionX + this.marginText, this.positionY + this.topMarginText)
+    if (this.afterDraw != null) this.afterDraw()
 
     this.path = rectangle
   }

front/src/services/board/drawer/factories/Network.factory.ts

@@ -6,7 +6,9 @@ const NetworkFactory = (): TNetworkFactory => {
   return {
     ...BaseFactory,
 
-    type: DrawerTypes.NETWORK
+    type: DrawerTypes.NETWORK,
+    backgroundColor: '#304570',
+    titleColor: '#ffffff'
   }
 }
 

front/src/services/board/drawer/factories/Service.factory.ts

@@ -1,12 +1,138 @@
 import BaseFactory from './Base.factory'
-import { type TServiceFactory } from '../../../../types/board/drawer/factories/Service.factory'
+import { type IVariableName, type TServiceFactory } from '../../../../types/board/drawer/factories/Service.factory'
 import { DrawerTypes } from '../../../../enums/DrawerTypes'
+import { type IService } from '../../../../interfaces/Service.interface'
+import { type IServiceEnvVariable } from '../../../../interfaces/ServiceVariable/EnvVariable.interface'
+import { type IServiceVolume } from '../../../../interfaces/ServiceVariable/Volume.interface'
+import { type IServicePortVariable } from '../../../../interfaces/ServiceVariable/Port.interface'
+
+const OFFSET_Y: number = 25
+const OFFSET_SECTION_Y: number = 25
+const OFFSET_ITEMS_Y: number = 30
+const OFFSET_ITEM_Y: number = 20
 
 const ServiceFactory = (): TServiceFactory => {
   return {
     ...BaseFactory,
 
-    type: DrawerTypes.SERVICE
+    type: DrawerTypes.SERVICE,
+
+    backgroundColor: '#1f2937',
+    titleColor: '#ffffff',
+
+    beforeDraw (): void {
+      const entity = this.drawer!.entity! as IService
+      let height = this.initialHeight
+
+      const envVariables: IServiceEnvVariable[] = entity.envVariables ?? []
+      if (envVariables.length > 0) {
+        height += OFFSET_SECTION_Y + OFFSET_SECTION_Y * envVariables.length
+      }
+
+      const volumes: IServiceVolume[] = entity.volumes ?? []
+      if (volumes.length > 0) {
+        height += OFFSET_SECTION_Y + OFFSET_SECTION_Y + OFFSET_Y * volumes.length
+      }
+
+      const ports: IServicePortVariable[] = entity.ports ?? []
+      if (ports.length > 0) {
+        height += OFFSET_SECTION_Y + OFFSET_SECTION_Y + OFFSET_Y * (ports.length)
+      }
+
+      this.height = height
+    },
+
+    afterDraw (): void {
+      const entity: IService = this.drawer!.entity! as IService
+      let positionY: number = this.positionY + this.topMarginText + OFFSET_SECTION_Y * 3
+
+      const envVariables: IServiceEnvVariable[] = entity.envVariables ?? []
+      if (envVariables.length > 0) {
+        this.drawEnvVariables(envVariables, positionY)
+
+        positionY += OFFSET_ITEMS_Y * 2 + OFFSET_ITEM_Y * envVariables.length
+      }
+
+      const volumes: IServiceVolume[] = entity.volumes ?? []
+      if (volumes.length > 0) {
+        this.drawVolumes(volumes, positionY)
+
+        positionY += OFFSET_ITEMS_Y * 2 + OFFSET_ITEM_Y * volumes.length
+      }
+
+      const ports: IServicePortVariable[] = entity.ports ?? []
+      if (ports.length > 0) {
+        this.drawPorts(ports, positionY)
+      }
+    },
+
+    drawPorts (variables: IServicePortVariable[], positionY: number): void {
+      const valueDecorator = (variable: IServicePortVariable): string => {
+        return `${variable.public}:${variable.private}`
+      }
+
+      const name: IVariableName<IServicePortVariable> = {
+        sectionName: 'Ports:',
+        variableName: 'Port →',
+        valueDecorator
+      }
+
+      this.drawSection<IServicePortVariable>(name, variables, positionY)
+    },
+
+    drawVolumes (variables: IServiceVolume[], positionY: number): void {
+      const valueDecorator = (variable: IServiceVolume): string => {
+        return variable.containerPath
+      }
+
+      const name: IVariableName<IServiceVolume> = {
+        sectionName: 'Volumes:',
+        variableName: 'Volume →',
+        valueDecorator
+      }
+
+      this.drawSection<IServiceVolume>(name, variables, positionY)
+    },
+
+    drawEnvVariables (variables: IServiceEnvVariable[], positionY: number): void {
+      const valueDecorator = (variable: IServiceEnvVariable): string => {
+        return variable.key
+      }
+
+      const name: IVariableName<IServiceEnvVariable> = {
+        sectionName: 'Env variables:',
+        variableName: 'Variable →',
+        valueDecorator
+      }
+
+      this.drawSection<IServiceEnvVariable>(name, variables, positionY)
+    },
+
+    drawSection<IVariable>({ sectionName, variableName, valueDecorator }: IVariableName<IVariable>, variables: IVariable[], positionY: number): void {
+      const context: CanvasRenderingContext2D = this.drawer!.context!
+      const marginX: number = this.positionX + this.marginText
+
+      context.fillStyle = this.titleColor
+      context.font = 'bold 15px Arial'
+      context.fillText(sectionName, marginX, positionY)
+
+      variables.forEach((variable: IVariable, index: number) => {
+        const value: string = valueDecorator(variable)
+        const newPositionY: number = positionY + OFFSET_ITEMS_Y + OFFSET_ITEM_Y * index
+        context.textAlign = 'left'
+
+        context.fillStyle = this.textColor
+
+        context.font = 'bold 13px Arial'
+        context.fillText(variableName, marginX, newPositionY)
+        context.textAlign = 'right'
+
+        const positionRightX: number = this.width - this.marginText + this.positionX
+        context.font = '13px Arial'
+        context.fillText(value, positionRightX, newPositionY)
+        context.textAlign = 'left'
+      })
+    }
   }
 }
 

front/src/services/board/drawer/factories/State.factory.ts

@@ -1,18 +1,29 @@
 import { type TStateFactory } from '../../../../types/board/drawer/factories/State.factory'
+import { CanvasColor } from '../../../../enums/CanvasColor'
+
+const height = 150
 
 const StateFactory: TStateFactory = {
   path: new Path2D(),
 
   positionX: 20,
   positionY: 20,
-  width: 200,
-  height: 120,
+
+  width: 250,
+
+  height,
+  initialHeight: height,
 
   marginText: 20,
   topMarginTitle: 40,
-  topMarginText: 70,
+  topMarginText: 60,
 
-  name: '',
+  backgroundColor: CanvasColor.DEFAULT_BACKGROUND,
+  borderColor: CanvasColor.BORDER,
+  titleColor: CanvasColor.TITLE,
+  textColor: CanvasColor.TEXT,
+  selectedColor: CanvasColor.SELECTED,
+  onHoverColor: CanvasColor.ON_HOVER,
 
   selected: false,
   onHover: false

front/src/services/board/drawer/factories/Volume.factory.ts

@@ -6,7 +6,8 @@ const VolumeFactory = (): TVolumeFactory => {
   return {
     ...BaseFactory,
 
-    type: DrawerTypes.VOLUME
+    type: DrawerTypes.VOLUME,
+    backgroundColor: '#e7eef5'
   }
 }
 

front/src/types/board/drawer/factories/Base.factory.ts

@@ -1,15 +1,16 @@
 import { type TStateFactory } from './State.factory'
 import { type IPosition } from '../../../../interfaces/Position.interface'
 import { type TCommonBases } from '../Common.bases'
-import { type TEntityOrCreate } from '../../../Entity'
+import { type TDrawer } from '../../../Drawer'
 
 export type TBaseFactory =
   Omit<TCommonBases & TStateFactory, 'create'>
   &
   {
-    create: (entity: TEntityOrCreate, context: CanvasRenderingContext2D) => void
-    update: (entity: TEntityOrCreate) => void
+    create: (drawer: TDrawer) => void
     position: (withOffset?: number) => IPosition
     isSelected: (position: IPosition) => boolean
     updatePosition: (position: IPosition) => void
+    beforeDraw?: () => void
+    afterDraw?: () => void
   }

front/src/types/board/drawer/factories/Service.factory.ts

@@ -1,4 +1,18 @@
 import { type TBaseFactory } from './Base.factory'
+import { type IServiceEnvVariable } from '../../../../interfaces/ServiceVariable/EnvVariable.interface'
+import { type IServicePortVariable } from '../../../../interfaces/ServiceVariable/Port.interface'
+import { type IServiceVolume } from '../../../../interfaces/ServiceVariable/Volume.interface'
+
+export interface IVariableName<IVariable> {
+  sectionName: string
+  variableName: string
+  valueDecorator: (variable: IVariable) => string
+}
 
 export type TServiceFactory =
-  TBaseFactory
+  TBaseFactory & {
+    drawSection: <IVariable>(name: IVariableName<IVariable>, variables: IVariable[], positionY: number) => void
+    drawEnvVariables: (variables: IServiceEnvVariable[], positionY: number) => void
+    drawPorts: (variables: IServicePortVariable[], positionY: number) => void
+    drawVolumes: (variables: IServiceVolume[], positionY: number) => void
+  }