@elixpo/lixsketch 5.4.7 → 5.5.0

package/src/core/SceneSerializer.js

@@ -122,8 +122,14 @@ function serializeShape(shape) {
                 gridSize: shape.gridSize || 20,
                 gridColor: shape.gridColor || 'rgba(255,255,255,0.06)',
                 options: cloneOptions(shape.options),
+                // Issue #24 bug #10: filter out null / undefined / shapeID-less
+                // children. A stale reference would serialize as `null` and the
+                // load path would skip it (logging a misleading "missing shape"
+                // warning) — but also previously skewed the order tracking.
                 containedShapeIDs: shape.containedShapes
-                    ? Array.from(shape.containedShapes).map(s => s.shapeID)
+                    ? Array.from(shape.containedShapes)
+                        .filter(s => s && s.shapeID)
+                        .map(s => s.shapeID)
                     : [],
             };
 
@@ -312,9 +318,31 @@ export function saveScene(workspaceName = 'Untitled') {
     const allShapes = window.shapes || [];
     const serialized = [];
 
+    // Issue #24 bug #10: rebuild containment from each shape's own
+    // `parentFrame` ref before serialising. The `containedShapes` array
+    // on the frame side drifts over time (eraser, partial deletes, drag
+    // out + drag back, etc.), and a missing entry there means the child
+    // gets serialised as a top-level shape and the frame restores empty.
+    // Each shape knows its own parent, so we trust THAT and override the
+    // frame's array at save time.
+    const childrenByFrame = new Map();
+    for (const s of allShapes) {
+        if (s && s.parentFrame && s.shapeID && s !== s.parentFrame) {
+            const arr = childrenByFrame.get(s.parentFrame.shapeID) || [];
+            arr.push(s.shapeID);
+            childrenByFrame.set(s.parentFrame.shapeID, arr);
+        }
+    }
+
     for (const shape of allShapes) {
         const data = serializeShape(shape);
-        if (data) serialized.push(data);
+        if (!data) continue;
+        if (data.type === 'frame' && shape.shapeID && childrenByFrame.has(shape.shapeID)) {
+            const merged = new Set(data.containedShapeIDs || []);
+            for (const id of childrenByFrame.get(shape.shapeID)) merged.add(id);
+            data.containedShapeIDs = Array.from(merged);
+        }
+        serialized.push(data);
     }
 
     const scene = {
@@ -444,6 +472,62 @@ export function loadScene(sceneData) {
         }
     }
 
+    // ── Fourth pass: frame containment reconciliation (issue #24 bug #10) ──
+    //
+    // The pass above attaches each child via `frame.addShapeToFrame(child)`,
+    // which is supposed to move the child's <g> into the frame's clipGroup.
+    // In practice LixScript-rendered scenes were reloading with empty
+    // frames — children present in the shapes array, frame box drawn, but
+    // the children's <g> elements stranded at the svg root (so visually
+    // they look orphaned). The cause varies (transient `isBeingMovedByFrame`
+    // flag carried over from save time, ordering glitches when nested
+    // frames are restored, etc.). Rather than chase the source, repair the
+    // DOM state here from the authoritative `containedShapes` array.
+    for (const data of frameData) {
+        const frame = idMap.get(data.shapeID);
+        if (!frame) continue;
+
+        // Clear stale flags that suppress DOM mutation inside addShapeToFrame.
+        delete frame.isBeingMovedByFrame;
+        delete frame.isDraggedOutTemporarily;
+
+        // Ensure the frame's own clipGroup is direct child of svg — sub-frames
+        // that didn't get re-parented yet are handled in the next loop.
+        if (frame.clipGroup && frame.clipGroup.parentNode !== svgEl) {
+            svgEl.appendChild(frame.clipGroup);
+        }
+
+        for (const child of frame.containedShapes || []) {
+            if (!child) continue;
+            delete child.isBeingMovedByFrame;
+            delete child.isDraggedOutTemporarily;
+
+            const el = child.group || child.element;
+            if (el && el.parentNode !== frame.clipGroup) {
+                if (el.parentNode) el.parentNode.removeChild(el);
+                frame.clipGroup.appendChild(el);
+            }
+            // Sub-frames also carry their own clipGroup — nest it.
+            if (child.shapeName === 'frame' && child.clipGroup
+                && child.clipGroup.parentNode !== frame.clipGroup) {
+                if (child.clipGroup.parentNode) child.clipGroup.parentNode.removeChild(child.clipGroup);
+                frame.clipGroup.appendChild(child.clipGroup);
+            }
+            // Authoritative parent ref — `addShapeToFrame` should already
+            // have set this but the no-op early return when the child was
+            // already in containedShapes skips it.
+            child.parentFrame = frame;
+        }
+
+        // Force the clip rect + visual to match. Some saved frames came
+        // through with a stale clipRect from before the resize that lost
+        // the children visually.
+        if (typeof frame.updateClipPath === 'function') frame.updateClipPath();
+        if (typeof frame.draw === 'function') {
+            try { frame.draw(); } catch (err) { console.warn('[SceneSerializer] frame redraw failed:', err); }
+        }
+    }
+
     // Restore viewport
     if (sceneData.viewport && svgEl) {
         const vb = sceneData.viewport;

package/src/core/Selection.js

@@ -2,7 +2,7 @@
 // Multi-selection system - copied from selection.js
 
 import { cleanupAttachments } from '../tools/arrowTool.js';
-import { pushTransformAction } from './UndoRedo.js';
+import { pushTransformAction, pushFrameAttachmentAction, pushDeleteAction } from './UndoRedo.js';
 import { calculateSnap, clearSnapGuides } from './SnapGuides.js';
 
 let isMultiSelecting = false;
@@ -1370,6 +1370,41 @@ createRotatedControls(angleDiff = 0) {
             shape.isSelected = true;
         });
 
+        // Re-parent any selected shape that now sits inside a different frame
+        // (Issue #22, bug #9). The per-tool drag handlers (rectangleTool, etc.)
+        // do this for single-shape drags, but a multi-selection drag bypassed
+        // them and left the shape geometrically inside the frame yet logically
+        // outside its child list.
+        if (typeof shapes !== 'undefined' && Array.isArray(shapes)) {
+            this.selectedShapes.forEach(shape => {
+                if (!shape || shape.shapeName === 'frame') return;
+                // Find the deepest frame whose bounds contain the shape after the drag.
+                let target = null;
+                for (let i = shapes.length - 1; i >= 0; i--) {
+                    const f = shapes[i];
+                    if (f.shapeName !== 'frame') continue;
+                    if (this.selectedShapes.has(f)) continue; // moving with us — skip
+                    if (typeof f.isShapeInFrame === 'function' && f.isShapeInFrame(shape)) {
+                        target = f;
+                        break;
+                    }
+                }
+                const current = shape.parentFrame || null;
+                if (target === current) return;
+                if (current && typeof current.removeShapeFromFrame === 'function') {
+                    current.removeShapeFromFrame(shape);
+                }
+                if (target && typeof target.addShapeToFrame === 'function') {
+                    target.addShapeToFrame(shape);
+                    if (typeof pushFrameAttachmentAction === 'function') {
+                        pushFrameAttachmentAction(target, shape, 'attach', current);
+                    }
+                } else if (current && typeof pushFrameAttachmentAction === 'function') {
+                    pushFrameAttachmentAction(current, shape, 'detach', current);
+                }
+            });
+        }
+
         this.initialPositions.clear();
 
         // Push undo for all moved shapes
@@ -1788,33 +1823,98 @@ function deleteSelectedShapes() {
     const shapesToDelete = Array.from(multiSelection.selectedShapes);
     multiSelection.clearSelection();
 
-    shapesToDelete.forEach(shape => {
-        // Remove from DOM
-        if (shape.group && shape.group.parentNode) {
-            shape.group.parentNode.removeChild(shape.group);
-        } else if (shape.element && shape.element.parentNode) {
-            shape.element.parentNode.removeChild(shape.element);
-        }
+    // Issue #24 bug #3: when deleting a (regular, non-diagram) frame, its
+    // children are released back to the canvas — capture them here so we
+    // can re-select them and drop the user into the pointer tool. Diagram
+    // frames destroy their children together, so we skip those.
+    const releasedChildren = [];
 
-        // Remove from parent frame if any
-        if (shape.parentFrame && typeof shape.parentFrame.removeShapeFromFrame === 'function') {
-            shape.parentFrame.removeShapeFromFrame(shape);
-        }
+    shapesToDelete.forEach(shape => {
+        const isFrame = shape.shapeName === 'frame';
+        const isDiagramFrame = isFrame && !!shape._diagramType;
+
+        // Issue #24 bug #7: for a regular (non-diagram) frame, we don't
+        // want destroy() — it empties containedShapes and tears down the
+        // clipGroup, leaving nothing for undo to rehydrate. Instead:
+        //   1. snapshot the children references (for the undo action),
+        //   2. release each child visually back to the svg root,
+        //   3. detach the frame's <g>, clipGroup, clipPath from DOM.
+        // The frame JS object stays alive in the undo action's `shape`
+        // reference; on undo, the UndoRedo branch re-appends clipGroup +
+        // clipPath and re-attaches each child via addShapeToFrame.
+        let childSnapshot = null;
+        if (isFrame && !isDiagramFrame) {
+            childSnapshot = [...(shape.containedShapes || [])];
+            for (const child of childSnapshot) {
+                if (!child || child === shape) continue;
+                const el = child.group || child.element;
+                if (el) {
+                    if (shape.clipGroup && el.parentNode === shape.clipGroup) {
+                        shape.clipGroup.removeChild(el);
+                    }
+                    if (window.svg && el.parentNode !== window.svg) window.svg.appendChild(el);
+                }
+                child.parentFrame = null;
+                delete child.isBeingMovedByFrame;
+                releasedChildren.push(child);
+            }
 
-        // Cleanup arrow attachments
-        cleanupAttachments(shape);
+            // Clear containedShapes — undo will repopulate via
+            // addShapeToFrame, which short-circuits on an existing entry.
+            shape.containedShapes = [];
 
-        // Destroy frame and release children
-        if (shape.shapeName === 'frame' && typeof shape.destroy === 'function') {
-            shape.destroy();
+            // Detach the frame's own DOM bits — but keep the JS object
+            // and its clipGroup/clipPath references intact for undo.
+            if (shape.group && shape.group.parentNode) shape.group.parentNode.removeChild(shape.group);
+            if (shape.clipGroup && shape.clipGroup.parentNode) shape.clipGroup.parentNode.removeChild(shape.clipGroup);
+            if (shape.clipPath && shape.clipPath.parentNode) shape.clipPath.parentNode.removeChild(shape.clipPath);
+        } else {
+            // Non-frame OR diagram frame: standard delete path.
+            if (shape.group && shape.group.parentNode) {
+                shape.group.parentNode.removeChild(shape.group);
+            } else if (shape.element && shape.element.parentNode) {
+                shape.element.parentNode.removeChild(shape.element);
+            }
+            if (shape.parentFrame && typeof shape.parentFrame.removeShapeFromFrame === 'function') {
+                shape.parentFrame.removeShapeFromFrame(shape);
+            }
+            cleanupAttachments(shape);
+            if (isDiagramFrame && typeof shape.destroy === 'function') {
+                shape.destroy();
+            }
         }
 
         // Remove from shapes array
         const idx = shapes.indexOf(shape);
-        if (idx !== -1) {
-            shapes.splice(idx, 1);
+        if (idx !== -1) shapes.splice(idx, 1);
+
+        // Issue #24 bug #7: record the delete on the undo stack. Without
+        // this the user can't undo a multi-selection delete at all —
+        // the action just disappears. For frames we attach the child
+        // snapshot so undo can re-attach them.
+        try {
+            if (childSnapshot) {
+                pushDeleteAction(shape, { childSnapshot });
+            } else {
+                pushDeleteAction(shape);
+            }
+        } catch (err) {
+            console.warn('[deleteSelectedShapes] pushDeleteAction failed:', err);
         }
     });
+
+    // Bug #3 follow-through: auto-select the released children and switch
+    // to the pointer tool so the user can immediately keep manipulating
+    // them. Skip if nothing was released (no frames deleted).
+    if (releasedChildren.length > 0) {
+        for (const child of releasedChildren) {
+            if (shapes.indexOf(child) === -1) continue;
+            multiSelection.addShape(child);
+        }
+        if (window.__sketchStoreApi && typeof window.__sketchStoreApi.setActiveTool === 'function') {
+            window.__sketchStoreApi.setActiveTool('select');
+        }
+    }
 }
 
 /**

package/src/core/UndoRedo.js

@@ -38,12 +38,15 @@ export function pushCreateAction(shape) {
     redoStack.length = 0;
 }
 
-export function pushDeleteAction(shape) {
-    undoStack.push({
-        type: 'delete',
-        shape: shape
-    });
-    
+export function pushDeleteAction(shape, meta = null) {
+    // Issue #24 bug #7: when the deleted shape is a frame, the caller may
+    // pass `meta.childSnapshot` — the contained shape REFERENCES at the
+    // time of delete. The undo branch uses this to re-attach the children
+    // when the frame is restored, instead of leaving an empty box.
+    const action = { type: 'delete', shape };
+    if (meta && meta.childSnapshot) action.childSnapshot = meta.childSnapshot;
+    undoStack.push(action);
+
     // Clear redo stack when new action is performed
     redoStack.length = 0;
 }
@@ -419,10 +422,22 @@ export function pushOptionsChangeAction(shape, oldOptions) {
     redoStack.length = 0;
 }
 
+// Issue #34 bug #4: refresh the multi-selection outline + handles so it
+// follows the reverted geometry. Without this the selection rect stays
+// pinned to the pre-undo coordinates and the user sees a ghost rect
+// floating away from the shapes it claims to wrap.
+function refreshSelectionAfterAction() {
+    const ms = (typeof window !== 'undefined') ? window.multiSelection : null;
+    if (!ms) return;
+    if (typeof ms.updateControls !== 'function') return;
+    if (!ms.selectedShapes || ms.selectedShapes.size === 0) return;
+    try { ms.updateControls(); } catch (err) { console.warn('[UndoRedo] selection refresh failed:', err); }
+}
+
 export function undo() {
     if (undoStack.length === 0) return;
     const action = undoStack.pop();
-    
+    try {
     if (action.type === 'frameTransform') {
         // Handle frame transformation undo
         action.shape.x = action.oldPos.x;
@@ -604,6 +619,33 @@ export function undo() {
             if (svg) {
                 svg.appendChild(action.shape.group);
             }
+
+            // Issue #24 bug #7: rehydrate frame state. The delete path
+            // orphaned the frame (removed <g>, clipGroup, clipPath from
+            // DOM) but kept the JS object intact. Re-attach clipGroup +
+            // clipPath, then re-parent every child from the snapshot via
+            // addShapeToFrame. Skip children that were subsequently
+            // deleted (they'll get re-added when their own delete action
+            // is undone in turn).
+            if (action.shape.shapeName === 'frame' && svg) {
+                if (action.shape.clipGroup && !action.shape.clipGroup.parentNode) {
+                    svg.appendChild(action.shape.clipGroup);
+                }
+                if (action.shape.clipPath && !action.shape.clipPath.parentNode) {
+                    const defs = svg.querySelector('defs');
+                    if (defs) defs.appendChild(action.shape.clipPath);
+                    else svg.insertBefore(action.shape.clipPath, svg.firstChild);
+                }
+                if (action.childSnapshot && Array.isArray(action.childSnapshot)) {
+                    for (const child of action.childSnapshot) {
+                        if (!child) continue;
+                        if (shapes.indexOf(child) === -1) continue;
+                        if (typeof action.shape.addShapeToFrame === 'function') {
+                            action.shape.addShapeToFrame(child);
+                        }
+                    }
+                }
+            }
         }
         redoStack.push(action);
         return;
@@ -875,12 +917,13 @@ export function undo() {
         redoStack.push(action);
         return;
     }
+    } finally { refreshSelectionAfterAction(); }
 }
 
 export function redo() {
     if (redoStack.length === 0) return;
     const action = redoStack.pop();
-    
+    try {
     if (action.type === 'frameTransform') {
         // Handle frame transformation redo
         action.shape.x = action.newPos.x;
@@ -1053,13 +1096,36 @@ export function redo() {
             // Handle other shape deletion redo
             const idx = shapes.indexOf(action.shape);
             if (idx !== -1) shapes.splice(idx, 1);
-            if (action.shape.group && action.shape.group.parentNode) {
-                action.shape.group.parentNode.removeChild(action.shape.group);
-            }
-            
-            // Handle frame cleanup
-            if (action.shape.shapeName === 'frame') {
-                action.shape.destroy();
+
+            // Issue #24 bug #7: for a regular frame, re-orphan instead of
+            // destroy() — releases children visually, detaches the frame's
+            // own DOM bits, but keeps the JS object and child references
+            // intact so a subsequent undo can rehydrate again.
+            if (action.shape.shapeName === 'frame' && !action.shape._diagramType && action.childSnapshot) {
+                for (const child of action.childSnapshot) {
+                    if (!child) continue;
+                    const el = child.group || child.element;
+                    if (el && svg) {
+                        if (action.shape.clipGroup && el.parentNode === action.shape.clipGroup) {
+                            action.shape.clipGroup.removeChild(el);
+                        }
+                        if (el.parentNode !== svg) svg.appendChild(el);
+                    }
+                    child.parentFrame = null;
+                    delete child.isBeingMovedByFrame;
+                }
+                action.shape.containedShapes = [];
+                if (action.shape.group && action.shape.group.parentNode) action.shape.group.parentNode.removeChild(action.shape.group);
+                if (action.shape.clipGroup && action.shape.clipGroup.parentNode) action.shape.clipGroup.parentNode.removeChild(action.shape.clipGroup);
+                if (action.shape.clipPath && action.shape.clipPath.parentNode) action.shape.clipPath.parentNode.removeChild(action.shape.clipPath);
+            } else {
+                if (action.shape.group && action.shape.group.parentNode) {
+                    action.shape.group.parentNode.removeChild(action.shape.group);
+                }
+                // Diagram frame OR no snapshot → fall back to destroy().
+                if (action.shape.shapeName === 'frame' && typeof action.shape.destroy === 'function') {
+                    action.shape.destroy();
+                }
             }
         }
         undoStack.push(action);
@@ -1329,6 +1395,7 @@ export function redo() {
         undoStack.push(action);
         return;
     }
+    } finally { refreshSelectionAfterAction(); }
 }
 
 // Optional: Keyboard shortcuts

package/src/core/ZoomPan.js

@@ -74,14 +74,24 @@ window.zoomFromCenter = function(direction) {
 };
 
 window.zoomReset = function() {
+  // Issue #24 bug #5: reset zoom in place around the current viewport
+  // centre — do NOT recenter to (0, 0). Recentering used to make whatever
+  // the user had on screen vanish until they panned back to it.
+  const cx = currentViewBox.x + currentViewBox.width / 2;
+  const cy = currentViewBox.y + currentViewBox.height / 2;
+
   currentZoom = 1;
-  currentViewBox.x = 0;
-  currentViewBox.y = 0;
-  currentViewBox.width = window.innerWidth;
-  currentViewBox.height = window.innerHeight;
+  const rect = freehandCanvas.getBoundingClientRect();
+  const vbW = rect.width || window.innerWidth;
+  const vbH = rect.height || window.innerHeight;
+
+  currentViewBox.x = cx - vbW / 2;
+  currentViewBox.y = cy - vbH / 2;
+  currentViewBox.width = vbW;
+  currentViewBox.height = vbH;
   freehandCanvas.setAttribute(
     "viewBox",
-    `0 0 ${window.innerWidth} ${window.innerHeight}`
+    `${currentViewBox.x} ${currentViewBox.y} ${vbW} ${vbH}`
   );
   updateZoomDisplay();
   if (window.__sketchStoreApi && window.__sketchStoreApi.setZoom) {

package/src/index.js

@@ -47,7 +47,20 @@ export function createSketchEngine(svgElement, options = {}) {
 // need to round-trip a scene through their own storage. saveScene reads from
 // window.shapes (populated by an active engine); loadScene rebuilds shapes onto
 // the active engine's SVG. Both must be called after engine.init() completes.
-export { saveScene, loadScene } from './core/SceneSerializer.js';
+// Scene serializer is intentionally NOT re-exported here.
+//
+// SceneSerializer.js statically imports every shape module, and the shape
+// modules reference bare `rough` / `svg` globals that only exist after
+// engine.init() runs. Re-exporting `saveScene`/`loadScene` at this module
+// scope makes any `import { ... } from '@elixpo/lixsketch'` evaluate the
+// shape graph eagerly and crash with "rough is not defined".
+//
+// Hosts that need scene serialization should import the subpath directly,
+// AFTER mounting the engine:
+//   const { saveScene, loadScene } = await import(
+//     '@elixpo/lixsketch/src/core/SceneSerializer.js'
+//   );
+// or use window.__sceneSerializer which engine.init() exposes.
 
 // Adaptive image compressor — same one the engine uses internally for
 // uploads. Exported so embedded hosts can pre-compress images before