@umodeapporg/ui 0.0.0-canary.ca10e69

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,80 @@
+import { useEffect } from "react";
+const TOOL_KEYS = {
+  v: "select",
+  p: "freehand",
+  e: "eraser",
+  a: "arrow",
+  l: "line",
+  r: "rectangle",
+  o: "ellipse",
+  t: "text",
+  c: "crop"
+};
+const NUDGE_STEP = 1;
+const NUDGE_STEP_FAST = 10;
+const isTypingTarget = (target) => {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+};
+const useAnnotationShortcuts = ({
+  active,
+  controller,
+  imageMaxDimension,
+  onToolChange
+}) => {
+  useEffect(() => {
+    if (!active) return;
+    const handleKeyDown = (event) => {
+      if (isTypingTarget(event.target)) return;
+      const isAccelerator = event.metaKey || event.ctrlKey;
+      const key = event.key.toLowerCase();
+      if (isAccelerator && key === "z") {
+        event.preventDefault();
+        if (event.shiftKey) controller.redo();
+        else controller.undo();
+        return;
+      }
+      if (isAccelerator && key === "y") {
+        event.preventDefault();
+        controller.redo();
+        return;
+      }
+      if (isAccelerator && key === "d") {
+        event.preventDefault();
+        controller.duplicateSelected();
+        return;
+      }
+      if (isAccelerator) return;
+      if (event.key === "Escape" && controller.selectedId) {
+        event.preventDefault();
+        event.stopPropagation();
+        controller.select(null);
+        return;
+      }
+      if ((event.key === "Delete" || event.key === "Backspace") && controller.selectedId) {
+        event.preventDefault();
+        controller.removeElement(controller.selectedId);
+        return;
+      }
+      if (event.key.startsWith("Arrow") && controller.selectedId) {
+        event.preventDefault();
+        const step = (event.shiftKey ? NUDGE_STEP_FAST : NUDGE_STEP) * Math.max(1, Math.round(imageMaxDimension / 400));
+        const deltaX = event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
+        const deltaY = event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0;
+        controller.nudgeSelected(deltaX, deltaY);
+        return;
+      }
+      const tool = TOOL_KEYS[key];
+      if (tool) {
+        event.preventDefault();
+        onToolChange(tool);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [active, controller, imageMaxDimension, onToolChange]);
+};
+export {
+  useAnnotationShortcuts
+};
+//# sourceMappingURL=useAnnotationShortcuts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnnotationShortcuts.js","sources":["../../../../../src/components/UI/ImageAnnotator/hooks/useAnnotationShortcuts.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { TAnnotationTool } from '../interfaces/annotationDocument';\n\nimport { IAnnotationDocumentController } from './useAnnotationDocument';\n\nconst TOOL_KEYS: Record<string, TAnnotationTool> = {\n  v: 'select',\n  p: 'freehand',\n  e: 'eraser',\n  a: 'arrow',\n  l: 'line',\n  r: 'rectangle',\n  o: 'ellipse',\n  t: 'text',\n  c: 'crop',\n};\n\nconst NUDGE_STEP = 1;\nconst NUDGE_STEP_FAST = 10;\n\nconst isTypingTarget = (target: EventTarget | null): boolean => {\n  if (!(target instanceof HTMLElement)) return false;\n  return target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName);\n};\n\ninterface IAnnotationShortcutsOptions {\n  active: boolean;\n  controller: IAnnotationDocumentController;\n  imageMaxDimension: number;\n  onToolChange: (tool: TAnnotationTool) => void;\n}\n\n/**\n * Capture phase on purpose: Escape must clear the selection without also reaching the dialog's\n * own dismiss handler, which would close the editor on the first press.\n */\nexport const useAnnotationShortcuts = ({\n  active,\n  controller,\n  imageMaxDimension,\n  onToolChange,\n}: IAnnotationShortcutsOptions): void => {\n  useEffect(() => {\n    if (!active) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (isTypingTarget(event.target)) return;\n\n      const isAccelerator = event.metaKey || event.ctrlKey;\n      const key = event.key.toLowerCase();\n\n      if (isAccelerator && key === 'z') {\n        event.preventDefault();\n        if (event.shiftKey) controller.redo();\n        else controller.undo();\n        return;\n      }\n\n      if (isAccelerator && key === 'y') {\n        event.preventDefault();\n        controller.redo();\n        return;\n      }\n\n      if (isAccelerator && key === 'd') {\n        event.preventDefault();\n        controller.duplicateSelected();\n        return;\n      }\n\n      if (isAccelerator) return;\n\n      if (event.key === 'Escape' && controller.selectedId) {\n        event.preventDefault();\n        event.stopPropagation();\n        controller.select(null);\n        return;\n      }\n\n      if ((event.key === 'Delete' || event.key === 'Backspace') && controller.selectedId) {\n        event.preventDefault();\n        controller.removeElement(controller.selectedId);\n        return;\n      }\n\n      if (event.key.startsWith('Arrow') && controller.selectedId) {\n        event.preventDefault();\n        const step = (event.shiftKey ? NUDGE_STEP_FAST : NUDGE_STEP) * Math.max(1, Math.round(imageMaxDimension / 400));\n        const deltaX = event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0;\n        const deltaY = event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0;\n        controller.nudgeSelected(deltaX, deltaY);\n        return;\n      }\n\n      const tool = TOOL_KEYS[key];\n      if (tool) {\n        event.preventDefault();\n        onToolChange(tool);\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown, true);\n    return () => window.removeEventListener('keydown', handleKeyDown, true);\n  }, [active, controller, imageMaxDimension, onToolChange]);\n};\n"],"names":[],"mappings":";AAMA,MAAM,YAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,aAAa;AACnB,MAAM,kBAAkB;AAExB,MAAM,iBAAiB,CAAC,WAAwC;AAC9D,MAAI,EAAE,kBAAkB,aAAc,QAAO;AAC7C,SAAO,OAAO,qBAAqB,CAAC,SAAS,YAAY,QAAQ,EAAE,SAAS,OAAO,OAAO;AAC5F;AAaO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyC;AACvC,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,UAAI,eAAe,MAAM,MAAM,EAAG;AAElC,YAAM,gBAAgB,MAAM,WAAW,MAAM;AAC7C,YAAM,MAAM,MAAM,IAAI,YAAA;AAEtB,UAAI,iBAAiB,QAAQ,KAAK;AAChC,cAAM,eAAA;AACN,YAAI,MAAM,SAAU,YAAW,KAAA;AAAA,wBACf,KAAA;AAChB;AAAA,MACF;AAEA,UAAI,iBAAiB,QAAQ,KAAK;AAChC,cAAM,eAAA;AACN,mBAAW,KAAA;AACX;AAAA,MACF;AAEA,UAAI,iBAAiB,QAAQ,KAAK;AAChC,cAAM,eAAA;AACN,mBAAW,kBAAA;AACX;AAAA,MACF;AAEA,UAAI,cAAe;AAEnB,UAAI,MAAM,QAAQ,YAAY,WAAW,YAAY;AACnD,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,mBAAW,OAAO,IAAI;AACtB;AAAA,MACF;AAEA,WAAK,MAAM,QAAQ,YAAY,MAAM,QAAQ,gBAAgB,WAAW,YAAY;AAClF,cAAM,eAAA;AACN,mBAAW,cAAc,WAAW,UAAU;AAC9C;AAAA,MACF;AAEA,UAAI,MAAM,IAAI,WAAW,OAAO,KAAK,WAAW,YAAY;AAC1D,cAAM,eAAA;AACN,cAAM,QAAQ,MAAM,WAAW,kBAAkB,cAAc,KAAK,IAAI,GAAG,KAAK,MAAM,oBAAoB,GAAG,CAAC;AAC9G,cAAM,SAAS,MAAM,QAAQ,cAAc,CAAC,OAAO,MAAM,QAAQ,eAAe,OAAO;AACvF,cAAM,SAAS,MAAM,QAAQ,YAAY,CAAC,OAAO,MAAM,QAAQ,cAAc,OAAO;AACpF,mBAAW,cAAc,QAAQ,MAAM;AACvC;AAAA,MACF;AAEA,YAAM,OAAO,UAAU,GAAG;AAC1B,UAAI,MAAM;AACR,cAAM,eAAA;AACN,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,eAAe,IAAI;AACtD,WAAO,MAAM,OAAO,oBAAoB,WAAW,eAAe,IAAI;AAAA,EACxE,GAAG,CAAC,QAAQ,YAAY,mBAAmB,YAAY,CAAC;AAC1D;"}

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

@@ -0,0 +1,5 @@
+/**
+ * Drives the touch layout: bigger targets and visible captions, because `ControlledTooltip` never
+ * opens on a touch pointer and an icon-only tool would carry no meaning there.
+ */
+export declare const useCoarsePointer: () => boolean;

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

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+const COARSE_POINTER_QUERY = "(pointer: coarse)";
+const readCoarsePointer = () => {
+  try {
+    return window.matchMedia(COARSE_POINTER_QUERY).matches;
+  } catch {
+    return false;
+  }
+};
+const useCoarsePointer = () => {
+  const [isCoarse, setIsCoarse] = useState(readCoarsePointer);
+  useEffect(() => {
+    const query = window.matchMedia(COARSE_POINTER_QUERY);
+    const handleChange = (event) => setIsCoarse(event.matches);
+    query.addEventListener("change", handleChange);
+    return () => query.removeEventListener("change", handleChange);
+  }, []);
+  return isCoarse;
+};
+export {
+  useCoarsePointer
+};
+//# sourceMappingURL=useCoarsePointer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCoarsePointer.js","sources":["../../../../../src/components/UI/ImageAnnotator/hooks/useCoarsePointer.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst COARSE_POINTER_QUERY = '(pointer: coarse)';\n\nconst readCoarsePointer = (): boolean => {\n  try {\n    return window.matchMedia(COARSE_POINTER_QUERY).matches;\n  } catch {\n    return false;\n  }\n};\n\n/**\n * Drives the touch layout: bigger targets and visible captions, because `ControlledTooltip` never\n * opens on a touch pointer and an icon-only tool would carry no meaning there.\n */\nexport const useCoarsePointer = (): boolean => {\n  const [isCoarse, setIsCoarse] = useState(readCoarsePointer);\n\n  useEffect(() => {\n    const query = window.matchMedia(COARSE_POINTER_QUERY);\n    const handleChange = (event: MediaQueryListEvent) => setIsCoarse(event.matches);\n\n    query.addEventListener('change', handleChange);\n    return () => query.removeEventListener('change', handleChange);\n  }, []);\n\n  return isCoarse;\n};\n"],"names":[],"mappings":";AAEA,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB,MAAe;AACvC,MAAI;AACF,WAAO,OAAO,WAAW,oBAAoB,EAAE;AAAA,EACjD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAMO,MAAM,mBAAmB,MAAe;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,iBAAiB;AAE1D,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,WAAW,oBAAoB;AACpD,UAAM,eAAe,CAAC,UAA+B,YAAY,MAAM,OAAO;AAE9E,UAAM,iBAAiB,UAAU,YAAY;AAC7C,WAAO,MAAM,MAAM,oBAAoB,UAAU,YAAY;AAAA,EAC/D,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}

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

@@ -0,0 +1,2 @@
+/** Konva needs a decoded element, and an inserted image lives as a data URL inside the document. */
+export declare const useHtmlImage: (src: string | null) => HTMLImageElement | null;

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

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+const useHtmlImage = (src) => {
+  const [image, setImage] = useState(null);
+  useEffect(() => {
+    if (!src) {
+      setImage(null);
+      return;
+    }
+    let cancelled = false;
+    const element = new Image();
+    element.onload = () => {
+      if (!cancelled) setImage(element);
+    };
+    element.onerror = () => {
+      if (!cancelled) setImage(null);
+    };
+    element.src = src;
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+  return image;
+};
+export {
+  useHtmlImage
+};
+//# sourceMappingURL=useHtmlImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHtmlImage.js","sources":["../../../../../src/components/UI/ImageAnnotator/hooks/useHtmlImage.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/** Konva needs a decoded element, and an inserted image lives as a data URL inside the document. */\nexport const useHtmlImage = (src: string | null): HTMLImageElement | null => {\n  const [image, setImage] = useState<HTMLImageElement | null>(null);\n\n  useEffect(() => {\n    if (!src) {\n      setImage(null);\n      return;\n    }\n\n    let cancelled = false;\n    const element = new Image();\n\n    element.onload = () => {\n      if (!cancelled) setImage(element);\n    };\n    element.onerror = () => {\n      if (!cancelled) setImage(null);\n    };\n    element.src = src;\n\n    return () => {\n      cancelled = true;\n    };\n  }, [src]);\n\n  return image;\n};\n"],"names":[],"mappings":";AAGO,MAAM,eAAe,CAAC,QAAgD;AAC3E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAkC,IAAI;AAEhE,YAAU,MAAM;AACd,QAAI,CAAC,KAAK;AACR,eAAS,IAAI;AACb;AAAA,IACF;AAEA,QAAI,YAAY;AAChB,UAAM,UAAU,IAAI,MAAA;AAEpB,YAAQ,SAAS,MAAM;AACrB,UAAI,CAAC,UAAW,UAAS,OAAO;AAAA,IAClC;AACA,YAAQ,UAAU,MAAM;AACtB,UAAI,CAAC,UAAW,UAAS,IAAI;AAAA,IAC/B;AACA,YAAQ,MAAM;AAEd,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,SAAO;AACT;"}

package/dist/components/UI/ImageAnnotator/interfaces/annotationDocument.d.ts

@@ -0,0 +1,98 @@
+export type TAnnotationElementType = 'freehand' | 'line' | 'arrow' | 'rectangle' | 'ellipse' | 'text' | 'image';
+export type TAnnotationTool = 'select' | 'freehand' | 'eraser' | 'crop' | TAnnotationElementType;
+export type TAnnotationAlign = 'left' | 'center' | 'right';
+export interface IAnnotationPoint {
+    x: number;
+    y: number;
+}
+export interface IAnnotationSize {
+    width: number;
+    height: number;
+}
+/** Visible region of the base image, in native image pixels. */
+export interface IAnnotationCropRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface IAnnotationElementBase {
+    id: string;
+    rotation: number;
+    opacity: number;
+}
+export interface IAnnotationFreehandElement extends IAnnotationElementBase {
+    type: 'freehand';
+    x: number;
+    y: number;
+    /** Flat `[x0, y0, x1, y1, ...]` in element space, so `x`/`y` stay the drag anchor. */
+    points: Array<number>;
+    stroke: string;
+    strokeWidth: number;
+}
+export interface IAnnotationSegmentElement extends IAnnotationElementBase {
+    type: 'line' | 'arrow';
+    start: IAnnotationPoint;
+    end: IAnnotationPoint;
+    stroke: string;
+    strokeWidth: number;
+}
+export interface IAnnotationShapeElement extends IAnnotationElementBase {
+    type: 'rectangle' | 'ellipse';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    stroke: string;
+    strokeWidth: number;
+    fill: string | null;
+    fillOpacity: number;
+    cornerRadius: number;
+}
+export interface IAnnotationTextElement extends IAnnotationElementBase {
+    type: 'text';
+    x: number;
+    y: number;
+    width: number;
+    text: string;
+    fontSize: number;
+    bold: boolean;
+    italic: boolean;
+    align: TAnnotationAlign;
+    color: string;
+    background: string | null;
+    backgroundOpacity: number;
+    padding: number;
+    cornerRadius: number;
+}
+export interface IAnnotationImageElement extends IAnnotationElementBase {
+    type: 'image';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    src: string;
+    naturalWidth: number;
+    naturalHeight: number;
+    cornerRadius: number;
+    stroke: string | null;
+    strokeWidth: number;
+    shadow: boolean;
+}
+export type TAnnotationElement = IAnnotationFreehandElement | IAnnotationSegmentElement | IAnnotationShapeElement | IAnnotationTextElement | IAnnotationImageElement;
+export declare const ANNOTATION_DOCUMENT_VERSION = 1;
+export interface IAnnotationDocument {
+    version: number;
+    /** Element coordinates live in this space, never in screen pixels. */
+    width: number;
+    height: number;
+    elements: Array<TAnnotationElement>;
+    /** `null` shows the whole image; elements keep full-image coordinates either way. */
+    crop?: IAnnotationCropRect | null;
+}
+export type TAnnotationElementPatch = Partial<Omit<TAnnotationElement, 'id' | 'type'>>;
+export declare const isStrokeElement: (element: TAnnotationElement) => element is IAnnotationFreehandElement | IAnnotationSegmentElement | IAnnotationShapeElement;
+export declare const isFillableElement: (element: TAnnotationElement) => element is IAnnotationShapeElement;
+export declare const isSegmentElement: (element: TAnnotationElement) => element is IAnnotationSegmentElement;
+export declare const isBoxElement: (element: TAnnotationElement) => element is IAnnotationShapeElement | IAnnotationImageElement;
+export {};

package/dist/components/UI/ImageAnnotator/interfaces/annotationDocument.js

@@ -0,0 +1,13 @@
+const ANNOTATION_DOCUMENT_VERSION = 1;
+const isStrokeElement = (element) => element.type !== "text" && element.type !== "image";
+const isFillableElement = (element) => element.type === "rectangle" || element.type === "ellipse";
+const isSegmentElement = (element) => element.type === "line" || element.type === "arrow";
+const isBoxElement = (element) => element.type === "rectangle" || element.type === "ellipse" || element.type === "image";
+export {
+  ANNOTATION_DOCUMENT_VERSION,
+  isBoxElement,
+  isFillableElement,
+  isSegmentElement,
+  isStrokeElement
+};
+//# sourceMappingURL=annotationDocument.js.map

package/dist/components/UI/ImageAnnotator/interfaces/annotationDocument.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotationDocument.js","sources":["../../../../../src/components/UI/ImageAnnotator/interfaces/annotationDocument.ts"],"sourcesContent":["export type TAnnotationElementType = 'freehand' | 'line' | 'arrow' | 'rectangle' | 'ellipse' | 'text' | 'image';\n\nexport type TAnnotationTool = 'select' | 'freehand' | 'eraser' | 'crop' | TAnnotationElementType;\n\nexport type TAnnotationAlign = 'left' | 'center' | 'right';\n\nexport interface IAnnotationPoint {\n  x: number;\n  y: number;\n}\n\nexport interface IAnnotationSize {\n  width: number;\n  height: number;\n}\n\n/** Visible region of the base image, in native image pixels. */\nexport interface IAnnotationCropRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ninterface IAnnotationElementBase {\n  id: string;\n  rotation: number;\n  opacity: number;\n}\n\nexport interface IAnnotationFreehandElement extends IAnnotationElementBase {\n  type: 'freehand';\n  x: number;\n  y: number;\n  /** Flat `[x0, y0, x1, y1, ...]` in element space, so `x`/`y` stay the drag anchor. */\n  points: Array<number>;\n  stroke: string;\n  strokeWidth: number;\n}\n\nexport interface IAnnotationSegmentElement extends IAnnotationElementBase {\n  type: 'line' | 'arrow';\n  start: IAnnotationPoint;\n  end: IAnnotationPoint;\n  stroke: string;\n  strokeWidth: number;\n}\n\nexport interface IAnnotationShapeElement extends IAnnotationElementBase {\n  type: 'rectangle' | 'ellipse';\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  stroke: string;\n  strokeWidth: number;\n  fill: string | null;\n  fillOpacity: number;\n  cornerRadius: number;\n}\n\nexport interface IAnnotationTextElement extends IAnnotationElementBase {\n  type: 'text';\n  x: number;\n  y: number;\n  width: number;\n  text: string;\n  fontSize: number;\n  bold: boolean;\n  italic: boolean;\n  align: TAnnotationAlign;\n  color: string;\n  background: string | null;\n  backgroundOpacity: number;\n  padding: number;\n  cornerRadius: number;\n}\n\nexport interface IAnnotationImageElement extends IAnnotationElementBase {\n  type: 'image';\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  src: string;\n  naturalWidth: number;\n  naturalHeight: number;\n  cornerRadius: number;\n  stroke: string | null;\n  strokeWidth: number;\n  shadow: boolean;\n}\n\nexport type TAnnotationElement =\n  | IAnnotationFreehandElement\n  | IAnnotationSegmentElement\n  | IAnnotationShapeElement\n  | IAnnotationTextElement\n  | IAnnotationImageElement;\n\nexport const ANNOTATION_DOCUMENT_VERSION = 1;\n\nexport interface IAnnotationDocument {\n  version: number;\n  /** Element coordinates live in this space, never in screen pixels. */\n  width: number;\n  height: number;\n  elements: Array<TAnnotationElement>;\n  /** `null` shows the whole image; elements keep full-image coordinates either way. */\n  crop?: IAnnotationCropRect | null;\n}\n\nexport type TAnnotationElementPatch = Partial<Omit<TAnnotationElement, 'id' | 'type'>>;\n\nexport const isStrokeElement = (\n  element: TAnnotationElement,\n): element is IAnnotationFreehandElement | IAnnotationSegmentElement | IAnnotationShapeElement =>\n  element.type !== 'text' && element.type !== 'image';\n\nexport const isFillableElement = (element: TAnnotationElement): element is IAnnotationShapeElement =>\n  element.type === 'rectangle' || element.type === 'ellipse';\n\nexport const isSegmentElement = (element: TAnnotationElement): element is IAnnotationSegmentElement =>\n  element.type === 'line' || element.type === 'arrow';\n\nexport const isBoxElement = (\n  element: TAnnotationElement,\n): element is IAnnotationShapeElement | IAnnotationImageElement =>\n  element.type === 'rectangle' || element.type === 'ellipse' || element.type === 'image';\n"],"names":[],"mappings":"AAoGO,MAAM,8BAA8B;AAcpC,MAAM,kBAAkB,CAC7B,YAEA,QAAQ,SAAS,UAAU,QAAQ,SAAS;AAEvC,MAAM,oBAAoB,CAAC,YAChC,QAAQ,SAAS,eAAe,QAAQ,SAAS;AAE5C,MAAM,mBAAmB,CAAC,YAC/B,QAAQ,SAAS,UAAU,QAAQ,SAAS;AAEvC,MAAM,eAAe,CAC1B,YAEA,QAAQ,SAAS,eAAe,QAAQ,SAAS,aAAa,QAAQ,SAAS;"}

package/dist/components/UI/ImageMaskPainter/index.d.ts

@@ -0,0 +1,24 @@
+export type { TMaskBrushMode } from './maskStrokes';
+/** Brush diameter in on-screen pixels; converted to natural pixels per stroke. */
+export declare const IMAGE_MASK_BRUSH_MIN = 8;
+export declare const IMAGE_MASK_BRUSH_MAX = 96;
+export interface IImageMaskPainterProps {
+    imageUrl: string;
+    /**
+     * Called after every stroke, undo and clear with a PNG at the image's natural resolution
+     * (white = painted, black = untouched), or null when nothing is painted.
+     */
+    onMaskChange: (mask: File | null) => void;
+    disabled?: boolean;
+    maskFileName?: string;
+    /**
+     * The tallest the image may get, as any CSS length. The image fills the available width up to
+     * this height, scaled up when its natural size is smaller.
+     */
+    maxHeight?: string;
+    /** Sizes the image with classes instead, at its natural size at most. Turns the fill off. */
+    imageClassName?: string;
+    className?: string;
+}
+declare const ImageMaskPainter: React.FC<IImageMaskPainterProps>;
+export default ImageMaskPainter;