Initial work on SplineEditor linking

nodes/curve_nodes.py

@@ -146,11 +146,12 @@ class SplineEditor:
             "optional": {
                 "min_value": ("FLOAT", {"default": 0.0, "min": -10000.0, "max": 10000.0, "step": 0.01}),
                 "max_value": ("FLOAT", {"default": 1.0, "min": -10000.0, "max": 10000.0, "step": 0.01}),
+                "editor_link": ("EDITORLINK",),
             }
         }
 
-    RETURN_TYPES = ("MASK", "STRING", "FLOAT", "INT")
+    RETURN_TYPES = ("MASK", "STRING", "FLOAT", "INT", "EDITORLINK",)
-    RETURN_NAMES = ("mask", "coord_str", "float", "count")
+    RETURN_NAMES = ("mask", "coord_str", "float", "count", "editor_link",)
     FUNCTION = "splinedata"
     CATEGORY = "KJNodes/weights"
     DESCRIPTION = """
@@ -192,7 +193,7 @@ output types:
 """
 
     def splinedata(self, mask_width, mask_height, coordinates, float_output_type, interpolation, 
-                   points_to_sample, sampling_method, points_store, tension, repeat_output, min_value=0.0, max_value=1.0):
+                   points_to_sample, sampling_method, points_store, tension, repeat_output, min_value=0.0, max_value=1.0, editor_link=None):
         
         coordinates = json.loads(coordinates)
         for coord in coordinates:
@@ -221,7 +222,7 @@ output types:
         masks_out = torch.stack(mask_tensors)
         masks_out = masks_out.repeat(repeat_output, 1, 1, 1)
         masks_out = masks_out.mean(dim=-1)
-        return (masks_out, str(coordinates), out_floats, len(out_floats))
+        return (masks_out, str(coordinates), out_floats, len(out_floats), editor_link,)
 
 class CreateShapeMaskOnPath:
     

web/js/spline_editor.js

@@ -181,7 +181,7 @@ app.registerExtension({
               }
             });
             
-            this.setSize([550, 920]);
+            this.setSize([550, 950]);
             this.resizable = false;
             this.splineEditor.parentEl = document.createElement("div");
             this.splineEditor.parentEl.className = "spline-editor";
@@ -265,18 +265,40 @@ function createSplineEditor(context, reset=false) {
       
       if (linkedInputEditor != null) {
         console.log(linkedInputEditor.widgets)
-        linkedInputEditorCoords = JSON.parse(linkedInputEditor.widgets.find(w => w.name === "coordinates").value)
+        linkedInputEditorCoords = JSON.parse(linkedInputEditor.widgets.find(w => w.name === "points_store").value)
         console.log(linkedInputEditorCoords)
+        if (extraLineLayer) {
+          // Update the data of the existing points layer
+          extraLineLayer.data(linkedInputEditorCoords);
+        } else {
+            // Create the points layer if it doesn't exist
+            extraLineLayer = vis.add(pv.Line)
+              .data(() => linkedInputEditorCoords)
+              .left(d => d.x)
+              .top(d => d.y)
+              .interpolate(() => interpolation)
+              .tension(() => tension)
+              .segmented(() => false)
+              .strokeStyle(linkedInputEditor.properties.spline_color["color"])
+              .lineWidth(3)
+          }
+      } else {
+          if (extraLineLayer) {
+            // Remove the points layer
+            extraLineLayer.data([]);
+            vis.render();
+          }
+       
       }
       
       if (drawSamplePoints) {
         if (pointsLayer) {
           // Update the data of the existing points layer
-          pointsLayer.data(linkedInputEditorCoords);
+          pointsLayer.data(coords);
         } else {
             // Create the points layer if it doesn't exist
             pointsLayer = vis.add(pv.Dot)
-                .data(linkedInputEditorCoords)
+                .data(coords)
                 .left(function(d) { return d.x; })
                 .top(function(d) { return d.y; })
                 .radius(5) // Adjust the radius as needed
@@ -336,6 +358,7 @@ function createSplineEditor(context, reset=false) {
   var rangeMin = minValueWidget.value
   var rangeMax = maxValueWidget.value
   var pointsLayer = null;
+  var extraLineLayer = null;
   var samplingMethod = samplingMethodWidget.value
   
   if (samplingMethod == "path") {
@@ -406,10 +429,13 @@ function createSplineEditor(context, reset=false) {
  var w = widthWidget.value;
  var h = heightWidget.value;
  var i = 3;
- let points = [];
+ let points = []; 
+ let splineColor = null;
 
  if (!reset && pointsStoreWidget.value != "") {
     points = JSON.parse(pointsStoreWidget.value);
+    splineColor = context.properties.spline_color["color"]
+    console.log(splineColor["color"])
  } else {
   points = pv.range(1, 4).map((i, index) => {
     if (index === 0) {
@@ -426,8 +452,20 @@ function createSplineEditor(context, reset=false) {
       };
     }
   });
-    pointsStoreWidget.value = JSON.stringify(points);
+    pointsStoreWidget.value = JSON.stringify(points)
- }
+    
+    context.properties.points = JSON.stringify(points)
+    if (!splineColor) {
+      let colors = pv.Colors.category10().range()
+      splineColor = colors[Math.floor(Math.random() * pv.Colors.category10().range().length)]
+      context.addProperty("spline_color", splineColor, pv.Colors)
+    }
+    else{
+      splineColor = context.properties.spline_color
+      console.log(splineColor["color"])
+    }
+    console.log(context)
+  }
   
   var vis = new pv.Panel()
   .width(w)
@@ -494,7 +532,7 @@ function createSplineEditor(context, reset=false) {
     .interpolate(() => interpolation)
     .tension(() => tension)
     .segmented(() => false)
-    .strokeStyle(pv.Colors.category10().by(pv.index))
+    .strokeStyle(splineColor)
     .lineWidth(3)
     
   vis.add(pv.Dot)