@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/ImageAnnotator/AnnotationEditor.js

@@ -0,0 +1,362 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { uiLogger } from "../../../helpers/uiLogger.js";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import { useNotification } from "../../../hooks/useNotification.js";
+import AnnotationStage from "./canvas/AnnotationStage.js";
+import AnnotationActionBar from "./components/AnnotationActionBar.js";
+import AnnotationCropBar from "./components/AnnotationCropBar.js";
+import AnnotationElementActions from "./components/AnnotationElementActions.js";
+import AnnotationStyleBar from "./components/AnnotationStyleBar.js";
+import AnnotationTextOverlay from "./components/AnnotationTextOverlay.js";
+import AnnotationToolbar from "./components/AnnotationToolbar.js";
+import { fitStageToViewport } from "./helpers/annotationCanvas.js";
+import { fullImageCrop, aspectRatioFor, fitCropToAspect, isFullImageCrop } from "./helpers/annotationCrop.js";
+import { styleFromElement, applyStyleToElement, translateElement, createImageElement, createTextElement, imageMaxDimension } from "./helpers/annotationElements.js";
+import { exportStageToFile } from "./helpers/annotationExport.js";
+import { useAnnotationDocument } from "./hooks/useAnnotationDocument.js";
+import { useAnnotationShortcuts } from "./hooks/useAnnotationShortcuts.js";
+import { useCoarsePointer } from "./hooks/useCoarsePointer.js";
+import { DEFAULT_ANNOTATION_STYLE } from "./annotationStyle.js";
+const CROP_STAGE_GUTTER_PX = 12;
+const ELEMENT_TOOLS = ["freehand", "line", "arrow", "rectangle", "ellipse", "text", "image"];
+const readFileAsDataUrl = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(String(reader.result));
+  reader.onerror = () => reject(new Error("Could not read the selected image"));
+  reader.readAsDataURL(file);
+});
+const loadNaturalSize = (source) => new Promise((resolve, reject) => {
+  const element = new Image();
+  element.onload = () => resolve({ width: element.naturalWidth, height: element.naturalHeight });
+  element.onerror = () => reject(new Error("Could not decode the selected image"));
+  element.src = source;
+});
+const nextFrame = () => new Promise((resolve) => window.requestAnimationFrame(() => resolve()));
+const AnnotationEditor = ({
+  baseImage,
+  imageSize,
+  mimeType,
+  imageName,
+  initialElements,
+  initialCrop,
+  onSave,
+  onSaved
+}) => {
+  const { t } = useTranslation("ui");
+  const { notify } = useNotification();
+  const { isTabletDown } = useBreakpoint();
+  const isCoarsePointer = useCoarsePointer();
+  const touch = isCoarsePointer || isTabletDown;
+  const stageRef = useRef(null);
+  const viewportRef = useRef(null);
+  const [viewport, setViewport] = useState({ width: 0, height: 0 });
+  const [tool, setTool] = useState("select");
+  const [style, setStyle] = useState(DEFAULT_ANNOTATION_STYLE);
+  const [editingText, setEditingText] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [cropDraft, setCropDraft] = useState(null);
+  const [cropAspect, setCropAspect] = useState("free");
+  const controller = useAnnotationDocument(imageSize, initialElements, initialCrop);
+  const { selectedElement, selectedId, updateSelected, addElement, removeElement, updateElement } = controller;
+  const isCropping = tool === "crop";
+  const viewRect = useMemo(
+    () => isCropping ? fullImageCrop(imageSize) : controller.crop ?? fullImageCrop(imageSize),
+    [isCropping, controller.crop, imageSize]
+  );
+  const viewSize = useMemo(
+    () => ({ width: viewRect.width, height: viewRect.height }),
+    [viewRect.width, viewRect.height]
+  );
+  useEffect(() => {
+    const node = viewportRef.current;
+    if (!node) return;
+    const observer = new ResizeObserver((entries) => {
+      const rect = entries[0]?.contentRect;
+      if (rect) setViewport({ width: rect.width, height: rect.height });
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  const stageGutter = isCropping ? CROP_STAGE_GUTTER_PX : 0;
+  const fit = useMemo(
+    () => fitStageToViewport(viewSize, {
+      width: viewport.width - stageGutter * 2,
+      height: viewport.height - stageGutter * 2
+    }),
+    [viewSize, viewport, stageGutter]
+  );
+  useEffect(() => {
+    if (!selectedId) return;
+    setStyle((current) => {
+      const element = controller.elements.find((item) => item.id === selectedId);
+      return element ? styleFromElement(element, current, imageSize) : current;
+    });
+  }, [selectedId]);
+  const handleStyleChange = useCallback(
+    (patch) => {
+      const next = { ...style, ...patch };
+      setStyle(next);
+      if (selectedId) updateSelected((element) => applyStyleToElement(element, next, imageSize));
+    },
+    [style, selectedId, updateSelected, imageSize]
+  );
+  const handleImageStyleChange = useCallback(
+    (patch) => {
+      updateSelected((element) => element.type === "image" ? { ...element, ...patch } : element);
+    },
+    [updateSelected]
+  );
+  const handleTextCommit = useCallback(() => {
+    if (!editingText) return;
+    const trimmed = editingText.value.trim();
+    setEditingText(null);
+    if (!trimmed) {
+      removeElement(editingText.id);
+      return;
+    }
+    updateElement(editingText.id, (element) => element.type === "text" ? { ...element, text: trimmed } : element);
+  }, [editingText, removeElement, updateElement]);
+  const handleToolChange = useCallback(
+    (next) => {
+      handleTextCommit();
+      if (next === "crop") {
+        controller.select(null);
+        setCropDraft(controller.crop ?? fullImageCrop(imageSize));
+        setCropAspect("free");
+      }
+      setTool(next);
+    },
+    [handleTextCommit, controller, imageSize]
+  );
+  const handleCropAspectChange = useCallback(
+    (aspect) => {
+      setCropAspect(aspect);
+      const ratio = aspectRatioFor(aspect, imageSize);
+      if (ratio === null) return;
+      setCropDraft((current) => fitCropToAspect(current ?? fullImageCrop(imageSize), ratio, imageSize));
+    },
+    [imageSize]
+  );
+  const handleCropReset = useCallback(() => {
+    setCropAspect("free");
+    setCropDraft(fullImageCrop(imageSize));
+  }, [imageSize]);
+  const handleCropCancel = useCallback(() => {
+    setCropDraft(null);
+    setTool("select");
+  }, []);
+  const handleCropApply = useCallback(() => {
+    const draft = cropDraft;
+    setCropDraft(null);
+    setTool("select");
+    if (!draft) return;
+    const next = isFullImageCrop(draft, imageSize) ? null : draft;
+    const current = controller.crop;
+    const unchanged = next === current || next !== null && current !== null && next.x === current.x && next.y === current.y && next.width === current.width && next.height === current.height;
+    if (!unchanged) controller.setCrop(next);
+  }, [cropDraft, imageSize, controller]);
+  useEffect(() => {
+    if (!isCropping) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        handleCropCancel();
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleCropApply();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [isCropping, handleCropCancel, handleCropApply]);
+  const handleInsertImage = useCallback(
+    async (file) => {
+      try {
+        const source = await readFileAsDataUrl(file);
+        const natural = await loadNaturalSize(source);
+        addElement(translateElement(createImageElement(source, natural, viewSize), viewRect.x, viewRect.y));
+        setTool("select");
+      } catch (error) {
+        uiLogger.error("Failed to insert an image into the annotation", error);
+        notify({ message: t("imageAnnotator.imageInsertFailed"), type: "error" });
+      }
+    },
+    [addElement, viewSize, viewRect.x, viewRect.y, notify, t]
+  );
+  const handleRequestTextEdit = useCallback(
+    (id) => {
+      const element = controller.elements.find((item) => item.id === id);
+      if (element?.type !== "text") return;
+      setTool("select");
+      controller.select(id);
+      setEditingText({ id, value: element.text });
+    },
+    [controller]
+  );
+  const handleTextPlaced = useCallback(
+    (point) => {
+      const element = createTextElement(point, style, imageSize);
+      addElement(element);
+      setTool("select");
+      setEditingText({ id: element.id, value: "" });
+    },
+    [style, imageSize, addElement]
+  );
+  const handleTextCancel = useCallback(() => {
+    if (!editingText) return;
+    const element = controller.elements.find((item) => item.id === editingText.id);
+    setEditingText(null);
+    if (element?.type === "text" && !element.text.trim()) removeElement(editingText.id);
+  }, [editingText, controller.elements, removeElement]);
+  const handleSave = async () => {
+    const stage = stageRef.current;
+    if (!stage || saving || isCropping) return;
+    setSaving(true);
+    handleTextCommit();
+    controller.select(null);
+    try {
+      await nextFrame();
+      await nextFrame();
+      const file = await exportStageToFile({ stage, imageSize: viewSize, mimeType, imageName });
+      await onSave(file, controller.document);
+      onSaved();
+    } catch (error) {
+      uiLogger.error("Failed to save annotated image", error);
+      notify({ message: t("imageAnnotator.sendFailed"), type: "error" });
+    } finally {
+      setSaving(false);
+    }
+  };
+  useAnnotationShortcuts({
+    active: !editingText && !isCropping,
+    controller,
+    imageMaxDimension: imageMaxDimension(imageSize),
+    onToolChange: handleToolChange
+  });
+  const activeType = useMemo(() => {
+    if (selectedElement) return selectedElement.type;
+    return ELEMENT_TOOLS.includes(tool) ? tool : null;
+  }, [selectedElement, tool]);
+  const editingElement = useMemo(() => {
+    const element = controller.elements.find((item) => item.id === editingText?.id);
+    return element?.type === "text" ? element : null;
+  }, [controller.elements, editingText?.id]);
+  const elementActions = selectedElement ? /* @__PURE__ */ jsx(
+    AnnotationElementActions,
+    {
+      touch,
+      onReorder: controller.reorderSelected,
+      onDuplicate: controller.duplicateSelected,
+      onDelete: () => selectedId && removeElement(selectedId)
+    }
+  ) : null;
+  const actionBar = /* @__PURE__ */ jsx(
+    AnnotationActionBar,
+    {
+      touch,
+      saving,
+      canUndo: controller.canUndo && !isCropping,
+      canRedo: controller.canRedo && !isCropping,
+      canClear: controller.elements.length > 0 && !isCropping,
+      canSave: !controller.isEmpty && !isCropping,
+      elementActions: touch ? elementActions : void 0,
+      onUndo: controller.undo,
+      onRedo: controller.redo,
+      onClear: controller.clear,
+      onSave: handleSave
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsx(
+      AnnotationToolbar,
+      {
+        tool,
+        touch,
+        actions: touch ? void 0 : actionBar,
+        onToolChange: handleToolChange,
+        onInsertImage: handleInsertImage
+      }
+    ),
+    isCropping ? /* @__PURE__ */ jsx(
+      AnnotationCropBar,
+      {
+        aspect: cropAspect,
+        touch,
+        canReset: !isFullImageCrop(cropDraft, imageSize),
+        onAspectChange: handleCropAspectChange,
+        onReset: handleCropReset,
+        onCancel: handleCropCancel,
+        onApply: handleCropApply
+      }
+    ) : /* @__PURE__ */ jsx(
+      AnnotationStyleBar,
+      {
+        style,
+        activeType,
+        selectedElement,
+        touch,
+        elementActions: touch ? void 0 : elementActions,
+        onStyleChange: handleStyleChange,
+        onImageStyleChange: handleImageStyleChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: viewportRef,
+        className: "relative flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-xl bg-ink/95 p-3",
+        children: fit.width > 1 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative",
+            style: { width: fit.width + stageGutter * 2, height: fit.height + stageGutter * 2 },
+            children: [
+              /* @__PURE__ */ jsx(
+                AnnotationStage,
+                {
+                  baseImage,
+                  imageSize,
+                  fit,
+                  viewRect,
+                  cropDraft,
+                  cropAspectRatio: aspectRatioFor(cropAspect, imageSize),
+                  gutter: stageGutter,
+                  onCropDraftChange: setCropDraft,
+                  tool,
+                  style,
+                  controller,
+                  editingTextId: editingText?.id ?? null,
+                  stageRef,
+                  onRequestTextEdit: handleRequestTextEdit,
+                  onTextPlaced: handleTextPlaced
+                }
+              ),
+              editingText && editingElement && /* @__PURE__ */ jsx(
+                AnnotationTextOverlay,
+                {
+                  element: editingElement,
+                  viewScale: fit.scale,
+                  viewOrigin: viewRect,
+                  value: editingText.value,
+                  onChange: (value) => setEditingText((current) => current ? { ...current, value } : current),
+                  onCommit: handleTextCommit,
+                  onCancel: handleTextCancel
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    touch && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actionBar })
+  ] });
+};
+export {
+  AnnotationEditor as default
+};
+//# sourceMappingURL=AnnotationEditor.js.map

package/dist/components/UI/ImageAnnotator/AnnotationEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationEditor.js","sources":["../../../../src/components/UI/ImageAnnotator/AnnotationEditor.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport Konva from 'konva';\nimport { useTranslation } from 'react-i18next';\n\nimport { uiLogger } from '@/helpers/uiLogger';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\nimport { useNotification } from '@/hooks/useNotification';\n\nimport AnnotationStage from './canvas/AnnotationStage';\nimport AnnotationActionBar from './components/AnnotationActionBar';\nimport AnnotationCropBar from './components/AnnotationCropBar';\nimport AnnotationElementActions from './components/AnnotationElementActions';\nimport AnnotationStyleBar from './components/AnnotationStyleBar';\nimport AnnotationTextOverlay from './components/AnnotationTextOverlay';\nimport AnnotationToolbar from './components/AnnotationToolbar';\nimport { fitStageToViewport } from './helpers/annotationCanvas';\nimport {\n  aspectRatioFor,\n  fitCropToAspect,\n  fullImageCrop,\n  isFullImageCrop,\n  TAnnotationCropAspect,\n} from './helpers/annotationCrop';\nimport {\n  applyStyleToElement,\n  createImageElement,\n  createTextElement,\n  imageMaxDimension,\n  styleFromElement,\n  translateElement,\n} from './helpers/annotationElements';\nimport { exportStageToFile } from './helpers/annotationExport';\nimport { useAnnotationDocument } from './hooks/useAnnotationDocument';\nimport { useAnnotationShortcuts } from './hooks/useAnnotationShortcuts';\nimport { useCoarsePointer } from './hooks/useCoarsePointer';\nimport {\n  IAnnotationCropRect,\n  IAnnotationDocument,\n  IAnnotationImageElement,\n  IAnnotationPoint,\n  IAnnotationSize,\n  TAnnotationElement,\n  TAnnotationElementType,\n  TAnnotationTool,\n} from './interfaces/annotationDocument';\nimport { DEFAULT_ANNOTATION_STYLE, IAnnotationStyle } from './annotationStyle';\n\nconst CROP_STAGE_GUTTER_PX = 12;\n\nconst ELEMENT_TOOLS: Array<TAnnotationTool> = ['freehand', 'line', 'arrow', 'rectangle', 'ellipse', 'text', 'image'];\n\ninterface IAnnotationEditorProps {\n  baseImage: HTMLImageElement;\n  imageSize: IAnnotationSize;\n  mimeType: string;\n  imageName?: string;\n  initialElements: Array<TAnnotationElement>;\n  initialCrop: IAnnotationCropRect | null;\n  onSave: (file: File, document: IAnnotationDocument) => Promise<void> | void;\n  onSaved: () => void;\n}\n\nconst readFileAsDataUrl = (file: File): Promise<string> =>\n  new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.onload = () => resolve(String(reader.result));\n    reader.onerror = () => reject(new Error('Could not read the selected image'));\n    reader.readAsDataURL(file);\n  });\n\nconst loadNaturalSize = (source: string): Promise<IAnnotationSize> =>\n  new Promise((resolve, reject) => {\n    const element = new Image();\n    element.onload = () => resolve({ width: element.naturalWidth, height: element.naturalHeight });\n    element.onerror = () => reject(new Error('Could not decode the selected image'));\n    element.src = source;\n  });\n\nconst nextFrame = (): Promise<void> => new Promise((resolve) => window.requestAnimationFrame(() => resolve()));\n\nconst AnnotationEditor: React.FC<IAnnotationEditorProps> = ({\n  baseImage,\n  imageSize,\n  mimeType,\n  imageName,\n  initialElements,\n  initialCrop,\n  onSave,\n  onSaved,\n}) => {\n  const { t } = useTranslation('ui');\n  const { notify } = useNotification();\n  const { isTabletDown } = useBreakpoint();\n  const isCoarsePointer = useCoarsePointer();\n  const touch = isCoarsePointer || isTabletDown;\n\n  const stageRef = useRef<Konva.Stage | null>(null);\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n\n  const [viewport, setViewport] = useState<IAnnotationSize>({ width: 0, height: 0 });\n  const [tool, setTool] = useState<TAnnotationTool>('select');\n  const [style, setStyle] = useState<IAnnotationStyle>(DEFAULT_ANNOTATION_STYLE);\n  const [editingText, setEditingText] = useState<{ id: string; value: string } | null>(null);\n  const [saving, setSaving] = useState(false);\n  const [cropDraft, setCropDraft] = useState<IAnnotationCropRect | null>(null);\n  const [cropAspect, setCropAspect] = useState<TAnnotationCropAspect>('free');\n\n  const controller = useAnnotationDocument(imageSize, initialElements, initialCrop);\n  const { selectedElement, selectedId, updateSelected, addElement, removeElement, updateElement } = controller;\n\n  const isCropping = tool === 'crop';\n  const viewRect = useMemo<IAnnotationCropRect>(\n    () => (isCropping ? fullImageCrop(imageSize) : (controller.crop ?? fullImageCrop(imageSize))),\n    [isCropping, controller.crop, imageSize],\n  );\n  const viewSize = useMemo<IAnnotationSize>(\n    () => ({ width: viewRect.width, height: viewRect.height }),\n    [viewRect.width, viewRect.height],\n  );\n\n  useEffect(() => {\n    const node = viewportRef.current;\n    if (!node) return;\n\n    const observer = new ResizeObserver((entries) => {\n      const rect = entries[0]?.contentRect;\n      if (rect) setViewport({ width: rect.width, height: rect.height });\n    });\n    observer.observe(node);\n\n    return () => observer.disconnect();\n  }, []);\n\n  const stageGutter = isCropping ? CROP_STAGE_GUTTER_PX : 0;\n  const fit = useMemo(\n    () =>\n      fitStageToViewport(viewSize, {\n        width: viewport.width - stageGutter * 2,\n        height: viewport.height - stageGutter * 2,\n      }),\n    [viewSize, viewport, stageGutter],\n  );\n\n  /** Selecting mirrors the element into the toolbar, so the controls never describe a stale style. */\n  useEffect(() => {\n    if (!selectedId) return;\n    setStyle((current) => {\n      const element = controller.elements.find((item) => item.id === selectedId);\n      return element ? styleFromElement(element, current, imageSize) : current;\n    });\n  }, [selectedId]);\n\n  const handleStyleChange = useCallback(\n    (patch: Partial<IAnnotationStyle>) => {\n      const next = { ...style, ...patch };\n      setStyle(next);\n      if (selectedId) updateSelected((element) => applyStyleToElement(element, next, imageSize));\n    },\n    [style, selectedId, updateSelected, imageSize],\n  );\n\n  const handleImageStyleChange = useCallback(\n    (patch: Partial<IAnnotationImageElement>) => {\n      updateSelected((element) => (element.type === 'image' ? { ...element, ...patch } : element));\n    },\n    [updateSelected],\n  );\n\n  const handleTextCommit = useCallback(() => {\n    if (!editingText) return;\n    const trimmed = editingText.value.trim();\n    setEditingText(null);\n\n    if (!trimmed) {\n      removeElement(editingText.id);\n      return;\n    }\n    updateElement(editingText.id, (element) => (element.type === 'text' ? { ...element, text: trimmed } : element));\n  }, [editingText, removeElement, updateElement]);\n\n  const handleToolChange = useCallback(\n    (next: TAnnotationTool) => {\n      handleTextCommit();\n      if (next === 'crop') {\n        controller.select(null);\n        setCropDraft(controller.crop ?? fullImageCrop(imageSize));\n        setCropAspect('free');\n      }\n      setTool(next);\n    },\n    [handleTextCommit, controller, imageSize],\n  );\n\n  const handleCropAspectChange = useCallback(\n    (aspect: TAnnotationCropAspect) => {\n      setCropAspect(aspect);\n      const ratio = aspectRatioFor(aspect, imageSize);\n      if (ratio === null) return;\n      setCropDraft((current) => fitCropToAspect(current ?? fullImageCrop(imageSize), ratio, imageSize));\n    },\n    [imageSize],\n  );\n\n  const handleCropReset = useCallback(() => {\n    setCropAspect('free');\n    setCropDraft(fullImageCrop(imageSize));\n  }, [imageSize]);\n\n  const handleCropCancel = useCallback(() => {\n    setCropDraft(null);\n    setTool('select');\n  }, []);\n\n  const handleCropApply = useCallback(() => {\n    const draft = cropDraft;\n    setCropDraft(null);\n    setTool('select');\n    if (!draft) return;\n    const next = isFullImageCrop(draft, imageSize) ? null : draft;\n    const current = controller.crop;\n    const unchanged =\n      next === current ||\n      (next !== null &&\n        current !== null &&\n        next.x === current.x &&\n        next.y === current.y &&\n        next.width === current.width &&\n        next.height === current.height);\n    if (!unchanged) controller.setCrop(next);\n  }, [cropDraft, imageSize, controller]);\n\n  useEffect(() => {\n    if (!isCropping) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        event.stopPropagation();\n        handleCropCancel();\n        return;\n      }\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        handleCropApply();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown, true);\n    return () => window.removeEventListener('keydown', handleKeyDown, true);\n  }, [isCropping, handleCropCancel, handleCropApply]);\n\n  const handleInsertImage = useCallback(\n    async (file: File) => {\n      try {\n        const source = await readFileAsDataUrl(file);\n        const natural = await loadNaturalSize(source);\n        addElement(translateElement(createImageElement(source, natural, viewSize), viewRect.x, viewRect.y));\n        setTool('select');\n      } catch (error) {\n        uiLogger.error('Failed to insert an image into the annotation', error);\n        notify({ message: t('imageAnnotator.imageInsertFailed'), type: 'error' });\n      }\n    },\n    [addElement, viewSize, viewRect.x, viewRect.y, notify, t],\n  );\n\n  const handleRequestTextEdit = useCallback(\n    (id: string) => {\n      const element = controller.elements.find((item) => item.id === id);\n      if (element?.type !== 'text') return;\n      setTool('select');\n      controller.select(id);\n      setEditingText({ id, value: element.text });\n    },\n    [controller],\n  );\n\n  /**\n   * The element is created here, not in the stage: looking it up right after `addElement` would\n   * read the previous render's list and silently skip opening the editor.\n   */\n  const handleTextPlaced = useCallback(\n    (point: IAnnotationPoint) => {\n      const element = createTextElement(point, style, imageSize);\n      addElement(element);\n      setTool('select');\n      setEditingText({ id: element.id, value: '' });\n    },\n    [style, imageSize, addElement],\n  );\n\n  const handleTextCancel = useCallback(() => {\n    if (!editingText) return;\n    const element = controller.elements.find((item) => item.id === editingText.id);\n    setEditingText(null);\n    if (element?.type === 'text' && !element.text.trim()) removeElement(editingText.id);\n  }, [editingText, controller.elements, removeElement]);\n\n  const handleSave = async () => {\n    const stage = stageRef.current;\n    if (!stage || saving || isCropping) return;\n\n    setSaving(true);\n    handleTextCommit();\n    controller.select(null);\n\n    try {\n      await nextFrame();\n      await nextFrame();\n      const file = await exportStageToFile({ stage, imageSize: viewSize, mimeType, imageName });\n      await onSave(file, controller.document);\n      onSaved();\n    } catch (error) {\n      uiLogger.error('Failed to save annotated image', error);\n      notify({ message: t('imageAnnotator.sendFailed'), type: 'error' });\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  useAnnotationShortcuts({\n    active: !editingText && !isCropping,\n    controller,\n    imageMaxDimension: imageMaxDimension(imageSize),\n    onToolChange: handleToolChange,\n  });\n\n  const activeType = useMemo<TAnnotationElementType | null>(() => {\n    if (selectedElement) return selectedElement.type;\n    return ELEMENT_TOOLS.includes(tool) ? (tool as TAnnotationElementType) : null;\n  }, [selectedElement, tool]);\n\n  const editingElement = useMemo(() => {\n    const element = controller.elements.find((item) => item.id === editingText?.id);\n    return element?.type === 'text' ? element : null;\n  }, [controller.elements, editingText?.id]);\n\n  const elementActions = selectedElement ? (\n    <AnnotationElementActions\n      touch={touch}\n      onReorder={controller.reorderSelected}\n      onDuplicate={controller.duplicateSelected}\n      onDelete={() => selectedId && removeElement(selectedId)}\n    />\n  ) : null;\n\n  const actionBar = (\n    <AnnotationActionBar\n      touch={touch}\n      saving={saving}\n      canUndo={controller.canUndo && !isCropping}\n      canRedo={controller.canRedo && !isCropping}\n      canClear={controller.elements.length > 0 && !isCropping}\n      canSave={!controller.isEmpty && !isCropping}\n      elementActions={touch ? elementActions : undefined}\n      onUndo={controller.undo}\n      onRedo={controller.redo}\n      onClear={controller.clear}\n      onSave={handleSave}\n    />\n  );\n\n  return (\n    <div className=\"flex h-full flex-col gap-y-2\">\n      <AnnotationToolbar\n        tool={tool}\n        touch={touch}\n        actions={touch ? undefined : actionBar}\n        onToolChange={handleToolChange}\n        onInsertImage={handleInsertImage}\n      />\n\n      {isCropping ? (\n        <AnnotationCropBar\n          aspect={cropAspect}\n          touch={touch}\n          canReset={!isFullImageCrop(cropDraft, imageSize)}\n          onAspectChange={handleCropAspectChange}\n          onReset={handleCropReset}\n          onCancel={handleCropCancel}\n          onApply={handleCropApply}\n        />\n      ) : (\n        <AnnotationStyleBar\n          style={style}\n          activeType={activeType}\n          selectedElement={selectedElement}\n          touch={touch}\n          elementActions={touch ? undefined : elementActions}\n          onStyleChange={handleStyleChange}\n          onImageStyleChange={handleImageStyleChange}\n        />\n      )}\n\n      <div\n        ref={viewportRef}\n        className=\"relative flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-xl bg-ink/95 p-3\"\n      >\n        {fit.width > 1 && (\n          <div\n            className=\"relative\"\n            style={{ width: fit.width + stageGutter * 2, height: fit.height + stageGutter * 2 }}\n          >\n            <AnnotationStage\n              baseImage={baseImage}\n              imageSize={imageSize}\n              fit={fit}\n              viewRect={viewRect}\n              cropDraft={cropDraft}\n              cropAspectRatio={aspectRatioFor(cropAspect, imageSize)}\n              gutter={stageGutter}\n              onCropDraftChange={setCropDraft}\n              tool={tool}\n              style={style}\n              controller={controller}\n              editingTextId={editingText?.id ?? null}\n              stageRef={stageRef}\n              onRequestTextEdit={handleRequestTextEdit}\n              onTextPlaced={handleTextPlaced}\n            />\n\n            {editingText && editingElement && (\n              <AnnotationTextOverlay\n                element={editingElement}\n                viewScale={fit.scale}\n                viewOrigin={viewRect}\n                value={editingText.value}\n                onChange={(value) => setEditingText((current) => (current ? { ...current, value } : current))}\n                onCommit={handleTextCommit}\n                onCancel={handleTextCancel}\n              />\n            )}\n          </div>\n        )}\n      </div>\n\n      {touch && <div className=\"shrink-0\">{actionBar}</div>}\n    </div>\n  );\n};\n\nexport default AnnotationEditor;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/ImageAnnotator/ImageAnnotationDialog.d.ts

@@ -0,0 +1,15 @@
+import { IAnnotationCropRect, IAnnotationDocument, TAnnotationElement } from './interfaces/annotationDocument';
+interface IImageAnnotationDialogProps {
+    open: boolean;
+    imageUrl: string;
+    imageName?: string;
+    /** Previously saved annotations, when the host persists the document alongside the file. */
+    initialElements?: Array<TAnnotationElement>;
+    /** Previously saved crop (`document.crop`), restored so a reopened image keeps its framing. */
+    initialCrop?: IAnnotationCropRect | null;
+    onClose: () => void;
+    /** Receives the flattened image plus the editable document; resolving closes the dialog. */
+    onSave: (file: File, document: IAnnotationDocument) => Promise<void> | void;
+}
+declare const ImageAnnotationDialog: React.FC<IImageAnnotationDialogProps>;
+export default ImageAnnotationDialog;

package/dist/components/UI/ImageAnnotator/ImageAnnotationDialog.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+import { useTranslation } from "react-i18next";
+import ControlledDialog from "../../Form/ControlledDialog.js";
+import LoadingSpinner from "../LoadingSpinner.js";
+import NoDataFound from "../NoDataFound/index.js";
+import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
+import { sanitizeInitialCrop } from "./helpers/annotationCrop.js";
+import { useAnnotationBaseImage } from "./hooks/useAnnotationBaseImage.js";
+const AnnotationEditor = lazy(() => import("./AnnotationEditor.js"));
+const ImageAnnotationDialog = ({
+  open,
+  imageUrl,
+  imageName,
+  initialElements,
+  initialCrop,
+  onClose,
+  onSave
+}) => {
+  const { t } = useTranslation("ui");
+  const { isMobile } = useBreakpoint();
+  const { image, size, mimeType, loading, failed } = useAnnotationBaseImage(open, imageUrl);
+  return /* @__PURE__ */ jsx(
+    ControlledDialog,
+    {
+      open,
+      size: isMobile ? "xxl" : "xl",
+      title: t("imageAnnotator.title"),
+      onCancel: onClose,
+      useFooter: false,
+      fitBody: true,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-[78vh] flex-col", children: [
+        (loading || !image && !failed) && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 8 }) }),
+        failed && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(NoDataFound, { variant: "error", size: "sm", title: t("imageAnnotator.loadError") }) }),
+        image && size && /* @__PURE__ */ jsx(
+          Suspense,
+          {
+            fallback: /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 8 }) }),
+            children: /* @__PURE__ */ jsx(
+              AnnotationEditor,
+              {
+                baseImage: image,
+                imageSize: size,
+                mimeType,
+                imageName,
+                initialElements: initialElements ?? [],
+                initialCrop: sanitizeInitialCrop(initialCrop, size),
+                onSave,
+                onSaved: onClose
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  ImageAnnotationDialog as default
+};
+//# sourceMappingURL=ImageAnnotationDialog.js.map

package/dist/components/UI/ImageAnnotator/ImageAnnotationDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageAnnotationDialog.js","sources":["../../../../src/components/UI/ImageAnnotator/ImageAnnotationDialog.tsx"],"sourcesContent":["import { lazy, Suspense } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledDialog from '@/components/Form/ControlledDialog';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport NoDataFound from '@/components/UI/NoDataFound';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\n\nimport { sanitizeInitialCrop } from './helpers/annotationCrop';\nimport { useAnnotationBaseImage } from './hooks/useAnnotationBaseImage';\nimport { IAnnotationCropRect, IAnnotationDocument, TAnnotationElement } from './interfaces/annotationDocument';\n\n/** Konva only reaches the bundle when someone actually opens the editor. */\nconst AnnotationEditor = lazy(() => import('./AnnotationEditor'));\n\ninterface IImageAnnotationDialogProps {\n  open: boolean;\n  imageUrl: string;\n  imageName?: string;\n  /** Previously saved annotations, when the host persists the document alongside the file. */\n  initialElements?: Array<TAnnotationElement>;\n  /** Previously saved crop (`document.crop`), restored so a reopened image keeps its framing. */\n  initialCrop?: IAnnotationCropRect | null;\n  onClose: () => void;\n  /** Receives the flattened image plus the editable document; resolving closes the dialog. */\n  onSave: (file: File, document: IAnnotationDocument) => Promise<void> | void;\n}\n\nconst ImageAnnotationDialog: React.FC<IImageAnnotationDialogProps> = ({\n  open,\n  imageUrl,\n  imageName,\n  initialElements,\n  initialCrop,\n  onClose,\n  onSave,\n}) => {\n  const { t } = useTranslation('ui');\n  const { isMobile } = useBreakpoint();\n  const { image, size, mimeType, loading, failed } = useAnnotationBaseImage(open, imageUrl);\n\n  return (\n    <ControlledDialog\n      open={open}\n      size={isMobile ? 'xxl' : 'xl'}\n      title={t('imageAnnotator.title')}\n      onCancel={onClose}\n      useFooter={false}\n      fitBody\n    >\n      <div className=\"flex h-[78vh] flex-col\">\n        {(loading || (!image && !failed)) && (\n          <div className=\"flex flex-1 items-center justify-center\">\n            <LoadingSpinner size={8} />\n          </div>\n        )}\n\n        {failed && (\n          <div className=\"flex flex-1 items-center justify-center\">\n            <NoDataFound variant=\"error\" size=\"sm\" title={t('imageAnnotator.loadError')} />\n          </div>\n        )}\n\n        {image && size && (\n          <Suspense\n            fallback={\n              <div className=\"flex flex-1 items-center justify-center\">\n                <LoadingSpinner size={8} />\n              </div>\n            }\n          >\n            <AnnotationEditor\n              baseImage={image}\n              imageSize={size}\n              mimeType={mimeType}\n              imageName={imageName}\n              initialElements={initialElements ?? []}\n              initialCrop={sanitizeInitialCrop(initialCrop, size)}\n              onSave={onSave}\n              onSaved={onClose}\n            />\n          </Suspense>\n        )}\n      </div>\n    </ControlledDialog>\n  );\n};\n\nexport default ImageAnnotationDialog;\n"],"names":[],"mappings":";;;;;;;;;AAaA,MAAM,mBAAmB,KAAK,MAAM,OAAO,uBAAoB,CAAC;AAehE,MAAM,wBAA+D,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,SAAA,IAAa,cAAA;AACrB,QAAM,EAAE,OAAO,MAAM,UAAU,SAAS,WAAW,uBAAuB,MAAM,QAAQ;AAExF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,WAAW,QAAQ;AAAA,MACzB,OAAO,EAAE,sBAAsB;AAAA,MAC/B,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAO;AAAA,MAEP,UAAA,qBAAC,OAAA,EAAI,WAAU,0BACX,UAAA;AAAA,SAAA,WAAY,CAAC,SAAS,CAAC,WACvB,oBAAC,OAAA,EAAI,WAAU,2CACb,UAAA,oBAAC,gBAAA,EAAe,MAAM,EAAA,CAAG,GAC3B;AAAA,QAGD,UACC,oBAAC,OAAA,EAAI,WAAU,2CACb,UAAA,oBAAC,aAAA,EAAY,SAAQ,SAAQ,MAAK,MAAK,OAAO,EAAE,0BAA0B,GAAG,GAC/E;AAAA,QAGD,SAAS,QACR;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,8BACG,OAAA,EAAI,WAAU,2CACb,UAAA,oBAAC,gBAAA,EAAe,MAAM,EAAA,CAAG,EAAA,CAC3B;AAAA,YAGF,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX;AAAA,gBACA;AAAA,gBACA,iBAAiB,mBAAmB,CAAA;AAAA,gBACpC,aAAa,oBAAoB,aAAa,IAAI;AAAA,gBAClD;AAAA,gBACA,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX;AAAA,QAAA;AAAA,MACF,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/UI/ImageAnnotator/annotationStyle.d.ts

@@ -0,0 +1,28 @@
+import { TAnnotationAlign } from './interfaces/annotationDocument';
+/** User-picked marker colours: these are DATA, they never follow the app theme. */
+export declare const ANNOTATION_COLORS: readonly ["#EF4444", "#F97316", "#FACC15", "#22C55E", "#3B82F6", "#8B5CF6", "#111827", "#FFFFFF"];
+export type TAnnotationStrokeSize = 'thin' | 'medium' | 'thick';
+export type TAnnotationFontSize = 'small' | 'medium' | 'large';
+export declare const ANNOTATION_STROKE_SIZES: Array<TAnnotationStrokeSize>;
+export declare const ANNOTATION_FONT_SIZES: Array<TAnnotationFontSize>;
+/** Marks scale with the image resolution, so a 4000px photo is not annotated with hairlines. */
+export declare const strokeWidthForSize: (size: TAnnotationStrokeSize, imageMaxDimension: number) => number;
+export declare const fontSizeForScale: (scale: TAnnotationFontSize, imageMaxDimension: number) => number;
+export declare const closestStrokeSize: (strokeWidth: number, imageMaxDimension: number) => TAnnotationStrokeSize;
+export declare const closestFontSize: (fontSize: number, imageMaxDimension: number) => TAnnotationFontSize;
+/** The style the toolbar holds: applied to the next element, and to the selected one when edited. */
+export interface IAnnotationStyle {
+    color: string;
+    strokeSize: TAnnotationStrokeSize;
+    fill: string | null;
+    fillOpacity: number;
+    fontSize: TAnnotationFontSize;
+    bold: boolean;
+    italic: boolean;
+    align: TAnnotationAlign;
+    textBackground: string | null;
+}
+export declare const DEFAULT_ANNOTATION_STYLE: IAnnotationStyle;
+export declare const ANNOTATION_TEXT_FONT_FAMILY = "Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif";
+/** Keeps light marks readable over light photos without a second colour picker. */
+export declare const contrastHaloColor: (color: string) => string;

package/dist/components/UI/ImageAnnotator/annotationStyle.js

@@ -0,0 +1,56 @@
+const ANNOTATION_COLORS = [
+  "#EF4444",
+  "#F97316",
+  "#FACC15",
+  "#22C55E",
+  "#3B82F6",
+  "#8B5CF6",
+  "#111827",
+  "#FFFFFF"
+];
+const ANNOTATION_STROKE_SIZES = ["thin", "medium", "thick"];
+const ANNOTATION_FONT_SIZES = ["small", "medium", "large"];
+const STROKE_RATIO = { thin: 35e-4, medium: 7e-3, thick: 0.014 };
+const FONT_RATIO = { small: 0.028, medium: 0.04, large: 0.058 };
+const strokeWidthForSize = (size, imageMaxDimension) => Math.max(2, Math.round(imageMaxDimension * STROKE_RATIO[size]));
+const fontSizeForScale = (scale, imageMaxDimension) => Math.max(14, Math.round(imageMaxDimension * FONT_RATIO[scale]));
+const closestStrokeSize = (strokeWidth, imageMaxDimension) => ANNOTATION_STROKE_SIZES.reduce(
+  (closest, size) => Math.abs(strokeWidthForSize(size, imageMaxDimension) - strokeWidth) < Math.abs(strokeWidthForSize(closest, imageMaxDimension) - strokeWidth) ? size : closest
+);
+const closestFontSize = (fontSize, imageMaxDimension) => ANNOTATION_FONT_SIZES.reduce(
+  (closest, scale) => Math.abs(fontSizeForScale(scale, imageMaxDimension) - fontSize) < Math.abs(fontSizeForScale(closest, imageMaxDimension) - fontSize) ? scale : closest
+);
+const DEFAULT_ANNOTATION_STYLE = {
+  color: ANNOTATION_COLORS[0],
+  strokeSize: "medium",
+  fill: null,
+  fillOpacity: 0.25,
+  fontSize: "medium",
+  bold: true,
+  italic: false,
+  align: "left",
+  textBackground: null
+};
+const ANNOTATION_TEXT_FONT_FAMILY = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif';
+const contrastHaloColor = (color) => {
+  const hex = color.replace("#", "");
+  if (hex.length !== 6) return "rgba(17, 17, 17, 0.85)";
+  const red = parseInt(hex.slice(0, 2), 16);
+  const green = parseInt(hex.slice(2, 4), 16);
+  const blue = parseInt(hex.slice(4, 6), 16);
+  const luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
+  return luminance > 0.62 ? "rgba(17, 17, 17, 0.85)" : "rgba(255, 255, 255, 0.9)";
+};
+export {
+  ANNOTATION_COLORS,
+  ANNOTATION_FONT_SIZES,
+  ANNOTATION_STROKE_SIZES,
+  ANNOTATION_TEXT_FONT_FAMILY,
+  DEFAULT_ANNOTATION_STYLE,
+  closestFontSize,
+  closestStrokeSize,
+  contrastHaloColor,
+  fontSizeForScale,
+  strokeWidthForSize
+};
+//# sourceMappingURL=annotationStyle.js.map

package/dist/components/UI/ImageAnnotator/annotationStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotationStyle.js","sources":["../../../../src/components/UI/ImageAnnotator/annotationStyle.ts"],"sourcesContent":["import { TAnnotationAlign } from './interfaces/annotationDocument';\n\n/** User-picked marker colours: these are DATA, they never follow the app theme. */\nexport const ANNOTATION_COLORS = [\n  '#EF4444',\n  '#F97316',\n  '#FACC15',\n  '#22C55E',\n  '#3B82F6',\n  '#8B5CF6',\n  '#111827',\n  '#FFFFFF',\n] as const;\n\nexport type TAnnotationStrokeSize = 'thin' | 'medium' | 'thick';\nexport type TAnnotationFontSize = 'small' | 'medium' | 'large';\n\nexport const ANNOTATION_STROKE_SIZES: Array<TAnnotationStrokeSize> = ['thin', 'medium', 'thick'];\nexport const ANNOTATION_FONT_SIZES: Array<TAnnotationFontSize> = ['small', 'medium', 'large'];\n\nconst STROKE_RATIO: Record<TAnnotationStrokeSize, number> = { thin: 0.0035, medium: 0.007, thick: 0.014 };\nconst FONT_RATIO: Record<TAnnotationFontSize, number> = { small: 0.028, medium: 0.04, large: 0.058 };\n\n/** Marks scale with the image resolution, so a 4000px photo is not annotated with hairlines. */\nexport const strokeWidthForSize = (size: TAnnotationStrokeSize, imageMaxDimension: number): number =>\n  Math.max(2, Math.round(imageMaxDimension * STROKE_RATIO[size]));\n\nexport const fontSizeForScale = (scale: TAnnotationFontSize, imageMaxDimension: number): number =>\n  Math.max(14, Math.round(imageMaxDimension * FONT_RATIO[scale]));\n\nexport const closestStrokeSize = (strokeWidth: number, imageMaxDimension: number): TAnnotationStrokeSize =>\n  ANNOTATION_STROKE_SIZES.reduce((closest, size) =>\n    Math.abs(strokeWidthForSize(size, imageMaxDimension) - strokeWidth) <\n    Math.abs(strokeWidthForSize(closest, imageMaxDimension) - strokeWidth)\n      ? size\n      : closest,\n  );\n\nexport const closestFontSize = (fontSize: number, imageMaxDimension: number): TAnnotationFontSize =>\n  ANNOTATION_FONT_SIZES.reduce((closest, scale) =>\n    Math.abs(fontSizeForScale(scale, imageMaxDimension) - fontSize) <\n    Math.abs(fontSizeForScale(closest, imageMaxDimension) - fontSize)\n      ? scale\n      : closest,\n  );\n\n/** The style the toolbar holds: applied to the next element, and to the selected one when edited. */\nexport interface IAnnotationStyle {\n  color: string;\n  strokeSize: TAnnotationStrokeSize;\n  fill: string | null;\n  fillOpacity: number;\n  fontSize: TAnnotationFontSize;\n  bold: boolean;\n  italic: boolean;\n  align: TAnnotationAlign;\n  textBackground: string | null;\n}\n\nexport const DEFAULT_ANNOTATION_STYLE: IAnnotationStyle = {\n  color: ANNOTATION_COLORS[0],\n  strokeSize: 'medium',\n  fill: null,\n  fillOpacity: 0.25,\n  fontSize: 'medium',\n  bold: true,\n  italic: false,\n  align: 'left',\n  textBackground: null,\n};\n\nexport const ANNOTATION_TEXT_FONT_FAMILY =\n  'Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif';\n\n/** Keeps light marks readable over light photos without a second colour picker. */\nexport const contrastHaloColor = (color: string): string => {\n  const hex = color.replace('#', '');\n  if (hex.length !== 6) return 'rgba(17, 17, 17, 0.85)';\n\n  const red = parseInt(hex.slice(0, 2), 16);\n  const green = parseInt(hex.slice(2, 4), 16);\n  const blue = parseInt(hex.slice(4, 6), 16);\n  const luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;\n\n  return luminance > 0.62 ? 'rgba(17, 17, 17, 0.85)' : 'rgba(255, 255, 255, 0.9)';\n};\n"],"names":[],"mappings":"AAGO,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAKO,MAAM,0BAAwD,CAAC,QAAQ,UAAU,OAAO;AACxF,MAAM,wBAAoD,CAAC,SAAS,UAAU,OAAO;AAE5F,MAAM,eAAsD,EAAE,MAAM,OAAQ,QAAQ,MAAO,OAAO,MAAA;AAClG,MAAM,aAAkD,EAAE,OAAO,OAAO,QAAQ,MAAM,OAAO,MAAA;AAGtF,MAAM,qBAAqB,CAAC,MAA6B,sBAC9D,KAAK,IAAI,GAAG,KAAK,MAAM,oBAAoB,aAAa,IAAI,CAAC,CAAC;AAEzD,MAAM,mBAAmB,CAAC,OAA4B,sBAC3D,KAAK,IAAI,IAAI,KAAK,MAAM,oBAAoB,WAAW,KAAK,CAAC,CAAC;AAEzD,MAAM,oBAAoB,CAAC,aAAqB,sBACrD,wBAAwB;AAAA,EAAO,CAAC,SAAS,SACvC,KAAK,IAAI,mBAAmB,MAAM,iBAAiB,IAAI,WAAW,IAClE,KAAK,IAAI,mBAAmB,SAAS,iBAAiB,IAAI,WAAW,IACjE,OACA;AACN;AAEK,MAAM,kBAAkB,CAAC,UAAkB,sBAChD,sBAAsB;AAAA,EAAO,CAAC,SAAS,UACrC,KAAK,IAAI,iBAAiB,OAAO,iBAAiB,IAAI,QAAQ,IAC9D,KAAK,IAAI,iBAAiB,SAAS,iBAAiB,IAAI,QAAQ,IAC5D,QACA;AACN;AAeK,MAAM,2BAA6C;AAAA,EACxD,OAAO,kBAAkB,CAAC;AAAA,EAC1B,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,UAAU;AAAA,EACV,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB;AAClB;AAEO,MAAM,8BACX;AAGK,MAAM,oBAAoB,CAAC,UAA0B;AAC1D,QAAM,MAAM,MAAM,QAAQ,KAAK,EAAE;AACjC,MAAI,IAAI,WAAW,EAAG,QAAO;AAE7B,QAAM,MAAM,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;AACxC,QAAM,QAAQ,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;AAC1C,QAAM,OAAO,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;AACzC,QAAM,aAAa,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,QAAQ;AAEjE,SAAO,YAAY,OAAO,2BAA2B;AACvD;"}

package/dist/components/UI/ImageAnnotator/canvas/AnnotationCropFrame.d.ts

@@ -0,0 +1,16 @@
+import { IAnnotationCropRect, IAnnotationSize } from '../interfaces/annotationDocument';
+interface IAnnotationCropFrameProps {
+    crop: IAnnotationCropRect;
+    imageSize: IAnnotationSize;
+    viewScale: number;
+    /** Screen-pixel offset of the image inside the stage; absolute bounds start here. */
+    gutter: number;
+    aspectRatio: number | null;
+    onChange: (crop: IAnnotationCropRect) => void;
+}
+/**
+ * Drawn on a stage that shows the whole image, so the frame's local coordinates are image pixels
+ * and its absolute coordinates are those pixels times the view scale, shifted by the gutter.
+ */
+declare const AnnotationCropFrame: React.FC<IAnnotationCropFrameProps>;
+export default AnnotationCropFrame;