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

129
web/js/spline_editor.js
View File

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