From b86f2b58e6065bd055a59b802e2e070d39a2a465 Mon Sep 17 00:00:00 2001 From: filtered <176114999+webfiltered@users.noreply.github.com> Date: Tue, 27 May 2025 08:10:41 +1000 Subject: [PATCH] Remove node edge resize (#1066) --- src/CanvasPointer.ts | 4 ++-- src/LGraphCanvas.ts | 18 ------------------ src/LGraphNode.ts | 18 +++++------------- src/infrastructure/Rectangle.ts | 4 ++-- src/interfaces.ts | 2 +- test/LGraphNode.resize.test.ts | 32 -------------------------------- 6 files changed, 10 insertions(+), 68 deletions(-) diff --git a/src/CanvasPointer.ts b/src/CanvasPointer.ts index fffc2cc96..eba3a0200 100644 --- a/src/CanvasPointer.ts +++ b/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 diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 16dec2bc4..a20284cd0 100644 --- a/src/LGraphCanvas.ts +++ b/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 diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index 0d1fd845e..af49f4999 100644 --- a/src/LGraphNode.ts +++ b/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) } /** diff --git a/src/infrastructure/Rectangle.ts b/src/infrastructure/Rectangle.ts index 7810ebb83..991597178 100644 --- a/src/infrastructure/Rectangle.ts +++ b/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" diff --git a/src/interfaces.ts b/src/interfaces.ts index e0e0998e3..00e1bd26b 100644 --- a/src/interfaces.ts +++ b/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`. diff --git a/test/LGraphNode.resize.test.ts b/test/LGraphNode.resize.test.ts index 0b1ba595e..5951a902f 100644 --- a/test/LGraphNode.resize.test.ts +++ b/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", () => {