@umodeapporg/ui 0.24.4 → 0.26.0

package/dist/components/UI/ImageAnnotator/canvas/AnnotationCropFrame.js

@@ -0,0 +1,156 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useMemo, useEffect } from "react";
+import { Group, Rect, Line, Transformer } from "react-konva";
+import { readThemeToken } from "../../../../helpers/themeTokens.js";
+import { useResolvedTheme } from "../../../../hooks/useResolvedTheme.js";
+import { useThemeSkin } from "../../../../hooks/useThemeSkin.js";
+import { SELECTION_BORDER_PX, SELECTION_ANCHOR_PX } from "../helpers/annotationCanvas.js";
+import { minCropDimension, clampCropToImage } from "../helpers/annotationCrop.js";
+const FREE_ANCHORS = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "middle-right",
+  "bottom-right",
+  "bottom-center",
+  "bottom-left",
+  "middle-left"
+];
+const LOCKED_ANCHORS = ["top-left", "top-right", "bottom-right", "bottom-left"];
+const BOUNDS_TOLERANCE_PX = 0.5;
+const AnnotationCropFrame = ({
+  crop,
+  imageSize,
+  viewScale,
+  gutter,
+  aspectRatio,
+  onChange
+}) => {
+  const resolvedTheme = useResolvedTheme();
+  const themeSkin = useThemeSkin();
+  const frameRef = useRef(null);
+  const transformerRef = useRef(null);
+  const tokens = useMemo(
+    () => ({
+      accent: readThemeToken("brand", "#8B5CF6"),
+      surface: readThemeToken("surface", "#FFFFFF"),
+      ink: readThemeToken("ink", "#111111")
+    }),
+    [resolvedTheme, themeSkin]
+  );
+  useEffect(() => {
+    const transformer = transformerRef.current;
+    const frame = frameRef.current;
+    if (!transformer || !frame) return;
+    transformer.nodes([frame]);
+    transformer.getLayer()?.batchDraw();
+  }, []);
+  const minimum = minCropDimension(imageSize);
+  const anchorSize = SELECTION_ANCHOR_PX / viewScale;
+  const borderWidth = SELECTION_BORDER_PX / viewScale;
+  const maxAbsoluteWidth = imageSize.width * viewScale;
+  const maxAbsoluteHeight = imageSize.height * viewScale;
+  const readFrame = (node) => {
+    const width = node.width() * node.scaleX();
+    const height = node.height() * node.scaleY();
+    node.scale({ x: 1, y: 1 });
+    return clampCropToImage({ x: node.x(), y: node.y(), width, height }, imageSize);
+  };
+  const dimColor = tokens.ink;
+  const right = crop.x + crop.width;
+  const bottom = crop.y + crop.height;
+  const thirdsWidth = crop.width / 3;
+  const thirdsHeight = crop.height / 3;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Group, { listening: false, children: [
+      /* @__PURE__ */ jsx(Rect, { x: 0, y: 0, width: imageSize.width, height: crop.y, fill: dimColor, opacity: 0.6 }),
+      /* @__PURE__ */ jsx(
+        Rect,
+        {
+          x: 0,
+          y: bottom,
+          width: imageSize.width,
+          height: imageSize.height - bottom,
+          fill: dimColor,
+          opacity: 0.6
+        }
+      ),
+      /* @__PURE__ */ jsx(Rect, { x: 0, y: crop.y, width: crop.x, height: crop.height, fill: dimColor, opacity: 0.6 }),
+      /* @__PURE__ */ jsx(Rect, { x: right, y: crop.y, width: imageSize.width - right, height: crop.height, fill: dimColor, opacity: 0.6 }),
+      [1, 2].map((step) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          points: [crop.x + thirdsWidth * step, crop.y, crop.x + thirdsWidth * step, bottom],
+          stroke: tokens.surface,
+          strokeWidth: borderWidth / 1.5,
+          opacity: 0.55
+        },
+        `vertical-${step}`
+      )),
+      [1, 2].map((step) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          points: [crop.x, crop.y + thirdsHeight * step, right, crop.y + thirdsHeight * step],
+          stroke: tokens.surface,
+          strokeWidth: borderWidth / 1.5,
+          opacity: 0.55
+        },
+        `horizontal-${step}`
+      ))
+    ] }),
+    /* @__PURE__ */ jsx(
+      Rect,
+      {
+        ref: frameRef,
+        x: crop.x,
+        y: crop.y,
+        width: crop.width,
+        height: crop.height,
+        fill: tokens.surface,
+        opacity: 0,
+        draggable: true,
+        dragBoundFunc: (position) => ({
+          x: Math.min(Math.max(position.x, gutter), gutter + maxAbsoluteWidth - crop.width * viewScale),
+          y: Math.min(Math.max(position.y, gutter), gutter + maxAbsoluteHeight - crop.height * viewScale)
+        }),
+        onMouseEnter: (event) => {
+          const container = event.target.getStage()?.container();
+          if (container) container.style.cursor = "move";
+        },
+        onMouseLeave: (event) => {
+          const container = event.target.getStage()?.container();
+          if (container) container.style.cursor = "default";
+        },
+        onDragMove: (event) => onChange(readFrame(event.target)),
+        onTransform: (event) => onChange(readFrame(event.target))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Transformer,
+      {
+        ref: transformerRef,
+        rotateEnabled: false,
+        flipEnabled: false,
+        keepRatio: aspectRatio !== null,
+        enabledAnchors: aspectRatio === null ? FREE_ANCHORS : LOCKED_ANCHORS,
+        anchorSize,
+        anchorCornerRadius: anchorSize / 4,
+        anchorFill: tokens.accent,
+        anchorStroke: tokens.surface,
+        anchorStrokeWidth: borderWidth,
+        borderStroke: tokens.surface,
+        borderStrokeWidth: borderWidth,
+        ignoreStroke: true,
+        boundBoxFunc: (oldBox, newBox) => {
+          const outside = newBox.x < gutter - BOUNDS_TOLERANCE_PX || newBox.y < gutter - BOUNDS_TOLERANCE_PX || newBox.x + newBox.width > gutter + maxAbsoluteWidth + BOUNDS_TOLERANCE_PX || newBox.y + newBox.height > gutter + maxAbsoluteHeight + BOUNDS_TOLERANCE_PX;
+          const tooSmall = newBox.width < minimum * viewScale || newBox.height < minimum * viewScale;
+          return outside || tooSmall ? oldBox : newBox;
+        }
+      }
+    )
+  ] });
+};
+export {
+  AnnotationCropFrame as default
+};
+//# sourceMappingURL=AnnotationCropFrame.js.map

package/dist/components/UI/ImageAnnotator/canvas/AnnotationCropFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationCropFrame.js","sources":["../../../../../src/components/UI/ImageAnnotator/canvas/AnnotationCropFrame.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport Konva from 'konva';\nimport { Group, Line, Rect, Transformer } from 'react-konva';\n\nimport { readThemeToken } from '@/helpers/themeTokens';\nimport { useResolvedTheme } from '@/hooks/useResolvedTheme';\nimport { useThemeSkin } from '@/hooks/useThemeSkin';\n\nimport { SELECTION_ANCHOR_PX, SELECTION_BORDER_PX } from '../helpers/annotationCanvas';\nimport { clampCropToImage, minCropDimension } from '../helpers/annotationCrop';\nimport { IAnnotationCropRect, IAnnotationSize } from '../interfaces/annotationDocument';\n\nconst FREE_ANCHORS = [\n  'top-left',\n  'top-center',\n  'top-right',\n  'middle-right',\n  'bottom-right',\n  'bottom-center',\n  'bottom-left',\n  'middle-left',\n];\nconst LOCKED_ANCHORS = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];\n\nconst BOUNDS_TOLERANCE_PX = 0.5;\n\ninterface IAnnotationCropFrameProps {\n  crop: IAnnotationCropRect;\n  imageSize: IAnnotationSize;\n  viewScale: number;\n  /** Screen-pixel offset of the image inside the stage; absolute bounds start here. */\n  gutter: number;\n  aspectRatio: number | null;\n  onChange: (crop: IAnnotationCropRect) => void;\n}\n\n/**\n * Drawn on a stage that shows the whole image, so the frame's local coordinates are image pixels\n * and its absolute coordinates are those pixels times the view scale, shifted by the gutter.\n */\nconst AnnotationCropFrame: React.FC<IAnnotationCropFrameProps> = ({\n  crop,\n  imageSize,\n  viewScale,\n  gutter,\n  aspectRatio,\n  onChange,\n}) => {\n  const resolvedTheme = useResolvedTheme();\n  const themeSkin = useThemeSkin();\n  const frameRef = useRef<Konva.Rect | null>(null);\n  const transformerRef = useRef<Konva.Transformer | null>(null);\n\n  const tokens = useMemo(\n    () => ({\n      accent: readThemeToken('brand', '#8B5CF6'),\n      surface: readThemeToken('surface', '#FFFFFF'),\n      ink: readThemeToken('ink', '#111111'),\n    }),\n    [resolvedTheme, themeSkin],\n  );\n\n  useEffect(() => {\n    const transformer = transformerRef.current;\n    const frame = frameRef.current;\n    if (!transformer || !frame) return;\n    transformer.nodes([frame]);\n    transformer.getLayer()?.batchDraw();\n  }, []);\n\n  const minimum = minCropDimension(imageSize);\n  const anchorSize = SELECTION_ANCHOR_PX / viewScale;\n  const borderWidth = SELECTION_BORDER_PX / viewScale;\n  const maxAbsoluteWidth = imageSize.width * viewScale;\n  const maxAbsoluteHeight = imageSize.height * viewScale;\n\n  const readFrame = (node: Konva.Node): IAnnotationCropRect => {\n    const width = node.width() * node.scaleX();\n    const height = node.height() * node.scaleY();\n    node.scale({ x: 1, y: 1 });\n    return clampCropToImage({ x: node.x(), y: node.y(), width, height }, imageSize);\n  };\n\n  const dimColor = tokens.ink;\n  const right = crop.x + crop.width;\n  const bottom = crop.y + crop.height;\n  const thirdsWidth = crop.width / 3;\n  const thirdsHeight = crop.height / 3;\n\n  return (\n    <>\n      <Group listening={false}>\n        <Rect x={0} y={0} width={imageSize.width} height={crop.y} fill={dimColor} opacity={0.6} />\n        <Rect\n          x={0}\n          y={bottom}\n          width={imageSize.width}\n          height={imageSize.height - bottom}\n          fill={dimColor}\n          opacity={0.6}\n        />\n        <Rect x={0} y={crop.y} width={crop.x} height={crop.height} fill={dimColor} opacity={0.6} />\n        <Rect x={right} y={crop.y} width={imageSize.width - right} height={crop.height} fill={dimColor} opacity={0.6} />\n\n        {[1, 2].map((step) => (\n          <Line\n            key={`vertical-${step}`}\n            points={[crop.x + thirdsWidth * step, crop.y, crop.x + thirdsWidth * step, bottom]}\n            stroke={tokens.surface}\n            strokeWidth={borderWidth / 1.5}\n            opacity={0.55}\n          />\n        ))}\n        {[1, 2].map((step) => (\n          <Line\n            key={`horizontal-${step}`}\n            points={[crop.x, crop.y + thirdsHeight * step, right, crop.y + thirdsHeight * step]}\n            stroke={tokens.surface}\n            strokeWidth={borderWidth / 1.5}\n            opacity={0.55}\n          />\n        ))}\n      </Group>\n\n      <Rect\n        ref={frameRef}\n        x={crop.x}\n        y={crop.y}\n        width={crop.width}\n        height={crop.height}\n        fill={tokens.surface}\n        opacity={0}\n        draggable\n        dragBoundFunc={(position) => ({\n          x: Math.min(Math.max(position.x, gutter), gutter + maxAbsoluteWidth - crop.width * viewScale),\n          y: Math.min(Math.max(position.y, gutter), gutter + maxAbsoluteHeight - crop.height * viewScale),\n        })}\n        onMouseEnter={(event) => {\n          const container = event.target.getStage()?.container();\n          if (container) container.style.cursor = 'move';\n        }}\n        onMouseLeave={(event) => {\n          const container = event.target.getStage()?.container();\n          if (container) container.style.cursor = 'default';\n        }}\n        onDragMove={(event) => onChange(readFrame(event.target))}\n        onTransform={(event) => onChange(readFrame(event.target))}\n      />\n\n      <Transformer\n        ref={transformerRef}\n        rotateEnabled={false}\n        flipEnabled={false}\n        keepRatio={aspectRatio !== null}\n        enabledAnchors={aspectRatio === null ? FREE_ANCHORS : LOCKED_ANCHORS}\n        anchorSize={anchorSize}\n        anchorCornerRadius={anchorSize / 4}\n        anchorFill={tokens.accent}\n        anchorStroke={tokens.surface}\n        anchorStrokeWidth={borderWidth}\n        borderStroke={tokens.surface}\n        borderStrokeWidth={borderWidth}\n        ignoreStroke\n        boundBoxFunc={(oldBox, newBox) => {\n          const outside =\n            newBox.x < gutter - BOUNDS_TOLERANCE_PX ||\n            newBox.y < gutter - BOUNDS_TOLERANCE_PX ||\n            newBox.x + newBox.width > gutter + maxAbsoluteWidth + BOUNDS_TOLERANCE_PX ||\n            newBox.y + newBox.height > gutter + maxAbsoluteHeight + BOUNDS_TOLERANCE_PX;\n          const tooSmall = newBox.width < minimum * viewScale || newBox.height < minimum * viewScale;\n          return outside || tooSmall ? oldBox : newBox;\n        }}\n      />\n    </>\n  );\n};\n\nexport default AnnotationCropFrame;\n"],"names":[],"mappings":"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"}

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

@@ -2,11 +2,18 @@ import { default as Konva } from 'konva';
 import { IAnnotationStyle } from '../annotationStyle';
 import { IStageFit } from '../helpers/annotationCanvas';
 import { IAnnotationDocumentController } from '../hooks/useAnnotationDocument';
-import { IAnnotationPoint, IAnnotationSize, TAnnotationTool } from '../interfaces/annotationDocument';
+import { IAnnotationCropRect, IAnnotationPoint, IAnnotationSize, TAnnotationTool } from '../interfaces/annotationDocument';
 interface IAnnotationStageProps {
     baseImage: HTMLImageElement;
     imageSize: IAnnotationSize;
     fit: IStageFit;
+    /** Region of the image the stage shows: the applied crop, or the whole image while cropping. */
+    viewRect: IAnnotationCropRect;
+    cropDraft: IAnnotationCropRect | null;
+    cropAspectRatio: number | null;
+    /** Screen-pixel gutter around the image, so crop handles sitting on the image edge stay grabbable. */
+    gutter: number;
+    onCropDraftChange: (crop: IAnnotationCropRect) => void;
     tool: TAnnotationTool;
     style: IAnnotationStyle;
     controller: IAnnotationDocumentController;

package/dist/components/UI/ImageAnnotator/canvas/AnnotationStage.js

@@ -4,6 +4,7 @@ import { Stage, Layer, Image } from "react-konva";
 import { isDegenerateDrag, shouldAppendFreehandPoint, clampPointToImage } from "../helpers/annotationCanvas.js";
 import { createFreehandElement, createSegmentElement, createShapeElement } from "../helpers/annotationElements.js";
 import { ensureKonvaFullBuild } from "../helpers/konvaFullBuild.js";
+import AnnotationCropFrame from "./AnnotationCropFrame.js";
 import AnnotationElementNode from "./AnnotationElementNode.js";
 import AnnotationSelection from "./AnnotationSelection.js";
 ensureKonvaFullBuild();
@@ -14,12 +15,18 @@ const cursorForTool = (tool) => {
   if (tool === "select") return "default";
   if (tool === "text") return "text";
   if (tool === "eraser") return "cell";
+  if (tool === "crop") return "default";
   return "crosshair";
 };
 const AnnotationStage = ({
   baseImage,
   imageSize,
   fit,
+  viewRect,
+  cropDraft,
+  cropAspectRatio,
+  gutter,
+  onCropDraftChange,
   tool,
   style,
   controller,
@@ -35,6 +42,8 @@ const AnnotationStage = ({
   const [draft, setDraft] = useState(null);
   const [gestureActive, setGestureActive] = useState(false);
   const { select, addElement, updateElement, removeElements } = controller;
+  const layerX = gutter / fit.scale - viewRect.x;
+  const layerY = gutter / fit.scale - viewRect.y;
   const registerNode = useCallback((id, node) => {
     if (node) nodesRef.current.set(id, node);
     else nodesRef.current.delete(id);
@@ -43,7 +52,11 @@ const AnnotationStage = ({
   const pointFromStage = (stage) => {
     const pointer = stage.getPointerPosition();
     if (!pointer) return null;
-    return clampPointToImage({ x: pointer.x / fit.scale, y: pointer.y / fit.scale }, imageSize);
+    const point = clampPointToImage(
+      { x: (pointer.x - gutter) / fit.scale, y: (pointer.y - gutter) / fit.scale },
+      { width: viewRect.width, height: viewRect.height }
+    );
+    return { x: point.x + viewRect.x, y: point.y + viewRect.y };
   };
   const eraseAtPointer = (stage) => {
     const pointer = stage.getPointerPosition();
@@ -59,6 +72,7 @@ const AnnotationStage = ({
       if (event.target === stage) select(null);
       return;
     }
+    if (tool === "crop") return;
     if (tool === "eraser") {
       dragOriginRef.current = { x: 0, y: 0 };
       erasedIdsRef.current = /* @__PURE__ */ new Set();
@@ -153,8 +167,8 @@ const AnnotationStage = ({
     Stage,
     {
       ref: stageRef,
-      width: fit.width,
-      height: fit.height,
+      width: fit.width + gutter * 2,
+      height: fit.height + gutter * 2,
       scaleX: fit.scale,
       scaleY: fit.scale,
       style: { cursor: cursorForTool(tool) },
@@ -163,8 +177,8 @@ const AnnotationStage = ({
       onPointerUp: handlePointerUp,
       onPointerCancel: handlePointerUp,
       children: [
-        /* @__PURE__ */ jsx(Layer, { listening: false, children: /* @__PURE__ */ jsx(Image, { image: baseImage, width: imageSize.width, height: imageSize.height, perfectDrawEnabled: false }) }),
-        /* @__PURE__ */ jsxs(Layer, { children: [
+        /* @__PURE__ */ jsx(Layer, { listening: false, x: layerX, y: layerY, children: /* @__PURE__ */ jsx(Image, { image: baseImage, width: imageSize.width, height: imageSize.height, perfectDrawEnabled: false }) }),
+        /* @__PURE__ */ jsxs(Layer, { x: layerX, y: layerY, children: [
           controller.elements.map((element) => /* @__PURE__ */ jsx(
             AnnotationElementNode,
             {
@@ -196,6 +210,17 @@ const AnnotationStage = ({
               registerNode: () => void 0
             }
           ),
+          tool === "crop" && cropDraft && /* @__PURE__ */ jsx(
+            AnnotationCropFrame,
+            {
+              crop: cropDraft,
+              imageSize,
+              viewScale: fit.scale,
+              gutter,
+              aspectRatio: cropAspectRatio,
+              onChange: onCropDraftChange
+            }
+          ),
           tool === "select" && !editingTextId && /* @__PURE__ */ jsx(
             AnnotationSelection,
             {

package/dist/components/UI/ImageAnnotator/canvas/AnnotationStage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationStage.js","sources":["../../../../../src/components/UI/ImageAnnotator/canvas/AnnotationStage.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport Konva from 'konva';\nimport { Image as KonvaImage, Layer, Stage } from 'react-konva';\n\nimport { IAnnotationStyle } from '../annotationStyle';\nimport { clampPointToImage, isDegenerateDrag, IStageFit, shouldAppendFreehandPoint } from '../helpers/annotationCanvas';\nimport { createFreehandElement, createSegmentElement, createShapeElement } from '../helpers/annotationElements';\nimport { ensureKonvaFullBuild } from '../helpers/konvaFullBuild';\nimport { IAnnotationDocumentController } from '../hooks/useAnnotationDocument';\nimport {\n  IAnnotationPoint,\n  IAnnotationSize,\n  TAnnotationElement,\n  TAnnotationTool,\n} from '../interfaces/annotationDocument';\n\nimport AnnotationElementNode from './AnnotationElementNode';\nimport AnnotationSelection from './AnnotationSelection';\n\nensureKonvaFullBuild();\n\nconst DEGENERATE_DRAG_PX = 4;\nconst FREEHAND_MIN_DISTANCE_PX = 2;\n\nconst DRAWING_TOOLS: Array<TAnnotationTool> = ['freehand', 'line', 'arrow', 'rectangle', 'ellipse'];\n\ninterface IAnnotationStageProps {\n  baseImage: HTMLImageElement;\n  imageSize: IAnnotationSize;\n  fit: IStageFit;\n  tool: TAnnotationTool;\n  style: IAnnotationStyle;\n  controller: IAnnotationDocumentController;\n  editingTextId: string | null;\n  stageRef: React.MutableRefObject<Konva.Stage | null>;\n  onRequestTextEdit: (id: string) => void;\n  onTextPlaced: (point: IAnnotationPoint) => void;\n}\n\nconst cursorForTool = (tool: TAnnotationTool): string => {\n  if (tool === 'select') return 'default';\n  if (tool === 'text') return 'text';\n  if (tool === 'eraser') return 'cell';\n  return 'crosshair';\n};\n\nconst AnnotationStage: React.FC<IAnnotationStageProps> = ({\n  baseImage,\n  imageSize,\n  fit,\n  tool,\n  style,\n  controller,\n  editingTextId,\n  stageRef,\n  onRequestTextEdit,\n  onTextPlaced,\n}) => {\n  const nodesRef = useRef<Map<string, Konva.Node>>(new Map());\n  const dragOriginRef = useRef<IAnnotationPoint | null>(null);\n  const erasedIdsRef = useRef<Set<string>>(new Set());\n  const finishGestureRef = useRef<() => void>(() => undefined);\n  const [draft, setDraft] = useState<TAnnotationElement | null>(null);\n  const [gestureActive, setGestureActive] = useState(false);\n\n  const { select, addElement, updateElement, removeElements } = controller;\n\n  const registerNode = useCallback((id: string, node: Konva.Node | null) => {\n    if (node) nodesRef.current.set(id, node);\n    else nodesRef.current.delete(id);\n  }, []);\n\n  const getNode = useCallback((id: string) => nodesRef.current.get(id) ?? null, []);\n\n  const pointFromStage = (stage: Konva.Stage): IAnnotationPoint | null => {\n    const pointer = stage.getPointerPosition();\n    if (!pointer) return null;\n    return clampPointToImage({ x: pointer.x / fit.scale, y: pointer.y / fit.scale }, imageSize);\n  };\n\n  const eraseAtPointer = (stage: Konva.Stage) => {\n    const pointer = stage.getPointerPosition();\n    if (!pointer) return;\n\n    let node: Konva.Node | null = stage.getIntersection(pointer);\n    while (node && !node.id()) node = node.getParent();\n    if (node?.id()) erasedIdsRef.current.add(node.id());\n  };\n\n  const handlePointerDown = (event: Konva.KonvaEventObject<PointerEvent>) => {\n    const stage = event.target.getStage();\n    if (!stage) return;\n\n    if (tool === 'select') {\n      if (event.target === stage) select(null);\n      return;\n    }\n\n    if (tool === 'eraser') {\n      dragOriginRef.current = { x: 0, y: 0 };\n      erasedIdsRef.current = new Set();\n      setGestureActive(true);\n      eraseAtPointer(stage);\n      return;\n    }\n\n    const point = pointFromStage(stage);\n    if (!point) return;\n\n    if (tool === 'text') {\n      onTextPlaced(point);\n      return;\n    }\n\n    if (!DRAWING_TOOLS.includes(tool)) return;\n\n    dragOriginRef.current = point;\n    setGestureActive(true);\n    if (tool === 'freehand') setDraft(createFreehandElement(point, style, imageSize));\n    else if (tool === 'line' || tool === 'arrow') setDraft(createSegmentElement(tool, point, point, style, imageSize));\n    else if (tool === 'rectangle' || tool === 'ellipse')\n      setDraft(createShapeElement(tool, point, point, style, imageSize));\n  };\n\n  const handlePointerMove = (event: Konva.KonvaEventObject<PointerEvent>) => {\n    const stage = event.target.getStage();\n    if (!stage) return;\n\n    if (tool === 'eraser') {\n      if (dragOriginRef.current) eraseAtPointer(stage);\n      return;\n    }\n\n    const origin = dragOriginRef.current;\n    if (!origin || !draft) return;\n\n    const point = pointFromStage(stage);\n    if (!point) return;\n\n    setDraft((current) => {\n      if (!current) return current;\n\n      if (current.type === 'freehand') {\n        const next = { x: point.x - current.x, y: point.y - current.y };\n        if (!shouldAppendFreehandPoint(current.points, next, FREEHAND_MIN_DISTANCE_PX / fit.scale)) return current;\n        return { ...current, points: [...current.points, next.x, next.y] };\n      }\n\n      if (current.type === 'line' || current.type === 'arrow') return { ...current, end: point };\n\n      if (current.type === 'rectangle' || current.type === 'ellipse') {\n        return {\n          ...current,\n          x: Math.min(origin.x, point.x),\n          y: Math.min(origin.y, point.y),\n          width: Math.abs(point.x - origin.x),\n          height: Math.abs(point.y - origin.y),\n        };\n      }\n\n      return current;\n    });\n  };\n\n  const handlePointerUp = () => {\n    const origin = dragOriginRef.current;\n    dragOriginRef.current = null;\n    setGestureActive(false);\n\n    if (tool === 'eraser') {\n      removeElements([...erasedIdsRef.current]);\n      erasedIdsRef.current = new Set();\n      return;\n    }\n\n    const pending = draft;\n    setDraft(null);\n    if (!pending || !origin) return;\n\n    if (pending.type === 'freehand') {\n      if (pending.points.length < 4) return;\n      addElement(pending, { select: false });\n      return;\n    }\n\n    if (pending.type === 'line' || pending.type === 'arrow') {\n      if (isDegenerateDrag(pending.start, pending.end, DEGENERATE_DRAG_PX / fit.scale)) return;\n      addElement(pending);\n      return;\n    }\n\n    if (pending.type === 'rectangle' || pending.type === 'ellipse') {\n      if (pending.width < DEGENERATE_DRAG_PX / fit.scale || pending.height < DEGENERATE_DRAG_PX / fit.scale) return;\n      addElement(pending);\n    }\n  };\n\n  finishGestureRef.current = handlePointerUp;\n\n  /** Releasing the pointer outside the canvas must still commit the stroke, not orphan it. */\n  useEffect(() => {\n    if (!gestureActive) return;\n\n    const finish = () => finishGestureRef.current();\n    window.addEventListener('pointerup', finish);\n    window.addEventListener('pointercancel', finish);\n\n    return () => {\n      window.removeEventListener('pointerup', finish);\n      window.removeEventListener('pointercancel', finish);\n    };\n  }, [gestureActive]);\n\n  return (\n    <Stage\n      ref={stageRef}\n      width={fit.width}\n      height={fit.height}\n      scaleX={fit.scale}\n      scaleY={fit.scale}\n      style={{ cursor: cursorForTool(tool) }}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n    >\n      <Layer listening={false}>\n        <KonvaImage image={baseImage} width={imageSize.width} height={imageSize.height} perfectDrawEnabled={false} />\n      </Layer>\n\n      <Layer>\n        {controller.elements.map((element) => (\n          <AnnotationElementNode\n            key={element.id}\n            element={element}\n            draggable={tool === 'select'}\n            listening={tool === 'select' || tool === 'eraser'}\n            viewScale={fit.scale}\n            idleCursor={cursorForTool(tool)}\n            hidden={element.id === editingTextId}\n            onSelect={select}\n            onChange={updateElement}\n            onRequestTextEdit={onRequestTextEdit}\n            registerNode={registerNode}\n          />\n        ))}\n\n        {draft && (\n          <AnnotationElementNode\n            element={draft}\n            draggable={false}\n            listening={false}\n            viewScale={fit.scale}\n            idleCursor={cursorForTool(tool)}\n            hidden={false}\n            onSelect={select}\n            onChange={updateElement}\n            onRequestTextEdit={onRequestTextEdit}\n            registerNode={() => undefined}\n          />\n        )}\n\n        {tool === 'select' && !editingTextId && (\n          <AnnotationSelection\n            selectedElement={controller.selectedElement}\n            viewScale={fit.scale}\n            getNode={getNode}\n            onChange={updateElement}\n          />\n        )}\n      </Layer>\n    </Stage>\n  );\n};\n\nexport default AnnotationStage;\n"],"names":["KonvaImage"],"mappings":"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"}
+{"version":3,"file":"AnnotationStage.js","sources":["../../../../../src/components/UI/ImageAnnotator/canvas/AnnotationStage.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport Konva from 'konva';\nimport { Image as KonvaImage, Layer, Stage } from 'react-konva';\n\nimport { IAnnotationStyle } from '../annotationStyle';\nimport { clampPointToImage, isDegenerateDrag, IStageFit, shouldAppendFreehandPoint } from '../helpers/annotationCanvas';\nimport { createFreehandElement, createSegmentElement, createShapeElement } from '../helpers/annotationElements';\nimport { ensureKonvaFullBuild } from '../helpers/konvaFullBuild';\nimport { IAnnotationDocumentController } from '../hooks/useAnnotationDocument';\nimport {\n  IAnnotationCropRect,\n  IAnnotationPoint,\n  IAnnotationSize,\n  TAnnotationElement,\n  TAnnotationTool,\n} from '../interfaces/annotationDocument';\n\nimport AnnotationCropFrame from './AnnotationCropFrame';\nimport AnnotationElementNode from './AnnotationElementNode';\nimport AnnotationSelection from './AnnotationSelection';\n\nensureKonvaFullBuild();\n\nconst DEGENERATE_DRAG_PX = 4;\nconst FREEHAND_MIN_DISTANCE_PX = 2;\n\nconst DRAWING_TOOLS: Array<TAnnotationTool> = ['freehand', 'line', 'arrow', 'rectangle', 'ellipse'];\n\ninterface IAnnotationStageProps {\n  baseImage: HTMLImageElement;\n  imageSize: IAnnotationSize;\n  fit: IStageFit;\n  /** Region of the image the stage shows: the applied crop, or the whole image while cropping. */\n  viewRect: IAnnotationCropRect;\n  cropDraft: IAnnotationCropRect | null;\n  cropAspectRatio: number | null;\n  /** Screen-pixel gutter around the image, so crop handles sitting on the image edge stay grabbable. */\n  gutter: number;\n  onCropDraftChange: (crop: IAnnotationCropRect) => void;\n  tool: TAnnotationTool;\n  style: IAnnotationStyle;\n  controller: IAnnotationDocumentController;\n  editingTextId: string | null;\n  stageRef: React.MutableRefObject<Konva.Stage | null>;\n  onRequestTextEdit: (id: string) => void;\n  onTextPlaced: (point: IAnnotationPoint) => void;\n}\n\nconst cursorForTool = (tool: TAnnotationTool): string => {\n  if (tool === 'select') return 'default';\n  if (tool === 'text') return 'text';\n  if (tool === 'eraser') return 'cell';\n  if (tool === 'crop') return 'default';\n  return 'crosshair';\n};\n\nconst AnnotationStage: React.FC<IAnnotationStageProps> = ({\n  baseImage,\n  imageSize,\n  fit,\n  viewRect,\n  cropDraft,\n  cropAspectRatio,\n  gutter,\n  onCropDraftChange,\n  tool,\n  style,\n  controller,\n  editingTextId,\n  stageRef,\n  onRequestTextEdit,\n  onTextPlaced,\n}) => {\n  const nodesRef = useRef<Map<string, Konva.Node>>(new Map());\n  const dragOriginRef = useRef<IAnnotationPoint | null>(null);\n  const erasedIdsRef = useRef<Set<string>>(new Set());\n  const finishGestureRef = useRef<() => void>(() => undefined);\n  const [draft, setDraft] = useState<TAnnotationElement | null>(null);\n  const [gestureActive, setGestureActive] = useState(false);\n\n  const { select, addElement, updateElement, removeElements } = controller;\n\n  const layerX = gutter / fit.scale - viewRect.x;\n  const layerY = gutter / fit.scale - viewRect.y;\n\n  const registerNode = useCallback((id: string, node: Konva.Node | null) => {\n    if (node) nodesRef.current.set(id, node);\n    else nodesRef.current.delete(id);\n  }, []);\n\n  const getNode = useCallback((id: string) => nodesRef.current.get(id) ?? null, []);\n\n  const pointFromStage = (stage: Konva.Stage): IAnnotationPoint | null => {\n    const pointer = stage.getPointerPosition();\n    if (!pointer) return null;\n    const point = clampPointToImage(\n      { x: (pointer.x - gutter) / fit.scale, y: (pointer.y - gutter) / fit.scale },\n      { width: viewRect.width, height: viewRect.height },\n    );\n    return { x: point.x + viewRect.x, y: point.y + viewRect.y };\n  };\n\n  const eraseAtPointer = (stage: Konva.Stage) => {\n    const pointer = stage.getPointerPosition();\n    if (!pointer) return;\n\n    let node: Konva.Node | null = stage.getIntersection(pointer);\n    while (node && !node.id()) node = node.getParent();\n    if (node?.id()) erasedIdsRef.current.add(node.id());\n  };\n\n  const handlePointerDown = (event: Konva.KonvaEventObject<PointerEvent>) => {\n    const stage = event.target.getStage();\n    if (!stage) return;\n\n    if (tool === 'select') {\n      if (event.target === stage) select(null);\n      return;\n    }\n\n    if (tool === 'crop') return;\n\n    if (tool === 'eraser') {\n      dragOriginRef.current = { x: 0, y: 0 };\n      erasedIdsRef.current = new Set();\n      setGestureActive(true);\n      eraseAtPointer(stage);\n      return;\n    }\n\n    const point = pointFromStage(stage);\n    if (!point) return;\n\n    if (tool === 'text') {\n      onTextPlaced(point);\n      return;\n    }\n\n    if (!DRAWING_TOOLS.includes(tool)) return;\n\n    dragOriginRef.current = point;\n    setGestureActive(true);\n    if (tool === 'freehand') setDraft(createFreehandElement(point, style, imageSize));\n    else if (tool === 'line' || tool === 'arrow') setDraft(createSegmentElement(tool, point, point, style, imageSize));\n    else if (tool === 'rectangle' || tool === 'ellipse')\n      setDraft(createShapeElement(tool, point, point, style, imageSize));\n  };\n\n  const handlePointerMove = (event: Konva.KonvaEventObject<PointerEvent>) => {\n    const stage = event.target.getStage();\n    if (!stage) return;\n\n    if (tool === 'eraser') {\n      if (dragOriginRef.current) eraseAtPointer(stage);\n      return;\n    }\n\n    const origin = dragOriginRef.current;\n    if (!origin || !draft) return;\n\n    const point = pointFromStage(stage);\n    if (!point) return;\n\n    setDraft((current) => {\n      if (!current) return current;\n\n      if (current.type === 'freehand') {\n        const next = { x: point.x - current.x, y: point.y - current.y };\n        if (!shouldAppendFreehandPoint(current.points, next, FREEHAND_MIN_DISTANCE_PX / fit.scale)) return current;\n        return { ...current, points: [...current.points, next.x, next.y] };\n      }\n\n      if (current.type === 'line' || current.type === 'arrow') return { ...current, end: point };\n\n      if (current.type === 'rectangle' || current.type === 'ellipse') {\n        return {\n          ...current,\n          x: Math.min(origin.x, point.x),\n          y: Math.min(origin.y, point.y),\n          width: Math.abs(point.x - origin.x),\n          height: Math.abs(point.y - origin.y),\n        };\n      }\n\n      return current;\n    });\n  };\n\n  const handlePointerUp = () => {\n    const origin = dragOriginRef.current;\n    dragOriginRef.current = null;\n    setGestureActive(false);\n\n    if (tool === 'eraser') {\n      removeElements([...erasedIdsRef.current]);\n      erasedIdsRef.current = new Set();\n      return;\n    }\n\n    const pending = draft;\n    setDraft(null);\n    if (!pending || !origin) return;\n\n    if (pending.type === 'freehand') {\n      if (pending.points.length < 4) return;\n      addElement(pending, { select: false });\n      return;\n    }\n\n    if (pending.type === 'line' || pending.type === 'arrow') {\n      if (isDegenerateDrag(pending.start, pending.end, DEGENERATE_DRAG_PX / fit.scale)) return;\n      addElement(pending);\n      return;\n    }\n\n    if (pending.type === 'rectangle' || pending.type === 'ellipse') {\n      if (pending.width < DEGENERATE_DRAG_PX / fit.scale || pending.height < DEGENERATE_DRAG_PX / fit.scale) return;\n      addElement(pending);\n    }\n  };\n\n  finishGestureRef.current = handlePointerUp;\n\n  /** Releasing the pointer outside the canvas must still commit the stroke, not orphan it. */\n  useEffect(() => {\n    if (!gestureActive) return;\n\n    const finish = () => finishGestureRef.current();\n    window.addEventListener('pointerup', finish);\n    window.addEventListener('pointercancel', finish);\n\n    return () => {\n      window.removeEventListener('pointerup', finish);\n      window.removeEventListener('pointercancel', finish);\n    };\n  }, [gestureActive]);\n\n  return (\n    <Stage\n      ref={stageRef}\n      width={fit.width + gutter * 2}\n      height={fit.height + gutter * 2}\n      scaleX={fit.scale}\n      scaleY={fit.scale}\n      style={{ cursor: cursorForTool(tool) }}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n    >\n      <Layer listening={false} x={layerX} y={layerY}>\n        <KonvaImage image={baseImage} width={imageSize.width} height={imageSize.height} perfectDrawEnabled={false} />\n      </Layer>\n\n      <Layer x={layerX} y={layerY}>\n        {controller.elements.map((element) => (\n          <AnnotationElementNode\n            key={element.id}\n            element={element}\n            draggable={tool === 'select'}\n            listening={tool === 'select' || tool === 'eraser'}\n            viewScale={fit.scale}\n            idleCursor={cursorForTool(tool)}\n            hidden={element.id === editingTextId}\n            onSelect={select}\n            onChange={updateElement}\n            onRequestTextEdit={onRequestTextEdit}\n            registerNode={registerNode}\n          />\n        ))}\n\n        {draft && (\n          <AnnotationElementNode\n            element={draft}\n            draggable={false}\n            listening={false}\n            viewScale={fit.scale}\n            idleCursor={cursorForTool(tool)}\n            hidden={false}\n            onSelect={select}\n            onChange={updateElement}\n            onRequestTextEdit={onRequestTextEdit}\n            registerNode={() => undefined}\n          />\n        )}\n\n        {tool === 'crop' && cropDraft && (\n          <AnnotationCropFrame\n            crop={cropDraft}\n            imageSize={imageSize}\n            viewScale={fit.scale}\n            gutter={gutter}\n            aspectRatio={cropAspectRatio}\n            onChange={onCropDraftChange}\n          />\n        )}\n\n        {tool === 'select' && !editingTextId && (\n          <AnnotationSelection\n            selectedElement={controller.selectedElement}\n            viewScale={fit.scale}\n            getNode={getNode}\n            onChange={updateElement}\n          />\n        )}\n      </Layer>\n    </Stage>\n  );\n};\n\nexport default AnnotationStage;\n"],"names":["KonvaImage"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import { TAnnotationCropAspect } from '../helpers/annotationCrop';
+interface IAnnotationCropBarProps {
+    aspect: TAnnotationCropAspect;
+    touch: boolean;
+    canReset: boolean;
+    onAspectChange: (aspect: TAnnotationCropAspect) => void;
+    onReset: () => void;
+    onCancel: () => void;
+    onApply: () => void;
+}
+declare const AnnotationCropBar: React.FC<IAnnotationCropBarProps>;
+export default AnnotationCropBar;

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

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../../Form/ControlledButton.js";
+import ControlledViewToggle from "../../../Form/ControlledViewToggle.js";
+import { MaterialSymbol } from "../../MaterialSymbol/index.js";
+import AnnotationToolButton from "./AnnotationToolButton.js";
+const AnnotationCropBar = ({
+  aspect,
+  touch,
+  canReset,
+  onAspectChange,
+  onReset,
+  onCancel,
+  onApply
+}) => {
+  const { t } = useTranslation("ui");
+  const aspectOptions = [
+    { value: "free", label: t("imageAnnotator.crop.aspect.free") },
+    { value: "original", label: t("imageAnnotator.crop.aspect.original") },
+    { value: "square", label: t("imageAnnotator.crop.aspect.square") },
+    { value: "portrait", label: t("imageAnnotator.crop.aspect.portrait") },
+    { value: "classic", label: t("imageAnnotator.crop.aspect.classic") },
+    { value: "wide", label: t("imageAnnotator.crop.aspect.wide") }
+  ];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "flex shrink-0 items-center gap-x-2 rounded-xl bg-muted-hover px-2 py-1.5",
+        touch ? "overflow-x-auto" : "flex-wrap gap-y-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1 text-xs font-medium text-foreground-muted", children: t("imageAnnotator.crop.aspectLabel") }),
+        /* @__PURE__ */ jsx(
+          ControlledViewToggle,
+          {
+            size: "sm",
+            syncWithUrl: false,
+            options: aspectOptions,
+            value: aspect,
+            onChange: onAspectChange,
+            className: "shrink-0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AnnotationToolButton,
+          {
+            icon: "restart_alt",
+            label: t("imageAnnotator.crop.reset"),
+            touch,
+            disabled: !canReset,
+            className: touch ? void 0 : "size-8",
+            onClick: onReset
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              size: "sm",
+              variant: "text",
+              tone: "neutral",
+              onClick: onCancel,
+              className: classNames("shrink-0 normal-case", touch && "h-11"),
+              children: t("imageAnnotator.crop.cancel")
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ControlledButton,
+            {
+              size: "sm",
+              onClick: onApply,
+              className: classNames("flex shrink-0 items-center gap-x-1.5 normal-case", touch && "h-11"),
+              children: [
+                /* @__PURE__ */ jsx(MaterialSymbol, { icon: "crop", size: 14, color: "white" }),
+                t("imageAnnotator.crop.apply")
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  AnnotationCropBar as default
+};
+//# sourceMappingURL=AnnotationCropBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationCropBar.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationCropBar.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledViewToggle, { IControlledViewToggleOption } from '@/components/Form/ControlledViewToggle';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport { TAnnotationCropAspect } from '../helpers/annotationCrop';\n\nimport AnnotationToolButton from './AnnotationToolButton';\n\ninterface IAnnotationCropBarProps {\n  aspect: TAnnotationCropAspect;\n  touch: boolean;\n  canReset: boolean;\n  onAspectChange: (aspect: TAnnotationCropAspect) => void;\n  onReset: () => void;\n  onCancel: () => void;\n  onApply: () => void;\n}\n\nconst AnnotationCropBar: React.FC<IAnnotationCropBarProps> = ({\n  aspect,\n  touch,\n  canReset,\n  onAspectChange,\n  onReset,\n  onCancel,\n  onApply,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const aspectOptions: Array<IControlledViewToggleOption<TAnnotationCropAspect>> = [\n    { value: 'free', label: t('imageAnnotator.crop.aspect.free') },\n    { value: 'original', label: t('imageAnnotator.crop.aspect.original') },\n    { value: 'square', label: t('imageAnnotator.crop.aspect.square') },\n    { value: 'portrait', label: t('imageAnnotator.crop.aspect.portrait') },\n    { value: 'classic', label: t('imageAnnotator.crop.aspect.classic') },\n    { value: 'wide', label: t('imageAnnotator.crop.aspect.wide') },\n  ];\n\n  return (\n    <div\n      className={classNames(\n        'flex shrink-0 items-center gap-x-2 rounded-xl bg-muted-hover px-2 py-1.5',\n        touch ? 'overflow-x-auto' : 'flex-wrap gap-y-2',\n      )}\n    >\n      <span className=\"shrink-0 px-1 text-xs font-medium text-foreground-muted\">\n        {t('imageAnnotator.crop.aspectLabel')}\n      </span>\n\n      <ControlledViewToggle<TAnnotationCropAspect>\n        size=\"sm\"\n        syncWithUrl={false}\n        options={aspectOptions}\n        value={aspect}\n        onChange={onAspectChange}\n        className=\"shrink-0\"\n      />\n\n      <AnnotationToolButton\n        icon=\"restart_alt\"\n        label={t('imageAnnotator.crop.reset')}\n        touch={touch}\n        disabled={!canReset}\n        className={touch ? undefined : 'size-8'}\n        onClick={onReset}\n      />\n\n      <div className=\"ml-auto flex shrink-0 items-center gap-x-2\">\n        <ControlledButton\n          size=\"sm\"\n          variant=\"text\"\n          tone=\"neutral\"\n          onClick={onCancel}\n          className={classNames('shrink-0 normal-case', touch && 'h-11')}\n        >\n          {t('imageAnnotator.crop.cancel')}\n        </ControlledButton>\n        <ControlledButton\n          size=\"sm\"\n          onClick={onApply}\n          className={classNames('flex shrink-0 items-center gap-x-1.5 normal-case', touch && 'h-11')}\n        >\n          <MaterialSymbol icon=\"crop\" size={14} color=\"white\" />\n          {t('imageAnnotator.crop.apply')}\n        </ControlledButton>\n      </div>\n    </div>\n  );\n};\n\nexport default AnnotationCropBar;\n"],"names":[],"mappings":";;;;;;;AAqBA,MAAM,oBAAuD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,gBAA2E;AAAA,IAC/E,EAAE,OAAO,QAAQ,OAAO,EAAE,iCAAiC,EAAA;AAAA,IAC3D,EAAE,OAAO,YAAY,OAAO,EAAE,qCAAqC,EAAA;AAAA,IACnE,EAAE,OAAO,UAAU,OAAO,EAAE,mCAAmC,EAAA;AAAA,IAC/D,EAAE,OAAO,YAAY,OAAO,EAAE,qCAAqC,EAAA;AAAA,IACnE,EAAE,OAAO,WAAW,OAAO,EAAE,oCAAoC,EAAA;AAAA,IACjE,EAAE,OAAO,QAAQ,OAAO,EAAE,iCAAiC,EAAA;AAAA,EAAE;AAG/D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,oBAAoB;AAAA,MAAA;AAAA,MAG9B,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,2DACb,UAAA,EAAE,iCAAiC,GACtC;AAAA,QAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,aAAa;AAAA,YACb,SAAS;AAAA,YACT,OAAO;AAAA,YACP,UAAU;AAAA,YACV,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,EAAE,2BAA2B;AAAA,YACpC;AAAA,YACA,UAAU,CAAC;AAAA,YACX,WAAW,QAAQ,SAAY;AAAA,YAC/B,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAGX,qBAAC,OAAA,EAAI,WAAU,8CACb,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW,WAAW,wBAAwB,SAAS,MAAM;AAAA,cAE5D,YAAE,4BAA4B;AAAA,YAAA;AAAA,UAAA;AAAA,UAEjC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW,WAAW,oDAAoD,SAAS,MAAM;AAAA,cAEzF,UAAA;AAAA,gBAAA,oBAAC,kBAAe,MAAK,QAAO,MAAM,IAAI,OAAM,SAAQ;AAAA,gBACnD,EAAE,2BAA2B;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChC,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,7 +1,9 @@
-import { IAnnotationTextElement } from '../interfaces/annotationDocument';
+import { IAnnotationPoint, IAnnotationTextElement } from '../interfaces/annotationDocument';
 interface IAnnotationTextOverlayProps {
     element: IAnnotationTextElement;
     viewScale: number;
+    /** Top-left of the visible image region, so a cropped view still places the editor over the text. */
+    viewOrigin: IAnnotationPoint;
     value: string;
     onChange: (value: string) => void;
     onCommit: () => void;

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

@@ -6,6 +6,7 @@ import { hexToRgba } from "../helpers/annotationCanvas.js";
 const AnnotationTextOverlay = ({
   element,
   viewScale,
+  viewOrigin,
   value,
   onChange,
   onCommit,
@@ -53,8 +54,8 @@ const AnnotationTextOverlay = ({
       },
       className: "absolute z-10 resize-none overflow-hidden rounded-lg outline-none ring-2 ring-ring",
       style: {
-        left: element.x * viewScale,
-        top: element.y * viewScale,
+        left: (element.x - viewOrigin.x) * viewScale,
+        top: (element.y - viewOrigin.y) * viewScale,
         width: element.width * viewScale,
         transform: `rotate(${element.rotation}deg)`,
         transformOrigin: "top left",

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

@@ -1 +1 @@
-{"version":3,"file":"AnnotationTextOverlay.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationTextOverlay.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { ANNOTATION_TEXT_FONT_FAMILY } from '../annotationStyle';\nimport { hexToRgba } from '../helpers/annotationCanvas';\nimport { IAnnotationTextElement } from '../interfaces/annotationDocument';\n\ninterface IAnnotationTextOverlayProps {\n  element: IAnnotationTextElement;\n  viewScale: number;\n  value: string;\n  onChange: (value: string) => void;\n  onCommit: () => void;\n  onCancel: () => void;\n}\n\n/**\n * The editor sits exactly where the element renders and mirrors its typography, so typing and\n * the committed result never disagree.\n */\nconst AnnotationTextOverlay: React.FC<IAnnotationTextOverlayProps> = ({\n  element,\n  viewScale,\n  value,\n  onChange,\n  onCommit,\n  onCancel,\n}) => {\n  const { t } = useTranslation('ui');\n  const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useEffect(() => {\n    const frame = window.requestAnimationFrame(() => {\n      const textarea = textareaRef.current;\n      if (!textarea) return;\n      textarea.focus();\n      textarea.setSelectionRange(textarea.value.length, textarea.value.length);\n    });\n\n    return () => window.cancelAnimationFrame(frame);\n  }, [element.id]);\n\n  useEffect(() => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    textarea.style.height = 'auto';\n    textarea.style.height = `${textarea.scrollHeight}px`;\n  }, [value, viewScale, element.fontSize]);\n\n  const fontSize = element.fontSize * viewScale;\n  const padding = element.padding * viewScale;\n\n  return (\n    <textarea\n      ref={textareaRef}\n      value={value}\n      aria-label={t('imageAnnotator.tools.text')}\n      placeholder={t('imageAnnotator.textPlaceholder')}\n      spellCheck={false}\n      onChange={(event) => onChange(event.target.value)}\n      onBlur={onCommit}\n      onKeyDown={(event) => {\n        event.stopPropagation();\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          onCancel();\n        }\n        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {\n          event.preventDefault();\n          onCommit();\n        }\n      }}\n      className=\"absolute z-10 resize-none overflow-hidden rounded-lg outline-none ring-2 ring-ring\"\n      style={{\n        left: element.x * viewScale,\n        top: element.y * viewScale,\n        width: element.width * viewScale,\n        transform: `rotate(${element.rotation}deg)`,\n        transformOrigin: 'top left',\n        fontFamily: ANNOTATION_TEXT_FONT_FAMILY,\n        fontSize,\n        lineHeight: 1.25,\n        padding,\n        textAlign: element.align,\n        fontWeight: element.bold ? 700 : 400,\n        fontStyle: element.italic ? 'italic' : 'normal',\n        color: element.color,\n        backgroundColor: element.background ? hexToRgba(element.background, element.backgroundOpacity) : 'transparent',\n        borderRadius: element.cornerRadius * viewScale,\n      }}\n    />\n  );\n};\n\nexport default AnnotationTextOverlay;\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,wBAA+D,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,cAAc,OAAmC,IAAI;AAE3D,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,sBAAsB,MAAM;AAC/C,YAAM,WAAW,YAAY;AAC7B,UAAI,CAAC,SAAU;AACf,eAAS,MAAA;AACT,eAAS,kBAAkB,SAAS,MAAM,QAAQ,SAAS,MAAM,MAAM;AAAA,IACzE,CAAC;AAED,WAAO,MAAM,OAAO,qBAAqB,KAAK;AAAA,EAChD,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEf,YAAU,MAAM;AACd,UAAM,WAAW,YAAY;AAC7B,QAAI,CAAC,SAAU;AACf,aAAS,MAAM,SAAS;AACxB,aAAS,MAAM,SAAS,GAAG,SAAS,YAAY;AAAA,EAClD,GAAG,CAAC,OAAO,WAAW,QAAQ,QAAQ,CAAC;AAEvC,QAAM,WAAW,QAAQ,WAAW;AACpC,QAAM,UAAU,QAAQ,UAAU;AAElC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,cAAY,EAAE,2BAA2B;AAAA,MACzC,aAAa,EAAE,gCAAgC;AAAA,MAC/C,YAAY;AAAA,MACZ,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MAChD,QAAQ;AAAA,MACR,WAAW,CAAC,UAAU;AACpB,cAAM,gBAAA;AACN,YAAI,MAAM,QAAQ,UAAU;AAC1B,gBAAM,eAAA;AACN,mBAAA;AAAA,QACF;AACA,YAAI,MAAM,QAAQ,YAAY,MAAM,WAAW,MAAM,UAAU;AAC7D,gBAAM,eAAA;AACN,mBAAA;AAAA,QACF;AAAA,MACF;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,MAAM,QAAQ,IAAI;AAAA,QAClB,KAAK,QAAQ,IAAI;AAAA,QACjB,OAAO,QAAQ,QAAQ;AAAA,QACvB,WAAW,UAAU,QAAQ,QAAQ;AAAA,QACrC,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,QACA,WAAW,QAAQ;AAAA,QACnB,YAAY,QAAQ,OAAO,MAAM;AAAA,QACjC,WAAW,QAAQ,SAAS,WAAW;AAAA,QACvC,OAAO,QAAQ;AAAA,QACf,iBAAiB,QAAQ,aAAa,UAAU,QAAQ,YAAY,QAAQ,iBAAiB,IAAI;AAAA,QACjG,cAAc,QAAQ,eAAe;AAAA,MAAA;AAAA,IACvC;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"AnnotationTextOverlay.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationTextOverlay.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { ANNOTATION_TEXT_FONT_FAMILY } from '../annotationStyle';\nimport { hexToRgba } from '../helpers/annotationCanvas';\nimport { IAnnotationPoint, IAnnotationTextElement } from '../interfaces/annotationDocument';\n\ninterface IAnnotationTextOverlayProps {\n  element: IAnnotationTextElement;\n  viewScale: number;\n  /** Top-left of the visible image region, so a cropped view still places the editor over the text. */\n  viewOrigin: IAnnotationPoint;\n  value: string;\n  onChange: (value: string) => void;\n  onCommit: () => void;\n  onCancel: () => void;\n}\n\n/**\n * The editor sits exactly where the element renders and mirrors its typography, so typing and\n * the committed result never disagree.\n */\nconst AnnotationTextOverlay: React.FC<IAnnotationTextOverlayProps> = ({\n  element,\n  viewScale,\n  viewOrigin,\n  value,\n  onChange,\n  onCommit,\n  onCancel,\n}) => {\n  const { t } = useTranslation('ui');\n  const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useEffect(() => {\n    const frame = window.requestAnimationFrame(() => {\n      const textarea = textareaRef.current;\n      if (!textarea) return;\n      textarea.focus();\n      textarea.setSelectionRange(textarea.value.length, textarea.value.length);\n    });\n\n    return () => window.cancelAnimationFrame(frame);\n  }, [element.id]);\n\n  useEffect(() => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    textarea.style.height = 'auto';\n    textarea.style.height = `${textarea.scrollHeight}px`;\n  }, [value, viewScale, element.fontSize]);\n\n  const fontSize = element.fontSize * viewScale;\n  const padding = element.padding * viewScale;\n\n  return (\n    <textarea\n      ref={textareaRef}\n      value={value}\n      aria-label={t('imageAnnotator.tools.text')}\n      placeholder={t('imageAnnotator.textPlaceholder')}\n      spellCheck={false}\n      onChange={(event) => onChange(event.target.value)}\n      onBlur={onCommit}\n      onKeyDown={(event) => {\n        event.stopPropagation();\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          onCancel();\n        }\n        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {\n          event.preventDefault();\n          onCommit();\n        }\n      }}\n      className=\"absolute z-10 resize-none overflow-hidden rounded-lg outline-none ring-2 ring-ring\"\n      style={{\n        left: (element.x - viewOrigin.x) * viewScale,\n        top: (element.y - viewOrigin.y) * viewScale,\n        width: element.width * viewScale,\n        transform: `rotate(${element.rotation}deg)`,\n        transformOrigin: 'top left',\n        fontFamily: ANNOTATION_TEXT_FONT_FAMILY,\n        fontSize,\n        lineHeight: 1.25,\n        padding,\n        textAlign: element.align,\n        fontWeight: element.bold ? 700 : 400,\n        fontStyle: element.italic ? 'italic' : 'normal',\n        color: element.color,\n        backgroundColor: element.background ? hexToRgba(element.background, element.backgroundOpacity) : 'transparent',\n        borderRadius: element.cornerRadius * viewScale,\n      }}\n    />\n  );\n};\n\nexport default AnnotationTextOverlay;\n"],"names":[],"mappings":";;;;;AAsBA,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,cAAc,OAAmC,IAAI;AAE3D,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,sBAAsB,MAAM;AAC/C,YAAM,WAAW,YAAY;AAC7B,UAAI,CAAC,SAAU;AACf,eAAS,MAAA;AACT,eAAS,kBAAkB,SAAS,MAAM,QAAQ,SAAS,MAAM,MAAM;AAAA,IACzE,CAAC;AAED,WAAO,MAAM,OAAO,qBAAqB,KAAK;AAAA,EAChD,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEf,YAAU,MAAM;AACd,UAAM,WAAW,YAAY;AAC7B,QAAI,CAAC,SAAU;AACf,aAAS,MAAM,SAAS;AACxB,aAAS,MAAM,SAAS,GAAG,SAAS,YAAY;AAAA,EAClD,GAAG,CAAC,OAAO,WAAW,QAAQ,QAAQ,CAAC;AAEvC,QAAM,WAAW,QAAQ,WAAW;AACpC,QAAM,UAAU,QAAQ,UAAU;AAElC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,cAAY,EAAE,2BAA2B;AAAA,MACzC,aAAa,EAAE,gCAAgC;AAAA,MAC/C,YAAY;AAAA,MACZ,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MAChD,QAAQ;AAAA,MACR,WAAW,CAAC,UAAU;AACpB,cAAM,gBAAA;AACN,YAAI,MAAM,QAAQ,UAAU;AAC1B,gBAAM,eAAA;AACN,mBAAA;AAAA,QACF;AACA,YAAI,MAAM,QAAQ,YAAY,MAAM,WAAW,MAAM,UAAU;AAC7D,gBAAM,eAAA;AACN,mBAAA;AAAA,QACF;AAAA,MACF;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO,QAAQ,IAAI,WAAW,KAAK;AAAA,QACnC,MAAM,QAAQ,IAAI,WAAW,KAAK;AAAA,QAClC,OAAO,QAAQ,QAAQ;AAAA,QACvB,WAAW,UAAU,QAAQ,QAAQ;AAAA,QACrC,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,QACA,WAAW,QAAQ;AAAA,QACnB,YAAY,QAAQ,OAAO,MAAM;AAAA,QACjC,WAAW,QAAQ,SAAS,WAAW;AAAA,QACvC,OAAO,QAAQ;AAAA,QACf,iBAAiB,QAAQ,aAAa,UAAU,QAAQ,YAAY,QAAQ,iBAAiB,IAAI;AAAA,QACjG,cAAc,QAAQ,eAAe;AAAA,MAAA;AAAA,IACvC;AAAA,EAAA;AAGN;"}

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

@@ -53,6 +53,17 @@ const AnnotationToolbar = ({
               showLabel: touch,
               onClick: () => fileInputRef.current?.click()
             }
+          ),
+          /* @__PURE__ */ jsx(
+            AnnotationToolButton,
+            {
+              icon: "crop",
+              label: t("imageAnnotator.tools.crop"),
+              active: tool === "crop",
+              touch,
+              showLabel: touch,
+              onClick: () => onToolChange("crop")
+            }
           )
         ]
       }

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

@@ -1 +1 @@
-{"version":3,"file":"AnnotationToolbar.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationToolbar.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { TAnnotationTool } from '../interfaces/annotationDocument';\n\nimport AnnotationToolButton from './AnnotationToolButton';\n\nconst TOOL_OPTIONS: Array<{ tool: TAnnotationTool; icon: SymbolCodepoints; labelKey: string }> = [\n  { tool: 'select', icon: 'arrow_selector_tool', labelKey: 'imageAnnotator.tools.select' },\n  { tool: 'freehand', icon: 'draw', labelKey: 'imageAnnotator.tools.pen' },\n  { tool: 'eraser', icon: 'ink_eraser', labelKey: 'imageAnnotator.tools.eraser' },\n  { tool: 'arrow', icon: 'north_east', labelKey: 'imageAnnotator.tools.arrow' },\n  { tool: 'line', icon: 'horizontal_rule', labelKey: 'imageAnnotator.tools.line' },\n  { tool: 'rectangle', icon: 'rectangle', labelKey: 'imageAnnotator.tools.rectangle' },\n  { tool: 'ellipse', icon: 'circle', labelKey: 'imageAnnotator.tools.ellipse' },\n  { tool: 'text', icon: 'title', labelKey: 'imageAnnotator.tools.text' },\n];\n\nconst ACCEPTED_IMAGE_TYPES = 'image/png,image/jpeg,image/webp,image/gif';\n\ninterface IAnnotationToolbarProps {\n  tool: TAnnotationTool;\n  touch: boolean;\n  actions?: React.ReactNode;\n  onToolChange: (tool: TAnnotationTool) => void;\n  onInsertImage: (file: File) => void;\n}\n\nconst AnnotationToolbar: React.FC<IAnnotationToolbarProps> = ({\n  tool,\n  touch,\n  actions,\n  onToolChange,\n  onInsertImage,\n}) => {\n  const { t } = useTranslation('ui');\n  const fileInputRef = useRef<HTMLInputElement | null>(null);\n\n  return (\n    <div className={classNames('flex shrink-0 items-center gap-x-2', !touch && 'flex-wrap gap-y-2')}>\n      <div\n        className={classNames(\n          'flex items-center gap-x-0.5 rounded-xl bg-muted-hover p-1',\n          touch && 'min-w-0 flex-1 overflow-x-auto',\n        )}\n      >\n        {TOOL_OPTIONS.map(({ tool: option, icon, labelKey }) => (\n          <AnnotationToolButton\n            key={option}\n            icon={icon}\n            label={t(labelKey)}\n            active={tool === option}\n            touch={touch}\n            showLabel={touch}\n            onClick={() => onToolChange(option)}\n          />\n        ))}\n\n        <AnnotationToolButton\n          icon=\"add_photo_alternate\"\n          label={t('imageAnnotator.tools.image')}\n          touch={touch}\n          showLabel={touch}\n          onClick={() => fileInputRef.current?.click()}\n        />\n      </div>\n\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={ACCEPTED_IMAGE_TYPES}\n        className=\"hidden\"\n        onChange={(event) => {\n          const file = event.target.files?.[0];\n          event.target.value = '';\n          if (file) onInsertImage(file);\n        }}\n      />\n\n      {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n    </div>\n  );\n};\n\nexport default AnnotationToolbar;\n"],"names":[],"mappings":";;;;;AAUA,MAAM,eAA2F;AAAA,EAC/F,EAAE,MAAM,UAAU,MAAM,uBAAuB,UAAU,8BAAA;AAAA,EACzD,EAAE,MAAM,YAAY,MAAM,QAAQ,UAAU,2BAAA;AAAA,EAC5C,EAAE,MAAM,UAAU,MAAM,cAAc,UAAU,8BAAA;AAAA,EAChD,EAAE,MAAM,SAAS,MAAM,cAAc,UAAU,6BAAA;AAAA,EAC/C,EAAE,MAAM,QAAQ,MAAM,mBAAmB,UAAU,4BAAA;AAAA,EACnD,EAAE,MAAM,aAAa,MAAM,aAAa,UAAU,iCAAA;AAAA,EAClD,EAAE,MAAM,WAAW,MAAM,UAAU,UAAU,+BAAA;AAAA,EAC7C,EAAE,MAAM,QAAQ,MAAM,SAAS,UAAU,4BAAA;AAC3C;AAEA,MAAM,uBAAuB;AAU7B,MAAM,oBAAuD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,eAAe,OAAgC,IAAI;AAEzD,SACE,qBAAC,SAAI,WAAW,WAAW,sCAAsC,CAAC,SAAS,mBAAmB,GAC5F,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,QAGV,UAAA;AAAA,UAAA,aAAa,IAAI,CAAC,EAAE,MAAM,QAAQ,MAAM,eACvC;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA,OAAO,EAAE,QAAQ;AAAA,cACjB,QAAQ,SAAS;AAAA,cACjB;AAAA,cACA,WAAW;AAAA,cACX,SAAS,MAAM,aAAa,MAAM;AAAA,YAAA;AAAA,YAN7B;AAAA,UAAA,CAQR;AAAA,UAED;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,EAAE,4BAA4B;AAAA,cACrC;AAAA,cACA,WAAW;AAAA,cACX,SAAS,MAAM,aAAa,SAAS,MAAA;AAAA,YAAM;AAAA,UAAA;AAAA,QAC7C;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAQ;AAAA,QACR,WAAU;AAAA,QACV,UAAU,CAAC,UAAU;AACnB,gBAAM,OAAO,MAAM,OAAO,QAAQ,CAAC;AACnC,gBAAM,OAAO,QAAQ;AACrB,cAAI,oBAAoB,IAAI;AAAA,QAC9B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,WAAW,oBAAC,OAAA,EAAI,WAAU,6BAA6B,UAAA,QAAA,CAAQ;AAAA,EAAA,GAClE;AAEJ;"}
+{"version":3,"file":"AnnotationToolbar.js","sources":["../../../../../src/components/UI/ImageAnnotator/components/AnnotationToolbar.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { TAnnotationTool } from '../interfaces/annotationDocument';\n\nimport AnnotationToolButton from './AnnotationToolButton';\n\nconst TOOL_OPTIONS: Array<{ tool: TAnnotationTool; icon: SymbolCodepoints; labelKey: string }> = [\n  { tool: 'select', icon: 'arrow_selector_tool', labelKey: 'imageAnnotator.tools.select' },\n  { tool: 'freehand', icon: 'draw', labelKey: 'imageAnnotator.tools.pen' },\n  { tool: 'eraser', icon: 'ink_eraser', labelKey: 'imageAnnotator.tools.eraser' },\n  { tool: 'arrow', icon: 'north_east', labelKey: 'imageAnnotator.tools.arrow' },\n  { tool: 'line', icon: 'horizontal_rule', labelKey: 'imageAnnotator.tools.line' },\n  { tool: 'rectangle', icon: 'rectangle', labelKey: 'imageAnnotator.tools.rectangle' },\n  { tool: 'ellipse', icon: 'circle', labelKey: 'imageAnnotator.tools.ellipse' },\n  { tool: 'text', icon: 'title', labelKey: 'imageAnnotator.tools.text' },\n];\n\nconst ACCEPTED_IMAGE_TYPES = 'image/png,image/jpeg,image/webp,image/gif';\n\ninterface IAnnotationToolbarProps {\n  tool: TAnnotationTool;\n  touch: boolean;\n  actions?: React.ReactNode;\n  onToolChange: (tool: TAnnotationTool) => void;\n  onInsertImage: (file: File) => void;\n}\n\nconst AnnotationToolbar: React.FC<IAnnotationToolbarProps> = ({\n  tool,\n  touch,\n  actions,\n  onToolChange,\n  onInsertImage,\n}) => {\n  const { t } = useTranslation('ui');\n  const fileInputRef = useRef<HTMLInputElement | null>(null);\n\n  return (\n    <div className={classNames('flex shrink-0 items-center gap-x-2', !touch && 'flex-wrap gap-y-2')}>\n      <div\n        className={classNames(\n          'flex items-center gap-x-0.5 rounded-xl bg-muted-hover p-1',\n          touch && 'min-w-0 flex-1 overflow-x-auto',\n        )}\n      >\n        {TOOL_OPTIONS.map(({ tool: option, icon, labelKey }) => (\n          <AnnotationToolButton\n            key={option}\n            icon={icon}\n            label={t(labelKey)}\n            active={tool === option}\n            touch={touch}\n            showLabel={touch}\n            onClick={() => onToolChange(option)}\n          />\n        ))}\n\n        <AnnotationToolButton\n          icon=\"add_photo_alternate\"\n          label={t('imageAnnotator.tools.image')}\n          touch={touch}\n          showLabel={touch}\n          onClick={() => fileInputRef.current?.click()}\n        />\n\n        <AnnotationToolButton\n          icon=\"crop\"\n          label={t('imageAnnotator.tools.crop')}\n          active={tool === 'crop'}\n          touch={touch}\n          showLabel={touch}\n          onClick={() => onToolChange('crop')}\n        />\n      </div>\n\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={ACCEPTED_IMAGE_TYPES}\n        className=\"hidden\"\n        onChange={(event) => {\n          const file = event.target.files?.[0];\n          event.target.value = '';\n          if (file) onInsertImage(file);\n        }}\n      />\n\n      {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n    </div>\n  );\n};\n\nexport default AnnotationToolbar;\n"],"names":[],"mappings":";;;;;AAUA,MAAM,eAA2F;AAAA,EAC/F,EAAE,MAAM,UAAU,MAAM,uBAAuB,UAAU,8BAAA;AAAA,EACzD,EAAE,MAAM,YAAY,MAAM,QAAQ,UAAU,2BAAA;AAAA,EAC5C,EAAE,MAAM,UAAU,MAAM,cAAc,UAAU,8BAAA;AAAA,EAChD,EAAE,MAAM,SAAS,MAAM,cAAc,UAAU,6BAAA;AAAA,EAC/C,EAAE,MAAM,QAAQ,MAAM,mBAAmB,UAAU,4BAAA;AAAA,EACnD,EAAE,MAAM,aAAa,MAAM,aAAa,UAAU,iCAAA;AAAA,EAClD,EAAE,MAAM,WAAW,MAAM,UAAU,UAAU,+BAAA;AAAA,EAC7C,EAAE,MAAM,QAAQ,MAAM,SAAS,UAAU,4BAAA;AAC3C;AAEA,MAAM,uBAAuB;AAU7B,MAAM,oBAAuD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,eAAe,OAAgC,IAAI;AAEzD,SACE,qBAAC,SAAI,WAAW,WAAW,sCAAsC,CAAC,SAAS,mBAAmB,GAC5F,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,QAGV,UAAA;AAAA,UAAA,aAAa,IAAI,CAAC,EAAE,MAAM,QAAQ,MAAM,eACvC;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA,OAAO,EAAE,QAAQ;AAAA,cACjB,QAAQ,SAAS;AAAA,cACjB;AAAA,cACA,WAAW;AAAA,cACX,SAAS,MAAM,aAAa,MAAM;AAAA,YAAA;AAAA,YAN7B;AAAA,UAAA,CAQR;AAAA,UAED;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,EAAE,4BAA4B;AAAA,cACrC;AAAA,cACA,WAAW;AAAA,cACX,SAAS,MAAM,aAAa,SAAS,MAAA;AAAA,YAAM;AAAA,UAAA;AAAA,UAG7C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,EAAE,2BAA2B;AAAA,cACpC,QAAQ,SAAS;AAAA,cACjB;AAAA,cACA,WAAW;AAAA,cACX,SAAS,MAAM,aAAa,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACpC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAQ;AAAA,QACR,WAAU;AAAA,QACV,UAAU,CAAC,UAAU;AACnB,gBAAM,OAAO,MAAM,OAAO,QAAQ,CAAC;AACnC,gBAAM,OAAO,QAAQ;AACrB,cAAI,oBAAoB,IAAI;AAAA,QAC9B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,WAAW,oBAAC,OAAA,EAAI,WAAU,6BAA6B,UAAA,QAAA,CAAQ;AAAA,EAAA,GAClE;AAEJ;"}

package/dist/components/UI/ImageAnnotator/helpers/annotationCrop.d.ts

@@ -0,0 +1,12 @@
+import { IAnnotationCropRect, IAnnotationSize } from '../interfaces/annotationDocument';
+export type TAnnotationCropAspect = 'free' | 'original' | 'square' | 'portrait' | 'classic' | 'wide';
+export declare const ANNOTATION_CROP_ASPECTS: Array<TAnnotationCropAspect>;
+export declare const fullImageCrop: (size: IAnnotationSize) => IAnnotationCropRect;
+export declare const minCropDimension: (size: IAnnotationSize) => number;
+export declare const aspectRatioFor: (aspect: TAnnotationCropAspect, size: IAnnotationSize) => number | null;
+export declare const clampCropToImage: (crop: IAnnotationCropRect, size: IAnnotationSize) => IAnnotationCropRect;
+/** Largest rect with the requested ratio, kept on the current crop's center so the framing does not jump. */
+export declare const fitCropToAspect: (crop: IAnnotationCropRect, ratio: number, size: IAnnotationSize) => IAnnotationCropRect;
+export declare const isFullImageCrop: (crop: IAnnotationCropRect | null, size: IAnnotationSize) => boolean;
+/** A saved document is untrusted input: a crop that does not fit the image is dropped, never applied. */
+export declare const sanitizeInitialCrop: (crop: IAnnotationCropRect | null | undefined, size: IAnnotationSize) => IAnnotationCropRect | null;