Remove node edge resize (#1066)

src/CanvasPointer.ts

@@ -1,4 +1,4 @@
-import type { CompassDirection } from "./interfaces"
+import type { CompassCorners } from "./interfaces"
 import type { CanvasPointerEvent } from "./types/events"
 
 import { dist2 } from "./measure"
@@ -61,7 +61,7 @@ export class CanvasPointer {
   isDown: boolean = false
 
   /** The resize handle currently being hovered or dragged */
-  resizeDirection?: CompassDirection
+  resizeDirection?: CompassCorners
 
   /**
    * If `true`, {@link eDown}, {@link eMove}, and {@link eUp} will be set to

src/LGraphCanvas.ts

@@ -203,13 +203,9 @@ interface ICreatePanelOptions {
 }
 
 const cursors = {
-  N: "ns-resize",
   NE: "nesw-resize",
-  E: "ew-resize",
   SE: "nwse-resize",
-  S: "ns-resize",
   SW: "nesw-resize",
-  W: "ew-resize",
   NW: "nwse-resize",
 } as const
 
@@ -2380,34 +2376,20 @@ export class LGraphCanvas {
 
             // Handle resize based on the direction
             switch (resizeDirection) {
-            case "N": // North (top)
-              newBounds.y = startBounds.y + deltaY
-              newBounds.height = startBounds.height - deltaY
-              break
             case "NE": // North-East (top-right)
               newBounds.y = startBounds.y + deltaY
               newBounds.width = startBounds.width + deltaX
               newBounds.height = startBounds.height - deltaY
               break
-            case "E": // East (right)
-              newBounds.width = startBounds.width + deltaX
-              break
             case "SE": // South-East (bottom-right)
               newBounds.width = startBounds.width + deltaX
               newBounds.height = startBounds.height + deltaY
               break
-            case "S": // South (bottom)
-              newBounds.height = startBounds.height + deltaY
-              break
             case "SW": // South-West (bottom-left)
               newBounds.x = startBounds.x + deltaX
               newBounds.width = startBounds.width - deltaX
               newBounds.height = startBounds.height + deltaY
               break
-            case "W": // West (left)
-              newBounds.x = startBounds.x + deltaX
-              newBounds.width = startBounds.width - deltaX
-              break
             case "NW": // North-West (top-left)
               newBounds.x = startBounds.x + deltaX
               newBounds.y = startBounds.y + deltaY

src/LGraphNode.ts

@@ -3,7 +3,7 @@ import type { IDrawBoundingOptions } from "./draw"
 import type { ReadOnlyRectangle } from "./infrastructure/Rectangle"
 import type {
   ColorOption,
-  CompassDirection,
+  CompassCorners,
   DefaultConnectionColors,
   Dictionary,
   IColorable,
@@ -1643,27 +1643,19 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
   }
 
   /**
-   * Returns which resize handle the point is over, or null if none
+   * Returns which resize corner the point is over, if any.
    * @param canvasX X position in canvas coordinates
    * @param canvasY Y position in canvas coordinates
-   * @returns Resize handle type or null
+   * @returns The compass corner the point is in, otherwise `undefined`.
    */
-  findResizeDirection(canvasX: number, canvasY: number): CompassDirection | undefined {
+  findResizeDirection(canvasX: number, canvasY: number): CompassCorners | undefined {
     if (this.resizable === false) return
 
     const { boundingRect } = this
     if (!boundingRect.containsXy(canvasX, canvasY)) return
 
     // Check corners first (they take priority over edges)
-    const cnr = boundingRect.findContainingCorner(canvasX, canvasY, LGraphNode.resizeHandleSize)
-    if (cnr) return cnr
-
-    // Edges - only need to check one axis because we already know the point is inside the node
-    const edgeSize = LGraphNode.resizeEdgeSize
-    if (canvasX - boundingRect.left < edgeSize) return "W"
-    if (boundingRect.right - canvasX < edgeSize) return "E"
-    if (canvasY - boundingRect.top < edgeSize) return "N"
-    if (boundingRect.bottom - canvasY < edgeSize) return "S"
+    return boundingRect.findContainingCorner(canvasX, canvasY, LGraphNode.resizeHandleSize)
   }
 
   /**

src/infrastructure/Rectangle.ts

@@ -1,4 +1,4 @@
-import type { CompassDirection, Point, ReadOnlyPoint, ReadOnlyRect, ReadOnlySize, ReadOnlyTypedArray, Size } from "@/interfaces"
+import type { CompassCorners, Point, ReadOnlyPoint, ReadOnlyRect, ReadOnlySize, ReadOnlyTypedArray, Size } from "@/interfaces"
 
 import { isInRectangle } from "@/measure"
 
@@ -213,7 +213,7 @@ export class Rectangle extends Float64Array {
    * @param cornerSize Each corner is treated as an inset square with this width and height.
    * @returns The compass direction of the corner that contains the point, or `undefined` if the point is not in any corner.
    */
-  findContainingCorner(x: number, y: number, cornerSize: number): CompassDirection | undefined {
+  findContainingCorner(x: number, y: number, cornerSize: number): CompassCorners | undefined {
     if (this.isInTopLeftCorner(x, y, cornerSize)) return "NW"
     if (this.isInTopRightCorner(x, y, cornerSize)) return "NE"
     if (this.isInBottomLeftCorner(x, y, cornerSize)) return "SW"

src/interfaces.ts

@@ -260,7 +260,7 @@ export interface IBoundaryNodes {
 export type Direction = "top" | "bottom" | "left" | "right"
 
 /** Resize handle positions (compass points) */
-export type CompassDirection = "N" | "NE" | "E" | "SE" | "S" | "SW" | "W" | "NW"
+export type CompassCorners = "NE" | "SE" | "SW" | "NW"
 
 /**
  * A string that represents a specific data / slot type, e.g. `STRING`.

test/LGraphNode.resize.test.ts

@@ -56,36 +56,6 @@ describe("LGraphNode resize functionality", () => {
       })
     })
 
-    describe("edges", () => {
-      test("should detect N (top) edge", () => {
-        // Top edge at y=80, but not in corners
-        expect(node.findResizeDirection(150, 80)).toBe("N")
-        expect(node.findResizeDirection(150, 84)).toBe("N")
-        expect(node.findResizeDirection(200, 80)).toBe("N")
-      })
-
-      test("should detect S (bottom) edge", () => {
-        // Bottom edge at y=250, but need to check within the 5px threshold
-        expect(node.findResizeDirection(150, 249)).toBe("S")
-        expect(node.findResizeDirection(150, 246)).toBe("S")
-        expect(node.findResizeDirection(200, 247)).toBe("S")
-      })
-
-      test("should detect W (left) edge", () => {
-        // Left edge at x=100, but not in corners
-        expect(node.findResizeDirection(100, 150)).toBe("W")
-        expect(node.findResizeDirection(104, 150)).toBe("W")
-        expect(node.findResizeDirection(100, 200)).toBe("W")
-      })
-
-      test("should detect E (right) edge", () => {
-        // Right edge at x=300, but need to check within the 5px threshold
-        expect(node.findResizeDirection(299, 150)).toBe("E")
-        expect(node.findResizeDirection(296, 150)).toBe("E")
-        expect(node.findResizeDirection(298, 200)).toBe("E")
-      })
-    })
-
     describe("priority", () => {
       test("corners should have priority over edges", () => {
         // These points are technically on both corner and edge
@@ -132,8 +102,6 @@ describe("LGraphNode resize functionality", () => {
 
         expect(node.findResizeDirection(0, -20)).toBe("NW") // Account for title bar
         expect(node.findResizeDirection(99, 99)).toBe("SE") // Bottom-right corner (100-1, 100-1)
-        expect(node.findResizeDirection(50, -20)).toBe("N")
-        expect(node.findResizeDirection(0, 50)).toBe("W")
       })
 
       test("should handle very small nodes", () => {