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

spline editor updates

Browse Source
This commit is contained in:
kijai 2024-04-20 18:20:02 +03:00
parent cb1e98abf1
commit 1aef2b8e43
2 changed files with 87 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
nodes.py
View File

@ -4567,7 +4567,8 @@ class SplineEditor:
def INPUT_TYPES(cls): def INPUT_TYPES(cls):
return { return {
"required": { "required": {
"coordinates": ("STRING", {"multiline": True}), "points_store": ("STRING", {"multiline": False}),
"coordinates": ("STRING", {"multiline": False}),
"mask_width": ("INT", {"default": 512, "min": 8, "max": MAX_RESOLUTION, "step": 8}), "mask_width": ("INT", {"default": 512, "min": 8, "max": MAX_RESOLUTION, "step": 8}),
"mask_height": ("INT", {"default": 512, "min": 8, "max": MAX_RESOLUTION, "step": 18}), "mask_height": ("INT", {"default": 512, "min": 8, "max": MAX_RESOLUTION, "step": 18}),
"points_to_sample": ("INT", {"default": 4, "min": 2, "max": 1000, "step": 1}), "points_to_sample": ("INT", {"default": 4, "min": 2, "max": 1000, "step": 1}),
@ -4591,7 +4592,7 @@ class SplineEditor:
CATEGORY = "KJNodes/experimental" CATEGORY = "KJNodes/experimental"
def splinedata(self, mask_width, mask_height, coordinates, interpolation, points_to_sample): def splinedata(self, mask_width, mask_height, coordinates, interpolation, points_to_sample, points_store):
print(coordinates) print(coordinates)
coordinates = json.loads(coordinates) coordinates = json.loads(coordinates)
print(coordinates) print(coordinates)

182
web/js/spline_editor.js
View File

@ -118,60 +118,51 @@ app.registerExtension({
hideOnZoom: false, hideOnZoom: false,
}); });
this.setSize([620, 760]) this.setSize([600, 780])
splineEditor.parentEl = document.createElement("div"); splineEditor.parentEl = document.createElement("div");
splineEditor.parentEl.className = "spline-editor"; splineEditor.parentEl.className = "spline-editor";
splineEditor.parentEl.id = `spline-editor-${this.uuid}` splineEditor.parentEl.id = `spline-editor-${this.uuid}`
splineEditor.parentEl.style['width'] = "90%" splineEditor.parentEl.style['width'] = "90%"
splineEditor.parentEl.style['height'] = "544px" splineEditor.parentEl.style['height'] = "544px"
element.appendChild(splineEditor.parentEl); element.appendChild(splineEditor.parentEl);
console.log("svgElement: ", Object.keys(node.widgets[6]))
var coordWidget = this.widgets.find(w => w.name === "coordinates"); const coordWidget = this.widgets.find(w => w.name === "coordinates");
var interpolationWidget = this.widgets.find(w => w.name === "interpolation"); const interpolationWidget = this.widgets.find(w => w.name === "interpolation");
var pointsWidget = this.widgets.find(w => w.name === "points_to_sample"); const pointsWidget = this.widgets.find(w => w.name === "points_to_sample");
var pointsStoreWidget = this.widgets.find(w => w.name === "points_store"); const pointsStoreWidget = this.widgets.find(w => w.name === "points_store");
//disable context menu on right click
document.addEventListener('contextmenu', function(e) {
if (e.button === 2) { // Right mouse button
e.preventDefault();
e.stopPropagation();
}
})
chainCallback(this, "onConfigure", function(info) { chainCallback(this, "onGraphConfigured", function() {
info.widgets_values = {}; console.log("onGraphConfigured")
if (!this.widgets) { console.log("pointsStoreWidget ", pointsStoreWidget)
console.log("object has no widgets, there is nothing to store")
return; if (pointsStoreWidget.value != "") {
console.log(pointsStoreWidget.value)
points = JSON.parse(pointsStoreWidget.value)
} }
if (info != null){
console.log(info)
info.points = pointsStoreWidget.value
//pointsStoreWidget.value = JSON.stringify(points)
}
});
//addElement(nodeData, nodeType, this)
var w = 512
var h = 512
var i = 3
var segmented = false
if (info == null){
var info = {}
}
// console.log("Node: ",node)
// console.log("node properties ", node.properties.points)
console.log("info points", info["points"])
// console.log("node keys ", Object.keys(node))
if (pointsStoreWidget.value != "") { var w = 512
console.log("stored points: ", pointsStoreWidget.value) var h = 512
var points = JSON.parse(pointsStoreWidget.value) var i = 3
} var segmented = false
if (points == null) { if (points == null) {
console.log("Creating random points") console.log("Creating random points")
var points = pv.range(1, 5).map(i => ({ var points = pv.range(1, 5).map(i => ({
x: i * w / 5, x: i * w / 5,
y: 50 + Math.random() * (h - 100) y: 50 + Math.random() * (h - 100)
})); }));
} }
let vis = new pv.Panel()
var vis = new pv.Panel()
.width(w) .width(w)
.height(h) .height(h)
.fillStyle("var(--comfy-menu-bg)") .fillStyle("var(--comfy-menu-bg)")
@ -181,6 +172,7 @@ app.registerExtension({
.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
console.log(this.mouse())
i = points.push(this.mouse()) - 1; i = points.push(this.mouse()) - 1;
return this; return this;
} }
@ -198,70 +190,64 @@ app.registerExtension({
} }
} }
}); });
vis.add(pv.Rule) vis.add(pv.Rule)
.data(pv.range(0, 8, .5)) .data(pv.range(0, 8, .5))
.bottom(d => d * 70 + 9.5) .bottom(d => d * 70 + 9.5)
.strokeStyle("gray") .strokeStyle("gray")
.lineWidth(1) .lineWidth(1)
vis.add(pv.Line) vis.add(pv.Line)
.data(() => points) .data(() => points)
.left(d => d.x) .left(d => d.x)
.top(d => d.y) .top(d => d.y)
.interpolate(() => interpolationWidget.value) .interpolate(() => interpolationWidget.value)
.segmented(() => segmented) .segmented(() => segmented)
.strokeStyle(pv.Colors.category10().by(pv.index)) .strokeStyle(pv.Colors.category10().by(pv.index))
.tension(0.5) .tension(0.5)
.lineWidth(3) .lineWidth(3)
vis.add(pv.Dot) vis.add(pv.Dot)
.data(() => points) .data(() => points)
.left(d => d.x) .left(d => d.x)
.top(d => d.y) .top(d => d.y)
.radius(7) .radius(7)
.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.2)"; }) .fillStyle(function() { return "rgba(100, 100, 100, 0.2)"; })
.event("mousedown", pv.Behavior.drag()) .event("mousedown", pv.Behavior.drag())
.event("dragstart", function() { .event("dragstart", function() {
i = this.index; i = this.index;
if (pv.event.button === 2) { if (pv.event.button === 2) {
points.splice(i--, 1); points.splice(i--, 1);
vis.render(); vis.render();
} }
return this; return this;
})
.event("drag", vis)
.anchor("top").add(pv.Label)
.font(d => Math.sqrt(d[2]) * 32 + "px sans-serif")
//.text(d => `(${Math.round(d.x)}, ${Math.round(d.y)})`)
.text(d => {
// Normalize y to range 0.0 to 1.0, considering the inverted y-axis
var normalizedY = 1.0 - (d.y / h);
return `${normalizedY.toFixed(2)}`;
}) })
.textStyle("orange") .event("drag", vis)
.anchor("top").add(pv.Label)
.font(d => Math.sqrt(d[2]) * 32 + "px sans-serif")
//.text(d => `(${Math.round(d.x)}, ${Math.round(d.y)})`)
.text(d => {
// Normalize y to range 0.0 to 1.0, considering the inverted y-axis
var normalizedY = 1.0 - (d.y / h);
return `${normalizedY.toFixed(2)}`;
})
.textStyle("orange")
vis.render(); vis.render();
var svgElement = vis.canvas(); var svgElement = vis.canvas();
svgElement.style['zIndex'] = "2" svgElement.style['zIndex'] = "2"
svgElement.style['position'] = "fixed" svgElement.style['position'] = "relative"
//vis.id = `spline-editor-vis-${this.uuid}`
splineEditor.element.appendChild(svgElement); splineEditor.element.appendChild(svgElement);
//svgElement.id = `spline-editor-svg-${this.uuid}`
var pathElements = svgElement.getElementsByTagName('path'); // Get all path elements var pathElements = svgElement.getElementsByTagName('path'); // Get all path elements
});
});
} }); // onAfterGraphConfigured
//disable context menu on right click }//node created
document.addEventListener('contextmenu', function(e) { } //before register
if (e.button === 2) { // Right mouse button })//register
e.preventDefault();
e.stopPropagation();
}
})
}
})
function samplePoints(svgPathElement, numSamples) { function samplePoints(svgPathElement, numSamples) {
var pathLength = svgPathElement.getTotalLength(); var pathLength = svgPathElement.getTotalLength();