@elixpo/lixsketch 5.4.7 → 5.5.0

package/dist/react/SceneSerializer-4U4B24JM.js

@@ -0,0 +1,739 @@
+"use client";
+import {
+  CodeShape
+} from "./chunk-7TZSIR6V.js";
+import {
+  ImageShape
+} from "./chunk-CB2RANCB.js";
+import {
+  IconShape
+} from "./chunk-JQ3IRFDP.js";
+import {
+  Frame
+} from "./chunk-BU4D2WYQ.js";
+import {
+  FreehandStroke
+} from "./chunk-YKJUBFHE.js";
+import {
+  Rectangle
+} from "./chunk-T6ZVV5ZO.js";
+import {
+  Circle
+} from "./chunk-AJAZC37E.js";
+import {
+  Arrow
+} from "./chunk-XISEAGBV.js";
+import {
+  Line
+} from "./chunk-6PFXZKL2.js";
+import "./chunk-BZE4CEBG.js";
+import "./chunk-L5OARZJ7.js";
+import {
+  TextShape
+} from "./chunk-QXFBG7OM.js";
+
+// src/core/SceneSerializer.js
+var FORMAT_VERSION = 1;
+var _sessionID = null;
+function getSessionID() {
+  if (!_sessionID) {
+    _sessionID = `lx-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+  return _sessionID;
+}
+function resetSessionID() {
+  _sessionID = null;
+}
+function cloneOptions(options) {
+  return JSON.parse(JSON.stringify(options));
+}
+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) {
+    case "rectangle":
+      return {
+        ...base,
+        type: "rectangle",
+        x: shape.x,
+        y: shape.y,
+        width: shape.width,
+        height: shape.height,
+        rotation: shape.rotation,
+        options: cloneOptions(shape.options)
+      };
+    case "circle":
+      return {
+        ...base,
+        type: "circle",
+        x: shape.x,
+        y: shape.y,
+        rx: shape.rx,
+        ry: shape.ry,
+        rotation: shape.rotation,
+        options: cloneOptions(shape.options)
+      };
+    case "line":
+      return {
+        ...base,
+        type: "line",
+        startPoint: { x: shape.startPoint.x, y: shape.startPoint.y },
+        endPoint: { x: shape.endPoint.x, y: shape.endPoint.y },
+        controlPoint: shape.controlPoint ? { x: shape.controlPoint.x, y: shape.controlPoint.y } : null,
+        isCurved: shape.isCurved || false,
+        options: cloneOptions(shape.options)
+      };
+    case "arrow": {
+      const data = {
+        ...base,
+        type: "arrow",
+        startPoint: { x: shape.startPoint.x, y: shape.startPoint.y },
+        endPoint: { x: shape.endPoint.x, y: shape.endPoint.y },
+        options: cloneOptions(shape.options),
+        arrowOutlineStyle: shape.arrowOutlineStyle,
+        arrowHeadStyle: shape.arrowHeadStyle,
+        arrowCurved: shape.arrowCurved,
+        arrowCurveAmount: shape.arrowCurveAmount
+      };
+      if (shape.controlPoint1) data.controlPoint1 = { x: shape.controlPoint1.x, y: shape.controlPoint1.y };
+      if (shape.controlPoint2) data.controlPoint2 = { x: shape.controlPoint2.x, y: shape.controlPoint2.y };
+      if (shape.startAttachment) data.startAttachmentID = shape.startAttachment.shapeID;
+      if (shape.endAttachment) data.endAttachmentID = shape.endAttachment.shapeID;
+      return data;
+    }
+    case "freehandStroke":
+      return {
+        ...base,
+        type: "freehandStroke",
+        points: JSON.parse(JSON.stringify(shape.points)),
+        rotation: shape.rotation,
+        options: cloneOptions(shape.options)
+      };
+    case "frame":
+      return {
+        ...base,
+        type: "frame",
+        x: shape.x,
+        y: shape.y,
+        width: shape.width,
+        height: shape.height,
+        rotation: shape.rotation,
+        frameName: shape.frameName,
+        fillStyle: shape.fillStyle || "transparent",
+        fillColor: shape.fillColor || "#1e1e28",
+        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).filter((s) => s && s.shapeID).map((s) => s.shapeID) : []
+      };
+    case "text": {
+      const group = shape.group;
+      return {
+        ...base,
+        type: "text",
+        x: shape.x,
+        y: shape.y,
+        rotation: shape.rotation,
+        groupHTML: group.cloneNode(true).outerHTML
+      };
+    }
+    case "code": {
+      const group = shape.group;
+      return {
+        ...base,
+        type: "code",
+        x: shape.x,
+        y: shape.y,
+        rotation: shape.rotation,
+        groupHTML: group.cloneNode(true).outerHTML
+      };
+    }
+    case "image": {
+      const el = shape.element;
+      return {
+        ...base,
+        type: "image",
+        x: shape.x,
+        y: shape.y,
+        width: shape.width,
+        height: shape.height,
+        rotation: shape.rotation,
+        href: el.getAttribute("href") || el.getAttributeNS("http://www.w3.org/1999/xlink", "href") || ""
+      };
+    }
+    case "icon": {
+      const el = shape.element;
+      return {
+        ...base,
+        type: "icon",
+        x: shape.x,
+        y: shape.y,
+        width: shape.width,
+        height: shape.height,
+        rotation: shape.rotation,
+        elementHTML: el.cloneNode(true).outerHTML,
+        viewboxWidth: parseFloat(el.getAttribute("data-viewbox-width")) || 24,
+        viewboxHeight: parseFloat(el.getAttribute("data-viewbox-height")) || 24
+      };
+    }
+    default:
+      console.warn("[SceneSerializer] Unknown shape type:", shape.shapeName);
+      return null;
+  }
+}
+function deserializeShape(data) {
+  const svgEl = window.svg;
+  if (!svgEl) return null;
+  const ns = "http://www.w3.org/2000/svg";
+  switch (data.type) {
+    case "rectangle": {
+      const shape = new Rectangle(data.x, data.y, data.width, data.height, data.options || {});
+      if (data.rotation) shape.rotation = data.rotation;
+      if (data.shapeID) shape.shapeID = data.shapeID;
+      return shape;
+    }
+    case "circle": {
+      const shape = new Circle(data.x, data.y, data.rx, data.ry, data.options || {});
+      if (data.rotation) shape.rotation = data.rotation;
+      if (data.shapeID) shape.shapeID = data.shapeID;
+      return shape;
+    }
+    case "line": {
+      const shape = new Line(data.startPoint, data.endPoint, data.options || {});
+      if (data.controlPoint) shape.controlPoint = data.controlPoint;
+      if (data.isCurved) shape.isCurved = data.isCurved;
+      if (data.shapeID) shape.shapeID = data.shapeID;
+      return shape;
+    }
+    case "arrow": {
+      const shape = new Arrow(data.startPoint, data.endPoint, data.options || {});
+      if (data.controlPoint1) shape.controlPoint1 = data.controlPoint1;
+      if (data.controlPoint2) shape.controlPoint2 = data.controlPoint2;
+      if (data.arrowOutlineStyle) shape.arrowOutlineStyle = data.arrowOutlineStyle;
+      if (data.arrowHeadStyle) shape.arrowHeadStyle = data.arrowHeadStyle;
+      if (data.arrowCurved) shape.arrowCurved = data.arrowCurved;
+      if (data.arrowCurveAmount) shape.arrowCurveAmount = data.arrowCurveAmount;
+      if (data.shapeID) shape.shapeID = data.shapeID;
+      return shape;
+    }
+    case "freehandStroke": {
+      const shape = new FreehandStroke(data.points, data.options || {});
+      if (data.rotation) shape.rotation = data.rotation;
+      if (data.shapeID) shape.shapeID = data.shapeID;
+      return shape;
+    }
+    case "frame": {
+      const frameOpts = { ...data.options || {}, frameName: data.frameName || "Frame" };
+      if (data.fillStyle) frameOpts.fillStyle = data.fillStyle;
+      if (data.fillColor) frameOpts.fillColor = data.fillColor;
+      if (data.gridSize) frameOpts.gridSize = data.gridSize;
+      if (data.gridColor) frameOpts.gridColor = data.gridColor;
+      const shape = new Frame(data.x, data.y, data.width, data.height, frameOpts);
+      if (data.rotation) shape.rotation = data.rotation;
+      if (data.shapeID) shape.shapeID = data.shapeID;
+      shape.draw();
+      return shape;
+    }
+    case "text": {
+      if (!data.groupHTML) return null;
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(`<svg xmlns="${ns}">${data.groupHTML}</svg>`, "image/svg+xml");
+      const group = doc.querySelector("g");
+      if (!group) return null;
+      const imported = svgEl.ownerDocument.importNode(group, true);
+      svgEl.appendChild(imported);
+      const shape = new TextShape(imported);
+      if (data.shapeID) shape.shapeID = data.shapeID;
+      return shape;
+    }
+    case "code": {
+      if (!data.groupHTML) return null;
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(`<svg xmlns="${ns}">${data.groupHTML}</svg>`, "image/svg+xml");
+      const group = doc.querySelector("g");
+      if (!group) return null;
+      const imported = svgEl.ownerDocument.importNode(group, true);
+      svgEl.appendChild(imported);
+      const shape = new CodeShape(imported);
+      if (data.shapeID) shape.shapeID = data.shapeID;
+      return shape;
+    }
+    case "image": {
+      const imgEl = document.createElementNS(ns, "image");
+      imgEl.setAttribute("x", data.x);
+      imgEl.setAttribute("y", data.y);
+      imgEl.setAttribute("width", data.width);
+      imgEl.setAttribute("height", data.height);
+      imgEl.setAttribute("href", data.href);
+      imgEl.setAttribute("preserveAspectRatio", "none");
+      svgEl.appendChild(imgEl);
+      const shape = new ImageShape(imgEl);
+      if (data.rotation) shape.rotation = data.rotation;
+      if (data.shapeID) shape.shapeID = data.shapeID;
+      return shape;
+    }
+    case "icon": {
+      if (!data.elementHTML) return null;
+      const parser = new DOMParser();
+      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;
+      return shape;
+    }
+    default:
+      console.warn("[SceneSerializer] Unknown type:", data.type);
+      return null;
+  }
+}
+function saveScene(workspaceName = "Untitled") {
+  const allShapes = window.shapes || [];
+  const serialized = [];
+  const childrenByFrame = /* @__PURE__ */ 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) 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 = {
+    format: "lixsketch",
+    version: FORMAT_VERSION,
+    sessionID: getSessionID(),
+    name: workspaceName,
+    createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+    viewport: window.currentViewBox ? { ...window.currentViewBox } : null,
+    zoom: window.currentZoom || 1,
+    shapes: serialized
+  };
+  return scene;
+}
+function loadScene(sceneData) {
+  if (!sceneData || sceneData.format !== "lixsketch") {
+    console.error("[SceneSerializer] Invalid scene format");
+    return false;
+  }
+  const svgEl = window.svg;
+  if (!svgEl) return false;
+  const existingShapes = window.shapes || [];
+  existingShapes.forEach((shape) => {
+    if (shape.shapeName === "frame") {
+      if (shape.clipGroup && shape.clipGroup.parentNode) {
+        shape.clipGroup.parentNode.removeChild(shape.clipGroup);
+      }
+      if (shape.clipPath && shape.clipPath.parentNode) {
+        shape.clipPath.parentNode.removeChild(shape.clipPath);
+      }
+    }
+    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 (window.shapes) window.shapes.length = 0;
+  else window.shapes = [];
+  window.currentShape = null;
+  if (window.historyStack) window.historyStack.length = 0;
+  else window.historyStack = [];
+  if (window.redoStack) window.redoStack.length = 0;
+  else window.redoStack = [];
+  const idMap = /* @__PURE__ */ new Map();
+  const frameData = sceneData.shapes.filter((s) => s.type === "frame");
+  const otherData = sceneData.shapes.filter((s) => s.type !== "frame");
+  for (const data of frameData) {
+    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);
+    }
+  }
+  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);
+    }
+  }
+  for (const data of frameData) {
+    const frame = idMap.get(data.shapeID);
+    if (frame && data.containedShapeIDs && data.containedShapeIDs.length > 0) {
+      for (const childID of data.containedShapeIDs) {
+        const child = idMap.get(childID);
+        if (!child) {
+          console.warn(`[SceneSerializer] Frame "${data.frameName}" references missing shape: ${childID}`);
+          continue;
+        }
+        try {
+          if (typeof frame.addShapeToFrame === "function") {
+            frame.addShapeToFrame(child);
+          } else {
+            frame.containedShapes.push(child);
+            child.parentFrame = frame;
+          }
+        } catch (err) {
+          console.warn(`[SceneSerializer] Failed to restore containment for ${childID} in frame ${data.shapeID}:`, err);
+          if (!frame.containedShapes.includes(child)) {
+            frame.containedShapes.push(child);
+          }
+          child.parentFrame = frame;
+        }
+      }
+    }
+  }
+  for (const data of sceneData.shapes) {
+    if (data.type === "arrow") {
+      const arrow = idMap.get(data.shapeID);
+      if (!arrow) continue;
+      if (data.startAttachmentID) {
+        const target = idMap.get(data.startAttachmentID);
+        if (target && arrow.setStartAttachment) arrow.setStartAttachment(target);
+      }
+      if (data.endAttachmentID) {
+        const target = idMap.get(data.endAttachmentID);
+        if (target && arrow.setEndAttachment) arrow.setEndAttachment(target);
+      }
+    }
+  }
+  for (const data of frameData) {
+    const frame = idMap.get(data.shapeID);
+    if (!frame) continue;
+    delete frame.isBeingMovedByFrame;
+    delete frame.isDraggedOutTemporarily;
+    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);
+      }
+      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);
+      }
+      child.parentFrame = frame;
+    }
+    if (typeof frame.updateClipPath === "function") frame.updateClipPath();
+    if (typeof frame.draw === "function") {
+      try {
+        frame.draw();
+      } catch (err) {
+        console.warn("[SceneSerializer] frame redraw failed:", err);
+      }
+    }
+  }
+  if (sceneData.viewport && svgEl) {
+    const vb = sceneData.viewport;
+    window.currentViewBox = { ...vb };
+    svgEl.setAttribute("viewBox", `${vb.x} ${vb.y} ${vb.width} ${vb.height}`);
+  }
+  if (sceneData.zoom) {
+    window.currentZoom = sceneData.zoom;
+  }
+  console.log(`[SceneSerializer] Loaded ${window.shapes.length} shapes from "${sceneData.name}"`);
+  if (window.__sketchEngine && typeof window.__sketchEngine.setActiveTool === "function") {
+    const store = window.__sketchStoreApi;
+    const currentTool = store ? store.getState().activeTool : "select";
+    window.__sketchEngine.setActiveTool(currentTool);
+  } else {
+    window.isSelectionToolActive = true;
+  }
+  return true;
+}
+function downloadScene(workspaceName = "Untitled") {
+  const scene = saveScene(workspaceName);
+  const json = JSON.stringify(scene, null, 2);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${workspaceName.replace(/[^a-zA-Z0-9_-]/g, "_")}.lixjson`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+function validateScene(data) {
+  if (!data || typeof data !== "object") return { valid: false, error: "Not a valid JSON object" };
+  if (data.format !== "lixsketch") return { valid: false, error: "Not a LixSketch scene file (missing format field)" };
+  if (!data.version || data.version > FORMAT_VERSION) return { valid: false, error: `Unsupported version: ${data.version}` };
+  if (!Array.isArray(data.shapes)) return { valid: false, error: "Invalid scene: missing shapes array" };
+  return {
+    valid: true,
+    name: data.name || "Untitled",
+    shapeCount: data.shapes.length,
+    sessionID: data.sessionID || null,
+    createdAt: data.createdAt || null
+  };
+}
+function uploadScene() {
+  return new Promise((resolve, reject) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".lixjson,.json";
+    input.onchange = (e) => {
+      const file = e.target.files[0];
+      if (!file) return resolve(false);
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        try {
+          const data = JSON.parse(ev.target.result);
+          const validation = validateScene(data);
+          if (!validation.valid) {
+            console.error("[SceneSerializer] Invalid file:", validation.error);
+            resolve({ success: false, error: validation.error });
+            return;
+          }
+          resetSessionID();
+          const result = loadScene(data);
+          resolve({ success: result, validation });
+        } catch (err) {
+          console.error("[SceneSerializer] Failed to parse file:", err);
+          resolve({ success: false, error: "Failed to parse JSON file" });
+        }
+      };
+      reader.readAsText(file);
+    };
+    input.click();
+  });
+}
+function exportAsPNG() {
+  const svgEl = window.svg;
+  if (!svgEl) return;
+  const clone = svgEl.cloneNode(true);
+  const selectionEls = clone.querySelectorAll("[data-selection], .selection-handle, .resize-handle, .rotation-handle");
+  selectionEls.forEach((el) => el.remove());
+  const svgData = new XMLSerializer().serializeToString(clone);
+  const canvas = document.createElement("canvas");
+  const vb = svgEl.viewBox.baseVal;
+  canvas.width = vb.width * 2;
+  canvas.height = vb.height * 2;
+  const ctx = canvas.getContext("2d");
+  ctx.scale(2, 2);
+  const img = new Image();
+  const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(svgBlob);
+  img.onload = () => {
+    ctx.fillStyle = "#121212";
+    ctx.fillRect(0, 0, vb.width, vb.height);
+    ctx.drawImage(img, 0, 0, vb.width, vb.height);
+    URL.revokeObjectURL(url);
+    canvas.toBlob((blob) => {
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = "lixsketch-export.png";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }, "image/png");
+  };
+  img.src = url;
+}
+function copyAsPNG() {
+  const svgEl = window.svg;
+  if (!svgEl) return;
+  const clone = svgEl.cloneNode(true);
+  const selectionEls = clone.querySelectorAll("[data-selection], .selection-handle, .resize-handle, .rotation-handle");
+  selectionEls.forEach((el) => el.remove());
+  const svgData = new XMLSerializer().serializeToString(clone);
+  const canvas = document.createElement("canvas");
+  const vb = svgEl.viewBox.baseVal;
+  canvas.width = vb.width * 2;
+  canvas.height = vb.height * 2;
+  const ctx = canvas.getContext("2d");
+  ctx.scale(2, 2);
+  const img = new Image();
+  const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(svgBlob);
+  img.onload = () => {
+    ctx.fillStyle = "#121212";
+    ctx.fillRect(0, 0, vb.width, vb.height);
+    ctx.drawImage(img, 0, 0, vb.width, vb.height);
+    URL.revokeObjectURL(url);
+    canvas.toBlob((blob) => {
+      if (!blob) return;
+      navigator.clipboard.write([
+        new ClipboardItem({ "image/png": blob })
+      ]).catch((err) => console.warn("[SceneSerializer] Clipboard write failed:", err));
+    }, "image/png");
+  };
+  img.src = url;
+}
+function copyAsSVG() {
+  const svgEl = window.svg;
+  if (!svgEl) return;
+  const clone = svgEl.cloneNode(true);
+  const selectionEls = clone.querySelectorAll("[data-selection], .selection-handle, .resize-handle, .rotation-handle");
+  selectionEls.forEach((el) => el.remove());
+  const svgData = new XMLSerializer().serializeToString(clone);
+  navigator.clipboard.writeText(svgData).catch((err) => console.warn("[SceneSerializer] Clipboard write failed:", err));
+}
+function exportAsPDF() {
+  const svgEl = window.svg;
+  if (!svgEl) return;
+  const clone = svgEl.cloneNode(true);
+  const selectionEls = clone.querySelectorAll("[data-selection], .selection-handle, .resize-handle, .rotation-handle");
+  selectionEls.forEach((el) => el.remove());
+  const svgData = new XMLSerializer().serializeToString(clone);
+  const printWindow = window.open("", "_blank");
+  printWindow.document.write(`
+        <!DOCTYPE html>
+        <html>
+        <head><title>LixSketch Export</title>
+        <style>
+            body { margin: 0; background: #121212; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+            svg { max-width: 100vw; max-height: 100vh; }
+            @media print { body { background: white; } }
+        </style>
+        </head>
+        <body>${svgData}</body>
+        </html>
+    `);
+  printWindow.document.close();
+  printWindow.focus();
+  setTimeout(() => printWindow.print(), 500);
+}
+function resetCanvas() {
+  const svgEl = window.svg;
+  if (!svgEl) return;
+  const existingShapes = window.shapes || [];
+  existingShapes.forEach((shape) => {
+    if (shape.shapeName === "frame") {
+      if (shape.clipGroup && shape.clipGroup.parentNode) {
+        shape.clipGroup.parentNode.removeChild(shape.clipGroup);
+      }
+      if (shape.clipPath && shape.clipPath.parentNode) {
+        shape.clipPath.parentNode.removeChild(shape.clipPath);
+      }
+    }
+    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);
+    }
+  });
+  svgEl.querySelectorAll(
+    ".selection-outline, .resize-anchor, .rotation-anchor, [data-selection]"
+  ).forEach((el) => el.remove());
+  if (window.shapes) window.shapes.length = 0;
+  else window.shapes = [];
+  window.currentShape = null;
+  if (window.historyStack) window.historyStack.length = 0;
+  else window.historyStack = [];
+  if (window.redoStack) window.redoStack.length = 0;
+  else window.redoStack = [];
+  if (typeof window.clearAllSelections === "function") {
+    window.clearAllSelections();
+  }
+  if (typeof window.disableAllSideBars === "function") {
+    window.disableAllSideBars();
+  }
+  try {
+    localStorage.removeItem("lixsketch-autosave");
+    localStorage.removeItem("lixsketch-autosave-meta");
+    const sid = window.__sessionID;
+    if (sid) {
+      localStorage.removeItem(`lixsketch-autosave-${sid}`);
+      localStorage.removeItem(`lixsketch-autosave-meta-${sid}`);
+    }
+  } catch (_) {
+  }
+  console.log("[SceneSerializer] Canvas reset");
+}
+function findTextOnCanvas(query) {
+  const allShapes = window.shapes || [];
+  if (!query || query.trim() === "") return [];
+  const lowerQuery = query.toLowerCase();
+  const results = [];
+  for (const shape of allShapes) {
+    let textContent = "";
+    if (shape.shapeName === "text" || shape.shapeName === "code") {
+      const group = shape.group;
+      if (group) {
+        const textEls = group.querySelectorAll("text, tspan");
+        textEls.forEach((el) => {
+          if (el.textContent) textContent += el.textContent + " ";
+        });
+        const foreignEls = group.querySelectorAll("foreignObject *");
+        foreignEls.forEach((el) => {
+          if (el.textContent) textContent += el.textContent + " ";
+        });
+      }
+    } else if (shape.shapeName === "frame") {
+      textContent = shape.frameName || "";
+    }
+    textContent = textContent.trim();
+    if (textContent && textContent.toLowerCase().includes(lowerQuery)) {
+      results.push({
+        shape,
+        text: textContent,
+        type: shape.shapeName,
+        x: shape.x || 0,
+        y: shape.y || 0
+      });
+    }
+  }
+  return results;
+}
+function initSceneSerializer() {
+  window.__sceneSerializer = {
+    save: saveScene,
+    load: loadScene,
+    download: downloadScene,
+    upload: uploadScene,
+    exportPNG: exportAsPNG,
+    exportPDF: exportAsPDF,
+    copyAsPNG,
+    copyAsSVG,
+    resetCanvas,
+    findText: findTextOnCanvas
+  };
+}
+export {
+  copyAsPNG,
+  copyAsSVG,
+  downloadScene,
+  exportAsPDF,
+  exportAsPNG,
+  findTextOnCanvas,
+  getSessionID,
+  initSceneSerializer,
+  loadScene,
+  resetCanvas,
+  resetSessionID,
+  saveScene,
+  uploadScene,
+  validateScene
+};
+//# sourceMappingURL=SceneSerializer-4U4B24JM.js.map