Change dragging canvas to use 3 fingers not 2

ZXMushroom63 · Jul 4, 2023 · 347fecd · 347fecd
1 parent ff358fc
commit 347fecd
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 26 deletions.
diff --git a/css/style.css b/css/style.css
@@ -12,7 +12,6 @@ html {
     user-select: none;
     overflow-x: hidden;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    touch-action: none;
 }
 
 #toolbar {

diff --git a/scripts/ui/draggableCanvas.js b/scripts/ui/draggableCanvas.js
@@ -16,7 +16,8 @@ window.addEventListener("mousedown", (e) => {
   }
 });
 window.addEventListener("touchstart", function (e) {
-  if (e.touches.length === 2) {
+  if (e.touches.length === 3) {
+    e.preventDefault();
     scrollingUI.scrolling = true;
     scrollingUI.oldX = e.touches[0].clientX;
     scrollingUI.oldY = e.touches[0].clientY;
@@ -30,6 +31,7 @@ window.addEventListener("touchcancel", function () {
 });
 window.addEventListener("touchmove", function (e) {
   if (scrollingUI.scrolling) {
+    e.preventDefault();
     scrollingUI.x += e.touches[0].clientX - scrollingUI.oldX;
     scrollingUI.y += e.touches[0].clientY - scrollingUI.oldY;
     scrollingUI.oldX = e.touches[0].clientX;
@@ -66,27 +68,19 @@ function updateScroll() {
     }
   });
 }
-document.querySelector("#toolbar").addEventListener("mousedown", function (e) {
-  if (e.button === 2) {
-    e.stopPropagation;
-    e.stopImmediatePropagation();
-  }
-});
-document.querySelector("#zoomout").addEventListener("mousedown", function (e) {
-  if (e.button === 2) {
-    e.stopPropagation;
-    e.stopImmediatePropagation();
-  }
-});
-document.querySelector("#zoomin").addEventListener("mousedown", function (e) {
-  if (e.button === 2) {
-    e.stopPropagation;
-    e.stopImmediatePropagation();
-  }
-});
-document.querySelector("#trashbin").addEventListener("mousedown", function (e) {
-  if (e.button === 2) {
-    e.stopPropagation;
-    e.stopImmediatePropagation();
-  }
-});
+["#toolbar", "#zoomout", "#zoomin", "#trashbin"].forEach(selector=>{
+  var elem = document.querySelector(selector);
+  elem.addEventListener("mousedown", function (e) {
+    if (e.button === 2) {
+      e.stopPropagation;
+      e.stopImmediatePropagation();
+    }
+  });
+  window.addEventListener("touchstart", function (e) {
+    if (e.touches.length===3) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+    }
+  });
+})
diff --git a/scripts/ui/node.js b/scripts/ui/node.js
@@ -36,6 +36,13 @@ function addNodeToCanvas(nodetype, x, y) {
       e.stopImmediatePropagation();
     }
   });
+  window.addEventListener("touchstart", function (e) {
+    if (e.touches.length===3) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+    }
+  });
   var inputs = document.createElement("table");
   nodetype.argv.forEach((argv) => {
     var tr = document.createElement("tr");