@elixpo/lixsketch 5.4.7 → 5.5.1

package/dist/react/chunk-BZE4CEBG.js

@@ -0,0 +1,747 @@
+"use client";
+import {
+  pushCreateAction,
+  pushDeleteAction,
+  pushFrameAttachmentAction,
+  pushOptionsChangeAction,
+  pushTransformAction
+} from "./chunk-L5OARZJ7.js";
+
+// src/core/SnapGuides.js
+var SNAP_THRESHOLD = 6;
+var BREAK_THRESHOLD = 12;
+var GUIDE_COLOR = "#ff4444";
+var GUIDE_WIDTH = 1;
+var guideLayer = null;
+var activeSnapX = null;
+var activeSnapY = null;
+function ensureGuideLayer() {
+  if (guideLayer && guideLayer.parentNode) return guideLayer;
+  const svg2 = window.svg;
+  if (!svg2) return null;
+  guideLayer = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  guideLayer.setAttribute("id", "snap-guides");
+  guideLayer.setAttribute("pointer-events", "none");
+  svg2.appendChild(guideLayer);
+  return guideLayer;
+}
+function clearGuides() {
+  if (guideLayer) {
+    while (guideLayer.firstChild) guideLayer.removeChild(guideLayer.firstChild);
+  }
+}
+function drawGuide(x1, y1, x2, y2) {
+  const layer = ensureGuideLayer();
+  if (!layer) return;
+  const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+  line.setAttribute("x1", x1);
+  line.setAttribute("y1", y1);
+  line.setAttribute("x2", x2);
+  line.setAttribute("y2", y2);
+  line.setAttribute("stroke", GUIDE_COLOR);
+  line.setAttribute("stroke-width", GUIDE_WIDTH);
+  line.setAttribute("stroke-dasharray", "4 2");
+  layer.appendChild(line);
+}
+function getShapeBounds(shape) {
+  if (!shape) return null;
+  const name = shape.shapeName;
+  if (name === "rectangle" || name === "frame") {
+    return {
+      left: shape.x,
+      top: shape.y,
+      right: shape.x + shape.width,
+      bottom: shape.y + shape.height,
+      cx: shape.x + shape.width / 2,
+      cy: shape.y + shape.height / 2
+    };
+  }
+  if (name === "circle") {
+    return {
+      left: shape.x - shape.rx,
+      top: shape.y - shape.ry,
+      right: shape.x + shape.rx,
+      bottom: shape.y + shape.ry,
+      cx: shape.x,
+      cy: shape.y
+    };
+  }
+  if (name === "text" || name === "code" || name === "image" || name === "icon") {
+    const el = shape.group || shape.element;
+    if (!el) return null;
+    const bbox = el.getBBox();
+    return {
+      left: bbox.x,
+      top: bbox.y,
+      right: bbox.x + bbox.width,
+      bottom: bbox.y + bbox.height,
+      cx: bbox.x + bbox.width / 2,
+      cy: bbox.y + bbox.height / 2
+    };
+  }
+  if (name === "line" || name === "arrow") {
+    const sx = shape.startPoint?.x ?? 0;
+    const sy = shape.startPoint?.y ?? 0;
+    const ex = shape.endPoint?.x ?? 0;
+    const ey = shape.endPoint?.y ?? 0;
+    return {
+      left: Math.min(sx, ex),
+      top: Math.min(sy, ey),
+      right: Math.max(sx, ex),
+      bottom: Math.max(sy, ey),
+      cx: (sx + ex) / 2,
+      cy: (sy + ey) / 2
+    };
+  }
+  return null;
+}
+function getCanvasGuides() {
+  const vb = window.currentViewBox;
+  if (!vb) return [];
+  return [
+    {
+      // Viewport center
+      left: vb.x + vb.width / 2,
+      top: vb.y + vb.height / 2,
+      right: vb.x + vb.width / 2,
+      bottom: vb.y + vb.height / 2,
+      cx: vb.x + vb.width / 2,
+      cy: vb.y + vb.height / 2
+    },
+    {
+      // Viewport edges
+      left: vb.x,
+      top: vb.y,
+      right: vb.x + vb.width,
+      bottom: vb.y + vb.height,
+      cx: vb.x + vb.width / 2,
+      cy: vb.y + vb.height / 2
+    }
+  ];
+}
+function calculateSnap(movingShape, shiftKey = false, mouseX, mouseY) {
+  clearGuides();
+  const shapes2 = window.shapes;
+  if (!shapes2 || !movingShape) return { dx: 0, dy: 0 };
+  const moving = getShapeBounds(movingShape);
+  if (!moving) return { dx: 0, dy: 0 };
+  if (activeSnapX && mouseX !== void 0) {
+    if (Math.abs(mouseX - activeSnapX.mouseAtSnap) > BREAK_THRESHOLD) {
+      activeSnapX = null;
+    }
+  }
+  if (activeSnapY && mouseY !== void 0) {
+    if (Math.abs(mouseY - activeSnapY.mouseAtSnap) > BREAK_THRESHOLD) {
+      activeSnapY = null;
+    }
+  }
+  let snapX = null;
+  let snapY = null;
+  let bestDistX = SNAP_THRESHOLD;
+  let bestDistY = SNAP_THRESHOLD;
+  const movingXs = [moving.left, moving.cx, moving.right];
+  const movingYs = [moving.top, moving.cy, moving.bottom];
+  const vb = window.currentViewBox;
+  const extendY1 = vb ? vb.y : 0;
+  const extendY2 = vb ? vb.y + vb.height : 1e4;
+  const extendX1 = vb ? vb.x : 0;
+  const extendX2 = vb ? vb.x + vb.width : 1e4;
+  let otherShapeCount = 0;
+  for (const shape of shapes2) {
+    if (shape === movingShape) continue;
+    if (window.multiSelection && window.multiSelection.selectedShapes?.has(shape)) continue;
+    const other = getShapeBounds(shape);
+    if (!other) continue;
+    otherShapeCount++;
+    const otherXs = [other.left, other.cx, other.right];
+    const otherYs = [other.top, other.cy, other.bottom];
+    for (const mx of movingXs) {
+      for (const ox of otherXs) {
+        const dist = Math.abs(mx - ox);
+        if (dist < bestDistX) {
+          bestDistX = dist;
+          snapX = { offset: ox - mx, x: ox, extendY1, extendY2 };
+        }
+      }
+    }
+    for (const my of movingYs) {
+      for (const oy of otherYs) {
+        const dist = Math.abs(my - oy);
+        if (dist < bestDistY) {
+          bestDistY = dist;
+          snapY = { offset: oy - my, y: oy, extendX1, extendX2 };
+        }
+      }
+    }
+  }
+  if (shiftKey || otherShapeCount === 0 || !snapX && !snapY) {
+    const canvasGuides = getCanvasGuides();
+    for (const guide of canvasGuides) {
+      const guideXs = [guide.left, guide.cx, guide.right];
+      const guideYs = [guide.top, guide.cy, guide.bottom];
+      for (const mx of movingXs) {
+        for (const gx of guideXs) {
+          const dist = Math.abs(mx - gx);
+          if (dist < bestDistX) {
+            bestDistX = dist;
+            snapX = { offset: gx - mx, x: gx, extendY1, extendY2 };
+          }
+        }
+      }
+      for (const my of movingYs) {
+        for (const gy of guideYs) {
+          const dist = Math.abs(my - gy);
+          if (dist < bestDistY) {
+            bestDistY = dist;
+            snapY = { offset: gy - my, y: gy, extendX1, extendX2 };
+          }
+        }
+      }
+    }
+  }
+  let dx = 0;
+  let dy = 0;
+  if (snapX && !activeSnapX) {
+    dx = snapX.offset;
+    drawGuide(snapX.x, snapX.extendY1, snapX.x, snapX.extendY2);
+    if (mouseX !== void 0) {
+      activeSnapX = { guideValue: snapX.x, mouseAtSnap: mouseX };
+    }
+  } else if (activeSnapX) {
+    drawGuide(activeSnapX.guideValue, extendY1, activeSnapX.guideValue, extendY2);
+  }
+  if (snapY && !activeSnapY) {
+    dy = snapY.offset;
+    drawGuide(snapY.extendX1, snapY.y, snapY.extendX2, snapY.y);
+    if (mouseY !== void 0) {
+      activeSnapY = { guideValue: snapY.y, mouseAtSnap: mouseY };
+    }
+  } else if (activeSnapY) {
+    drawGuide(extendX1, activeSnapY.guideValue, extendX2, activeSnapY.guideValue);
+  }
+  return { dx, dy };
+}
+function clearSnapGuides() {
+  clearGuides();
+  activeSnapX = null;
+  activeSnapY = null;
+}
+
+// src/tools/arrowTool.js
+function getThemeStroke() {
+  if (typeof document === "undefined") return "#fff";
+  return document.body && document.body.classList.contains("theme-dark") ? "#fff" : "#1a1a2e";
+}
+var currentArrow = null;
+var isResizing = false;
+var isDragging = false;
+var activeAnchor = null;
+var isDrawingArrow = false;
+var arrowStrokeColor = null;
+var arrowStrokeThickness = 2;
+var arrowOutlineStyle = "solid";
+var arrowCurved = "straight";
+var arrowCurveAmount = 20;
+var arrowHeadStyle = "default";
+var startX;
+var startY;
+var dragOldPosArrow = null;
+var draggedShapeInitialFrameArrow = null;
+var hoveredFrameArrow = null;
+var arrowStrokeColorOptions = document.querySelectorAll(".arrowStrokeSpan");
+var arrowStrokeThicknessValue = document.querySelectorAll(".arrowStrokeThickSpan");
+var arrowOutlineStyleValue = document.querySelectorAll(".arrowOutlineStyle");
+var arrowTypeStyleValue = document.querySelectorAll(".arrowTypeStyle");
+var arrowHeadStyleValue = document.querySelectorAll(".arrowHeadStyleSpan");
+var arrowCurveAmountOptions = document.querySelectorAll(".arrowCurveSpan");
+function getSVGCoordsFromMouse(e) {
+  const viewBox = svg.viewBox.baseVal;
+  const rect = svg.getBoundingClientRect();
+  const mouseX = e.clientX - rect.left;
+  const mouseY = e.clientY - rect.top;
+  const svgX = viewBox.x + mouseX / rect.width * viewBox.width;
+  const svgY = viewBox.y + mouseY / rect.height * viewBox.height;
+  return { x: svgX, y: svgY };
+}
+function deleteCurrentShape() {
+  if (currentShape && currentShape.shapeName === "arrow") {
+    const idx = shapes.indexOf(currentShape);
+    if (idx !== -1) shapes.splice(idx, 1);
+    if (currentShape.group.parentNode) {
+      currentShape.group.parentNode.removeChild(currentShape.group);
+    }
+    pushDeleteAction(currentShape);
+    currentShape = null;
+    disableAllSideBars();
+  }
+}
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Delete" && currentShape && currentShape.shapeName === "arrow") {
+    deleteCurrentShape();
+  }
+});
+var handleMouseDown = (e) => {
+  if (!isArrowToolActive && !isSelectionToolActive) return;
+  const { x, y } = getSVGCoordsFromMouse(e);
+  if (isArrowToolActive) {
+    isDrawingArrow = true;
+    currentArrow = new Arrow({ x, y }, { x, y }, {
+      stroke: arrowStrokeColor ?? getThemeStroke(),
+      strokeWidth: arrowStrokeThickness,
+      arrowOutlineStyle,
+      arrowHeadStyle,
+      arrowCurved,
+      arrowCurveAmount
+    });
+    shapes.push(currentArrow);
+    currentShape = currentArrow;
+  } else if (isSelectionToolActive) {
+    let clickedOnShape = false;
+    let clickedOnAnchor = false;
+    if (currentShape && currentShape.shapeName === "arrow" && currentShape.isSelected) {
+      const anchorInfo = currentShape.isNearAnchor(x, y);
+      if (anchorInfo && anchorInfo.type === "anchor") {
+        clickedOnAnchor = true;
+        clickedOnShape = true;
+      }
+      if (currentShape.contains(x, y)) {
+        isDragging = true;
+        dragOldPosArrow = {
+          startPoint: { x: currentShape.startPoint.x, y: currentShape.startPoint.y },
+          endPoint: { x: currentShape.endPoint.x, y: currentShape.endPoint.y },
+          controlPoint1: currentShape.controlPoint1 ? { x: currentShape.controlPoint1.x, y: currentShape.controlPoint1.y } : null,
+          controlPoint2: currentShape.controlPoint2 ? { x: currentShape.controlPoint2.x, y: currentShape.controlPoint2.y } : null,
+          parentFrame: currentShape.parentFrame
+          // Add this line
+        };
+        draggedShapeInitialFrameArrow = currentShape.parentFrame || null;
+        if (currentShape.parentFrame) {
+          currentShape.parentFrame.temporarilyRemoveFromFrame(currentShape);
+        }
+        startX = x;
+        startY = y;
+        clickedOnShape = true;
+      }
+    }
+    if (!clickedOnShape) {
+      let shapeToSelect = null;
+      for (let i = shapes.length - 1; i >= 0; i--) {
+        const shape = shapes[i];
+        if (shape instanceof Arrow && shape.contains(x, y)) {
+          shapeToSelect = shape;
+          break;
+        }
+      }
+      if (currentShape && currentShape !== shapeToSelect) {
+        currentShape.removeSelection();
+        currentShape = null;
+      }
+      if (shapeToSelect) {
+        currentShape = shapeToSelect;
+        currentShape.selectArrow();
+        const anchorInfo = currentShape.isNearAnchor(x, y);
+        if (anchorInfo && anchorInfo.type === "anchor") {
+          clickedOnAnchor = true;
+        } else {
+          isDragging = true;
+          dragOldPosArrow = {
+            startPoint: { x: currentShape.startPoint.x, y: currentShape.startPoint.y },
+            endPoint: { x: currentShape.endPoint.x, y: currentShape.endPoint.y },
+            controlPoint1: currentShape.controlPoint1 ? { x: currentShape.controlPoint1.x, y: currentShape.controlPoint1.y } : null,
+            controlPoint2: currentShape.controlPoint2 ? { x: currentShape.controlPoint2.x, y: currentShape.controlPoint2.y } : null
+          };
+          startX = x;
+          startY = y;
+        }
+        clickedOnShape = true;
+      }
+    }
+    if (!clickedOnShape && !clickedOnAnchor && currentShape) {
+      currentShape.removeSelection();
+      currentShape = null;
+    }
+  }
+};
+var handleMouseMove = (e) => {
+  const { x, y } = getSVGCoordsFromMouse(e);
+  if (isDrawingArrow && currentArrow) {
+    let endX = x, endY = y;
+    if (e.shiftKey) {
+      const dx = x - currentArrow.startPoint.x;
+      const dy = y - currentArrow.startPoint.y;
+      const angle = Math.atan2(dy, dx);
+      const snapAngle = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4);
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      endX = currentArrow.startPoint.x + dist * Math.cos(snapAngle);
+      endY = currentArrow.startPoint.y + dist * Math.sin(snapAngle);
+    }
+    currentArrow.endPoint = { x: endX, y: endY };
+    const nearbyShape = Arrow.findNearbyShape({ x: endX, y: endY });
+    if (nearbyShape) {
+      currentArrow.endPoint = nearbyShape.attachment.point;
+      svg.style.cursor = "crosshair";
+      const existingPreview = svg.querySelector(".attachment-preview");
+      if (existingPreview) existingPreview.remove();
+      const preview = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+      preview.setAttribute("cx", nearbyShape.attachment.point.x);
+      preview.setAttribute("cy", nearbyShape.attachment.point.y);
+      preview.setAttribute("r", 6);
+      preview.setAttribute("fill", "none");
+      preview.setAttribute("stroke", "#5B57D1");
+      preview.setAttribute("stroke-width", 2);
+      preview.setAttribute("class", "attachment-preview");
+      preview.setAttribute("opacity", "0.7");
+      svg.appendChild(preview);
+    } else {
+      const existingPreview = svg.querySelector(".attachment-preview");
+      if (existingPreview) existingPreview.remove();
+    }
+    shapes.forEach((frame) => {
+      if (frame.shapeName === "frame") {
+        if (frame.isShapeInFrame(currentArrow)) {
+          frame.highlightFrame();
+          hoveredFrameArrow = frame;
+        } else if (hoveredFrameArrow === frame) {
+          frame.removeHighlight();
+          hoveredFrameArrow = null;
+        }
+      }
+    });
+    if (currentArrow.arrowCurved) {
+      currentArrow.initializeCurveControlPoints();
+    }
+    currentArrow.draw();
+  } else if (isDragging && currentShape && currentShape.isSelected) {
+    const dx = x - startX;
+    const dy = y - startY;
+    currentShape.move(dx, dy);
+    startX = x;
+    startY = y;
+    let newHover = null;
+    for (const f of shapes) {
+      if (f.shapeName !== "frame") continue;
+      if (f === currentShape) continue;
+      if (typeof f.isShapeInFrame === "function" && f.isShapeInFrame(currentShape)) {
+        newHover = f;
+        break;
+      }
+    }
+    if (hoveredFrameArrow && hoveredFrameArrow !== newHover && typeof hoveredFrameArrow.removeHighlight === "function") {
+      hoveredFrameArrow.removeHighlight();
+    }
+    if (newHover && newHover !== hoveredFrameArrow && typeof newHover.highlightFrame === "function") {
+      newHover.highlightFrame();
+    }
+    hoveredFrameArrow = newHover;
+    if (window.__sketchStoreApi && window.__sketchStoreApi.getState().snapToObjects) {
+      const snap = calculateSnap(currentShape, e.shiftKey, e.clientX, e.clientY);
+      if (snap.dx || snap.dy) {
+        currentShape.move(snap.dx, snap.dy);
+      }
+    } else {
+      clearSnapGuides();
+    }
+    svg.style.cursor = "grabbing";
+  } else if (isSelectionToolActive && currentShape && currentShape.isSelected) {
+    const anchorInfo = currentShape.isNearAnchor(x, y);
+    if (anchorInfo) {
+      svg.style.cursor = "grab";
+    } else if (currentShape.contains(x, y)) {
+      svg.style.cursor = "move";
+    } else {
+      svg.style.cursor = "default";
+    }
+  } else if (isSelectionToolActive) {
+    let hoveringOverArrow = false;
+    for (let i = shapes.length - 1; i >= 0; i--) {
+      const shape = shapes[i];
+      if (shape instanceof Arrow && shape.contains(x, y)) {
+        hoveringOverArrow = true;
+        break;
+      }
+    }
+    svg.style.cursor = hoveringOverArrow ? "pointer" : "default";
+  }
+};
+var handleMouseUp = (e) => {
+  if (isDrawingArrow && currentArrow) {
+    const existingPreview = svg.querySelector(".attachment-preview");
+    if (existingPreview) existingPreview.remove();
+    const dx = currentArrow.endPoint.x - currentArrow.startPoint.x;
+    const dy = currentArrow.endPoint.y - currentArrow.startPoint.y;
+    const lengthSq = dx * dx + dy * dy;
+    if (lengthSq < (5 / currentZoom) ** 2) {
+      shapes.pop();
+      if (currentArrow.group.parentNode) {
+        currentArrow.group.parentNode.removeChild(currentArrow.group);
+      }
+      currentArrow = null;
+      currentShape = null;
+    } else {
+      const startAttachment = Arrow.findNearbyShape(currentArrow.startPoint);
+      const endAttachment = Arrow.findNearbyShape(currentArrow.endPoint);
+      if (startAttachment) {
+        currentArrow.attachToShape(true, startAttachment.shape, startAttachment.attachment);
+      }
+      if (endAttachment) {
+        currentArrow.attachToShape(false, endAttachment.shape, endAttachment.attachment);
+      }
+      const finalFrame = hoveredFrameArrow;
+      if (finalFrame) {
+        finalFrame.addShapeToFrame(currentArrow);
+        pushFrameAttachmentAction(finalFrame, currentArrow, "attach", null);
+      }
+      pushCreateAction(currentArrow);
+      const drawnArrow = currentArrow;
+      if (window.__sketchStoreApi) window.__sketchStoreApi.setActiveTool("select", { afterDraw: true });
+      currentShape = drawnArrow;
+      drawnArrow.selectArrow();
+    }
+    if (hoveredFrameArrow) {
+      hoveredFrameArrow.removeHighlight();
+      hoveredFrameArrow = null;
+    }
+    currentArrow = null;
+  }
+  if (isDragging && dragOldPosArrow && currentShape) {
+    const newPos = {
+      startPoint: { x: currentShape.startPoint.x, y: currentShape.startPoint.y },
+      endPoint: { x: currentShape.endPoint.x, y: currentShape.endPoint.y },
+      parentFrame: hoveredFrameArrow || null
+    };
+    const oldPos = {
+      ...dragOldPosArrow,
+      parentFrame: draggedShapeInitialFrameArrow
+      // Add this line
+    };
+    const stateChanged = dragOldPosArrow.startPoint.x !== newPos.startPoint.x || dragOldPosArrow.startPoint.y !== newPos.startPoint.y || dragOldPosArrow.endPoint.x !== newPos.endPoint.x || dragOldPosArrow.endPoint.y !== newPos.endPoint.y;
+    const frameChanged = oldPos.parentFrame !== newPos.parentFrame;
+    if (stateChanged || frameChanged) {
+      pushTransformAction(currentShape, oldPos, newPos);
+    }
+    if (isDragging) {
+      const finalFrame = hoveredFrameArrow;
+      if (draggedShapeInitialFrameArrow !== finalFrame) {
+        if (draggedShapeInitialFrameArrow) {
+          draggedShapeInitialFrameArrow.removeShapeFromFrame(currentShape);
+        }
+        if (finalFrame) {
+          finalFrame.addShapeToFrame(currentShape);
+        }
+        if (frameChanged) {
+          pushFrameAttachmentAction(
+            finalFrame || draggedShapeInitialFrameArrow,
+            currentShape,
+            finalFrame ? "attach" : "detach",
+            draggedShapeInitialFrameArrow
+          );
+        }
+      } else if (draggedShapeInitialFrameArrow) {
+        draggedShapeInitialFrameArrow.restoreToFrame(currentShape);
+      }
+    }
+    draggedShapeInitialFrameArrow = null;
+    dragOldPosArrow = null;
+  }
+  if (hoveredFrameArrow) {
+    hoveredFrameArrow.removeHighlight();
+    hoveredFrameArrow = null;
+  }
+  clearSnapGuides();
+  isDrawingArrow = false;
+  isResizing = false;
+  isDragging = false;
+  activeAnchor = null;
+  svg.style.cursor = "default";
+};
+svg.removeEventListener("pointerdown", handleMouseDown);
+svg.removeEventListener("pointermove", handleMouseMove);
+svg.removeEventListener("pointerup", handleMouseUp);
+var updateSelectedArrowStyle = (styleChanges) => {
+  if (currentShape instanceof Arrow && currentShape.isSelected) {
+    const oldOptions = {
+      ...currentShape.options,
+      arrowOutlineStyle: currentShape.arrowOutlineStyle,
+      arrowHeadStyle: currentShape.arrowHeadStyle,
+      arrowCurved: currentShape.arrowCurved,
+      arrowCurveAmount: currentShape.arrowCurveAmount
+    };
+    currentShape.updateStyle(styleChanges);
+    pushOptionsChangeAction(currentShape, oldOptions);
+  } else {
+    if (styleChanges.stroke !== void 0) arrowStrokeColor = styleChanges.stroke;
+    if (styleChanges.strokeWidth !== void 0) arrowStrokeThickness = styleChanges.strokeWidth;
+    if (styleChanges.arrowOutlineStyle !== void 0) arrowOutlineStyle = styleChanges.arrowOutlineStyle;
+    if (styleChanges.arrowHeadStyle !== void 0) arrowHeadStyle = styleChanges.arrowHeadStyle;
+    if (styleChanges.arrowCurved !== void 0) arrowCurved = styleChanges.arrowCurved;
+    if (styleChanges.arrowCurveAmount !== void 0) arrowCurveAmount = styleChanges.arrowCurveAmount;
+  }
+};
+arrowStrokeColorOptions.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    arrowStrokeColorOptions.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    const newColor = span.getAttribute("data-id");
+    updateSelectedArrowStyle({ stroke: newColor });
+  });
+});
+arrowStrokeThicknessValue.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    arrowStrokeThicknessValue.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    const newThickness = parseInt(span.getAttribute("data-id"));
+    updateSelectedArrowStyle({ strokeWidth: newThickness });
+  });
+});
+arrowOutlineStyleValue.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    arrowOutlineStyleValue.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    const newStyle = span.getAttribute("data-id");
+    updateSelectedArrowStyle({ arrowOutlineStyle: newStyle });
+  });
+});
+arrowTypeStyleValue.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    arrowTypeStyleValue.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    updateSelectedArrowStyle({ arrowCurved: span.getAttribute("data-id") });
+  });
+});
+arrowCurveAmountOptions.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    arrowCurveAmountOptions.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    updateSelectedArrowStyle({ arrowCurveAmount: parseInt(span.getAttribute("data-id")) });
+  });
+});
+arrowHeadStyleValue.forEach((span) => {
+  span.addEventListener("click", (event) => {
+    event.stopPropagation();
+    arrowHeadStyleValue.forEach((el) => el.classList.remove("selected"));
+    span.classList.add("selected");
+    const newHeadStyle = span.getAttribute("data-id");
+    updateSelectedArrowStyle({ arrowHeadStyle: newHeadStyle });
+  });
+});
+function detachSelectedArrow() {
+  if (currentShape instanceof Arrow && currentShape.isSelected) {
+    if (currentShape.attachedToStart || currentShape.attachedToEnd) {
+      const oldState = {
+        attachedToStart: currentShape.attachedToStart,
+        attachedToEnd: currentShape.attachedToEnd,
+        startPoint: { ...currentShape.startPoint },
+        endPoint: { ...currentShape.endPoint }
+      };
+      currentShape.detachFromShape(true);
+      currentShape.detachFromShape(false);
+      currentShape.draw();
+    }
+  }
+}
+function updateAttachedArrows(shape) {
+  if (!shape) return;
+  let targetShape = shape;
+  if (shape.nodeType) {
+    targetShape = shapes.find((s) => s.group === shape || s.element === shape) || shape;
+  }
+  shapes.forEach((arrowShape) => {
+    if (arrowShape instanceof Arrow) {
+      let needsUpdate = false;
+      if (arrowShape.attachedToStart && arrowShape.attachedToStart.shape === targetShape) {
+        needsUpdate = true;
+      }
+      if (arrowShape.attachedToEnd && arrowShape.attachedToEnd.shape === targetShape) {
+        needsUpdate = true;
+      }
+      if (needsUpdate) {
+        arrowShape.updateAttachments();
+      }
+    }
+  });
+}
+function cleanupAttachments(deletedShape) {
+  if (!deletedShape) return;
+  let targetShape = deletedShape;
+  if (deletedShape.nodeType) {
+    targetShape = shapes.find((s) => s.group === deletedShape || s.element === deletedShape) || deletedShape;
+  }
+  shapes.forEach((shape) => {
+    if (shape instanceof Arrow) {
+      let needsDraw = false;
+      if (shape.attachedToStart && shape.attachedToStart.shape === targetShape) {
+        shape.detachFromShape(true);
+        needsDraw = true;
+      }
+      if (shape.attachedToEnd && shape.attachedToEnd.shape === targetShape) {
+        shape.detachFromShape(false);
+        needsDraw = true;
+      }
+      if (needsDraw) {
+        shape.draw();
+      }
+    }
+  });
+}
+document.addEventListener("keydown", (e) => {
+  if (e.key.toLowerCase() === "d" && e.ctrlKey) {
+    e.preventDefault();
+    detachSelectedArrow();
+  }
+});
+window.arrowToolSettings = {
+  get strokeColor() {
+    return arrowStrokeColor;
+  },
+  set strokeColor(v) {
+    arrowStrokeColor = v;
+  },
+  get strokeWidth() {
+    return arrowStrokeThickness;
+  },
+  set strokeWidth(v) {
+    arrowStrokeThickness = v;
+  },
+  get outlineStyle() {
+    return arrowOutlineStyle;
+  },
+  set outlineStyle(v) {
+    arrowOutlineStyle = v;
+  },
+  get headStyle() {
+    return arrowHeadStyle;
+  },
+  set headStyle(v) {
+    arrowHeadStyle = v;
+  },
+  get arrowCurved() {
+    return arrowCurved;
+  },
+  set arrowCurved(v) {
+    arrowCurved = v;
+  },
+  get curveAmount() {
+    return arrowCurveAmount;
+  },
+  set curveAmount(v) {
+    arrowCurveAmount = v;
+  }
+};
+window.updateSelectedArrowStyle = updateSelectedArrowStyle;
+window.cleanupAttachments = cleanupAttachments;
+
+export {
+  calculateSnap,
+  clearSnapGuides,
+  handleMouseDown,
+  handleMouseMove,
+  handleMouseUp,
+  updateAttachedArrows,
+  cleanupAttachments
+};
+//# sourceMappingURL=chunk-BZE4CEBG.js.map