Remove LGraphNode.horizontal (#521)

* Remove LGraphNode.horizontal * nit
2026-02-10 18:10:08 +00:00 · 2025-02-12 15:11:59 -05:00
parent aa25db1dfd
commit 9abcf0fd32
5 changed files with 41 additions and 110 deletions
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ Try it in the [demo site](https://tamats.com/projects/litegraph/editor).
 - Customizable theme (colors, shapes, background)
 - Callbacks to personalize every action/drawing/event of nodes
 - Graphs can be executed in NodeJS
- Highly customizable nodes (color, shape, slots vertical or horizontal, widgets, custom rendering)
+- Highly customizable nodes (color, shape, widgets, custom rendering)
 - Easy to integrate in any JS application (one single file, no dependencies)
 - Typescript support

--- a/src/LGraphCanvas.ts
+++ b/src/LGraphCanvas.ts
@@ -2406,7 +2406,7 @@ export class LGraphCanvas implements ConnectionColorContext {
                  input: input,
                  output: null,
                  pos: pos,
-                  direction: node.horizontal !== true ? LinkDirection.RIGHT : LinkDirection.CENTER,
+                  direction: LinkDirection.RIGHT,
                })
              }

@@ -3213,29 +3213,18 @@ export class LGraphCanvas implements ConnectionColorContext {
        const input = node.inputs[i]
        const link_pos = node.getConnectionPos(true, i)
        let is_inside = false
-        if (node.horizontal) {
-          is_inside = isInRectangle(
-            canvasx,
-            canvasy,
-            link_pos[0] - 5,
-            link_pos[1] - 10,
-            10,
-            20,
-          )
-        } else {
-          // TODO: Find a cheap way to measure text, and do it on node label change instead of here
-          // Input icon width + text approximation
-          const width =
-            20 + ((input.label?.length ?? input.localized_name?.length ?? input.name?.length) || 3) * 7
-          is_inside = isInRectangle(
-            canvasx,
-            canvasy,
-            link_pos[0] - 10,
-            link_pos[1] - 10,
-            width,
-            20,
-          )
-        }
+        // TODO: Find a cheap way to measure text, and do it on node label change instead of here
+        // Input icon width + text approximation
+        const width =
+          20 + ((input.label?.length ?? input.localized_name?.length ?? input.name?.length) || 3) * 7
+        is_inside = isInRectangle(
+          canvasx,
+          canvasy,
+          link_pos[0] - 10,
+          link_pos[1] - 10,
+          width,
+          20,
+        )
        if (is_inside) {
          if (slot_pos) {
            slot_pos[0] = link_pos[0]
@@ -3260,26 +3249,14 @@ export class LGraphCanvas implements ConnectionColorContext {
    if (node.outputs) {
      for (let i = 0, l = node.outputs.length; i < l; ++i) {
        const link_pos = node.getConnectionPos(false, i)
-        let is_inside = false
-        if (node.horizontal) {
-          is_inside = isInRectangle(
-            canvasx,
-            canvasy,
-            link_pos[0] - 5,
-            link_pos[1] - 10,
-            10,
-            20,
-          )
-        } else {
-          is_inside = isInRectangle(
-            canvasx,
-            canvasy,
-            link_pos[0] - 10,
-            link_pos[1] - 10,
-            40,
-            20,
-          )
-        }
+        const is_inside = isInRectangle(
+          canvasx,
+          canvasy,
+          link_pos[0] - 10,
+          link_pos[1] - 10,
+          40,
+          20,
+        )
        if (is_inside) {
          if (slot_pos) {
            slot_pos[0] = link_pos[0]
@@ -4232,13 +4209,9 @@ export class LGraphCanvas implements ConnectionColorContext {
          let connDir = connInOrOut?.dir
          if (connDir == null) {
            if (link.output)
-              connDir = link.node.horizontal
-                ? LinkDirection.DOWN
-                : LinkDirection.RIGHT
+              connDir = LinkDirection.RIGHT
            else
-              connDir = link.node.horizontal
-                ? LinkDirection.UP
-                : LinkDirection.LEFT
+              connDir = LinkDirection.LEFT
          }
          const connShape = connInOrOut?.shape

@@ -5047,10 +5020,10 @@ export class LGraphCanvas implements ConnectionColorContext {
        if (!start_slot || !end_slot) continue
        const start_dir =
          start_slot.dir ||
-          (start_node.horizontal ? LinkDirection.DOWN : LinkDirection.RIGHT)
+          LinkDirection.RIGHT
        const end_dir =
          end_slot.dir ||
-          (node.horizontal ? LinkDirection.UP : LinkDirection.LEFT)
+          LinkDirection.LEFT

        // Has reroutes
        if (reroutes.length) {
--- a/src/LGraphNode.ts
+++ b/src/LGraphNode.ts
@@ -45,9 +45,7 @@ export interface INodePropertyInfo {
  default_value: unknown
 }

-export type INodeProperties = Dictionary<unknown> & {
-  horizontal?: boolean
-}
+export type INodeProperties = Dictionary<unknown>

 export interface IMouseOverData {
  inputId: number | null
@@ -92,7 +90,6 @@ general properties:
    + unsafe_execution: not allowed for safe execution
    + skip_repeated_outputs: when adding new outputs, it wont show if there is one already connected
    + resizable: if set to false it wont be resizable with the mouse
-    + horizontal: slots are distributed horizontally
    + widgets_start_y: widgets start at y distance from the top of the node

 flags object:
@@ -242,7 +239,6 @@ export class LGraphNode implements Positionable, IPinnable {
  _collapsed_width: number
  /** Called once at the start of every frame.  Caller may change the values in {@link out}, which will be reflected in {@link boundingRect}. */
  onBounding?(this: LGraphNode, out: Rect): void
-  horizontal?: boolean
  console?: string[]
  _level: number
  _shape?: RenderShape
@@ -2608,17 +2604,10 @@ export class LGraphNode implements Positionable, IPinnable {

    if (this.flags.collapsed) {
      const w = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH
-      if (this.horizontal) {
-        out[0] = this.pos[0] + w * 0.5
-        out[1] = is_input
-          ? this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT
-          : this.pos[1]
-      } else {
-        out[0] = is_input
-          ? this.pos[0]
-          : this.pos[0] + w
-        out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5
-      }
+      out[0] = is_input
+        ? this.pos[0]
+        : this.pos[0] + w
+      out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5
      return out
    }

@@ -2648,15 +2637,6 @@ export class LGraphNode implements Positionable, IPinnable {
      return out
    }

-    // horizontal distributed slots
-    if (this.horizontal) {
-      out[0] = this.pos[0] + (slot_number + 0.5) * (this.size[0] / num_slots)
-      out[1] = is_input
-        ? this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT
-        : this.pos[1] + this.size[1]
-      return out
-    }
-
    // default vertical slots
    out[0] = is_input
      ? this.pos[0] + offset
@@ -3100,7 +3080,7 @@ export class LGraphNode implements Positionable, IPinnable {

    const { y, colorContext, linkOverWidget, linkOverWidgetType, lowQuality = false, editorAlpha = 1 } = options
    let posY = y
-    if (this.horizontal || this.widgets_up) {
+    if (this.widgets_up) {
      posY = 2
    }
    if (this.widgets_start_y != null) posY = this.widgets_start_y
@@ -3172,24 +3152,16 @@ export class LGraphNode implements Positionable, IPinnable {
    }

    if (input_slot) {
-      let x = 0
-      let y = LiteGraph.NODE_TITLE_HEIGHT * -0.5 // center
-      if (this.horizontal) {
-        x = this._collapsed_width * 0.5
-        y = -LiteGraph.NODE_TITLE_HEIGHT
-      }
+      const x = 0
+      const y = LiteGraph.NODE_TITLE_HEIGHT * -0.5 // center
      toClass(NodeInputSlot, input_slot).drawCollapsed(ctx, {
        pos: [x, y],
      })
    }

    if (output_slot) {
-      let x = this._collapsed_width
-      let y = LiteGraph.NODE_TITLE_HEIGHT * -0.5 // center
-      if (this.horizontal) {
-        x = this._collapsed_width * 0.5
-        y = 0
-      }
+      const x = this._collapsed_width
+      const y = LiteGraph.NODE_TITLE_HEIGHT * -0.5 // center
      toClass(NodeOutputSlot, output_slot).drawCollapsed(ctx, {
        pos: [x, y],
      })
@@ -3238,7 +3210,6 @@ export class LGraphNode implements Positionable, IPinnable {
        pos,
        colorContext,
        labelColor: label_color,
-        horizontal: this.horizontal,
        lowQuality,
        renderText: !lowQuality,
        highlight,
@@ -3267,7 +3238,6 @@ export class LGraphNode implements Positionable, IPinnable {
        pos,
        colorContext,
        labelColor: label_color,
-        horizontal: this.horizontal,
        lowQuality,
        renderText: !lowQuality,
        highlight,
--- a/src/NodeSlot.ts
+++ b/src/NodeSlot.ts
@@ -21,7 +21,6 @@ interface IDrawOptions {
  colorContext: ConnectionColorContext
  labelColor?: CanvasColour
  labelPosition?: LabelPosition
-  horizontal?: boolean
  lowQuality?: boolean
  renderText?: boolean
  doStroke?: boolean
@@ -92,7 +91,6 @@ export abstract class NodeSlot implements INodeSlot {
      colorContext,
      labelColor = "#AAA",
      labelPosition = LabelPosition.Right,
-      horizontal = false,
      lowQuality = false,
      renderText = true,
      highlight = false,
@@ -116,11 +114,7 @@ export abstract class NodeSlot implements INodeSlot {
    ctx.fillStyle = this.renderingColor(colorContext)
    ctx.lineWidth = 1
    if (slot_type === SlotType.Event || slot_shape === SlotShape.Box) {
-      if (horizontal) {
-        ctx.rect(pos[0] - 5 + 0.5, pos[1] - 8 + 0.5, 10, 14)
-      } else {
-        ctx.rect(pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10)
-      }
+      ctx.rect(pos[0] - 6 + 0.5, pos[1] - 5 + 0.5, 14, 10)
    } else if (slot_shape === SlotShape.Arrow) {
      ctx.moveTo(pos[0] + 8, pos[1] + 0.5)
      ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5)
@@ -173,13 +167,13 @@ export abstract class NodeSlot implements INodeSlot {
        ctx.fillStyle = labelColor

        if (labelPosition === LabelPosition.Right) {
-          if (horizontal || this.dir == LinkDirection.UP) {
+          if (this.dir == LinkDirection.UP) {
            ctx.fillText(text, pos[0], pos[1] - 10)
          } else {
            ctx.fillText(text, pos[0] + 10, pos[1] + 5)
          }
        } else {
-          if (horizontal || this.dir == LinkDirection.DOWN) {
+          if (this.dir == LinkDirection.DOWN) {
            ctx.fillText(text, pos[0], pos[1] - 8)
          } else {
            ctx.fillText(text, pos[0] - 10, pos[1] + 5)
@@ -248,7 +242,7 @@ export class NodeInputSlot extends NodeSlot implements INodeInputSlot {

  override draw(ctx: CanvasRenderingContext2D, options: Omit<IDrawOptions, "doStroke" | "labelPosition">) {
    const originalTextAlign = ctx.textAlign
-    ctx.textAlign = options.horizontal ? "center" : "left"
+    ctx.textAlign = "left"

    super.draw(ctx, {
      ...options,
@@ -285,7 +279,7 @@ export class NodeOutputSlot extends NodeSlot implements INodeOutputSlot {
  override draw(ctx: CanvasRenderingContext2D, options: Omit<IDrawOptions, "doStroke" | "labelPosition">) {
    const originalTextAlign = ctx.textAlign
    const originalStrokeStyle = ctx.strokeStyle
-    ctx.textAlign = options.horizontal ? "center" : "right"
+    ctx.textAlign = "right"
    ctx.strokeStyle = "black"

    super.draw(ctx, {
--- a/test/snapshots/LGraph.test.ts.snap
+++ b/test/snapshots/LGraph.test.ts.snap
@@ -73,7 +73,6 @@ LGraph {
      "gotFocusAt": undefined,
      "graph": [Circular],
      "has_errors": true,
-      "horizontal": undefined,
      "id": 1,
      "ignore_remove": undefined,
      "inputs": [],
@@ -141,7 +140,6 @@ LGraph {
      "gotFocusAt": undefined,
      "graph": [Circular],
      "has_errors": true,
-      "horizontal": undefined,
      "id": 1,
      "ignore_remove": undefined,
      "inputs": [],
@@ -210,7 +208,6 @@ LGraph {
      "gotFocusAt": undefined,
      "graph": [Circular],
      "has_errors": true,
-      "horizontal": undefined,
      "id": 1,
      "ignore_remove": undefined,
      "inputs": [],
@@ -393,7 +390,6 @@ LGraph {
      "gotFocusAt": undefined,
      "graph": [Circular],
      "has_errors": true,
-      "horizontal": undefined,
      "id": 1,
      "ignore_remove": undefined,
      "inputs": [],
@@ -461,7 +457,6 @@ LGraph {
      "gotFocusAt": undefined,
      "graph": [Circular],
      "has_errors": true,
-      "horizontal": undefined,
      "id": 1,
      "ignore_remove": undefined,
      "inputs": [],
@@ -530,7 +525,6 @@ LGraph {
      "gotFocusAt": undefined,
      "graph": [Circular],
      "has_errors": true,
-      "horizontal": undefined,
      "id": 1,
      "ignore_remove": undefined,
      "inputs": [],