@elixpo/lixsketch 5.4.7 → 5.5.1

package/dist/react/chunk-URB6MY46.js

@@ -0,0 +1,974 @@
+"use client";
+import {
+  IMAGE_ACCEPT_ATTR,
+  compressImage,
+  isAllowedImage
+} from "./chunk-DNAG7ML6.js";
+import {
+  cleanupAttachments,
+  updateAttachedArrows
+} from "./chunk-BZE4CEBG.js";
+import {
+  pushCreateAction,
+  pushDeleteAction,
+  pushFrameAttachmentAction,
+  pushTransformAction
+} from "./chunk-L5OARZJ7.js";
+
+// src/tools/imageTool.js
+var isDraggingImage = false;
+var imageToPlace = null;
+var imageX = 0;
+var imageY = 0;
+var currentImageElement = null;
+var selectedImage = null;
+var originalX;
+var originalY;
+var originalWidth;
+var originalHeight;
+var currentAnchor = null;
+var isDragging = false;
+var isRotatingImage = false;
+var dragOffsetX;
+var dragOffsetY;
+var startRotationMouseAngle = null;
+var startImageRotation = null;
+var imageRotation = 0;
+var aspect_ratio_lock = true;
+var minImageSize = 20;
+var draggedShapeInitialFrameImage = null;
+var hoveredFrameImage = null;
+var ROOM_IMAGE_LIMIT_BYTES = 5 * 1024 * 1024;
+if (!window.__roomImageBytesUsed) window.__roomImageBytesUsed = 0;
+function wrapImageElement(element) {
+  const imageShape = new ImageShape(element);
+  return imageShape;
+}
+async function uploadImageToCloudinary(imageShape) {
+  const workerUrl = window.__WORKER_URL;
+  const sessionId = window.__sessionID;
+  if (!workerUrl || !sessionId) return;
+  const href = imageShape.element.getAttribute("href") || "";
+  if (!href.startsWith("data:")) return;
+  imageShape.uploadStatus = "uploading";
+  imageShape.uploadAbortController = new AbortController();
+  const signal = imageShape.uploadAbortController.signal;
+  imageShape.showUploadIndicator();
+  try {
+    const compressed = await compressImage(href);
+    if (signal.aborted) return;
+    const signRes = await fetch(`${workerUrl}/api/images/sign`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        sessionId,
+        filename: `img_${Date.now()}`
+      }),
+      signal
+    });
+    if (!signRes.ok) throw new Error("Failed to get upload signature");
+    const signData = await signRes.json();
+    if (signal.aborted) return;
+    const formData = new FormData();
+    formData.append("file", compressed.blob);
+    formData.append("api_key", signData.apiKey);
+    formData.append("timestamp", String(signData.timestamp));
+    formData.append("signature", signData.signature);
+    formData.append("folder", signData.folder);
+    formData.append("public_id", signData.publicId);
+    const uploadRes = await fetch(
+      `https://api.cloudinary.com/v1_1/${signData.cloudName}/image/upload`,
+      { method: "POST", body: formData, signal }
+    );
+    if (!uploadRes.ok) throw new Error("Cloudinary upload failed");
+    const uploadData = await uploadRes.json();
+    if (signal.aborted) return;
+    const cloudUrl = uploadData.secure_url || uploadData.url;
+    imageShape.element.setAttribute("href", cloudUrl);
+    imageShape.element.setAttribute("data-href", cloudUrl);
+    imageShape.element.setAttribute("data-cloudinary-id", uploadData.public_id);
+    const oldSize = imageShape.element.__fileSize || 0;
+    const newSize = uploadData.bytes || compressed.compressedSize;
+    imageShape.element.__fileSize = newSize;
+    window.__roomImageBytesUsed = Math.max(0, (window.__roomImageBytesUsed || 0) - oldSize + newSize);
+    imageShape.uploadStatus = "done";
+    console.log(`[ImageUpload] Uploaded to Cloudinary: ${cloudUrl} (${(newSize / 1024).toFixed(1)}KB)`);
+  } catch (err) {
+    if (signal.aborted) {
+      console.log("[ImageUpload] Upload aborted (image deleted)");
+      return;
+    }
+    console.warn("[ImageUpload] Upload failed:", err);
+    imageShape.uploadStatus = "failed";
+  } finally {
+    imageShape.removeUploadIndicator();
+    imageShape.uploadAbortController = null;
+  }
+}
+document.getElementById("importImage")?.addEventListener("click", () => {
+  console.log("Import image clicked");
+  isImageToolActive = true;
+  console.log("isImageToolActive set to:", isImageToolActive);
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.accept = IMAGE_ACCEPT_ATTR;
+  fileInput.style.display = "none";
+  document.body.appendChild(fileInput);
+  let fileSelected = false;
+  fileInput.addEventListener("change", (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      fileSelected = true;
+      handleImageUpload(file);
+    }
+    document.body.removeChild(fileInput);
+  });
+  const onFocus = () => {
+    window.removeEventListener("focus", onFocus);
+    setTimeout(() => {
+      if (!fileSelected) {
+        isImageToolActive = false;
+        if (window.__sketchEngine?.setActiveTool) {
+          window.__sketchEngine.setActiveTool("select");
+        }
+        if (fileInput.parentNode) {
+          document.body.removeChild(fileInput);
+        }
+      }
+    }, 300);
+  };
+  window.addEventListener("focus", onFocus);
+  fileInput.click();
+});
+var handleImageUpload = async (file) => {
+  if (!file || !isImageToolActive) return;
+  if (!isAllowedImage(file)) {
+    console.error("Rejected file type:", file.type, file.name);
+    alert("Unsupported file type. Allowed: AVIF, JPEG, PNG, BMP, SVG, WebP.");
+    isImageToolActive = false;
+    return;
+  }
+  if (window.__roomImageBytesUsed + file.size > ROOM_IMAGE_LIMIT_BYTES) {
+    const usedMB = (window.__roomImageBytesUsed / (1024 * 1024)).toFixed(2);
+    const fileMB = (file.size / (1024 * 1024)).toFixed(2);
+    alert(`Room image limit reached (5 MB). Used: ${usedMB} MB, this file: ${fileMB} MB. Delete some images to free space.`);
+    isImageToolActive = false;
+    return;
+  }
+  const maxSize = 5 * 1024 * 1024;
+  if (file.size > maxSize) {
+    console.error("File size too large");
+    alert("Image file is too large. Please select an image smaller than 5 MB.");
+    return;
+  }
+  console.log("Processing image file:", file.name, "Size:", file.size, "Type:", file.type);
+  try {
+    const rawDataUrl = await readFileAsDataUrl(file);
+    const isSvg = (file.type || "").toLowerCase() === "image/svg+xml" || (file.name || "").toLowerCase().endsWith(".svg");
+    let placedDataUrl = rawDataUrl;
+    let placedSize = file.size;
+    if (!isSvg) {
+      try {
+        const compressed = await compressImage(rawDataUrl);
+        if (compressed?.dataUrl) {
+          placedDataUrl = compressed.dataUrl;
+          placedSize = compressed.compressedSize || placedSize;
+        }
+      } catch (err) {
+        console.warn("[ImageTool] Pre-placement compression failed, using raw:", err);
+      }
+    }
+    window.__pendingImageFileSize = placedSize;
+    imageToPlace = placedDataUrl;
+    isDraggingImage = true;
+    console.log("Image loaded and ready to place", { size: placedSize, isSvg });
+  } catch (err) {
+    console.error("Error reading file:", err);
+    alert("Error reading the image file. Please try again.");
+    isImageToolActive = false;
+  }
+};
+function readFileAsDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(e.target.result);
+    reader.onerror = (err) => reject(err);
+    reader.readAsDataURL(file);
+  });
+}
+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 };
+}
+var handleMouseMoveImage = (e) => {
+  if (!isDraggingImage || !imageToPlace || !isImageToolActive) return;
+  const { x, y } = getSVGCoordsFromMouse(e);
+  imageX = x;
+  imageY = y;
+  drawMiniatureImage();
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    shapes.forEach((frame) => {
+      if (frame.shapeName === "frame") {
+        const tempImageBounds = {
+          x: imageX - 50,
+          // Half of miniature width
+          y: imageY - 50,
+          // Approximate half height
+          width: 100,
+          height: 100
+        };
+        if (frame.isShapeInFrame(tempImageBounds)) {
+          frame.highlightFrame();
+          hoveredFrameImage = frame;
+        } else if (hoveredFrameImage === frame) {
+          frame.removeHighlight();
+          hoveredFrameImage = null;
+        }
+      }
+    });
+  }
+};
+var drawMiniatureImage = () => {
+  if (!isDraggingImage || !imageToPlace || !isImageToolActive) return;
+  const miniatureWidth = 100;
+  getImageAspectRatio(imageToPlace).then((aspectRatio) => {
+    const miniatureHeight = miniatureWidth * aspectRatio;
+    if (currentImageElement) {
+      svg.removeChild(currentImageElement);
+      currentImageElement = null;
+    }
+    currentImageElement = document.createElementNS("http://www.w3.org/2000/svg", "image");
+    currentImageElement.setAttribute("href", imageToPlace);
+    currentImageElement.setAttribute("x", imageX - miniatureWidth / 2);
+    currentImageElement.setAttribute("y", imageY - miniatureHeight / 2);
+    currentImageElement.setAttribute("width", miniatureWidth);
+    currentImageElement.setAttribute("height", miniatureHeight);
+    currentImageElement.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    svg.appendChild(currentImageElement);
+  }).catch((error) => {
+    console.error("Error getting aspect ratio:", error);
+  });
+};
+function getImageAspectRatio(dataUrl) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve(img.height / img.width);
+    };
+    img.onerror = () => {
+      reject(new Error("Failed to load image for aspect ratio calculation."));
+    };
+    img.src = dataUrl;
+  });
+}
+var handleMouseDownImage = async (e) => {
+  if (!isDraggingImage || !imageToPlace || !isImageToolActive) {
+    if (isSelectionToolActive) {
+      const clickedImage = e.target.closest("image");
+      if (clickedImage) {
+        selectImage({ target: clickedImage, stopPropagation: () => e.stopPropagation() });
+        return;
+      }
+    }
+    return;
+  }
+  try {
+    let aspectRatio = await getImageAspectRatio(imageToPlace);
+    if (currentImageElement) {
+      svg.removeChild(currentImageElement);
+      currentImageElement = null;
+    }
+    const placedImageWidth = 200;
+    const placedImageHeight = placedImageWidth * aspectRatio;
+    const { x: placedX, y: placedY } = getSVGCoordsFromMouse(e);
+    const finalImage = document.createElementNS("http://www.w3.org/2000/svg", "image");
+    finalImage.setAttribute("href", imageToPlace);
+    finalImage.setAttribute("x", placedX - placedImageWidth / 2);
+    finalImage.setAttribute("y", placedY - placedImageHeight / 2);
+    finalImage.setAttribute("width", placedImageWidth);
+    finalImage.setAttribute("height", placedImageHeight);
+    finalImage.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    finalImage.setAttribute("data-href", imageToPlace);
+    finalImage.setAttribute("data-x", placedX - placedImageWidth / 2);
+    finalImage.setAttribute("data-y", placedY - placedImageHeight / 2);
+    finalImage.setAttribute("data-width", placedImageWidth);
+    finalImage.setAttribute("data-height", placedImageHeight);
+    finalImage.setAttribute("type", "image");
+    finalImage.setAttribute("data-shape-x", placedX - placedImageWidth / 2);
+    finalImage.setAttribute("data-shape-y", placedY - placedImageHeight / 2);
+    finalImage.setAttribute("data-shape-width", placedImageWidth);
+    finalImage.setAttribute("data-shape-height", placedImageHeight);
+    finalImage.setAttribute("data-shape-rotation", 0);
+    finalImage.shapeID = `image-${String(Date.now()).slice(0, 8)}-${Math.floor(Math.random() * 1e4)}`;
+    const imageShape = wrapImageElement(finalImage);
+    if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+      shapes.push(imageShape);
+      console.log("Image added to shapes array for arrow attachment and frame functionality");
+    } else {
+      console.warn("shapes array not found - arrows and frames may not work with images");
+    }
+    const finalFrame = hoveredFrameImage;
+    if (finalFrame) {
+      finalFrame.addShapeToFrame(imageShape);
+      pushFrameAttachmentAction(finalFrame, imageShape, "attach", null);
+    }
+    pushCreateAction({
+      type: "image",
+      element: imageShape,
+      remove: () => {
+        if (imageShape.group && imageShape.group.parentNode) {
+          imageShape.group.parentNode.removeChild(imageShape.group);
+        }
+        if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+          const idx = shapes.indexOf(imageShape);
+          if (idx !== -1) shapes.splice(idx, 1);
+        }
+        if (typeof cleanupAttachments === "function") {
+          cleanupAttachments(finalImage);
+        }
+      },
+      restore: () => {
+        svg.appendChild(imageShape.group);
+        if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+          if (shapes.indexOf(imageShape) === -1) {
+            shapes.push(imageShape);
+          }
+        }
+      }
+    });
+    const placedFileSize = window.__pendingImageFileSize || 0;
+    finalImage.__fileSize = placedFileSize;
+    window.__roomImageBytesUsed = (window.__roomImageBytesUsed || 0) + placedFileSize;
+    window.__pendingImageFileSize = 0;
+    finalImage.addEventListener("click", selectImage);
+    if (hoveredFrameImage) {
+      hoveredFrameImage.removeHighlight();
+      hoveredFrameImage = null;
+    }
+    const placedShape = imageShape;
+    if (window.__sketchStoreApi) window.__sketchStoreApi.setActiveTool("select", { afterDraw: true });
+    currentShape = placedShape;
+    currentShape.isSelected = true;
+    placedShape.selectShape();
+    const uploader = typeof window !== "undefined" && window.uploadImageToCloudinary || uploadImageToCloudinary;
+    uploader(imageShape).catch((err) => {
+      console.warn("[ImageTool] Upload pipeline error:", err);
+    });
+  } catch (error) {
+    console.error("Error placing image:", error);
+    isDraggingImage = false;
+    imageToPlace = null;
+    isImageToolActive = false;
+  } finally {
+    isDraggingImage = false;
+    imageToPlace = null;
+    isImageToolActive = false;
+  }
+};
+var handleMouseUpImage = (e) => {
+  if (isSelectionToolActive && selectedImage) {
+    const clickedElement = e.target;
+    const isOnSVG = clickedElement === svg || clickedElement.ownerSVGElement === svg;
+    const isImageElement = clickedElement.tagName === "image";
+    const isAnchorElement = clickedElement.classList.contains("resize-anchor") || clickedElement.classList.contains("rotation-anchor") || clickedElement.classList.contains("selection-outline");
+    if (isOnSVG && !isImageElement && !isAnchorElement && clickedElement === svg && !isDragging && !isRotatingImage && !currentAnchor) {
+      removeSelectionOutline();
+      selectedImage = null;
+      if (window.__sketchStoreApi) {
+        window.__sketchStoreApi.clearSelectedShapeSidebar();
+      }
+    }
+  }
+  if (hoveredFrameImage) {
+    hoveredFrameImage.removeHighlight();
+    hoveredFrameImage = null;
+  }
+};
+function selectImage(event) {
+  if (!isSelectionToolActive) return;
+  event.stopPropagation();
+  if (selectedImage) {
+    removeSelectionOutline();
+  }
+  selectedImage = event.target;
+  const transform = selectedImage.getAttribute("transform");
+  if (transform) {
+    const rotateMatch = transform.match(/rotate\(([^,]+)/);
+    if (rotateMatch) {
+      imageRotation = parseFloat(rotateMatch[1]);
+    }
+  } else {
+    imageRotation = 0;
+  }
+  addSelectionOutline();
+  originalX = parseFloat(selectedImage.getAttribute("x"));
+  originalY = parseFloat(selectedImage.getAttribute("y"));
+  originalWidth = parseFloat(selectedImage.getAttribute("width"));
+  originalHeight = parseFloat(selectedImage.getAttribute("height"));
+  selectedImage.addEventListener("pointerdown", startDrag);
+  selectedImage.addEventListener("pointerup", stopDrag);
+  selectedImage.addEventListener("pointerleave", stopDrag);
+  const imageShape = typeof shapes !== "undefined" && Array.isArray(shapes) ? shapes.find((s) => s.shapeName === "image" && s.element === selectedImage) : null;
+  if (imageShape) {
+    window.currentShape = imageShape;
+  }
+  if (typeof window.__showSidebarForShape === "function") {
+    window.__showSidebarForShape("image");
+  }
+}
+function addSelectionOutline() {
+  if (!selectedImage) return;
+  const x = parseFloat(selectedImage.getAttribute("x"));
+  const y = parseFloat(selectedImage.getAttribute("y"));
+  const width = parseFloat(selectedImage.getAttribute("width"));
+  const height = parseFloat(selectedImage.getAttribute("height"));
+  const selectionPadding = 8;
+  const expandedX = x - selectionPadding;
+  const expandedY = y - selectionPadding;
+  const expandedWidth = width + 2 * selectionPadding;
+  const expandedHeight = height + 2 * selectionPadding;
+  const outlinePoints = [
+    [expandedX, expandedY],
+    [expandedX + expandedWidth, expandedY],
+    [expandedX + expandedWidth, expandedY + expandedHeight],
+    [expandedX, expandedY + expandedHeight],
+    [expandedX, expandedY]
+  ];
+  const pointsAttr = outlinePoints.map((p) => p.join(",")).join(" ");
+  const outline = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+  outline.setAttribute("points", pointsAttr);
+  outline.setAttribute("fill", "none");
+  outline.setAttribute("stroke", "#5B57D1");
+  outline.setAttribute("stroke-width", 1.5);
+  outline.setAttribute("stroke-dasharray", "4 2");
+  outline.setAttribute("style", "pointer-events: none;");
+  outline.setAttribute("class", "selection-outline");
+  const centerX = x + width / 2;
+  const centerY = y + height / 2;
+  outline.setAttribute("transform", `rotate(${imageRotation}, ${centerX}, ${centerY})`);
+  svg.appendChild(outline);
+  addResizeAnchors(expandedX, expandedY, expandedWidth, expandedHeight, centerX, centerY);
+  addRotationAnchor(expandedX, expandedY, expandedWidth, expandedHeight, centerX, centerY);
+}
+function removeSelectionOutline() {
+  svg.querySelectorAll(".selection-outline").forEach((el) => el.remove());
+  removeResizeAnchors();
+  removeRotationAnchor();
+  if (selectedImage) {
+    selectedImage.removeEventListener("pointerdown", startDrag);
+    selectedImage.removeEventListener("pointerup", stopDrag);
+    selectedImage.removeEventListener("pointerleave", stopDrag);
+  }
+}
+function addResizeAnchors(x, y, width, height, centerX, centerY) {
+  const zoom = window.currentZoom || 1;
+  const anchorSize = 10 / zoom;
+  const anchorStrokeWidth = 2;
+  const positions = [
+    { x, y },
+    // Top-left
+    { x: x + width, y },
+    // Top-right
+    { x, y: y + height },
+    // Bottom-left
+    { x: x + width, y: y + height }
+    // Bottom-right
+  ];
+  positions.forEach((pos, i) => {
+    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.style.cursor = ["nw-resize", "ne-resize", "sw-resize", "se-resize"][i];
+    anchor.setAttribute("transform", `rotate(${imageRotation}, ${centerX}, ${centerY})`);
+    svg.appendChild(anchor);
+    anchor.addEventListener("pointerdown", startResize);
+    anchor.addEventListener("pointerup", stopResize);
+  });
+}
+function addRotationAnchor(x, y, width, height, centerX, centerY) {
+  const anchorStrokeWidth = 2;
+  const rotationAnchorPos = { x: x + width / 2, y: y - 30 };
+  const rotationAnchor = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  rotationAnchor.setAttribute("cx", rotationAnchorPos.x);
+  rotationAnchor.setAttribute("cy", rotationAnchorPos.y);
+  rotationAnchor.setAttribute("r", 8);
+  rotationAnchor.setAttribute("class", "rotation-anchor");
+  rotationAnchor.setAttribute("fill", "#121212");
+  rotationAnchor.setAttribute("stroke", "#5B57D1");
+  rotationAnchor.setAttribute("stroke-width", anchorStrokeWidth);
+  rotationAnchor.setAttribute("style", "pointer-events: all;");
+  rotationAnchor.setAttribute("transform", `rotate(${imageRotation}, ${centerX}, ${centerY})`);
+  svg.appendChild(rotationAnchor);
+  rotationAnchor.addEventListener("pointerdown", startRotation);
+  rotationAnchor.addEventListener("pointerup", stopRotation);
+  rotationAnchor.addEventListener("mouseover", function() {
+    if (!isRotatingImage && !isDragging) {
+      rotationAnchor.style.cursor = "grab";
+    }
+  });
+  rotationAnchor.addEventListener("mouseout", function() {
+    if (!isRotatingImage && !isDragging) {
+      rotationAnchor.style.cursor = "default";
+    }
+  });
+}
+function removeRotationAnchor() {
+  svg.querySelectorAll(".rotation-anchor").forEach((el) => el.remove());
+}
+function removeResizeAnchors() {
+  const anchors = svg.querySelectorAll(".resize-anchor");
+  anchors.forEach((anchor) => svg.removeChild(anchor));
+}
+function startResize(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  currentAnchor = event.target;
+  originalX = parseFloat(selectedImage.getAttribute("x"));
+  originalY = parseFloat(selectedImage.getAttribute("y"));
+  originalWidth = parseFloat(selectedImage.getAttribute("width"));
+  originalHeight = parseFloat(selectedImage.getAttribute("height"));
+  const transform = selectedImage.getAttribute("transform");
+  if (transform) {
+    const rotateMatch = transform.match(/rotate\(([^,]+)/);
+    if (rotateMatch) {
+      imageRotation = parseFloat(rotateMatch[1]);
+    }
+  }
+  svg.addEventListener("pointermove", resizeImage);
+  document.addEventListener("pointerup", stopResize);
+}
+function stopResize(event) {
+  stopInteracting();
+  document.removeEventListener("pointerup", stopResize);
+}
+function resizeImage(event) {
+  if (!selectedImage || !currentAnchor) return;
+  const { x: globalX, y: globalY } = getSVGCoordsFromMouse(event);
+  const centerX = originalX + originalWidth / 2;
+  const centerY = originalY + originalHeight / 2;
+  let localX = globalX;
+  let localY = globalY;
+  if (imageRotation !== 0) {
+    const rotationRad = imageRotation * Math.PI / 180;
+    const translatedX = globalX - centerX;
+    const translatedY = globalY - centerY;
+    localX = translatedX * Math.cos(-rotationRad) - translatedY * Math.sin(-rotationRad) + centerX;
+    localY = translatedX * Math.sin(-rotationRad) + translatedY * Math.cos(-rotationRad) + centerY;
+  }
+  let dx = localX - originalX;
+  let dy = localY - originalY;
+  let newWidth = originalWidth;
+  let newHeight = originalHeight;
+  let newX = originalX;
+  let newY = originalY;
+  const aspectRatio = originalHeight / originalWidth;
+  let fixedRelX, fixedRelY;
+  switch (currentAnchor.style.cursor) {
+    case "nw-resize":
+      newWidth = originalWidth - dx;
+      newHeight = originalHeight - dy;
+      if (aspect_ratio_lock) {
+        newHeight = newWidth * aspectRatio;
+        dy = originalHeight - newHeight;
+      }
+      newX = originalX + (originalWidth - newWidth);
+      newY = originalY + (originalHeight - newHeight);
+      fixedRelX = originalWidth;
+      fixedRelY = originalHeight;
+      break;
+    case "ne-resize":
+      newWidth = dx;
+      newHeight = originalHeight - dy;
+      if (aspect_ratio_lock) {
+        newHeight = newWidth * aspectRatio;
+        dy = originalHeight - newHeight;
+      }
+      newX = originalX;
+      newY = originalY + (originalHeight - newHeight);
+      fixedRelX = 0;
+      fixedRelY = originalHeight;
+      break;
+    case "sw-resize":
+      newWidth = originalWidth - dx;
+      newHeight = dy;
+      if (aspect_ratio_lock) {
+        newHeight = newWidth * aspectRatio;
+        dy = newHeight;
+      }
+      newX = originalX + (originalWidth - newWidth);
+      newY = originalY;
+      fixedRelX = originalWidth;
+      fixedRelY = 0;
+      break;
+    case "se-resize":
+      newWidth = dx;
+      newHeight = dy;
+      if (aspect_ratio_lock) {
+        newHeight = newWidth * aspectRatio;
+      }
+      newX = originalX;
+      newY = originalY;
+      fixedRelX = 0;
+      fixedRelY = 0;
+      break;
+  }
+  newWidth = Math.max(minImageSize, newWidth);
+  newHeight = Math.max(minImageSize, newHeight);
+  if (imageRotation !== 0) {
+    const rad = imageRotation * Math.PI / 180;
+    const cosR = Math.cos(rad);
+    const sinR = Math.sin(rad);
+    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;
+  }
+  selectedImage.setAttribute("width", newWidth);
+  selectedImage.setAttribute("height", newHeight);
+  selectedImage.setAttribute("x", newX);
+  selectedImage.setAttribute("y", newY);
+  selectedImage.setAttribute("data-shape-x", newX);
+  selectedImage.setAttribute("data-shape-y", newY);
+  selectedImage.setAttribute("data-shape-width", newWidth);
+  selectedImage.setAttribute("data-shape-height", newHeight);
+  const newCenterX = newX + newWidth / 2;
+  const newCenterY = newY + newHeight / 2;
+  selectedImage.setAttribute("transform", `rotate(${imageRotation}, ${newCenterX}, ${newCenterY})`);
+  updateAttachedArrows(selectedImage);
+  removeSelectionOutline();
+  addSelectionOutline();
+}
+function stopRotation(event) {
+  if (!isRotatingImage) return;
+  stopInteracting();
+  isRotatingImage = false;
+  startRotationMouseAngle = null;
+  startImageRotation = null;
+  svg.removeEventListener("pointermove", rotateImage);
+  document.removeEventListener("pointerup", stopRotation);
+  svg.style.cursor = "default";
+}
+function startDrag(event) {
+  if (!isSelectionToolActive || !selectedImage) return;
+  event.preventDefault();
+  event.stopPropagation();
+  isDragging = true;
+  originalX = parseFloat(selectedImage.getAttribute("x"));
+  originalY = parseFloat(selectedImage.getAttribute("y"));
+  originalWidth = parseFloat(selectedImage.getAttribute("width"));
+  originalHeight = parseFloat(selectedImage.getAttribute("height"));
+  const transform = selectedImage.getAttribute("transform");
+  if (transform) {
+    const rotateMatch = transform.match(/rotate\(([^,]+)/);
+    if (rotateMatch) {
+      imageRotation = parseFloat(rotateMatch[1]);
+    }
+  }
+  let imageShape = null;
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    imageShape = shapes.find((shape) => shape.shapeName === "image" && shape.element === selectedImage);
+  }
+  if (imageShape) {
+    draggedShapeInitialFrameImage = imageShape.parentFrame || null;
+    if (imageShape.parentFrame) {
+      imageShape.parentFrame.temporarilyRemoveFromFrame(imageShape);
+    }
+  }
+  const { x, y } = getSVGCoordsFromMouse(event);
+  dragOffsetX = x - parseFloat(selectedImage.getAttribute("x"));
+  dragOffsetY = y - parseFloat(selectedImage.getAttribute("y"));
+  svg.addEventListener("pointermove", dragImage);
+  document.addEventListener("pointerup", stopDrag);
+}
+function dragImage(event) {
+  if (!isDragging || !selectedImage) return;
+  const { x, y } = getSVGCoordsFromMouse(event);
+  let newX = x - dragOffsetX;
+  let newY = y - dragOffsetY;
+  selectedImage.setAttribute("x", newX);
+  selectedImage.setAttribute("y", newY);
+  selectedImage.setAttribute("data-shape-x", newX);
+  selectedImage.setAttribute("data-shape-y", newY);
+  const newCenterX = newX + parseFloat(selectedImage.getAttribute("width")) / 2;
+  const newCenterY = newY + parseFloat(selectedImage.getAttribute("height")) / 2;
+  selectedImage.setAttribute("transform", `rotate(${imageRotation}, ${newCenterX}, ${newCenterY})`);
+  if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+    const imageShape = shapes.find((shape) => shape.shapeName === "image" && shape.element === selectedImage);
+    if (imageShape) {
+      imageShape.updateFrameContainment();
+    }
+  }
+  updateAttachedArrows(selectedImage);
+  removeSelectionOutline();
+  addSelectionOutline();
+}
+function stopDrag(event) {
+  stopInteracting();
+  document.removeEventListener("pointerup", stopDrag);
+}
+function startRotation(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  if (!selectedImage) return;
+  isRotatingImage = true;
+  const imgX = parseFloat(selectedImage.getAttribute("x"));
+  const imgY = parseFloat(selectedImage.getAttribute("y"));
+  const imgWidth = parseFloat(selectedImage.getAttribute("width"));
+  const imgHeight = parseFloat(selectedImage.getAttribute("height"));
+  const centerX = imgX + imgWidth / 2;
+  const centerY = imgY + imgHeight / 2;
+  const { x: mouseX, y: mouseY } = getSVGCoordsFromMouse(event);
+  startRotationMouseAngle = Math.atan2(mouseY - centerY, mouseX - centerX) * 180 / Math.PI;
+  startImageRotation = imageRotation;
+  svg.addEventListener("pointermove", rotateImage);
+  document.addEventListener("pointerup", stopRotation);
+  svg.style.cursor = "grabbing";
+}
+function rotateImage(event) {
+  if (!isRotatingImage || !selectedImage) return;
+  const imgX = parseFloat(selectedImage.getAttribute("x"));
+  const imgY = parseFloat(selectedImage.getAttribute("y"));
+  const imgWidth = parseFloat(selectedImage.getAttribute("width"));
+  const imgHeight = parseFloat(selectedImage.getAttribute("height"));
+  const centerX = imgX + imgWidth / 2;
+  const centerY = imgY + imgHeight / 2;
+  const { x: mouseX, y: mouseY } = getSVGCoordsFromMouse(event);
+  const currentMouseAngle = Math.atan2(mouseY - centerY, mouseX - centerX) * 180 / Math.PI;
+  const angleDiff = currentMouseAngle - startRotationMouseAngle;
+  imageRotation = startImageRotation + angleDiff;
+  imageRotation = imageRotation % 360;
+  if (imageRotation < 0) imageRotation += 360;
+  selectedImage.setAttribute("transform", `rotate(${imageRotation}, ${centerX}, ${centerY})`);
+  selectedImage.setAttribute("data-shape-rotation", imageRotation);
+  updateAttachedArrows(selectedImage);
+  removeSelectionOutline();
+  addSelectionOutline();
+}
+function stopInteracting() {
+  if (selectedImage && (isDragging || isRotatingImage || currentAnchor)) {
+    const newPos = {
+      x: parseFloat(selectedImage.getAttribute("x")),
+      y: parseFloat(selectedImage.getAttribute("y")),
+      width: parseFloat(selectedImage.getAttribute("width")),
+      height: parseFloat(selectedImage.getAttribute("height")),
+      rotation: imageRotation
+    };
+    let originalRotation = imageRotation;
+    if (isRotatingImage && startImageRotation !== null) {
+      originalRotation = startImageRotation;
+    }
+    const oldPos = {
+      x: originalX,
+      y: originalY,
+      width: originalWidth,
+      height: originalHeight,
+      rotation: originalRotation
+    };
+    let imageShape = null;
+    if (typeof shapes !== "undefined" && Array.isArray(shapes)) {
+      imageShape = shapes.find((shape) => shape.shapeName === "image" && shape.element === selectedImage);
+    }
+    const oldPosWithFrame = {
+      ...oldPos,
+      parentFrame: draggedShapeInitialFrameImage
+    };
+    const newPosWithFrame = {
+      ...newPos,
+      parentFrame: isDragging ? hoveredFrameImage || null : imageShape ? imageShape.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) {
+      pushTransformAction({
+        type: "image",
+        element: selectedImage,
+        restore: (pos) => {
+          selectedImage.setAttribute("x", pos.x);
+          selectedImage.setAttribute("y", pos.y);
+          selectedImage.setAttribute("width", pos.width);
+          selectedImage.setAttribute("height", pos.height);
+          const centerX = pos.x + pos.width / 2;
+          const centerY = pos.y + pos.height / 2;
+          selectedImage.setAttribute("transform", `rotate(${pos.rotation}, ${centerX}, ${centerY})`);
+          imageRotation = pos.rotation;
+          if (selectedImage) {
+            removeSelectionOutline();
+            addSelectionOutline();
+          }
+          selectedImage.setAttribute("data-shape-x", pos.x);
+          selectedImage.setAttribute("data-shape-y", pos.y);
+          selectedImage.setAttribute("data-shape-width", pos.width);
+          selectedImage.setAttribute("data-shape-height", pos.height);
+          selectedImage.setAttribute("data-shape-rotation", pos.rotation);
+          updateAttachedArrows(selectedImage);
+        }
+      }, oldPosWithFrame, newPosWithFrame);
+    }
+    if (isDragging && imageShape) {
+      const finalFrame = hoveredFrameImage;
+      if (draggedShapeInitialFrameImage !== finalFrame) {
+        if (draggedShapeInitialFrameImage) {
+          draggedShapeInitialFrameImage.removeShapeFromFrame(imageShape);
+        }
+        if (finalFrame) {
+          finalFrame.addShapeToFrame(imageShape);
+        }
+        if (frameChanged) {
+          pushFrameAttachmentAction(
+            finalFrame || draggedShapeInitialFrameImage,
+            imageShape,
+            finalFrame ? "attach" : "detach",
+            draggedShapeInitialFrameImage
+          );
+        }
+      } else if (draggedShapeInitialFrameImage) {
+        draggedShapeInitialFrameImage.restoreToFrame(imageShape);
+      }
+    }
+    draggedShapeInitialFrameImage = null;
+  }
+  if (hoveredFrameImage) {
+    hoveredFrameImage.removeHighlight();
+    hoveredFrameImage = null;
+  }
+  isDragging = false;
+  isRotatingImage = false;
+  svg.removeEventListener("pointermove", dragImage);
+  svg.removeEventListener("pointermove", resizeImage);
+  svg.removeEventListener("pointermove", rotateImage);
+  currentAnchor = null;
+  startRotationMouseAngle = null;
+  startImageRotation = null;
+  if (selectedImage) {
+    originalX = parseFloat(selectedImage.getAttribute("x"));
+    originalY = parseFloat(selectedImage.getAttribute("y"));
+    originalWidth = parseFloat(selectedImage.getAttribute("width"));
+    originalHeight = parseFloat(selectedImage.getAttribute("height"));
+    const transform = selectedImage.getAttribute("transform");
+    if (transform) {
+      const rotateMatch = transform.match(/rotate\(([^,]+)/);
+      if (rotateMatch) {
+        imageRotation = parseFloat(rotateMatch[1]);
+      }
+    }
+    selectedImage.setAttribute("data-shape-x", originalX);
+    selectedImage.setAttribute("data-shape-y", originalY);
+    selectedImage.setAttribute("data-shape-width", originalWidth);
+    selectedImage.setAttribute("data-shape-height", originalHeight);
+    selectedImage.setAttribute("data-shape-rotation", imageRotation);
+    updateAttachedArrows(selectedImage);
+  }
+}
+function deleteCurrentImage() {
+  if (selectedImage) {
+    let imageShape = typeof shapes !== "undefined" && Array.isArray(shapes) ? shapes.find((s) => s.shapeName === "image" && s.element === selectedImage) : null;
+    if (imageShape?.uploadAbortController) {
+      imageShape.uploadAbortController.abort();
+      imageShape.removeUploadIndicator();
+    }
+    const freedBytes = selectedImage.__fileSize || 0;
+    window.__roomImageBytesUsed = Math.max(0, (window.__roomImageBytesUsed || 0) - freedBytes);
+    const imgHref = selectedImage.getAttribute("href") || selectedImage.getAttributeNS("http://www.w3.org/1999/xlink", "href") || "";
+    if (imgHref.includes("cloudinary.com") || imgHref.includes("res.cloudinary")) {
+      const match = imgHref.match(/\/upload\/(?:v\d+\/)?(lixsketch\/.+?)(?:\.\w+)?$/);
+      if (match) {
+        const publicId = match[1];
+        const workerUrl = window.__WORKER_URL;
+        if (workerUrl) {
+          fetch(`${workerUrl}/api/images/delete`, {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ publicId })
+          }).catch((err) => console.warn("[ImageTool] Cloudinary cleanup failed:", err));
+        }
+      }
+    }
+    if (imageShape) {
+      const idx = shapes.indexOf(imageShape);
+      if (idx !== -1) shapes.splice(idx, 1);
+      if (imageShape.group && imageShape.group.parentNode) {
+        imageShape.group.parentNode.removeChild(imageShape.group);
+      }
+    }
+    if (!imageShape && selectedImage.parentNode) {
+      selectedImage.parentNode.removeChild(selectedImage);
+    }
+    if (typeof cleanupAttachments === "function") {
+      cleanupAttachments(selectedImage);
+    }
+    if (imageShape) {
+      pushDeleteAction(imageShape);
+    }
+    removeSelectionOutline();
+    selectedImage = null;
+  }
+}
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Delete" && selectedImage) {
+    deleteCurrentImage();
+  }
+});
+window.uploadImageToCloudinary = uploadImageToCloudinary;
+window.openImageFilePicker = function() {
+  isImageToolActive = true;
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.accept = IMAGE_ACCEPT_ATTR;
+  fileInput.style.display = "none";
+  document.body.appendChild(fileInput);
+  let fileSelected = false;
+  fileInput.addEventListener("change", (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      fileSelected = true;
+      handleImageUpload(file);
+    }
+    document.body.removeChild(fileInput);
+  });
+  const onFocus = () => {
+    window.removeEventListener("focus", onFocus);
+    setTimeout(() => {
+      if (!fileSelected) {
+        isImageToolActive = false;
+        if (window.__sketchEngine?.setActiveTool) {
+          window.__sketchEngine.setActiveTool("select");
+        }
+        if (fileInput.parentNode) {
+          document.body.removeChild(fileInput);
+        }
+      }
+    }, 300);
+  };
+  window.addEventListener("focus", onFocus);
+  fileInput.click();
+};
+
+export {
+  handleMouseMoveImage,
+  handleMouseDownImage,
+  handleMouseUpImage
+};
+//# sourceMappingURL=chunk-URB6MY46.js.map