@elixpo/lixsketch 5.4.7 → 5.5.0

package/dist/react/chunk-VN62KLOC.js

@@ -0,0 +1,931 @@
+"use client";
+import {
+  cleanupAttachments,
+  updateAttachedArrows
+} from "./chunk-BZE4CEBG.js";
+import {
+  pushCreateAction,
+  pushDeleteAction,
+  pushFrameAttachmentAction,
+  pushTransformAction
+} from "./chunk-L5OARZJ7.js";
+
+// src/tools/iconTool.js
+var isDraggingIcon = false;
+var iconToPlace = null;
+var iconX = 0;
+var iconY = 0;
+var currentIconElement = null;
+var selectedIcon = null;
+var originalX;
+var originalY;
+var originalWidth;
+var originalHeight;
+var currentAnchor = null;
+var isDragging = false;
+var isRotatingIcon = false;
+var dragOffsetX;
+var dragOffsetY;
+var startRotationMouseAngle = null;
+var startIconRotation = null;
+var iconRotation = 0;
+var aspect_ratio_lock = true;
+var minIconSize = 25;
+var miniatureSize = 40;
+var placedIconSize = 40;
+var draggedShapeInitialFrameIcon = null;
+var hoveredFrameIcon = null;
+var _pendingDragChecker = null;
+var iconSearchInput = document.getElementById("iconSearchInput") || document.createElement("input");
+function getSVGElement() {
+  return document.getElementById("freehand-canvas");
+}
+function removeSelection() {
+  const svg = getSVGElement();
+  if (!svg) return;
+  svg.querySelectorAll(".selection-outline").forEach((el) => el.remove());
+  removeResizeAnchors();
+  removeRotationAnchor();
+  if (selectedIcon) {
+    selectedIcon.removeEventListener("pointerdown", startDrag);
+    selectedIcon.removeEventListener("pointerup", stopDrag);
+    selectedIcon.removeEventListener("pointerleave", stopDrag);
+  }
+}
+function wrapIconElement(element) {
+  const iconShape = new IconShape(element);
+  return iconShape;
+}
+document.getElementById("importIcon")?.addEventListener("click", () => {
+  const iconContainer = document.getElementById("iconsToolBar");
+  if (iconContainer) {
+    if (iconContainer.classList.contains("hidden")) {
+      iconContainer.classList.remove("hidden");
+      iconSearchInput.focus();
+    } else {
+      iconContainer.classList.add("hidden");
+    }
+  }
+});
+function getSVGCoordsFromMouse(e) {
+  const svg = getSVGElement();
+  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 };
+}
+var handleMouseMoveIcon = (e) => {
+  if (!isDraggingIcon || !iconToPlace || !isIconToolActive) return;
+  const { x, y } = getSVGCoordsFromMouse(e);
+  iconX = x;
+  iconY = y;
+  drawMiniatureIcon();
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    shapes.forEach((frame) => {
+      if (frame.shapeName === "frame") {
+        const tempIconBounds = {
+          x: iconX - 50,
+          y: iconY - 50,
+          width: 100,
+          height: 100
+        };
+        if (frame.isShapeInFrame(tempIconBounds)) {
+          frame.highlightFrame();
+          hoveredFrameIcon = frame;
+          if (window.__iconShapeState) window.__iconShapeState.hoveredFrameIcon = frame;
+        } else if (hoveredFrameIcon === frame) {
+          frame.removeHighlight();
+          hoveredFrameIcon = null;
+          if (window.__iconShapeState) window.__iconShapeState.hoveredFrameIcon = null;
+        }
+      }
+    });
+  }
+};
+var drawMiniatureIcon = () => {
+  if (!isDraggingIcon || !iconToPlace || !isIconToolActive) return;
+  const svg = getSVGElement();
+  if (!svg) {
+    console.error("SVG element not found for miniature icon");
+    return;
+  }
+  if (currentIconElement) {
+    svg.removeChild(currentIconElement);
+    currentIconElement = null;
+  }
+  const tempDiv = document.createElement("div");
+  tempDiv.innerHTML = iconToPlace;
+  const svgElement = tempDiv.querySelector("svg");
+  if (svgElement) {
+    const iconGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    const viewBox = svgElement.getAttribute("viewBox");
+    let vbWidth = 24, vbHeight = 24;
+    if (viewBox) {
+      const [, , widthStr, heightStr] = viewBox.split(/\s+/);
+      vbWidth = parseFloat(widthStr) || 24;
+      vbHeight = parseFloat(heightStr) || 24;
+    } else {
+      const width = svgElement.getAttribute("width");
+      const height = svgElement.getAttribute("height");
+      if (width && height) {
+        vbWidth = parseFloat(width) || 24;
+        vbHeight = parseFloat(height) || 24;
+      }
+    }
+    const scale = miniatureSize / Math.max(vbWidth, vbHeight);
+    iconGroup.setAttribute("transform", `translate(${iconX - miniatureSize / 2}, ${iconY - miniatureSize / 2}) scale(${scale})`);
+    const allChildren = svgElement.children;
+    for (let i = 0; i < allChildren.length; i++) {
+      const clonedChild = allChildren[i].cloneNode(true);
+      const applyGrayStyle = (element) => {
+        if (element.nodeType === 1) {
+          element.setAttribute("fill", "#666");
+          element.setAttribute("stroke", "#666");
+          for (let j = 0; j < element.children.length; j++) {
+            applyGrayStyle(element.children[j]);
+          }
+        }
+      };
+      applyGrayStyle(clonedChild);
+      iconGroup.appendChild(clonedChild);
+    }
+    iconGroup.setAttribute("style", "pointer-events: none; opacity: 0.7;");
+    iconGroup.setAttribute("class", "miniature-icon");
+    currentIconElement = iconGroup;
+    svg.appendChild(currentIconElement);
+  }
+};
+var handleMouseDownIcon = async (e) => {
+  if (!e.target) return;
+  if (isSelectionToolActive) {
+    const clickedIcon = e.target.closest('[type="icon"]');
+    if (clickedIcon) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (selectedIcon === clickedIcon) {
+        let checkDragStartWithThreshold = function(moveEvent) {
+          const { x: currentX, y: currentY } = getSVGCoordsFromMouse(moveEvent);
+          const deltaX = Math.abs(currentX - initialMouseX);
+          const deltaY = Math.abs(currentY - initialMouseY);
+          if (deltaX > dragThreshold || deltaY > dragThreshold) {
+            document.removeEventListener("pointermove", checkDragStartWithThreshold);
+            document.removeEventListener("pointerup", cancelDragPrep);
+            window.removeEventListener("pointerup", cancelDragPrep);
+            const svg2 = getSVGElement();
+            if (svg2) svg2.removeEventListener("pointerup", cancelDragPrep);
+            startDrag(moveEvent);
+          }
+        };
+        originalX = parseFloat(selectedIcon.getAttribute("x")) || 0;
+        originalY = parseFloat(selectedIcon.getAttribute("y")) || 0;
+        originalWidth = parseFloat(selectedIcon.getAttribute("width")) || placedIconSize;
+        originalHeight = parseFloat(selectedIcon.getAttribute("height")) || placedIconSize;
+        const { x, y } = getSVGCoordsFromMouse(e);
+        dragOffsetX = x - originalX;
+        dragOffsetY = y - originalY;
+        const initialMouseX = x;
+        const initialMouseY = y;
+        const svgEl = getSVGElement();
+        const svgRect2 = svgEl ? svgEl.getBoundingClientRect() : { width: 1536 };
+        const svgViewW = svgEl ? svgEl.viewBox.baseVal.width : 1536;
+        const dragThreshold = 12 * (svgViewW / svgRect2.width);
+        _pendingDragChecker = checkDragStartWithThreshold;
+        document.addEventListener("pointermove", checkDragStartWithThreshold);
+        document.addEventListener("pointerup", cancelDragPrep);
+        window.addEventListener("pointerup", cancelDragPrep);
+        const svg = getSVGElement();
+        if (svg) svg.addEventListener("pointerup", cancelDragPrep);
+        return;
+      } else {
+        selectIcon(e);
+        return;
+      }
+    }
+    if (selectedIcon) {
+      removeSelection();
+      selectedIcon = null;
+      if (currentShape && currentShape.shapeName === "icon") {
+        currentShape = null;
+      }
+    }
+    return;
+  }
+  if (!isDraggingIcon || !iconToPlace || !isIconToolActive) {
+    return;
+  }
+  let placedIconShape = null;
+  try {
+    const svg = getSVGElement();
+    if (!svg) {
+      throw new Error("SVG element not found");
+    }
+    if (currentIconElement) {
+      svg.removeChild(currentIconElement);
+      currentIconElement = null;
+    }
+    const { x: placedX, y: placedY } = getSVGCoordsFromMouse(e);
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = iconToPlace;
+    const originalSvgElement = tempDiv.querySelector("svg");
+    if (!originalSvgElement) {
+      throw new Error("Invalid SVG content");
+    }
+    const finalIconGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    const finalX = placedX - placedIconSize / 2;
+    const finalY = placedY - placedIconSize / 2;
+    const viewBox = originalSvgElement.getAttribute("viewBox");
+    let vbWidth = 24, vbHeight = 24;
+    if (viewBox) {
+      const [, , widthStr, heightStr] = viewBox.split(/\s+/);
+      vbWidth = parseFloat(widthStr) || 24;
+      vbHeight = parseFloat(heightStr) || 24;
+    } else {
+      const width = originalSvgElement.getAttribute("width");
+      const height = originalSvgElement.getAttribute("height");
+      if (width && height) {
+        vbWidth = parseFloat(width) || 24;
+        vbHeight = parseFloat(height) || 24;
+      }
+    }
+    const scale = placedIconSize / Math.max(vbWidth, vbHeight);
+    const localCenterX = placedIconSize / 2 / scale;
+    const localCenterY = placedIconSize / 2 / scale;
+    finalIconGroup.setAttribute("transform", `translate(${finalX}, ${finalY}) scale(${scale}) rotate(0, ${localCenterX}, ${localCenterY})`);
+    finalIconGroup.setAttribute("data-viewbox-width", vbWidth);
+    finalIconGroup.setAttribute("data-viewbox-height", vbHeight);
+    const backgroundRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    backgroundRect.setAttribute("x", 0);
+    backgroundRect.setAttribute("y", 0);
+    backgroundRect.setAttribute("width", vbWidth);
+    backgroundRect.setAttribute("height", vbHeight);
+    backgroundRect.setAttribute("fill", "transparent");
+    backgroundRect.setAttribute("stroke", "none");
+    backgroundRect.setAttribute("style", "pointer-events: all; cursor: pointer;");
+    finalIconGroup.appendChild(backgroundRect);
+    const allChildren = originalSvgElement.children;
+    for (let i = 0; i < allChildren.length; i++) {
+      const clonedChild = allChildren[i].cloneNode(true);
+      const applyWhiteStyle = (element) => {
+        if (element.nodeType === 1) {
+          const fill = element.getAttribute("fill");
+          const stroke = element.getAttribute("stroke");
+          if (!fill || fill === "#000" || fill === "#000000" || fill === "black" || fill === "currentColor") {
+            element.setAttribute("fill", "#ffffff");
+          }
+          if (stroke === "#000" || stroke === "#000000" || stroke === "black" || stroke === "currentColor") {
+            element.setAttribute("stroke", "#ffffff");
+          }
+          for (let j = 0; j < element.children.length; j++) {
+            applyWhiteStyle(element.children[j]);
+          }
+        }
+      };
+      applyWhiteStyle(clonedChild);
+      finalIconGroup.appendChild(clonedChild);
+    }
+    finalIconGroup.setAttribute("x", finalX);
+    finalIconGroup.setAttribute("y", finalY);
+    finalIconGroup.setAttribute("width", placedIconSize);
+    finalIconGroup.setAttribute("height", placedIconSize);
+    finalIconGroup.setAttribute("type", "icon");
+    finalIconGroup.setAttribute("data-shape-x", finalX);
+    finalIconGroup.setAttribute("data-shape-y", finalY);
+    finalIconGroup.setAttribute("data-shape-width", placedIconSize);
+    finalIconGroup.setAttribute("data-shape-height", placedIconSize);
+    finalIconGroup.setAttribute("data-shape-rotation", 0);
+    finalIconGroup.shapeID = `icon-${String(Date.now()).slice(0, 8)}-${Math.floor(Math.random() * 1e4)}`;
+    finalIconGroup.setAttribute("id", finalIconGroup.shapeID);
+    finalIconGroup.setAttribute("style", "cursor: pointer; pointer-events: all;");
+    svg.appendChild(finalIconGroup);
+    const iconShape = wrapIconElement(finalIconGroup);
+    placedIconShape = iconShape;
+    if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+      const alreadyExists = shapes.some((s) => s.shapeName === "icon" && s.element === finalIconGroup);
+      if (!alreadyExists) {
+        shapes.push(iconShape);
+      }
+    }
+    const finalFrame = hoveredFrameIcon;
+    if (finalFrame) {
+      finalFrame.addShapeToFrame(iconShape);
+      pushFrameAttachmentAction(finalFrame, iconShape, "attach", null);
+    }
+    pushCreateAction(iconShape);
+    if (hoveredFrameIcon) {
+      hoveredFrameIcon.removeHighlight();
+      hoveredFrameIcon = null;
+      if (window.__iconShapeState) window.__iconShapeState.hoveredFrameIcon = null;
+    }
+    console.log("Icon placed successfully:", finalIconGroup);
+  } catch (error) {
+    console.error("Error placing icon:", error);
+    isDraggingIcon = false;
+    iconToPlace = null;
+  } finally {
+    isDraggingIcon = false;
+    iconToPlace = null;
+    document.body.style.cursor = "default";
+  }
+  if (placedIconShape) {
+    currentShape = placedIconShape;
+    currentShape.isSelected = true;
+    requestAnimationFrame(() => {
+      placedIconShape.selectShape();
+    });
+  }
+};
+var handleMouseUpIcon = (e) => {
+  if (!e.target) return;
+  if (hoveredFrameIcon) {
+    hoveredFrameIcon.removeHighlight();
+    hoveredFrameIcon = null;
+  }
+};
+function addSelectionOutline() {
+  if (!selectedIcon) return;
+  const svg = getSVGElement();
+  if (!svg) return;
+  const x = parseFloat(selectedIcon.getAttribute("data-shape-x")) || 0;
+  const y = parseFloat(selectedIcon.getAttribute("data-shape-y")) || 0;
+  const width = parseFloat(selectedIcon.getAttribute("data-shape-width")) || 40;
+  const height = parseFloat(selectedIcon.getAttribute("data-shape-height")) || 40;
+  const rotation = parseFloat(selectedIcon.getAttribute("data-shape-rotation")) || 0;
+  const centerX = x + width / 2;
+  const centerY = y + height / 2;
+  const selectionPadding = Math.max(4, width * 0.08);
+  const expandedX = x - selectionPadding;
+  const expandedY = y - selectionPadding;
+  const expandedWidth = width + 2 * selectionPadding;
+  const expandedHeight = height + 2 * selectionPadding;
+  removeSelection();
+  const outline = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  outline.setAttribute("x", expandedX);
+  outline.setAttribute("y", expandedY);
+  outline.setAttribute("width", expandedWidth);
+  outline.setAttribute("height", expandedHeight);
+  outline.setAttribute("fill", "none");
+  outline.setAttribute("stroke", "#5B57D1");
+  outline.setAttribute("stroke-width", 1.5);
+  outline.setAttribute("stroke-dasharray", "4 3");
+  outline.setAttribute("style", "pointer-events: none;");
+  outline.setAttribute("class", "selection-outline");
+  if (rotation !== 0) {
+    outline.setAttribute("transform", `rotate(${rotation}, ${centerX}, ${centerY})`);
+  }
+  svg.appendChild(outline);
+  addResizeAnchors(expandedX, expandedY, expandedWidth, expandedHeight, centerX, centerY, width, rotation);
+  addRotationAnchor(expandedX, expandedY, expandedWidth, expandedHeight, centerX, centerY, width, rotation);
+}
+function cancelDragPrep(event) {
+  if (_pendingDragChecker) {
+    document.removeEventListener("pointermove", _pendingDragChecker);
+    _pendingDragChecker = null;
+  }
+  document.removeEventListener("pointerup", cancelDragPrep);
+  window.removeEventListener("pointerup", cancelDragPrep);
+  const svg = getSVGElement();
+  if (svg) {
+    svg.removeEventListener("pointerup", cancelDragPrep);
+  }
+}
+function startDrag(event) {
+  console.log("start dragging icon");
+  if (!isSelectionToolActive || !selectedIcon) return;
+  isDragging = true;
+  if (window.__iconShapeState) window.__iconShapeState.isDragging = true;
+  let iconShape = null;
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    iconShape = shapes.find((shape) => shape.shapeName === "icon" && shape.element === selectedIcon);
+  }
+  if (iconShape) {
+    draggedShapeInitialFrameIcon = iconShape.parentFrame || null;
+    if (iconShape.parentFrame) {
+      iconShape.parentFrame.temporarilyRemoveFromFrame(iconShape);
+    }
+  }
+  document.addEventListener("pointermove", dragIcon);
+  document.addEventListener("pointerup", stopDrag);
+  window.addEventListener("pointerup", stopDrag);
+  const svg = getSVGElement();
+  if (svg) {
+    svg.addEventListener("pointerup", stopDrag);
+  }
+  document.addEventListener("dragstart", preventDefaultDrag);
+  document.addEventListener("selectstart", preventDefaultDrag);
+}
+function preventDefaultDrag(e) {
+  e.preventDefault();
+  return false;
+}
+function selectIcon(event) {
+  if (!isSelectionToolActive) return;
+  event.stopPropagation();
+  let targetIcon = event.target.closest ? event.target.closest('[type="icon"]') : null;
+  if (!targetIcon) {
+    let current = event.target;
+    while (current && current !== document) {
+      if (current.getAttribute && current.getAttribute("type") === "icon") {
+        targetIcon = current;
+        break;
+      }
+      current = current.parentElement;
+    }
+  }
+  if (selectedIcon) {
+    removeSelection();
+  }
+  selectedIcon = targetIcon;
+  if (!selectedIcon) {
+    console.warn("Could not find icon to select");
+    return;
+  }
+  const transform = selectedIcon.getAttribute("transform");
+  if (transform) {
+    const rotateMatch = transform.match(/rotate\(([^,\s]+)/);
+    if (rotateMatch) {
+      iconRotation = parseFloat(rotateMatch[1]);
+    }
+  } else {
+    iconRotation = 0;
+  }
+  addSelectionOutline();
+  originalX = parseFloat(selectedIcon.getAttribute("x")) || 0;
+  originalY = parseFloat(selectedIcon.getAttribute("y")) || 0;
+  originalWidth = parseFloat(selectedIcon.getAttribute("width")) || placedIconSize;
+  originalHeight = parseFloat(selectedIcon.getAttribute("height")) || placedIconSize;
+  const iconShape = typeof shapes !== "undefined" && Array.isArray(shapes) ? shapes.find((s) => s.shapeName === "icon" && s.element === selectedIcon) : null;
+  if (iconShape) {
+    currentShape = iconShape;
+    currentShape.isSelected = true;
+    if (window.__showSidebarForShape) window.__showSidebarForShape("icon");
+  }
+}
+function addResizeAnchors(x, y, width, height, centerX, centerY, iconWidth, rotation) {
+  const svg = getSVGElement();
+  if (!svg) return;
+  const zoom = window.currentZoom || 1;
+  const anchorSize = Math.max(8, Math.min(16, iconWidth * 0.15)) / zoom;
+  const anchorStrokeWidth = Math.max(1.5, anchorSize * 0.15);
+  const positions = [
+    { x, y, cursor: "nw-resize" },
+    { x: x + width, y, cursor: "ne-resize" },
+    { x, y: y + height, cursor: "sw-resize" },
+    { x: x + width, y: y + height, cursor: "se-resize" }
+  ];
+  positions.forEach((pos) => {
+    const anchor = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    anchor.setAttribute("x", pos.x - anchorSize / 2);
+    anchor.setAttribute("y", pos.y - anchorSize / 2);
+    anchor.setAttribute("width", anchorSize);
+    anchor.setAttribute("height", anchorSize);
+    anchor.setAttribute("fill", "#121212");
+    anchor.setAttribute("stroke", "#5B57D1");
+    anchor.setAttribute("stroke-width", anchorStrokeWidth);
+    anchor.setAttribute("class", "resize-anchor");
+    anchor.setAttribute("transform", `rotate(${rotation}, ${centerX}, ${centerY})`);
+    anchor.style.cursor = pos.cursor;
+    svg.appendChild(anchor);
+    anchor.addEventListener("pointerdown", startResize);
+    anchor.addEventListener("pointerup", stopResize);
+  });
+}
+function addRotationAnchor(x, y, width, height, centerX, centerY, iconWidth, rotation) {
+  const svg = getSVGElement();
+  if (!svg) return;
+  const anchorRadius = Math.max(6, Math.min(12, iconWidth * 0.12));
+  const anchorStrokeWidth = Math.max(1.5, anchorRadius * 0.2);
+  const rotationDistance = Math.max(25, iconWidth * 0.4);
+  const rotationAnchorX = x + width / 2;
+  const rotationAnchorY = y - rotationDistance;
+  const rotationAnchor = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  rotationAnchor.setAttribute("cx", rotationAnchorX);
+  rotationAnchor.setAttribute("cy", rotationAnchorY);
+  rotationAnchor.setAttribute("r", anchorRadius);
+  rotationAnchor.setAttribute("class", "rotation-anchor");
+  rotationAnchor.setAttribute("fill", "#121212");
+  rotationAnchor.setAttribute("stroke", "#5B57D1");
+  rotationAnchor.setAttribute("stroke-width", anchorStrokeWidth);
+  rotationAnchor.setAttribute("style", "pointer-events: all; cursor: grab;");
+  rotationAnchor.setAttribute("transform", `rotate(${rotation}, ${centerX}, ${centerY})`);
+  svg.appendChild(rotationAnchor);
+  rotationAnchor.addEventListener("pointerdown", startRotation);
+  rotationAnchor.addEventListener("pointerup", stopRotation);
+  rotationAnchor.addEventListener("mouseover", function() {
+    if (!isRotatingIcon && !isDragging) {
+      rotationAnchor.style.cursor = "grab";
+    }
+  });
+  rotationAnchor.addEventListener("mouseout", function() {
+    if (!isRotatingIcon && !isDragging) {
+      rotationAnchor.style.cursor = "default";
+    }
+  });
+}
+function removeRotationAnchor() {
+  const svg = getSVGElement();
+  if (!svg) return;
+  svg.querySelectorAll(".rotation-anchor").forEach((el) => el.remove());
+}
+function removeResizeAnchors() {
+  const svg = getSVGElement();
+  if (!svg) return;
+  const anchors = svg.querySelectorAll(".resize-anchor");
+  anchors.forEach((anchor) => svg.removeChild(anchor));
+}
+function startResize(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  currentAnchor = event.target;
+  originalX = parseFloat(selectedIcon.getAttribute("x")) || 0;
+  originalY = parseFloat(selectedIcon.getAttribute("y")) || 0;
+  originalWidth = parseFloat(selectedIcon.getAttribute("width")) || 100;
+  originalHeight = parseFloat(selectedIcon.getAttribute("height")) || 100;
+  const { x: mouseX, y: mouseY } = getSVGCoordsFromMouse(event);
+  currentAnchor.startMouseX = mouseX;
+  currentAnchor.startMouseY = mouseY;
+  currentAnchor.iconRotation = iconRotation;
+  const svg = getSVGElement();
+  if (svg) {
+    svg.addEventListener("pointermove", resizeIcon);
+  }
+  document.addEventListener("pointerup", stopResize);
+}
+function stopResize(event) {
+  stopInteracting();
+  document.removeEventListener("pointerup", stopResize);
+}
+function resizeIcon(event) {
+  if (!selectedIcon || !currentAnchor) return;
+  const { x: currentMouseX, y: currentMouseY } = getSVGCoordsFromMouse(event);
+  const rotation = currentAnchor.iconRotation || 0;
+  const rotationRad = rotation * Math.PI / 180;
+  const rawDeltaX = currentMouseX - currentAnchor.startMouseX;
+  const rawDeltaY = currentMouseY - currentAnchor.startMouseY;
+  const deltaX = rawDeltaX * Math.cos(-rotationRad) - rawDeltaY * Math.sin(-rotationRad);
+  const deltaY = rawDeltaX * Math.sin(-rotationRad) + rawDeltaY * Math.cos(-rotationRad);
+  let newWidth = originalWidth;
+  let newHeight = originalHeight;
+  let newX = originalX;
+  let newY = originalY;
+  let fixedRelX, fixedRelY;
+  switch (currentAnchor.style.cursor) {
+    case "nw-resize":
+      newWidth = Math.max(minIconSize, originalWidth - deltaX);
+      newHeight = Math.max(minIconSize, originalHeight - deltaY);
+      if (aspect_ratio_lock) {
+        const scale = Math.min(newWidth / originalWidth, newHeight / originalHeight);
+        newWidth = originalWidth * scale;
+        newHeight = originalHeight * scale;
+      }
+      newX = originalX + (originalWidth - newWidth);
+      newY = originalY + (originalHeight - newHeight);
+      fixedRelX = originalWidth;
+      fixedRelY = originalHeight;
+      break;
+    case "ne-resize":
+      newWidth = Math.max(minIconSize, originalWidth + deltaX);
+      newHeight = Math.max(minIconSize, originalHeight - deltaY);
+      if (aspect_ratio_lock) {
+        const scale = Math.max(newWidth / originalWidth, newHeight / originalHeight);
+        newWidth = originalWidth * scale;
+        newHeight = originalHeight * scale;
+      }
+      newX = originalX;
+      newY = originalY + (originalHeight - newHeight);
+      fixedRelX = 0;
+      fixedRelY = originalHeight;
+      break;
+    case "sw-resize":
+      newWidth = Math.max(minIconSize, originalWidth - deltaX);
+      newHeight = Math.max(minIconSize, originalHeight + deltaY);
+      if (aspect_ratio_lock) {
+        const scale = Math.max(newWidth / originalWidth, newHeight / originalHeight);
+        newWidth = originalWidth * scale;
+        newHeight = originalHeight * scale;
+      }
+      newX = originalX + (originalWidth - newWidth);
+      newY = originalY;
+      fixedRelX = originalWidth;
+      fixedRelY = 0;
+      break;
+    case "se-resize":
+      newWidth = Math.max(minIconSize, originalWidth + deltaX);
+      newHeight = Math.max(minIconSize, originalHeight + deltaY);
+      if (aspect_ratio_lock) {
+        const scale = Math.max(newWidth / originalWidth, newHeight / originalHeight);
+        newWidth = originalWidth * scale;
+        newHeight = originalHeight * scale;
+      }
+      newX = originalX;
+      newY = originalY;
+      fixedRelX = 0;
+      fixedRelY = 0;
+      break;
+  }
+  if (rotation !== 0) {
+    const cosR = Math.cos(rotationRad);
+    const sinR = Math.sin(rotationRad);
+    const oldCX = originalX + originalWidth / 2;
+    const oldCY = originalY + originalHeight / 2;
+    const odx = originalX + fixedRelX - oldCX;
+    const ody = originalY + fixedRelY - oldCY;
+    const fixedWorldX = oldCX + odx * cosR - ody * sinR;
+    const fixedWorldY = oldCY + odx * sinR + ody * cosR;
+    const fixedNewRelX = fixedRelX === 0 ? 0 : newWidth;
+    const fixedNewRelY = fixedRelY === 0 ? 0 : newHeight;
+    const ncx = newWidth / 2;
+    const ncy = newHeight / 2;
+    const ndx = fixedNewRelX - ncx;
+    const ndy = fixedNewRelY - ncy;
+    const rotX = ncx + ndx * cosR - ndy * sinR;
+    const rotY = ncy + ndx * sinR + ndy * cosR;
+    newX = fixedWorldX - rotX;
+    newY = fixedWorldY - rotY;
+  }
+  selectedIcon.setAttribute("width", newWidth);
+  selectedIcon.setAttribute("height", newHeight);
+  selectedIcon.setAttribute("x", newX);
+  selectedIcon.setAttribute("y", newY);
+  selectedIcon.setAttribute("data-shape-x", newX);
+  selectedIcon.setAttribute("data-shape-y", newY);
+  selectedIcon.setAttribute("data-shape-width", newWidth);
+  selectedIcon.setAttribute("data-shape-height", newHeight);
+  const vbWidth = parseFloat(selectedIcon.getAttribute("data-viewbox-width")) || 24;
+  const vbHeight = parseFloat(selectedIcon.getAttribute("data-viewbox-height")) || 24;
+  const iconScale = newWidth / Math.max(vbWidth, vbHeight);
+  const localCenterX = newWidth / 2 / iconScale;
+  const localCenterY = newHeight / 2 / iconScale;
+  selectedIcon.setAttribute("transform", `translate(${newX}, ${newY}) scale(${iconScale}) rotate(${iconRotation}, ${localCenterX}, ${localCenterY})`);
+  updateAttachedArrows(selectedIcon);
+  addSelectionOutline();
+}
+function dragIcon(event) {
+  if (!isDragging || !selectedIcon) return;
+  const { x, y } = getSVGCoordsFromMouse(event);
+  let newX = x - dragOffsetX;
+  let newY = y - dragOffsetY;
+  selectedIcon.setAttribute("x", newX);
+  selectedIcon.setAttribute("y", newY);
+  selectedIcon.setAttribute("data-shape-x", newX);
+  selectedIcon.setAttribute("data-shape-y", newY);
+  const width = parseFloat(selectedIcon.getAttribute("width")) || 100;
+  const height = parseFloat(selectedIcon.getAttribute("height")) || 100;
+  const vbWidth = parseFloat(selectedIcon.getAttribute("data-viewbox-width")) || 24;
+  const vbHeight = parseFloat(selectedIcon.getAttribute("data-viewbox-height")) || 24;
+  const scale = width / Math.max(vbWidth, vbHeight);
+  const localCenterX = width / 2 / scale;
+  const localCenterY = height / 2 / scale;
+  selectedIcon.setAttribute("transform", `translate(${newX}, ${newY}) scale(${scale}) rotate(${iconRotation}, ${localCenterX}, ${localCenterY})`);
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    const iconShape = shapes.find((shape) => shape.shapeName === "icon" && shape.element === selectedIcon);
+    if (iconShape) {
+      iconShape.x = newX;
+      iconShape.y = newY;
+      iconShape.updateFrameContainment();
+    }
+  }
+  updateAttachedArrows(selectedIcon);
+  removeSelection();
+  addSelectionOutline();
+}
+function stopDrag(event) {
+  if (!isDragging) return;
+  console.log("stop dragging icon");
+  isDragging = false;
+  if (window.__iconShapeState) window.__iconShapeState.isDragging = false;
+  document.removeEventListener("pointermove", dragIcon);
+  document.removeEventListener("pointerup", stopDrag);
+  window.removeEventListener("pointerup", stopDrag);
+  const svg = getSVGElement();
+  if (svg) {
+    svg.removeEventListener("pointerup", stopDrag);
+  }
+  document.removeEventListener("dragstart", preventDefaultDrag);
+  document.removeEventListener("selectstart", preventDefaultDrag);
+  stopInteracting();
+}
+function startRotation(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  if (!selectedIcon) return;
+  isRotatingIcon = true;
+  console.log(selectedIcon);
+  const iconX2 = parseFloat(selectedIcon.getAttribute("x"));
+  const iconY2 = parseFloat(selectedIcon.getAttribute("y"));
+  const iconWidth = parseFloat(selectedIcon.getAttribute("width"));
+  const iconHeight = parseFloat(selectedIcon.getAttribute("height"));
+  const centerX = iconX2 + iconWidth / 2;
+  const centerY = iconY2 + iconHeight / 2;
+  const { x: mouseX, y: mouseY } = getSVGCoordsFromMouse(event);
+  startRotationMouseAngle = Math.atan2(mouseY - centerY, mouseX - centerX) * 180 / Math.PI;
+  console.log("Start rotation mouse angle:", startRotationMouseAngle);
+  startIconRotation = iconRotation;
+  const svg = getSVGElement();
+  if (svg) {
+    svg.addEventListener("pointermove", rotateIcon);
+    svg.style.cursor = "grabbing";
+  }
+  document.addEventListener("pointerup", stopRotation);
+}
+function rotateIcon(event) {
+  if (!isRotatingIcon || !selectedIcon) return;
+  const iconX2 = parseFloat(selectedIcon.getAttribute("x")) || 0;
+  const iconY2 = parseFloat(selectedIcon.getAttribute("y")) || 0;
+  const iconWidth = parseFloat(selectedIcon.getAttribute("width")) || 100;
+  const iconHeight = parseFloat(selectedIcon.getAttribute("height")) || 100;
+  const centerX = iconX2 + iconWidth / 2;
+  const centerY = iconY2 + iconHeight / 2;
+  const { x: mouseX, y: mouseY } = getSVGCoordsFromMouse(event);
+  const currentMouseAngle = Math.atan2(mouseY - centerY, mouseX - centerX) * 180 / Math.PI;
+  const angleDiff = currentMouseAngle - startRotationMouseAngle;
+  iconRotation = startIconRotation + angleDiff;
+  iconRotation = iconRotation % 360;
+  if (iconRotation < 0) iconRotation += 360;
+  const vbWidth = parseFloat(selectedIcon.getAttribute("data-viewbox-width")) || 24;
+  const vbHeight = parseFloat(selectedIcon.getAttribute("data-viewbox-height")) || 24;
+  const scale = iconWidth / Math.max(vbWidth, vbHeight);
+  const localCenterX = iconWidth / 2 / scale;
+  const localCenterY = iconHeight / 2 / scale;
+  selectedIcon.setAttribute("transform", `translate(${iconX2}, ${iconY2}) scale(${scale}) rotate(${iconRotation}, ${localCenterX}, ${localCenterY})`);
+  selectedIcon.setAttribute("data-shape-rotation", iconRotation);
+  updateAttachedArrows(selectedIcon);
+  removeSelection();
+  addSelectionOutline();
+}
+function stopRotation(event) {
+  if (!isRotatingIcon) return;
+  stopInteracting();
+  isRotatingIcon = false;
+  startRotationMouseAngle = null;
+  startIconRotation = null;
+  const svg = getSVGElement();
+  if (svg) {
+    svg.removeEventListener("pointermove", rotateIcon);
+    svg.style.cursor = "default";
+  }
+  document.removeEventListener("pointerup", stopRotation);
+}
+function stopInteracting() {
+  if (selectedIcon && (isDragging || isRotatingIcon || currentAnchor)) {
+    const newPos = {
+      x: parseFloat(selectedIcon.getAttribute("x")) || 0,
+      y: parseFloat(selectedIcon.getAttribute("y")) || 0,
+      width: parseFloat(selectedIcon.getAttribute("width")) || 100,
+      height: parseFloat(selectedIcon.getAttribute("height")) || 100,
+      rotation: iconRotation
+    };
+    let originalRotation = iconRotation;
+    if (isRotatingIcon && startIconRotation !== null) {
+      originalRotation = startIconRotation;
+    }
+    const oldPos = {
+      x: originalX,
+      y: originalY,
+      width: originalWidth,
+      height: originalHeight,
+      rotation: originalRotation
+    };
+    let iconShape = null;
+    if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+      iconShape = shapes.find((shape) => shape.shapeName === "icon" && shape.element === selectedIcon);
+      if (iconShape) {
+        iconShape.x = newPos.x;
+        iconShape.y = newPos.y;
+        iconShape.width = newPos.width;
+        iconShape.height = newPos.height;
+        iconShape.rotation = newPos.rotation;
+      }
+    }
+    const oldPosWithFrame = {
+      ...oldPos,
+      parentFrame: draggedShapeInitialFrameIcon
+    };
+    const newPosWithFrame = {
+      ...newPos,
+      parentFrame: isDragging ? hoveredFrameIcon || null : iconShape ? iconShape.parentFrame : null
+    };
+    const stateChanged = newPos.x !== oldPos.x || newPos.y !== oldPos.y || newPos.width !== oldPos.width || newPos.height !== oldPos.height || newPos.rotation !== oldPos.rotation;
+    const frameChanged = oldPosWithFrame.parentFrame !== newPosWithFrame.parentFrame;
+    if ((stateChanged || frameChanged) && iconShape) {
+      pushTransformAction(iconShape, oldPosWithFrame, newPosWithFrame);
+    }
+    if (isDragging && iconShape) {
+      const finalFrame = hoveredFrameIcon;
+      if (draggedShapeInitialFrameIcon !== finalFrame) {
+        if (draggedShapeInitialFrameIcon) {
+          draggedShapeInitialFrameIcon.removeShapeFromFrame(iconShape);
+        }
+        if (finalFrame) {
+          finalFrame.addShapeToFrame(iconShape);
+        }
+        if (frameChanged) {
+          pushFrameAttachmentAction(
+            finalFrame || draggedShapeInitialFrameIcon,
+            iconShape,
+            finalFrame ? "attach" : "detach",
+            draggedShapeInitialFrameIcon
+          );
+        }
+      } else if (draggedShapeInitialFrameIcon) {
+        draggedShapeInitialFrameIcon.restoreToFrame(iconShape);
+      }
+    }
+    draggedShapeInitialFrameIcon = null;
+  }
+  if (hoveredFrameIcon) {
+    hoveredFrameIcon.removeHighlight();
+    hoveredFrameIcon = null;
+    if (window.__iconShapeState) window.__iconShapeState.hoveredFrameIcon = null;
+  }
+  isDragging = false;
+  if (window.__iconShapeState) window.__iconShapeState.isDragging = false;
+  isRotatingIcon = false;
+  const svg = getSVGElement();
+  if (svg) {
+    svg.removeEventListener("pointermove", dragIcon);
+    svg.removeEventListener("pointermove", resizeIcon);
+    svg.removeEventListener("pointermove", rotateIcon);
+  }
+  document.removeEventListener("pointermove", dragIcon);
+  document.removeEventListener("pointermove", resizeIcon);
+  document.removeEventListener("pointermove", rotateIcon);
+  currentAnchor = null;
+  startRotationMouseAngle = null;
+  startIconRotation = null;
+  if (selectedIcon) {
+    originalX = parseFloat(selectedIcon.getAttribute("x")) || 0;
+    originalY = parseFloat(selectedIcon.getAttribute("y")) || 0;
+    originalWidth = parseFloat(selectedIcon.getAttribute("width")) || 100;
+    originalHeight = parseFloat(selectedIcon.getAttribute("height")) || 100;
+    selectedIcon.setAttribute("data-shape-x", originalX);
+    selectedIcon.setAttribute("data-shape-y", originalY);
+    selectedIcon.setAttribute("data-shape-width", originalWidth);
+    selectedIcon.setAttribute("data-shape-height", originalHeight);
+    selectedIcon.setAttribute("data-shape-rotation", iconRotation);
+    updateAttachedArrows(selectedIcon);
+  }
+}
+function deleteCurrentIcon() {
+  if (selectedIcon) {
+    let iconShape = null;
+    if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+      iconShape = shapes.find((shape) => shape.shapeName === "icon" && shape.element === selectedIcon);
+      if (iconShape) {
+        const idx = shapes.indexOf(iconShape);
+        if (idx !== -1) shapes.splice(idx, 1);
+        if (iconShape.group && iconShape.group.parentNode) {
+          iconShape.group.parentNode.removeChild(iconShape.group);
+        }
+      }
+    }
+    if (!iconShape && selectedIcon.parentNode) {
+      selectedIcon.parentNode.removeChild(selectedIcon);
+    }
+    if (typeof cleanupAttachments === "function") {
+      cleanupAttachments(selectedIcon);
+    }
+    if (iconShape) {
+      pushDeleteAction(iconShape);
+    }
+    removeSelection();
+    selectedIcon = null;
+  }
+}
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Delete" && selectedIcon) {
+    deleteCurrentIcon();
+  }
+});
+function cleanupIconTool() {
+  if (currentIconElement) {
+    const svg = getSVGElement();
+    if (svg && currentIconElement.parentNode === svg) {
+      svg.removeChild(currentIconElement);
+    }
+    currentIconElement = null;
+  }
+  isDraggingIcon = false;
+  iconToPlace = null;
+  document.body.style.cursor = "default";
+}
+window.__cleanupIconTool = cleanupIconTool;
+window.prepareIconPlacement = function(svgContent) {
+  iconToPlace = svgContent;
+  isDraggingIcon = true;
+  window.isIconToolActive = true;
+  document.body.style.cursor = "crosshair";
+};
+window.__iconToolSelectIcon = selectIcon;
+window.__iconToolRemoveSelection = removeSelection;
+
+export {
+  handleMouseMoveIcon,
+  handleMouseDownIcon,
+  handleMouseUpIcon,
+  startDrag,
+  stopDrag
+};
+//# sourceMappingURL=chunk-VN62KLOC.js.map