[Refactor] Move strokeShape from LGraphCanvas to draw (#435)

* [Refactor] Move strokeShape from LGraphCanvas to draw * Fix round radius * nit * nit * nit
2026-03-05 05:00:03 +00:00 · 2025-02-02 19:29:26 -08:00
parent a4791f6e6b
commit 817214e6da
6 changed files with 131 additions and 113 deletions
--- a/src/draw.ts
+++ b/src/draw.ts
@@ -1,6 +1,6 @@
-import type { Vector2 } from "./litegraph"
-import type { INodeSlot } from "./interfaces"
-import { LinkDirection, RenderShape } from "./types/globalEnums"
+import { LiteGraph, type Vector2 } from "./litegraph"
+import type { CanvasColour, INodeSlot, Rect } from "./interfaces"
+import { LinkDirection, RenderShape, TitleMode } from "./types/globalEnums"

 export enum SlotType {
  Array = "array",
@@ -143,3 +143,104 @@ export function drawSlot(
  ctx.strokeStyle = originalStrokeStyle
  ctx.lineWidth = originalLineWidth
 }
+
+interface IDrawSelectionBoundingOptions {
+  shape?: RenderShape
+  round_radius?: number
+  title_height?: number
+  title_mode?: TitleMode
+  colour?: CanvasColour
+  padding?: number
+  collapsed?: boolean
+  thickness?: number
+}
+
+/**
+ * Draws only the path of a shape on the canvas, without filling.
+ * Used to draw indicators for node status, e.g. "selected".
+ * @param ctx The 2D context to draw on
+ * @param area The position and size of the shape to render
+ */
+export function strokeShape(
+  ctx: CanvasRenderingContext2D,
+  area: Rect,
+  {
+    /** The shape to render */
+    shape = RenderShape.BOX,
+    /** The radius of the rounded corners for {@link RenderShape.ROUND} and {@link RenderShape.CARD} */
+    round_radius = LiteGraph.ROUND_RADIUS,
+    /** Shape will extend above the Y-axis 0 by this amount */
+    title_height = LiteGraph.NODE_TITLE_HEIGHT,
+    /** @deprecated This is node-specific: it should be removed entirely, and behaviour defined by the caller more explicitly */
+    title_mode = TitleMode.NORMAL_TITLE,
+    /** The colour that should be drawn */
+    colour = LiteGraph.NODE_BOX_OUTLINE_COLOR,
+    /** The distance between the edge of the {@link area} and the middle of the line */
+    padding = 6,
+    /** @deprecated This is node-specific: it should be removed entirely, and behaviour defined by the caller more explicitly */
+    collapsed = false,
+    /** Thickness of the line drawn (`lineWidth`) */
+    thickness = 1,
+  }: IDrawSelectionBoundingOptions = {},
+): void {
+  // Adjust area if title is transparent
+  if (title_mode === TitleMode.TRANSPARENT_TITLE) {
+    area[1] -= title_height
+    area[3] += title_height
+  }
+
+  // Set up context
+  const { lineWidth, strokeStyle } = ctx
+  ctx.lineWidth = thickness
+  ctx.globalAlpha = 0.8
+  ctx.strokeStyle = colour
+  ctx.beginPath()
+
+  // Draw shape based on type
+  const [x, y, width, height] = area
+  switch (shape) {
+  case RenderShape.BOX: {
+    ctx.rect(
+      x - padding,
+      y - padding,
+      width + 2 * padding,
+      height + 2 * padding,
+    )
+    break
+  }
+  case RenderShape.ROUND:
+  case RenderShape.CARD: {
+    const radius = round_radius + padding
+    const isCollapsed = shape === RenderShape.CARD && collapsed
+    const cornerRadii =
+        isCollapsed || shape === RenderShape.ROUND
+          ? [radius]
+          : [radius, 2, radius, 2]
+    ctx.roundRect(
+      x - padding,
+      y - padding,
+      width + 2 * padding,
+      height + 2 * padding,
+      cornerRadii,
+    )
+    break
+  }
+  case RenderShape.CIRCLE: {
+    const centerX = x + width / 2
+    const centerY = y + height / 2
+    const radius = Math.max(width, height) / 2 + padding
+    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2)
+    break
+  }
+  }
+
+  // Stroke the shape
+  ctx.stroke()
+
+  // Reset context
+  ctx.lineWidth = lineWidth
+  ctx.strokeStyle = strokeStyle
+
+  // TODO: Store and reset value properly.  Callers currently expect this behaviour (e.g. muted nodes).
+  ctx.globalAlpha = 1
+}