@umodeapporg/ui 0.0.0-canary.ca10e69

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

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

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

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

package/dist/components/UI/ImageAnnotator/canvas/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":";;;;;;AASA,MAAM,mBAAmB;AACzB,MAAM,qBAAqB,EAAE,SAAS,SAAkB,UAAU,QAAA;AAgBlE,MAAM,eAAe,CAAC,QAAgB,WAA4B,KAAK,IAAI,SAAS,MAAM,IAAI;AAE9F,MAAM,wBAA+D,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,cAAc,QAAQ,SAAS,UAAU,QAAQ,MAAM;AAC7D,QAAM,YAAY,aAAa,WAAW;AAE1C,QAAM,YAAY;AAAA,IAChB,CAAC,SAA4B,aAAa,QAAQ,IAAI,IAAI;AAAA,IAC1D,CAAC,QAAQ,IAAI,YAAY;AAAA,EAAA;AAG3B,QAAM,eAAe;AAAA,IACnB,CAAC,UAA2D;AAC1D,YAAM,eAAe;AACrB,eAAS,QAAQ,EAAE;AAAA,IACrB;AAAA,IACA,CAAC,QAAQ,IAAI,QAAQ;AAAA,EAAA;AAGvB,QAAM,YAAY,CAAC,OAA2C,WAAmB;AAC/E,UAAM,YAAY,MAAM,OAAO,SAAA,GAAY,UAAA;AAC3C,QAAI,UAAW,WAAU,MAAM,SAAS;AAAA,EAC1C;AAEA,QAAM,cAAc;AAAA,IAClB,KAAK;AAAA,IACL,IAAI,QAAQ;AAAA,IACZ;AAAA,IACA,WAAW,aAAa,CAAC;AAAA,IACzB,SAAS,CAAC;AAAA,IACV,SAAS,QAAQ;AAAA,IACjB,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,cAAc,CAAC,UAA8C,UAAU,OAAO,YAAY,SAAS,UAAU;AAAA,IAC7G,cAAc,CAAC,UAA8C,UAAU,OAAO,UAAU;AAAA,EAAA;AAG1F,QAAM,iBAAiB,CAAC,gBAAgC,KAAK,IAAI,aAAa,oBAAoB,SAAS;AAE3G,MAAI,QAAQ,SAAS,YAAY;AAC/B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,GAAG,QAAQ;AAAA,QACX,GAAG,QAAQ;AAAA,QACX,QAAQ,QAAQ;AAAA,QAChB,UAAU,QAAQ;AAAA,QAClB,QAAQ,QAAQ;AAAA,QAChB,aAAa,QAAQ;AAAA,QACrB,gBAAgB,eAAe,QAAQ,WAAW;AAAA,QACjD,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,WAAW,CAAC,UAAU;AACpB,gBAAM,EAAE,GAAG,EAAA,IAAM,MAAM,OAAO,SAAA;AAC9B,mBAAS,QAAQ,IAAI,CAAC,YAAa,QAAQ,SAAS,aAAa,EAAE,GAAG,SAAS,GAAG,EAAA,IAAM,OAAQ;AAAA,QAClG;AAAA,QACA,gBAAgB,CAAC,UAAU;AACzB,gBAAM,OAAO,MAAM;AACnB,gBAAM,SAAS,KAAK,OAAA;AACpB,gBAAM,SAAS,KAAK,OAAA;AACpB,eAAK,OAAO,CAAC;AACb,eAAK,OAAO,CAAC;AAEb;AAAA,YAAS,QAAQ;AAAA,YAAI,CAAC,YACpB,QAAQ,SAAS,aACb;AAAA,cACE,GAAG;AAAA,cACH,GAAG,KAAK,EAAA;AAAA,cACR,GAAG,KAAK,EAAA;AAAA,cACR,UAAU,KAAK,SAAA;AAAA,cACf,QAAQ,QAAQ,OAAO,IAAI,CAAC,OAAO,UAAW,QAAQ,MAAM,IAAI,QAAQ,SAAS,QAAQ,MAAO;AAAA,cAChG,aAAa,KAAK,IAAI,GAAG,QAAQ,gBAAgB,KAAK,IAAI,MAAM,IAAI,KAAK,IAAI,MAAM,KAAK,EAAE;AAAA,YAAA,IAE5F;AAAA,UAAA;AAAA,QAER;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAI,QAAQ,SAAS,UAAU,QAAQ,SAAS,SAAS;AACvD,UAAM,SAAS,CAAC,GAAG,GAAG,QAAQ,IAAI,IAAI,QAAQ,MAAM,GAAG,QAAQ,IAAI,IAAI,QAAQ,MAAM,CAAC;AACtF,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG,QAAQ,MAAM;AAAA,MACjB,GAAG,QAAQ,MAAM;AAAA,MACjB;AAAA,MACA,QAAQ,QAAQ;AAAA,MAChB,MAAM,QAAQ;AAAA,MACd,aAAa,QAAQ;AAAA,MACrB,gBAAgB,eAAe,QAAQ,WAAW;AAAA,MAClD,GAAG;AAAA,MACH,WAAW,CAAC,UAA6C;AACvD,cAAM,EAAE,GAAG,EAAA,IAAM,MAAM,OAAO,SAAA;AAC9B,iBAAS,QAAQ,IAAI,CAAC,YAAY;AAChC,cAAI,QAAQ,SAAS,UAAU,QAAQ,SAAS,QAAS,QAAO;AAChE,gBAAM,SAAS,IAAI,QAAQ,MAAM;AACjC,gBAAM,SAAS,IAAI,QAAQ,MAAM;AACjC,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,OAAO,EAAE,GAAG,EAAA;AAAA,YACZ,KAAK,EAAE,GAAG,QAAQ,IAAI,IAAI,QAAQ,GAAG,QAAQ,IAAI,IAAI,OAAA;AAAA,UAAO;AAAA,QAEhE,CAAC;AAAA,MACH;AAAA,IAAA;AAGF,WAAO,QAAQ,SAAS,UACtB;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAe,KAAK,IAAI,IAAI,QAAQ,cAAc,CAAC;AAAA,QACnD,cAAc,KAAK,IAAI,IAAI,QAAQ,cAAc,CAAC;AAAA,MAAA;AAAA,IAAA,IAGpD,oBAAC,MAAA,EAAM,GAAG,aAAA,CAAc;AAAA,EAE5B;AAEA,MAAI,QAAQ,SAAS,eAAe,QAAQ,SAAS,WAAW;AAC9D,UAAM,OAAO,QAAQ,OAAO,UAAU,QAAQ,MAAM,QAAQ,WAAW,IAAI;AAC3E,UAAM,aAAa;AAAA,MACjB,GAAG;AAAA,MACH,UAAU,QAAQ;AAAA,MAClB,QAAQ,QAAQ;AAAA,MAChB,aAAa,QAAQ;AAAA,MACrB,oBAAoB;AAAA,MACpB;AAAA,MACA,gBAAgB,eAAe,QAAQ,WAAW;AAAA,IAAA;AAGpD,QAAI,QAAQ,SAAS,aAAa;AAChC,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,GAAG,QAAQ;AAAA,UACX,GAAG,QAAQ;AAAA,UACX,OAAO,QAAQ;AAAA,UACf,QAAQ,QAAQ;AAAA,UAChB,cAAc,QAAQ;AAAA,UACtB,WAAW,CAAC,UAAU;AACpB,kBAAM,EAAE,GAAG,EAAA,IAAM,MAAM,OAAO,SAAA;AAC9B,qBAAS,QAAQ,IAAI,CAAC,YAAa,QAAQ,SAAS,cAAc,EAAE,GAAG,SAAS,GAAG,EAAA,IAAM,OAAQ;AAAA,UACnG;AAAA,UACA,gBAAgB,CAAC,UAAU;AACzB,kBAAM,OAAO,MAAM;AACnB,kBAAM,SAAS,KAAK,OAAA;AACpB,kBAAM,SAAS,KAAK,OAAA;AACpB,iBAAK,OAAO,CAAC;AACb,iBAAK,OAAO,CAAC;AAEb;AAAA,cAAS,QAAQ;AAAA,cAAI,CAAC,YACpB,QAAQ,SAAS,cACb;AAAA,gBACE,GAAG;AAAA,gBACH,GAAG,KAAK,EAAA;AAAA,gBACR,GAAG,KAAK,EAAA;AAAA,gBACR,UAAU,KAAK,SAAA;AAAA,gBACf,OAAO,KAAK,IAAI,kBAAkB,QAAQ,QAAQ,MAAM;AAAA,gBACxD,QAAQ,KAAK,IAAI,kBAAkB,QAAQ,SAAS,MAAM;AAAA,cAAA,IAE5D;AAAA,YAAA;AAAA,UAER;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,GAAG,QAAQ,IAAI,QAAQ,QAAQ;AAAA,QAC/B,GAAG,QAAQ,IAAI,QAAQ,SAAS;AAAA,QAChC,SAAS,QAAQ,QAAQ;AAAA,QACzB,SAAS,QAAQ,SAAS;AAAA,QAC1B,WAAW,CAAC,UAAU;AACpB,gBAAM,EAAE,GAAG,EAAA,IAAM,MAAM,OAAO,SAAA;AAC9B;AAAA,YAAS,QAAQ;AAAA,YAAI,CAAC,YACpB,QAAQ,SAAS,YAAY,EAAE,GAAG,SAAS,GAAG,IAAI,QAAQ,QAAQ,GAAG,GAAG,IAAI,QAAQ,SAAS,MAAM;AAAA,UAAA;AAAA,QAEvG;AAAA,QACA,gBAAgB,CAAC,UAAU;AACzB,gBAAM,OAAO,MAAM;AACnB,gBAAM,SAAS,KAAK,OAAA;AACpB,gBAAM,SAAS,KAAK,OAAA;AACpB,eAAK,OAAO,CAAC;AACb,eAAK,OAAO,CAAC;AAEb,mBAAS,QAAQ,IAAI,CAAC,YAAY;AAChC,gBAAI,QAAQ,SAAS,UAAW,QAAO;AACvC,kBAAM,QAAQ,KAAK,IAAI,kBAAkB,QAAQ,QAAQ,MAAM;AAC/D,kBAAM,SAAS,KAAK,IAAI,kBAAkB,QAAQ,SAAS,MAAM;AACjE,mBAAO;AAAA,cACL,GAAG;AAAA,cACH,UAAU,KAAK,SAAA;AAAA,cACf;AAAA,cACA;AAAA,cACA,GAAG,KAAK,EAAA,IAAM,QAAQ;AAAA,cACtB,GAAG,KAAK,EAAA,IAAM,SAAS;AAAA,YAAA;AAAA,UAE3B,CAAC;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAI,QAAQ,SAAS,QAAQ;AAC3B,UAAM,gBAAgB,QAAQ,QAAQ,UAAU;AAChD,UAAM,YAAY,GAAG,QAAQ,SAAS,YAAY,EAAE,GAAG,QAAQ,OAAO,SAAS,QAAQ;AAEvF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,GAAG,QAAQ;AAAA,QACX,GAAG,QAAQ;AAAA,QACX,UAAU,QAAQ;AAAA,QAClB,YAAY,MAAM,kBAAkB,QAAQ,EAAE;AAAA,QAC9C,UAAU,MAAM,kBAAkB,QAAQ,EAAE;AAAA,QAC5C,WAAW,CAAC,UAAU;AACpB,gBAAM,EAAE,GAAG,EAAA,IAAM,MAAM,OAAO,SAAA;AAC9B,mBAAS,QAAQ,IAAI,CAAC,YAAa,QAAQ,SAAS,SAAS,EAAE,GAAG,SAAS,GAAG,EAAA,IAAM,OAAQ;AAAA,QAC9F;AAAA,QACA,gBAAgB,CAAC,UAAU;AACzB,gBAAM,OAAO,MAAM;AACnB,gBAAM,SAAS,KAAK,OAAA;AACpB,gBAAM,SAAS,KAAK,OAAA;AACpB,eAAK,OAAO,CAAC;AACb,eAAK,OAAO,CAAC;AAEb,mBAAS,QAAQ,IAAI,CAAC,YAAY;AAChC,gBAAI,QAAQ,SAAS,OAAQ,QAAO;AACpC,kBAAM,aAAa,aAAa,QAAQ,MAAM;AAC9C,kBAAM,YAAY,aAAa,SAAS;AAExC,mBAAO;AAAA,cACL,GAAG;AAAA,cACH,GAAG,KAAK,EAAA;AAAA,cACR,GAAG,KAAK,EAAA;AAAA,cACR,UAAU,KAAK,SAAA;AAAA,cACf,OAAO,KAAK,IAAI,QAAQ,UAAU,QAAQ,QAAQ,MAAM;AAAA,cACxD,UAAU,KAAK,IAAI,GAAG,QAAQ,WAAW,SAAS;AAAA,cAClD,SAAS,KAAK,IAAI,GAAG,QAAQ,UAAU,SAAS;AAAA,cAChD,cAAc,KAAK,IAAI,GAAG,QAAQ,eAAe,SAAS;AAAA,YAAA;AAAA,UAE9D,CAAC;AAAA,QACH;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,gBAAgB,UAAU,QAAQ,cAAc,IAAI,QAAQ,iBAAiB,IAAI;AAAA,cACvF,aAAa;AAAA,cACb,WAAW;AAAA,cACX,cAAc,QAAQ;AAAA,cACtB,oBAAoB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEtB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,QAAQ;AAAA,cACd,OAAO,QAAQ;AAAA,cACf,SAAS,QAAQ;AAAA,cACjB,OAAO,QAAQ;AAAA,cACf,UAAU,QAAQ;AAAA,cAClB,YAAY;AAAA,cACZ;AAAA,cACA,MAAM,QAAQ;AAAA,cACd,QAAQ,gBAAgB,SAAY,kBAAkB,QAAQ,KAAK;AAAA,cACnE,aAAa,gBAAgB,IAAI,KAAK,IAAI,GAAG,QAAQ,WAAW,EAAE;AAAA,cAClE,wBAAsB;AAAA,cACtB,YAAY;AAAA,cACZ,oBAAoB;AAAA,YAAA;AAAA,UAAA;AAAA,QACtB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAI,QAAQ,SAAS,WAAW,CAAC,UAAW,QAAO;AAEnD,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,GAAG,QAAQ;AAAA,MACX,GAAG,QAAQ;AAAA,MACX,OAAO,QAAQ;AAAA,MACf,QAAQ,QAAQ;AAAA,MAChB,UAAU,QAAQ;AAAA,MAClB,cAAc,QAAQ;AAAA,MACtB,QAAQ,QAAQ,UAAU;AAAA,MAC1B,aAAa,QAAQ,SAAS,QAAQ,cAAc;AAAA,MACpD,oBAAoB;AAAA,MACpB,aAAa,QAAQ,SAAS,wBAAwB;AAAA,MACtD,YAAY,QAAQ,SAAS,KAAK,IAAI,GAAG,QAAQ,QAAQ,IAAI,IAAI;AAAA,MACjE,eAAe,QAAQ,SAAS,IAAI;AAAA,MACpC,WAAW,CAAC,UAAU;AACpB,cAAM,EAAE,GAAG,EAAA,IAAM,MAAM,OAAO,SAAA;AAC9B,iBAAS,QAAQ,IAAI,CAAC,YAAa,QAAQ,SAAS,UAAU,EAAE,GAAG,SAAS,GAAG,EAAA,IAAM,OAAQ;AAAA,MAC/F;AAAA,MACA,gBAAgB,CAAC,UAAU;AACzB,cAAM,OAAO,MAAM;AACnB,cAAM,SAAS,KAAK,OAAA;AACpB,cAAM,SAAS,KAAK,OAAA;AACpB,aAAK,OAAO,CAAC;AACb,aAAK,OAAO,CAAC;AAEb;AAAA,UAAS,QAAQ;AAAA,UAAI,CAAC,YACpB,QAAQ,SAAS,UACb;AAAA,YACE,GAAG;AAAA,YACH,GAAG,KAAK,EAAA;AAAA,YACR,GAAG,KAAK,EAAA;AAAA,YACR,UAAU,KAAK,SAAA;AAAA,YACf,OAAO,KAAK,IAAI,kBAAkB,QAAQ,QAAQ,MAAM;AAAA,YACxD,QAAQ,KAAK,IAAI,kBAAkB,QAAQ,SAAS,MAAM;AAAA,UAAA,IAE5D;AAAA,QAAA;AAAA,MAER;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAA,0BAAe,KAAK,qBAAqB;"}

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;