@elixpo/lixsketch 5.5.19 → 5.5.21

package/src/core/Selection.js

@@ -2,8 +2,9 @@
 // Multi-selection system - copied from selection.js
 
 import { cleanupAttachments } from '../tools/arrowTool.js';
-import { pushTransformAction, pushFrameAttachmentAction, pushDeleteAction } from './UndoRedo.js';
+import { pushCreateAction, pushTransformAction, pushFrameAttachmentAction, pushDeleteAction } from './UndoRedo.js';
 import { calculateSnap, clearSnapGuides } from './SnapGuides.js';
+import { registerRotationAnchor } from './ScreenSpaceControls.js';
 
 let isMultiSelecting = false;
 let multiSelectionStart = { x: 0, y: 0 };
@@ -545,6 +546,12 @@ class MultiSelection {
 
         this.group.appendChild(this.rotationLine);
         this.group.appendChild(this.rotationAnchor);
+        registerRotationAnchor(this.rotationAnchor, {
+            radius: 8,
+            edgeY: y,
+            line: this.rotationLine,
+            lineEnd: '1',
+        });
     }
 
     removeControls() {
@@ -1936,6 +1943,11 @@ function deleteSelectedShapes() {
 function frameSelectedShapes() {
     if (multiSelection.selectedShapes.size < 2) return;
 
+    const shapesToFrame = Array.from(multiSelection.selectedShapes);
+    // Frames cannot be nested through the Frame it action, and objects that
+    // already belong to a frame must first be detached explicitly.
+    if (shapesToFrame.some(shape => shape?.shapeName === 'frame' || shape?.parentFrame)) return;
+
     const bounds = multiSelection.getBounds();
     if (!bounds) return;
 
@@ -1955,17 +1967,7 @@ function frameSelectedShapes() {
     const frame = new FrameClass(fx, fy, fw, fh);
     shapes.push(frame);
 
-    // Push undo action for frame creation
-    if (window.historyStack) {
-        window.historyStack.push({
-            type: window.ACTION_CREATE || 'create',
-            shape: frame,
-            shapeName: 'frame'
-        });
-    }
-
     // Add each selected shape into the frame
-    const shapesToFrame = Array.from(multiSelection.selectedShapes);
     multiSelection.clearSelection();
 
     for (const shape of shapesToFrame) {
@@ -1989,6 +1991,12 @@ function frameSelectedShapes() {
         }
     }
 
+    // Record after reordering so redo restores the same hit-test/layer index.
+    pushCreateAction(frame, {
+        frameCreation: true,
+        containedShapes: shapesToFrame
+    });
+
     // Select the new frame
     if (typeof frame.selectFrame === 'function') {
         frame.selectFrame();

package/src/core/UndoRedo.js

@@ -34,11 +34,17 @@ export function updateSelectedElement(element) {
 }
 
 // Call this after creating a new shape (e.g., Rectangle)
-export function pushCreateAction(shape) {
-    undoStack.push({
+export function pushCreateAction(shape, meta = null) {
+    const action = {
         type: 'create',
         shape: shape
-    });
+    };
+    if (meta?.frameCreation && shape?.shapeName === 'frame') {
+        action.frameCreation = true;
+        action.containedShapes = [...(meta.containedShapes || shape.containedShapes || [])];
+        action.shapeIndex = Array.isArray(shapes) ? shapes.indexOf(shape) : -1;
+    }
+    undoStack.push(action);
     
     // Clear redo stack when new action is performed
     redoStack.length = 0;
@@ -567,6 +573,23 @@ export function undo() {
     }
 
     if (action.type === 'create') {
+    if (action.frameCreation && action.shape.shapeName === 'frame') {
+        // Treat a manually-created frame and its initial membership as one
+        // atomic action. Children remain on the canvas when the frame is
+        // undone and are clipped back into it on redo.
+        for (const child of action.containedShapes || []) {
+            if (child?.parentFrame === action.shape) action.shape.removeShapeFromFrame(child);
+        }
+        if (currentShape === action.shape) {
+            action.shape.removeSelection?.();
+            currentShape = null;
+        }
+        const idx = shapes.indexOf(action.shape);
+        if (idx !== -1) shapes.splice(idx, 1);
+        action.shape.group?.remove();
+        action.shape.clipGroup?.remove();
+        action.shape.clipPath?.remove();
+    } else
     if (action.shape.type === 'text') {
         // Handle text creation undo
         if (action.shape.element && action.shape.element.parentNode) {
@@ -1049,6 +1072,27 @@ export function redo() {
     }
 
     if (action.type === 'create') {
+    if (action.frameCreation && action.shape.shapeName === 'frame') {
+        const frame = action.shape;
+        let defs = svg?.querySelector('defs');
+        if (!defs && svg) {
+            defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+            svg.appendChild(defs);
+        }
+        if (defs && frame.clipPath && !frame.clipPath.parentNode) defs.appendChild(frame.clipPath);
+        if (svg && frame.group && !frame.group.parentNode) svg.appendChild(frame.group);
+        if (svg && frame.clipGroup && !frame.clipGroup.parentNode) svg.appendChild(frame.clipGroup);
+        if (shapes.indexOf(frame) === -1) {
+            const index = action.shapeIndex >= 0 ? Math.min(action.shapeIndex, shapes.length) : shapes.length;
+            shapes.splice(index, 0, frame);
+        }
+        frame.containedShapes = [];
+        frame.draw();
+        frame.updateClipPath();
+        for (const child of action.containedShapes || []) {
+            if (child && shapes.includes(child)) frame.addShapeToFrame(child);
+        }
+    } else
     if (action.shape.type === 'text') {
         // Handle text creation redo
         if (svg) {

package/src/core/ZoomPan.js

@@ -1,8 +1,11 @@
 /* eslint-disable */
+import { installScreenSpaceControlSync } from './ScreenSpaceControls.js';
 // Zoom and Pan controls - combined from zoomFunction.js + panCanvas.js
 // Depends on globals: svg, freehandCanvas, currentZoom, currentViewBox, isPanningToolActive, isPanning
 // Depends on globals: minScale, maxScale, zoomInBtn, zoomOutBtn, zoomPercentSpan, panStart, startCanvasX, startCanvasY
 
+installScreenSpaceControlSync(freehandCanvas);
+
 // === Zoom Functions ===
 let currentY = 0;
 const scrollRate = 50;

package/src/react/components/canvas/MultiSelectActions.jsx

@@ -6,6 +6,7 @@ import { showToast } from '../../utils/toast'
 export default function MultiSelectActions() {
   const [count, setCount] = useState(0)
   const [groupState, setGroupState] = useState('none') // 'none' | 'partial' | 'all'
+  const [frameEligible, setFrameEligible] = useState(false)
 
   useEffect(() => {
     // Poll multi-selection state. Cheap — Set size + a single
@@ -18,6 +19,7 @@ export default function MultiSelectActions() {
 
       if (n < 2) {
         setGroupState('none')
+        setFrameEligible(false)
         return
       }
       let withId = 0
@@ -28,6 +30,7 @@ export default function MultiSelectActions() {
           groupIds.add(s.groupId)
         }
       })
+      setFrameEligible(Array.from(sel).every((s) => s.shapeName !== 'frame' && !s.parentFrame))
       // "all" = every shape has a groupId AND they all share the same one
       if (withId === n && groupIds.size === 1) setGroupState('all')
       else if (withId > 0) setGroupState('partial')
@@ -82,7 +85,7 @@ export default function MultiSelectActions() {
 
         {/* Frame is only useful when shapes aren't already grouped — a
             grouped set is conceptually a "frameless frame" already. */}
-        {!grouped && (
+        {!grouped && frameEligible && (
           <button
             onClick={handleFrame}
             className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-accent-blue hover:bg-accent-blue/10 transition-all duration-150"

package/src/react/components/sidebars/IconSidebar.jsx

@@ -90,6 +90,14 @@ export default function IconSidebar() {
   const [icons, setIcons] = useState([])
   const [loading, setLoading] = useState(false)
   const debounceRef = useRef(null)
+  const searchInputRef = useRef(null)
+  const requestSequenceRef = useRef(0)
+
+  useEffect(() => {
+    if (!visible) return
+    const frame = requestAnimationFrame(() => searchInputRef.current?.focus())
+    return () => cancelAnimationFrame(frame)
+  }, [visible])
 
   // Close on Escape
   useEffect(() => {
@@ -115,6 +123,7 @@ export default function IconSidebar() {
   }, [visible, setActiveTool])
 
   const fetchIcons = useCallback(async (searchQuery, cat) => {
+    const requestSequence = ++requestSequenceRef.current
     const params = new URLSearchParams()
     if (searchQuery) params.set('q', searchQuery)
     if (cat) params.set('category', cat)
@@ -124,6 +133,7 @@ export default function IconSidebar() {
     // Return cached results instantly if available
     if (iconResultCache.has(cacheKey)) {
       setIcons(iconResultCache.get(cacheKey))
+      setLoading(false)
       return
     }
 
@@ -134,12 +144,12 @@ export default function IconSidebar() {
         const data = await res.json()
         const results = data.results || []
         iconResultCache.set(cacheKey, results)
-        setIcons(results)
+        if (requestSequence === requestSequenceRef.current) setIcons(results)
       }
     } catch (err) {
       console.error('Icon fetch failed:', err)
     }
-    setLoading(false)
+    if (requestSequence === requestSequenceRef.current) setLoading(false)
   }, [])
 
   // Fetch icons when visibility, query, or category changes (debounced for query typing)
@@ -148,30 +158,10 @@ export default function IconSidebar() {
     if (debounceRef.current) clearTimeout(debounceRef.current)
     debounceRef.current = setTimeout(() => {
       fetchIcons(query, category)
-    }, query ? 300 : 0)
+    }, query ? 80 : 0)
     return () => clearTimeout(debounceRef.current)
   }, [query, visible, category, fetchIcons])
 
-  // Preload all categories in background on first sidebar open
-  const hasPreloaded = useRef(false)
-  useEffect(() => {
-    if (!visible || hasPreloaded.current) return
-    hasPreloaded.current = true
-    // Fire-and-forget: preload each category so switching is instant
-    CATEGORIES.forEach((cat) => {
-      const params = new URLSearchParams()
-      if (cat.value) params.set('category', cat.value)
-      params.set('inline', '1')
-      const key = params.toString()
-      if (!iconResultCache.has(key)) {
-        fetch(`${getIconsBaseUrl()}/api/icons/search?${key}`)
-          .then((r) => r.ok ? r.json() : null)
-          .then((data) => { if (data?.results) iconResultCache.set(key, data.results) })
-          .catch(() => {})
-      }
-    })
-  }, [visible])
-
   const handleIconClick = useCallback((icon) => {
     if (typeof window === 'undefined') return
     const place = (svgContent) => {
@@ -214,6 +204,7 @@ export default function IconSidebar() {
         <div className="flex items-center gap-2 bg-surface-hover border border-border-light rounded-lg px-2.5 py-2">
           <i className="bx bxs-search text-text-muted text-sm" />
           <input
+            ref={searchInputRef}
             id="iconSearchInput"
             type="text"
             value={query}

package/src/react/components/sidebars/ImageSidebar.jsx

@@ -10,6 +10,15 @@ export default function ImageSidebar() {
   const { t } = useTranslation()
   const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
   const toggleImageGenerateModal = useUIStore((s) => s.toggleImageGenerateModal)
+  const toggleAIModal = useUIStore((s) => s.toggleAIModal)
+  const isGraph = typeof window !== 'undefined' && window.currentShape?._frameType === 'graph'
+
+  const handleEditGraph = useCallback(() => {
+    const shape = window.currentShape
+    if (!shape || shape._frameType !== 'graph') return
+    window.__aiEditTargetFrame = shape
+    toggleAIModal()
+  }, [toggleAIModal])
 
   const handleEditWithAI = useCallback(() => {
     const shape = window.currentShape
@@ -36,31 +45,45 @@ export default function ImageSidebar() {
 
   return (
     <ShapeSidebar visible={selectedShapeSidebar === 'image'}>
-      {/* Edit with AI */}
-      <button
-        onClick={handleEditWithAI}
-        title="Edit with AI"
-        className="h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-purple-400 hover:bg-purple-500/10 transition-all duration-100"
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
-          <path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z" />
-        </svg>
-        <span className="text-xs">AI Edit</span>
-      </button>
+      {isGraph && (
+        <>
+          <button
+            onClick={handleEditGraph}
+            title="Edit graph"
+            className="h-9 flex cursor-pointer items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-accent hover:bg-accent/10 transition-all duration-100"
+          >
+            <i className="bx bx-line-chart text-base" />
+            <span className="text-xs">Edit graph</span>
+          </button>
+          <Divider />
+        </>
+      )}
 
-      <Divider />
-
-      {/* Replace image */}
-      <button
-        onClick={handleReplace}
-        title="Replace image"
-        className="h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-white hover:bg-white/[0.06] transition-all duration-100"
-      >
-        <i className="bx bx-upload text-base" />
-        <span className="text-xs">Replace</span>
-      </button>
-
-      <Divider />
+      {/* Edit with AI */}
+      {!isGraph && (
+        <>
+          <button
+            onClick={handleEditWithAI}
+            title="Edit with AI"
+            className="h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-purple-400 hover:bg-purple-500/10 transition-all duration-100"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+              <path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z" />
+            </svg>
+            <span className="text-xs">AI Edit</span>
+          </button>
+          <Divider />
+          <button
+            onClick={handleReplace}
+            title="Replace image"
+            className="h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-white hover:bg-white/[0.06] transition-all duration-100"
+          >
+            <i className="bx bx-upload text-base" />
+            <span className="text-xs">Replace</span>
+          </button>
+          <Divider />
+        </>
+      )}
 
       {/* Layer controls */}
       <LayerControls />

package/src/react/store/useUIStore.js

@@ -29,25 +29,82 @@ function invertShapeColors(prevResolved, nextResolved) {
 
   for (const shape of shapes) {
     let changed = false
-    if (shape.options) {
-      if (normalize(shape.options.stroke) === from) {
-        shape.options.stroke = to
+    if (shape.shapeName === 'icon' || shape.type === 'icon') {
+      const isDark = nextResolved === 'dark'
+      const targetDarkColor = '#1a1a2e'
+      const bgDarkColor = '#15111f'
+
+      if (shape.group) {
+        shape.group.querySelectorAll('*').forEach((element) => {
+          if (element.nodeType === 1) {
+            const fill = element.getAttribute('fill')
+            const stroke = element.getAttribute('stroke')
+
+            if (fill && fill !== 'none' && fill !== 'transparent') {
+              const normFill = fill.toLowerCase().trim()
+              if (isDark) {
+                if (normFill === targetDarkColor || normFill === '#000000' || normFill === '#000') {
+                  element.setAttribute('fill', '#ffffff')
+                  changed = true
+                } else if (normFill === '#ffffff' || normFill === '#fff') {
+                  element.setAttribute('fill', bgDarkColor)
+                  changed = true
+                }
+              } else {
+                if (normFill === '#ffffff' || normFill === '#fff') {
+                  element.setAttribute('fill', targetDarkColor)
+                  changed = true
+                } else if (normFill === bgDarkColor) {
+                  element.setAttribute('fill', '#ffffff')
+                  changed = true
+                }
+              }
+            }
+
+            if (stroke && stroke !== 'none' && stroke !== 'transparent') {
+              const normStroke = stroke.toLowerCase().trim()
+              if (isDark) {
+                if (normStroke === targetDarkColor || normStroke === '#000000' || normStroke === '#000') {
+                  element.setAttribute('stroke', '#ffffff')
+                  changed = true
+                } else if (normStroke === '#ffffff' || normStroke === '#fff') {
+                  element.setAttribute('stroke', bgDarkColor)
+                  changed = true
+                }
+              } else {
+                if (normStroke === '#ffffff' || normStroke === '#fff') {
+                  element.setAttribute('stroke', targetDarkColor)
+                  changed = true
+                } else if (normStroke === bgDarkColor) {
+                  element.setAttribute('stroke', '#ffffff')
+                  changed = true
+                }
+              }
+            }
+          }
+        })
+      }
+    } else {
+      if (shape.options) {
+        if (normalize(shape.options.stroke) === from) {
+          shape.options.stroke = to
+          changed = true
+        }
+        if (normalize(shape.options.fill) === from) {
+          shape.options.fill = to
+          changed = true
+        }
+      }
+      // Text shapes store color directly
+      if (shape.color !== undefined && normalize(shape.color) === from) {
+        shape.color = to
         changed = true
       }
-      if (normalize(shape.options.fill) === from) {
-        shape.options.fill = to
+      if (shape.strokeColor !== undefined && normalize(shape.strokeColor) === from) {
+        shape.strokeColor = to
         changed = true
       }
     }
-    // Text shapes store color directly
-    if (shape.color !== undefined && normalize(shape.color) === from) {
-      shape.color = to
-      changed = true
-    }
-    if (shape.strokeColor !== undefined && normalize(shape.strokeColor) === from) {
-      shape.strokeColor = to
-      changed = true
-    }
     if (changed && typeof shape.draw === 'function') {
       shape.draw()
     }

package/src/shapes/Circle.js

@@ -1,4 +1,5 @@
 /* eslint-disable */
+import { registerRotationAnchor } from '../core/ScreenSpaceControls.js';
 // Circle shape class - extracted from drawCircle.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom, rc
 
@@ -325,6 +326,7 @@ class Circle {
         this.rotationAnchor.setAttribute('vector-effect', 'non-scaling-stroke');
         this.rotationAnchor.setAttribute('style', 'pointer-events: all;');
         this.group.appendChild(this.rotationAnchor);
+        registerRotationAnchor(this.rotationAnchor, { radius: 8, edgeY: expandedY });
 
         this.rotationAnchor.addEventListener('mouseover', function () {
              if (!isResizingShapeCircle && !isDraggingShapeCircle && !isRotatingShapeCircle) {

package/src/shapes/Frame.js

@@ -3,6 +3,7 @@
 // Depends on globals: svg, shapes, currentShape, currentZoom
 
 import { cleanupAttachments } from '../tools/arrowTool.js';
+import { registerRotationAnchor } from '../core/ScreenSpaceControls.js';
 
 function getSVGCoordsFromMouse(e) {
     const viewBox = svg.viewBox.baseVal;
@@ -479,6 +480,7 @@ move(dx, dy) {
     labelText.textContent = this.frameName || "Frame";
     labelText.style.cursor = "pointer";
     labelText.style.userSelect = "none";
+    labelText.style.pointerEvents = "all";
     
     if (this.rotation !== 0) {
         const centerX = this.x + this.width / 2;
@@ -486,6 +488,11 @@ move(dx, dy) {
         labelText.setAttribute("transform", `rotate(${this.rotation}, ${centerX}, ${centerY})`);
     }
     
+    // Do not let the first click select/redraw the frame: replacing the label
+    // between clicks prevents the browser from ever emitting `dblclick`.
+    labelText.addEventListener('pointerdown', (e) => e.stopPropagation());
+    labelText.addEventListener('click', (e) => e.stopPropagation());
+
     // Add double-click event for renaming
     labelText.addEventListener('dblclick', (e) => {
         e.stopPropagation();
@@ -497,6 +504,10 @@ move(dx, dy) {
 }
 
 startLabelEdit(labelElement) {
+    if (this._labelEditor) {
+        this._labelEditor.querySelector('input')?.focus();
+        return;
+    }
     // Create a foreignObject to hold an HTML input
     const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
     foreignObject.setAttribute("x", this.x + 5);
@@ -534,6 +545,7 @@ startLabelEdit(labelElement) {
     
     foreignObject.appendChild(input);
     this.group.appendChild(foreignObject);
+    this._labelEditor = foreignObject;
     
     // Hide the original label
     labelElement.style.display = "none";
@@ -544,7 +556,10 @@ startLabelEdit(labelElement) {
         input.select();
     }, 10);
     
+    let finished = false;
     const finishEdit = () => {
+        if (finished) return;
+        finished = true;
         const newName = input.value.trim() || "Frame";
         
         // Track name change in undo system if it actually changed
@@ -572,7 +587,8 @@ startLabelEdit(labelElement) {
         this.frameName = newName;
         
         // Remove the input
-        this.group.removeChild(foreignObject);
+        foreignObject.remove();
+        this._labelEditor = null;
         
         // Show and update the label
         labelElement.style.display = "block";
@@ -589,8 +605,10 @@ startLabelEdit(labelElement) {
             finishEdit();
         } else if (e.key === 'Escape') {
             e.preventDefault();
+            finished = true;
             // Cancel edit - restore original name
-            this.group.removeChild(foreignObject);
+            foreignObject.remove();
+            this._labelEditor = null;
             labelElement.style.display = "block";
         }
     });
@@ -775,6 +793,12 @@ startLabelEdit(labelElement) {
             }
             
             this.group.appendChild(rotationLine);
+            registerRotationAnchor(anchor, {
+                radius: 8,
+                edgeY: this.y,
+                line: rotationLine,
+                lineEnd: '2',
+            });
         } else {
             // Create resize handle (rectangle)
             anchor = document.createElementNS("http://www.w3.org/2000/svg", "rect");

package/src/shapes/FreehandStroke.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import { getStroke } from "perfect-freehand";
+import { registerRotationAnchor } from '../core/ScreenSpaceControls.js';
 // FreehandStroke shape class - extracted from canvasStroke.js
 // Depends on globals: svg, shapes, currentShape, currentZoom, currentViewBox
 
@@ -608,6 +609,7 @@ class FreehandStroke {
     rotationAnchor.style.pointerEvents = 'all';
     
     this.group.appendChild(rotationAnchor);
+    registerRotationAnchor(rotationAnchor, { radius: 5, edgeY: expandedY });
     this.rotationAnchor = rotationAnchor;
 
     // Create selection outline

package/src/shapes/IconShape.js

@@ -79,6 +79,25 @@ class IconShape {
         this.element.setAttribute('data-shape-height', value);
     }
 
+    _transformMetrics() {
+        const vbWidth = parseFloat(this.element.getAttribute('data-viewbox-width')) || 24;
+        const vbHeight = parseFloat(this.element.getAttribute('data-viewbox-height')) || 24;
+        const scale = Math.min(this.width / vbWidth, this.height / vbHeight);
+        return {
+            scale,
+            localCenterX: this.width / 2 / scale,
+            localCenterY: this.height / 2 / scale,
+        };
+    }
+
+    _applyTransform() {
+        const { scale, localCenterX, localCenterY } = this._transformMetrics();
+        this.element.setAttribute(
+            'transform',
+            `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${this.rotation}, ${localCenterX}, ${localCenterY})`
+        );
+    }
+
     get rotation() {
         const dataRotation = this.element.getAttribute('data-shape-rotation');
         if (dataRotation) {
@@ -97,27 +116,14 @@ class IconShape {
 
     set rotation(value) {
         this.element.setAttribute('data-shape-rotation', value);
-
-        const vbWidth = parseFloat(this.element.getAttribute('data-viewbox-width')) || 24;
-        const vbHeight = parseFloat(this.element.getAttribute('data-viewbox-height')) || 24;
-        const scale = this.width / Math.max(vbWidth, vbHeight);
-        const localCenterX = this.width / 2 / scale;
-        const localCenterY = this.height / 2 / scale;
-
-        this.element.setAttribute('transform', `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${value}, ${localCenterX}, ${localCenterY})`);
+        this._applyTransform();
     }
 
     move(dx, dy) {
         this.x += dx;
         this.y += dy;
 
-        const vbWidth = parseFloat(this.element.getAttribute('data-viewbox-width')) || 24;
-        const vbHeight = parseFloat(this.element.getAttribute('data-viewbox-height')) || 24;
-        const scale = this.width / Math.max(vbWidth, vbHeight);
-        const localCenterX = this.width / 2 / scale;
-        const localCenterY = this.height / 2 / scale;
-
-        this.element.setAttribute('transform', `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${this.rotation}, ${localCenterX}, ${localCenterY})`);
+        this._applyTransform();
 
         this.element.setAttribute('x', this.x);
         this.element.setAttribute('y', this.y);
@@ -173,11 +179,7 @@ class IconShape {
     }
 
     draw() {
-        const scale = this.width / 24;
-        const localCenterX = this.width / 2 / scale;
-        const localCenterY = this.height / 2 / scale;
-
-        this.element.setAttribute('transform', `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${this.rotation}, ${localCenterX}, ${localCenterY})`);
+        this._applyTransform();
 
         this.element.setAttribute('data-shape-x', this.x);
         this.element.setAttribute('data-shape-y', this.y);
@@ -246,11 +248,7 @@ class IconShape {
             pos.parentFrame.addShapeToFrame(this);
         }
 
-        const scale = pos.width / 24;
-        const localCenterX = pos.width / 2 / scale;
-        const localCenterY = pos.height / 2 / scale;
-
-        this.element.setAttribute('transform', `translate(${pos.x}, ${pos.y}) scale(${scale}) rotate(${pos.rotation}, ${localCenterX}, ${localCenterY})`);
+        this._applyTransform();
 
         this.element.setAttribute('data-shape-x', pos.x);
         this.element.setAttribute('data-shape-y', pos.y);

package/src/shapes/ImageShape.js

@@ -262,8 +262,12 @@ class ImageShape {
     }
 
     selectShape() {
-        // Select the image
-        selectImage({ target: this.element, stopPropagation: () => {} });
+        // Image interaction state lives in imageTool. Use its bridge so
+        // programmatically-created images (graphs, restored scenes, paste)
+        // receive the same drag/resize controls as pointer-selected images.
+        if (typeof window.__selectImageElement === 'function') {
+            window.__selectImageElement(this.element, { force: true });
+        }
     }
 }