@umodeapporg/ui 0.1.0

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { default as Konva } from 'konva';
+import { TAnnotationElement } from '../interfaces/annotationDocument';
+interface IAnnotationElementNodeProps {
+    element: TAnnotationElement;
+    draggable: boolean;
+    listening: boolean;
+    viewScale: number;
+    hidden: boolean;
+    /** Restored on mouse leave: the stage cursor is imperative once a node has touched it. */
+    idleCursor: string;
+    onSelect: (id: string) => void;
+    onChange: (id: string, updater: (element: TAnnotationElement) => TAnnotationElement) => void;
+    onRequestTextEdit: (id: string) => void;
+    registerNode: (id: string, node: Konva.Node | null) => void;
+}
+declare const _default: import('react').NamedExoticComponent<IAnnotationElementNodeProps>;
+export default _default;

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

@@ -0,0 +1,329 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { Line, Arrow, Rect, Ellipse, Label, Tag, Text, Image } from "react-konva";
+import { ANNOTATION_TEXT_FONT_FAMILY, contrastHaloColor } from "../annotationStyle.js";
+import { hexToRgba, MIN_HIT_STROKE_PX } from "../helpers/annotationCanvas.js";
+import { useHtmlImage } from "../hooks/useHtmlImage.js";
+const MIN_ELEMENT_SIZE = 4;
+const ROUNDED_LINE_PROPS = { lineCap: "round", lineJoin: "round" };
+const uniformScale = (scaleX, scaleY) => Math.abs(scaleX - scaleY) < 0.01;
+const AnnotationElementNode = ({
+  element,
+  draggable,
+  listening,
+  viewScale,
+  hidden,
+  idleCursor,
+  onSelect,
+  onChange,
+  onRequestTextEdit,
+  registerNode
+}) => {
+  const imageSource = element.type === "image" ? element.src : null;
+  const htmlImage = useHtmlImage(imageSource);
+  const handleRef = useCallback(
+    (node) => registerNode(element.id, node),
+    [element.id, registerNode]
+  );
+  const handleSelect = useCallback(
+    (event) => {
+      event.cancelBubble = true;
+      onSelect(element.id);
+    },
+    [element.id, onSelect]
+  );
+  const setCursor = (event, cursor) => {
+    const container = event.target.getStage()?.container();
+    if (container) container.style.cursor = cursor;
+  };
+  const commonProps = {
+    ref: handleRef,
+    id: element.id,
+    draggable,
+    listening: listening && !hidden,
+    visible: !hidden,
+    opacity: element.opacity,
+    perfectDrawEnabled: false,
+    onMouseDown: handleSelect,
+    onTouchStart: handleSelect,
+    onMouseEnter: (event) => setCursor(event, draggable ? "move" : idleCursor),
+    onMouseLeave: (event) => setCursor(event, idleCursor)
+  };
+  const hitStrokeWidth = (strokeWidth) => Math.max(strokeWidth, MIN_HIT_STROKE_PX / viewScale);
+  if (element.type === "freehand") {
+    return /* @__PURE__ */ jsx(
+      Line,
+      {
+        ...commonProps,
+        x: element.x,
+        y: element.y,
+        points: element.points,
+        rotation: element.rotation,
+        stroke: element.stroke,
+        strokeWidth: element.strokeWidth,
+        hitStrokeWidth: hitStrokeWidth(element.strokeWidth),
+        ...ROUNDED_LINE_PROPS,
+        tension: 0.35,
+        onDragEnd: (event) => {
+          const { x, y } = event.target.position();
+          onChange(element.id, (current) => current.type === "freehand" ? { ...current, x, y } : current);
+        },
+        onTransformEnd: (event) => {
+          const node = event.target;
+          const scaleX = node.scaleX();
+          const scaleY = node.scaleY();
+          node.scaleX(1);
+          node.scaleY(1);
+          onChange(
+            element.id,
+            (current) => current.type === "freehand" ? {
+              ...current,
+              x: node.x(),
+              y: node.y(),
+              rotation: node.rotation(),
+              points: current.points.map((value, index) => index % 2 === 0 ? value * scaleX : value * scaleY),
+              strokeWidth: Math.max(1, current.strokeWidth * ((Math.abs(scaleX) + Math.abs(scaleY)) / 2))
+            } : current
+          );
+        }
+      }
+    );
+  }
+  if (element.type === "line" || element.type === "arrow") {
+    const points = [0, 0, element.end.x - element.start.x, element.end.y - element.start.y];
+    const segmentProps = {
+      ...commonProps,
+      x: element.start.x,
+      y: element.start.y,
+      points,
+      stroke: element.stroke,
+      fill: element.stroke,
+      strokeWidth: element.strokeWidth,
+      hitStrokeWidth: hitStrokeWidth(element.strokeWidth),
+      ...ROUNDED_LINE_PROPS,
+      onDragEnd: (event) => {
+        const { x, y } = event.target.position();
+        onChange(element.id, (current) => {
+          if (current.type !== "line" && current.type !== "arrow") return current;
+          const deltaX = x - current.start.x;
+          const deltaY = y - current.start.y;
+          return {
+            ...current,
+            start: { x, y },
+            end: { x: current.end.x + deltaX, y: current.end.y + deltaY }
+          };
+        });
+      }
+    };
+    return element.type === "arrow" ? /* @__PURE__ */ jsx(
+      Arrow,
+      {
+        ...segmentProps,
+        pointerLength: Math.max(10, element.strokeWidth * 3),
+        pointerWidth: Math.max(10, element.strokeWidth * 3)
+      }
+    ) : /* @__PURE__ */ jsx(Line, { ...segmentProps });
+  }
+  if (element.type === "rectangle" || element.type === "ellipse") {
+    const fill = element.fill ? hexToRgba(element.fill, element.fillOpacity) : void 0;
+    const shapeProps = {
+      ...commonProps,
+      rotation: element.rotation,
+      stroke: element.stroke,
+      strokeWidth: element.strokeWidth,
+      strokeScaleEnabled: false,
+      fill,
+      hitStrokeWidth: hitStrokeWidth(element.strokeWidth)
+    };
+    if (element.type === "rectangle") {
+      return /* @__PURE__ */ jsx(
+        Rect,
+        {
+          ...shapeProps,
+          x: element.x,
+          y: element.y,
+          width: element.width,
+          height: element.height,
+          cornerRadius: element.cornerRadius,
+          onDragEnd: (event) => {
+            const { x, y } = event.target.position();
+            onChange(element.id, (current) => current.type === "rectangle" ? { ...current, x, y } : current);
+          },
+          onTransformEnd: (event) => {
+            const node = event.target;
+            const scaleX = node.scaleX();
+            const scaleY = node.scaleY();
+            node.scaleX(1);
+            node.scaleY(1);
+            onChange(
+              element.id,
+              (current) => current.type === "rectangle" ? {
+                ...current,
+                x: node.x(),
+                y: node.y(),
+                rotation: node.rotation(),
+                width: Math.max(MIN_ELEMENT_SIZE, current.width * scaleX),
+                height: Math.max(MIN_ELEMENT_SIZE, current.height * scaleY)
+              } : current
+            );
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Ellipse,
+      {
+        ...shapeProps,
+        x: element.x + element.width / 2,
+        y: element.y + element.height / 2,
+        radiusX: element.width / 2,
+        radiusY: element.height / 2,
+        onDragEnd: (event) => {
+          const { x, y } = event.target.position();
+          onChange(
+            element.id,
+            (current) => current.type === "ellipse" ? { ...current, x: x - current.width / 2, y: y - current.height / 2 } : current
+          );
+        },
+        onTransformEnd: (event) => {
+          const node = event.target;
+          const scaleX = node.scaleX();
+          const scaleY = node.scaleY();
+          node.scaleX(1);
+          node.scaleY(1);
+          onChange(element.id, (current) => {
+            if (current.type !== "ellipse") return current;
+            const width = Math.max(MIN_ELEMENT_SIZE, current.width * scaleX);
+            const height = Math.max(MIN_ELEMENT_SIZE, current.height * scaleY);
+            return {
+              ...current,
+              rotation: node.rotation(),
+              width,
+              height,
+              x: node.x() - width / 2,
+              y: node.y() - height / 2
+            };
+          });
+        }
+      }
+    );
+  }
+  if (element.type === "text") {
+    const hasBackground = Boolean(element.background);
+    const fontStyle = `${element.italic ? "italic " : ""}${element.bold ? "bold" : "normal"}`;
+    return /* @__PURE__ */ jsxs(
+      Label,
+      {
+        ...commonProps,
+        x: element.x,
+        y: element.y,
+        rotation: element.rotation,
+        onDblClick: () => onRequestTextEdit(element.id),
+        onDblTap: () => onRequestTextEdit(element.id),
+        onDragEnd: (event) => {
+          const { x, y } = event.target.position();
+          onChange(element.id, (current) => current.type === "text" ? { ...current, x, y } : current);
+        },
+        onTransformEnd: (event) => {
+          const node = event.target;
+          const scaleX = node.scaleX();
+          const scaleY = node.scaleY();
+          node.scaleX(1);
+          node.scaleY(1);
+          onChange(element.id, (current) => {
+            if (current.type !== "text") return current;
+            const scalesFont = uniformScale(scaleX, scaleY);
+            const fontScale = scalesFont ? scaleX : 1;
+            return {
+              ...current,
+              x: node.x(),
+              y: node.y(),
+              rotation: node.rotation(),
+              width: Math.max(current.fontSize, current.width * scaleX),
+              fontSize: Math.max(8, current.fontSize * fontScale),
+              padding: Math.max(0, current.padding * fontScale),
+              cornerRadius: Math.max(0, current.cornerRadius * fontScale)
+            };
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Tag,
+            {
+              fill: hasBackground ? hexToRgba(element.background ?? "", element.backgroundOpacity) : void 0,
+              fillEnabled: hasBackground,
+              listening: hasBackground,
+              cornerRadius: element.cornerRadius,
+              perfectDrawEnabled: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              text: element.text,
+              width: element.width,
+              padding: element.padding,
+              align: element.align,
+              fontSize: element.fontSize,
+              fontFamily: ANNOTATION_TEXT_FONT_FAMILY,
+              fontStyle,
+              fill: element.color,
+              stroke: hasBackground ? void 0 : contrastHaloColor(element.color),
+              strokeWidth: hasBackground ? 0 : Math.max(1, element.fontSize / 12),
+              fillAfterStrokeEnabled: true,
+              lineHeight: 1.25,
+              perfectDrawEnabled: false
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (element.type !== "image" || !htmlImage) return null;
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      ...commonProps,
+      image: htmlImage,
+      x: element.x,
+      y: element.y,
+      width: element.width,
+      height: element.height,
+      rotation: element.rotation,
+      cornerRadius: element.cornerRadius,
+      stroke: element.stroke ?? void 0,
+      strokeWidth: element.stroke ? element.strokeWidth : 0,
+      strokeScaleEnabled: false,
+      shadowColor: element.shadow ? "rgba(0, 0, 0, 0.45)" : void 0,
+      shadowBlur: element.shadow ? Math.max(6, element.width * 0.03) : 0,
+      shadowOpacity: element.shadow ? 1 : 0,
+      onDragEnd: (event) => {
+        const { x, y } = event.target.position();
+        onChange(element.id, (current) => current.type === "image" ? { ...current, x, y } : current);
+      },
+      onTransformEnd: (event) => {
+        const node = event.target;
+        const scaleX = node.scaleX();
+        const scaleY = node.scaleY();
+        node.scaleX(1);
+        node.scaleY(1);
+        onChange(
+          element.id,
+          (current) => current.type === "image" ? {
+            ...current,
+            x: node.x(),
+            y: node.y(),
+            rotation: node.rotation(),
+            width: Math.max(MIN_ELEMENT_SIZE, current.width * scaleX),
+            height: Math.max(MIN_ELEMENT_SIZE, current.height * scaleY)
+          } : current
+        );
+      }
+    }
+  );
+};
+const AnnotationElementNode$1 = memo(AnnotationElementNode);
+export {
+  AnnotationElementNode$1 as default
+};
+//# sourceMappingURL=AnnotationElementNode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationElementNode.js","sources":["../../../../../src/components/UI/ImageAnnotator/canvas/AnnotationElementNode.tsx"],"sourcesContent":["import { memo, useCallback } from 'react';\nimport Konva from 'konva';\nimport { Arrow, Ellipse, Image as KonvaImage, Label, Line, Rect, Tag, Text } from 'react-konva';\n\nimport { ANNOTATION_TEXT_FONT_FAMILY, contrastHaloColor } from '../annotationStyle';\nimport { hexToRgba, MIN_HIT_STROKE_PX } from '../helpers/annotationCanvas';\nimport { useHtmlImage } from '../hooks/useHtmlImage';\nimport { TAnnotationElement } from '../interfaces/annotationDocument';\n\nconst MIN_ELEMENT_SIZE = 4;\nconst ROUNDED_LINE_PROPS = { lineCap: 'round' as const, lineJoin: 'round' as const };\n\ninterface IAnnotationElementNodeProps {\n  element: TAnnotationElement;\n  draggable: boolean;\n  listening: boolean;\n  viewScale: number;\n  hidden: boolean;\n  /** Restored on mouse leave: the stage cursor is imperative once a node has touched it. */\n  idleCursor: string;\n  onSelect: (id: string) => void;\n  onChange: (id: string, updater: (element: TAnnotationElement) => TAnnotationElement) => void;\n  onRequestTextEdit: (id: string) => void;\n  registerNode: (id: string, node: Konva.Node | null) => void;\n}\n\nconst uniformScale = (scaleX: number, scaleY: number): boolean => Math.abs(scaleX - scaleY) < 0.01;\n\nconst AnnotationElementNode: React.FC<IAnnotationElementNodeProps> = ({\n  element,\n  draggable,\n  listening,\n  viewScale,\n  hidden,\n  idleCursor,\n  onSelect,\n  onChange,\n  onRequestTextEdit,\n  registerNode,\n}) => {\n  const imageSource = element.type === 'image' ? element.src : null;\n  const htmlImage = useHtmlImage(imageSource);\n\n  const handleRef = useCallback(\n    (node: Konva.Node | null) => registerNode(element.id, node),\n    [element.id, registerNode],\n  );\n\n  const handleSelect = useCallback(\n    (event: Konva.KonvaEventObject<MouseEvent | TouchEvent>) => {\n      event.cancelBubble = true;\n      onSelect(element.id);\n    },\n    [element.id, onSelect],\n  );\n\n  const setCursor = (event: Konva.KonvaEventObject<MouseEvent>, cursor: string) => {\n    const container = event.target.getStage()?.container();\n    if (container) container.style.cursor = cursor;\n  };\n\n  const commonProps = {\n    ref: handleRef,\n    id: element.id,\n    draggable,\n    listening: listening && !hidden,\n    visible: !hidden,\n    opacity: element.opacity,\n    perfectDrawEnabled: false,\n    onMouseDown: handleSelect,\n    onTouchStart: handleSelect,\n    onMouseEnter: (event: Konva.KonvaEventObject<MouseEvent>) => setCursor(event, draggable ? 'move' : idleCursor),\n    onMouseLeave: (event: Konva.KonvaEventObject<MouseEvent>) => setCursor(event, idleCursor),\n  };\n\n  const hitStrokeWidth = (strokeWidth: number): number => Math.max(strokeWidth, MIN_HIT_STROKE_PX / viewScale);\n\n  if (element.type === 'freehand') {\n    return (\n      <Line\n        {...commonProps}\n        x={element.x}\n        y={element.y}\n        points={element.points}\n        rotation={element.rotation}\n        stroke={element.stroke}\n        strokeWidth={element.strokeWidth}\n        hitStrokeWidth={hitStrokeWidth(element.strokeWidth)}\n        {...ROUNDED_LINE_PROPS}\n        tension={0.35}\n        onDragEnd={(event) => {\n          const { x, y } = event.target.position();\n          onChange(element.id, (current) => (current.type === 'freehand' ? { ...current, x, y } : current));\n        }}\n        onTransformEnd={(event) => {\n          const node = event.target;\n          const scaleX = node.scaleX();\n          const scaleY = node.scaleY();\n          node.scaleX(1);\n          node.scaleY(1);\n\n          onChange(element.id, (current) =>\n            current.type === 'freehand'\n              ? {\n                  ...current,\n                  x: node.x(),\n                  y: node.y(),\n                  rotation: node.rotation(),\n                  points: current.points.map((value, index) => (index % 2 === 0 ? value * scaleX : value * scaleY)),\n                  strokeWidth: Math.max(1, current.strokeWidth * ((Math.abs(scaleX) + Math.abs(scaleY)) / 2)),\n                }\n              : current,\n          );\n        }}\n      />\n    );\n  }\n\n  if (element.type === 'line' || element.type === 'arrow') {\n    const points = [0, 0, element.end.x - element.start.x, element.end.y - element.start.y];\n    const segmentProps = {\n      ...commonProps,\n      x: element.start.x,\n      y: element.start.y,\n      points,\n      stroke: element.stroke,\n      fill: element.stroke,\n      strokeWidth: element.strokeWidth,\n      hitStrokeWidth: hitStrokeWidth(element.strokeWidth),\n      ...ROUNDED_LINE_PROPS,\n      onDragEnd: (event: Konva.KonvaEventObject<DragEvent>) => {\n        const { x, y } = event.target.position();\n        onChange(element.id, (current) => {\n          if (current.type !== 'line' && current.type !== 'arrow') return current;\n          const deltaX = x - current.start.x;\n          const deltaY = y - current.start.y;\n          return {\n            ...current,\n            start: { x, y },\n            end: { x: current.end.x + deltaX, y: current.end.y + deltaY },\n          };\n        });\n      },\n    };\n\n    return element.type === 'arrow' ? (\n      <Arrow\n        {...segmentProps}\n        pointerLength={Math.max(10, element.strokeWidth * 3)}\n        pointerWidth={Math.max(10, element.strokeWidth * 3)}\n      />\n    ) : (\n      <Line {...segmentProps} />\n    );\n  }\n\n  if (element.type === 'rectangle' || element.type === 'ellipse') {\n    const fill = element.fill ? hexToRgba(element.fill, element.fillOpacity) : undefined;\n    const shapeProps = {\n      ...commonProps,\n      rotation: element.rotation,\n      stroke: element.stroke,\n      strokeWidth: element.strokeWidth,\n      strokeScaleEnabled: false,\n      fill,\n      hitStrokeWidth: hitStrokeWidth(element.strokeWidth),\n    };\n\n    if (element.type === 'rectangle') {\n      return (\n        <Rect\n          {...shapeProps}\n          x={element.x}\n          y={element.y}\n          width={element.width}\n          height={element.height}\n          cornerRadius={element.cornerRadius}\n          onDragEnd={(event) => {\n            const { x, y } = event.target.position();\n            onChange(element.id, (current) => (current.type === 'rectangle' ? { ...current, x, y } : current));\n          }}\n          onTransformEnd={(event) => {\n            const node = event.target;\n            const scaleX = node.scaleX();\n            const scaleY = node.scaleY();\n            node.scaleX(1);\n            node.scaleY(1);\n\n            onChange(element.id, (current) =>\n              current.type === 'rectangle'\n                ? {\n                    ...current,\n                    x: node.x(),\n                    y: node.y(),\n                    rotation: node.rotation(),\n                    width: Math.max(MIN_ELEMENT_SIZE, current.width * scaleX),\n                    height: Math.max(MIN_ELEMENT_SIZE, current.height * scaleY),\n                  }\n                : current,\n            );\n          }}\n        />\n      );\n    }\n\n    return (\n      <Ellipse\n        {...shapeProps}\n        x={element.x + element.width / 2}\n        y={element.y + element.height / 2}\n        radiusX={element.width / 2}\n        radiusY={element.height / 2}\n        onDragEnd={(event) => {\n          const { x, y } = event.target.position();\n          onChange(element.id, (current) =>\n            current.type === 'ellipse' ? { ...current, x: x - current.width / 2, y: y - current.height / 2 } : current,\n          );\n        }}\n        onTransformEnd={(event) => {\n          const node = event.target;\n          const scaleX = node.scaleX();\n          const scaleY = node.scaleY();\n          node.scaleX(1);\n          node.scaleY(1);\n\n          onChange(element.id, (current) => {\n            if (current.type !== 'ellipse') return current;\n            const width = Math.max(MIN_ELEMENT_SIZE, current.width * scaleX);\n            const height = Math.max(MIN_ELEMENT_SIZE, current.height * scaleY);\n            return {\n              ...current,\n              rotation: node.rotation(),\n              width,\n              height,\n              x: node.x() - width / 2,\n              y: node.y() - height / 2,\n            };\n          });\n        }}\n      />\n    );\n  }\n\n  if (element.type === 'text') {\n    const hasBackground = Boolean(element.background);\n    const fontStyle = `${element.italic ? 'italic ' : ''}${element.bold ? 'bold' : 'normal'}`;\n\n    return (\n      <Label\n        {...commonProps}\n        x={element.x}\n        y={element.y}\n        rotation={element.rotation}\n        onDblClick={() => onRequestTextEdit(element.id)}\n        onDblTap={() => onRequestTextEdit(element.id)}\n        onDragEnd={(event) => {\n          const { x, y } = event.target.position();\n          onChange(element.id, (current) => (current.type === 'text' ? { ...current, x, y } : current));\n        }}\n        onTransformEnd={(event) => {\n          const node = event.target;\n          const scaleX = node.scaleX();\n          const scaleY = node.scaleY();\n          node.scaleX(1);\n          node.scaleY(1);\n\n          onChange(element.id, (current) => {\n            if (current.type !== 'text') return current;\n            const scalesFont = uniformScale(scaleX, scaleY);\n            const fontScale = scalesFont ? scaleX : 1;\n\n            return {\n              ...current,\n              x: node.x(),\n              y: node.y(),\n              rotation: node.rotation(),\n              width: Math.max(current.fontSize, current.width * scaleX),\n              fontSize: Math.max(8, current.fontSize * fontScale),\n              padding: Math.max(0, current.padding * fontScale),\n              cornerRadius: Math.max(0, current.cornerRadius * fontScale),\n            };\n          });\n        }}\n      >\n        <Tag\n          fill={hasBackground ? hexToRgba(element.background ?? '', element.backgroundOpacity) : undefined}\n          fillEnabled={hasBackground}\n          listening={hasBackground}\n          cornerRadius={element.cornerRadius}\n          perfectDrawEnabled={false}\n        />\n        <Text\n          text={element.text}\n          width={element.width}\n          padding={element.padding}\n          align={element.align}\n          fontSize={element.fontSize}\n          fontFamily={ANNOTATION_TEXT_FONT_FAMILY}\n          fontStyle={fontStyle}\n          fill={element.color}\n          stroke={hasBackground ? undefined : contrastHaloColor(element.color)}\n          strokeWidth={hasBackground ? 0 : Math.max(1, element.fontSize / 12)}\n          fillAfterStrokeEnabled\n          lineHeight={1.25}\n          perfectDrawEnabled={false}\n        />\n      </Label>\n    );\n  }\n\n  if (element.type !== 'image' || !htmlImage) return null;\n\n  return (\n    <KonvaImage\n      {...commonProps}\n      image={htmlImage}\n      x={element.x}\n      y={element.y}\n      width={element.width}\n      height={element.height}\n      rotation={element.rotation}\n      cornerRadius={element.cornerRadius}\n      stroke={element.stroke ?? undefined}\n      strokeWidth={element.stroke ? element.strokeWidth : 0}\n      strokeScaleEnabled={false}\n      shadowColor={element.shadow ? 'rgba(0, 0, 0, 0.45)' : undefined}\n      shadowBlur={element.shadow ? Math.max(6, element.width * 0.03) : 0}\n      shadowOpacity={element.shadow ? 1 : 0}\n      onDragEnd={(event) => {\n        const { x, y } = event.target.position();\n        onChange(element.id, (current) => (current.type === 'image' ? { ...current, x, y } : current));\n      }}\n      onTransformEnd={(event) => {\n        const node = event.target;\n        const scaleX = node.scaleX();\n        const scaleY = node.scaleY();\n        node.scaleX(1);\n        node.scaleY(1);\n\n        onChange(element.id, (current) =>\n          current.type === 'image'\n            ? {\n                ...current,\n                x: node.x(),\n                y: node.y(),\n                rotation: node.rotation(),\n                width: Math.max(MIN_ELEMENT_SIZE, current.width * scaleX),\n                height: Math.max(MIN_ELEMENT_SIZE, current.height * scaleY),\n              }\n            : current,\n        );\n      }}\n    />\n  );\n};\n\nexport default memo(AnnotationElementNode);\n"],"names":["KonvaImage"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import { default as Konva } from 'konva';
+import { TAnnotationElement } from '../interfaces/annotationDocument';
+interface IAnnotationSelectionProps {
+    selectedElement: TAnnotationElement | null;
+    viewScale: number;
+    getNode: (id: string) => Konva.Node | null;
+    onChange: (id: string, updater: (element: TAnnotationElement) => TAnnotationElement) => void;
+}
+declare const AnnotationSelection: React.FC<IAnnotationSelectionProps>;
+export default AnnotationSelection;