From 0843356c7895689cdf1fd73ccdb029d57698b9c8 Mon Sep 17 00:00:00 2001
From: kijai <40791699+kijai@users.noreply.github.com>
Date: Sun, 28 Apr 2024 18:22:33 +0300
Subject: [PATCH] Take canvas scale into account with drag events

---
 web/js/help_popup.js    |  5 +++--
 web/js/spline_editor.js | 36 ++++++++++++++++++++++--------------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/web/js/help_popup.js b/web/js/help_popup.js
index cf35bab..b6ccf3a 100644
--- a/web/js/help_popup.js
+++ b/web/js/help_popup.js
@@ -221,8 +221,9 @@ const create_documentation_stylesheet = () => {
          
         document.addEventListener('mousemove', function (e) {
           if (!isResizing) return;
-          const newWidth = startWidth + e.clientX - startX;
-          const newHeight = startHeight + e.clientY - startY;
+          const scale = app.canvas.ds.scale;
+          const newWidth = startWidth + (e.clientX - startX) / scale;
+          const newHeight = startHeight + (e.clientY - startY) / scale;;
           docElement.style.width = `${newWidth}px`;
           docElement.style.height = `${newHeight}px`;
          },
diff --git a/web/js/spline_editor.js b/web/js/spline_editor.js
index b8e0bc6..3228c5a 100644
--- a/web/js/spline_editor.js
+++ b/web/js/spline_editor.js
@@ -103,6 +103,7 @@ app.registerExtension({
     async beforeRegisterNodeDef(nodeType, nodeData) {
         if (nodeData?.name === 'SplineEditor') {
           chainCallback(nodeType.prototype, "onNodeCreated", function () {
+            
             hideWidgetForGood(this, this.widgets.find(w => w.name === "coordinates"))
 
             var element = document.createElement("div");
@@ -146,6 +147,7 @@ app.registerExtension({
             this.menuItem2.id = "menu-item-2";
             this.menuItem2.textContent = "Display sample points";
             styleMenuItem(this.menuItem2);
+
             // Add hover effect to menu items
             this.menuItem1.addEventListener('mouseover', function() {
               this.style.backgroundColor = "gray";
@@ -165,6 +167,7 @@ app.registerExtension({
             this.contextMenu.appendChild(this.menuItem2);
 
             document.body.appendChild( this.contextMenu);
+
             this.addWidget("button", "New spline", null, () => {
               
               if (!this.properties || !("points" in this.properties)) {
@@ -175,7 +178,9 @@ app.registerExtension({
                 createSplineEditor(this, true)
               }
             });
-            this.setSize([550, 870])
+            
+            this.setSize([550, 870]);
+            this.resizable = false;
             this.splineEditor.parentEl = document.createElement("div");
             this.splineEditor.parentEl.className = "spline-editor";
             this.splineEditor.parentEl.id = `spline-editor-${this.uuid}`
@@ -183,18 +188,10 @@ app.registerExtension({
 
             chainCallback(this, "onGraphConfigured", function() {
               console.log('onGraphConfigured');
-              createSplineEditor(this)
-              this.setSize([550, 870])
+              createSplineEditor(this);
+              this.setSize([550, 870]);
               });
-
-            //disable context menu on right click
-            // document.addEventListener('contextmenu', function(e) {
-            //   if (e.button === 2) { // Right mouse button
-            //       e.preventDefault();
-            //       e.stopPropagation();
-            //     }
-            // })
-
+              
           }); // onAfterGraphConfigured
         }//node created
       } //before register
@@ -416,7 +413,19 @@ function createSplineEditor(context, reset=false) {
       }
         isDragging = false;
     })
-    .event("drag", vis)
+    .event("drag", function() {
+      let adjustedX = this.mouse().x / app.canvas.ds.scale; // Adjust the new X position by the inverse of the scale factor
+      let adjustedY = this.mouse().y / app.canvas.ds.scale; // Adjust the new Y position by the inverse of the scale factor
+       // Determine the bounds of the vis.Panel
+      const panelWidth = vis.width();
+      const panelHeight = vis.height();
+
+      // Adjust the new position if it would place the dot outside the bounds of the vis.Panel
+      adjustedX = Math.max(0, Math.min(panelWidth, adjustedX));
+      adjustedY = Math.max(0, Math.min(panelHeight, adjustedY));
+      points[this.index] = { x: adjustedX, y: adjustedY }; // Update the point's position
+      vis.render(); // Re-render the visualization to reflect the new position
+   })
     .event("mouseover", function() {
       hoverIndex = this.index; // Set the hover index to the index of the hovered dot
       vis.render(); // Re-render the visualization
@@ -443,7 +452,6 @@ function createSplineEditor(context, reset=false) {
       })
     .textStyle("orange")
     
-  
     vis.render();
     var svgElement = vis.canvas();
     svgElement.style['zIndex'] = "2"