@umodeapporg/ui 0.0.0-canary.ca10e69

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

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import AnnotationToolButton from "./AnnotationToolButton.js";
+const TOOL_OPTIONS = [
+  { tool: "select", icon: "arrow_selector_tool", labelKey: "imageAnnotator.tools.select" },
+  { tool: "freehand", icon: "draw", labelKey: "imageAnnotator.tools.pen" },
+  { tool: "eraser", icon: "ink_eraser", labelKey: "imageAnnotator.tools.eraser" },
+  { tool: "arrow", icon: "north_east", labelKey: "imageAnnotator.tools.arrow" },
+  { tool: "line", icon: "horizontal_rule", labelKey: "imageAnnotator.tools.line" },
+  { tool: "rectangle", icon: "rectangle", labelKey: "imageAnnotator.tools.rectangle" },
+  { tool: "ellipse", icon: "circle", labelKey: "imageAnnotator.tools.ellipse" },
+  { tool: "text", icon: "title", labelKey: "imageAnnotator.tools.text" }
+];
+const ACCEPTED_IMAGE_TYPES = "image/png,image/jpeg,image/webp,image/gif";
+const AnnotationToolbar = ({
+  tool,
+  touch,
+  actions,
+  onToolChange,
+  onInsertImage
+}) => {
+  const { t } = useTranslation("ui");
+  const fileInputRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: classNames("flex shrink-0 items-center gap-x-2", !touch && "flex-wrap gap-y-2"), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(
+          "flex items-center gap-x-0.5 rounded-xl bg-muted-hover p-1",
+          touch && "min-w-0 flex-1 overflow-x-auto"
+        ),
+        children: [
+          TOOL_OPTIONS.map(({ tool: option, icon, labelKey }) => /* @__PURE__ */ jsx(
+            AnnotationToolButton,
+            {
+              icon,
+              label: t(labelKey),
+              active: tool === option,
+              touch,
+              showLabel: touch,
+              onClick: () => onToolChange(option)
+            },
+            option
+          )),
+          /* @__PURE__ */ jsx(
+            AnnotationToolButton,
+            {
+              icon: "add_photo_alternate",
+              label: t("imageAnnotator.tools.image"),
+              touch,
+              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")
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: ACCEPTED_IMAGE_TYPES,
+        className: "hidden",
+        onChange: (event) => {
+          const file = event.target.files?.[0];
+          event.target.value = "";
+          if (file) onInsertImage(file);
+        }
+      }
+    ),
+    actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
+  ] });
+};
+export {
+  AnnotationToolbar as default
+};
+//# sourceMappingURL=AnnotationToolbar.js.map

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

@@ -0,0 +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\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/annotationCanvas.d.ts

@@ -0,0 +1,21 @@
+import { IAnnotationPoint, IAnnotationSize } from '../interfaces/annotationDocument';
+/** Selection chrome is drawn inside a scaled stage, so every screen-pixel size divides by the scale. */
+export declare const SELECTION_ANCHOR_PX = 10;
+export declare const SELECTION_BORDER_PX = 1.5;
+export declare const SEGMENT_HANDLE_PX = 7;
+export declare const MIN_HIT_STROKE_PX = 18;
+export declare const hexToRgba: (color: string, alpha: number) => string;
+export interface IStageFit {
+    width: number;
+    height: number;
+    scale: number;
+}
+/** The stage always shows the whole image: element coordinates stay in native image pixels. */
+export declare const fitStageToViewport: (image: IAnnotationSize, viewport: IAnnotationSize) => IStageFit;
+export declare const clampPointToImage: (point: IAnnotationPoint, size: IAnnotationSize) => IAnnotationPoint;
+/**
+ * Freehand sampling: a pointer emits far more points than a stroke needs, and every extra point is
+ * paid again on every redraw and on export.
+ */
+export declare const shouldAppendFreehandPoint: (points: Array<number>, next: IAnnotationPoint, minDistance: number) => boolean;
+export declare const isDegenerateDrag: (start: IAnnotationPoint, end: IAnnotationPoint, threshold: number) => boolean;

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

@@ -0,0 +1,45 @@
+const SELECTION_ANCHOR_PX = 10;
+const SELECTION_BORDER_PX = 1.5;
+const SEGMENT_HANDLE_PX = 7;
+const MIN_HIT_STROKE_PX = 18;
+const hexToRgba = (color, alpha) => {
+  const hex = color.replace("#", "");
+  if (hex.length !== 6) return color;
+  const red = parseInt(hex.slice(0, 2), 16);
+  const green = parseInt(hex.slice(2, 4), 16);
+  const blue = parseInt(hex.slice(4, 6), 16);
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+};
+const fitStageToViewport = (image, viewport) => {
+  const safeWidth = Math.max(1, viewport.width);
+  const safeHeight = Math.max(1, viewport.height);
+  const scale = Math.min(safeWidth / image.width, safeHeight / image.height, 1);
+  return {
+    width: Math.max(1, Math.round(image.width * scale)),
+    height: Math.max(1, Math.round(image.height * scale)),
+    scale: scale || 1
+  };
+};
+const clampPointToImage = (point, size) => ({
+  x: Math.min(Math.max(point.x, 0), size.width),
+  y: Math.min(Math.max(point.y, 0), size.height)
+});
+const shouldAppendFreehandPoint = (points, next, minDistance) => {
+  const lastX = points[points.length - 2];
+  const lastY = points[points.length - 1];
+  if (lastX === void 0 || lastY === void 0) return true;
+  return Math.hypot(next.x - lastX, next.y - lastY) >= minDistance;
+};
+const isDegenerateDrag = (start, end, threshold) => Math.abs(end.x - start.x) < threshold && Math.abs(end.y - start.y) < threshold;
+export {
+  MIN_HIT_STROKE_PX,
+  SEGMENT_HANDLE_PX,
+  SELECTION_ANCHOR_PX,
+  SELECTION_BORDER_PX,
+  clampPointToImage,
+  fitStageToViewport,
+  hexToRgba,
+  isDegenerateDrag,
+  shouldAppendFreehandPoint
+};
+//# sourceMappingURL=annotationCanvas.js.map

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/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;

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

@@ -0,0 +1,64 @@
+const ANNOTATION_CROP_ASPECTS = [
+  "free",
+  "original",
+  "square",
+  "portrait",
+  "classic",
+  "wide"
+];
+const FIXED_ASPECT_RATIOS = {
+  square: 1,
+  portrait: 4 / 5,
+  classic: 3 / 4,
+  wide: 16 / 9
+};
+const MIN_CROP_FRACTION = 0.05;
+const fullImageCrop = (size) => ({
+  x: 0,
+  y: 0,
+  width: size.width,
+  height: size.height
+});
+const minCropDimension = (size) => Math.max(16, Math.round(Math.min(size.width, size.height) * MIN_CROP_FRACTION));
+const aspectRatioFor = (aspect, size) => {
+  if (aspect === "free") return null;
+  if (aspect === "original") return size.width / size.height;
+  return FIXED_ASPECT_RATIOS[aspect];
+};
+const clampCropToImage = (crop, size) => {
+  const minimum = minCropDimension(size);
+  const width = Math.min(Math.max(crop.width, minimum), size.width);
+  const height = Math.min(Math.max(crop.height, minimum), size.height);
+  return {
+    x: Math.round(Math.min(Math.max(crop.x, 0), size.width - width)),
+    y: Math.round(Math.min(Math.max(crop.y, 0), size.height - height)),
+    width: Math.round(width),
+    height: Math.round(height)
+  };
+};
+const fitCropToAspect = (crop, ratio, size) => {
+  const width = Math.min(size.width, size.height * ratio);
+  const height = width / ratio;
+  const centerX = crop.x + crop.width / 2;
+  const centerY = crop.y + crop.height / 2;
+  return clampCropToImage({ x: centerX - width / 2, y: centerY - height / 2, width, height }, size);
+};
+const isFullImageCrop = (crop, size) => !crop || crop.x <= 0 && crop.y <= 0 && crop.width >= size.width && crop.height >= size.height;
+const sanitizeInitialCrop = (crop, size) => {
+  if (!crop) return null;
+  const values = [crop.x, crop.y, crop.width, crop.height];
+  if (values.some((value) => typeof value !== "number" || !Number.isFinite(value))) return null;
+  const clamped = clampCropToImage(crop, size);
+  return isFullImageCrop(clamped, size) ? null : clamped;
+};
+export {
+  ANNOTATION_CROP_ASPECTS,
+  aspectRatioFor,
+  clampCropToImage,
+  fitCropToAspect,
+  fullImageCrop,
+  isFullImageCrop,
+  minCropDimension,
+  sanitizeInitialCrop
+};
+//# sourceMappingURL=annotationCrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"annotationCrop.js","sources":["../../../../../src/components/UI/ImageAnnotator/helpers/annotationCrop.ts"],"sourcesContent":["import { IAnnotationCropRect, IAnnotationSize } from '../interfaces/annotationDocument';\n\nexport type TAnnotationCropAspect = 'free' | 'original' | 'square' | 'portrait' | 'classic' | 'wide';\n\nexport const ANNOTATION_CROP_ASPECTS: Array<TAnnotationCropAspect> = [\n  'free',\n  'original',\n  'square',\n  'portrait',\n  'classic',\n  'wide',\n];\n\nconst FIXED_ASPECT_RATIOS: Record<Exclude<TAnnotationCropAspect, 'free' | 'original'>, number> = {\n  square: 1,\n  portrait: 4 / 5,\n  classic: 3 / 4,\n  wide: 16 / 9,\n};\n\n/** Below this the crop handles overlap and the result is a smudge nobody meant to keep. */\nconst MIN_CROP_FRACTION = 0.05;\n\nexport const fullImageCrop = (size: IAnnotationSize): IAnnotationCropRect => ({\n  x: 0,\n  y: 0,\n  width: size.width,\n  height: size.height,\n});\n\nexport const minCropDimension = (size: IAnnotationSize): number =>\n  Math.max(16, Math.round(Math.min(size.width, size.height) * MIN_CROP_FRACTION));\n\nexport const aspectRatioFor = (aspect: TAnnotationCropAspect, size: IAnnotationSize): number | null => {\n  if (aspect === 'free') return null;\n  if (aspect === 'original') return size.width / size.height;\n  return FIXED_ASPECT_RATIOS[aspect];\n};\n\nexport const clampCropToImage = (crop: IAnnotationCropRect, size: IAnnotationSize): IAnnotationCropRect => {\n  const minimum = minCropDimension(size);\n  const width = Math.min(Math.max(crop.width, minimum), size.width);\n  const height = Math.min(Math.max(crop.height, minimum), size.height);\n\n  return {\n    x: Math.round(Math.min(Math.max(crop.x, 0), size.width - width)),\n    y: Math.round(Math.min(Math.max(crop.y, 0), size.height - height)),\n    width: Math.round(width),\n    height: Math.round(height),\n  };\n};\n\n/** Largest rect with the requested ratio, kept on the current crop's center so the framing does not jump. */\nexport const fitCropToAspect = (\n  crop: IAnnotationCropRect,\n  ratio: number,\n  size: IAnnotationSize,\n): IAnnotationCropRect => {\n  const width = Math.min(size.width, size.height * ratio);\n  const height = width / ratio;\n  const centerX = crop.x + crop.width / 2;\n  const centerY = crop.y + crop.height / 2;\n\n  return clampCropToImage({ x: centerX - width / 2, y: centerY - height / 2, width, height }, size);\n};\n\nexport const isFullImageCrop = (crop: IAnnotationCropRect | null, size: IAnnotationSize): boolean =>\n  !crop || (crop.x <= 0 && crop.y <= 0 && crop.width >= size.width && crop.height >= size.height);\n\n/** A saved document is untrusted input: a crop that does not fit the image is dropped, never applied. */\nexport const sanitizeInitialCrop = (\n  crop: IAnnotationCropRect | null | undefined,\n  size: IAnnotationSize,\n): IAnnotationCropRect | null => {\n  if (!crop) return null;\n  const values = [crop.x, crop.y, crop.width, crop.height];\n  if (values.some((value) => typeof value !== 'number' || !Number.isFinite(value))) return null;\n\n  const clamped = clampCropToImage(crop, size);\n  return isFullImageCrop(clamped, size) ? null : clamped;\n};\n"],"names":[],"mappings":"AAIO,MAAM,0BAAwD;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,sBAA2F;AAAA,EAC/F,QAAQ;AAAA,EACR,UAAU,IAAI;AAAA,EACd,SAAS,IAAI;AAAA,EACb,MAAM,KAAK;AACb;AAGA,MAAM,oBAAoB;AAEnB,MAAM,gBAAgB,CAAC,UAAgD;AAAA,EAC5E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,KAAK;AAAA,EACZ,QAAQ,KAAK;AACf;AAEO,MAAM,mBAAmB,CAAC,SAC/B,KAAK,IAAI,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM,IAAI,iBAAiB,CAAC;AAEzE,MAAM,iBAAiB,CAAC,QAA+B,SAAyC;AACrG,MAAI,WAAW,OAAQ,QAAO;AAC9B,MAAI,WAAW,WAAY,QAAO,KAAK,QAAQ,KAAK;AACpD,SAAO,oBAAoB,MAAM;AACnC;AAEO,MAAM,mBAAmB,CAAC,MAA2B,SAA+C;AACzG,QAAM,UAAU,iBAAiB,IAAI;AACrC,QAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,OAAO,OAAO,GAAG,KAAK,KAAK;AAChE,QAAM,SAAS,KAAK,IAAI,KAAK,IAAI,KAAK,QAAQ,OAAO,GAAG,KAAK,MAAM;AAEnE,SAAO;AAAA,IACL,GAAG,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,CAAC,GAAG,KAAK,QAAQ,KAAK,CAAC;AAAA,IAC/D,GAAG,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,CAAC,GAAG,KAAK,SAAS,MAAM,CAAC;AAAA,IACjE,OAAO,KAAK,MAAM,KAAK;AAAA,IACvB,QAAQ,KAAK,MAAM,MAAM;AAAA,EAAA;AAE7B;AAGO,MAAM,kBAAkB,CAC7B,MACA,OACA,SACwB;AACxB,QAAM,QAAQ,KAAK,IAAI,KAAK,OAAO,KAAK,SAAS,KAAK;AACtD,QAAM,SAAS,QAAQ;AACvB,QAAM,UAAU,KAAK,IAAI,KAAK,QAAQ;AACtC,QAAM,UAAU,KAAK,IAAI,KAAK,SAAS;AAEvC,SAAO,iBAAiB,EAAE,GAAG,UAAU,QAAQ,GAAG,GAAG,UAAU,SAAS,GAAG,OAAO,OAAA,GAAU,IAAI;AAClG;AAEO,MAAM,kBAAkB,CAAC,MAAkC,SAChE,CAAC,QAAS,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,SAAS,KAAK,SAAS,KAAK,UAAU,KAAK;AAGnF,MAAM,sBAAsB,CACjC,MACA,SAC+B;AAC/B,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,SAAS,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK,OAAO,KAAK,MAAM;AACvD,MAAI,OAAO,KAAK,CAAC,UAAU,OAAO,UAAU,YAAY,CAAC,OAAO,SAAS,KAAK,CAAC,EAAG,QAAO;AAEzF,QAAM,UAAU,iBAAiB,MAAM,IAAI;AAC3C,SAAO,gBAAgB,SAAS,IAAI,IAAI,OAAO;AACjD;"}

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;"}