xinyun/ComfyUI-KJNodes
1
0
Fork 0
mirror of https://git.datalinker.icu/kijai/ComfyUI-KJNodes.git synced 2025-12-14 23:34:35 +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)

178
web/js/spline_editor.js
View File

@ -118,7 +118,7 @@ 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}`
@ -126,52 +126,43 @@ app.registerExtension({
splineEditor.parentEl.style['height'] = "544px" splineEditor.parentEl.style['height'] = "544px"
element.appendChild(splineEditor.parentEl); element.appendChild(splineEditor.parentEl);
var coordWidget = this.widgets.find(w => w.name === "coordinates"); console.log("svgElement: ", Object.keys(node.widgets[6]))
var interpolationWidget = this.widgets.find(w => w.name === "interpolation");
var pointsWidget = this.widgets.find(w => w.name === "points_to_sample");
var pointsStoreWidget = this.widgets.find(w => w.name === "points_store");
const coordWidget = this.widgets.find(w => w.name === "coordinates");
const interpolationWidget = this.widgets.find(w => w.name === "interpolation");
const pointsWidget = this.widgets.find(w => w.name === "points_to_sample");
const pointsStoreWidget = this.widgets.find(w => w.name === "points_store");
chainCallback(this, "onConfigure", function(info) { //disable context menu on right click
info.widgets_values = {}; document.addEventListener('contextmenu', function(e) {
if (!this.widgets) { if (e.button === 2) { // Right mouse button
console.log("object has no widgets, there is nothing to store") e.preventDefault();
return; e.stopPropagation();
}
})
chainCallback(this, "onGraphConfigured", function() {
console.log("onGraphConfigured")
console.log("pointsStoreWidget ", pointsStoreWidget)
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 w = 512 var h = 512
var h = 512 var i = 3
var i = 3 var segmented = false
var segmented = false if (points == null) {
if (info == null){ console.log("Creating random points")
var info = {} var points = pv.range(1, 5).map(i => ({
} x: i * w / 5,
y: 50 + Math.random() * (h - 100)
}));
}
// console.log("Node: ",node) var vis = new pv.Panel()
// console.log("node properties ", node.properties.points)
console.log("info points", info["points"])
// console.log("node keys ", Object.keys(node))
if (pointsStoreWidget.value != "") {
console.log("stored points: ", pointsStoreWidget.value)
var points = JSON.parse(pointsStoreWidget.value)
}
if (points == null) {
console.log("Creating random points")
var points = pv.range(1, 5).map(i => ({
x: i * w / 5,
y: 50 + Math.random() * (h - 100)
}));
}
let 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;
} }
@ -200,68 +192,62 @@ 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
//disable context menu on right click
document.addEventListener('contextmenu', function(e) { });
if (e.button === 2) { // Right mouse button }); // onAfterGraphConfigured
e.preventDefault(); }//node created
e.stopPropagation(); } //before register
} })//register
})
}
})
function samplePoints(svgPathElement, numSamples) { function samplePoints(svgPathElement, numSamples) {
var pathLength = svgPathElement.getTotalLength(); var pathLength = svgPathElement.getTotalLength();