@elixpo/lixsketch 5.4.7 → 5.5.0

package/dist/react/chunk-L5OARZJ7.js

@@ -0,0 +1,1134 @@
+"use client";
+
+// src/core/UndoRedo.js
+var undoStack = [];
+var redoStack = [];
+var selectedElement = null;
+var updateSelectionFeedback = null;
+var svg = null;
+function setTextReferences(element, updateFn, svgElement) {
+  selectedElement = element;
+  updateSelectionFeedback = updateFn;
+  svg = svgElement;
+}
+function getCurrentSelectedElement() {
+  return selectedElement;
+}
+function updateSelectedElement(element) {
+  selectedElement = element;
+}
+function pushCreateAction(shape) {
+  undoStack.push({
+    type: "create",
+    shape
+  });
+  redoStack.length = 0;
+}
+function pushDeleteAction(shape, meta = null) {
+  const action = { type: "delete", shape };
+  if (meta && meta.childSnapshot) action.childSnapshot = meta.childSnapshot;
+  undoStack.push(action);
+  redoStack.length = 0;
+}
+function pushDeleteActionWithAttachments(shape) {
+  let affectedArrows = [];
+  if (shape.type === "text" || shape.shapeName === "text") {
+    affectedArrows = shapes.filter((s) => s.shapeName === "arrow" && (s.attachedToStart?.shape === shape || s.attachedToEnd?.shape === shape)).map((arrow) => ({
+      arrow,
+      oldAttachments: arrow.getAttachmentState(),
+      oldPoints: {
+        startPoint: { ...arrow.startPoint },
+        endPoint: { ...arrow.endPoint }
+      }
+    }));
+  }
+  undoStack.push({
+    type: "delete",
+    shape,
+    affectedArrows
+  });
+  redoStack.length = 0;
+}
+function pushFrameAttachmentAction(frame, shape, action, oldFrame = null) {
+  undoStack.push({
+    type: "frameAttachment",
+    frame,
+    shape,
+    action,
+    // 'attach' or 'detach'
+    oldFrame,
+    // Previous frame if shape was moved between frames
+    // Store shape position for potential restoration
+    shapeState: {
+      x: shape.x,
+      y: shape.y,
+      width: shape.width || 0,
+      height: shape.height || 0,
+      rotation: shape.rotation || 0
+    }
+  });
+  redoStack.length = 0;
+}
+function pushCreateActionWithAttachments(shape) {
+  undoStack.push({
+    type: "create",
+    shape,
+    // Store any arrows that might need to reattach when this is undone
+    potentialAttachments: []
+  });
+  redoStack.length = 0;
+}
+function pushTransformAction(shape, oldPos, newPos) {
+  if (shape.shapeName === "frame") {
+    const containedShapesStates = shape.containedShapes.map((containedShape) => ({
+      shape: containedShape,
+      oldState: {
+        x: containedShape.x - (newPos.x - oldPos.x),
+        y: containedShape.y - (newPos.y - oldPos.y),
+        width: containedShape.width || 0,
+        height: containedShape.height || 0,
+        rotation: containedShape.rotation || 0
+      },
+      newState: {
+        x: containedShape.x,
+        y: containedShape.y,
+        width: containedShape.width || 0,
+        height: containedShape.height || 0,
+        rotation: containedShape.rotation || 0
+      }
+    }));
+    undoStack.push({
+      type: "frameTransform",
+      shape,
+      oldPos: {
+        x: oldPos.x,
+        y: oldPos.y,
+        width: oldPos.width,
+        height: oldPos.height,
+        rotation: oldPos.rotation,
+        frameName: oldPos.frameName || shape.frameName
+      },
+      newPos: {
+        x: newPos.x,
+        y: newPos.y,
+        width: newPos.width,
+        height: newPos.height,
+        rotation: newPos.rotation,
+        frameName: newPos.frameName || shape.frameName
+      },
+      containedShapes: containedShapesStates
+    });
+  } else if (shape.type === "text") {
+    const currentFrame = shape.parentFrame || null;
+    undoStack.push({
+      type: "transform",
+      shape,
+      oldPos: {
+        x: oldPos.x,
+        y: oldPos.y,
+        rotation: oldPos.rotation,
+        fontSize: oldPos.fontSize
+      },
+      newPos: {
+        x: newPos.x,
+        y: newPos.y,
+        rotation: newPos.rotation,
+        fontSize: newPos.fontSize
+      },
+      // Track frame attachment state
+      frameAttachment: {
+        oldFrame: oldPos.parentFrame || null,
+        newFrame: currentFrame
+      },
+      // Store affected arrows with their attachment states
+      affectedArrows: shapes.filter((s) => s.shapeName === "arrow" && (s.attachedToStart?.shape === shape || s.attachedToEnd?.shape === shape)).map((arrow) => ({
+        arrow,
+        oldAttachments: arrow.getAttachmentState(),
+        oldPoints: {
+          startPoint: { ...arrow.startPoint },
+          endPoint: { ...arrow.endPoint }
+        }
+      }))
+    });
+  } else if (shape.type === "image") {
+    const currentFrame = shape.parentFrame || null;
+    undoStack.push({
+      type: "transform",
+      shape,
+      oldPos: {
+        x: oldPos.x,
+        y: oldPos.y,
+        width: oldPos.width,
+        height: oldPos.height,
+        rotation: oldPos.rotation
+      },
+      newPos: {
+        x: newPos.x,
+        y: newPos.y,
+        width: newPos.width,
+        height: newPos.height,
+        rotation: newPos.rotation
+      },
+      // Track frame attachment state
+      frameAttachment: {
+        oldFrame: oldPos.parentFrame || null,
+        newFrame: currentFrame
+      },
+      // Store affected arrows with their attachment states
+      affectedArrows: shapes.filter((s) => s.shapeName === "arrow" && (s.attachedToStart?.shape === shape || s.attachedToEnd?.shape === shape)).map((arrow) => ({
+        arrow,
+        oldAttachments: arrow.getAttachmentState(),
+        oldPoints: {
+          startPoint: { ...arrow.startPoint },
+          endPoint: { ...arrow.endPoint }
+        }
+      }))
+    });
+  } else if (shape.shapeName === "circle") {
+    const currentFrame = shape.parentFrame || null;
+    undoStack.push({
+      type: "transform",
+      shape,
+      oldPos: {
+        x: oldPos.x,
+        y: oldPos.y,
+        rx: oldPos.rx,
+        ry: oldPos.ry,
+        rotation: oldPos.rotation
+      },
+      newPos: {
+        x: newPos.x,
+        y: newPos.y,
+        rx: newPos.rx,
+        ry: newPos.ry,
+        rotation: newPos.rotation
+      },
+      // Track frame attachment state
+      frameAttachment: {
+        oldFrame: oldPos.parentFrame || null,
+        newFrame: currentFrame
+      },
+      // Store affected arrows with their attachment states
+      affectedArrows: shapes.filter((s) => s.shapeName === "arrow" && (s.attachedToStart?.shape === shape || s.attachedToEnd?.shape === shape)).map((arrow) => ({
+        arrow,
+        oldAttachments: arrow.getAttachmentState(),
+        oldPoints: {
+          startPoint: { ...arrow.startPoint },
+          endPoint: { ...arrow.endPoint }
+        }
+      }))
+    });
+  } else if (shape.shapeName === "rectangle") {
+    const currentFrame = shape.parentFrame || null;
+    undoStack.push({
+      type: "transform",
+      shape,
+      oldPos: {
+        x: oldPos.x,
+        y: oldPos.y,
+        width: oldPos.width,
+        height: oldPos.height,
+        rotation: oldPos.rotation
+      },
+      newPos: {
+        x: newPos.x,
+        y: newPos.y,
+        width: newPos.width,
+        height: newPos.height,
+        rotation: newPos.rotation
+      },
+      // Track frame attachment state
+      frameAttachment: {
+        oldFrame: oldPos.parentFrame || null,
+        newFrame: currentFrame
+      },
+      // Store affected arrows with their attachment states
+      affectedArrows: shapes.filter((s) => s.shapeName === "arrow" && (s.attachedToStart?.shape === shape || s.attachedToEnd?.shape === shape)).map((arrow) => ({
+        arrow,
+        oldAttachments: arrow.getAttachmentState(),
+        oldPoints: {
+          startPoint: { ...arrow.startPoint },
+          endPoint: { ...arrow.endPoint }
+        }
+      }))
+    });
+  } else if (shape.shapeName === "line") {
+    const currentFrame = shape.parentFrame || null;
+    undoStack.push({
+      type: "transform",
+      shape,
+      oldPos: {
+        startPoint: { x: oldPos.startPoint.x, y: oldPos.startPoint.y },
+        endPoint: { x: oldPos.endPoint.x, y: oldPos.endPoint.y },
+        controlPoint: oldPos.controlPoint ? { x: oldPos.controlPoint.x, y: oldPos.controlPoint.y } : null,
+        isCurved: oldPos.isCurved || false
+      },
+      newPos: {
+        startPoint: { x: newPos.startPoint.x, y: newPos.startPoint.y },
+        endPoint: { x: newPos.endPoint.x, y: newPos.endPoint.y },
+        controlPoint: newPos.controlPoint ? { x: newPos.controlPoint.x, y: newPos.controlPoint.y } : null,
+        isCurved: newPos.isCurved || false
+      },
+      // Track frame attachment state
+      frameAttachment: {
+        oldFrame: oldPos.parentFrame || null,
+        newFrame: currentFrame
+      }
+    });
+  } else if (shape.shapeName === "arrow") {
+    undoStack.push({
+      type: "transform",
+      shape,
+      oldPos: {
+        startPoint: { x: oldPos.startPoint.x, y: oldPos.startPoint.y },
+        endPoint: { x: oldPos.endPoint.x, y: oldPos.endPoint.y },
+        controlPoint1: oldPos.controlPoint1 ? { x: oldPos.controlPoint1.x, y: oldPos.controlPoint1.y } : null,
+        controlPoint2: oldPos.controlPoint2 ? { x: oldPos.controlPoint2.x, y: oldPos.controlPoint2.y } : null,
+        attachments: oldPos.attachments || shape.getAttachmentState()
+      },
+      newPos: {
+        startPoint: { x: newPos.startPoint.x, y: newPos.startPoint.y },
+        endPoint: { x: newPos.endPoint.x, y: newPos.endPoint.y },
+        controlPoint1: newPos.controlPoint1 ? { x: newPos.controlPoint1.x, y: newPos.controlPoint1.y } : null,
+        controlPoint2: newPos.controlPoint2 ? { x: newPos.controlPoint2.x, y: newPos.controlPoint2.y } : null,
+        attachments: newPos.attachments || shape.getAttachmentState()
+      }
+    });
+  } else if (shape.type === "icon") {
+    const currentFrame = shape.parentFrame || null;
+    undoStack.push({
+      type: "transform",
+      shape,
+      oldPos: {
+        x: oldPos.x,
+        y: oldPos.y,
+        width: oldPos.width,
+        height: oldPos.height,
+        rotation: oldPos.rotation
+      },
+      newPos: {
+        x: newPos.x,
+        y: newPos.y,
+        width: newPos.width,
+        height: newPos.height,
+        rotation: newPos.rotation
+      },
+      // Track frame attachment state
+      frameAttachment: {
+        oldFrame: oldPos.parentFrame || null,
+        newFrame: currentFrame
+      },
+      // Store affected arrows with their attachment states
+      affectedArrows: shapes.filter((s) => s.shapeName === "arrow" && (s.attachedToStart?.shape === shape || s.attachedToEnd?.shape === shape)).map((arrow) => ({
+        arrow,
+        oldAttachments: arrow.getAttachmentState(),
+        oldPoints: {
+          startPoint: { ...arrow.startPoint },
+          endPoint: { ...arrow.endPoint }
+        }
+      }))
+    });
+  } else if (shape.shapeName === "freehandStroke") {
+    undoStack.push({
+      type: "transform",
+      shape,
+      oldPos: {
+        points: JSON.parse(JSON.stringify(oldPos.points)),
+        rotation: oldPos.rotation
+      },
+      newPos: {
+        points: JSON.parse(JSON.stringify(newPos.points)),
+        rotation: newPos.rotation
+      }
+    });
+  }
+  redoStack.length = 0;
+}
+function pushOptionsChangeAction(shape, oldOptions) {
+  undoStack.push({
+    type: "optionsChange",
+    shape,
+    oldOptions
+  });
+  redoStack.length = 0;
+}
+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);
+  }
+}
+function undo() {
+  if (undoStack.length === 0) return;
+  const action = undoStack.pop();
+  try {
+    if (action.type === "frameTransform") {
+      action.shape.x = action.oldPos.x;
+      action.shape.y = action.oldPos.y;
+      action.shape.width = action.oldPos.width;
+      action.shape.height = action.oldPos.height;
+      action.shape.rotation = action.oldPos.rotation;
+      action.shape.frameName = action.oldPos.frameName;
+      action.containedShapes.forEach((shapeData) => {
+        const shape = shapeData.shape;
+        shape.x = shapeData.oldState.x;
+        shape.y = shapeData.oldState.y;
+        shape.width = shapeData.oldState.width;
+        shape.height = shapeData.oldState.height;
+        shape.rotation = shapeData.oldState.rotation;
+        if (typeof shape.draw === "function") {
+          shape.draw();
+        }
+      });
+      action.shape.isSelected = false;
+      if (typeof action.shape.removeSelection === "function") action.shape.removeSelection();
+      action.shape.draw();
+      action.shape.updateClipPath();
+      redoStack.push(action);
+      return;
+    }
+    if (action.type === "frameAttachment") {
+      if (action.action === "attach") {
+        const frameIndex = action.frame.containedShapes.indexOf(action.shape);
+        if (frameIndex > -1) {
+          action.frame.containedShapes.splice(frameIndex, 1);
+          action.shape.parentFrame = null;
+          if (action.shape.group && action.shape.group.parentNode === action.frame.clipGroup) {
+            action.frame.clipGroup.removeChild(action.shape.group);
+            svg.appendChild(action.shape.group);
+          }
+        }
+        if (action.oldFrame) {
+          action.oldFrame.containedShapes.push(action.shape);
+          action.shape.parentFrame = action.oldFrame;
+          if (action.shape.group && action.shape.group.parentNode === svg) {
+            svg.removeChild(action.shape.group);
+            action.oldFrame.clipGroup.appendChild(action.shape.group);
+          }
+        }
+      } else if (action.action === "detach") {
+        if (!action.frame.containedShapes.includes(action.shape)) {
+          action.frame.containedShapes.push(action.shape);
+          action.shape.parentFrame = action.frame;
+          if (action.shape.group && action.shape.group.parentNode === svg) {
+            svg.removeChild(action.shape.group);
+            action.frame.clipGroup.appendChild(action.shape.group);
+          }
+        }
+      }
+      action.shape.x = action.shapeState.x;
+      action.shape.y = action.shapeState.y;
+      action.shape.width = action.shapeState.width;
+      action.shape.height = action.shapeState.height;
+      action.shape.rotation = action.shapeState.rotation;
+      if (typeof action.shape.draw === "function") {
+        action.shape.draw();
+      }
+      redoStack.push(action);
+      return;
+    }
+    if (action.type === "create" && action.shape.type === "modeConvert") {
+      const newShape = action.shape.newShape;
+      const newElement = action.shape.newElement;
+      const oldShape = action.shape.oldShape;
+      const oldElement = action.shape.oldElement;
+      if (newElement && newElement.parentNode) {
+        newElement.parentNode.removeChild(newElement);
+      }
+      const newIdx = shapes.indexOf(newShape);
+      if (newIdx !== -1) shapes.splice(newIdx, 1);
+      if (svg && oldElement) {
+        svg.appendChild(oldElement);
+      }
+      if (oldShape) {
+        shapes.push(oldShape);
+      }
+      redoStack.push(action);
+      return;
+    }
+    if (action.type === "create") {
+      if (action.shape.type === "text") {
+        if (action.shape.element && action.shape.element.parentNode) {
+          action.shape.element.parentNode.removeChild(action.shape.element);
+        } else if (action.shape.parentNode) {
+          action.shape.parentNode.removeChild(action.shape);
+        }
+        const idx = shapes.indexOf(action.shape.element || action.shape);
+        if (idx !== -1) shapes.splice(idx, 1);
+        if (typeof cleanupAttachments === "function") {
+          cleanupAttachments(action.shape.element || action.shape);
+        }
+      } else if (action.shape.type === "image") {
+        action.shape.remove();
+      } else if (action.shape.type === "icon") {
+        action.shape.remove();
+      } else {
+        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);
+        }
+        if (action.shape.shapeName === "frame") {
+          action.shape.destroy();
+        }
+      }
+      redoStack.push(action);
+      return;
+    }
+    if (action.type === "delete") {
+      if (action.shape.type === "text") {
+        if (svg) {
+          svg.appendChild(action.shape.element || action.shape);
+          shapes.push(action.shape.element || action.shape);
+        }
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            arrow.restoreAttachmentState(arrowData.oldAttachments);
+          });
+        }
+      } else if (action.shape.type === "image") {
+        action.shape.restore();
+      } else {
+        shapes.push(action.shape);
+        if (svg) {
+          svg.appendChild(action.shape.group);
+        }
+        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;
+    }
+    if (action.type === "transform") {
+      if (action.frameAttachment) {
+        if (action.frameAttachment.newFrame) {
+          const frameIndex = action.frameAttachment.newFrame.containedShapes.indexOf(action.shape);
+          if (frameIndex > -1) {
+            action.frameAttachment.newFrame.containedShapes.splice(frameIndex, 1);
+            if (action.shape.group && action.shape.group.parentNode === action.frameAttachment.newFrame.clipGroup) {
+              action.frameAttachment.newFrame.clipGroup.removeChild(action.shape.group);
+              svg.appendChild(action.shape.group);
+            }
+          }
+        }
+        if (action.frameAttachment.oldFrame) {
+          if (!action.frameAttachment.oldFrame.containedShapes.includes(action.shape)) {
+            action.frameAttachment.oldFrame.containedShapes.push(action.shape);
+            action.shape.parentFrame = action.frameAttachment.oldFrame;
+            if (action.shape.group && action.shape.group.parentNode === svg) {
+              svg.removeChild(action.shape.group);
+              action.frameAttachment.oldFrame.clipGroup.appendChild(action.shape.group);
+            }
+          }
+        } else {
+          action.shape.parentFrame = null;
+        }
+      }
+      if (action.shape.type === "text") {
+        const textElement = (action.shape.element || action.shape).querySelector("text");
+        if (textElement && action.oldPos.fontSize !== void 0) {
+          textElement.setAttribute("font-size", action.oldPos.fontSize + "px");
+        }
+        const centerX = textElement ? textElement.getBBox().x + textElement.getBBox().width / 2 : 0;
+        const centerY = textElement ? textElement.getBBox().y + textElement.getBBox().height / 2 : 0;
+        (action.shape.element || action.shape).setAttribute(
+          "transform",
+          `translate(${action.oldPos.x}, ${action.oldPos.y}) rotate(${action.oldPos.rotation}, ${centerX}, ${centerY})`
+        );
+        (action.shape.element || action.shape).setAttribute("data-x", action.oldPos.x);
+        (action.shape.element || action.shape).setAttribute("data-y", action.oldPos.y);
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            arrow.restoreAttachmentState(arrowData.oldAttachments);
+            arrowData.newPoints = {
+              startPoint: { ...arrow.startPoint },
+              endPoint: { ...arrow.endPoint }
+            };
+            arrowData.newAttachments = arrow.getAttachmentState();
+          });
+        }
+        if (selectedElement === (action.shape.element || action.shape) && updateSelectionFeedback) {
+          setTimeout(updateSelectionFeedback, 0);
+        }
+      } else if (action.shape.type === "image") {
+        action.shape.restore(action.oldPos);
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            arrow.restoreAttachmentState(arrowData.oldAttachments);
+            arrowData.newPoints = {
+              startPoint: { ...arrow.startPoint },
+              endPoint: { ...arrow.endPoint }
+            };
+            arrowData.newAttachments = arrow.getAttachmentState();
+          });
+        }
+      } else if (action.shape.shapeName === "circle") {
+        action.shape.x = action.oldPos.x;
+        action.shape.y = action.oldPos.y;
+        action.shape.rx = action.oldPos.rx;
+        action.shape.ry = action.oldPos.ry;
+        action.shape.rotation = action.oldPos.rotation;
+        action.shape.isSelected = false;
+        if (typeof action.shape.removeSelection === "function") action.shape.removeSelection();
+        action.shape.draw();
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            arrow.restoreAttachmentState(arrowData.oldAttachments);
+            arrowData.newPoints = {
+              startPoint: { ...arrow.startPoint },
+              endPoint: { ...arrow.endPoint }
+            };
+            arrowData.newAttachments = arrow.getAttachmentState();
+          });
+        }
+      } else if (action.shape.shapeName === "line") {
+        action.shape.startPoint = { x: action.oldPos.startPoint.x, y: action.oldPos.startPoint.y };
+        action.shape.endPoint = { x: action.oldPos.endPoint.x, y: action.oldPos.endPoint.y };
+        action.shape.isCurved = action.oldPos.isCurved || false;
+        if (action.oldPos.controlPoint) {
+          action.shape.controlPoint = { x: action.oldPos.controlPoint.x, y: action.oldPos.controlPoint.y };
+        } else {
+          action.shape.controlPoint = null;
+        }
+        if (action.frameAttachment) {
+          if (action.frameAttachment.newFrame) {
+            const frameIndex = action.frameAttachment.newFrame.containedShapes.indexOf(action.shape);
+            if (frameIndex > -1) {
+              action.frameAttachment.newFrame.containedShapes.splice(frameIndex, 1);
+              if (action.shape.group && action.shape.group.parentNode === action.frameAttachment.newFrame.clipGroup) {
+                action.frameAttachment.newFrame.clipGroup.removeChild(action.shape.group);
+                svg.appendChild(action.shape.group);
+              }
+            }
+          }
+          if (action.frameAttachment.oldFrame) {
+            if (!action.frameAttachment.oldFrame.containedShapes.includes(action.shape)) {
+              action.frameAttachment.oldFrame.containedShapes.push(action.shape);
+              action.shape.parentFrame = action.frameAttachment.oldFrame;
+              if (action.shape.group && action.shape.group.parentNode === svg) {
+                svg.removeChild(action.shape.group);
+                action.frameAttachment.oldFrame.clipGroup.appendChild(action.shape.group);
+              }
+            }
+          } else {
+            action.shape.parentFrame = null;
+          }
+        }
+        action.shape.isSelected = false;
+        if (typeof action.shape.removeSelection === "function") action.shape.removeSelection();
+        action.shape.draw();
+      } else if (action.shape.shapeName === "arrow") {
+        action.shape.startPoint = { x: action.oldPos.startPoint.x, y: action.oldPos.startPoint.y };
+        action.shape.endPoint = { x: action.oldPos.endPoint.x, y: action.oldPos.endPoint.y };
+        action.shape.controlPoint1 = action.oldPos.controlPoint1 ? { x: action.oldPos.controlPoint1.x, y: action.oldPos.controlPoint1.y } : null;
+        action.shape.controlPoint2 = action.oldPos.controlPoint2 ? { x: action.oldPos.controlPoint2.x, y: action.oldPos.controlPoint2.y } : null;
+        if (action.oldPos.attachments) {
+          action.shape.restoreAttachmentState(action.oldPos.attachments);
+        } else {
+          action.shape.attachedToStart = null;
+          action.shape.attachedToEnd = null;
+        }
+        action.shape.isSelected = false;
+        action.shape.draw();
+      } else if (action.shape.type === "icon") {
+        action.shape.restore(action.oldPos);
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            arrow.restoreAttachmentState(arrowData.oldAttachments);
+            arrowData.newPoints = {
+              startPoint: { ...arrow.startPoint },
+              endPoint: { ...arrow.endPoint }
+            };
+            arrowData.newAttachments = arrow.getAttachmentState();
+          });
+        }
+      } else if (action.shape.shapeName === "freehandStroke") {
+        action.shape.points = JSON.parse(JSON.stringify(action.oldPos.points));
+        action.shape.rotation = action.oldPos.rotation;
+        action.shape.isSelected = false;
+        if (typeof action.shape.removeSelection === "function") action.shape.removeSelection();
+        action.shape.draw();
+      } else if (action.shape.shapeName === "rectangle") {
+        action.shape.x = action.oldPos.x;
+        action.shape.y = action.oldPos.y;
+        action.shape.height = action.oldPos.height;
+        action.shape.width = action.oldPos.width;
+        action.shape.rotation = action.oldPos.rotation;
+        action.shape.isSelected = false;
+        if (typeof action.shape.removeSelection === "function") action.shape.removeSelection();
+        action.shape.draw();
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            arrow.restoreAttachmentState(arrowData.oldAttachments);
+            arrowData.newPoints = {
+              startPoint: { ...arrow.startPoint },
+              endPoint: { ...arrow.endPoint }
+            };
+            arrowData.newAttachments = arrow.getAttachmentState();
+          });
+        }
+      }
+      redoStack.push(action);
+      return;
+    }
+    if (action.type === "optionsChange") {
+      if (action.shape.type === "text") {
+        const textElement = (action.shape.element || action.shape).querySelector("text");
+        if (textElement) {
+          if (action.oldOptions.color) textElement.setAttribute("fill", action.oldOptions.color);
+          if (action.oldOptions.font) textElement.setAttribute("font-family", action.oldOptions.font);
+          if (action.oldOptions.size) textElement.setAttribute("font-size", action.oldOptions.size);
+          if (action.oldOptions.align) textElement.setAttribute("text-anchor", action.oldOptions.align);
+          if (selectedElement === (action.shape.element || action.shape) && updateSelectionFeedback) {
+            setTimeout(updateSelectionFeedback, 0);
+          }
+        }
+      } else if (action.shape.shapeName === "arrow") {
+        action.shape.options = { ...action.oldOptions };
+        action.shape.arrowOutlineStyle = action.oldOptions.arrowOutlineStyle;
+        action.shape.arrowHeadStyle = action.oldOptions.arrowHeadStyle;
+        action.shape.arrowCurved = action.oldOptions.arrowCurved;
+        action.shape.arrowCurveAmount = action.oldOptions.arrowCurveAmount;
+        action.shape.draw();
+      } else {
+        action.shape.options = action.oldOptions;
+        action.shape.draw();
+      }
+      redoStack.push(action);
+      return;
+    }
+  } finally {
+    refreshSelectionAfterAction();
+  }
+}
+function redo() {
+  if (redoStack.length === 0) return;
+  const action = redoStack.pop();
+  try {
+    if (action.type === "frameTransform") {
+      action.shape.x = action.newPos.x;
+      action.shape.y = action.newPos.y;
+      action.shape.width = action.newPos.width;
+      action.shape.height = action.newPos.height;
+      action.shape.rotation = action.newPos.rotation;
+      action.shape.frameName = action.newPos.frameName;
+      action.containedShapes.forEach((shapeData) => {
+        const shape = shapeData.shape;
+        shape.x = shapeData.newState.x;
+        shape.y = shapeData.newState.y;
+        shape.width = shapeData.newState.width;
+        shape.height = shapeData.newState.height;
+        shape.rotation = shapeData.newState.rotation;
+        if (typeof shape.draw === "function") {
+          shape.draw();
+        }
+      });
+      action.shape.isSelected = false;
+      if (typeof action.shape.removeSelection === "function") action.shape.removeSelection();
+      action.shape.draw();
+      action.shape.updateClipPath();
+      undoStack.push(action);
+      return;
+    }
+    if (action.type === "frameAttachment") {
+      if (action.action === "attach") {
+        if (action.oldFrame) {
+          const oldFrameIndex = action.oldFrame.containedShapes.indexOf(action.shape);
+          if (oldFrameIndex > -1) {
+            action.oldFrame.containedShapes.splice(oldFrameIndex, 1);
+            if (action.shape.group && action.shape.group.parentNode === action.oldFrame.clipGroup) {
+              action.oldFrame.clipGroup.removeChild(action.shape.group);
+              svg.appendChild(action.shape.group);
+            }
+          }
+        }
+        if (!action.frame.containedShapes.includes(action.shape)) {
+          action.frame.containedShapes.push(action.shape);
+          action.shape.parentFrame = action.frame;
+          if (action.shape.group && action.shape.group.parentNode === svg) {
+            svg.removeChild(action.shape.group);
+            action.frame.clipGroup.appendChild(action.shape.group);
+          }
+        }
+      } else if (action.action === "detach") {
+        const frameIndex = action.frame.containedShapes.indexOf(action.shape);
+        if (frameIndex > -1) {
+          action.frame.containedShapes.splice(frameIndex, 1);
+          action.shape.parentFrame = null;
+          if (action.shape.group && action.shape.group.parentNode === action.frame.clipGroup) {
+            action.frame.clipGroup.removeChild(action.shape.group);
+            svg.appendChild(action.shape.group);
+          }
+        }
+      }
+      if (typeof action.shape.draw === "function") {
+        action.shape.draw();
+      }
+      undoStack.push(action);
+      return;
+    }
+    if (action.type === "create" && action.shape.type === "modeConvert") {
+      const newShape = action.shape.newShape;
+      const newElement = action.shape.newElement;
+      const oldShape = action.shape.oldShape;
+      const oldElement = action.shape.oldElement;
+      if (oldElement && oldElement.parentNode) {
+        oldElement.parentNode.removeChild(oldElement);
+      }
+      const oldIdx = shapes.indexOf(oldShape);
+      if (oldIdx !== -1) shapes.splice(oldIdx, 1);
+      if (svg && newElement) {
+        svg.appendChild(newElement);
+      }
+      if (newShape) {
+        shapes.push(newShape);
+      }
+      undoStack.push(action);
+      return;
+    }
+    if (action.type === "create") {
+      if (action.shape.type === "text") {
+        if (svg) {
+          svg.appendChild(action.shape.element || action.shape);
+          shapes.push(action.shape.element || action.shape);
+        }
+      } else if (action.shape.type === "image") {
+        action.shape.restore();
+      } else if (action.shape.type === "icon") {
+        if (svg && action.shape.group) {
+          svg.appendChild(action.shape.group);
+        }
+        if (shapes.indexOf(action.shape) === -1) {
+          shapes.push(action.shape);
+        }
+      } else {
+        shapes.push(action.shape);
+        if (svg) {
+          svg.appendChild(action.shape.group);
+        }
+      }
+      undoStack.push(action);
+      return;
+    }
+    if (action.type === "delete") {
+      if (action.shape.type === "text") {
+        if ((action.shape.element || action.shape).parentNode) {
+          (action.shape.element || action.shape).parentNode.removeChild(action.shape.element || action.shape);
+        }
+        const idx = shapes.indexOf(action.shape.element || action.shape);
+        if (idx !== -1) shapes.splice(idx, 1);
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            if (arrow.attachedToStart && arrow.attachedToStart.shape === (action.shape.element || action.shape)) {
+              arrow.detachFromShape(true);
+            }
+            if (arrow.attachedToEnd && arrow.attachedToEnd.shape === (action.shape.element || action.shape)) {
+              arrow.detachFromShape(false);
+            }
+            arrow.draw();
+          });
+        }
+      } else if (action.shape.type === "image") {
+        action.shape.remove();
+      } else {
+        const idx = shapes.indexOf(action.shape);
+        if (idx !== -1) shapes.splice(idx, 1);
+        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);
+          }
+          if (action.shape.shapeName === "frame" && typeof action.shape.destroy === "function") {
+            action.shape.destroy();
+          }
+        }
+      }
+      undoStack.push(action);
+      return;
+    }
+    if (action.type === "transform") {
+      if (action.frameAttachment) {
+        if (action.frameAttachment.oldFrame) {
+          const oldFrameIndex = action.frameAttachment.oldFrame.containedShapes.indexOf(action.shape);
+          if (oldFrameIndex > -1) {
+            action.frameAttachment.oldFrame.containedShapes.splice(oldFrameIndex, 1);
+            if (action.shape.group && action.shape.group.parentNode === action.frameAttachment.oldFrame.clipGroup) {
+              action.frameAttachment.oldFrame.clipGroup.removeChild(action.shape.group);
+              svg.appendChild(action.shape.group);
+            }
+          }
+        }
+        if (action.frameAttachment.newFrame) {
+          if (!action.frameAttachment.newFrame.containedShapes.includes(action.shape)) {
+            action.frameAttachment.newFrame.containedShapes.push(action.shape);
+            action.shape.parentFrame = action.frameAttachment.newFrame;
+            if (action.shape.group && action.shape.group.parentNode === svg) {
+              svg.removeChild(action.shape.group);
+              action.frameAttachment.newFrame.clipGroup.appendChild(action.shape.group);
+            }
+          }
+        } else {
+          action.shape.parentFrame = null;
+        }
+      }
+      if (action.shape.type === "text") {
+        const textElement = (action.shape.element || action.shape).querySelector("text");
+        if (textElement && action.newPos.fontSize !== void 0) {
+          textElement.setAttribute("font-size", action.newPos.fontSize + "px");
+        }
+        const centerX = textElement ? textElement.getBBox().x + textElement.getBBox().width / 2 : 0;
+        const centerY = textElement ? textElement.getBBox().y + textElement.getBBox().height / 2 : 0;
+        (action.shape.element || action.shape).setAttribute(
+          "transform",
+          `translate(${action.newPos.x}, ${action.newPos.y}) rotate(${action.newPos.rotation}, ${centerX}, ${centerY})`
+        );
+        (action.shape.element || action.shape).setAttribute("data-x", action.newPos.x);
+        (action.shape.element || action.shape).setAttribute("data-y", action.newPos.y);
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            if (arrowData.newAttachments) {
+              arrow.restoreAttachmentState(arrowData.newAttachments);
+            } else {
+              arrow.updateAttachments();
+            }
+          });
+        }
+        if (selectedElement === (action.shape.element || action.shape) && updateSelectionFeedback) {
+          setTimeout(updateSelectionFeedback, 0);
+        }
+      } else if (action.shape.type === "image") {
+        action.shape.restore(action.newPos);
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            if (arrowData.newAttachments) {
+              arrow.restoreAttachmentState(arrowData.newAttachments);
+            } else {
+              arrow.updateAttachments();
+            }
+          });
+        }
+      } else if (action.shape.shapeName === "circle") {
+        action.shape.x = action.newPos.x;
+        action.shape.y = action.newPos.y;
+        action.shape.rx = action.newPos.rx;
+        action.shape.ry = action.newPos.ry;
+        action.shape.rotation = action.newPos.rotation;
+        action.shape.isSelected = false;
+        if (typeof action.shape.removeSelection === "function") action.shape.removeSelection();
+        action.shape.draw();
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            if (arrowData.newAttachments) {
+              arrow.restoreAttachmentState(arrowData.newAttachments);
+            } else {
+              arrow.updateAttachments();
+            }
+          });
+        }
+      } else if (action.shape.shapeName === "line") {
+        action.shape.startPoint = { x: action.newPos.startPoint.x, y: action.newPos.startPoint.y };
+        action.shape.endPoint = { x: action.newPos.endPoint.x, y: action.newPos.endPoint.y };
+        action.shape.isCurved = action.newPos.isCurved || false;
+        if (action.newPos.controlPoint) {
+          action.shape.controlPoint = { x: action.newPos.controlPoint.x, y: action.newPos.controlPoint.y };
+        } else {
+          action.shape.controlPoint = null;
+        }
+        if (action.frameAttachment) {
+          if (action.frameAttachment.oldFrame) {
+            const oldFrameIndex = action.frameAttachment.oldFrame.containedShapes.indexOf(action.shape);
+            if (oldFrameIndex > -1) {
+              action.frameAttachment.oldFrame.containedShapes.splice(oldFrameIndex, 1);
+              if (action.shape.group && action.shape.group.parentNode === action.frameAttachment.oldFrame.clipGroup) {
+                action.frameAttachment.oldFrame.clipGroup.removeChild(action.shape.group);
+                svg.appendChild(action.shape.group);
+              }
+            }
+          }
+          if (action.frameAttachment.newFrame) {
+            if (!action.frameAttachment.newFrame.containedShapes.includes(action.shape)) {
+              action.frameAttachment.newFrame.containedShapes.push(action.shape);
+              action.shape.parentFrame = action.frameAttachment.newFrame;
+              if (action.shape.group && action.shape.group.parentNode === svg) {
+                svg.removeChild(action.shape.group);
+                action.frameAttachment.newFrame.clipGroup.appendChild(action.shape.group);
+              }
+            }
+          } else {
+            action.shape.parentFrame = null;
+          }
+        }
+        action.shape.isSelected = false;
+        if (typeof action.shape.removeSelection === "function") action.shape.removeSelection();
+        action.shape.draw();
+      } else if (action.shape.shapeName === "arrow") {
+        action.shape.startPoint = { x: action.newPos.startPoint.x, y: action.newPos.startPoint.y };
+        action.shape.endPoint = { x: action.newPos.endPoint.x, y: action.newPos.endPoint.y };
+        action.shape.controlPoint1 = action.newPos.controlPoint1 ? { x: action.newPos.controlPoint1.x, y: action.newPos.controlPoint1.y } : null;
+        action.shape.controlPoint2 = action.newPos.controlPoint2 ? { x: action.newPos.controlPoint2.x, y: action.newPos.controlPoint2.y } : null;
+        if (action.newPos.attachments) {
+          action.shape.restoreAttachmentState(action.newPos.attachments);
+        } else {
+          action.shape.attachedToStart = null;
+          action.shape.attachedToEnd = null;
+        }
+        action.shape.isSelected = false;
+        action.shape.draw();
+      } else if (action.shape.type === "icon") {
+        action.shape.restore(action.newPos);
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            if (arrowData.newAttachments) {
+              arrow.restoreAttachmentState(arrowData.newAttachments);
+            } else {
+              arrow.updateAttachments();
+            }
+          });
+        }
+      } else if (action.shape.shapeName === "freehandStroke") {
+        action.shape.points = JSON.parse(JSON.stringify(action.newPos.points));
+        action.shape.rotation = action.newPos.rotation;
+        action.shape.isSelected = false;
+        if (typeof action.shape.removeSelection === "function") action.shape.removeSelection();
+        action.shape.draw();
+      } else if (action.shape.shapeName === "rectangle") {
+        action.shape.x = action.newPos.x;
+        action.shape.y = action.newPos.y;
+        action.shape.height = action.newPos.height;
+        action.shape.width = action.newPos.width;
+        action.shape.rotation = action.newPos.rotation;
+        action.shape.isSelected = false;
+        if (typeof action.shape.removeSelection === "function") action.shape.removeSelection();
+        action.shape.draw();
+        if (action.affectedArrows) {
+          action.affectedArrows.forEach((arrowData) => {
+            const arrow = arrowData.arrow;
+            if (arrowData.newAttachments) {
+              arrow.restoreAttachmentState(arrowData.newAttachments);
+            } else {
+              arrow.updateAttachments();
+            }
+          });
+        }
+      }
+      undoStack.push(action);
+      return;
+    }
+    if (action.type === "optionsChange") {
+      if (action.shape.type === "text") {
+        const textElement = (action.shape.element || action.shape).querySelector("text");
+        if (textElement) {
+          if (action.newOptions.color) textElement.setAttribute("fill", action.newOptions.color);
+          if (action.newOptions.font) textElement.setAttribute("font-family", action.newOptions.font);
+          if (action.newOptions.size) textElement.setAttribute("font-size", action.newOptions.size);
+          if (action.newOptions.align) textElement.setAttribute("text-anchor", action.newOptions.align);
+          if (selectedElement === (action.shape.element || action.shape) && updateSelectionFeedback) {
+            setTimeout(updateSelectionFeedback, 0);
+          }
+        }
+      } else if (action.shape.shapeName === "arrow") {
+        const currentOptions = {
+          ...action.shape.options,
+          arrowOutlineStyle: action.shape.arrowOutlineStyle,
+          arrowHeadStyle: action.shape.arrowHeadStyle,
+          arrowCurved: action.shape.arrowCurved,
+          arrowCurveAmount: action.shape.arrowCurveAmount
+        };
+        action.newOptions = currentOptions;
+        action.shape.draw();
+      } else {
+        action.newOptions = action.shape.options;
+        action.shape.draw();
+      }
+      undoStack.push(action);
+      return;
+    }
+  } finally {
+    refreshSelectionAfterAction();
+  }
+}
+document.addEventListener("keydown", (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.key === "z") {
+    e.preventDefault();
+    undo();
+  }
+  if ((e.ctrlKey || e.metaKey) && (e.key === "y" || e.shiftKey && e.key === "z")) {
+    e.preventDefault();
+    redo();
+  }
+});
+document.getElementById("undo")?.addEventListener("click", undo);
+document.getElementById("redo")?.addEventListener("click", redo);
+window.pushCreateAction = pushCreateAction;
+window.pushDeleteAction = pushDeleteAction;
+window.pushDeleteActionWithAttachments = pushDeleteActionWithAttachments;
+window.pushTransformAction = pushTransformAction;
+window.pushOptionsChangeAction = pushOptionsChangeAction;
+window.pushCreateActionWithAttachments = pushCreateActionWithAttachments;
+window.undo = undo;
+window.redo = redo;
+
+export {
+  setTextReferences,
+  getCurrentSelectedElement,
+  updateSelectedElement,
+  pushCreateAction,
+  pushDeleteAction,
+  pushDeleteActionWithAttachments,
+  pushFrameAttachmentAction,
+  pushCreateActionWithAttachments,
+  pushTransformAction,
+  pushOptionsChangeAction,
+  undo,
+  redo
+};
+//# sourceMappingURL=chunk-L5OARZJ7.js.map