xinyun/ComfyUI-KJNodes
1
0
Fork 0
mirror of https://git.datalinker.icu/kijai/ComfyUI-KJNodes.git synced 2026-01-23 05:44:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

background image for SplineEditor

Browse Source
This commit is contained in:
kijai 2024-05-06 21:33:54 +03:00
parent ca982ecda3
commit 3b999778f0
1 changed files with 43 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/js/spline_editor.js
View File

@ -149,11 +149,17 @@ app.registerExtension({
this.menuItem3 = document.createElement("a");
this.menuItem3.href = "#";
this.menuItem3.id = "menu-item-2";
this.menuItem3.id = "menu-item-3";
this.menuItem3.textContent = "Switch point shape";
styleMenuItem(this.menuItem3);
const menuItems = [this.menuItem1, this.menuItem2, 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 => {
menuItem.addEventListener('mouseover', function() {
@ -255,6 +261,40 @@ function createSplineEditor(context, reset=false) {
console.log(dotShape)
updatePath();
});
context.menuItem4.addEventListener('click', function(e) {
// Create file input element
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*'; // Accept only image files
// Listen for file selection
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0]; // Get the selected file
if (file) {
// Create a URL for the selected file
const imageUrl = URL.createObjectURL(file);
// Set the backgroundImage with the new URL and make it visible
backgroundImage
.url(imageUrl)
.visible(true)
.root.render();
}
});
// If the backgroundImage is already visible, hide it. Otherwise, show file input.
if (backgroundImage.visible()) {
backgroundImage.visible(false)
.root.render();
} else {
// Trigger the file input dialog
fileInput.click();
}
context.contextMenu.style.display = 'none';
});
var dotShape = "circle";
var drawSamplePoints = false;
@ -437,7 +477,7 @@ function createSplineEditor(context, reset=false) {
context.contextMenu.style.top = `${pv.event.clientY}px`;
}
})
var backgroundImage = vis.add(pv.Image)
vis.add(pv.Rule)
.data(pv.range(0, h, 64))
.bottom(d => d)