spline editor updates

nodes.py

@@ -4567,7 +4567,8 @@ class SplineEditor:
     def INPUT_TYPES(cls):
         return {
             "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_height": ("INT", {"default": 512, "min": 8, "max": MAX_RESOLUTION, "step": 18}),
                 "points_to_sample": ("INT", {"default": 4, "min": 2, "max": 1000, "step": 1}),
@@ -4591,7 +4592,7 @@ class SplineEditor:
 
     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)
         coordinates = json.loads(coordinates)
         print(coordinates)

web/js/spline_editor.js

@@ -118,7 +118,7 @@ app.registerExtension({
             hideOnZoom: false,
             });
             
-            this.setSize([620, 760])
+            this.setSize([600, 780])
             splineEditor.parentEl = document.createElement("div");
             splineEditor.parentEl.className = "spline-editor";
             splineEditor.parentEl.id = `spline-editor-${this.uuid}`
@@ -126,44 +126,34 @@ app.registerExtension({
             splineEditor.parentEl.style['height'] = "544px"
             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 h = 512
               var i = 3
               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) {
                 console.log("Creating random points")
                         var points = pv.range(1, 5).map(i => ({
@@ -171,7 +161,8 @@ app.registerExtension({
                           y: 50 + Math.random() * (h - 100)
                         }));
                       }
-            let vis = new pv.Panel()
+              
+              var vis = new pv.Panel()
               .width(w)
               .height(h)
               .fillStyle("var(--comfy-menu-bg)")
@@ -181,6 +172,7 @@ app.registerExtension({
               .margin(10)
               .event("mousedown", function() {
                 if (pv.event.shiftKey) { // Use pv.event to access the event object
+                    console.log(this.mouse())
                     i = points.push(this.mouse()) - 1;
                     return this;
                 }
@@ -242,26 +234,20 @@ app.registerExtension({
                       return `${normalizedY.toFixed(2)}`;
                   })
                 .textStyle("orange")
+                
                 vis.render();
                 var svgElement = vis.canvas();
                 svgElement.style['zIndex'] = "2"
-                svgElement.style['position'] = "fixed"
+                svgElement.style['position'] = "relative"
-                //vis.id = `spline-editor-vis-${this.uuid}`
                 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) {
     var pathLength = svgPathElement.getTotalLength();