127 lines
5.3 KiB
JavaScript
127 lines
5.3 KiB
JavaScript
import { app } from "../../../scripts/app.js";
|
|
|
|
app.registerExtension({
|
|
name: "Comfy.Calculator",
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if (nodeData.name === "Calculator") {
|
|
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
|
nodeType.prototype.onNodeCreated = function () {
|
|
const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
|
|
|
|
// Create the calculator UI
|
|
const container = document.createElement("div");
|
|
container.style.display = "flex";
|
|
container.style.flexDirection = "column";
|
|
container.style.gap = "5px";
|
|
container.style.padding = "10px";
|
|
container.style.backgroundColor = "#222";
|
|
container.style.borderRadius = "8px";
|
|
container.style.width = "220px";
|
|
container.style.boxSizing = "border-box";
|
|
|
|
const display = document.createElement("div");
|
|
display.style.backgroundColor = "#444";
|
|
display.style.color = "#0f0";
|
|
display.style.padding = "10px";
|
|
display.style.textAlign = "right";
|
|
display.style.fontSize = "20px";
|
|
display.style.fontFamily = "monospace";
|
|
display.style.borderRadius = "4px";
|
|
display.style.marginBottom = "5px";
|
|
display.style.minHeight = "44px";
|
|
display.style.display = "flex";
|
|
display.style.alignItems = "center";
|
|
display.style.justifyContent = "flex-end";
|
|
display.style.overflow = "hidden";
|
|
display.textContent = "0";
|
|
container.appendChild(display);
|
|
|
|
const buttons = [
|
|
"7", "8", "9", "/",
|
|
"4", "5", "6", "*",
|
|
"1", "2", "3", "-",
|
|
"0", ".", "C", "+",
|
|
"="
|
|
];
|
|
|
|
const grid = document.createElement("div");
|
|
grid.style.display = "grid";
|
|
grid.style.gridTemplateColumns = "repeat(4, 1fr)";
|
|
grid.style.gap = "5px";
|
|
|
|
let currentExpression = "";
|
|
let isResult = false;
|
|
|
|
const updateDisplay = (val) => {
|
|
let text = val || "0";
|
|
if (text.length > 15) {
|
|
text = text.substring(0, 15);
|
|
}
|
|
display.textContent = text;
|
|
};
|
|
|
|
buttons.forEach(btn => {
|
|
const button = document.createElement("button");
|
|
button.textContent = btn;
|
|
button.style.padding = "15px 5px";
|
|
button.style.cursor = "pointer";
|
|
button.style.border = "none";
|
|
button.style.borderRadius = "4px";
|
|
button.style.backgroundColor = isNaN(btn) && btn !== "." ? "#555" : "#777";
|
|
button.style.color = "white";
|
|
button.style.fontSize = "16px";
|
|
button.style.fontWeight = "bold";
|
|
|
|
if (btn === "=") {
|
|
button.style.gridColumn = "span 4";
|
|
button.style.backgroundColor = "#447744"; // Slight green for equals
|
|
}
|
|
|
|
button.onclick = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (btn === "C") {
|
|
currentExpression = "";
|
|
isResult = false;
|
|
updateDisplay("0");
|
|
} else if (btn === "=") {
|
|
try {
|
|
const result = eval(currentExpression.replace(/[^0-9+\-*/.]/g, ''));
|
|
updateDisplay(result.toString());
|
|
currentExpression = result.toString();
|
|
isResult = true;
|
|
} catch (e) {
|
|
updateDisplay("Error");
|
|
currentExpression = "";
|
|
}
|
|
} else {
|
|
if (isResult) {
|
|
if (!isNaN(btn)) {
|
|
currentExpression = btn;
|
|
} else {
|
|
currentExpression += btn;
|
|
}
|
|
isResult = false;
|
|
} else {
|
|
currentExpression += btn;
|
|
}
|
|
updateDisplay(currentExpression);
|
|
}
|
|
};
|
|
grid.appendChild(button);
|
|
});
|
|
|
|
container.appendChild(grid);
|
|
|
|
// Add as a DOM widget
|
|
const widget = this.addDOMWidget("calc_ui", "calc", container);
|
|
|
|
// Final size adjustment to ensure no obstruction
|
|
this.setSize([240, 360]);
|
|
|
|
return r;
|
|
};
|
|
}
|
|
},
|
|
});
|