Update spline_editor.js

web/js/spline_editor.js

@@ -135,43 +135,37 @@ 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);
+              return menuItem;
+            }
             
-            this.menuItem2 = document.createElement("a");
+            // Create an array of menu items using the createMenuItem function
-            this.menuItem2.href = "#";
+            this.menuItems = [
-            this.menuItem2.id = "menu-item-2";
+              createMenuItem(1, "Toggle handles"),
-            this.menuItem2.textContent = "Display sample points";
+              createMenuItem(2, "Display sample points"),
-            styleMenuItem(this.menuItem2);
+              createMenuItem(3, "Switch point shape"),
+              createMenuItem(4, "Background image"),
+              createMenuItem(5, "Invert point order")
+            ];
             
-            this.menuItem3 = document.createElement("a");
+            // Add mouseover and mouseout event listeners to each menu item for styling
-            this.menuItem3.href = "#";
+            this.menuItems.forEach(menuItem => {
-            this.menuItem3.id = "menu-item-3";
-            this.menuItem3.textContent = "Switch point shape";
-            styleMenuItem(this.menuItem3);
-
-            this.menuItem4 = document.createElement("a");
-            this.menuItem4.href = "#";
-            this.menuItem4.id = "menu-item-4";
-            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() {
                 this.style.backgroundColor = "#202020";
               });
             });
             
-            // Append menu items to the context menu
+            // Append each menu item to the context menu
-            menuItems.forEach(menuItem => {
+            this.menuItems.forEach(menuItem => {
               this.contextMenu.appendChild(menuItem);
             });
 
@@ -219,7 +213,12 @@ function createSplineEditor(context, reset=false) {
       }
     });
 
-    context.menuItem1.addEventListener('click', function(e) {
+    context.menuItems.forEach((menuItem, index) => {
+      menuItem.addEventListener('click', function(e) {
+        e.preventDefault();
+        // Logic specific to each menu item based on its index or id
+        switch (index) {
+          case 0:
             e.preventDefault();
             if (!drawHandles) {
               drawHandles = true
@@ -236,23 +235,18 @@ function createSplineEditor(context, reset=false) {
               .lineWidth(1)
               .visible(() => drawHandles);
               vis.render();
-        
-    
             } else {
               drawHandles = false
               vis.render();
             }
             context.contextMenu.style.display = 'none';
-    
+            break;
-    });
+          case 1:
-
-    context.menuItem2.addEventListener('click', function(e) {
             e.preventDefault();
             drawSamplePoints = !drawSamplePoints;
             updatePath();
-    });
+            break;
-
+          case 2:
-    context.menuItem3.addEventListener('click', function(e) {
             e.preventDefault();
             if (dotShape == "circle"){
               dotShape = "triangle"
@@ -262,9 +256,8 @@ function createSplineEditor(context, reset=false) {
             }
             console.log(dotShape)
             updatePath();
-    });
+            break;
-
+          case 3:
-    context.menuItem4.addEventListener('click', function(e) {
             // Create file input element
             const fileInput = document.createElement('input');
             fileInput.type = 'file';
@@ -295,6 +288,13 @@ function createSplineEditor(context, reset=false) {
               fileInput.click();
             }
             context.contextMenu.style.display = 'none';
+            break;
+          case 4:
+            e.preventDefault();
+            points.reverse();
+            updatePath();
+        }
+      });
     });
   }