@elixpo/lixsketch 5.4.2 → 5.4.3

package/src/tools/iconTool.js

@@ -41,18 +41,16 @@ function removeSelection() {
     const svg = getSVGElement();
     if (!svg) return;
 
-    const outline = svg.querySelector(".selection-outline");
-    if (outline) {
-        svg.removeChild(outline);
-    }
+    // Remove ALL selection outlines (prevents orphaned ghost elements)
+    svg.querySelectorAll(".selection-outline").forEach(el => el.remove());
 
     removeResizeAnchors();
     removeRotationAnchor();
 
     if (selectedIcon) {
-        selectedIcon.removeEventListener('mousedown', startDrag);
-        selectedIcon.removeEventListener('mouseup', stopDrag);
-        selectedIcon.removeEventListener('mouseleave', stopDrag);
+        selectedIcon.removeEventListener('pointerdown', startDrag);
+        selectedIcon.removeEventListener('pointerup', stopDrag);
+        selectedIcon.removeEventListener('pointerleave', stopDrag);
     }
 }
 
@@ -190,12 +188,13 @@ const drawMiniatureIcon = () => {
 };
 
 const handleMouseDownIcon = async (e) => {
+    if (!e.target) return;
     if (isSelectionToolActive) {
         const clickedIcon = e.target.closest('[type="icon"]');
         if (clickedIcon) {
             e.preventDefault();
             e.stopPropagation();
-            
+
             if (selectedIcon === clickedIcon) {
                 originalX = parseFloat(selectedIcon.getAttribute('x')) || 0;
                 originalY = parseFloat(selectedIcon.getAttribute('y')) || 0;
@@ -221,24 +220,24 @@ const handleMouseDownIcon = async (e) => {
                     const deltaY = Math.abs(currentY - initialMouseY);
 
                     if (deltaX > dragThreshold || deltaY > dragThreshold) {
-                        document.removeEventListener('mousemove', checkDragStartWithThreshold);
-                        document.removeEventListener('mouseup', cancelDragPrep);
-                        window.removeEventListener('mouseup', cancelDragPrep);
+                        document.removeEventListener('pointermove', checkDragStartWithThreshold);
+                        document.removeEventListener('pointerup', cancelDragPrep);
+                        window.removeEventListener('pointerup', cancelDragPrep);
 
                         const svg = getSVGElement();
-                        if (svg) svg.removeEventListener('mouseup', cancelDragPrep);
+                        if (svg) svg.removeEventListener('pointerup', cancelDragPrep);
 
                         startDrag(moveEvent);
                     }
                 }
 
                 _pendingDragChecker = checkDragStartWithThreshold;
-                document.addEventListener('mousemove', checkDragStartWithThreshold);
-                document.addEventListener('mouseup', cancelDragPrep);
-                window.addEventListener('mouseup', cancelDragPrep);
+                document.addEventListener('pointermove', checkDragStartWithThreshold);
+                document.addEventListener('pointerup', cancelDragPrep);
+                window.addEventListener('pointerup', cancelDragPrep);
 
                 const svg = getSVGElement();
-                if (svg) svg.addEventListener('mouseup', cancelDragPrep);
+                if (svg) svg.addEventListener('pointerup', cancelDragPrep);
 
                 return;
             } else {
@@ -246,6 +245,16 @@ const handleMouseDownIcon = async (e) => {
                 return;
             }
         }
+
+        // Clicked on empty canvas while an icon is selected — deselect it
+        if (selectedIcon) {
+            removeSelection();
+            selectedIcon = null;
+            if (currentShape && currentShape.shapeName === 'icon') {
+                currentShape = null;
+            }
+        }
+        return;
     }
 
     if (!isDraggingIcon || !iconToPlace || !isIconToolActive) {
@@ -358,10 +367,11 @@ const handleMouseDownIcon = async (e) => {
         placedIconShape = iconShape;
 
         if (typeof shapes !== 'undefined' && Array.isArray(shapes)) {
-            shapes.push(iconShape);
-            console.log('Icon added to shapes array for arrow attachment and frame functionality');
-        } else {
-            console.warn('shapes array not found - arrows and frames may not work with icons');
+            // Prevent duplicates — check if this element is already tracked
+            const alreadyExists = shapes.some(s => s.shapeName === 'icon' && s.element === finalIconGroup);
+            if (!alreadyExists) {
+                shapes.push(iconShape);
+            }
         }
 
         const finalFrame = hoveredFrameIcon;
@@ -403,18 +413,10 @@ const handleMouseDownIcon = async (e) => {
 };
 
 const handleMouseUpIcon = (e) => {
-    if (isSelectionToolActive) {
-        const clickedElement = e.target;
-        const isIconElement = clickedElement.closest('[type="icon"]');
-        const isAnchorElement = clickedElement.classList.contains('resize-anchor') ||
-            clickedElement.classList.contains('rotation-anchor') ||
-            clickedElement.classList.contains('selection-outline');
-
-        if (!isIconElement && !isAnchorElement && selectedIcon) {
-            removeSelection();
-            selectedIcon = null;
-        }
-    }
+    if (!e.target) return;
+    // Deselection on empty-canvas click is handled by handleMouseDownIcon.
+    // We intentionally do NOT deselect on mouseup — after a drag the cursor
+    // often ends up on the background, and that shouldn't kill the selection.
 
     if (hoveredFrameIcon) {
         hoveredFrameIcon.removeHighlight();
@@ -468,21 +470,21 @@ function addSelectionOutline() {
 }
 
 function checkDragStart(event) {
-    document.removeEventListener('mousemove', checkDragStart);
-    document.removeEventListener('mouseup', cancelDragPrep);
+    document.removeEventListener('pointermove', checkDragStart);
+    document.removeEventListener('pointerup', cancelDragPrep);
     startDrag(event);
 }
 function cancelDragPrep(event) {
     if (_pendingDragChecker) {
-        document.removeEventListener('mousemove', _pendingDragChecker);
+        document.removeEventListener('pointermove', _pendingDragChecker);
         _pendingDragChecker = null;
     }
-    document.removeEventListener('mouseup', cancelDragPrep);
-    window.removeEventListener('mouseup', cancelDragPrep);
+    document.removeEventListener('pointerup', cancelDragPrep);
+    window.removeEventListener('pointerup', cancelDragPrep);
 
     const svg = getSVGElement();
     if (svg) {
-        svg.removeEventListener('mouseup', cancelDragPrep);
+        svg.removeEventListener('pointerup', cancelDragPrep);
     }
 }
 
@@ -506,14 +508,14 @@ function startDrag(event) {
         }
     }
 
-    document.addEventListener('mousemove', dragIcon);
-    document.addEventListener('mouseup', stopDrag);
+    document.addEventListener('pointermove', dragIcon);
+    document.addEventListener('pointerup', stopDrag);
     
-    window.addEventListener('mouseup', stopDrag);
+    window.addEventListener('pointerup', stopDrag);
     
     const svg = getSVGElement();
     if (svg) {
-        svg.addEventListener('mouseup', stopDrag);
+        svg.addEventListener('pointerup', stopDrag);
     }
     
     document.addEventListener('dragstart', preventDefaultDrag);
@@ -530,7 +532,7 @@ function selectIcon(event) {
 
     event.stopPropagation();
 
-    let targetIcon = event.target.closest('[type="icon"]');
+    let targetIcon = event.target.closest ? event.target.closest('[type="icon"]') : null;
     if (!targetIcon) {
         let current = event.target;
         while (current && current !== document) {
@@ -542,44 +544,43 @@ function selectIcon(event) {
         }
     }
 
-    if (selectedIcon !== targetIcon) {
-        if (selectedIcon) {
-            removeSelection();
-        }
+    // Always clean up previous selection before applying new one
+    if (selectedIcon) {
+        removeSelection();
+    }
 
-        selectedIcon = targetIcon;
+    selectedIcon = targetIcon;
 
-        if (!selectedIcon) {
-            console.warn('Could not find icon to select');
-            return;
-        }
+    if (!selectedIcon) {
+        console.warn('Could not find icon to select');
+        return;
+    }
 
-        const transform = selectedIcon.getAttribute('transform');
-        if (transform) {
-            const rotateMatch = transform.match(/rotate\(([^,\s]+)/);
-            if (rotateMatch) {
-                iconRotation = parseFloat(rotateMatch[1]);
-            }
-        } else {
-            iconRotation = 0;
+    const transform = selectedIcon.getAttribute('transform');
+    if (transform) {
+        const rotateMatch = transform.match(/rotate\(([^,\s]+)/);
+        if (rotateMatch) {
+            iconRotation = parseFloat(rotateMatch[1]);
         }
+    } else {
+        iconRotation = 0;
+    }
 
-        addSelectionOutline();
+    addSelectionOutline();
 
-        originalX = parseFloat(selectedIcon.getAttribute('x')) || 0;
-        originalY = parseFloat(selectedIcon.getAttribute('y')) || 0;
-        originalWidth = parseFloat(selectedIcon.getAttribute('width')) || placedIconSize;
-        originalHeight = parseFloat(selectedIcon.getAttribute('height')) || placedIconSize;
+    originalX = parseFloat(selectedIcon.getAttribute('x')) || 0;
+    originalY = parseFloat(selectedIcon.getAttribute('y')) || 0;
+    originalWidth = parseFloat(selectedIcon.getAttribute('width')) || placedIconSize;
+    originalHeight = parseFloat(selectedIcon.getAttribute('height')) || placedIconSize;
 
-        // Set currentShape so EventDispatcher routes subsequent events to icon handler
-        const iconShape = (typeof shapes !== 'undefined' && Array.isArray(shapes))
-            ? shapes.find(s => s.shapeName === 'icon' && s.element === selectedIcon)
-            : null;
-        if (iconShape) {
-            currentShape = iconShape;
-            currentShape.isSelected = true;
-            if (window.__showSidebarForShape) window.__showSidebarForShape('icon');
-        }
+    // Set currentShape so EventDispatcher routes subsequent events to icon handler
+    const iconShape = (typeof shapes !== 'undefined' && Array.isArray(shapes))
+        ? shapes.find(s => s.shapeName === 'icon' && s.element === selectedIcon)
+        : null;
+    if (iconShape) {
+        currentShape = iconShape;
+        currentShape.isSelected = true;
+        if (window.__showSidebarForShape) window.__showSidebarForShape('icon');
     }
 }
 
@@ -613,8 +614,8 @@ function addResizeAnchors(x, y, width, height, centerX, centerY, iconWidth, rota
 
         svg.appendChild(anchor);
 
-        anchor.addEventListener('mousedown', startResize);
-        anchor.addEventListener('mouseup', stopResize);
+        anchor.addEventListener('pointerdown', startResize);
+        anchor.addEventListener('pointerup', stopResize);
     });
 }
 
@@ -642,8 +643,8 @@ function addRotationAnchor(x, y, width, height, centerX, centerY, iconWidth, rot
 
     svg.appendChild(rotationAnchor);
 
-    rotationAnchor.addEventListener('mousedown', startRotation);
-    rotationAnchor.addEventListener('mouseup', stopRotation);
+    rotationAnchor.addEventListener('pointerdown', startRotation);
+    rotationAnchor.addEventListener('pointerup', stopRotation);
 
     rotationAnchor.addEventListener('mouseover', function() {
         if (!isRotatingIcon && !isDragging) {
@@ -662,10 +663,7 @@ function removeRotationAnchor() {
     const svg = getSVGElement();
     if (!svg) return;
 
-    const rotationAnchor = svg.querySelector(".rotation-anchor");
-    if (rotationAnchor) {
-        svg.removeChild(rotationAnchor);
-    }
+    svg.querySelectorAll(".rotation-anchor").forEach(el => el.remove());
 }
 
 function removeResizeAnchors() {
@@ -695,14 +693,14 @@ function startResize(event) {
 
     const svg = getSVGElement();
     if (svg) {
-        svg.addEventListener('mousemove', resizeIcon);
+        svg.addEventListener('pointermove', resizeIcon);
     }
-    document.addEventListener('mouseup', stopResize);
+    document.addEventListener('pointerup', stopResize);
 }
 
 function stopResize(event) {
     stopInteracting();
-    document.removeEventListener('mouseup', stopResize);
+    document.removeEventListener('pointerup', stopResize);
 }
 
 function resizeIcon(event) {
@@ -875,13 +873,13 @@ function stopDrag(event) {
     isDragging = false;
     if (window.__iconShapeState) window.__iconShapeState.isDragging = false;
 
-    document.removeEventListener('mousemove', dragIcon);
-    document.removeEventListener('mouseup', stopDrag);
-    window.removeEventListener('mouseup', stopDrag);
+    document.removeEventListener('pointermove', dragIcon);
+    document.removeEventListener('pointerup', stopDrag);
+    window.removeEventListener('pointerup', stopDrag);
     
     const svg = getSVGElement();
     if (svg) {
-        svg.removeEventListener('mouseup', stopDrag);
+        svg.removeEventListener('pointerup', stopDrag);
     }
     
     document.removeEventListener('dragstart', preventDefaultDrag);
@@ -914,10 +912,10 @@ function startRotation(event) {
 
     const svg = getSVGElement();
     if (svg) {
-        svg.addEventListener('mousemove', rotateIcon);
+        svg.addEventListener('pointermove', rotateIcon);
         svg.style.cursor = 'grabbing';
     }
-    document.addEventListener('mouseup', stopRotation);
+    document.addEventListener('pointerup', stopRotation);
 }
 
 function rotateIcon(event) {
@@ -965,10 +963,10 @@ function stopRotation(event) {
 
     const svg = getSVGElement();
     if (svg) {
-        svg.removeEventListener('mousemove', rotateIcon);
+        svg.removeEventListener('pointermove', rotateIcon);
         svg.style.cursor = 'default';
     }
-    document.removeEventListener('mouseup', stopRotation);
+    document.removeEventListener('pointerup', stopRotation);
 }
 
 function stopInteracting() {
@@ -1060,14 +1058,14 @@ function stopInteracting() {
 
     const svg = getSVGElement();
     if (svg) {
-        svg.removeEventListener('mousemove', dragIcon);
-        svg.removeEventListener('mousemove', resizeIcon);
-        svg.removeEventListener('mousemove', rotateIcon);
+        svg.removeEventListener('pointermove', dragIcon);
+        svg.removeEventListener('pointermove', resizeIcon);
+        svg.removeEventListener('pointermove', rotateIcon);
     }
     
-    document.removeEventListener('mousemove', dragIcon);
-    document.removeEventListener('mousemove', resizeIcon);
-    document.removeEventListener('mousemove', rotateIcon);
+    document.removeEventListener('pointermove', dragIcon);
+    document.removeEventListener('pointermove', resizeIcon);
+    document.removeEventListener('pointermove', rotateIcon);
     
     currentAnchor = null;
     startRotationMouseAngle = null;
@@ -1327,6 +1325,21 @@ function handleIconClick(event, filename) {
 
 
 
+// Clean up any lingering miniature icon or drag state (called on tool switch)
+function cleanupIconTool() {
+    if (currentIconElement) {
+        const svg = getSVGElement();
+        if (svg && currentIconElement.parentNode === svg) {
+            svg.removeChild(currentIconElement);
+        }
+        currentIconElement = null;
+    }
+    isDraggingIcon = false;
+    iconToPlace = null;
+    document.body.style.cursor = 'default';
+}
+window.__cleanupIconTool = cleanupIconTool;
+
 // Bridge for React sidebar to trigger icon placement
 window.prepareIconPlacement = function(svgContent) {
     iconToPlace = svgContent;

package/src/tools/imageTool.js

@@ -537,9 +537,9 @@ function selectImage(event) {
     originalHeight = parseFloat(selectedImage.getAttribute('height'));
 
      // Add drag event listeners to the selected image
-     selectedImage.addEventListener('mousedown', startDrag);
-     selectedImage.addEventListener('mouseup', stopDrag);
-     selectedImage.addEventListener('mouseleave', stopDrag);
+     selectedImage.addEventListener('pointerdown', startDrag);
+     selectedImage.addEventListener('pointerup', stopDrag);
+     selectedImage.addEventListener('pointerleave', stopDrag);
 
     // Set currentShape for sidebar + layer controls
     const imageShape = (typeof shapes !== 'undefined' && Array.isArray(shapes))
@@ -611,9 +611,9 @@ function removeSelectionOutline() {
 
     // Remove drag event listeners
     if (selectedImage) {
-        selectedImage.removeEventListener('mousedown', startDrag);
-        selectedImage.removeEventListener('mouseup', stopDrag);
-        selectedImage.removeEventListener('mouseleave', stopDrag);
+        selectedImage.removeEventListener('pointerdown', startDrag);
+        selectedImage.removeEventListener('pointerup', stopDrag);
+        selectedImage.removeEventListener('pointerleave', stopDrag);
     }
 }
 
@@ -647,8 +647,8 @@ function addResizeAnchors(x, y, width, height, centerX, centerY) {
         svg.appendChild(anchor);
 
         // Add event listeners for resizing
-        anchor.addEventListener('mousedown', startResize);
-        anchor.addEventListener('mouseup', stopResize);
+        anchor.addEventListener('pointerdown', startResize);
+        anchor.addEventListener('pointerup', stopResize);
     });
 }
 
@@ -672,8 +672,8 @@ function addRotationAnchor(x, y, width, height, centerX, centerY) {
     svg.appendChild(rotationAnchor);
 
     // Add event listeners for rotation
-    rotationAnchor.addEventListener('mousedown', startRotation);
-    rotationAnchor.addEventListener('mouseup', stopRotation);
+    rotationAnchor.addEventListener('pointerdown', startRotation);
+    rotationAnchor.addEventListener('pointerup', stopRotation);
     
     rotationAnchor.addEventListener('mouseover', function () {
         if (!isRotatingImage && !isDragging) {
@@ -708,8 +708,8 @@ function addAnchor(x, y, cursor) {
     svg.appendChild(anchor);
 
     // Add event listeners for dragging
-    anchor.addEventListener('mousedown', startResize);
-    anchor.addEventListener('mouseup', stopResize);
+    anchor.addEventListener('pointerdown', startResize);
+    anchor.addEventListener('pointerup', stopResize);
 
 }
 
@@ -739,13 +739,13 @@ function startResize(event) {
         }
     }
     
-    svg.addEventListener('mousemove', resizeImage);
-    document.addEventListener('mouseup', stopResize);
+    svg.addEventListener('pointermove', resizeImage);
+    document.addEventListener('pointerup', stopResize);
 }
 
 function stopResize(event) {
     stopInteracting(); // Call the combined stop function
-    document.removeEventListener('mouseup', stopResize); // Remove the global mouseup listener
+    document.removeEventListener('pointerup', stopResize); // Remove the global mouseup listener
 }
 
 function resizeImage(event) {
@@ -893,8 +893,8 @@ function stopRotation(event) {
     isRotatingImage = false;
     startRotationMouseAngle = null;
     startImageRotation = null;
-    svg.removeEventListener('mousemove', rotateImage);
-    document.removeEventListener('mouseup', stopRotation);
+    svg.removeEventListener('pointermove', rotateImage);
+    document.removeEventListener('pointerup', stopRotation);
     svg.style.cursor = 'default';
 }
 
@@ -941,8 +941,8 @@ function startDrag(event) {
     dragOffsetX = x - parseFloat(selectedImage.getAttribute('x'));
     dragOffsetY = y - parseFloat(selectedImage.getAttribute('y'));
 
-    svg.addEventListener('mousemove', dragImage);
-    document.addEventListener('mouseup', stopDrag);
+    svg.addEventListener('pointermove', dragImage);
+    document.addEventListener('pointerup', stopDrag);
 }
 
 function dragImage(event) {
@@ -982,7 +982,7 @@ function dragImage(event) {
 
 function stopDrag(event) {
     stopInteracting(); // Call the combined stop function
-    document.removeEventListener('mouseup', stopDrag); // Remove the global mouseup listener
+    document.removeEventListener('pointerup', stopDrag); // Remove the global mouseup listener
 }
 
 function startRotation(event) {
@@ -1008,8 +1008,8 @@ function startRotation(event) {
     startRotationMouseAngle = Math.atan2(mouseY - centerY, mouseX - centerX) * 180 / Math.PI;
     startImageRotation = imageRotation;
 
-    svg.addEventListener('mousemove', rotateImage);
-    document.addEventListener('mouseup', stopRotation);
+    svg.addEventListener('pointermove', rotateImage);
+    document.addEventListener('pointerup', stopRotation);
     
     svg.style.cursor = 'grabbing';
 }
@@ -1168,9 +1168,9 @@ function stopInteracting() {
 
     isDragging = false;
     isRotatingImage = false;
-    svg.removeEventListener('mousemove', dragImage);
-    svg.removeEventListener('mousemove', resizeImage);
-    svg.removeEventListener('mousemove', rotateImage);
+    svg.removeEventListener('pointermove', dragImage);
+    svg.removeEventListener('pointermove', resizeImage);
+    svg.removeEventListener('pointermove', rotateImage);
     currentAnchor = null;
     startRotationMouseAngle = null;
     startImageRotation = null;

package/src/tools/textTool.js

@@ -302,10 +302,10 @@ function makeTextEditable(textElement, groupElement) {
     const handleClickOutside = (event) => {
         if (!input.contains(event.target)) {
             renderText(input, textElement, true);
-            document.removeEventListener('mousedown', handleClickOutside, true);
+            document.removeEventListener('pointerdown', handleClickOutside, true);
         }
     };
-    document.addEventListener('mousedown', handleClickOutside, true);
+    document.addEventListener('pointerdown', handleClickOutside, true);
     input.handleClickOutside = handleClickOutside;
 
     // Set text cursor on the element during edit mode
@@ -324,7 +324,7 @@ function renderText(input, textElement, deleteIfEmpty = false) {
     const gElement = input.textGroup;
 
     if (input.handleClickOutside) {
-        document.removeEventListener('mousedown', input.handleClickOutside, true);
+        document.removeEventListener('pointerdown', input.handleClickOutside, true);
     }
 
     document.body.removeChild(input);
@@ -403,7 +403,8 @@ function renderText(input, textElement, deleteIfEmpty = false) {
     // After rendering text, switch to selection tool and auto-select
     if (gElement.parentNode) {
         switchToSelectionTool();
-        selectElement(gElement);
+        // Defer selection so the tool switch (async React state) completes first
+        requestAnimationFrame(() => selectElement(gElement));
     }
 }
 
@@ -473,7 +474,7 @@ function createSelectionFeedback(groupElement) {
         groupElement.appendChild(handleRect);
         resizeHandles[handle.name] = handleRect;
 
-        handleRect.addEventListener('mousedown', (e) => {
+        handleRect.addEventListener('pointerdown', (e) => {
             if (window.isSelectionToolActive) {
                 e.stopPropagation();
                 startResize(e, handle.name);
@@ -497,7 +498,7 @@ function createSelectionFeedback(groupElement) {
 
     resizeHandles.rotate = rotationAnchor;
 
-    rotationAnchor.addEventListener('mousedown', (e) => {
+    rotationAnchor.addEventListener('pointerdown', (e) => {
         if (window.isSelectionToolActive) {
             e.stopPropagation();
             startRotation(e);
@@ -611,8 +612,8 @@ function startRotation(event) {
 
     svg.style.cursor = 'grabbing';
 
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('pointermove', handleMouseMove);
+    window.addEventListener('pointerup', handleMouseUp);
 }
 
 function removeSelectionFeedback(element) {
@@ -686,8 +687,8 @@ function deselectElement() {
         rotationStartTransform = null;
         svg.style.cursor = 'default';
 
-        window.removeEventListener('mousemove', handleMouseMove);
-        window.removeEventListener('mouseup', handleMouseUp);
+        window.removeEventListener('pointermove', handleMouseMove);
+        window.removeEventListener('pointerup', handleMouseUp);
     }
 }
 
@@ -729,8 +730,8 @@ function startDrag(event) {
 
     svg.style.cursor = 'grabbing';
 
-    svg.addEventListener('mousemove', handleMouseMove);
-    svg.addEventListener('mouseup', handleMouseUp);
+    svg.addEventListener('pointermove', handleMouseMove);
+    svg.addEventListener('pointerup', handleMouseUp);
 }
 
 function startResize(event, anchor) {
@@ -776,8 +777,8 @@ function startResize(event, anchor) {
 
   svg.style.cursor = resizeHandles[anchor]?.style.cursor || 'default';
 
-  svg.addEventListener('mousemove', handleMouseMove);
-  svg.addEventListener('mouseup', handleMouseUp);
+  svg.addEventListener('pointermove', handleMouseMove);
+  svg.addEventListener('pointerup', handleMouseUp);
 }
 
 
@@ -1152,10 +1153,10 @@ const handleMouseUp = (event) => {
         setTimeout(updateSelectionFeedback, 0);
     }
 
-    svg.removeEventListener('mousemove', handleMouseMove);
-    svg.removeEventListener('mouseup', handleMouseUp);
-    window.removeEventListener('mousemove', handleMouseMove);
-    window.removeEventListener('mouseup', handleMouseUp);
+    svg.removeEventListener('pointermove', handleMouseMove);
+    svg.removeEventListener('pointerup', handleMouseUp);
+    window.removeEventListener('pointermove', handleMouseMove);
+    window.removeEventListener('pointerup', handleMouseUp);
 };
 
 function extractRotationFromTransform(element) {
@@ -1169,6 +1170,7 @@ function extractRotationFromTransform(element) {
 
 // EXPORTED EVENT HANDLERS
 const handleTextMouseDown = function (e) {
+    if (!e.target) return;
     const activeEditor = document.querySelector("textarea.svg-text-editor");
     if (activeEditor && activeEditor.contains(e.target)) {
          return;
@@ -1263,14 +1265,14 @@ const handleTextMouseMove = function (e) {
 
     // Handle cursor changes for text tool
     if (isTextToolActive) {
-        const targetGroup = e.target.closest('g[data-type="text-group"]');
+        const targetGroup = e.target?.closest?.('g[data-type="text-group"]');
         if (targetGroup) {
             svg.style.cursor = 'pointer';
         } else {
             svg.style.cursor = 'crosshair';
         }
     } else if (isSelectionToolActive) {
-        const targetGroup = e.target.closest('g[data-type="text-group"]');
+        const targetGroup = e.target?.closest?.('g[data-type="text-group"]');
         if (targetGroup) {
             svg.style.cursor = 'default';
         }
@@ -1797,8 +1799,9 @@ window.updateSelectedTextStyle = function(changes) {
     }
 };
 
-// Expose deselectElement for external callers (Selection.js blank canvas click)
+// Expose select/deselect for external callers (Selection.js, TextShape.selectShape)
 window.__deselectTextElement = deselectElement;
+window.__selectTextElement = selectElement;
 
 // React sidebar bridge — text ↔ code conversion
 window.__convertTextToCode = function() {