fix/arrow and sensibility (#125)

* feat(link): adding global style * feat(link): adding global style * feat(link): adding sensibility * fix(link): arrow
RomainDreidemy · Sep 14, 2023 · cadc2c7 · cadc2c7
1 parent 02cca49
commit cadc2c7
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 11 deletions.
diff --git a/front/src/services/board/drawer/linkers/Base.linker.ts b/front/src/services/board/drawer/linkers/Base.linker.ts
@@ -35,15 +35,22 @@ const BaseLinker: TBaseLinker = {
     } else {
       this.context!.strokeStyle = CanvasColor.DEFAULT
     }
-    this.context!.lineWidth = this.width
+    this.context!.lineWidth = this.lineWidth
     this.context!.stroke(line)
 
     this.path = line
 
-    const at: IPosition = this.link!.from.drawer!.factory!.position(this.offset)
-    const to: IPosition = this.link!.to.drawer!.factory!.position(this.offset)
+    const fromPosition: IPosition = {
+      x: this.link!.from.positionX,
+      y: this.link!.from.positionY
+    }
+
+    const toPosition: IPosition = {
+      x: this.link!.to.positionX,
+      y: this.link!.to.positionY
+    }
 
-    this.drawArrow(to, at)
+    this.drawArrow(fromPosition, toPosition)
   },
 
   definePosition (connector: TConnector, line: (x: number, y: number) => void): void {
@@ -72,8 +79,8 @@ const BaseLinker: TBaseLinker = {
     }
   },
 
-  drawArrow (from: IPosition, at: IPosition): void {
-    const angle: number = Math.atan2(at.y - from.y, at.x - from.x)
+  drawArrow (from: IPosition, to: IPosition): void {
+    const angle: number = Math.atan2(from.y - to.y, from.x - to.x)
 
     this.context!.beginPath()
     if (this.selected) {

diff --git a/front/src/services/board/drawer/linkers/State.linker.ts b/front/src/services/board/drawer/linkers/State.linker.ts
@@ -5,7 +5,7 @@ const StateLinker: TStateLinker = {
 
   selected: false,
 
-  width: 2,
+  lineWidth: 2,
   offset: 5,
   arrowSize: 10
 }

diff --git a/front/src/services/canvas/Linker.manager.ts b/front/src/services/canvas/Linker.manager.ts
@@ -17,15 +17,19 @@ const LinkerManager: TLinkerManager = {
   ...ConnectorManager,
   ...DrawerManager,
 
+  lineWidth: 2,
+  arrowSize: 10,
+
   drawConnectorLine (connector: TConnector, position: IPosition): void {
     this.updateScreen()
     this.context!.beginPath()
     this.context!.strokeStyle = CanvasColor.DEFAULT
     this.context!.moveTo(connector.positionX, connector.positionY)
     this.context!.lineTo(position.x, position.y)
+    this.context!.lineWidth = this.lineWidth
     this.context!.stroke()
 
-    const arrowSize = 10
+    const arrowSize = this.arrowSize
     const angle: number = Math.atan2(position.y - connector.positionY, position.x - connector.positionX)
 
     this.context!.beginPath()

diff --git a/front/src/services/canvas/WheelEvent.manager.ts b/front/src/services/canvas/WheelEvent.manager.ts
@@ -17,6 +17,7 @@ const WheelEventManager: TWheelEventManager = {
   isInteracting: false,
   interactionDebounce: 250,
   moveThreshold: 5,
+  interactionSensibility: 2.5,
   interactionType: InteractionType.MOVE,
 
   wheelStartup (): void {
@@ -67,7 +68,10 @@ const WheelEventManager: TWheelEventManager = {
   },
 
   onMove (event: WheelEvent) {
-    const delta: IPosition = { x: event.deltaX, y: event.deltaY }
+    const delta: IPosition = {
+      x: event.deltaX / this.interactionSensibility,
+      y: event.deltaY / this.interactionSensibility
+    }
 
     this.moveDrawersByPosition(delta)
   },

diff --git a/front/src/types/board/drawer/linkers/Base.linker.ts b/front/src/types/board/drawer/linkers/Base.linker.ts
@@ -10,6 +10,6 @@ export type TBaseLinker =
   {
     update: (entity: TLinkEntity) => void
     isSelected: (Position: IPosition) => boolean
-    drawArrow: (from: IPosition, at: IPosition) => void
+    drawArrow: (from: IPosition, to: IPosition) => void
     definePosition: (connector: TConnector, line: (x: number, y: number) => void) => void
   }
diff --git a/front/src/types/board/drawer/linkers/State.linker.ts b/front/src/types/board/drawer/linkers/State.linker.ts
@@ -13,6 +13,6 @@ export interface TStateLinker {
   selected: boolean
 
   offset: number
-  width: number
+  lineWidth: number
   arrowSize: number
 }
diff --git a/front/src/types/canvas/Linker.manager.ts b/front/src/types/canvas/Linker.manager.ts
@@ -13,6 +13,8 @@ export type TLinkerManager =
   TDrawerManager &
   TConnectorManager &
   {
+    lineWidth: number
+    arrowSize: number
     drawConnectorLine: (connector: TConnector, position: IPosition) => void
     deleteLinker: (drawer: TDrawer, linkerToRemove: TLinker) => void
     findLinker: (position: IPosition) => TLinker | undefined

diff --git a/front/src/types/canvas/WheelEvent.manager.ts b/front/src/types/canvas/WheelEvent.manager.ts
@@ -12,6 +12,7 @@ export type TWheelEventManager =
   TDrawerManager &
   TLinkerManager &
   {
+    interactionSensibility: number
     interactionType?: InteractionType
     interactionDebounce: number
     moveThreshold: number