xinyun/ComfyUI-KJNodes
1
0
Fork 0
mirror of https://git.datalinker.icu/kijai/ComfyUI-KJNodes.git synced 2025-12-10 05:15:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update spline_editor.js

Browse Source
This commit is contained in:
kijai 2024-05-12 02:55:36 +03:00
parent d24d1c64d2
commit 22f166008f
1 changed files with 105 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
web/js/spline_editor.js
View File

@ -135,43 +135,37 @@ app.registerExtension({
menuItem.style.textDecoration = "none";
menuItem.style.marginBottom = "5px";
}
this.menuItem1 = document.createElement("a");
this.menuItem1.href = "#";
this.menuItem1.id = "menu-item-1";
this.menuItem1.textContent = "Toggle handles";
styleMenuItem(this.menuItem1);
function createMenuItem(id, textContent) {
let menuItem = document.createElement("a");
menuItem.href = "#";
menuItem.id = `menu-item-${id}`;
menuItem.textContent = textContent;
styleMenuItem(menuItem);
return menuItem;
}
this.menuItem2 = document.createElement("a");
this.menuItem2.href = "#";
this.menuItem2.id = "menu-item-2";
this.menuItem2.textContent = "Display sample points";
styleMenuItem(this.menuItem2);
// Create an array of menu items using the createMenuItem function
this.menuItems = [
createMenuItem(1, "Toggle handles"),
createMenuItem(2, "Display sample points"),
createMenuItem(3, "Switch point shape"),
createMenuItem(4, "Background image"),
createMenuItem(5, "Invert point order")
];
this.menuItem3 = document.createElement("a");
this.menuItem3.href = "#";
this.menuItem3.id = "menu-item-3";
this.menuItem3.textContent = "Switch point shape";
styleMenuItem(this.menuItem3);
this.menuItem4 = document.createElement("a");
this.menuItem4.href = "#";
this.menuItem4.id = "menu-item-4";
this.menuItem4.textContent = "Background image";
styleMenuItem(this.menuItem4);
const menuItems = [this.menuItem1, this.menuItem2, this.menuItem3, this.menuItem4];
menuItems.forEach(menuItem => {
// Add mouseover and mouseout event listeners to each menu item for styling
this.menuItems.forEach(menuItem => {
menuItem.addEventListener('mouseover', function() {
this.style.backgroundColor = "gray";
});
menuItem.addEventListener('mouseout', function() {
this.style.backgroundColor = "#202020";
});
});
// Append menu items to the context menu
menuItems.forEach(menuItem => {
// Append each menu item to the context menu
this.menuItems.forEach(menuItem => {
this.contextMenu.appendChild(menuItem);
});
@ -219,7 +213,12 @@ function createSplineEditor(context, reset=false) {
}
});
context.menuItem1.addEventListener('click', function(e) {
context.menuItems.forEach((menuItem, index) => {
menuItem.addEventListener('click', function(e) {
e.preventDefault();
// Logic specific to each menu item based on its index or id
switch (index) {
case 0:
e.preventDefault();
if (!drawHandles) {
drawHandles = true
@ -236,23 +235,18 @@ function createSplineEditor(context, reset=false) {
.lineWidth(1)
.visible(() => drawHandles);
vis.render();
} else {
drawHandles = false
vis.render();
}
context.contextMenu.style.display = 'none';
});
context.menuItem2.addEventListener('click', function(e) {
break;
case 1:
e.preventDefault();
drawSamplePoints = !drawSamplePoints;
updatePath();
});
context.menuItem3.addEventListener('click', function(e) {
break;
case 2:
e.preventDefault();
if (dotShape == "circle"){
dotShape = "triangle"
@ -262,9 +256,8 @@ function createSplineEditor(context, reset=false) {
}
console.log(dotShape)
updatePath();
});
context.menuItem4.addEventListener('click', function(e) {
break;
case 3:
// Create file input element
const fileInput = document.createElement('input');
fileInput.type = 'file';
@ -295,6 +288,13 @@ function createSplineEditor(context, reset=false) {
fileInput.click();
}
context.contextMenu.style.display = 'none';
break;
case 4:
e.preventDefault();
points.reverse();
updatePath();
}
});
});
}