Fixed square edges not aligning with grid

Author: Developer-Mike

src/canvas-extensions/advanced-styles/edge-pathfinding-methods/edge-pathfinding-method.ts

@@ -2,7 +2,7 @@ import { Canvas, Position, Side } from "src/@types/Canvas"
 import AdvancedCanvasPlugin from "src/main"
 
 export default abstract class EdgePathfindingMethod {
-  abstract getPath(plugin: AdvancedCanvasPlugin, canvas: Canvas, fromPos: Position, fromSide: Side, toPos: Position, toSide: Side, isDragging: boolean): EdgePath | null
+  abstract getPath(plugin: AdvancedCanvasPlugin, canvas: Canvas, fromPos: Position, fromBBoxSidePos: Position, fromSide: Side, toPos: Position, toBBoxSidePos: Position, toSide: Side, isDragging: boolean): EdgePath | null
 }
 
 export interface EdgePath {

src/canvas-extensions/advanced-styles/edge-pathfinding-methods/pathfinding-a-star.ts

@@ -35,7 +35,7 @@ class Node {
 }
 
 export default class EdgePathfindingAStar extends EdgePathfindingMethod {
-  getPath(plugin: AdvancedCanvasPlugin, canvas: Canvas, fromPos: Position, fromSide: Side, toPos: Position, toSide: Side, isDragging: boolean): EdgePath | null {
+  getPath(plugin: AdvancedCanvasPlugin, canvas: Canvas, fromPos: Position, _fromBBoxSidePos: Position, fromSide: Side, toPos: Position, _toBBoxSidePos: Position, toSide: Side, isDragging: boolean): EdgePath | null {
     if (isDragging && !plugin.settings.getSetting('edgeStylePathfinderPathLiveUpdate')) return null
 
     const nodeBBoxes = [...canvas.nodes.values()]

src/canvas-extensions/advanced-styles/edge-pathfinding-methods/pathfinding-direct.ts

@@ -4,7 +4,7 @@ import SvgPathHelper from "src/utils/svg-path-helper"
 import AdvancedCanvasPlugin from "src/main"
 
 export default class EdgePathfindingDirect extends EdgePathfindingMethod {
-  getPath(_plugin: AdvancedCanvasPlugin, _canvas: Canvas, fromPos: Position, _fromSide: Side, toPos: Position, _toSide: Side, _isDragging: boolean): EdgePath {
+  getPath(_plugin: AdvancedCanvasPlugin, _canvas: Canvas, fromPos: Position, _fromBBoxSidePos: Position, _fromSide: Side, toPos: Position, _toBBoxSidePos: Position, _toSide: Side, _isDragging: boolean): EdgePath {
     return {
       svgPath: SvgPathHelper.pathArrayToSvgPath([fromPos, toPos], false),
       center: {

src/canvas-extensions/advanced-styles/edge-pathfinding-methods/pathfinding-square.ts

@@ -6,7 +6,7 @@ import BBoxHelper from "src/utils/bbox-helper"
 import CanvasHelper from "src/utils/canvas-helper"
 
 export default class EdgePathfindingSquare extends EdgePathfindingMethod {
-  getPath(_plugin: AdvancedCanvasPlugin, _canvas: Canvas, fromPos: Position, fromSide: Side, toPos: Position, toSide: Side, _isDragging: boolean): EdgePath {
+  getPath(_plugin: AdvancedCanvasPlugin, _canvas: Canvas, fromPos: Position, fromBBoxSidePos: Position, fromSide: Side, toPos: Position, toBBoxSidePos: Position, toSide: Side, _isDragging: boolean): EdgePath {
     let pathArray: Position[] = []
 
     if (fromSide === toSide) {
@@ -16,15 +16,15 @@ export default class EdgePathfindingSquare extends EdgePathfindingMethod {
       if (BBoxHelper.isHorizontal(fromSide)) {
         pathArray = [
           fromPos,
-          { x: Math.max(fromPos.x, toPos.x) + direction * CanvasHelper.GRID_SIZE, y: fromPos.y },
-          { x: Math.max(fromPos.x, toPos.x) + direction * CanvasHelper.GRID_SIZE, y: toPos.y },
+          { x: Math.max(fromBBoxSidePos.x, toBBoxSidePos.x) + direction * CanvasHelper.GRID_SIZE, y: fromBBoxSidePos.y },
+          { x: Math.max(fromBBoxSidePos.x, toBBoxSidePos.x) + direction * CanvasHelper.GRID_SIZE, y: toBBoxSidePos.y },
           toPos
         ]
       } else {
         pathArray = [
           fromPos,
-          { x: fromPos.x, y: Math.max(fromPos.y, toPos.y) + direction * CanvasHelper.GRID_SIZE },
-          { x: toPos.x, y: Math.max(fromPos.y, toPos.y) + direction * CanvasHelper.GRID_SIZE },
+          { x: fromBBoxSidePos.x, y: Math.max(fromBBoxSidePos.y, toBBoxSidePos.y) + direction * CanvasHelper.GRID_SIZE },
+          { x: toBBoxSidePos.x, y: Math.max(fromBBoxSidePos.y, toBBoxSidePos.y) + direction * CanvasHelper.GRID_SIZE },
           toPos
         ]
       }
@@ -33,15 +33,15 @@ export default class EdgePathfindingSquare extends EdgePathfindingMethod {
       if (BBoxHelper.isHorizontal(fromSide)) {
         pathArray = [
           fromPos,
-          { x: fromPos.x + (toPos.x - fromPos.x) / 2, y: fromPos.y },
-          { x: fromPos.x + (toPos.x - fromPos.x) / 2, y: toPos.y },
+          { x: fromBBoxSidePos.x + (toBBoxSidePos.x - fromBBoxSidePos.x) / 2, y: fromBBoxSidePos.y },
+          { x: fromBBoxSidePos.x + (toBBoxSidePos.x - fromBBoxSidePos.x) / 2, y: toBBoxSidePos.y },
           toPos
         ]
       } else {
         pathArray = [
           fromPos,
-          { x: fromPos.x, y: fromPos.y + (toPos.y - fromPos.y) / 2 },
-          { x: toPos.x, y: fromPos.y + (toPos.y - fromPos.y) / 2 },
+          { x: fromBBoxSidePos.x, y: fromBBoxSidePos.y + (toBBoxSidePos.y - fromBBoxSidePos.y) / 2 },
+          { x: toBBoxSidePos.x, y: fromBBoxSidePos.y + (toBBoxSidePos.y - fromBBoxSidePos.y) / 2 },
           toPos
         ]
       }
@@ -50,13 +50,13 @@ export default class EdgePathfindingSquare extends EdgePathfindingMethod {
       if (BBoxHelper.isHorizontal(fromSide)) {
         pathArray = [
           fromPos,
-          { x: toPos.x, y: fromPos.y },
+          { x: toBBoxSidePos.x, y: fromBBoxSidePos.y },
           toPos
         ]
       } else {
         pathArray = [
           fromPos,
-          { x: fromPos.x, y: toPos.y },
+          { x: fromBBoxSidePos.x, y: toBBoxSidePos.y },
           toPos
         ]
       }
@@ -65,8 +65,8 @@ export default class EdgePathfindingSquare extends EdgePathfindingMethod {
     return {
       svgPath: SvgPathHelper.pathArrayToSvgPath(pathArray, false),
       center: { 
-        x: (fromPos.x + toPos.x) / 2, 
-        y: (fromPos.y + toPos.y) / 2 
+        x: (fromBBoxSidePos.x + toBBoxSidePos.x) / 2, 
+        y: (fromBBoxSidePos.y + toBBoxSidePos.y) / 2 
       },
       rotateArrows: false
     }

src/canvas-extensions/advanced-styles/edge-styles.ts

@@ -114,14 +114,17 @@ export default class EdgeStylesExtension extends CanvasExtension {
     // Set pathfinding method
     const pathfindingMethod = edgeData.styleAttributes?.pathfindingMethod
     if (pathfindingMethod) {
+      const fromBBoxSidePos = BBoxHelper.getCenterOfBBoxSide(edge.from.node.getBBox(), edge.from.side)
       const fromPos = edge.from.end === 'none' ? 
-        BBoxHelper.getCenterOfBBoxSide(edge.from.node.getBBox(), edge.from.side) :
+        fromBBoxSidePos :
         edge.bezier.from
+      
+      const toBBoxSidePos = BBoxHelper.getCenterOfBBoxSide(edge.to.node.getBBox(), edge.to.side)
       const toPos = edge.to.end === 'none' ? 
-        BBoxHelper.getCenterOfBBoxSide(edge.to.node.getBBox(), edge.to.side) :
+        toBBoxSidePos :
         edge.bezier.to
 
-      const path = new EDGE_PATHFINDING_METHODS[pathfindingMethod]().getPath(this.plugin, canvas, fromPos, edge.from.side, toPos, edge.to.side, canvas.isDragging)
+      const path = new EDGE_PATHFINDING_METHODS[pathfindingMethod]().getPath(this.plugin, canvas, fromPos, fromBBoxSidePos, edge.from.side, toPos, toBBoxSidePos, edge.to.side, canvas.isDragging)
       if (!path) return
 
       edge.center = path.center