Drastically improved square edge pathfinding method

Developer-Mike · Jul 1, 2024 · fcbbd50 · fcbbd50
1 parent aa3ebaf
commit fcbbd50
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 35 deletions.
diff --git a/src/canvas-extensions/advanced-styles/edge-pathfinding-methods/pathfinding-square.ts b/src/canvas-extensions/advanced-styles/edge-pathfinding-methods/pathfinding-square.ts
@@ -2,24 +2,64 @@ import { Canvas, Position, Side } from "src/@types/Canvas"
 import EdgePathfindingMethod, { EdgePath } from "./edge-pathfinding-method"
 import SvgPathHelper from "src/utils/svg-path-helper"
 import AdvancedCanvasPlugin from "src/main"
+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, fromSide: Side, toPos: Position, toSide: Side, _isDragging: boolean): EdgePath {
     let pathArray: Position[] = []
-    if (fromSide === 'bottom' || fromSide === 'top') {
-      pathArray = [
-        fromPos, 
-        { x: fromPos.x, y: fromPos.y + (toPos.y - fromPos.y) / 2 },
-        { x: toPos.x, y: fromPos.y + (toPos.y - fromPos.y) / 2 },
-        toPos
-      ]
+
+    if (fromSide === toSide) {
+      // Same side -> Make a U
+      const direction = BBoxHelper.direction(fromSide)
+
+      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 },
+          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 },
+          toPos
+        ]
+      }
+    } else if (BBoxHelper.isHorizontal(fromSide) === BBoxHelper.isHorizontal(toSide)) {
+      // Same axis, different side -> Make a Z
+      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 },
+          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 },
+          toPos
+        ]
+      }
     } else {
-      pathArray = [
-        fromPos, 
-        { x: fromPos.x + (toPos.x - fromPos.x) / 2, y: fromPos.y },
-        { x: fromPos.x + (toPos.x - fromPos.x) / 2, y: toPos.y },
-        toPos
-      ]
+      // Different axis -> Make a L
+      if (BBoxHelper.isHorizontal(fromSide)) {
+        pathArray = [
+          fromPos,
+          { x: toPos.x, y: fromPos.y },
+          toPos
+        ]
+      } else {
+        pathArray = [
+          fromPos,
+          { x: fromPos.x, y: toPos.y },
+          toPos
+        ]
+      }
     }
 
     return {

diff --git a/src/canvas-extensions/better-default-settings-canvas-extension.ts b/src/canvas-extensions/better-default-settings-canvas-extension.ts
@@ -3,6 +3,7 @@ import { CanvasEvent } from "src/core/events"
 import SettingsManager from "src/settings"
 import { FileSelectModal } from "src/utils/modal-helper"
 import CanvasExtension from "../core/canvas-extension"
+import CanvasHelper from "src/utils/canvas-helper"
 
 export default class BetterDefaultSettingsCanvasExtension  extends CanvasExtension {
   isEnabled() { return true }
@@ -61,8 +62,8 @@ export default class BetterDefaultSettingsCanvasExtension  extends CanvasExtensi
         const file = await new FileSelectModal(this.plugin.app, undefined, true).awaitInput()
 
         if (this.plugin.settings.getSetting('alignDoubleClickedNodeToGrid')) pos = {
-          x: Math.round((pos.x - (canvas.config.defaultFileNodeDimensions.width / 2)) / 20) * 20 + (canvas.config.defaultFileNodeDimensions.width / 2),
-          y: Math.round((pos.y - (canvas.config.defaultFileNodeDimensions.height / 2)) / 20) * 20 + (canvas.config.defaultFileNodeDimensions.height / 2)
+          x: Math.round((pos.x - (canvas.config.defaultFileNodeDimensions.width / 2)) / CanvasHelper.GRID_SIZE) * CanvasHelper.GRID_SIZE + (canvas.config.defaultFileNodeDimensions.width / 2),
+          y: Math.round((pos.y - (canvas.config.defaultFileNodeDimensions.height / 2)) / CanvasHelper.GRID_SIZE) * CanvasHelper.GRID_SIZE + (canvas.config.defaultFileNodeDimensions.height / 2)
         }
 
         canvas.createFileNode({
@@ -74,8 +75,8 @@ export default class BetterDefaultSettingsCanvasExtension  extends CanvasExtensi
         break
       default:
         if (this.plugin.settings.getSetting('alignDoubleClickedNodeToGrid')) pos = {
-          x: Math.round((pos.x - (canvas.config.defaultTextNodeDimensions.width / 2)) / 20) * 20 + (canvas.config.defaultTextNodeDimensions.width / 2),
-          y: Math.round((pos.y - (canvas.config.defaultTextNodeDimensions.height / 2)) / 20) * 20 + (canvas.config.defaultTextNodeDimensions.height / 2)
+          x: Math.round((pos.x - (canvas.config.defaultTextNodeDimensions.width / 2)) / CanvasHelper.GRID_SIZE) * CanvasHelper.GRID_SIZE + (canvas.config.defaultTextNodeDimensions.width / 2),
+          y: Math.round((pos.y - (canvas.config.defaultTextNodeDimensions.height / 2)) / CanvasHelper.GRID_SIZE) * CanvasHelper.GRID_SIZE + (canvas.config.defaultTextNodeDimensions.height / 2)
         }
 
         canvas.createTextNode({

diff --git a/src/canvas-extensions/collapsible-groups-canvas-extension.ts b/src/canvas-extensions/collapsible-groups-canvas-extension.ts
@@ -3,6 +3,7 @@ import { BBox, Canvas, CanvasData, CanvasNode } from "src/@types/Canvas"
 import { CanvasEvent } from "src/core/events"
 import BBoxHelper from "src/utils/bbox-helper"
 import CanvasExtension from "../core/canvas-extension"
+import CanvasHelper from "src/utils/canvas-helper"
 
 const COLLAPSE_BUTTON_ID = 'group-collapse-button'
 
@@ -87,9 +88,9 @@ export default class CollapsibleGroupsCanvasExtension extends CanvasExtension {
     data.nodes.forEach((groupNodeData) => {
       if (!groupNodeData.isCollapsed) return
 
-      const groupNodeBBox = BBoxHelper.bboxFromNodeData(groupNodeData)
+      const groupNodeBBox = CanvasHelper.getBBox([groupNodeData])
       const containedNodesData = data.nodes.filter((nodeData) =>
-        nodeData.id !== groupNodeData.id && BBoxHelper.insideBBox(BBoxHelper.bboxFromNodeData(nodeData), groupNodeBBox, false)
+        nodeData.id !== groupNodeData.id && BBoxHelper.insideBBox(CanvasHelper.getBBox([nodeData]), groupNodeBBox, false)
       )
       const containedEdgesData = data.edges.filter((edgeData) => {
         return containedNodesData.some((nodeData) => nodeData.id === edgeData.fromNode) || 

diff --git a/src/utils/bbox-helper.ts b/src/utils/bbox-helper.ts
@@ -91,12 +91,11 @@ export default class BBoxHelper {
     }
   }
 
-  static bboxFromNodeData(nodeData: CanvasNodeData): BBox {
-    return {
-      minX: nodeData.x,
-      minY: nodeData.y,
-      maxX: nodeData.x + nodeData.width,
-      maxY: nodeData.y + nodeData.height
-    }
+  static isHorizontal(side: Side): boolean {
+    return side === 'left' || side === 'right'
+  }
+
+  static direction(side: Side): number {
+    return (side === 'right' || side === 'bottom') ? 1 : -1
   }
 }
diff --git a/src/utils/canvas-helper.ts b/src/utils/canvas-helper.ts
@@ -12,16 +12,18 @@ export interface MenuOption {
 }
 
 export default class CanvasHelper {
-static canvasCommand(plugin: AdvancedCanvasPlugin, check: (canvas: Canvas) => boolean, run: (canvas: Canvas) => void): (checking: boolean) => boolean {
-  return (checking: boolean) => {
-    const canvas = plugin.getCurrentCanvas()
-    if (checking) return canvas !== null && check(canvas)
+  static readonly GRID_SIZE = 20
 
-    if (canvas) run(canvas)
+  static canvasCommand(plugin: AdvancedCanvasPlugin, check: (canvas: Canvas) => boolean, run: (canvas: Canvas) => void): (checking: boolean) => boolean {
+    return (checking: boolean) => {
+      const canvas = plugin.getCurrentCanvas()
+      if (checking) return canvas !== null && check(canvas)
 
-    return true
+      if (canvas) run(canvas)
+
+      return true
+    }
   }
-}
 
   static createQuickSettingsButton(menuOption: MenuOption): HTMLElement {
     const quickSetting = document.createElement('div')
@@ -128,7 +130,7 @@ static canvasCommand(plugin: AdvancedCanvasPlugin, check: (canvas: Canvas) => bo
     }
   }
 
-  static getBBox(canvasNodes: (CanvasNode|CanvasNodeData)[]) {
+  static getBBox(canvasNodes: (CanvasNode | CanvasNodeData)[]) {
     let minX = Infinity
     let minY = Infinity
     let maxX = -Infinity