xinyun/ComfyUI-KJNodes
1
0
Fork 0
mirror of https://git.datalinker.icu/kijai/ComfyUI-KJNodes.git synced 2025-12-09 21:04:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

editor linking progress

Browse Source
This commit is contained in:
Kijai 2024-05-07 16:51:07 +03:00
parent 43dded2f42
commit ac5bb32bb8
1 changed files with 59 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
web/js/spline_editor.js
View File

@ -200,11 +200,16 @@ app.registerExtension({
this.editor.createEditor();
});
chainCallback(this, "onConnectInput", function(targetSlot, type, output, originNode, originSlot) {
console.log("INPUT CONNECTED")
console.log(targetSlot, type, output, originNode, originSlot)
console.log("ORIGINNODE: ",originNode)
this.editor.syncEditors(originNode);
// console.log("INPUT CONNECTED")
// console.log(targetSlot, type, output, originNode, originSlot)
// console.log("ORIGINNODE: ",originNode)
this.editor.syncEditors(originNode, "input");
});
chainCallback(this, "onConnectOutput", function(slot, type, input, target_node, target_slot) {
// console.log("OUTPUT CONNECTED")
// console.log(slot, type, input, target_node, target_slot)
// console.log("TARGETNODE: ",target_node)
this.editor.syncEditors(target_node, "output");
});
}); // onAfterGraphConfigured
@ -216,6 +221,7 @@ class SplineEditor {
constructor(context) {
this.context = context;
this.vis = null;
this.extraLineLayers = {};
}
createEditor(reset=false) {
var context = this.context
@ -346,7 +352,7 @@ class SplineEditor {
if (coordWidget) {
coordWidget.value = coordsString;
}
//syncEditors();
vis.render();
}
@ -480,7 +486,8 @@ class SplineEditor {
splineColor = context.properties.spline_color
console.log(splineColor["color"])
}
console.log(context)
}
var vis = new pv.Panel()
@ -603,7 +610,13 @@ class SplineEditor {
})
.event("dragend", function() {
if (this.pathElements !== null) {
context.editor.syncEditors(context.getInputNode(0))
let outputEditor = context.getOutputNodes(4);
if (outputEditor !== null){
context.editor.syncEditors(outputEditor[0]) }
updatePath();
}
isDragging = false;
})
@ -654,74 +667,50 @@ class SplineEditor {
svgElement.style['position'] = "relative"
context.splineEditor.element.appendChild(svgElement);
var pathElements = svgElement.getElementsByTagName('path'); // Get all path elements
updatePath();
this.vis = vis
}
syncEditors(originNode, targetNode) {
console.log(originNode)
let linkedInputEditor = originNode
let linkedOutputEditor = originNode.outputs[4]
console.log(originNode.graph.links.filter(item => item.type === "EDITORLINK"))
console.log("linkedInputEditor: ",linkedInputEditor)
console.log("linkedOutputEditor: ",linkedOutputEditor)
let extraLineLayer = null
if (linkedInputEditor != null) {
let linkedInputPointsWidget = linkedInputEditor.widgets.find(w => w.name === "points_store")
let linkedInputEditorCoords = JSON.parse(linkedInputPointsWidget.value)
//console.log("linkedInputEditorCoords",linkedInputEditorCoords)
if (extraLineLayer) {
console.log("extraLineLayer exists",extraLineLayer)
// Update the data of the existing layer
extraLineLayer.data(linkedInputEditorCoords);
} else {
// Create the points layer if it doesn't exist
extraLineLayer = this.vis.add(pv.Line)
.data(() => linkedInputEditorCoords)
}
syncEditors(node, connectionType) {
if (node == null) return
let linkedEditor = node
if (linkedEditor != null) {
let linkedPointsWidget = linkedEditor.widgets.find(w => w.name === "points_store")
let linkedCoords = JSON.parse(linkedPointsWidget.value)
// Initialize linkedNodes if it doesn't already exist
if (!node.hasOwnProperty("linkedNodes")) {
node["linkedNodes"] = {};
}
node["linkedNodes"][this.context.id] = linkedCoords;
if (Array.isArray(linkedCoords)) {
// Check if a layer for this node ID already exists
if (!this.extraLineLayers.hasOwnProperty(node.id)) {
// Create a new layer for this node ID if it doesn't exist
this.extraLineLayers[node.id] = this.vis.add(pv.Line)
.data(linkedCoords)
.left(d => d.x)
.top(d => d.y)
.interpolate(() => linkedInputEditor.widgets.find(w => w.name === "interpolation").value)
.tension(() => linkedInputEditor.widgets.find(w => w.name === "tension").value)
.interpolate(() => node.widgets.find(w => w.name === "interpolation").value)
.tension(() => node.widgets.find(w => w.name === "tension").value)
.segmented(() => false)
.strokeStyle(linkedInputEditor.properties.spline_color["color"])
.lineWidth(3)
console.log("extraLineLayer",extraLineLayer)
}
.strokeStyle(node.properties.spline_color["color"])
.lineWidth(3);
} else {
if (extraLineLayer) {
// Remove the points layer
extraLineLayer.data([]);
this.vis.render();
// If the layer already exists, update its data
this.extraLineLayers[node.id].data(linkedCoords);
}
}
this.vis.render()
}
}//syncEditors
// if (linkedOutputEditor != null) {
// let linkedOutputPointsWidget = linkedOutputEditor[0].widgets.find(w => w.name === "points_store")
// let linkedOutputEditorCoords = JSON.parse(linkedOutputPointsWidget.value)
// //console.log(linkedInputEditorCoords)
// if (extraLineLayer) {
// // Update the data of the existing layer
// extraLineLayer.data(linkedOutputEditorCoords);
// } else {
// // Create the points layer if it doesn't exist
// extraLineLayer = this.vis.add(pv.Line)
// .data(() => linkedOutputEditorCoords)
// .left(d => d.x)
// .top(d => d.y)
// .interpolate(() => linkedOutputEditor[0].widgets.find(w => w.name === "interpolation").value)
// .tension(() => linkedOutputEditor[0].widgets.find(w => w.name === "tension").value)
// .segmented(() => false)
// .strokeStyle(linkedOutputEditor[0].properties.spline_color["color"])
// .lineWidth(3)
// }
// } else {
// // if (extraLineLayer) {
// // // Remove the points layer
// // extraLineLayer.data([]);
// // vis.render();
// // }
// }
}
}
function samplePoints(svgPathElement, numSamples, samplingMethod, width) {
var svgWidth = width; // Fixed width of the SVG element