| var _a, _b; | |
| import { app } from "../../scripts/app.js"; | |
| import { getWidgetConfig, mergeIfValid, setWidgetConfig, } from "../../extensions/core/widgetInputs.js"; | |
| import { rgthreeConfig } from "../../rgthree/config.js"; | |
| import { rgthree } from "./rgthree.js"; | |
| import { IoDirection, LAYOUT_CLOCKWISE, LAYOUT_LABEL_OPPOSITES, LAYOUT_LABEL_TO_DATA, addConnectionLayoutSupport, addMenuItem, getSlotLinks, isValidConnection, setConnectionsLayout, waitForCanvas, } from "./utils.js"; | |
| import { SERVICE as KEY_EVENT_SERVICE } from "./services/key_events_services.js"; | |
| import { wait } from "../../rgthree/common/shared_utils.js"; | |
| import { RgthreeBaseVirtualNode } from "./base_node.js"; | |
| import { NodeTypesString } from "./constants.js"; | |
| const CONFIG_REROUTE = ((_a = rgthreeConfig === null || rgthreeConfig === void 0 ? void 0 : rgthreeConfig["nodes"]) === null || _a === void 0 ? void 0 : _a["reroute"]) || {}; | |
| const CONFIG_FAST_REROUTE = CONFIG_REROUTE["fast_reroute"]; | |
| const CONFIG_FAST_REROUTE_ENABLED = (_b = CONFIG_FAST_REROUTE["enabled"]) !== null && _b !== void 0 ? _b : false; | |
| const CONFIG_KEY_CREATE_WHILE_LINKING = CONFIG_FAST_REROUTE["key_create_while_dragging_link"]; | |
| const CONFIG_KEY_ROTATE = CONFIG_FAST_REROUTE["key_rotate"]; | |
| const CONFIG_KEY_RESIZE = CONFIG_FAST_REROUTE["key_resize"]; | |
| const CONFIG_KEY_MOVE = CONFIG_FAST_REROUTE["key_move"]; | |
| const CONFIG_KEY_CXN_INPUT = CONFIG_FAST_REROUTE["key_connections_input"]; | |
| const CONFIG_KEY_CXN_OUTPUT = CONFIG_FAST_REROUTE["key_connections_output"]; | |
| let configWidth = Math.max(Math.round((Number(CONFIG_REROUTE["default_width"]) || 40) / 10) * 10, 10); | |
| let configHeight = Math.max(Math.round((Number(CONFIG_REROUTE["default_height"]) || 30) / 10) * 10, 10); | |
| while (configWidth * configHeight < 400) { | |
| configWidth += 10; | |
| configHeight += 10; | |
| } | |
| const configDefaultSize = [configWidth, configHeight]; | |
| const configResizable = !!CONFIG_REROUTE["default_resizable"]; | |
| let configLayout = CONFIG_REROUTE["default_layout"]; | |
| if (!Array.isArray(configLayout)) { | |
| configLayout = ["Left", "Right"]; | |
| } | |
| if (!LAYOUT_LABEL_TO_DATA[configLayout[0]]) { | |
| configLayout[0] = "Left"; | |
| } | |
| if (!LAYOUT_LABEL_TO_DATA[configLayout[1]] || configLayout[0] == configLayout[1]) { | |
| configLayout[1] = LAYOUT_LABEL_OPPOSITES[configLayout[0]]; | |
| } | |
| class RerouteService { | |
| constructor() { | |
| this.isFastLinking = false; | |
| this.handledNewRerouteKeypress = false; | |
| this.connectingData = null; | |
| this.fastReroutesHistory = []; | |
| this.handleLinkingKeydownBound = this.handleLinkingKeydown.bind(this); | |
| this.handleLinkingKeyupBound = this.handleLinkingKeyup.bind(this); | |
| if (CONFIG_FAST_REROUTE_ENABLED && (CONFIG_KEY_CREATE_WHILE_LINKING === null || CONFIG_KEY_CREATE_WHILE_LINKING === void 0 ? void 0 : CONFIG_KEY_CREATE_WHILE_LINKING.trim())) { | |
| this.onCanvasSetUpListenerForLinking(); | |
| } | |
| } | |
| async onCanvasSetUpListenerForLinking() { | |
| const canvas = await waitForCanvas(); | |
| const canvasProperty = true ? 'connecting_links' : 'connecting_node'; | |
| canvas[`_${canvasProperty}`]; | |
| const thisService = this; | |
| Object.defineProperty(canvas, canvasProperty, { | |
| get: function () { | |
| return this[`_${canvasProperty}`]; | |
| }, | |
| set: function (value) { | |
| var _a; | |
| const isValNull = !value || !(value === null || value === void 0 ? void 0 : value.length); | |
| const isPropNull = !this[`_${canvasProperty}`] || !((_a = this[`_${canvasProperty}`]) === null || _a === void 0 ? void 0 : _a.length); | |
| const isStartingLinking = !isValNull && isPropNull; | |
| const isStoppingLinking = !isPropNull && isValNull; | |
| this[`_${canvasProperty}`] = value; | |
| if (isStartingLinking) { | |
| thisService.startingLinking(); | |
| } | |
| if (isStoppingLinking) { | |
| thisService.stoppingLinking(); | |
| thisService.connectingData = null; | |
| } | |
| }, | |
| }); | |
| } | |
| startingLinking() { | |
| this.isFastLinking = true; | |
| KEY_EVENT_SERVICE.addEventListener("keydown", this.handleLinkingKeydownBound); | |
| KEY_EVENT_SERVICE.addEventListener("keyup", this.handleLinkingKeyupBound); | |
| } | |
| stoppingLinking() { | |
| this.isFastLinking = false; | |
| this.fastReroutesHistory = []; | |
| KEY_EVENT_SERVICE.removeEventListener("keydown", this.handleLinkingKeydownBound); | |
| KEY_EVENT_SERVICE.removeEventListener("keyup", this.handleLinkingKeyupBound); | |
| } | |
| handleLinkingKeydown(event) { | |
| if (!this.handledNewRerouteKeypress && | |
| KEY_EVENT_SERVICE.areOnlyKeysDown(CONFIG_KEY_CREATE_WHILE_LINKING)) { | |
| this.handledNewRerouteKeypress = true; | |
| this.insertNewRerouteWhileLinking(); | |
| } | |
| } | |
| handleLinkingKeyup(event) { | |
| if (this.handledNewRerouteKeypress && | |
| !KEY_EVENT_SERVICE.areOnlyKeysDown(CONFIG_KEY_CREATE_WHILE_LINKING)) { | |
| this.handledNewRerouteKeypress = false; | |
| } | |
| } | |
| getConnectingData() { | |
| var _a, _b; | |
| const oldCanvas = app.canvas; | |
| if (oldCanvas.connecting_node && oldCanvas.connecting_slot != null && ((_a = oldCanvas.connecting_pos) === null || _a === void 0 ? void 0 : _a.length)) { | |
| return { | |
| node: oldCanvas.connecting_node, | |
| input: oldCanvas.connecting_input, | |
| output: oldCanvas.connecting_output, | |
| slot: oldCanvas.connecting_slot, | |
| pos: [...oldCanvas.connecting_pos], | |
| }; | |
| } | |
| const canvas = app.canvas; | |
| if ((_b = canvas.connecting_links) === null || _b === void 0 ? void 0 : _b.length) { | |
| const link = canvas.connecting_links[0]; | |
| return { | |
| node: link.node, | |
| input: link.input, | |
| output: link.output, | |
| slot: link.slot, | |
| pos: [...link.pos], | |
| }; | |
| } | |
| throw new Error("Error, handling linking keydown, but there's no link."); | |
| } | |
| setCanvasConnectingData(ctx) { | |
| var _a, _b; | |
| const oldCanvas = app.canvas; | |
| if (oldCanvas.connecting_node && oldCanvas.connecting_slot != null && ((_a = oldCanvas.connecting_pos) === null || _a === void 0 ? void 0 : _a.length)) { | |
| oldCanvas.connecting_node = ctx.node; | |
| oldCanvas.connecting_input = ctx.input; | |
| oldCanvas.connecting_output = ctx.output; | |
| oldCanvas.connecting_slot = ctx.slot; | |
| oldCanvas.connecting_pos = ctx.pos; | |
| } | |
| const canvas = app.canvas; | |
| if ((_b = canvas.connecting_links) === null || _b === void 0 ? void 0 : _b.length) { | |
| const link = canvas.connecting_links[0]; | |
| link.node = ctx.node; | |
| link.input = ctx.input; | |
| link.output = ctx.output; | |
| link.slot = ctx.slot; | |
| link.pos = ctx.pos; | |
| } | |
| } | |
| insertNewRerouteWhileLinking() { | |
| var _a; | |
| const canvas = app.canvas; | |
| this.connectingData = this.getConnectingData(); | |
| if (!this.connectingData) { | |
| throw new Error("Error, handling linking keydown, but there's no link."); | |
| } | |
| const data = this.connectingData; | |
| const node = LiteGraph.createNode("Reroute (rgthree)"); | |
| const entry = { | |
| node, | |
| previous: { ...this.connectingData }, | |
| current: undefined, | |
| }; | |
| this.fastReroutesHistory.push(entry); | |
| let connectingDir = (_a = (data.input || data.output)) === null || _a === void 0 ? void 0 : _a.dir; | |
| if (!connectingDir) { | |
| connectingDir = data.input ? LiteGraph.LEFT : LiteGraph.RIGHT; | |
| } | |
| let newPos = canvas.convertEventToCanvasOffset({ | |
| clientX: Math.round(canvas.last_mouse_position[0] / 10) * 10, | |
| clientY: Math.round(canvas.last_mouse_position[1] / 10) * 10, | |
| }); | |
| entry.node.pos = newPos; | |
| canvas.graph.add(entry.node); | |
| canvas.selectNode(entry.node); | |
| const distX = entry.node.pos[0] - data.pos[0]; | |
| const distY = entry.node.pos[1] - data.pos[1]; | |
| const layout = ["Left", "Right"]; | |
| if (distX > 0 && Math.abs(distX) > Math.abs(distY)) { | |
| layout[0] = data.output ? "Left" : "Right"; | |
| layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]]; | |
| node.pos[0] -= node.size[0] + 10; | |
| node.pos[1] -= Math.round(node.size[1] / 2 / 10) * 10; | |
| } | |
| else if (distX < 0 && Math.abs(distX) > Math.abs(distY)) { | |
| layout[0] = data.output ? "Right" : "Left"; | |
| layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]]; | |
| node.pos[1] -= Math.round(node.size[1] / 2 / 10) * 10; | |
| } | |
| else if (distY < 0 && Math.abs(distY) > Math.abs(distX)) { | |
| layout[0] = data.output ? "Bottom" : "Top"; | |
| layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]]; | |
| node.pos[0] -= Math.round(node.size[0] / 2 / 10) * 10; | |
| } | |
| else if (distY > 0 && Math.abs(distY) > Math.abs(distX)) { | |
| layout[0] = data.output ? "Top" : "Bottom"; | |
| layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]]; | |
| node.pos[0] -= Math.round(node.size[0] / 2 / 10) * 10; | |
| node.pos[1] -= node.size[1] + 10; | |
| } | |
| setConnectionsLayout(entry.node, layout); | |
| if (data.output) { | |
| data.node.connect(data.slot, entry.node, 0); | |
| data.node = entry.node; | |
| data.output = entry.node.outputs[0]; | |
| data.slot = 0; | |
| data.pos = entry.node.getConnectionPos(false, 0); | |
| } | |
| else { | |
| entry.node.connect(0, data.node, data.slot); | |
| data.node = entry.node; | |
| data.input = entry.node.inputs[0]; | |
| data.slot = 0; | |
| data.pos = entry.node.getConnectionPos(true, 0); | |
| } | |
| this.setCanvasConnectingData(data); | |
| entry.current = { ...this.connectingData }; | |
| app.graph.setDirtyCanvas(true, true); | |
| } | |
| handleMoveOrResizeNodeMaybeWhileDragging(node) { | |
| const data = this.connectingData; | |
| if (this.isFastLinking && node === (data === null || data === void 0 ? void 0 : data.node)) { | |
| const entry = this.fastReroutesHistory[this.fastReroutesHistory.length - 1]; | |
| if (entry) { | |
| data.pos = entry.node.getConnectionPos(!!data.input, 0); | |
| this.setCanvasConnectingData(data); | |
| } | |
| } | |
| } | |
| handleRemovedNodeMaybeWhileDragging(node) { | |
| const currentEntry = this.fastReroutesHistory[this.fastReroutesHistory.length - 1]; | |
| if ((currentEntry === null || currentEntry === void 0 ? void 0 : currentEntry.node) === node) { | |
| this.setCanvasConnectingData(currentEntry.previous); | |
| this.fastReroutesHistory.splice(this.fastReroutesHistory.length - 1, 1); | |
| if (currentEntry.previous.node) { | |
| app.canvas.selectNode(currentEntry.previous.node); | |
| } | |
| } | |
| } | |
| } | |
| const SERVICE = new RerouteService(); | |
| class RerouteNode extends RgthreeBaseVirtualNode { | |
| constructor(title = RerouteNode.title) { | |
| super(title); | |
| this.comfyClass = NodeTypesString.REROUTE; | |
| this.isVirtualNode = true; | |
| this.hideSlotLabels = true; | |
| this.schedulePromise = null; | |
| this.defaultConnectionsLayout = Array.from(configLayout); | |
| this.shortcuts = { | |
| rotate: { keys: CONFIG_KEY_ROTATE, state: false }, | |
| connection_input: { keys: CONFIG_KEY_CXN_INPUT, state: false }, | |
| connection_output: { keys: CONFIG_KEY_CXN_OUTPUT, state: false }, | |
| resize: { | |
| keys: CONFIG_KEY_RESIZE, | |
| state: false, | |
| initialMousePos: [-1, -1], | |
| initialNodeSize: [-1, -1], | |
| initialNodePos: [-1, -1], | |
| resizeOnSide: [-1, -1], | |
| }, | |
| move: { | |
| keys: CONFIG_KEY_MOVE, | |
| state: false, | |
| initialMousePos: [-1, -1], | |
| initialNodePos: [-1, -1], | |
| }, | |
| }; | |
| this.onConstructed(); | |
| } | |
| onConstructed() { | |
| var _a; | |
| this.setResizable((_a = this.properties["resizable"]) !== null && _a !== void 0 ? _a : configResizable); | |
| this.size = RerouteNode.size; | |
| this.addInput("", "*"); | |
| this.addOutput("", "*"); | |
| setTimeout(() => this.applyNodeSize(), 20); | |
| return super.onConstructed(); | |
| } | |
| configure(info) { | |
| var _a, _b, _c; | |
| if ((_a = info.outputs) === null || _a === void 0 ? void 0 : _a.length) { | |
| info.outputs.length = 1; | |
| } | |
| if ((_b = info.inputs) === null || _b === void 0 ? void 0 : _b.length) { | |
| info.inputs.length = 1; | |
| } | |
| super.configure(info); | |
| this.configuring = true; | |
| this.setResizable((_c = this.properties["resizable"]) !== null && _c !== void 0 ? _c : configResizable); | |
| this.applyNodeSize(); | |
| this.configuring = false; | |
| } | |
| setResizable(resizable) { | |
| this.properties["resizable"] = !!resizable; | |
| this.resizable = this.properties["resizable"]; | |
| } | |
| clone() { | |
| const cloned = super.clone(); | |
| cloned.inputs[0].type = "*"; | |
| cloned.outputs[0].type = "*"; | |
| return cloned; | |
| } | |
| onConnectionsChange(type, _slotIndex, connected, _link_info, _ioSlot) { | |
| if (connected && type === LiteGraph.OUTPUT) { | |
| const types = new Set(this.outputs[0].links.map((l) => app.graph.links[l].type).filter((t) => t !== "*")); | |
| if (types.size > 1) { | |
| const linksToDisconnect = []; | |
| for (let i = 0; i < this.outputs[0].links.length - 1; i++) { | |
| const linkId = this.outputs[0].links[i]; | |
| const link = app.graph.links[linkId]; | |
| linksToDisconnect.push(link); | |
| } | |
| for (const link of linksToDisconnect) { | |
| const node = app.graph.getNodeById(link.target_id); | |
| node.disconnectInput(link.target_slot); | |
| } | |
| } | |
| } | |
| this.scheduleStabilize(); | |
| } | |
| onDrawForeground(ctx, canvas) { | |
| var _a, _b, _c, _d; | |
| if ((_a = this.properties) === null || _a === void 0 ? void 0 : _a["showLabel"]) { | |
| const low_quality = ((_b = canvas === null || canvas === void 0 ? void 0 : canvas.ds) === null || _b === void 0 ? void 0 : _b.scale) && canvas.ds.scale < 0.6; | |
| if (low_quality || this.size[0] <= 10) { | |
| return; | |
| } | |
| const fontSize = Math.min(14, (this.size[1] * 0.65) | 0); | |
| ctx.save(); | |
| ctx.fillStyle = "#888"; | |
| ctx.font = `${fontSize}px Arial`; | |
| ctx.textAlign = "center"; | |
| ctx.textBaseline = "middle"; | |
| ctx.fillText(String(this.title && this.title !== RerouteNode.title | |
| ? this.title | |
| : ((_d = (_c = this.outputs) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.type) || ""), this.size[0] / 2, this.size[1] / 2, this.size[0] - 30); | |
| ctx.restore(); | |
| } | |
| } | |
| findInputSlot(name) { | |
| return 0; | |
| } | |
| findOutputSlot(name) { | |
| return 0; | |
| } | |
| disconnectOutput(slot, targetNode) { | |
| return super.disconnectOutput(slot, targetNode); | |
| } | |
| disconnectInput(slot) { | |
| var _a; | |
| if (rgthree.replacingReroute != null && ((_a = this.inputs[0]) === null || _a === void 0 ? void 0 : _a.link)) { | |
| const graph = app.graph; | |
| const link = graph.links[this.inputs[0].link]; | |
| const node = graph.getNodeById(link === null || link === void 0 ? void 0 : link.origin_id); | |
| if (rgthree.replacingReroute !== (node === null || node === void 0 ? void 0 : node.id)) { | |
| return false; | |
| } | |
| } | |
| return super.disconnectInput(slot); | |
| } | |
| scheduleStabilize(ms = 64) { | |
| if (!this.schedulePromise) { | |
| this.schedulePromise = new Promise((resolve) => { | |
| setTimeout(() => { | |
| this.schedulePromise = null; | |
| this.stabilize(); | |
| resolve(); | |
| }, ms); | |
| }); | |
| } | |
| return this.schedulePromise; | |
| } | |
| stabilize() { | |
| var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l; | |
| if (this.configuring) { | |
| return; | |
| } | |
| let currentNode = this; | |
| let updateNodes = []; | |
| let input = null; | |
| let inputType = null; | |
| let inputNode = null; | |
| let inputNodeOutputSlot = null; | |
| while (currentNode) { | |
| updateNodes.unshift(currentNode); | |
| const linkId = currentNode.inputs[0].link; | |
| if (linkId !== null) { | |
| const link = app.graph.links[linkId]; | |
| const node = app.graph.getNodeById(link.origin_id); | |
| if (!node) { | |
| app.graph.removeLink(linkId); | |
| currentNode = null; | |
| break; | |
| } | |
| const type = node.constructor.type; | |
| if (type === null || type === void 0 ? void 0 : type.includes("Reroute")) { | |
| if (node === this) { | |
| currentNode.disconnectInput(link.target_slot); | |
| currentNode = null; | |
| } | |
| else { | |
| currentNode = node; | |
| } | |
| } | |
| else { | |
| inputNode = node; | |
| inputNodeOutputSlot = link.origin_slot; | |
| input = (_a = node.outputs[inputNodeOutputSlot]) !== null && _a !== void 0 ? _a : null; | |
| inputType = (_b = input === null || input === void 0 ? void 0 : input.type) !== null && _b !== void 0 ? _b : null; | |
| break; | |
| } | |
| } | |
| else { | |
| currentNode = null; | |
| break; | |
| } | |
| } | |
| const nodes = [this]; | |
| let outputNode = null; | |
| let outputType = null; | |
| let outputWidgetConfig = null; | |
| let outputWidget = null; | |
| while (nodes.length) { | |
| currentNode = nodes.pop(); | |
| const outputs = (currentNode.outputs ? currentNode.outputs[0].links : []) || []; | |
| if (outputs.length) { | |
| for (const linkId of outputs) { | |
| const link = app.graph.links[linkId]; | |
| if (!link) | |
| continue; | |
| const node = app.graph.getNodeById(link.target_id); | |
| if (!node) | |
| continue; | |
| const type = node.constructor.type; | |
| if (type === null || type === void 0 ? void 0 : type.includes("Reroute")) { | |
| nodes.push(node); | |
| updateNodes.push(node); | |
| } | |
| else { | |
| const output = (_d = (_c = node.inputs) === null || _c === void 0 ? void 0 : _c[link.target_slot]) !== null && _d !== void 0 ? _d : null; | |
| const nodeOutType = output === null || output === void 0 ? void 0 : output.type; | |
| if (nodeOutType == null) { | |
| console.warn(`[rgthree] Reroute - Connected node ${node.id} does not have type information for ` + | |
| `slot ${link.target_slot}. Skipping connection enforcement, but something is odd ` + | |
| `with that node.`); | |
| } | |
| else if (inputType && | |
| inputType !== "*" && | |
| nodeOutType !== "*" && | |
| !isValidConnection(input, output)) { | |
| console.warn(`[rgthree] Reroute - Disconnecting connected node's input (${node.id}.${link.target_slot}) (${node.type}) because its type (${String(nodeOutType)}) does not match the reroute type (${String(inputType)})`); | |
| node.disconnectInput(link.target_slot); | |
| } | |
| else { | |
| outputType = nodeOutType; | |
| outputNode = node; | |
| outputWidgetConfig = null; | |
| outputWidget = null; | |
| if (output === null || output === void 0 ? void 0 : output.widget) { | |
| try { | |
| const config = getWidgetConfig(output); | |
| if (!outputWidgetConfig && config) { | |
| outputWidgetConfig = (_e = config[1]) !== null && _e !== void 0 ? _e : {}; | |
| outputType = config[0]; | |
| if (!outputWidget) { | |
| outputWidget = (_f = outputNode.widgets) === null || _f === void 0 ? void 0 : _f.find((w) => { var _a; return w.name === ((_a = output === null || output === void 0 ? void 0 : output.widget) === null || _a === void 0 ? void 0 : _a.name); }); | |
| } | |
| const merged = mergeIfValid(output, [config[0], outputWidgetConfig]); | |
| if (merged.customConfig) { | |
| outputWidgetConfig = merged.customConfig; | |
| } | |
| } | |
| } | |
| catch (e) { | |
| console.error("[rgthree] Could not propagate widget infor for reroute; maybe ComfyUI updated?"); | |
| outputWidgetConfig = null; | |
| outputWidget = null; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| else { | |
| } | |
| } | |
| const displayType = inputType || outputType || "*"; | |
| const color = LGraphCanvas.link_type_colors[displayType]; | |
| for (const node of updateNodes) { | |
| node.outputs[0].type = inputType || "*"; | |
| node.__outputType = displayType; | |
| node.outputs[0].name = (input === null || input === void 0 ? void 0 : input.name) || ""; | |
| node.size = node.computeSize(); | |
| (_h = (_g = node).applyNodeSize) === null || _h === void 0 ? void 0 : _h.call(_g); | |
| for (const l of node.outputs[0].links || []) { | |
| const link = app.graph.links[l]; | |
| if (link) { | |
| link.color = color; | |
| } | |
| } | |
| try { | |
| if (outputWidgetConfig && outputWidget && outputType) { | |
| node.inputs[0].widget = { name: "value" }; | |
| setWidgetConfig(node.inputs[0], [outputType !== null && outputType !== void 0 ? outputType : displayType, outputWidgetConfig], outputWidget); | |
| } | |
| else { | |
| setWidgetConfig(node.inputs[0], null); | |
| } | |
| } | |
| catch (e) { | |
| console.error("[rgthree] Could not set widget config for reroute; maybe ComfyUI updated?"); | |
| outputWidgetConfig = null; | |
| outputWidget = null; | |
| if ((_j = node.inputs[0]) === null || _j === void 0 ? void 0 : _j.widget) { | |
| delete node.inputs[0].widget; | |
| } | |
| } | |
| } | |
| if (inputNode && inputNodeOutputSlot != null) { | |
| const links = inputNode.outputs[inputNodeOutputSlot].links; | |
| for (const l of links || []) { | |
| const link = app.graph.links[l]; | |
| if (link) { | |
| link.color = color; | |
| } | |
| } | |
| } | |
| (_k = inputNode === null || inputNode === void 0 ? void 0 : inputNode.onConnectionsChainChange) === null || _k === void 0 ? void 0 : _k.call(inputNode); | |
| (_l = outputNode === null || outputNode === void 0 ? void 0 : outputNode.onConnectionsChainChange) === null || _l === void 0 ? void 0 : _l.call(outputNode); | |
| app.graph.setDirtyCanvas(true, true); | |
| } | |
| setSize(size) { | |
| const oldSize = [...this.size]; | |
| const newSize = [...size]; | |
| super.setSize(newSize); | |
| this.properties["size"] = [...this.size]; | |
| this.stabilizeLayout(oldSize, newSize); | |
| } | |
| stabilizeLayout(oldSize, newSize) { | |
| if (newSize[0] === 10 || newSize[1] === 10) { | |
| const props = this.properties; | |
| props["connections_layout"] = props["connections_layout"] || ["Left", "Right"]; | |
| const layout = props["connections_layout"]; | |
| props["connections_dir"] = props["connections_dir"] || [-1, -1]; | |
| const dir = props["connections_dir"]; | |
| if (oldSize[0] > 10 && newSize[0] === 10) { | |
| dir[0] = LiteGraph.DOWN; | |
| dir[1] = LiteGraph.UP; | |
| if (layout[0] === "Bottom") { | |
| layout[1] = "Top"; | |
| } | |
| else if (layout[1] === "Top") { | |
| layout[0] = "Bottom"; | |
| } | |
| else { | |
| layout[0] = "Top"; | |
| layout[1] = "Bottom"; | |
| dir[0] = LiteGraph.UP; | |
| dir[1] = LiteGraph.DOWN; | |
| } | |
| this.setDirtyCanvas(true, true); | |
| } | |
| else if (oldSize[1] > 10 && newSize[1] === 10) { | |
| dir[0] = LiteGraph.RIGHT; | |
| dir[1] = LiteGraph.LEFT; | |
| if (layout[0] === "Right") { | |
| layout[1] = "Left"; | |
| } | |
| else if (layout[1] === "Left") { | |
| layout[0] = "Right"; | |
| } | |
| else { | |
| layout[0] = "Left"; | |
| layout[1] = "Right"; | |
| dir[0] = LiteGraph.LEFT; | |
| dir[1] = LiteGraph.RIGHT; | |
| } | |
| this.setDirtyCanvas(true, true); | |
| } | |
| } | |
| SERVICE.handleMoveOrResizeNodeMaybeWhileDragging(this); | |
| } | |
| applyNodeSize() { | |
| this.properties["size"] = this.properties["size"] || RerouteNode.size; | |
| this.properties["size"] = [ | |
| Number(this.properties["size"][0]), | |
| Number(this.properties["size"][1]), | |
| ]; | |
| this.size = this.properties["size"]; | |
| app.graph.setDirtyCanvas(true, true); | |
| } | |
| rotate(degrees) { | |
| const w = this.size[0]; | |
| const h = this.size[1]; | |
| this.properties["connections_layout"] = | |
| this.properties["connections_layout"] || this.defaultConnectionsLayout; | |
| const inputDirIndex = LAYOUT_CLOCKWISE.indexOf(this.properties["connections_layout"][0]); | |
| const outputDirIndex = LAYOUT_CLOCKWISE.indexOf(this.properties["connections_layout"][1]); | |
| if (degrees == 90 || degrees === -90) { | |
| if (degrees === -90) { | |
| this.properties["connections_layout"][0] = | |
| LAYOUT_CLOCKWISE[(((inputDirIndex - 1) % 4) + 4) % 4]; | |
| this.properties["connections_layout"][1] = | |
| LAYOUT_CLOCKWISE[(((outputDirIndex - 1) % 4) + 4) % 4]; | |
| } | |
| else { | |
| this.properties["connections_layout"][0] = | |
| LAYOUT_CLOCKWISE[(((inputDirIndex + 1) % 4) + 4) % 4]; | |
| this.properties["connections_layout"][1] = | |
| LAYOUT_CLOCKWISE[(((outputDirIndex + 1) % 4) + 4) % 4]; | |
| } | |
| } | |
| else if (degrees === 180) { | |
| this.properties["connections_layout"][0] = | |
| LAYOUT_CLOCKWISE[(((inputDirIndex + 2) % 4) + 4) % 4]; | |
| this.properties["connections_layout"][1] = | |
| LAYOUT_CLOCKWISE[(((outputDirIndex + 2) % 4) + 4) % 4]; | |
| } | |
| this.setSize([h, w]); | |
| } | |
| manuallyHandleMove(event) { | |
| const shortcut = this.shortcuts.move; | |
| if (shortcut.state) { | |
| const diffX = Math.round((event.clientX - shortcut.initialMousePos[0]) / 10) * 10; | |
| const diffY = Math.round((event.clientY - shortcut.initialMousePos[1]) / 10) * 10; | |
| this.pos[0] = shortcut.initialNodePos[0] + diffX; | |
| this.pos[1] = shortcut.initialNodePos[1] + diffY; | |
| this.setDirtyCanvas(true, true); | |
| SERVICE.handleMoveOrResizeNodeMaybeWhileDragging(this); | |
| } | |
| } | |
| manuallyHandleResize(event) { | |
| const shortcut = this.shortcuts.resize; | |
| if (shortcut.state) { | |
| let diffX = Math.round((event.clientX - shortcut.initialMousePos[0]) / 10) * 10; | |
| let diffY = Math.round((event.clientY - shortcut.initialMousePos[1]) / 10) * 10; | |
| diffX *= shortcut.resizeOnSide[0] === LiteGraph.LEFT ? -1 : 1; | |
| diffY *= shortcut.resizeOnSide[1] === LiteGraph.UP ? -1 : 1; | |
| const oldSize = [...this.size]; | |
| this.setSize([ | |
| Math.max(10, shortcut.initialNodeSize[0] + diffX), | |
| Math.max(10, shortcut.initialNodeSize[1] + diffY), | |
| ]); | |
| if (shortcut.resizeOnSide[0] === LiteGraph.LEFT && oldSize[0] > 10) { | |
| this.pos[0] = shortcut.initialNodePos[0] - diffX; | |
| } | |
| if (shortcut.resizeOnSide[1] === LiteGraph.UP && oldSize[1] > 10) { | |
| this.pos[1] = shortcut.initialNodePos[1] - diffY; | |
| } | |
| this.setDirtyCanvas(true, true); | |
| } | |
| } | |
| cycleConnection(ioDir) { | |
| var _a, _b; | |
| const props = this.properties; | |
| props["connections_layout"] = props["connections_layout"] || ["Left", "Right"]; | |
| const propIdx = ioDir == IoDirection.INPUT ? 0 : 1; | |
| const oppositeIdx = propIdx ? 0 : 1; | |
| let currentLayout = props["connections_layout"][propIdx]; | |
| let oppositeLayout = props["connections_layout"][oppositeIdx]; | |
| if (this.size[0] === 10 || this.size[1] === 10) { | |
| props["connections_dir"] = props["connections_dir"] || [-1, -1]; | |
| let currentDir = props["connections_dir"][propIdx]; | |
| const options = this.size[0] === 10 | |
| ? currentLayout === "Bottom" | |
| ? [LiteGraph.DOWN, LiteGraph.RIGHT, LiteGraph.LEFT] | |
| : [LiteGraph.UP, LiteGraph.LEFT, LiteGraph.RIGHT] | |
| : currentLayout === "Right" | |
| ? [LiteGraph.RIGHT, LiteGraph.DOWN, LiteGraph.UP] | |
| : [LiteGraph.LEFT, LiteGraph.UP, LiteGraph.DOWN]; | |
| let idx = options.indexOf(currentDir); | |
| let next = (_a = options[idx + 1]) !== null && _a !== void 0 ? _a : options[0]; | |
| this.properties["connections_dir"][propIdx] = next; | |
| return; | |
| } | |
| let next = currentLayout; | |
| do { | |
| let idx = LAYOUT_CLOCKWISE.indexOf(next); | |
| next = (_b = LAYOUT_CLOCKWISE[idx + 1]) !== null && _b !== void 0 ? _b : LAYOUT_CLOCKWISE[0]; | |
| } while (next === oppositeLayout); | |
| this.properties["connections_layout"][propIdx] = next; | |
| this.setDirtyCanvas(true, true); | |
| } | |
| onMouseMove(event) { | |
| if (this.shortcuts.move.state) { | |
| const shortcut = this.shortcuts.move; | |
| if (shortcut.initialMousePos[0] === -1) { | |
| shortcut.initialMousePos[0] = event.clientX; | |
| shortcut.initialMousePos[1] = event.clientY; | |
| shortcut.initialNodePos[0] = this.pos[0]; | |
| shortcut.initialNodePos[1] = this.pos[1]; | |
| } | |
| this.manuallyHandleMove(event); | |
| } | |
| else if (this.shortcuts.resize.state) { | |
| const shortcut = this.shortcuts.resize; | |
| if (shortcut.initialMousePos[0] === -1) { | |
| shortcut.initialMousePos[0] = event.clientX; | |
| shortcut.initialMousePos[1] = event.clientY; | |
| shortcut.initialNodeSize[0] = this.size[0]; | |
| shortcut.initialNodeSize[1] = this.size[1]; | |
| shortcut.initialNodePos[0] = this.pos[0]; | |
| shortcut.initialNodePos[1] = this.pos[1]; | |
| const canvas = app.canvas; | |
| const offset = canvas.convertEventToCanvasOffset(event); | |
| shortcut.resizeOnSide[0] = this.pos[0] > offset[0] ? LiteGraph.LEFT : LiteGraph.RIGHT; | |
| shortcut.resizeOnSide[1] = this.pos[1] > offset[1] ? LiteGraph.UP : LiteGraph.DOWN; | |
| } | |
| this.manuallyHandleResize(event); | |
| } | |
| } | |
| onKeyDown(event) { | |
| super.onKeyDown(event); | |
| const canvas = app.canvas; | |
| if (CONFIG_FAST_REROUTE_ENABLED) { | |
| for (const [key, shortcut] of Object.entries(this.shortcuts)) { | |
| if (!shortcut.state) { | |
| const keys = KEY_EVENT_SERVICE.areOnlyKeysDown(shortcut.keys); | |
| if (keys) { | |
| shortcut.state = true; | |
| if (key === "rotate") { | |
| this.rotate(90); | |
| } | |
| else if (key.includes("connection")) { | |
| this.cycleConnection(key.includes("input") ? IoDirection.INPUT : IoDirection.OUTPUT); | |
| } | |
| if (shortcut.initialMousePos) { | |
| canvas.node_capturing_input = this; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| onKeyUp(event) { | |
| super.onKeyUp(event); | |
| const canvas = app.canvas; | |
| if (CONFIG_FAST_REROUTE_ENABLED) { | |
| for (const [key, shortcut] of Object.entries(this.shortcuts)) { | |
| if (shortcut.state) { | |
| const keys = KEY_EVENT_SERVICE.areOnlyKeysDown(shortcut.keys); | |
| if (!keys) { | |
| shortcut.state = false; | |
| if (shortcut.initialMousePos) { | |
| shortcut.initialMousePos = [-1, -1]; | |
| if ((canvas.node_capturing_input = this)) { | |
| canvas.node_capturing_input = null; | |
| } | |
| this.setDirtyCanvas(true, true); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| onDeselected() { | |
| var _a; | |
| (_a = super.onDeselected) === null || _a === void 0 ? void 0 : _a.call(this); | |
| const canvas = app.canvas; | |
| for (const [key, shortcut] of Object.entries(this.shortcuts)) { | |
| shortcut.state = false; | |
| if (shortcut.initialMousePos) { | |
| shortcut.initialMousePos = [-1, -1]; | |
| if ((canvas.node_capturing_input = this)) { | |
| canvas.node_capturing_input = null; | |
| } | |
| this.setDirtyCanvas(true, true); | |
| } | |
| } | |
| } | |
| onRemoved() { | |
| var _a; | |
| (_a = super.onRemoved) === null || _a === void 0 ? void 0 : _a.call(this); | |
| setTimeout(() => { | |
| SERVICE.handleRemovedNodeMaybeWhileDragging(this); | |
| }, 32); | |
| } | |
| getHelp() { | |
| return ` | |
| <p> | |
| Finally, a comfortable, powerful reroute node with true multi-direction and powerful | |
| shortcuts to bring your workflow to the next level. | |
| </p> | |
| ${!CONFIG_FAST_REROUTE_ENABLED | |
| ? `<p><i>Fast Shortcuts are currently disabled.</b>` | |
| : ` | |
| <ul> | |
| <li><p> | |
| <code>${CONFIG_KEY_CREATE_WHILE_LINKING}</code> Create a new reroute node while dragging | |
| a link, connecting it to the link in the place and continuing the link. | |
| </p></li> | |
| <li><p> | |
| <code>${CONFIG_KEY_ROTATE}</code> Rotate the selected reroute node counter clockwise 90 | |
| degrees. | |
| </p></li> | |
| <li><p> | |
| <code>${CONFIG_KEY_RESIZE}</code> Resize the selected reroute node from the nearest | |
| corner by holding down and moving your mouse. | |
| </p></li> | |
| <li><p> | |
| <code>${CONFIG_KEY_MOVE}</code> Move the selected reroute node by holding down and | |
| moving your mouse. | |
| </p></li> | |
| <li><p> | |
| <code>${CONFIG_KEY_CXN_INPUT}</code> Change the input layout/direction of the selected | |
| reroute node. | |
| </p></li> | |
| <li><p> | |
| <code>${CONFIG_KEY_CXN_OUTPUT}</code> Change the output layout/direction of the selected | |
| reroute node. | |
| </p></li> | |
| </ul> | |
| `} | |
| <p><small> | |
| To change, ${!CONFIG_FAST_REROUTE_ENABLED ? "enable" : "disable"} or configure sohrtcuts, | |
| make a copy of | |
| <code>/custom_nodes/rgthree-comfy/rgthree_config.json.default</code> to | |
| <code>/custom_nodes/rgthree-comfy/rgthree_config.json</code> and configure under | |
| <code>nodes > reroute > fast_reroute</code>. | |
| </small></p> | |
| `; | |
| } | |
| } | |
| RerouteNode.title = NodeTypesString.REROUTE; | |
| RerouteNode.type = NodeTypesString.REROUTE; | |
| RerouteNode.title_mode = LiteGraph.NO_TITLE; | |
| RerouteNode.collapsable = false; | |
| RerouteNode.layout_slot_offset = 5; | |
| RerouteNode.size = configDefaultSize; | |
| addMenuItem(RerouteNode, app, { | |
| name: (node) => { var _a; return `${((_a = node.properties) === null || _a === void 0 ? void 0 : _a["showLabel"]) ? "Hide" : "Show"} Label/Title`; }, | |
| property: "showLabel", | |
| callback: async (node, value) => { | |
| app.graph.setDirtyCanvas(true, true); | |
| }, | |
| }); | |
| addMenuItem(RerouteNode, app, { | |
| name: (node) => `${node.resizable ? "No" : "Allow"} Resizing`, | |
| callback: (node) => { | |
| node.setResizable(!node.resizable); | |
| node.size[0] = Math.max(40, node.size[0]); | |
| node.size[1] = Math.max(30, node.size[1]); | |
| node.applyNodeSize(); | |
| }, | |
| }); | |
| addMenuItem(RerouteNode, app, { | |
| name: "Static Width", | |
| property: "size", | |
| subMenuOptions: (() => { | |
| const options = []; | |
| for (let w = 8; w > 0; w--) { | |
| options.push(`${w * 10}`); | |
| } | |
| return options; | |
| })(), | |
| prepareValue: (value, node) => [Number(value), node.size[1]], | |
| callback: (node) => { | |
| node.setResizable(false); | |
| node.applyNodeSize(); | |
| }, | |
| }); | |
| addMenuItem(RerouteNode, app, { | |
| name: "Static Height", | |
| property: "size", | |
| subMenuOptions: (() => { | |
| const options = []; | |
| for (let w = 8; w > 0; w--) { | |
| options.push(`${w * 10}`); | |
| } | |
| return options; | |
| })(), | |
| prepareValue: (value, node) => [node.size[0], Number(value)], | |
| callback: (node) => { | |
| node.setResizable(false); | |
| node.applyNodeSize(); | |
| }, | |
| }); | |
| addConnectionLayoutSupport(RerouteNode, app, [ | |
| ["Left", "Right"], | |
| ["Left", "Top"], | |
| ["Left", "Bottom"], | |
| ["Right", "Left"], | |
| ["Right", "Top"], | |
| ["Right", "Bottom"], | |
| ["Top", "Left"], | |
| ["Top", "Right"], | |
| ["Top", "Bottom"], | |
| ["Bottom", "Left"], | |
| ["Bottom", "Right"], | |
| ["Bottom", "Top"], | |
| ], (node) => { | |
| node.applyNodeSize(); | |
| }); | |
| addMenuItem(RerouteNode, app, { | |
| name: "Rotate", | |
| subMenuOptions: [ | |
| "Rotate 90° Clockwise", | |
| "Rotate 90° Counter-Clockwise", | |
| "Rotate 180°", | |
| null, | |
| "Flip Horizontally", | |
| "Flip Vertically", | |
| ], | |
| callback: (node_, value) => { | |
| const node = node_; | |
| if (value === null || value === void 0 ? void 0 : value.startsWith("Rotate 90° Clockwise")) { | |
| node.rotate(90); | |
| } | |
| else if (value === null || value === void 0 ? void 0 : value.startsWith("Rotate 90° Counter-Clockwise")) { | |
| node.rotate(-90); | |
| } | |
| else if (value === null || value === void 0 ? void 0 : value.startsWith("Rotate 180°")) { | |
| node.rotate(180); | |
| } | |
| else { | |
| const inputDirIndex = LAYOUT_CLOCKWISE.indexOf(node.properties["connections_layout"][0]); | |
| const outputDirIndex = LAYOUT_CLOCKWISE.indexOf(node.properties["connections_layout"][1]); | |
| if (value === null || value === void 0 ? void 0 : value.startsWith("Flip Horizontally")) { | |
| if (["Left", "Right"].includes(node.properties["connections_layout"][0])) { | |
| node.properties["connections_layout"][0] = | |
| LAYOUT_CLOCKWISE[(((inputDirIndex + 2) % 4) + 4) % 4]; | |
| } | |
| if (["Left", "Right"].includes(node.properties["connections_layout"][1])) { | |
| node.properties["connections_layout"][1] = | |
| LAYOUT_CLOCKWISE[(((outputDirIndex + 2) % 4) + 4) % 4]; | |
| } | |
| } | |
| else if (value === null || value === void 0 ? void 0 : value.startsWith("Flip Vertically")) { | |
| if (["Top", "Bottom"].includes(node.properties["connections_layout"][0])) { | |
| node.properties["connections_layout"][0] = | |
| LAYOUT_CLOCKWISE[(((inputDirIndex + 2) % 4) + 4) % 4]; | |
| } | |
| if (["Top", "Bottom"].includes(node.properties["connections_layout"][1])) { | |
| node.properties["connections_layout"][1] = | |
| LAYOUT_CLOCKWISE[(((outputDirIndex + 2) % 4) + 4) % 4]; | |
| } | |
| } | |
| } | |
| }, | |
| }); | |
| addMenuItem(RerouteNode, app, { | |
| name: "Clone New Reroute...", | |
| subMenuOptions: ["Before", "After"], | |
| callback: async (node, value) => { | |
| const clone = node.clone(); | |
| const pos = [...node.pos]; | |
| if (value === "Before") { | |
| clone.pos = [pos[0] - 20, pos[1] - 20]; | |
| app.graph.add(clone); | |
| await wait(); | |
| const inputLinks = getSlotLinks(node.inputs[0]); | |
| for (const inputLink of inputLinks) { | |
| const link = inputLink.link; | |
| const linkedNode = app.graph.getNodeById(link.origin_id); | |
| if (linkedNode) { | |
| linkedNode.connect(0, clone, 0); | |
| } | |
| } | |
| clone.connect(0, node, 0); | |
| } | |
| else { | |
| clone.pos = [pos[0] + 20, pos[1] + 20]; | |
| app.graph.add(clone); | |
| await wait(); | |
| const outputLinks = getSlotLinks(node.outputs[0]); | |
| node.connect(0, clone, 0); | |
| for (const outputLink of outputLinks) { | |
| const link = outputLink.link; | |
| const linkedNode = app.graph.getNodeById(link.target_id); | |
| if (linkedNode) { | |
| clone.connect(0, linkedNode, link.target_slot); | |
| } | |
| } | |
| } | |
| }, | |
| }); | |
| app.registerExtension({ | |
| name: "rgthree.Reroute", | |
| registerCustomNodes() { | |
| RerouteNode.setUp(); | |
| }, | |
| }); | |