@elixpo/lixsketch 5.4.2 → 5.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.4.2",
+  "version": "5.4.3",
   "description": "Open-source SVG whiteboard engine with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",

package/src/SketchEngine.js

@@ -19,6 +19,9 @@ class SketchEngine {
         }
 
         this.svg = svgElement;
+        // Prevent default touch scrolling/gestures on the canvas to allow for custom pointer events
+        this.svg.style.touchAction = 'none';
+
         this.options = {
             initialZoom: 1,
             minZoom: 0.4,
@@ -388,6 +391,10 @@ class SketchEngine {
         if (typeof window.forceCleanupEraserTrail === 'function') {
             window.forceCleanupEraserTrail();
         }
+        // Clean up any lingering icon miniature/drag state
+        if (typeof window.__cleanupIconTool === 'function') {
+            window.__cleanupIconTool();
+        }
 
         window.isPaintToolActive = false;
         window.isSquareToolActive = false;

package/src/core/CopyPaste.js

@@ -644,7 +644,7 @@ function placeImageFromDataUrl(dataUrl) {
 // ============================================================
 function initCopyPaste() {
     document.addEventListener('keydown', handleCopyPasteKeydown);
-    document.addEventListener('mousemove', handleMouseMoveForPaste);
+    document.addEventListener('pointermove', handleMouseMoveForPaste);
     document.addEventListener('paste', handlePasteEvent);
 
     // Expose for context menu

package/src/core/EventDispatcher.js

@@ -80,7 +80,7 @@ function _onDocumentDragMove(e) {
     const rect = svg.getBoundingClientRect();
     const clampedX = Math.max(rect.left, Math.min(rect.right, e.clientX));
     const clampedY = Math.max(rect.top, Math.min(rect.bottom, e.clientY));
-    const clampedEvent = new MouseEvent(e.type, {
+    const clampedEvent = new PointerEvent(e.type, {
         clientX: clampedX,
         clientY: clampedY,
         buttons: e.buttons,
@@ -95,14 +95,21 @@ function _onDocumentDragMove(e) {
 
 function _onDocumentDragUp(e) {
     _stopAutoScroll();
-    document.removeEventListener('mousemove', _onDocumentDragMove);
-    document.removeEventListener('mouseup', _onDocumentDragUp);
+    document.removeEventListener('pointermove', _onDocumentDragMove);
+    document.removeEventListener('pointerup', _onDocumentDragUp);
     _documentDragActive = false;
     // Finalize the operation
     handleMainMouseUp(e);
 }
 
 const handleMainMouseDown = (e) => {
+    if (!e.target) return;
+    // Middle / right mouse buttons are reserved for panning and the
+    // browser context menu; they should NOT trigger tool actions or the
+    // multi-selection rectangle. Without this guard, middle-click-drag
+    // simultaneously pans (handled in ZoomPan) and starts a selection
+    // marquee.
+    if (e.button === 1 || e.button === 2) return;
     // Safety: remove any stray selection rectangle from a previous interrupted drag
     removeMultiSelectionRect();
 
@@ -424,8 +431,8 @@ const handleMainMouseLeave = (e) => {
         // Listen on document to continue receiving move events outside the SVG
         if (!_documentDragActive) {
             _documentDragActive = true;
-            document.addEventListener('mousemove', _onDocumentDragMove);
-            document.addEventListener('mouseup', _onDocumentDragUp);
+            document.addEventListener('pointermove', _onDocumentDragMove);
+            document.addEventListener('pointerup', _onDocumentDragUp);
         }
         return;
     }
@@ -458,13 +465,14 @@ let _boundSvg = null;
 function _onMouseEnter(e) {
     // Cursor re-entered the SVG — stop document-level tracking, SVG handles events again
     if (_documentDragActive) {
-        document.removeEventListener('mousemove', _onDocumentDragMove);
-        document.removeEventListener('mouseup', _onDocumentDragUp);
+        document.removeEventListener('pointermove', _onDocumentDragMove);
+        document.removeEventListener('pointerup', _onDocumentDragUp);
         _documentDragActive = false;
     }
 }
 
 const handleMainDblClick = (e) => {
+    if (!e.target) return;
     // Double-click on a text group from any tool: enter text edit mode
     const targetTextGroup = e.target.closest('g[data-type="text-group"]');
     if (targetTextGroup) {
@@ -476,11 +484,11 @@ const handleMainDblClick = (e) => {
 function initEventDispatcher(svgEl) {
     if (_boundSvg) cleanupEventDispatcher();
     const target = svgEl || svg;
-    target.addEventListener('mousedown', handleMainMouseDown);
-    target.addEventListener('mousemove', handleMainMouseMove);
-    target.addEventListener('mouseup', handleMainMouseUp);
-    target.addEventListener('mouseleave', handleMainMouseLeave);
-    target.addEventListener('mouseenter', _onMouseEnter);
+    target.addEventListener('pointerdown', handleMainMouseDown);
+    target.addEventListener('pointermove', handleMainMouseMove);
+    target.addEventListener('pointerup', handleMainMouseUp);
+    target.addEventListener('pointerleave', handleMainMouseLeave);
+    target.addEventListener('pointerenter', _onMouseEnter);
     target.addEventListener('dblclick', handleMainDblClick);
     _boundSvg = target;
 }
@@ -488,16 +496,16 @@ function initEventDispatcher(svgEl) {
 function cleanupEventDispatcher() {
     _stopAutoScroll();
     if (_documentDragActive) {
-        document.removeEventListener('mousemove', _onDocumentDragMove);
-        document.removeEventListener('mouseup', _onDocumentDragUp);
+        document.removeEventListener('pointermove', _onDocumentDragMove);
+        document.removeEventListener('pointerup', _onDocumentDragUp);
         _documentDragActive = false;
     }
     if (_boundSvg) {
-        _boundSvg.removeEventListener('mousedown', handleMainMouseDown);
-        _boundSvg.removeEventListener('mousemove', handleMainMouseMove);
-        _boundSvg.removeEventListener('mouseup', handleMainMouseUp);
-        _boundSvg.removeEventListener('mouseleave', handleMainMouseLeave);
-        _boundSvg.removeEventListener('mouseenter', _onMouseEnter);
+        _boundSvg.removeEventListener('pointerdown', handleMainMouseDown);
+        _boundSvg.removeEventListener('pointermove', handleMainMouseMove);
+        _boundSvg.removeEventListener('pointerup', handleMainMouseUp);
+        _boundSvg.removeEventListener('pointerleave', handleMainMouseLeave);
+        _boundSvg.removeEventListener('pointerenter', _onMouseEnter);
         _boundSvg.removeEventListener('dblclick', handleMainDblClick);
         _boundSvg = null;
     }

package/src/core/SceneSerializer.js

@@ -42,6 +42,10 @@ function serializeShape(shape) {
     const base = {
         shapeID: shape.shapeID,
         parentFrame: shape.parentFrame ? shape.parentFrame.shapeID : null,
+        // Group membership — null when the shape isn't part of a group.
+        // All shapes sharing a non-null groupId move/resize/rotate as a
+        // unit (see Selection.handleMultiSelectionMouseDown).
+        groupId: shape.groupId || null,
     };
 
     switch (shape.shapeName) {
@@ -284,10 +288,11 @@ function deserializeShape(data) {
         case 'icon': {
             if (!data.elementHTML) return null;
             const parser = new DOMParser();
-            const doc = parser.parseFromString(data.elementHTML, 'image/svg+xml');
-            const svgIcon = doc.documentElement;
-            if (!svgIcon) return null;
-            const imported = svgEl.ownerDocument.importNode(svgIcon, true);
+            // Wrap in <svg> so the parser treats the <g> as a valid child, not a document root
+            const doc = parser.parseFromString(`<svg xmlns="${ns}">${data.elementHTML}</svg>`, 'image/svg+xml');
+            const iconGroup = doc.querySelector('g');
+            if (!iconGroup) return null;
+            const imported = svgEl.ownerDocument.importNode(iconGroup, true);
             svgEl.appendChild(imported);
             const shape = new IconShape(imported);
             if (data.shapeID) shape.shapeID = data.shapeID;
@@ -376,6 +381,8 @@ export function loadScene(sceneData) {
     for (const data of frameData) {
         const shape = deserializeShape(data);
         if (shape) {
+            // Restore group membership if present.
+            if (data.groupId) shape.groupId = data.groupId;
             window.shapes.push(shape);
             if (data.shapeID) idMap.set(data.shapeID, shape);
         }
@@ -385,6 +392,7 @@ export function loadScene(sceneData) {
     for (const data of otherData) {
         const shape = deserializeShape(data);
         if (shape) {
+            if (data.groupId) shape.groupId = data.groupId;
             window.shapes.push(shape);
             if (data.shapeID) idMap.set(data.shapeID, shape);
         }

package/src/core/Selection.js

@@ -159,17 +159,22 @@ function isShapeInSelectionRect(shape, selectionBounds) {
             };
             break;
         case 'text':
-            const textElement = shape.group ? shape.group.querySelector('text') : null;
-            if (textElement) {
-                const bbox = textElement.getBBox();
-                const transform = shape.group.transform.baseVal.consolidate();
-                const matrix = transform ? transform.matrix : { e: 0, f: 0 };
-                shapeBounds = {
-                    x: bbox.x + matrix.e,
-                    y: bbox.y + matrix.f,
-                    width: bbox.width,
-                    height: bbox.height
-                };
+        case 'code':
+            const textOrCodeEl = shape.group ? shape.group.querySelector('text') : null;
+            if (textOrCodeEl && shape.group.style.display !== 'none') {
+                try {
+                    const bbox = textOrCodeEl.getBBox();
+                    const transform = shape.group.transform.baseVal.consolidate();
+                    const matrix = transform ? transform.matrix : { e: 0, f: 0 };
+                    shapeBounds = {
+                        x: bbox.x + matrix.e,
+                        y: bbox.y + matrix.f,
+                        width: bbox.width,
+                        height: bbox.height
+                    };
+                } catch {
+                    shapeBounds = { x: 0, y: 0, width: 0, height: 0 };
+                }
             } else {
                 shapeBounds = { x: 0, y: 0, width: 0, height: 0 };
             }
@@ -503,7 +508,7 @@ class MultiSelection {
             const cursors = ['nw-resize', 'ne-resize', 'sw-resize', 'se-resize', 'n-resize', 's-resize', 'w-resize', 'e-resize'];
             anchor.style.cursor = cursors[pos.index];
 
-            anchor.addEventListener('mousedown', (e) => this.startResize(e, pos.index));
+            anchor.addEventListener('pointerdown', (e) => this.startResize(e, pos.index));
 
             this.group.appendChild(anchor);
             this.anchors.push(anchor);
@@ -525,7 +530,7 @@ class MultiSelection {
         this.rotationAnchor.setAttribute('vector-effect', 'non-scaling-stroke');
         this.rotationAnchor.setAttribute('style', 'pointer-events: all; cursor: grab;');
 
-        this.rotationAnchor.addEventListener('mousedown', (e) => this.startRotation(e));
+        this.rotationAnchor.addEventListener('pointerdown', (e) => this.startRotation(e));
 
         this.rotationLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
         this.rotationLine.setAttribute('x1', rotationAnchorPos.x);
@@ -615,15 +620,15 @@ class MultiSelection {
             this._pushUndoForAll();
 
             if (typeof svg !== 'undefined') {
-                svg.removeEventListener('mousemove', onMouseMove);
-                svg.removeEventListener('mouseup', onMouseUp);
+                svg.removeEventListener('pointermove', onMouseMove);
+                svg.removeEventListener('pointerup', onMouseUp);
                 svg.style.cursor = 'default';
             }
         };
 
         if (typeof svg !== 'undefined') {
-            svg.addEventListener('mousemove', onMouseMove);
-            svg.addEventListener('mouseup', onMouseUp);
+            svg.addEventListener('pointermove', onMouseMove);
+            svg.addEventListener('pointerup', onMouseUp);
             svg.style.cursor = 'grabbing';
         }
     }
@@ -1097,15 +1102,15 @@ createRotatedControls(angleDiff = 0) {
             this._pushUndoForAll();
 
             if (typeof svg !== 'undefined') {
-                svg.removeEventListener('mousemove', onMouseMove);
-                svg.removeEventListener('mouseup', onMouseUp);
+                svg.removeEventListener('pointermove', onMouseMove);
+                svg.removeEventListener('pointerup', onMouseUp);
                 svg.style.cursor = 'default';
             }
         };
 
         if (typeof svg !== 'undefined') {
-            svg.addEventListener('mousemove', onMouseMove);
-            svg.addEventListener('mouseup', onMouseUp);
+            svg.addEventListener('pointermove', onMouseMove);
+            svg.addEventListener('pointerup', onMouseUp);
         }
     }
 
@@ -1410,6 +1415,7 @@ function moveSelectedShapes(dx, dy) {
 }
 
 function handleMultiSelectionMouseDown(e) {
+    if (!e.target) return false;
     const { x, y } = getSVGCoordsFromMouse(e);
 
     // Only handle multi-selection operations if we have multiple shapes selected
@@ -1444,8 +1450,14 @@ function handleMultiSelectionMouseDown(e) {
             return true;
         }
 
-        // If click is within the selection bounds but not on a shape,
-        // fall through to allow clicking on other shapes or starting a new selection
+        // Click is within the multi-selection bounding box but not directly on a shape —
+        // still start dragging the group (prevents accidental deselection)
+        if (multiSelection.isPointInBounds(x, y)) {
+            multiSelection.startDrag(e);
+            return true;
+        }
+
+        // Click is outside the selection bounds — fall through to deselect / start new selection
     }
 
     // Check if clicking on individual shape anchors - let them handle it
@@ -1528,6 +1540,21 @@ function handleMultiSelectionMouseDown(e) {
         // Clear multi-selection
         multiSelection.clearSelection();
 
+        // ── Group expansion ────────────────────────────────────────────
+        // If the clicked shape is part of a group, select ALL of its
+        // group-mates as a multi-selection instead of single-selecting.
+        // Subsequent drag/resize/rotate then operates on the whole group
+        // via the existing multi-selection plumbing.
+        if (clickedShape.groupId && typeof shapes !== 'undefined') {
+            const mates = shapes.filter(s => s.groupId === clickedShape.groupId);
+            if (mates.length > 1) {
+                for (const m of mates) multiSelection.addShape(m);
+                currentShape = null;
+                multiSelection.startDrag(e);
+                return true;
+            }
+        }
+
         // Set new current shape
         currentShape = clickedShape;
 
@@ -1694,6 +1721,9 @@ function handleMultiSelectionMouseUp(e) {
                 } else if (typeof selectedShape.createSelection === 'function') {
                     selectedShape.createSelection();
                     selectedShape.isSelected = true;
+                } else if (typeof selectedShape.selectShape === 'function') {
+                    selectedShape.selectShape();
+                    selectedShape.isSelected = true;
                 }
 
                 if (typeof selectedShape.updateSidebar === 'function') {
@@ -1731,7 +1761,7 @@ function handleMultiSelectionMouseUp(e) {
 
 
 // Safety net: clean up selection rect if mouse is released outside the SVG
-window.addEventListener('mouseup', () => {
+window.addEventListener('pointerup', () => {
     if (isMultiSelecting) {
         removeMultiSelectionRect();
         isMultiSelecting = false;

package/src/core/ZoomPan.js

@@ -99,26 +99,32 @@ freehandCanvas.addEventListener("wheel", function(e) {
   if (newZoom < minScale) newZoom = minScale;
   if (newZoom > maxScale) newZoom = maxScale;
 
-  // Get canvas bounding rect (in case canvas doesn't fill the window exactly)
+  // Get canvas bounding rect — this MUST be the SVG element's actual
+  // size, not the window's. In split mode the canvas pane is narrower
+  // than the viewport; using window.innerWidth here would produce a
+  // viewBox aspect that doesn't match the element, and (with
+  // preserveAspectRatio="none" on the host) the content gets stretched
+  // / squeezed on every zoom step.
   const rect = freehandCanvas.getBoundingClientRect();
-  
+
   // Calculate mouse position relative to the canvas in pixels
   const mouseX = e.clientX - rect.left;
   const mouseY = e.clientY - rect.top;
-  
+
   // Determine what fraction of the canvas the mouse is at
   const mouseFracX = mouseX / rect.width;
   const mouseFracY = mouseY / rect.height;
-  
+
   // Compute the current viewBox coordinate under the mouse.
   // currentViewBox.width and .height represent the current viewBox dimensions.
   const anchorViewBoxX = currentViewBox.x + mouseFracX * currentViewBox.width;
   const anchorViewBoxY = currentViewBox.y + mouseFracY * currentViewBox.height;
-  
-  // Now compute the new viewBox dimensions based on the new zoom level.
-  // We assume the canvas pixel size stays the same.
-  const newViewBoxWidth = window.innerWidth / newZoom;
-  const newViewBoxHeight = window.innerHeight / newZoom;
+
+  // New viewBox dimensions sized to the *element*, scaled by the new
+  // zoom. This keeps the viewBox aspect ratio matching the element so
+  // shapes stay undistorted.
+  const newViewBoxWidth = rect.width / newZoom;
+  const newViewBoxHeight = rect.height / newZoom;
   
   // Compute the new viewBox's x and y so that the anchor remains at the same screen fraction.
   // That means:

package/src/shapes/Arrow.js

@@ -592,9 +592,9 @@ class Arrow {
             if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); input.blur(); }
             if (e.key === 'Escape') { input.textContent = this.label; input.blur(); }
         });
-        input.addEventListener('mousedown', (e) => e.stopPropagation());
-        input.addEventListener('mousemove', (e) => e.stopPropagation());
-        input.addEventListener('mouseup', (e) => e.stopPropagation());
+        input.addEventListener('pointerdown', (e) => e.stopPropagation());
+        input.addEventListener('pointermove', (e) => e.stopPropagation());
+        input.addEventListener('pointerup', (e) => e.stopPropagation());
     }
 
     setLabel(text, color, fontSize) {

package/src/shapes/Circle.js

@@ -726,9 +726,9 @@ class Circle {
             if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); input.blur(); }
             if (e.key === 'Escape') { input.textContent = this.label; input.blur(); }
         });
-        input.addEventListener('mousedown', (e) => e.stopPropagation());
-        input.addEventListener('mousemove', (e) => e.stopPropagation());
-        input.addEventListener('mouseup', (e) => e.stopPropagation());
+        input.addEventListener('pointerdown', (e) => e.stopPropagation());
+        input.addEventListener('pointermove', (e) => e.stopPropagation());
+        input.addEventListener('pointerup', (e) => e.stopPropagation());
     }
 
     setLabel(text, color, fontSize) {

package/src/shapes/Frame.js

@@ -590,9 +590,9 @@ startLabelEdit(labelElement) {
     });
     
     // Prevent the input from interfering with other interactions
-    input.addEventListener('mousedown', (e) => e.stopPropagation());
-    input.addEventListener('mousemove', (e) => e.stopPropagation());
-    input.addEventListener('mouseup', (e) => e.stopPropagation());
+    input.addEventListener('pointerdown', (e) => e.stopPropagation());
+    input.addEventListener('pointermove', (e) => e.stopPropagation());
+    input.addEventListener('pointerup', (e) => e.stopPropagation());
 }
     selectFrame() {
         this.isSelected = true;
@@ -626,7 +626,7 @@ startLabelEdit(labelElement) {
             newInput.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter') newInput.blur();
             });
-            newInput.addEventListener('mousedown', (e) => e.stopPropagation());
+            newInput.addEventListener('pointerdown', (e) => e.stopPropagation());
         }
 
         if (resizeBtn) {
@@ -790,7 +790,7 @@ startLabelEdit(labelElement) {
         }
 
         anchor.style.cursor = position.cursor;
-        anchor.addEventListener('mousedown', (e) => this.startAnchorDrag(e, index));
+        anchor.addEventListener('pointerdown', (e) => this.startAnchorDrag(e, index));
         
         this.anchors.push(anchor);
         this.group.appendChild(anchor);

package/src/shapes/Line.js

@@ -352,9 +352,9 @@ class Line {
             if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); input.blur(); }
             if (e.key === 'Escape') { input.textContent = this.label; input.blur(); }
         });
-        input.addEventListener('mousedown', (e) => e.stopPropagation());
-        input.addEventListener('mousemove', (e) => e.stopPropagation());
-        input.addEventListener('mouseup', (e) => e.stopPropagation());
+        input.addEventListener('pointerdown', (e) => e.stopPropagation());
+        input.addEventListener('pointermove', (e) => e.stopPropagation());
+        input.addEventListener('pointerup', (e) => e.stopPropagation());
     }
 
     setLabel(text, color, fontSize) {

package/src/shapes/Rectangle.js

@@ -362,9 +362,9 @@ class Rectangle {
             if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); input.blur(); }
             if (e.key === 'Escape') { input.textContent = this.label; input.blur(); }
         });
-        input.addEventListener('mousedown', (e) => e.stopPropagation());
-        input.addEventListener('mousemove', (e) => e.stopPropagation());
-        input.addEventListener('mouseup', (e) => e.stopPropagation());
+        input.addEventListener('pointerdown', (e) => e.stopPropagation());
+        input.addEventListener('pointermove', (e) => e.stopPropagation());
+        input.addEventListener('pointerup', (e) => e.stopPropagation());
     }
 
     setLabel(text, color, fontSize) {

package/src/shapes/TextShape.js

@@ -219,7 +219,12 @@ class TextShape {
     }
 
     selectShape() {
-        selectElement(this.group);
+        // Use the real textTool selectElement (with selection feedback) if available
+        if (typeof window !== 'undefined' && window.__selectTextElement) {
+            window.__selectTextElement(this.group);
+        } else {
+            selectElement(this.group);
+        }
     }
 }
 

package/src/tools/arrowTool.js

@@ -386,9 +386,9 @@ svg.style.cursor = 'default';
 };
 
 // Remove old event listeners and add new ones
-svg.removeEventListener('mousedown', handleMouseDown);
-svg.removeEventListener('mousemove', handleMouseMove);
-svg.removeEventListener('mouseup', handleMouseUp);
+svg.removeEventListener('pointerdown', handleMouseDown);
+svg.removeEventListener('pointermove', handleMouseMove);
+svg.removeEventListener('pointerup', handleMouseUp);
 
 
 // Updated style handlers with undo/redo support

package/src/tools/codeTool.js

@@ -384,10 +384,10 @@ function makeCodeEditable(codeElement, groupElement, clickEvent = null) {
         if (!editorContainer.contains(event.target)) {
             input.clearHighlightTimeout();
             renderCodeFromEditor(input, codeElement, true);
-            document.removeEventListener('mousedown', handleClickOutside, true);
+            document.removeEventListener('pointerdown', handleClickOutside, true);
         }
     };
-    document.addEventListener('mousedown', handleClickOutside, true);
+    document.addEventListener('pointerdown', handleClickOutside, true);
     input.handleClickOutside = handleClickOutside;
 
     groupElement.style.display = "none";
@@ -591,7 +591,7 @@ function renderCodeFromEditor(input, codeElement, deleteIfEmpty = false) {
 
     // Clean up event listeners
     if (input.handleClickOutside) {
-        document.removeEventListener('mousedown', input.handleClickOutside, true);
+        document.removeEventListener('pointerdown', input.handleClickOutside, true);
     }
 
     // Clear any pending highlighting timeouts
@@ -809,7 +809,7 @@ function renderCode(input, codeElement, deleteIfEmpty = false) {
     const gElement = input.codeGroup;
 
     if (input.handleClickOutside) {
-        document.removeEventListener('mousedown', input.handleClickOutside, true);
+        document.removeEventListener('pointerdown', input.handleClickOutside, true);
     }
 
     document.body.removeChild(input);
@@ -1044,7 +1044,7 @@ function createCodeSelectionFeedback(groupElement) {
         groupElement.appendChild(handleRect);
         codeResizeHandles[handle.name] = handleRect;
 
-        handleRect.addEventListener('mousedown', (e) => {
+        handleRect.addEventListener('pointerdown', (e) => {
             if (window.isSelectionToolActive) {
                 e.stopPropagation();
                 startCodeResize(e, handle.name);
@@ -1069,7 +1069,7 @@ function createCodeSelectionFeedback(groupElement) {
 
     codeResizeHandles.rotate = rotationAnchor;
 
-    rotationAnchor.addEventListener('mousedown', (e) => {
+    rotationAnchor.addEventListener('pointerdown', (e) => {
         if (window.isSelectionToolActive) {
             e.stopPropagation();
             startCodeRotation(e);
@@ -1190,8 +1190,8 @@ function startCodeRotation(event) {
 
     svg.style.cursor = 'grabbing';
 
-    window.addEventListener('mousemove', handleCodeMouseMove); // Fix: use window instead of svg
-    window.addEventListener('mouseup', handleCodeMouseUp);
+    window.addEventListener('pointermove', handleCodeMouseMove); // Fix: use window instead of svg
+    window.addEventListener('pointerup', handleCodeMouseUp);
 }
 
 
@@ -1244,8 +1244,8 @@ function deselectCodeBlock() {
         codeRotationStartAngle = 0;
         codeRotationStartTransform = null;
         svg.style.cursor = 'default';
-        window.removeEventListener('mousemove', handleCodeMouseMove);
-        window.removeEventListener('mouseup', handleCodeMouseUp);
+        window.removeEventListener('pointermove', handleCodeMouseMove);
+        window.removeEventListener('pointerup', handleCodeMouseUp);
     }
 }
 
@@ -1288,8 +1288,8 @@ function startCodeDrag(event) {
 
     svg.style.cursor = 'grabbing';
 
-    window.addEventListener('mousemove', handleCodeMouseMove); // Fix: use window
-    window.addEventListener('mouseup', handleCodeMouseUp);   // Fix: use window
+    window.addEventListener('pointermove', handleCodeMouseMove); // Fix: use window
+    window.addEventListener('pointerup', handleCodeMouseUp);   // Fix: use window
 }
 
 function startCodeResize(event, anchor) {
@@ -1332,8 +1332,8 @@ function startCodeResize(event, anchor) {
 
     svg.style.cursor = codeResizeHandles[anchor]?.style.cursor || 'default';
 
-    window.addEventListener('mousemove', handleCodeMouseMove); 
-    window.addEventListener('mouseup', handleCodeMouseUp);   
+    window.addEventListener('pointermove', handleCodeMouseMove); 
+    window.addEventListener('pointerup', handleCodeMouseUp);   
 }
 
 
@@ -1745,8 +1745,8 @@ const handleCodeMouseUp = (event) => {
 
     svg.style.cursor = 'default';
 
-    svg.removeEventListener('mousemove', handleCodeMouseMove);
-    svg.removeEventListener('mouseup', handleCodeMouseUp);
+    svg.removeEventListener('pointermove', handleCodeMouseMove);
+    svg.removeEventListener('pointerup', handleCodeMouseUp);
 };
 
 
@@ -1760,6 +1760,7 @@ function extractRotationFromTransform(element) {
 }
 
 const handleCodeMouseDown = function (e) {
+    if (!e.target) return;
     // Check for contenteditable code editor (new style)
     const activeContentEditor = document.querySelector(".svg-code-editor[contenteditable='true']");
     if (activeContentEditor) {

package/src/tools/freehandTool.js

@@ -596,9 +596,9 @@ function cloneStrokeData(stroke) {
 }
 
 // Event listeners
-// svg.addEventListener('mousedown', handleMouseDown);
-// svg.addEventListener('mousemove', handleMouseMove);
-// svg.addEventListener('mouseup', handleMouseUp);
+// svg.addEventListener('pointerdown', handleMouseDown);
+// svg.addEventListener('pointermove', handleMouseMove);
+// svg.addEventListener('pointerup', handleMouseUp);
 
 // Bridge freehand tool settings to React sidebar
 window.freehandToolSettings = {
@@ -634,7 +634,7 @@ window.updateSelectedFreehandStyle = function(changes) {
 
 // Safety net: if mouseup fires outside the SVG canvas (e.g. on toolbar/overlay),
 // ensure we stop drawing so the stroke doesn't continue when pointer re-enters.
-window.addEventListener('mouseup', () => {
+window.addEventListener('pointerup', () => {
     if (isDrawingStroke) {
         isDrawingStroke = false;
         lastPoint = null;