Improve touch interactions and prevent page scroll

Prevent unintended page scrolling and selection during canvas interactions by adding CSS touch-action and user-select restrictions to canvas elements. JS touch handling now adds a body class (interaction-active) on touch start and removes it on touch end, and stops immediate propagation to better contain touch events. Also minor formatting/comment placement tweaks for clarity.

Author: koosoli

custom_components/esphome_designer/frontend/css/canvas.css

@@ -112,6 +112,8 @@
     will-change: transform;
     transform-style: preserve-3d;
     touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
 }
 
 .canvas-stage {
@@ -123,6 +125,7 @@
     min-width: max-content;
     position: relative;
     z-index: 10;
+    touch-action: none;
 }
 
 .artboard-wrapper {
@@ -175,7 +178,8 @@
     font-size: 10px;
     font-weight: 600;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    cursor: grab; /* Indicates page can be moved */
+    cursor: grab;
+    /* Indicates page can be moved */
 }
 
 .artboard-header:active {
@@ -237,6 +241,7 @@
     flex-shrink: 0;
     cursor: crosshair;
     transition: box-shadow 0.4s var(--t-base), transform 0.4s var(--t-base);
+    touch-action: none;
 }
 
 .canvas-viewport.with-rulers {

custom_components/esphome_designer/frontend/js/core/canvas_touch.js

@@ -15,6 +15,10 @@ export function setupTouchInteractions(canvasInstance) {
         const touches = ev.touches;
         const rect = canvasInstance.viewport.getBoundingClientRect();
 
+        // Lock page scrolling during active interaction
+        document.body.classList.add("interaction-active");
+        ev.stopImmediatePropagation();
+
         if (touches.length === 2) {
             ev.preventDefault();
 
@@ -267,6 +271,8 @@ function onTouchEnd(ev, canvasInstance) {
     window.removeEventListener("touchend", canvasInstance._boundTouchEnd);
     window.removeEventListener("touchcancel", canvasInstance._boundTouchEnd);
 
+    document.body.classList.remove("interaction-active");
+
     render(canvasInstance);
     clearSnapGuides(canvasInstance);
 }