@annotorious/annotorious 3.0.4 → 3.0.6

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export * from './Annotorious';
 export * from './AnnotoriousOpts';
 export * from './keyboardCommands';
 export type { Annotation, AnnotationBody, AnnotationTarget, Annotator, AnnotatorState, Appearance, AppearanceProvider, Color, DrawingStyle, Filter, FormatAdapter, HoverState, LifecycleEvents, ParseResult, PresentUser, Selection, SelectionState, Store, StoreChangeEvent, StoreObserver, User, W3CAnnotation, W3CAnnotationBody, W3CAnnotationTarget } from '@annotorious/core';
+export { createBody, defaultColorProvider, UserSelectAction } from '@annotorious/core';

package/dist/state/ImageAnnotationStore.d.ts

@@ -5,6 +5,6 @@ export type ImageAnnotationStore<I extends Annotation> = Store<I> & {
     getIntersecting(x: number, y: number, width: number, height: number): ImageAnnotation[];
 };
 export type SvelteImageAnnotationStore<I extends Annotation = Annotation> = SvelteStore<I> & ImageAnnotationStore<I>;
-export type SvelteImageAnnotatorState<I extends Annotation = Annotation> = SvelteAnnotatorState<I> & {
+export type SvelteImageAnnotatorState<I extends Annotation = Annotation, E extends unknown = Annotation> = SvelteAnnotatorState<I, E> & {
     store: SvelteImageAnnotationStore<I>;
 };

package/dist/state/ImageAnnotatorState.d.ts

@@ -2,10 +2,10 @@ import { ImageAnnotation } from '../model';
 import { AnnotoriousOpts } from '../AnnotoriousOpts';
 import { Annotation, AnnotatorState, HoverState, SelectionState } from '@annotorious/core';
 import { ImageAnnotationStore, SvelteImageAnnotatorState } from './ImageAnnotationStore';
-export type ImageAnnotatorState<I extends Annotation = ImageAnnotation> = AnnotatorState<I> & {
+export type ImageAnnotatorState<I extends Annotation = ImageAnnotation, E extends unknown = ImageAnnotation> = AnnotatorState<I, E> & {
     store: ImageAnnotationStore<I>;
-    selection: SelectionState<ImageAnnotation>;
-    hover: HoverState<ImageAnnotation>;
+    selection: SelectionState<I, E>;
+    hover: HoverState<I>;
 };
-export declare const createImageAnnotatorState: <I extends Annotation, E extends unknown>(opts: AnnotoriousOpts<I, E>) => ImageAnnotatorState<I>;
-export declare const createSvelteImageAnnotatorState: <I extends Annotation, E extends unknown>(opts: AnnotoriousOpts<I, E>) => SvelteImageAnnotatorState<I>;
+export declare const createImageAnnotatorState: <I extends Annotation, E extends unknown>(opts: AnnotoriousOpts<I, E>) => ImageAnnotatorState<I, E>;
+export declare const createSvelteImageAnnotatorState: <I extends Annotation, E extends unknown>(opts: AnnotoriousOpts<I, E>) => SvelteImageAnnotatorState<I, E>;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
   "homepage": "https://annotorious.dev",
+  "funding": "https://steadyhq.com/rainer-simon",
   "type": "module",
   "repository": {
     "type": "git",
@@ -42,13 +43,13 @@
     "jsdom": "^25.0.0",
     "svelte": "^4.2.19",
     "svelte-preprocess": "^6.0.2",
-    "typescript": "5.5.4",
-    "vite": "^5.4.2",
-    "vite-plugin-dts": "^4.1.0",
-    "vitest": "^2.0.5"
+    "typescript": "5.6.2",
+    "vite": "^5.4.6",
+    "vite-plugin-dts": "^4.2.1",
+    "vitest": "^2.1.1"
   },
   "dependencies": {
-    "@annotorious/core": "3.0.4",
+    "@annotorious/core": "3.0.6",
     "rbush": "^4.0.1",
     "uuid": "^10.0.0"
   }

package/src/Annotorious.ts

@@ -21,6 +21,12 @@ export interface ImageAnnotator<I extends Annotation = ImageAnnotation, E extend
 
   element: HTMLDivElement;
 
+  cancelDrawing(): void;
+
+  getDrawingTool(): string | undefined;
+
+  isDrawingEnabled(): boolean;
+
   listDrawingTools(): string[];
 
   registerDrawingTool(name: string, tool: typeof SvelteComponent, opts?: DrawingToolOpts): void;
@@ -108,6 +114,11 @@ export const createImageAnnotator = <I extends Annotation = ImageAnnotation, E e
   // Most of the external API functions are covered in the base annotator
   const base = createBaseAnnotator<I, E>(state, undoStack, opts.adapter);
 
+  const cancelDrawing = () => {
+    annotationLayer.$set({ drawingEnabled: false });
+    setTimeout(() => annotationLayer.$set({ drawingEnabled: true }), 1);
+  }
+
   const destroy = () => {
     // Destroy Svelte annotation layer
     annotationLayer.$destroy();
@@ -121,8 +132,14 @@ export const createImageAnnotator = <I extends Annotation = ImageAnnotation, E e
     undoStack.destroy();
   }
 
+  const getDrawingTool = () =>
+    annotationLayer.getDrawingTool();
+
   const getUser = () => currentUser;
 
+  const isDrawingEnabled = () => 
+    annotationLayer.isDrawingEnabled();
+
   const registerDrawingTool = (name: string, tool: typeof SvelteComponent, opts?: DrawingToolOpts) =>
     registerTool(name, tool, opts);
 
@@ -162,8 +179,11 @@ export const createImageAnnotator = <I extends Annotation = ImageAnnotation, E e
 
   return {
     ...base,
+    cancelDrawing,
     destroy,
+    getDrawingTool,
     getUser,
+    isDrawingEnabled,
     listDrawingTools,
     on: lifecycle.on,
     off: lifecycle.off,

package/src/AnnotoriousOpts.ts

@@ -13,7 +13,7 @@ export interface AnnotoriousOpts<I extends Annotation = ImageAnnotation, E exten
   // 'drag': starts drawing on drag, single click always selects
   drawingMode?: DrawingMode;
 
-  userSelectAction?: UserSelectActionExpression<I>;
+  userSelectAction?: UserSelectActionExpression<E>;
 
   style?: DrawingStyleExpression<ImageAnnotation>;
 

package/src/annotation/SVGAnnotationLayer.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="T extends Annotation">
+<script lang="ts" generics="I extends Annotation, E extends unknown">
   import { SvelteComponent, onMount } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
   import type { Annotation, DrawingStyleExpression, StoreChangeEvent, User } from '@annotorious/core';
@@ -17,12 +17,16 @@
   export let drawingEnabled: boolean;
   export let image: HTMLImageElement | HTMLCanvasElement;
   export let preferredDrawingMode: DrawingMode;
-  export let state: SvelteImageAnnotatorState<T>;
+  export let state: SvelteImageAnnotatorState<I, E>;
   export let style: DrawingStyleExpression<ImageAnnotation> | undefined = undefined;
   export let toolName: string = listDrawingTools()[0];
   export let user: User;
   export let visible = true;
 
+  /** API methods */
+  export const getDrawingTool = () => toolName;
+  export const isDrawingEnabled = () => drawingEnabled;
+
   $: ({ tool, opts } = getTool(toolName) || { tool: undefined, opts: undefined });
 
   $: drawingMode = opts?.drawingMode || preferredDrawingMode;
@@ -44,7 +48,7 @@
 
   $: ({ onPointerDown, onPointerUp } = addEventListeners(svgEl, store));
 
-  let storeObserver: (event: StoreChangeEvent<T>) => void | undefined;
+  let storeObserver: (event: StoreChangeEvent<I>) => void | undefined;
 
   let editableAnnotations: ImageAnnotation[] | undefined;
 
@@ -67,7 +71,7 @@
         .filter(a => a && isImageAnnotation(a));
 
       // Track updates on the editable annotations
-      storeObserver = (event: StoreChangeEvent<T>) => {
+      storeObserver = (event: StoreChangeEvent<I>) => {
         const { updated } = event.changes;
         editableAnnotations = updated?.map(change => change.newValue) as unknown as ImageAnnotation[];
       }   
@@ -92,7 +96,7 @@
       }
     };
 
-    store.addAnnotation(annotation as unknown as Partial<T>);
+    store.addAnnotation(annotation as unknown as Partial<I>);
 
     selection.setSelected(annotation.id);
   }

package/src/index.ts

@@ -34,3 +34,9 @@ export type {
   W3CAnnotationBody,
   W3CAnnotationTarget
 } from '@annotorious/core';
+
+export { 
+  createBody,
+  defaultColorProvider,
+  UserSelectAction
+} from '@annotorious/core'; 

package/src/state/ImageAnnotationStore.ts

@@ -11,7 +11,7 @@ export type ImageAnnotationStore<I extends Annotation> = Store<I> & {
 
 export type SvelteImageAnnotationStore<I extends Annotation = Annotation> = SvelteStore<I> & ImageAnnotationStore<I>;
 
-export type SvelteImageAnnotatorState<I extends Annotation = Annotation> = SvelteAnnotatorState<I> & {
+export type SvelteImageAnnotatorState<I extends Annotation = Annotation, E extends unknown = Annotation> = SvelteAnnotatorState<I, E> & {
 
   store: SvelteImageAnnotationStore<I>;
 

package/src/state/ImageAnnotatorState.ts

@@ -20,25 +20,25 @@ import type {
   SvelteImageAnnotatorState
 } from './ImageAnnotationStore';
 
-export type ImageAnnotatorState<I extends Annotation = ImageAnnotation> = AnnotatorState<I> & {
+export type ImageAnnotatorState<I extends Annotation = ImageAnnotation, E extends unknown = ImageAnnotation> = AnnotatorState<I, E> & {
 
   store: ImageAnnotationStore<I>;
 
-  selection: SelectionState<ImageAnnotation>;
+  selection: SelectionState<I, E>;
 
-  hover: HoverState<ImageAnnotation>;
+  hover: HoverState<I>;
 
 }
 
 export const createImageAnnotatorState = <I extends Annotation, E extends unknown> (
   opts: AnnotoriousOpts<I, E>
-): ImageAnnotatorState<I> => {
+): ImageAnnotatorState<I, E> => {
 
   const store = createStore<I>();
 
   const tree = createSpatialTree();
 
-  const selection = createSelectionState<I>(store, opts.userSelectAction);
+  const selection = createSelectionState<I, E>(store, opts.userSelectAction, opts.adapter);
 
   const hover = createHoverState(store);
 
@@ -70,15 +70,15 @@ export const createImageAnnotatorState = <I extends Annotation, E extends unknow
     selection,
     hover,
     viewport
-  } as ImageAnnotatorState<I>;
+  } as ImageAnnotatorState<I, E>;
 
 }
 
 export const createSvelteImageAnnotatorState = <I extends Annotation, E extends unknown>(  
   opts: AnnotoriousOpts<I, E>
-): SvelteImageAnnotatorState<I> => {
+): SvelteImageAnnotatorState<I, E> => {
 
-  const state = createImageAnnotatorState(opts);
+  const state = createImageAnnotatorState<I, E>(opts);
   
   return {
     ...state,