xinyun/ComfyUI-KJNodes
1
0
Fork 0
mirror of https://git.datalinker.icu/kijai/ComfyUI-KJNodes.git synced 2026-06-09 16:24:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update spline_editor.js

Browse Source
This commit is contained in:
kijai 2024-10-22 19:22:33 +03:00
parent 0227f7b77f
commit 1ec5810868
1 changed files with 37 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
web/js/spline_editor.js
View File

@ -150,11 +150,12 @@ app.registerExtension({
// Create an array of menu items using the createMenuItem function // Create an array of menu items using the createMenuItem function
this.menuItems = [ this.menuItems = [
createMenuItem(1, "Toggle handles"), createMenuItem(0, "Toggle handles"),
createMenuItem(2, "Display sample points"), createMenuItem(1, "Display sample points"),
createMenuItem(3, "Switch point shape"), createMenuItem(2, "Switch point shape"),
createMenuItem(4, "Background image"), createMenuItem(3, "Background image"),
createMenuItem(5, "Invert point order") createMenuItem(4, "Invert point order"),
createMenuItem(5, "Clear Image"),
]; ];
// Add mouseover and mouseout event listeners to each menu item for styling // Add mouseover and mouseout event listeners to each menu item for styling
@ -315,16 +316,16 @@ class SplineEditor{
this.updatePath(); this.updatePath();
} }
this.widthWidget.callback = () => { this.widthWidget.callback = () => {
w = this.widthWidget.value; this.width = this.widthWidget.value;
if (w > 256) { if (this.width > 256) {
context.setSize([w + 45, context.size[1]]); context.setSize([this.width + 45, context.size[1]]);
} }
vis.width(w); this.vis.width(this.width);
this.updatePath(); this.updatePath();
} }
this.heightWidget.callback = () => { this.heightWidget.callback = () => {
this.height = this.heightWidget.value this.height = this.heightWidget.value
vis.height(this.height) this.vis.height(this.height)
context.setSize([context.size[0], this.height + 430]); context.setSize([context.size[0], this.height + 430]);
this.updatePath(); this.updatePath();
} }
@ -536,14 +537,15 @@ this.heightWidget.callback = () => {
var svgElement = this.vis.canvas(); var svgElement = this.vis.canvas();
svgElement.style['zIndex'] = "2" svgElement.style['zIndex'] = "2"
svgElement.style['position'] = "relative" svgElement.style['position'] = "relative"
context.splineEditor.element.appendChild(svgElement); this.node.splineEditor.element.appendChild(svgElement);
this.pathElements = svgElement.getElementsByTagName('path'); // Get all path elements this.pathElements = svgElement.getElementsByTagName('path'); // Get all path elements
if (this.width > 256) { if (this.width > 256) {
this.node.setSize([this.width + 45, context.size[1]]); this.node.setSize([this.width + 45, this.node.size[1]]);
} }
this.node.setSize([this.node.size[0], this.height + 430]); this.node.setSize([this.node.size[0], this.height + 430]);
this.updatePath(); this.updatePath();
this.refreshBackgroundImage();
} }
updatePath = () => { updatePath = () => {
@ -597,7 +599,7 @@ this.heightWidget.callback = () => {
if (img.width > 256) { if (img.width > 256) {
this.node.setSize([img.width + 45, this.node.size[1]]); this.node.setSize([img.width + 45, this.node.size[1]]);
} }
this.node.setSize([this.node.size[0], img.height + 300]); this.node.setSize([this.node.size[0], img.height + 500]);
this.vis.width(img.width); this.vis.width(img.width);
this.vis.height(img.height); this.vis.height(img.height);
this.height = img.height; this.height = img.height;
@ -671,7 +673,8 @@ this.heightWidget.callback = () => {
img.onload = () => this.handleImageLoad(img, null, base64String); img.onload = () => this.handleImageLoad(img, null, base64String);
} }
}; };
createContextMenu() {
createContextMenu = () => {
self = this; self = this;
document.addEventListener('contextmenu', function (e) { document.addEventListener('contextmenu', function (e) {
e.preventDefault(); e.preventDefault();
@ -687,7 +690,6 @@ this.heightWidget.callback = () => {
self = this; self = this;
menuItem.addEventListener('click', function (e) { menuItem.addEventListener('click', function (e) {
e.preventDefault(); e.preventDefault();
// Logic specific to each menu item based on its index or id
switch (index) { switch (index) {
case 0: case 0:
e.preventDefault(); e.preventDefault();
@ -739,31 +741,27 @@ this.heightWidget.callback = () => {
const file = event.target.files[0]; // Get the selected file const file = event.target.files[0]; // Get the selected file
if (file) { if (file) {
// Create a URL for the selected file
const imageUrl = URL.createObjectURL(file); const imageUrl = URL.createObjectURL(file);
let img = new Image();
// Set the backgroundImage with the new URL and make it visible img.src = imageUrl;
self.backgroundImage img.onload = () => self.handleImageLoad(img, file, null);
.url(imageUrl)
.visible(true)
.root.render();
} }
}); });
// If the backgroundImage is already visible, hide it. Otherwise, show file input.
if (self.backgroundImage.visible()) {
self.backgroundImage.visible(false)
.root.render();
} else {
// Trigger the file input dialog
fileInput.click(); fileInput.click();
}
self.node.contextMenu.style.display = 'none'; self.node.contextMenu.style.display = 'none';
break; break;
case 4: case 4:
e.preventDefault(); e.preventDefault();
self.points.reverse(); self.points.reverse();
self.updatePath(); self.updatePath();
break;
case 5:
self.backgroundImage.visible(false).root.render();
self.node.properties.imgData = null;
self.node.contextMenu.style.display = 'none';
break;
} }
}); });
}); });