diff --git a/README.md b/README.md index fcd5a1501..8757881bc 100755 --- 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 diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 1a204d1e5..b0a0f5db8 100644 --- 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) { diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index 770b6e456..82c4f3c10 100644 --- a/src/LGraphNode.ts +++ b/src/LGraphNode.ts @@ -45,9 +45,7 @@ export interface INodePropertyInfo { default_value: unknown } -export type INodeProperties = Dictionary & { - horizontal?: boolean -} +export type INodeProperties = Dictionary 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, diff --git a/src/NodeSlot.ts b/src/NodeSlot.ts index 4877a644f..941c56d7a 100644 --- 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) { 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) { const originalTextAlign = ctx.textAlign const originalStrokeStyle = ctx.strokeStyle - ctx.textAlign = options.horizontal ? "center" : "right" + ctx.textAlign = "right" ctx.strokeStyle = "black" super.draw(ctx, { diff --git a/test/__snapshots__/LGraph.test.ts.snap b/test/__snapshots__/LGraph.test.ts.snap index 73f18cd7d..54ed4a377 100644 --- 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": [],