@umodeapporg/ui 0.1.0

package/dist/components/UI/ImageAnnotator/helpers/annotationCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotationCanvas.js","sources":["../../../../../src/components/UI/ImageAnnotator/helpers/annotationCanvas.ts"],"sourcesContent":["import { IAnnotationPoint, IAnnotationSize } from '../interfaces/annotationDocument';\n\n/** Selection chrome is drawn inside a scaled stage, so every screen-pixel size divides by the scale. */\nexport const SELECTION_ANCHOR_PX = 10;\nexport const SELECTION_BORDER_PX = 1.5;\nexport const SEGMENT_HANDLE_PX = 7;\nexport const MIN_HIT_STROKE_PX = 18;\n\nexport const hexToRgba = (color: string, alpha: number): string => {\n  const hex = color.replace('#', '');\n  if (hex.length !== 6) return color;\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  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;\n};\n\nexport interface IStageFit {\n  width: number;\n  height: number;\n  scale: number;\n}\n\n/** The stage always shows the whole image: element coordinates stay in native image pixels. */\nexport const fitStageToViewport = (image: IAnnotationSize, viewport: IAnnotationSize): IStageFit => {\n  const safeWidth = Math.max(1, viewport.width);\n  const safeHeight = Math.max(1, viewport.height);\n  const scale = Math.min(safeWidth / image.width, safeHeight / image.height, 1);\n\n  return {\n    width: Math.max(1, Math.round(image.width * scale)),\n    height: Math.max(1, Math.round(image.height * scale)),\n    scale: scale || 1,\n  };\n};\n\nexport const clampPointToImage = (point: IAnnotationPoint, size: IAnnotationSize): IAnnotationPoint => ({\n  x: Math.min(Math.max(point.x, 0), size.width),\n  y: Math.min(Math.max(point.y, 0), size.height),\n});\n\n/**\n * Freehand sampling: a pointer emits far more points than a stroke needs, and every extra point is\n * paid again on every redraw and on export.\n */\nexport const shouldAppendFreehandPoint = (\n  points: Array<number>,\n  next: IAnnotationPoint,\n  minDistance: number,\n): boolean => {\n  const lastX = points[points.length - 2];\n  const lastY = points[points.length - 1];\n  if (lastX === undefined || lastY === undefined) return true;\n\n  return Math.hypot(next.x - lastX, next.y - lastY) >= minDistance;\n};\n\nexport const isDegenerateDrag = (start: IAnnotationPoint, end: IAnnotationPoint, threshold: number): boolean =>\n  Math.abs(end.x - start.x) < threshold && Math.abs(end.y - start.y) < threshold;\n"],"names":[],"mappings":"AAGO,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;AAC1B,MAAM,oBAAoB;AAE1B,MAAM,YAAY,CAAC,OAAe,UAA0B;AACjE,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,SAAO,QAAQ,GAAG,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK;AACjD;AASO,MAAM,qBAAqB,CAAC,OAAwB,aAAyC;AAClG,QAAM,YAAY,KAAK,IAAI,GAAG,SAAS,KAAK;AAC5C,QAAM,aAAa,KAAK,IAAI,GAAG,SAAS,MAAM;AAC9C,QAAM,QAAQ,KAAK,IAAI,YAAY,MAAM,OAAO,aAAa,MAAM,QAAQ,CAAC;AAE5E,SAAO;AAAA,IACL,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,QAAQ,KAAK,CAAC;AAAA,IAClD,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,SAAS,KAAK,CAAC;AAAA,IACpD,OAAO,SAAS;AAAA,EAAA;AAEpB;AAEO,MAAM,oBAAoB,CAAC,OAAyB,UAA6C;AAAA,EACtG,GAAG,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,CAAC,GAAG,KAAK,KAAK;AAAA,EAC5C,GAAG,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,CAAC,GAAG,KAAK,MAAM;AAC/C;AAMO,MAAM,4BAA4B,CACvC,QACA,MACA,gBACY;AACZ,QAAM,QAAQ,OAAO,OAAO,SAAS,CAAC;AACtC,QAAM,QAAQ,OAAO,OAAO,SAAS,CAAC;AACtC,MAAI,UAAU,UAAa,UAAU,OAAW,QAAO;AAEvD,SAAO,KAAK,MAAM,KAAK,IAAI,OAAO,KAAK,IAAI,KAAK,KAAK;AACvD;AAEO,MAAM,mBAAmB,CAAC,OAAyB,KAAuB,cAC/E,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,aAAa,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI;"}

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

@@ -0,0 +1,15 @@
+import { IAnnotationStyle } from '../annotationStyle';
+import { IAnnotationDocument, IAnnotationFreehandElement, IAnnotationImageElement, IAnnotationPoint, IAnnotationSegmentElement, IAnnotationShapeElement, IAnnotationSize, IAnnotationTextElement, TAnnotationElement } from '../interfaces/annotationDocument';
+export declare const imageMaxDimension: ({ width, height }: IAnnotationSize) => number;
+export declare const createFreehandElement: (origin: IAnnotationPoint, style: IAnnotationStyle, size: IAnnotationSize) => IAnnotationFreehandElement;
+export declare const createSegmentElement: (type: IAnnotationSegmentElement["type"], start: IAnnotationPoint, end: IAnnotationPoint, style: IAnnotationStyle, size: IAnnotationSize) => IAnnotationSegmentElement;
+export declare const createShapeElement: (type: IAnnotationShapeElement["type"], start: IAnnotationPoint, end: IAnnotationPoint, style: IAnnotationStyle, size: IAnnotationSize) => IAnnotationShapeElement;
+export declare const createTextElement: (origin: IAnnotationPoint, style: IAnnotationStyle, size: IAnnotationSize, text?: string) => IAnnotationTextElement;
+export declare const createImageElement: (src: string, natural: IAnnotationSize, size: IAnnotationSize) => IAnnotationImageElement;
+export declare const translateElement: (element: TAnnotationElement, deltaX: number, deltaY: number) => TAnnotationElement;
+export declare const duplicateElement: (element: TAnnotationElement, offset: number) => TAnnotationElement;
+/** The toolbar mirrors the selected element, so editing a value never means guessing which one wins. */
+export declare const styleFromElement: (element: TAnnotationElement, current: IAnnotationStyle, size: IAnnotationSize) => IAnnotationStyle;
+export declare const applyStyleToElement: (element: TAnnotationElement, style: IAnnotationStyle, size: IAnnotationSize) => TAnnotationElement;
+export declare const reorderElements: (elements: Array<TAnnotationElement>, id: string, direction: "forward" | "backward" | "front" | "back") => Array<TAnnotationElement>;
+export declare const createEmptyDocument: (size: IAnnotationSize) => IAnnotationDocument;

package/dist/components/UI/ImageAnnotator/helpers/annotationElements.js

@@ -0,0 +1,165 @@
+import { generateUUID } from "../../../../helpers/utilityHelpers.js";
+import { closestFontSize, closestStrokeSize, fontSizeForScale, strokeWidthForSize } from "../annotationStyle.js";
+import { isFillableElement, isSegmentElement, ANNOTATION_DOCUMENT_VERSION } from "../interfaces/annotationDocument.js";
+const imageMaxDimension = ({ width, height }) => Math.max(width, height);
+const baseElement = () => ({ id: generateUUID(), rotation: 0, opacity: 1 });
+const createFreehandElement = (origin, style, size) => ({
+  ...baseElement(),
+  type: "freehand",
+  x: origin.x,
+  y: origin.y,
+  points: [0, 0],
+  stroke: style.color,
+  strokeWidth: strokeWidthForSize(style.strokeSize, imageMaxDimension(size))
+});
+const createSegmentElement = (type, start, end, style, size) => ({
+  ...baseElement(),
+  type,
+  start,
+  end,
+  stroke: style.color,
+  strokeWidth: strokeWidthForSize(style.strokeSize, imageMaxDimension(size))
+});
+const createShapeElement = (type, start, end, style, size) => ({
+  ...baseElement(),
+  type,
+  x: Math.min(start.x, end.x),
+  y: Math.min(start.y, end.y),
+  width: Math.abs(end.x - start.x),
+  height: Math.abs(end.y - start.y),
+  stroke: style.color,
+  strokeWidth: strokeWidthForSize(style.strokeSize, imageMaxDimension(size)),
+  fill: style.fill,
+  fillOpacity: style.fillOpacity,
+  cornerRadius: type === "rectangle" ? Math.round(imageMaxDimension(size) * 8e-3) : 0
+});
+const createTextElement = (origin, style, size, text = "") => {
+  const fontSize = fontSizeForScale(style.fontSize, imageMaxDimension(size));
+  return {
+    ...baseElement(),
+    type: "text",
+    x: origin.x,
+    y: origin.y,
+    width: Math.min(size.width * 0.6, Math.max(fontSize * 8, size.width * 0.3)),
+    text,
+    fontSize,
+    bold: style.bold,
+    italic: style.italic,
+    align: style.align,
+    color: style.color,
+    background: style.textBackground,
+    backgroundOpacity: 1,
+    padding: Math.round(fontSize * 0.35),
+    cornerRadius: Math.round(fontSize * 0.25)
+  };
+};
+const createImageElement = (src, natural, size) => {
+  const scale = Math.min(size.width * 0.4 / natural.width, size.height * 0.4 / natural.height, 1);
+  const width = Math.max(24, Math.round(natural.width * scale));
+  const height = Math.max(24, Math.round(natural.height * scale));
+  return {
+    ...baseElement(),
+    type: "image",
+    x: Math.round((size.width - width) / 2),
+    y: Math.round((size.height - height) / 2),
+    width,
+    height,
+    src,
+    naturalWidth: natural.width,
+    naturalHeight: natural.height,
+    cornerRadius: Math.round(imageMaxDimension(size) * 6e-3),
+    stroke: null,
+    strokeWidth: Math.max(2, Math.round(imageMaxDimension(size) * 4e-3)),
+    shadow: true
+  };
+};
+const translateElement = (element, deltaX, deltaY) => {
+  if (isSegmentElement(element)) {
+    return {
+      ...element,
+      start: { x: element.start.x + deltaX, y: element.start.y + deltaY },
+      end: { x: element.end.x + deltaX, y: element.end.y + deltaY }
+    };
+  }
+  return { ...element, x: element.x + deltaX, y: element.y + deltaY };
+};
+const duplicateElement = (element, offset) => ({
+  ...translateElement(element, offset, offset),
+  id: generateUUID()
+});
+const styleFromElement = (element, current, size) => {
+  const maxDimension = imageMaxDimension(size);
+  if (element.type === "text") {
+    return {
+      ...current,
+      color: element.color,
+      fontSize: closestFontSize(element.fontSize, maxDimension),
+      bold: element.bold,
+      italic: element.italic,
+      align: element.align,
+      textBackground: element.background
+    };
+  }
+  if (element.type === "image") return current;
+  return {
+    ...current,
+    color: element.stroke,
+    strokeSize: closestStrokeSize(element.strokeWidth, maxDimension),
+    ...isFillableElement(element) ? { fill: element.fill, fillOpacity: element.fillOpacity } : {}
+  };
+};
+const applyStyleToElement = (element, style, size) => {
+  const maxDimension = imageMaxDimension(size);
+  if (element.type === "text") {
+    const fontSize = fontSizeForScale(style.fontSize, maxDimension);
+    return {
+      ...element,
+      color: style.color,
+      fontSize,
+      bold: style.bold,
+      italic: style.italic,
+      align: style.align,
+      background: style.textBackground,
+      padding: Math.round(fontSize * 0.35),
+      cornerRadius: Math.round(fontSize * 0.25)
+    };
+  }
+  if (element.type === "image") return element;
+  return {
+    ...element,
+    stroke: style.color,
+    strokeWidth: strokeWidthForSize(style.strokeSize, maxDimension),
+    ...isFillableElement(element) ? { fill: style.fill, fillOpacity: style.fillOpacity } : {}
+  };
+};
+const reorderElements = (elements, id, direction) => {
+  const index = elements.findIndex((element) => element.id === id);
+  if (index < 0) return elements;
+  const target = direction === "front" ? elements.length - 1 : direction === "back" ? 0 : Math.min(elements.length - 1, Math.max(0, index + (direction === "forward" ? 1 : -1)));
+  if (target === index) return elements;
+  const next = [...elements];
+  const [moved] = next.splice(index, 1);
+  next.splice(target, 0, moved);
+  return next;
+};
+const createEmptyDocument = (size) => ({
+  version: ANNOTATION_DOCUMENT_VERSION,
+  width: size.width,
+  height: size.height,
+  elements: []
+});
+export {
+  applyStyleToElement,
+  createEmptyDocument,
+  createFreehandElement,
+  createImageElement,
+  createSegmentElement,
+  createShapeElement,
+  createTextElement,
+  duplicateElement,
+  imageMaxDimension,
+  reorderElements,
+  styleFromElement,
+  translateElement
+};
+//# sourceMappingURL=annotationElements.js.map

package/dist/components/UI/ImageAnnotator/helpers/annotationElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotationElements.js","sources":["../../../../../src/components/UI/ImageAnnotator/helpers/annotationElements.ts"],"sourcesContent":["import { generateUUID } from '@/helpers/utilityHelpers';\n\nimport {\n  closestFontSize,\n  closestStrokeSize,\n  fontSizeForScale,\n  IAnnotationStyle,\n  strokeWidthForSize,\n} from '../annotationStyle';\nimport {\n  ANNOTATION_DOCUMENT_VERSION,\n  IAnnotationDocument,\n  IAnnotationFreehandElement,\n  IAnnotationImageElement,\n  IAnnotationPoint,\n  IAnnotationSegmentElement,\n  IAnnotationShapeElement,\n  IAnnotationSize,\n  IAnnotationTextElement,\n  isFillableElement,\n  isSegmentElement,\n  TAnnotationElement,\n} from '../interfaces/annotationDocument';\n\nexport const imageMaxDimension = ({ width, height }: IAnnotationSize): number => Math.max(width, height);\n\nconst baseElement = () => ({ id: generateUUID(), rotation: 0, opacity: 1 });\n\nexport const createFreehandElement = (\n  origin: IAnnotationPoint,\n  style: IAnnotationStyle,\n  size: IAnnotationSize,\n): IAnnotationFreehandElement => ({\n  ...baseElement(),\n  type: 'freehand',\n  x: origin.x,\n  y: origin.y,\n  points: [0, 0],\n  stroke: style.color,\n  strokeWidth: strokeWidthForSize(style.strokeSize, imageMaxDimension(size)),\n});\n\nexport const createSegmentElement = (\n  type: IAnnotationSegmentElement['type'],\n  start: IAnnotationPoint,\n  end: IAnnotationPoint,\n  style: IAnnotationStyle,\n  size: IAnnotationSize,\n): IAnnotationSegmentElement => ({\n  ...baseElement(),\n  type,\n  start,\n  end,\n  stroke: style.color,\n  strokeWidth: strokeWidthForSize(style.strokeSize, imageMaxDimension(size)),\n});\n\nexport const createShapeElement = (\n  type: IAnnotationShapeElement['type'],\n  start: IAnnotationPoint,\n  end: IAnnotationPoint,\n  style: IAnnotationStyle,\n  size: IAnnotationSize,\n): IAnnotationShapeElement => ({\n  ...baseElement(),\n  type,\n  x: Math.min(start.x, end.x),\n  y: Math.min(start.y, end.y),\n  width: Math.abs(end.x - start.x),\n  height: Math.abs(end.y - start.y),\n  stroke: style.color,\n  strokeWidth: strokeWidthForSize(style.strokeSize, imageMaxDimension(size)),\n  fill: style.fill,\n  fillOpacity: style.fillOpacity,\n  cornerRadius: type === 'rectangle' ? Math.round(imageMaxDimension(size) * 0.008) : 0,\n});\n\nexport const createTextElement = (\n  origin: IAnnotationPoint,\n  style: IAnnotationStyle,\n  size: IAnnotationSize,\n  text = '',\n): IAnnotationTextElement => {\n  const fontSize = fontSizeForScale(style.fontSize, imageMaxDimension(size));\n\n  return {\n    ...baseElement(),\n    type: 'text',\n    x: origin.x,\n    y: origin.y,\n    width: Math.min(size.width * 0.6, Math.max(fontSize * 8, size.width * 0.3)),\n    text,\n    fontSize,\n    bold: style.bold,\n    italic: style.italic,\n    align: style.align,\n    color: style.color,\n    background: style.textBackground,\n    backgroundOpacity: 1,\n    padding: Math.round(fontSize * 0.35),\n    cornerRadius: Math.round(fontSize * 0.25),\n  };\n};\n\nexport const createImageElement = (\n  src: string,\n  natural: IAnnotationSize,\n  size: IAnnotationSize,\n): IAnnotationImageElement => {\n  const scale = Math.min((size.width * 0.4) / natural.width, (size.height * 0.4) / natural.height, 1);\n  const width = Math.max(24, Math.round(natural.width * scale));\n  const height = Math.max(24, Math.round(natural.height * scale));\n\n  return {\n    ...baseElement(),\n    type: 'image',\n    x: Math.round((size.width - width) / 2),\n    y: Math.round((size.height - height) / 2),\n    width,\n    height,\n    src,\n    naturalWidth: natural.width,\n    naturalHeight: natural.height,\n    cornerRadius: Math.round(imageMaxDimension(size) * 0.006),\n    stroke: null,\n    strokeWidth: Math.max(2, Math.round(imageMaxDimension(size) * 0.004)),\n    shadow: true,\n  };\n};\n\nexport const translateElement = (element: TAnnotationElement, deltaX: number, deltaY: number): TAnnotationElement => {\n  if (isSegmentElement(element)) {\n    return {\n      ...element,\n      start: { x: element.start.x + deltaX, y: element.start.y + deltaY },\n      end: { x: element.end.x + deltaX, y: element.end.y + deltaY },\n    };\n  }\n  return { ...element, x: element.x + deltaX, y: element.y + deltaY };\n};\n\nexport const duplicateElement = (element: TAnnotationElement, offset: number): TAnnotationElement => ({\n  ...translateElement(element, offset, offset),\n  id: generateUUID(),\n});\n\n/** The toolbar mirrors the selected element, so editing a value never means guessing which one wins. */\nexport const styleFromElement = (\n  element: TAnnotationElement,\n  current: IAnnotationStyle,\n  size: IAnnotationSize,\n): IAnnotationStyle => {\n  const maxDimension = imageMaxDimension(size);\n\n  if (element.type === 'text') {\n    return {\n      ...current,\n      color: element.color,\n      fontSize: closestFontSize(element.fontSize, maxDimension),\n      bold: element.bold,\n      italic: element.italic,\n      align: element.align,\n      textBackground: element.background,\n    };\n  }\n\n  if (element.type === 'image') return current;\n\n  return {\n    ...current,\n    color: element.stroke,\n    strokeSize: closestStrokeSize(element.strokeWidth, maxDimension),\n    ...(isFillableElement(element) ? { fill: element.fill, fillOpacity: element.fillOpacity } : {}),\n  };\n};\n\nexport const applyStyleToElement = (\n  element: TAnnotationElement,\n  style: IAnnotationStyle,\n  size: IAnnotationSize,\n): TAnnotationElement => {\n  const maxDimension = imageMaxDimension(size);\n\n  if (element.type === 'text') {\n    const fontSize = fontSizeForScale(style.fontSize, maxDimension);\n    return {\n      ...element,\n      color: style.color,\n      fontSize,\n      bold: style.bold,\n      italic: style.italic,\n      align: style.align,\n      background: style.textBackground,\n      padding: Math.round(fontSize * 0.35),\n      cornerRadius: Math.round(fontSize * 0.25),\n    };\n  }\n\n  if (element.type === 'image') return element;\n\n  return {\n    ...element,\n    stroke: style.color,\n    strokeWidth: strokeWidthForSize(style.strokeSize, maxDimension),\n    ...(isFillableElement(element) ? { fill: style.fill, fillOpacity: style.fillOpacity } : {}),\n  };\n};\n\nexport const reorderElements = (\n  elements: Array<TAnnotationElement>,\n  id: string,\n  direction: 'forward' | 'backward' | 'front' | 'back',\n): Array<TAnnotationElement> => {\n  const index = elements.findIndex((element) => element.id === id);\n  if (index < 0) return elements;\n\n  const target =\n    direction === 'front'\n      ? elements.length - 1\n      : direction === 'back'\n        ? 0\n        : Math.min(elements.length - 1, Math.max(0, index + (direction === 'forward' ? 1 : -1)));\n  if (target === index) return elements;\n\n  const next = [...elements];\n  const [moved] = next.splice(index, 1);\n  next.splice(target, 0, moved);\n  return next;\n};\n\nexport const createEmptyDocument = (size: IAnnotationSize): IAnnotationDocument => ({\n  version: ANNOTATION_DOCUMENT_VERSION,\n  width: size.width,\n  height: size.height,\n  elements: [],\n});\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+import { default as Konva } from 'konva';
+import { IAnnotationSize } from '../interfaces/annotationDocument';
+export declare const buildAnnotatedFileName: (imageName: string | undefined, extension: string) => string;
+interface IExportOptions {
+    stage: Konva.Stage;
+    imageSize: IAnnotationSize;
+    mimeType: string;
+    imageName?: string;
+}
+/**
+ * Marks stay vectorial until here, so the export renders at the source resolution instead of at
+ * the size the editor happened to be displayed at.
+ */
+export declare const exportStageToFile: ({ stage, imageSize, mimeType, imageName }: IExportOptions) => Promise<File>;
+export {};

package/dist/components/UI/ImageAnnotator/helpers/annotationExport.js

@@ -0,0 +1,23 @@
+const MAX_EXPORT_DIMENSION = 4096;
+const buildAnnotatedFileName = (imageName, extension) => {
+  const base = (imageName ?? "image").replace(/\.[^.]+$/, "") || "image";
+  return `${base}-annotated.${extension}`;
+};
+const exportStageToFile = async ({ stage, imageSize, mimeType, imageName }) => {
+  const usesJpeg = mimeType === "image/jpeg";
+  const stageWidth = stage.width();
+  if (!stageWidth) throw new Error("Annotation stage has no width");
+  const exportScale = Math.min(1, MAX_EXPORT_DIMENSION / Math.max(imageSize.width, imageSize.height));
+  const pixelRatio = imageSize.width * exportScale / stageWidth;
+  const canvas = stage.toCanvas({ x: 0, y: 0, width: stageWidth, height: stage.height(), pixelRatio });
+  const blob = await new Promise(
+    (resolve) => canvas.toBlob(resolve, usesJpeg ? "image/jpeg" : "image/png", 0.92)
+  );
+  if (!blob) throw new Error("Canvas export returned no image");
+  return new File([blob], buildAnnotatedFileName(imageName, usesJpeg ? "jpg" : "png"), { type: blob.type });
+};
+export {
+  buildAnnotatedFileName,
+  exportStageToFile
+};
+//# sourceMappingURL=annotationExport.js.map

package/dist/components/UI/ImageAnnotator/helpers/annotationExport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotationExport.js","sources":["../../../../../src/components/UI/ImageAnnotator/helpers/annotationExport.ts"],"sourcesContent":["import Konva from 'konva';\n\nimport { IAnnotationSize } from '../interfaces/annotationDocument';\n\n/** Guards against a 6000px source turning into a canvas the browser refuses to allocate. */\nconst MAX_EXPORT_DIMENSION = 4096;\n\nexport const buildAnnotatedFileName = (imageName: string | undefined, extension: string): string => {\n  const base = (imageName ?? 'image').replace(/\\.[^.]+$/, '') || 'image';\n  return `${base}-annotated.${extension}`;\n};\n\ninterface IExportOptions {\n  stage: Konva.Stage;\n  imageSize: IAnnotationSize;\n  mimeType: string;\n  imageName?: string;\n}\n\n/**\n * Marks stay vectorial until here, so the export renders at the source resolution instead of at\n * the size the editor happened to be displayed at.\n */\nexport const exportStageToFile = async ({ stage, imageSize, mimeType, imageName }: IExportOptions): Promise<File> => {\n  const usesJpeg = mimeType === 'image/jpeg';\n  const stageWidth = stage.width();\n  if (!stageWidth) throw new Error('Annotation stage has no width');\n\n  const exportScale = Math.min(1, MAX_EXPORT_DIMENSION / Math.max(imageSize.width, imageSize.height));\n  const pixelRatio = (imageSize.width * exportScale) / stageWidth;\n\n  const canvas = stage.toCanvas({ x: 0, y: 0, width: stageWidth, height: stage.height(), pixelRatio });\n  const blob = await new Promise<Blob | null>((resolve) =>\n    canvas.toBlob(resolve, usesJpeg ? 'image/jpeg' : 'image/png', 0.92),\n  );\n  if (!blob) throw new Error('Canvas export returned no image');\n\n  return new File([blob], buildAnnotatedFileName(imageName, usesJpeg ? 'jpg' : 'png'), { type: blob.type });\n};\n"],"names":[],"mappings":"AAKA,MAAM,uBAAuB;AAEtB,MAAM,yBAAyB,CAAC,WAA+B,cAA8B;AAClG,QAAM,QAAQ,aAAa,SAAS,QAAQ,YAAY,EAAE,KAAK;AAC/D,SAAO,GAAG,IAAI,cAAc,SAAS;AACvC;AAaO,MAAM,oBAAoB,OAAO,EAAE,OAAO,WAAW,UAAU,gBAA+C;AACnH,QAAM,WAAW,aAAa;AAC9B,QAAM,aAAa,MAAM,MAAA;AACzB,MAAI,CAAC,WAAY,OAAM,IAAI,MAAM,+BAA+B;AAEhE,QAAM,cAAc,KAAK,IAAI,GAAG,uBAAuB,KAAK,IAAI,UAAU,OAAO,UAAU,MAAM,CAAC;AAClG,QAAM,aAAc,UAAU,QAAQ,cAAe;AAErD,QAAM,SAAS,MAAM,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,YAAY,QAAQ,MAAM,OAAA,GAAU,YAAY;AACnG,QAAM,OAAO,MAAM,IAAI;AAAA,IAAqB,CAAC,YAC3C,OAAO,OAAO,SAAS,WAAW,eAAe,aAAa,IAAI;AAAA,EAAA;AAEpE,MAAI,CAAC,KAAM,OAAM,IAAI,MAAM,iCAAiC;AAE5D,SAAO,IAAI,KAAK,CAAC,IAAI,GAAG,uBAAuB,WAAW,WAAW,QAAQ,KAAK,GAAG,EAAE,MAAM,KAAK,MAAM;AAC1G;"}

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

@@ -0,0 +1,8 @@
+/**
+ * react-konva resolves every node type by name on the full Konva build, which it only pulls in
+ * through a bare side-effect import. konva ships as CommonJS, so Rollup drops that import from the
+ * production bundle and ships Konva Core alone: Image and Transformer are never registered,
+ * react-konva silently falls back to Group, and `transformer.nodes()` stops existing. Referencing
+ * the registry from app code keeps the full build inside the chunk.
+ */
+export declare const ensureKonvaFullBuild: () => void;

package/dist/components/UI/ImageAnnotator/helpers/konvaFullBuild.js

@@ -0,0 +1,10 @@
+import Konva from "konva";
+import { uiLogger } from "../../../../helpers/uiLogger.js";
+const ensureKonvaFullBuild = () => {
+  if (typeof Konva.Transformer === "function" && typeof Konva.Image === "function") return;
+  uiLogger.error("Konva full build is missing: annotation shapes cannot be registered");
+};
+export {
+  ensureKonvaFullBuild
+};
+//# sourceMappingURL=konvaFullBuild.js.map

package/dist/components/UI/ImageAnnotator/helpers/konvaFullBuild.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"konvaFullBuild.js","sources":["../../../../../src/components/UI/ImageAnnotator/helpers/konvaFullBuild.ts"],"sourcesContent":["import Konva from 'konva';\n\nimport { uiLogger } from '@/helpers/uiLogger';\n\n/**\n * react-konva resolves every node type by name on the full Konva build, which it only pulls in\n * through a bare side-effect import. konva ships as CommonJS, so Rollup drops that import from the\n * production bundle and ships Konva Core alone: Image and Transformer are never registered,\n * react-konva silently falls back to Group, and `transformer.nodes()` stops existing. Referencing\n * the registry from app code keeps the full build inside the chunk.\n */\nexport const ensureKonvaFullBuild = (): void => {\n  if (typeof Konva.Transformer === 'function' && typeof Konva.Image === 'function') return;\n  uiLogger.error('Konva full build is missing: annotation shapes cannot be registered');\n};\n"],"names":[],"mappings":";;AAWO,MAAM,uBAAuB,MAAY;AAC9C,MAAI,OAAO,MAAM,gBAAgB,cAAc,OAAO,MAAM,UAAU,WAAY;AAClF,WAAS,MAAM,qEAAqE;AACtF;"}

package/dist/components/UI/ImageAnnotator/hooks/useAnnotationBaseImage.d.ts

@@ -0,0 +1,9 @@
+import { IAnnotationSize } from '../interfaces/annotationDocument';
+export interface IAnnotationBaseImage {
+    image: HTMLImageElement | null;
+    size: IAnnotationSize | null;
+    mimeType: string;
+    loading: boolean;
+    failed: boolean;
+}
+export declare const useAnnotationBaseImage: (active: boolean, imageUrl: string) => IAnnotationBaseImage;

package/dist/components/UI/ImageAnnotator/hooks/useAnnotationBaseImage.js

@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import { uiLogger } from "../../../../helpers/uiLogger.js";
+const loadImageElement = (objectUrl) => new Promise((resolve, reject) => {
+  const element = new Image();
+  element.onload = () => resolve(element);
+  element.onerror = () => reject(new Error("Image decode failed"));
+  element.src = objectUrl;
+});
+const useAnnotationBaseImage = (active, imageUrl) => {
+  const [state, setState] = useState({
+    image: null,
+    size: null,
+    mimeType: "image/png",
+    loading: false,
+    failed: false
+  });
+  useEffect(() => {
+    if (!active) return;
+    let cancelled = false;
+    let objectUrl = null;
+    const abortController = new AbortController();
+    const load = async () => {
+      setState({ image: null, size: null, mimeType: "image/png", loading: true, failed: false });
+      try {
+        const response = await fetch(imageUrl, { signal: abortController.signal, mode: "cors", cache: "reload" });
+        if (!response.ok) throw new Error(`Image request failed with ${response.status}`);
+        const blob = await response.blob();
+        objectUrl = URL.createObjectURL(blob);
+        const image = await loadImageElement(objectUrl);
+        if (cancelled) return;
+        setState({
+          image,
+          size: { width: image.naturalWidth, height: image.naturalHeight },
+          mimeType: blob.type || "image/png",
+          loading: false,
+          failed: false
+        });
+      } catch (error) {
+        if (cancelled) return;
+        uiLogger.error("Failed to load image for annotation", error);
+        setState({ image: null, size: null, mimeType: "image/png", loading: false, failed: true });
+      }
+    };
+    load();
+    return () => {
+      cancelled = true;
+      abortController.abort();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [active, imageUrl]);
+  return state;
+};
+export {
+  useAnnotationBaseImage
+};
+//# sourceMappingURL=useAnnotationBaseImage.js.map

package/dist/components/UI/ImageAnnotator/hooks/useAnnotationBaseImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnnotationBaseImage.js","sources":["../../../../../src/components/UI/ImageAnnotator/hooks/useAnnotationBaseImage.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { uiLogger } from '@/helpers/uiLogger';\n\nimport { IAnnotationSize } from '../interfaces/annotationDocument';\n\nexport interface IAnnotationBaseImage {\n  image: HTMLImageElement | null;\n  size: IAnnotationSize | null;\n  mimeType: string;\n  loading: boolean;\n  failed: boolean;\n}\n\nconst loadImageElement = (objectUrl: string): Promise<HTMLImageElement> =>\n  new Promise((resolve, reject) => {\n    const element = new Image();\n    element.onload = () => resolve(element);\n    element.onerror = () => reject(new Error('Image decode failed'));\n    element.src = objectUrl;\n  });\n\nexport const useAnnotationBaseImage = (active: boolean, imageUrl: string): IAnnotationBaseImage => {\n  const [state, setState] = useState<IAnnotationBaseImage>({\n    image: null,\n    size: null,\n    mimeType: 'image/png',\n    loading: false,\n    failed: false,\n  });\n\n  useEffect(() => {\n    if (!active) return;\n\n    let cancelled = false;\n    let objectUrl: string | null = null;\n    const abortController = new AbortController();\n\n    const load = async () => {\n      setState({ image: null, size: null, mimeType: 'image/png', loading: true, failed: false });\n\n      try {\n        // `cache: 'reload'` is required: the same URL is usually already in the HTTP cache from a\n        // plain <img> render, whose response carries no CORS headers and no Vary, so reusing it\n        // fails the CORS check even when the bucket is configured correctly.\n        const response = await fetch(imageUrl, { signal: abortController.signal, mode: 'cors', cache: 'reload' });\n        if (!response.ok) throw new Error(`Image request failed with ${response.status}`);\n\n        const blob = await response.blob();\n        objectUrl = URL.createObjectURL(blob);\n        const image = await loadImageElement(objectUrl);\n        if (cancelled) return;\n\n        setState({\n          image,\n          size: { width: image.naturalWidth, height: image.naturalHeight },\n          mimeType: blob.type || 'image/png',\n          loading: false,\n          failed: false,\n        });\n      } catch (error) {\n        if (cancelled) return;\n        uiLogger.error('Failed to load image for annotation', error);\n        setState({ image: null, size: null, mimeType: 'image/png', loading: false, failed: true });\n      }\n    };\n    load();\n\n    return () => {\n      cancelled = true;\n      abortController.abort();\n      if (objectUrl) URL.revokeObjectURL(objectUrl);\n    };\n  }, [active, imageUrl]);\n\n  return state;\n};\n"],"names":[],"mappings":";;AAcA,MAAM,mBAAmB,CAAC,cACxB,IAAI,QAAQ,CAAC,SAAS,WAAW;AAC/B,QAAM,UAAU,IAAI,MAAA;AACpB,UAAQ,SAAS,MAAM,QAAQ,OAAO;AACtC,UAAQ,UAAU,MAAM,OAAO,IAAI,MAAM,qBAAqB,CAAC;AAC/D,UAAQ,MAAM;AAChB,CAAC;AAEI,MAAM,yBAAyB,CAAC,QAAiB,aAA2C;AACjG,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA+B;AAAA,IACvD,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA,CACT;AAED,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,QAAI,YAAY;AAChB,QAAI,YAA2B;AAC/B,UAAM,kBAAkB,IAAI,gBAAA;AAE5B,UAAM,OAAO,YAAY;AACvB,eAAS,EAAE,OAAO,MAAM,MAAM,MAAM,UAAU,aAAa,SAAS,MAAM,QAAQ,MAAA,CAAO;AAEzF,UAAI;AAIF,cAAM,WAAW,MAAM,MAAM,UAAU,EAAE,QAAQ,gBAAgB,QAAQ,MAAM,QAAQ,OAAO,SAAA,CAAU;AACxG,YAAI,CAAC,SAAS,GAAI,OAAM,IAAI,MAAM,6BAA6B,SAAS,MAAM,EAAE;AAEhF,cAAM,OAAO,MAAM,SAAS,KAAA;AAC5B,oBAAY,IAAI,gBAAgB,IAAI;AACpC,cAAM,QAAQ,MAAM,iBAAiB,SAAS;AAC9C,YAAI,UAAW;AAEf,iBAAS;AAAA,UACP;AAAA,UACA,MAAM,EAAE,OAAO,MAAM,cAAc,QAAQ,MAAM,cAAA;AAAA,UACjD,UAAU,KAAK,QAAQ;AAAA,UACvB,SAAS;AAAA,UACT,QAAQ;AAAA,QAAA,CACT;AAAA,MACH,SAAS,OAAO;AACd,YAAI,UAAW;AACf,iBAAS,MAAM,uCAAuC,KAAK;AAC3D,iBAAS,EAAE,OAAO,MAAM,MAAM,MAAM,UAAU,aAAa,SAAS,OAAO,QAAQ,KAAA,CAAM;AAAA,MAC3F;AAAA,IACF;AACA,SAAA;AAEA,WAAO,MAAM;AACX,kBAAY;AACZ,sBAAgB,MAAA;AAChB,UAAI,UAAW,KAAI,gBAAgB,SAAS;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,SAAO;AACT;"}

package/dist/components/UI/ImageAnnotator/hooks/useAnnotationDocument.d.ts

@@ -0,0 +1,27 @@
+import { IAnnotationDocument, IAnnotationSize, TAnnotationElement } from '../interfaces/annotationDocument';
+type TElementList = Array<TAnnotationElement>;
+export interface IAnnotationDocumentController {
+    elements: TElementList;
+    document: IAnnotationDocument;
+    selectedId: string | null;
+    selectedElement: TAnnotationElement | null;
+    canUndo: boolean;
+    canRedo: boolean;
+    isEmpty: boolean;
+    select: (id: string | null) => void;
+    addElement: (element: TAnnotationElement, options?: {
+        select?: boolean;
+    }) => void;
+    updateElement: (id: string, updater: (element: TAnnotationElement) => TAnnotationElement) => void;
+    updateSelected: (updater: (element: TAnnotationElement) => TAnnotationElement) => void;
+    removeElement: (id: string) => void;
+    removeElements: (ids: Array<string>) => void;
+    duplicateSelected: () => void;
+    nudgeSelected: (deltaX: number, deltaY: number) => void;
+    reorderSelected: (direction: 'forward' | 'backward' | 'front' | 'back') => void;
+    undo: () => void;
+    redo: () => void;
+    clear: () => void;
+}
+export declare const useAnnotationDocument: (size: IAnnotationSize, initialElements?: TElementList) => IAnnotationDocumentController;
+export {};

package/dist/components/UI/ImageAnnotator/hooks/useAnnotationDocument.js

@@ -0,0 +1,149 @@
+import { useReducer, useState, useCallback, useMemo } from "react";
+import { duplicateElement, translateElement, reorderElements } from "../helpers/annotationElements.js";
+import { ANNOTATION_DOCUMENT_VERSION } from "../interfaces/annotationDocument.js";
+const HISTORY_LIMIT = 50;
+const historyReducer = (state, action) => {
+  switch (action.type) {
+    case "commit":
+      if (action.elements === state.present) return state;
+      return {
+        past: [...state.past, state.present].slice(-HISTORY_LIMIT),
+        present: action.elements,
+        future: []
+      };
+    case "undo": {
+      const previous = state.past[state.past.length - 1];
+      if (!previous) return state;
+      return {
+        past: state.past.slice(0, -1),
+        present: previous,
+        future: [state.present, ...state.future].slice(0, HISTORY_LIMIT)
+      };
+    }
+    case "redo": {
+      const [next, ...rest] = state.future;
+      if (!next) return state;
+      return {
+        past: [...state.past, state.present].slice(-HISTORY_LIMIT),
+        present: next,
+        future: rest
+      };
+    }
+    case "reset":
+      return { past: [], present: action.elements, future: [] };
+    default:
+      return state;
+  }
+};
+const useAnnotationDocument = (size, initialElements = []) => {
+  const [history, dispatch] = useReducer(historyReducer, {
+    past: [],
+    present: initialElements,
+    future: []
+  });
+  const [selectedId, setSelectedId] = useState(null);
+  const elements = history.present;
+  const commit = useCallback((next) => dispatch({ type: "commit", elements: next }), []);
+  const addElement = useCallback(
+    (element, options) => {
+      dispatch({ type: "commit", elements: [...elements, element] });
+      if (options?.select !== false) setSelectedId(element.id);
+    },
+    [elements]
+  );
+  const updateElement = useCallback(
+    (id, updater) => {
+      const index = elements.findIndex((element) => element.id === id);
+      if (index < 0) return;
+      const next = [...elements];
+      next[index] = updater(next[index]);
+      commit(next);
+    },
+    [elements, commit]
+  );
+  const removeElements = useCallback(
+    (ids) => {
+      if (!ids.length) return;
+      const removed = new Set(ids);
+      const next = elements.filter((element) => !removed.has(element.id));
+      if (next.length === elements.length) return;
+      commit(next);
+      setSelectedId((current) => current && removed.has(current) ? null : current);
+    },
+    [elements, commit]
+  );
+  const selectedElement = useMemo(
+    () => elements.find((element) => element.id === selectedId) ?? null,
+    [elements, selectedId]
+  );
+  const undo = useCallback(() => {
+    dispatch({ type: "undo" });
+    setSelectedId(null);
+  }, []);
+  const redo = useCallback(() => {
+    dispatch({ type: "redo" });
+    setSelectedId(null);
+  }, []);
+  const clear = useCallback(() => {
+    if (!elements.length) return;
+    commit([]);
+    setSelectedId(null);
+  }, [elements.length, commit]);
+  const duplicateSelected = useCallback(() => {
+    if (!selectedElement) return;
+    const offset = Math.max(8, Math.round(Math.max(size.width, size.height) * 0.02));
+    const copy = duplicateElement(selectedElement, offset);
+    commit([...elements, copy]);
+    setSelectedId(copy.id);
+  }, [selectedElement, elements, commit, size.width, size.height]);
+  const nudgeSelected = useCallback(
+    (deltaX, deltaY) => {
+      if (!selectedElement) return;
+      updateElement(selectedElement.id, (element) => translateElement(element, deltaX, deltaY));
+    },
+    [selectedElement, updateElement]
+  );
+  const reorderSelected = useCallback(
+    (direction) => {
+      if (!selectedId) return;
+      commit(reorderElements(elements, selectedId, direction));
+    },
+    [selectedId, elements, commit]
+  );
+  const updateSelected = useCallback(
+    (updater) => {
+      if (!selectedId) return;
+      updateElement(selectedId, updater);
+    },
+    [selectedId, updateElement]
+  );
+  const document = useMemo(
+    () => ({ version: ANNOTATION_DOCUMENT_VERSION, width: size.width, height: size.height, elements }),
+    [size.width, size.height, elements]
+  );
+  return {
+    elements,
+    document,
+    selectedId,
+    selectedElement,
+    canUndo: history.past.length > 0,
+    canRedo: history.future.length > 0,
+    isEmpty: elements.length === 0,
+    select: setSelectedId,
+    addElement,
+    updateElement,
+    updateSelected,
+    removeElement: useCallback((id) => removeElements([id]), [removeElements]),
+    removeElements,
+    duplicateSelected,
+    nudgeSelected,
+    reorderSelected,
+    undo,
+    redo,
+    clear
+  };
+};
+export {
+  useAnnotationDocument
+};
+//# sourceMappingURL=useAnnotationDocument.js.map

package/dist/components/UI/ImageAnnotator/hooks/useAnnotationDocument.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnnotationDocument.js","sources":["../../../../../src/components/UI/ImageAnnotator/hooks/useAnnotationDocument.ts"],"sourcesContent":["import { useCallback, useMemo, useReducer, useState } from 'react';\n\nimport { duplicateElement, reorderElements, translateElement } from '../helpers/annotationElements';\nimport {\n  ANNOTATION_DOCUMENT_VERSION,\n  IAnnotationDocument,\n  IAnnotationSize,\n  TAnnotationElement,\n} from '../interfaces/annotationDocument';\n\nconst HISTORY_LIMIT = 50;\n\ntype TElementList = Array<TAnnotationElement>;\n\ninterface IHistoryState {\n  past: Array<TElementList>;\n  present: TElementList;\n  future: Array<TElementList>;\n}\n\ntype THistoryAction =\n  | { type: 'commit'; elements: TElementList }\n  | { type: 'undo' }\n  | { type: 'redo' }\n  | { type: 'reset'; elements: TElementList };\n\n/**\n * Snapshots instead of inverse commands: an annotation document holds tens of elements, and a\n * snapshot stack is the only shape where undo and redo cannot drift apart.\n */\nconst historyReducer = (state: IHistoryState, action: THistoryAction): IHistoryState => {\n  switch (action.type) {\n    case 'commit':\n      if (action.elements === state.present) return state;\n      return {\n        past: [...state.past, state.present].slice(-HISTORY_LIMIT),\n        present: action.elements,\n        future: [],\n      };\n    case 'undo': {\n      const previous = state.past[state.past.length - 1];\n      if (!previous) return state;\n      return {\n        past: state.past.slice(0, -1),\n        present: previous,\n        future: [state.present, ...state.future].slice(0, HISTORY_LIMIT),\n      };\n    }\n    case 'redo': {\n      const [next, ...rest] = state.future;\n      if (!next) return state;\n      return {\n        past: [...state.past, state.present].slice(-HISTORY_LIMIT),\n        present: next,\n        future: rest,\n      };\n    }\n    case 'reset':\n      return { past: [], present: action.elements, future: [] };\n    default:\n      return state;\n  }\n};\n\nexport interface IAnnotationDocumentController {\n  elements: TElementList;\n  document: IAnnotationDocument;\n  selectedId: string | null;\n  selectedElement: TAnnotationElement | null;\n  canUndo: boolean;\n  canRedo: boolean;\n  isEmpty: boolean;\n  select: (id: string | null) => void;\n  addElement: (element: TAnnotationElement, options?: { select?: boolean }) => void;\n  updateElement: (id: string, updater: (element: TAnnotationElement) => TAnnotationElement) => void;\n  updateSelected: (updater: (element: TAnnotationElement) => TAnnotationElement) => void;\n  removeElement: (id: string) => void;\n  removeElements: (ids: Array<string>) => void;\n  duplicateSelected: () => void;\n  nudgeSelected: (deltaX: number, deltaY: number) => void;\n  reorderSelected: (direction: 'forward' | 'backward' | 'front' | 'back') => void;\n  undo: () => void;\n  redo: () => void;\n  clear: () => void;\n}\n\nexport const useAnnotationDocument = (\n  size: IAnnotationSize,\n  initialElements: TElementList = [],\n): IAnnotationDocumentController => {\n  const [history, dispatch] = useReducer(historyReducer, {\n    past: [],\n    present: initialElements,\n    future: [],\n  });\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n\n  const elements = history.present;\n\n  const commit = useCallback((next: TElementList) => dispatch({ type: 'commit', elements: next }), []);\n\n  const addElement = useCallback(\n    (element: TAnnotationElement, options?: { select?: boolean }) => {\n      dispatch({ type: 'commit', elements: [...elements, element] });\n      if (options?.select !== false) setSelectedId(element.id);\n    },\n    [elements],\n  );\n\n  const updateElement = useCallback(\n    (id: string, updater: (element: TAnnotationElement) => TAnnotationElement) => {\n      const index = elements.findIndex((element) => element.id === id);\n      if (index < 0) return;\n\n      const next = [...elements];\n      next[index] = updater(next[index]);\n      commit(next);\n    },\n    [elements, commit],\n  );\n\n  const removeElements = useCallback(\n    (ids: Array<string>) => {\n      if (!ids.length) return;\n      const removed = new Set(ids);\n      const next = elements.filter((element) => !removed.has(element.id));\n      if (next.length === elements.length) return;\n\n      commit(next);\n      setSelectedId((current) => (current && removed.has(current) ? null : current));\n    },\n    [elements, commit],\n  );\n\n  const selectedElement = useMemo(\n    () => elements.find((element) => element.id === selectedId) ?? null,\n    [elements, selectedId],\n  );\n\n  const undo = useCallback(() => {\n    dispatch({ type: 'undo' });\n    setSelectedId(null);\n  }, []);\n\n  const redo = useCallback(() => {\n    dispatch({ type: 'redo' });\n    setSelectedId(null);\n  }, []);\n\n  const clear = useCallback(() => {\n    if (!elements.length) return;\n    commit([]);\n    setSelectedId(null);\n  }, [elements.length, commit]);\n\n  const duplicateSelected = useCallback(() => {\n    if (!selectedElement) return;\n    const offset = Math.max(8, Math.round(Math.max(size.width, size.height) * 0.02));\n    const copy = duplicateElement(selectedElement, offset);\n    commit([...elements, copy]);\n    setSelectedId(copy.id);\n  }, [selectedElement, elements, commit, size.width, size.height]);\n\n  const nudgeSelected = useCallback(\n    (deltaX: number, deltaY: number) => {\n      if (!selectedElement) return;\n      updateElement(selectedElement.id, (element) => translateElement(element, deltaX, deltaY));\n    },\n    [selectedElement, updateElement],\n  );\n\n  const reorderSelected = useCallback(\n    (direction: 'forward' | 'backward' | 'front' | 'back') => {\n      if (!selectedId) return;\n      commit(reorderElements(elements, selectedId, direction));\n    },\n    [selectedId, elements, commit],\n  );\n\n  const updateSelected = useCallback(\n    (updater: (element: TAnnotationElement) => TAnnotationElement) => {\n      if (!selectedId) return;\n      updateElement(selectedId, updater);\n    },\n    [selectedId, updateElement],\n  );\n\n  const document = useMemo<IAnnotationDocument>(\n    () => ({ version: ANNOTATION_DOCUMENT_VERSION, width: size.width, height: size.height, elements }),\n    [size.width, size.height, elements],\n  );\n\n  return {\n    elements,\n    document,\n    selectedId,\n    selectedElement,\n    canUndo: history.past.length > 0,\n    canRedo: history.future.length > 0,\n    isEmpty: elements.length === 0,\n    select: setSelectedId,\n    addElement,\n    updateElement,\n    updateSelected,\n    removeElement: useCallback((id: string) => removeElements([id]), [removeElements]),\n    removeElements,\n    duplicateSelected,\n    nudgeSelected,\n    reorderSelected,\n    undo,\n    redo,\n    clear,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UI/ImageAnnotator/hooks/useAnnotationShortcuts.d.ts

@@ -0,0 +1,14 @@
+import { TAnnotationTool } from '../interfaces/annotationDocument';
+import { IAnnotationDocumentController } from './useAnnotationDocument';
+interface IAnnotationShortcutsOptions {
+    active: boolean;
+    controller: IAnnotationDocumentController;
+    imageMaxDimension: number;
+    onToolChange: (tool: TAnnotationTool) => void;
+}
+/**
+ * Capture phase on purpose: Escape must clear the selection without also reaching the dialog's
+ * own dismiss handler, which would close the editor on the first press.
+ */
+export declare const useAnnotationShortcuts: ({ active, controller, imageMaxDimension, onToolChange, }: IAnnotationShortcutsOptions) => void;
+export {};