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

Update spline_editor.js

Browse Source
This commit is contained in:
kijai 2024-04-20 11:27:50 +03:00
parent 891daeb438
commit cb1e98abf1
1 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
web/js/spline_editor.js
View File

@ -64,7 +64,7 @@ export const loadScript = (
font: 12px monospace; font: 12px monospace;
line-height: 1.5em; line-height: 1.5em;
padding: 10px; padding: 10px;
z-index: 3; z-index: 0;
overflow: hidden; overflow: hidden;
border-radius: 10px; border-radius: 10px;
border-style: solid; border-style: solid;
@ -112,18 +112,12 @@ app.registerExtension({
this.uuid = makeUUID() this.uuid = makeUUID()
element.id = `spline-editor-${this.uuid}` element.id = `spline-editor-${this.uuid}`
var node = this
var splineEditor = this.addDOMWidget(nodeData.name, "SplineEditorWidget", element, { var splineEditor = this.addDOMWidget(nodeData.name, "SplineEditorWidget", element, {
serialize: false, serialize: false,
hideOnZoom: false, hideOnZoom: false,
getValue() { });
return element.value;
},
setValue(v) {
element.value = v;
},
});
this.setSize([620, 760]) this.setSize([620, 760])
splineEditor.parentEl = document.createElement("div"); splineEditor.parentEl = document.createElement("div");
splineEditor.parentEl.className = "spline-editor"; splineEditor.parentEl.className = "spline-editor";
@ -132,15 +126,46 @@ app.registerExtension({
splineEditor.parentEl.style['height'] = "544px" splineEditor.parentEl.style['height'] = "544px"
element.appendChild(splineEditor.parentEl); element.appendChild(splineEditor.parentEl);
this.coordWidget = this.widgets.find(w => w.name === "coordinates"); var coordWidget = this.widgets.find(w => w.name === "coordinates");
this.interpolationWidget = this.widgets.find(w => w.name === "interpolation"); var interpolationWidget = this.widgets.find(w => w.name === "interpolation");
this.pointsWidget = this.widgets.find(w => w.name === "points_to_sample"); var pointsWidget = this.widgets.find(w => w.name === "points_to_sample");
var pointsStoreWidget = this.widgets.find(w => w.name === "points_store");
chainCallback(this, "onConfigure", function(info) {
info.widgets_values = {};
if (!this.widgets) {
console.log("object has no widgets, there is nothing to store")
return;
}
if (info != null){
console.log(info)
info.points = pointsStoreWidget.value
//pointsStoreWidget.value = JSON.stringify(points)
}
});
//addElement(nodeData, nodeType, this) //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 (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 != "") {
console.log("stored points: ", pointsStoreWidget.value)
var points = JSON.parse(pointsStoreWidget.value)
}
if (points == null) { if (points == null) {
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)
@ -162,12 +187,14 @@ app.registerExtension({
}) })
.event("mouseup", function() { .event("mouseup", function() {
if (this.pathElements !== null) { if (this.pathElements !== null) {
console.log(this.pathElements) let coords = samplePoints(pathElements[0], pointsWidget.value);
let coords = samplePoints(this.pathElements[0], this.pointsWidget.value);
let coordsString = JSON.stringify(coords); let coordsString = JSON.stringify(coords);
if (this.coordWidget) { console.log(points)
this.coordWidget.value = coordsString; pointsStoreWidget.value = JSON.stringify(points);
console.log(this.coordWidget.value) //node.setProperty("points", points)
if (coordWidget) {
coordWidget.value = coordsString;
console.log("stored points: ", pointsStoreWidget.value)
} }
} }
}); });
@ -182,7 +209,7 @@ app.registerExtension({
.data(() => points) .data(() => points)
.left(d => d.x) .left(d => d.x)
.top(d => d.y) .top(d => d.y)
.interpolate(() => this.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)
@ -217,13 +244,12 @@ app.registerExtension({
.textStyle("orange") .textStyle("orange")
vis.render(); vis.render();
var svgElement = vis.canvas(); var svgElement = vis.canvas();
svgElement.style['zIndex'] = "7" svgElement.style['zIndex'] = "2"
svgElement.style['position'] = "fixed" svgElement.style['position'] = "fixed"
vis.id = `spline-editor-vis-${this.uuid}` //vis.id = `spline-editor-vis-${this.uuid}`
splineEditor.element.appendChild(svgElement); splineEditor.element.appendChild(svgElement);
svgElement.id = `spline-editor-svg-${this.uuid}` //svgElement.id = `spline-editor-svg-${this.uuid}`
var pathElements = svgElement.getElementsByTagName('path'); // Get all path elements
this.pathElements = svgElement.getElementsByTagName('path'); // Get all path elements
}); });
} }