xinyun/ComfyUI-KJNodes
1
0
Fork 0
mirror of https://git.datalinker.icu/kijai/ComfyUI-KJNodes.git synced 2025-12-24 04:04:29 +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

76
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();
} }
@ -339,7 +340,7 @@ this.heightWidget.callback = () => {
var hoverIndex = -1; var hoverIndex = -1;
var isDragging = false; var isDragging = false;
this.width = this.widthWidget.value; this.width = this.widthWidget.value;
this.height = this.heightWidget.value; this.height = this.heightWidget.value;
var i = 3; var i = 3;
this.points = []; this.points = [];
@ -372,7 +373,7 @@ this.heightWidget.callback = () => {
.lineWidth(2) .lineWidth(2)
.antialias(false) .antialias(false)
.margin(10) .margin(10)
.event("mousedown", function() { .event("mousedown", function () {
if (pv.event.shiftKey) { // Use pv.event to access the event object if (pv.event.shiftKey) { // Use pv.event to access the event object
let scaledMouse = { let scaledMouse = {
x: this.mouse().x / app.canvas.ds.scale, x: this.mouse().x / app.canvas.ds.scale,
@ -470,10 +471,10 @@ this.heightWidget.callback = () => {
return angle; return angle;
}) })
.cursor("move") .cursor("move")
.strokeStyle(function() { return i == this.index ? "#ff7f0e" : "#1f77b4"; }) .strokeStyle(function () { return i == this.index ? "#ff7f0e" : "#1f77b4"; })
.fillStyle(function() { return "rgba(100, 100, 100, 0.3)"; }) .fillStyle(function () { return "rgba(100, 100, 100, 0.3)"; })
.event("mousedown", pv.Behavior.drag()) .event("mousedown", pv.Behavior.drag())
.event("dragstart", function() { .event("dragstart", function () {
i = this.index; i = this.index;
hoverIndex = this.index; hoverIndex = this.index;
isDragging = true; isDragging = true;
@ -489,7 +490,7 @@ this.heightWidget.callback = () => {
} }
isDragging = false; isDragging = false;
}) })
.event("drag", function() { .event("drag", function () {
let adjustedX = this.mouse().x / app.canvas.ds.scale; // Adjust the new X position by the inverse of the scale factor let adjustedX = this.mouse().x / app.canvas.ds.scale; // Adjust the new X position by the inverse of the scale factor
let adjustedY = this.mouse().y / app.canvas.ds.scale; // Adjust the new Y position by the inverse of the scale factor let adjustedY = this.mouse().y / app.canvas.ds.scale; // Adjust the new Y position by the inverse of the scale factor
// Determine the bounds of the vis.Panel // Determine the bounds of the vis.Panel
@ -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,13 +673,14 @@ 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();
}); });
document.addEventListener('click', function(e) { document.addEventListener('click', function (e) {
if (!self.node.contextMenu.contains(e.target)) { if (!self.node.contextMenu.contains(e.target)) {
self.node.contextMenu.style.display = 'none'; self.node.contextMenu.style.display = 'none';
} }
@ -685,9 +688,8 @@ this.heightWidget.callback = () => {
this.node.menuItems.forEach((menuItem, index) => { this.node.menuItems.forEach((menuItem, index) => {
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();
@ -735,35 +737,31 @@ this.heightWidget.callback = () => {
fileInput.accept = 'image/*'; // Accept only image files fileInput.accept = 'image/*'; // Accept only image files
// Listen for file selection // Listen for file selection
fileInput.addEventListener('change', function(event) { fileInput.addEventListener('change', function (event) {
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;
} }
}); });
}); });