@elixpo/lixsketch 5.4.1 → 5.4.3

package/src/tools/textTool.js

@@ -51,6 +51,7 @@ let rotationStartTransform = null;
 let initialHandlePosRelGroup = null;
 let initialGroupTx = 0;
 let initialGroupTy = 0;
+let initialInverseScreenCTM = null;
 
 // Frame attachment variables
 let draggedShapeInitialFrameText = null;
@@ -301,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
@@ -323,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);
@@ -402,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));
     }
 }
 
@@ -472,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);
@@ -496,7 +498,7 @@ function createSelectionFeedback(groupElement) {
 
     resizeHandles.rotate = rotationAnchor;
 
-    rotationAnchor.addEventListener('mousedown', (e) => {
+    rotationAnchor.addEventListener('pointerdown', (e) => {
         if (window.isSelectionToolActive) {
             e.stopPropagation();
             startRotation(e);
@@ -610,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) {
@@ -685,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);
     }
 }
 
@@ -728,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) {
@@ -753,6 +755,10 @@ function startResize(event, anchor) {
 
   startPoint = getSVGCoordinates(event, selectedElement);
 
+  // Freeze the group's screen CTM at resize start so mouse→local mapping stays stable
+  const groupScreenCTM = selectedElement.getScreenCTM();
+  initialInverseScreenCTM = groupScreenCTM ? groupScreenCTM.inverse() : null;
+
   const currentTransform = selectedElement.transform.baseVal.consolidate();
   initialGroupTx = currentTransform ? currentTransform.matrix.e : 0;
   initialGroupTy = currentTransform ? currentTransform.matrix.f : 0;
@@ -771,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);
 }
 
 
@@ -828,7 +834,16 @@ const handleMouseMove = (event) => {
         const textElement = selectedElement.querySelector('text');
         if (!textElement || !startBBox || startFontSize === null || !startPoint || !initialHandlePosRelGroup) return;
 
-        const currentPoint = getSVGCoordinates(event, selectedElement);
+        // Use the frozen initial CTM so the mapping doesn't shift as we change the group transform
+        let currentPoint;
+        if (initialInverseScreenCTM) {
+            const pt = svg.createSVGPoint();
+            pt.x = event.clientX;
+            pt.y = event.clientY;
+            currentPoint = pt.matrixTransform(initialInverseScreenCTM);
+        } else {
+            currentPoint = getSVGCoordinates(event, selectedElement);
+        }
 
         const startX = startBBox.x;
         const startY = startBBox.y;
@@ -1138,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) {
@@ -1155,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;
@@ -1249,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';
         }
@@ -1783,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() {
@@ -1820,4 +1837,4 @@ window.__setCodeLanguage = function(lang) {
     }
 };
 
-export { handleTextMouseDown, handleTextMouseMove, handleTextMouseUp, updateCodeToggleForShape, deselectElement as deselectTextElement };
+export { handleTextMouseDown, handleTextMouseMove, handleTextMouseUp, updateCodeToggleForShape, deselectElement as deselectTextElement, enterEditMode };