Update spline_editor.js

web/js/spline_editor.js

@@ -135,44 +135,38 @@ app.registerExtension({
               menuItem.style.textDecoration = "none";
               menuItem.style.marginBottom = "5px";
             }
-            this.menuItem1 = document.createElement("a");
+            function createMenuItem(id, textContent) {
-            this.menuItem1.href = "#";
+              let menuItem = document.createElement("a");
-            this.menuItem1.id = "menu-item-1";
+              menuItem.href = "#";
-            this.menuItem1.textContent = "Toggle handles";
+              menuItem.id = `menu-item-${id}`;
-            styleMenuItem(this.menuItem1);
+              menuItem.textContent = textContent;
-
+              styleMenuItem(menuItem);
-            this.menuItem2 = document.createElement("a");
+              return menuItem;
-            this.menuItem2.href = "#";
+            }
-            this.menuItem2.id = "menu-item-2";
+            
-            this.menuItem2.textContent = "Display sample points";
+            // Create an array of menu items using the createMenuItem function
-            styleMenuItem(this.menuItem2);
+            this.menuItems = [
-
+              createMenuItem(1, "Toggle handles"),
-            this.menuItem3 = document.createElement("a");
+              createMenuItem(2, "Display sample points"),
-            this.menuItem3.href = "#";
+              createMenuItem(3, "Switch point shape"),
-            this.menuItem3.id = "menu-item-3";
+              createMenuItem(4, "Background image"),
-            this.menuItem3.textContent = "Switch point shape";
+              createMenuItem(5, "Invert point order")
-            styleMenuItem(this.menuItem3);
+            ];
-
+            
-            this.menuItem4 = document.createElement("a");
+            // Add mouseover and mouseout event listeners to each menu item for styling
-            this.menuItem4.href = "#";
+            this.menuItems.forEach(menuItem => {
-            this.menuItem4.id = "menu-item-4";
+              menuItem.addEventListener('mouseover', function() {
-            this.menuItem4.textContent = "Background image";
-            styleMenuItem(this.menuItem4);
-
-            const menuItems = [this.menuItem1, this.menuItem2, this.menuItem3, this.menuItem4];
-
-            menuItems.forEach(menuItem => {
-            menuItem.addEventListener('mouseover', function() {
                 this.style.backgroundColor = "gray";
-            });
+              });
-            menuItem.addEventListener('mouseout', function() {
+            
+              menuItem.addEventListener('mouseout', function() {
                 this.style.backgroundColor = "#202020";
+              });
             });
-            });
+            
-
+            // Append each menu item to the context menu
-            // Append menu items to the context menu
+            this.menuItems.forEach(menuItem => {
-            menuItems.forEach(menuItem => {
+              this.contextMenu.appendChild(menuItem);
-            this.contextMenu.appendChild(menuItem);
             });
 
             document.body.appendChild( this.contextMenu);
@@ -219,82 +213,88 @@ function createSplineEditor(context, reset=false) {
       }
     });
 
-    context.menuItem1.addEventListener('click', function(e) {
+    context.menuItems.forEach((menuItem, index) => {
-      e.preventDefault();
+      menuItem.addEventListener('click', function(e) {
-      if (!drawHandles) {
-        drawHandles = true
-        vis.add(pv.Line)
-        .data(() => points.map((point, index) => ({
-            start: point,
-            end: [index]
-        })))
-        .left(d => d.start.x)
-        .top(d => d.start.y)
-        .interpolate("linear")
-        .tension(0) // Straight lines
-        .strokeStyle("#ff7f0e") // Same color as control points
-        .lineWidth(1)
-        .visible(() => drawHandles);
-        vis.render();
-        
-    
-      } else {
-        drawHandles = false
-        vis.render();
-      }
-      context.contextMenu.style.display = 'none';
-    
-    });
-
-    context.menuItem2.addEventListener('click', function(e) {
         e.preventDefault();
-        drawSamplePoints = !drawSamplePoints;
+        // Logic specific to each menu item based on its index or id
-        updatePath();
+        switch (index) {
-    });
+          case 0:
+            e.preventDefault();
+            if (!drawHandles) {
+              drawHandles = true
+              vis.add(pv.Line)
+              .data(() => points.map((point, index) => ({
+                  start: point,
+                  end: [index]
+              })))
+              .left(d => d.start.x)
+              .top(d => d.start.y)
+              .interpolate("linear")
+              .tension(0) // Straight lines
+              .strokeStyle("#ff7f0e") // Same color as control points
+              .lineWidth(1)
+              .visible(() => drawHandles);
+              vis.render();
+            } else {
+              drawHandles = false
+              vis.render();
+            }
+            context.contextMenu.style.display = 'none';
+            break;
+          case 1:
+            e.preventDefault();
+            drawSamplePoints = !drawSamplePoints;
+            updatePath();
+            break;
+          case 2:
+            e.preventDefault();
+            if (dotShape == "circle"){
+              dotShape = "triangle"
+            }
+            else {
+              dotShape = "circle"
+            }
+            console.log(dotShape)
+            updatePath();
+            break;
+          case 3:
+            // Create file input element
+            const fileInput = document.createElement('input');
+            fileInput.type = 'file';
+            fileInput.accept = 'image/*'; // Accept only image files
 
-    context.menuItem3.addEventListener('click', function(e) {
+            // Listen for file selection
-      e.preventDefault();
+            fileInput.addEventListener('change', function(event) {
-      if (dotShape == "circle"){
+              const file = event.target.files[0]; // Get the selected file
-        dotShape = "triangle"
-      }
-      else {
-        dotShape = "circle"
-      }
-      console.log(dotShape)
-      updatePath();
-    });
 
-    context.menuItem4.addEventListener('click', function(e) {
+              if (file) {
-      // Create file input element
+                // Create a URL for the selected file
-      const fileInput = document.createElement('input');
+                const imageUrl = URL.createObjectURL(file);
-      fileInput.type = 'file';
+                
-      fileInput.accept = 'image/*'; // Accept only image files
+                // Set the backgroundImage with the new URL and make it visible
+                backgroundImage
+                  .url(imageUrl)
+                  .visible(true)
+                  .root.render();
+              }
+            });
 
-      // Listen for file selection
+            // If the backgroundImage is already visible, hide it. Otherwise, show file input.
-      fileInput.addEventListener('change', function(event) {
+            if (backgroundImage.visible()) {
-        const file = event.target.files[0]; // Get the selected file
+              backgroundImage.visible(false)
-
+              .root.render();
-        if (file) {
+            } else {
-          // Create a URL for the selected file
+              // Trigger the file input dialog
-          const imageUrl = URL.createObjectURL(file);
+              fileInput.click();
-          
+            }
-          // Set the backgroundImage with the new URL and make it visible
+            context.contextMenu.style.display = 'none';
-          backgroundImage
+            break;
-            .url(imageUrl)
+          case 4:
-            .visible(true)
+            e.preventDefault();
-            .root.render();
+            points.reverse();
+            updatePath();
         }
       });
-
-      // If the backgroundImage is already visible, hide it. Otherwise, show file input.
-      if (backgroundImage.visible()) {
-        backgroundImage.visible(false)
-        .root.render();
-      } else {
-        // Trigger the file input dialog
-        fileInput.click();
-      }
-      context.contextMenu.style.display = 'none';
     });
   }