817 lines
31 KiB
JavaScript
817 lines
31 KiB
JavaScript
import { app } from "../../../scripts/app.js";
|
|
import { SettingsPopup } from "./AIDocSharedClasses.js";
|
|
|
|
class MultiIntNode {
|
|
constructor(node) {
|
|
this.node = node;
|
|
|
|
// Default properties
|
|
if (typeof node.properties.activeCount !== "number") {
|
|
node.properties.activeCount = 5;
|
|
}
|
|
if (typeof node.properties.intStep !== "number") {
|
|
node.properties.intStep = 1;
|
|
}
|
|
if (!Array.isArray(node.properties.labels)) {
|
|
node.properties.labels = [];
|
|
}
|
|
if (!Array.isArray(node.properties.values)) {
|
|
node.properties.values = [];
|
|
}
|
|
this.adjustArrays();
|
|
|
|
// Default node size
|
|
if (!node.size) {
|
|
node.size = [280, 200];
|
|
}
|
|
|
|
// Rect arrays for label, value, pencil, gear, increment, and decrement buttons
|
|
this.labelRects = [];
|
|
this.valueRects = [];
|
|
this.pencilRects = [];
|
|
this.incrementRects = [];
|
|
this.decrementRects = [];
|
|
this.gearRect = null;
|
|
|
|
// Setup outputs/widgets
|
|
this.setupOutputsAndWidgets();
|
|
|
|
// Draw function
|
|
node.onDrawForeground = this.onDrawForeground.bind(this);
|
|
}
|
|
|
|
|
|
setupOutputsAndWidgets() {
|
|
this.node.outputs = [];
|
|
this.node.widgets = [];
|
|
|
|
for (let i = 0; i < this.node.properties.activeCount; i++) {
|
|
// Create an INT output for each active slot
|
|
this.node.addOutput("", "INT");
|
|
|
|
// Create a hidden widget for each value
|
|
const w = this.node.addWidget(
|
|
"number",
|
|
`value${i+1}`,
|
|
this.node.properties.values[i],
|
|
(val) => this.onValueChanged(i, val),
|
|
{ hidden: true }
|
|
);
|
|
w.computeSize = () => [0, -4];
|
|
w.hidden = true;
|
|
}
|
|
|
|
// Rename outputs to i1..iN
|
|
for (let i = 0; i < this.node.outputs.length; i++) {
|
|
this.node.outputs[i].name = `i${i+1}`;
|
|
}
|
|
}
|
|
|
|
onDrawForeground(ctx) {
|
|
if (this.node.flags.collapsed) return;
|
|
|
|
const margin = 8;
|
|
const rowHeight = 30;
|
|
const rowSpacing = margin;
|
|
const count = this.node.properties.activeCount;
|
|
|
|
// Compute node size
|
|
let totalHeight = margin + (count * (rowHeight + rowSpacing));
|
|
const MIN_WIDTH = 320;
|
|
if (this.node.size[0] < MIN_WIDTH) {
|
|
this.node.size[0] = MIN_WIDTH;
|
|
}
|
|
this.node.size[1] = totalHeight;
|
|
|
|
// Draw node background (#181818)
|
|
ctx.fillStyle = "#181818";
|
|
ctx.fillRect(0, 0, this.node.size[0], this.node.size[1]);
|
|
|
|
// Row backgrounds
|
|
const rowBgWidth = this.node.size[0] - margin - 48; // Reserve space for outputs
|
|
this.labelRects = [];
|
|
this.valueRects = [];
|
|
this.pencilRects = [];
|
|
this.incrementRects = [];
|
|
this.decrementRects = [];
|
|
|
|
let y = margin;
|
|
for (let i = 0; i < count; i++) {
|
|
// Row background
|
|
// Set the radius for the rounded corners
|
|
const radius = 5; // Adjust as needed
|
|
// Row background with rounded corners
|
|
ctx.fillStyle = "#444";
|
|
ctx.beginPath();
|
|
// Top-left corner
|
|
ctx.moveTo(margin + radius, y);
|
|
ctx.arcTo(margin + rowBgWidth, y, margin + rowBgWidth, y + rowHeight, radius); // Top-right corner
|
|
// Bottom-right corner
|
|
ctx.arcTo(margin + rowBgWidth, y + rowHeight, margin, y + rowHeight, radius); // Bottom-right corner
|
|
// Bottom-left corner
|
|
ctx.arcTo(margin, y + rowHeight, margin, y, radius); // Bottom-left corner
|
|
// Top-left corner (to close the path)
|
|
ctx.arcTo(margin, y, margin + rowBgWidth, y, radius); // Top-left corner
|
|
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
// Static label (left) - e.g., i1, i2, i3, etc.
|
|
ctx.fillStyle = "#7d7d7d";
|
|
ctx.font = "12px Arial";
|
|
ctx.textBaseline = "middle";
|
|
ctx.textAlign = "left";
|
|
const staticLabel = `·i${i + 1}`;
|
|
const staticLabelMetrics = ctx.measureText(staticLabel);
|
|
const staticLabelX = margin + 2;
|
|
const staticLabelY = y + rowHeight / 2;
|
|
ctx.fillText(staticLabel, staticLabelX, staticLabelY);
|
|
|
|
// Draw the vertical line
|
|
const lineStartX = staticLabelX + staticLabelMetrics.width + 4; // Right of static label
|
|
const lineStartY = staticLabelY - rowHeight / 2; // Start from the middle of the static label
|
|
const lineEndY = lineStartY + rowHeight; // End after the row height (making the line same length as row)
|
|
|
|
// Set the line color
|
|
ctx.strokeStyle = "#7d7d7d"; // Same color as label for consistency
|
|
ctx.lineWidth = 1; // Line thickness
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(lineStartX, lineStartY); // Starting point of the line
|
|
ctx.lineTo(lineStartX, lineEndY); // Vertical line to the bottom of the row
|
|
ctx.stroke(); // Actually draw the line
|
|
|
|
// Custom label (right of static label) - e.g., INT 1, INT 2, etc.
|
|
ctx.fillStyle = "#fff";
|
|
ctx.font = "14px Arial";
|
|
const customLabel = this.node.properties.labels[i] || `INT ${i + 1}`;
|
|
const customLabelMetrics = ctx.measureText(customLabel);
|
|
const customLabelX = staticLabelX + staticLabelMetrics.width + 10; // space between iN and INT N
|
|
ctx.fillText(customLabel, customLabelX, staticLabelY);
|
|
this.labelRects[i] = {
|
|
x: customLabelX,
|
|
y,
|
|
w: customLabelMetrics.width + 8,
|
|
h: rowHeight
|
|
};
|
|
|
|
|
|
// Value (middle)
|
|
const val = this.node.properties.values[i] ?? 0;
|
|
const valStr = val.toString();
|
|
ctx.textAlign = "right";
|
|
const valMetrics = ctx.measureText(valStr);
|
|
const valX = margin + rowBgWidth - 90; // space for increment/decrement buttons and pencil
|
|
const valY = y + rowHeight / 2;
|
|
ctx.fillText(valStr, valX, valY);
|
|
this.valueRects[i] = {
|
|
x: valX - valMetrics.width - 4,
|
|
y,
|
|
w: valMetrics.width + 8,
|
|
h: rowHeight
|
|
};
|
|
|
|
// Pencil icon
|
|
ctx.textAlign = "left";
|
|
ctx.fillStyle = "#ccc";
|
|
ctx.font = "16px Arial";
|
|
const pencilIcon = "✎";
|
|
const pencilMetrics = ctx.measureText(pencilIcon);
|
|
const pencilX = valX + 6;
|
|
const pencilY = y + rowHeight / 2;
|
|
ctx.fillText(pencilIcon, pencilX, pencilY);
|
|
this.pencilRects[i] = {
|
|
x: pencilX,
|
|
y,
|
|
w: pencilMetrics.width + 4,
|
|
h: rowHeight
|
|
};
|
|
|
|
// Create a fixed-size rounded box for the increment (+) button
|
|
const incrementButtonBoxX = valX + 36; // Space for the box (positioned to the right of the value)
|
|
const incrementButtonBoxY = y + (rowHeight / 4) - 2;
|
|
const buttonBoxWidth = 20; // Fixed width for the button box
|
|
const buttonBoxHeight = 20; // Fixed height for the button box
|
|
|
|
// Set the background color for the increment button box
|
|
ctx.fillStyle = "#4b3e72"; // Purple background
|
|
ctx.beginPath();
|
|
ctx.moveTo(incrementButtonBoxX + 5, incrementButtonBoxY); // Top-left corner
|
|
ctx.arcTo(incrementButtonBoxX + buttonBoxWidth, incrementButtonBoxY, incrementButtonBoxX + buttonBoxWidth, incrementButtonBoxY + buttonBoxHeight, 5); // Top-right corner
|
|
ctx.arcTo(incrementButtonBoxX + buttonBoxWidth, incrementButtonBoxY + buttonBoxHeight, incrementButtonBoxX, incrementButtonBoxY + buttonBoxHeight, 5); // Bottom-right corner
|
|
ctx.arcTo(incrementButtonBoxX, incrementButtonBoxY + buttonBoxHeight, incrementButtonBoxX, incrementButtonBoxY, 5); // Bottom-left corner
|
|
ctx.arcTo(incrementButtonBoxX, incrementButtonBoxY, incrementButtonBoxX + buttonBoxWidth, incrementButtonBoxY, 5); // Top-left corner
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
// Draw Increment Button (+)
|
|
const incrementButton = "+";
|
|
ctx.font = "12px Arial"; // Smaller font size for the button text
|
|
ctx.fillStyle = "#fff"; // White color for the text inside the button
|
|
ctx.fillText(incrementButton, incrementButtonBoxX + 6, incrementButtonBoxY + buttonBoxHeight / 2); // Draw + button in the middle
|
|
|
|
// Create a fixed-size rounded box for the decrement (-) button
|
|
const decrementButtonBoxX = incrementButtonBoxX + 24; // Space for the box to the right of the + button
|
|
const decrementButtonBoxY = incrementButtonBoxY; // Same Y position as the + button box
|
|
|
|
// Set the background color for the decrement button box
|
|
ctx.fillStyle = "#4b3e72"; // Purple background
|
|
ctx.beginPath();
|
|
ctx.moveTo(decrementButtonBoxX + 5, decrementButtonBoxY); // Top-left corner
|
|
ctx.arcTo(decrementButtonBoxX + buttonBoxWidth, decrementButtonBoxY, decrementButtonBoxX + buttonBoxWidth, decrementButtonBoxY + buttonBoxHeight, 5); // Top-right corner
|
|
ctx.arcTo(decrementButtonBoxX + buttonBoxWidth, decrementButtonBoxY + buttonBoxHeight, decrementButtonBoxX, decrementButtonBoxY + buttonBoxHeight, 5); // Bottom-right corner
|
|
ctx.arcTo(decrementButtonBoxX, decrementButtonBoxY + buttonBoxHeight, decrementButtonBoxX, decrementButtonBoxY, 5); // Bottom-left corner
|
|
ctx.arcTo(decrementButtonBoxX, decrementButtonBoxY, decrementButtonBoxX + buttonBoxWidth, decrementButtonBoxY, 5); // Top-left corner
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
// Draw Decrement Button (-)
|
|
const decrementButton = "-";
|
|
ctx.font = "12px Arial"; // Smaller font size for the button text
|
|
ctx.fillStyle = "#fff"; // White color for the text inside the button
|
|
ctx.fillText(decrementButton, decrementButtonBoxX + 8, decrementButtonBoxY + buttonBoxHeight / 2); // Draw - button in the middle
|
|
|
|
// Save button areas for interaction detection (with separate button box positions)
|
|
this.incrementRects[i] = {
|
|
x: incrementButtonBoxX,
|
|
y: incrementButtonBoxY,
|
|
w: buttonBoxWidth,
|
|
h: buttonBoxHeight
|
|
};
|
|
|
|
this.decrementRects[i] = {
|
|
x: decrementButtonBoxX,
|
|
y: decrementButtonBoxY,
|
|
w: buttonBoxWidth,
|
|
h: buttonBoxHeight
|
|
};
|
|
|
|
y += rowHeight + rowSpacing;
|
|
}
|
|
|
|
// Gear icon at bottom-right
|
|
const gearIcon = "⚙️";
|
|
ctx.font = "18px Arial";
|
|
ctx.textAlign = "center";
|
|
ctx.textBaseline = "middle";
|
|
ctx.fillStyle = "#ccc";
|
|
const gearWidth = ctx.measureText(gearIcon).width;
|
|
const gearHeight = 18;
|
|
const gearX = this.node.size[0] - margin - (gearWidth / 2);
|
|
const gearY = this.node.size[1] - margin - (gearHeight / 2);
|
|
ctx.fillText(gearIcon, gearX, gearY);
|
|
|
|
this.gearRect = {
|
|
x: gearX - gearWidth / 2,
|
|
y: gearY - gearHeight / 2,
|
|
w: gearWidth,
|
|
h: gearHeight
|
|
};
|
|
}
|
|
|
|
startValueDragToggle(index, initialEvent) {
|
|
// If already dragging, then stop dragging (commit the value)
|
|
if (this.dragActive) {
|
|
this.stopValueDrag();
|
|
return;
|
|
}
|
|
|
|
// Start drag mode for this value.
|
|
this.dragActive = true;
|
|
this.dragIndex = index;
|
|
this.dragInitialX = initialEvent.clientX;
|
|
this.dragInitialValue = this.node.properties.values[index];
|
|
const step = this.node.properties.intStep || 1;
|
|
const sensitivity = 10; // pixels per step change
|
|
|
|
// Get the canvas element.
|
|
const canvasEl = document.getElementById("graph-canvas");
|
|
if (!canvasEl) return;
|
|
|
|
// Define a pointermove handler to update the value as the pointer moves.
|
|
this._onValuePointerMove = (e) => {
|
|
const dx = e.clientX - this.dragInitialX;
|
|
const steps = Math.floor(dx / sensitivity);
|
|
const newValue = this.dragInitialValue + steps * step;
|
|
if (newValue !== this.node.properties.values[this.dragIndex]) {
|
|
this.node.properties.values[this.dragIndex] = newValue;
|
|
if (this.node.widgets[this.dragIndex]) {
|
|
this.node.widgets[this.dragIndex].value = newValue;
|
|
}
|
|
this.node.setDirtyCanvas(true, true);
|
|
}
|
|
};
|
|
|
|
// Attach the pointermove handler to the canvas.
|
|
canvasEl.addEventListener("pointermove", this._onValuePointerMove);
|
|
|
|
// Define a global click handler to stop the drag.
|
|
this._onGlobalClickToStop = (e) => {
|
|
// Prevent this click from re-triggering startValueDragToggle immediately.
|
|
console.log("Global click detected—stopping drag");
|
|
this.stopValueDrag();
|
|
};
|
|
// Attach the global click handler with capture so it fires before other click handlers.
|
|
document.addEventListener("click", this._onGlobalClickToStop, { capture: true });
|
|
|
|
// Also attach a keydown handler on the document so that Enter or Esc stop drag mode.
|
|
this._onKeyDownToStop = (e) => {
|
|
if (e.key === "Enter" || e.key === "Escape") {
|
|
console.log("Keydown (" + e.key + ") detected—stopping drag");
|
|
this.stopValueDrag();
|
|
}
|
|
};
|
|
document.addEventListener("keydown", this._onKeyDownToStop);
|
|
}
|
|
|
|
stopValueDrag() {
|
|
const canvasEl = document.getElementById("graph-canvas");
|
|
if (!canvasEl) return;
|
|
|
|
if (this._onValuePointerMove) {
|
|
canvasEl.removeEventListener("pointermove", this._onValuePointerMove);
|
|
this._onValuePointerMove = null;
|
|
}
|
|
if (this._onGlobalClickToStop) {
|
|
document.removeEventListener("click", this._onGlobalClickToStop, { capture: true });
|
|
this._onGlobalClickToStop = null;
|
|
}
|
|
if (this._onKeyDownToStop) {
|
|
document.removeEventListener("keydown", this._onKeyDownToStop);
|
|
this._onKeyDownToStop = null;
|
|
}
|
|
this.dragActive = false;
|
|
this.dragIndex = null;
|
|
this.node.setDirtyCanvas(true, true);
|
|
}
|
|
|
|
|
|
onMouseDown(e, pos) {
|
|
// Check pencil icons
|
|
for (let i = 0; i < this.pencilRects.length; i++) {
|
|
const r = this.pencilRects[i];
|
|
if (!r) continue;
|
|
if (pos[0] >= r.x && pos[0] <= r.x + r.w &&
|
|
pos[1] >= r.y && pos[1] <= r.y + r.h) {
|
|
console.log("Pencil clicked row:", i);
|
|
const centerX = r.x + (r.w / 2);
|
|
const centerY = r.y + (r.h / 2);
|
|
this.showInlineIntEditor(i, { x: centerX, y: centerY, w: 80, h: 24 }, e);
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// Check for custom label click to edit it
|
|
for (let i = 0; i < this.labelRects.length; i++) {
|
|
const r = this.labelRects[i];
|
|
if (!r) continue;
|
|
if (pos[0] >= r.x && pos[0] <= r.x + r.w &&
|
|
pos[1] >= r.y && pos[1] <= r.y + r.h) {
|
|
console.log("Label clicked row:", i);
|
|
const centerX = r.x + (r.w / 2);
|
|
const centerY = r.y + (r.h / 2);
|
|
this.showInlineLabelEditor(i, { x: centerX, y: centerY, w: 80, h: 24 }, e);
|
|
return true;
|
|
}
|
|
}
|
|
|
|
|
|
// Check increment buttons
|
|
for (let i = 0; i < this.incrementRects.length; i++) {
|
|
const r = this.incrementRects[i];
|
|
if (pos[0] >= r.x && pos[0] <= r.x + r.w &&
|
|
pos[1] >= r.y && pos[1] <= r.y + r.h) {
|
|
console.log("Increment button clicked row:", i);
|
|
this.incrementValue(i);
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// Check decrement buttons
|
|
for (let i = 0; i < this.decrementRects.length; i++) {
|
|
const r = this.decrementRects[i];
|
|
if (pos[0] >= r.x && pos[0] <= r.x + r.w &&
|
|
pos[1] >= r.y && pos[1] <= r.y + r.h) {
|
|
console.log("Decrement button clicked row:", i);
|
|
this.decrementValue(i);
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// Check if the click is in a value rectangle and start drag-to-change behavior
|
|
// Then, check if the click is in a value rectangle:
|
|
for (let i = 0; i < this.valueRects.length; i++) {
|
|
const r = this.valueRects[i];
|
|
if (r && pos[0] >= r.x && pos[0] <= r.x + r.w &&
|
|
pos[1] >= r.y && pos[1] <= r.y + r.h) {
|
|
// Toggle drag mode on the value at index i.
|
|
this.startValueDragToggle(i, e);
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// Check gear icon
|
|
if (this.gearRect) {
|
|
const r = this.gearRect;
|
|
if (pos[0] >= r.x && pos[0] <= r.x + r.w &&
|
|
pos[1] >= r.y && pos[1] <= r.y + r.h) {
|
|
console.log("Gear icon clicked");
|
|
this.openGearPopup(e);
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
showInlineLabelEditor(index, rect, e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const graphCanvas = app.graphcanvas;
|
|
if (!graphCanvas) {
|
|
console.warn("No graphCanvas found, using fallback coords.");
|
|
const fallbackX = e.clientX - (rect.w * 0.5);
|
|
const fallbackY = e.clientY - (rect.h * 0.5);
|
|
return this.spawnInlineLabelEditorAtScreenPos(index, fallbackX, fallbackY, rect);
|
|
}
|
|
|
|
const nodeX = this.node.pos[0];
|
|
const nodeY = this.node.pos[1];
|
|
const localX = rect.x + (rect.w * 0.5);
|
|
const localY = rect.y + (rect.h * 0.5);
|
|
const scale = graphCanvas.ds.scale;
|
|
const offset = graphCanvas.ds.offset;
|
|
const canvasX = (nodeX + localX) * scale + offset[0];
|
|
const canvasY = (nodeY + localY) * scale + offset[1];
|
|
const canvasRect = graphCanvas.canvas.getBoundingClientRect();
|
|
const screenX = canvasRect.left + canvasX;
|
|
const screenY = canvasRect.top + canvasY;
|
|
|
|
this.spawnInlineLabelEditorAtScreenPos(index, screenX, screenY, rect);
|
|
}
|
|
|
|
spawnInlineLabelEditorAtScreenPos(index, screenX, screenY, rect) {
|
|
const input = document.createElement("input");
|
|
input.type = "text";
|
|
input.value = this.node.properties.labels[index] || `INT ${index + 1}`;
|
|
|
|
input.style.position = "fixed";
|
|
const offsetX = -(rect.w * 0.5);
|
|
const offsetY = -(rect.h * 0.5);
|
|
const FixedOffsetX = 35;
|
|
const FixedOffsetY = 10;
|
|
input.style.left = (screenX + offsetX + FixedOffsetX) + "px";
|
|
input.style.top = (screenY + offsetY + FixedOffsetY) + "px";
|
|
input.style.width = Math.max(rect.w, 250) + "px";
|
|
input.style.height = Math.max(rect.h, 30) + "px";
|
|
|
|
input.style.fontSize = "14px";
|
|
input.style.zIndex = "10000";
|
|
input.style.background = "#181818";
|
|
input.style.color = "#fff";
|
|
input.style.border = "2px solid #4b3e72";
|
|
input.style.borderRadius = "6px";
|
|
input.style.outline = "none";
|
|
input.style.padding = "0 6px";
|
|
|
|
document.body.appendChild(input);
|
|
|
|
setTimeout(() => {
|
|
input.focus();
|
|
input.select();
|
|
}, 10);
|
|
|
|
const commit = () => {
|
|
const val = input.value.trim();
|
|
if (val.length > 0) {
|
|
this.node.properties.labels[index] = val;
|
|
this.node.setDirtyCanvas(true, true);
|
|
}
|
|
remove();
|
|
};
|
|
|
|
const remove = () => {
|
|
document.removeEventListener("click", outsideClick, true);
|
|
if (input.parentNode) {
|
|
input.parentNode.removeChild(input);
|
|
}
|
|
};
|
|
|
|
const outsideClick = (evt) => {
|
|
if (evt.target !== input) {
|
|
commit();
|
|
}
|
|
};
|
|
|
|
setTimeout(() => {
|
|
document.addEventListener("click", outsideClick, true);
|
|
}, 100);
|
|
|
|
input.addEventListener("keydown", (evt) => {
|
|
if (evt.key === "Enter") {
|
|
evt.preventDefault();
|
|
commit();
|
|
} else if (evt.key === "Escape") {
|
|
evt.preventDefault();
|
|
remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
openGearPopup(e) {
|
|
e.stopPropagation();
|
|
let nodeElem = this.node.htmlElement;
|
|
if (!nodeElem) {
|
|
console.warn("No node.htmlElement, using fallback coords.");
|
|
this.createGearPopupFallback(e.clientX, e.clientY);
|
|
return;
|
|
}
|
|
const nodeRect = nodeElem.getBoundingClientRect();
|
|
const popupX = nodeRect.left + 10;
|
|
const popupY = nodeRect.top + 10;
|
|
|
|
const popup = new SettingsPopup(this.node);
|
|
popup.open(popupX, popupY);
|
|
this.populateGearPopup(popup); // <-- same logic
|
|
}
|
|
|
|
populateGearPopup(popup) {
|
|
const content = popup.getContentContainer();
|
|
popup.clearContent(); // no stale content
|
|
|
|
// "Add/Remove Ints" label
|
|
const addRemoveLabel = document.createElement("div");
|
|
addRemoveLabel.textContent = "Add/Remove Ints";
|
|
addRemoveLabel.style.color = "#fff";
|
|
addRemoveLabel.style.fontSize = "12px";
|
|
addRemoveLabel.style.textAlign = "center";
|
|
content.appendChild(addRemoveLabel);
|
|
|
|
// Button row
|
|
const buttonRow = document.createElement("div");
|
|
buttonRow.style.display = "flex";
|
|
buttonRow.style.justifyContent = "center"; // Centering buttons
|
|
buttonRow.style.alignItems = "center";
|
|
buttonRow.style.width = "100%";
|
|
buttonRow.style.gap = "10px"; // Reduced space between the buttons
|
|
content.appendChild(buttonRow);
|
|
|
|
const minusBtn = document.createElement("button");
|
|
minusBtn.textContent = "-";
|
|
minusBtn.style.background = "#333";
|
|
minusBtn.style.color = "#fff";
|
|
minusBtn.style.padding = "3px 10px"; // Set fixed padding for size consistency
|
|
minusBtn.style.fontSize = "16px";
|
|
buttonRow.appendChild(minusBtn);
|
|
|
|
const plusBtn = document.createElement("button");
|
|
plusBtn.textContent = "+";
|
|
plusBtn.style.background = "#333";
|
|
plusBtn.style.color = "#fff";
|
|
plusBtn.style.padding = "3px 6px"; // Set fixed padding for size consistency
|
|
plusBtn.style.fontSize = "16px";
|
|
buttonRow.appendChild(plusBtn);
|
|
|
|
// Steps label
|
|
const stepsLabel = document.createElement("div");
|
|
stepsLabel.textContent = "Steps";
|
|
stepsLabel.style.color = "#fff";
|
|
stepsLabel.style.fontSize = "12px";
|
|
stepsLabel.style.textAlign = "center";
|
|
content.appendChild(stepsLabel);
|
|
|
|
// Steps input
|
|
const stepsInput = document.createElement("input");
|
|
stepsInput.type = "number";
|
|
stepsInput.value = this.node.properties.intStep.toString();
|
|
stepsInput.min = "1";
|
|
stepsInput.step = "1";
|
|
stepsInput.style.background = "#333";
|
|
stepsInput.style.color = "#fff";
|
|
content.appendChild(stepsInput);
|
|
|
|
// Steps input change
|
|
stepsInput.addEventListener("change", () => {
|
|
const val = parseInt(stepsInput.value, 10);
|
|
if (!isNaN(val) && val >= 1) {
|
|
this.node.properties.intStep = val;
|
|
} else {
|
|
stepsInput.value = this.node.properties.intStep.toString();
|
|
}
|
|
});
|
|
|
|
// minus logic
|
|
minusBtn.addEventListener("click", (evt) => {
|
|
evt.stopPropagation();
|
|
|
|
// Save current width
|
|
const currentWidth = this.node.size[0];
|
|
|
|
if (this.node.properties.activeCount > 1) {
|
|
this.node.properties.activeCount = Math.max(1, this.node.properties.activeCount - 1);
|
|
this.adjustArrays();
|
|
this.setupOutputsAndWidgets();
|
|
this.node.setDirtyCanvas(true, true);
|
|
|
|
// Reset width after updating active count
|
|
this.node.size[0] = currentWidth;
|
|
this.node.setDirtyCanvas(true, true);
|
|
setTimeout(() => popup.reposition(this.node.htmlElement, 10, 10), 50);
|
|
}
|
|
});
|
|
|
|
// plus logic
|
|
plusBtn.addEventListener("click", (evt) => {
|
|
evt.stopPropagation();
|
|
|
|
// Save current width
|
|
const currentWidth = this.node.size[0];
|
|
|
|
if (this.node.properties.activeCount < 20) {
|
|
this.node.properties.activeCount = Math.min(20, this.node.properties.activeCount + 1);
|
|
this.adjustArrays();
|
|
this.setupOutputsAndWidgets();
|
|
this.node.setDirtyCanvas(true, true);
|
|
|
|
// Reset width after updating active count
|
|
this.node.size[0] = currentWidth;
|
|
this.node.setDirtyCanvas(true, true);
|
|
setTimeout(() => popup.reposition(this.node.htmlElement, 10, 10), 50);
|
|
}
|
|
});
|
|
}
|
|
|
|
createGearPopupFallback(x, y) {
|
|
const popup = new SettingsPopup(this.node);
|
|
popup.open(x, y);
|
|
this.populateGearPopup(popup); // <-- same logic again
|
|
}
|
|
|
|
showInlineIntEditor(index, rect, e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const graphCanvas = app.graphcanvas;
|
|
if (!graphCanvas) {
|
|
console.warn("No graphCanvas found, using fallback coords.");
|
|
const fallbackX = e.clientX - (rect.w * 0.5);
|
|
const fallbackY = e.clientY - (rect.h * 0.5);
|
|
return this.spawnInlineEditorAtScreenPos(index, fallbackX, fallbackY, rect);
|
|
}
|
|
|
|
const nodeX = this.node.pos[0];
|
|
const nodeY = this.node.pos[1];
|
|
const localX = rect.x + (rect.w * 0.5);
|
|
const localY = rect.y + (rect.h * 0.5);
|
|
const scale = graphCanvas.ds.scale;
|
|
const offset = graphCanvas.ds.offset;
|
|
const canvasX = (nodeX + localX) * scale + offset[0];
|
|
const canvasY = (nodeY + localY) * scale + offset[1];
|
|
const canvasRect = graphCanvas.canvas.getBoundingClientRect();
|
|
const screenX = canvasRect.left + canvasX;
|
|
const screenY = canvasRect.top + canvasY;
|
|
|
|
this.spawnInlineEditorAtScreenPos(index, screenX, screenY, rect);
|
|
}
|
|
|
|
spawnInlineEditorAtScreenPos(index, screenX, screenY, rect) {
|
|
const input = document.createElement("input");
|
|
input.type = "text";
|
|
input.value = this.node.properties.values[index].toString();
|
|
|
|
input.style.position = "fixed";
|
|
const offsetX = -(rect.w * 0.5);
|
|
const offsetY = -(rect.h * 0.5);
|
|
const FixedOffsetX = 25;
|
|
const FixedOffsetY = 10;
|
|
input.style.left = (screenX + offsetX + FixedOffsetX) + "px";
|
|
input.style.top = (screenY + offsetY + FixedOffsetY) + "px";
|
|
input.style.width = Math.max(rect.w, 60) + "px";
|
|
input.style.height = Math.max(rect.h, 24) + "px";
|
|
|
|
input.style.fontSize = "14px";
|
|
input.style.zIndex = "10000";
|
|
input.style.background = "#181818";
|
|
input.style.color = "#fff";
|
|
input.style.border = "2px solid #4b3e72";
|
|
input.style.borderRadius = "6px";
|
|
input.style.outline = "none";
|
|
input.style.padding = "0 6px";
|
|
|
|
document.body.appendChild(input);
|
|
|
|
setTimeout(() => {
|
|
input.focus();
|
|
input.select();
|
|
}, 10);
|
|
|
|
const commit = () => {
|
|
const val = parseInt(input.value, 10);
|
|
if (!isNaN(val)) {
|
|
this.node.properties.values[index] = val;
|
|
if (this.node.widgets[index]) {
|
|
this.node.widgets[index].value = val;
|
|
}
|
|
this.node.setDirtyCanvas(true, true);
|
|
}
|
|
remove();
|
|
};
|
|
|
|
const remove = () => {
|
|
document.removeEventListener("click", outsideClick, true);
|
|
if (input.parentNode) {
|
|
input.parentNode.removeChild(input);
|
|
}
|
|
};
|
|
|
|
const outsideClick = (evt) => {
|
|
if (evt.target !== input) {
|
|
commit();
|
|
}
|
|
};
|
|
|
|
setTimeout(() => {
|
|
document.addEventListener("click", outsideClick, true);
|
|
}, 100);
|
|
|
|
input.addEventListener("keydown", (evt) => {
|
|
if (evt.key === "Enter") {
|
|
evt.preventDefault();
|
|
commit();
|
|
} else if (evt.key === "Escape") {
|
|
evt.preventDefault();
|
|
remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
onValueChanged(index, val) {
|
|
this.node.properties.values[index] = parseInt(val, 10) || 0;
|
|
this.node.setDirtyCanvas(true, true);
|
|
}
|
|
|
|
incrementValue(index) {
|
|
const step = this.node.properties.intStep || 1;
|
|
// Increase the value at the given index
|
|
this.node.properties.values[index] += step;
|
|
|
|
// Update the corresponding widget (so it gets updated on UI as well)
|
|
if (this.node.widgets[index]) {
|
|
this.node.widgets[index].value = this.node.properties.values[index];
|
|
}
|
|
|
|
// Mark the canvas as dirty so it gets redrawn with the new value
|
|
this.node.setDirtyCanvas(true, true);
|
|
}
|
|
|
|
decrementValue(index) {
|
|
const step = this.node.properties.intStep || 1;
|
|
// Decrease the value at the given index
|
|
this.node.properties.values[index] -= step;
|
|
|
|
// Update the corresponding widget (so it gets updated on UI as well)
|
|
if (this.node.widgets[index]) {
|
|
this.node.widgets[index].value = this.node.properties.values[index];
|
|
}
|
|
|
|
// Mark the canvas as dirty so it gets redrawn with the new value
|
|
this.node.setDirtyCanvas(true, true);
|
|
}
|
|
|
|
|
|
onValueChanged(index, val) {
|
|
this.node.properties.values[index] = parseInt(val, 10) || 0;
|
|
this.node.setDirtyCanvas(true, true);
|
|
}
|
|
|
|
adjustArrays() {
|
|
const count = this.node.properties.activeCount;
|
|
while (this.node.properties.labels.length < count) {
|
|
this.node.properties.labels.push(`i${this.node.properties.labels.length + 1}`);
|
|
}
|
|
this.node.properties.labels.length = count;
|
|
while (this.node.properties.values.length < count) {
|
|
this.node.properties.values.push(0);
|
|
}
|
|
this.node.properties.values.length = count;
|
|
}
|
|
|
|
}
|
|
|
|
app.registerExtension({
|
|
name: "AIDocsClinicalTools.MultiInt",
|
|
async beforeRegisterNodeDef(nodeType, nodeData, appInstance) {
|
|
if (nodeData.name === "MultiInt") {
|
|
Object.assign(nodeType.prototype, {
|
|
onNodeCreated() {
|
|
this.multiIntNode = new MultiIntNode(this);
|
|
},
|
|
onMouseDown(e, pos) {
|
|
return this.multiIntNode.onMouseDown(e, pos);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|