@annotorious/annotorious 3.0.0 → 3.0.2

package/dist/model/core/ImageAnnotation.d.ts

@@ -6,3 +6,5 @@ export interface ImageAnnotation extends Annotation {
 export interface ImageAnnotationTarget extends AnnotationTarget {
     selector: Shape;
 }
+export declare const isImageAnnotation: <T extends Annotation>(a: T | ImageAnnotation) => a is ImageAnnotation;
+export declare const isImageAnnotationTarget: <T extends AnnotationTarget>(t: T | ImageAnnotationTarget) => t is ImageAnnotationTarget;

package/dist/state/ImageAnnotationStore.d.ts

@@ -1,10 +1,10 @@
-import { Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
+import { Annotation, Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
 import { ImageAnnotation } from '../model';
-export type ImageAnnotationStore = Store<ImageAnnotation> & {
+export type ImageAnnotationStore<I extends Annotation> = Store<I> & {
     getAt(x: number, y: number): ImageAnnotation | undefined;
     getIntersecting(x: number, y: number, width: number, height: number): ImageAnnotation[];
 };
-export type SvelteImageAnnotationStore = SvelteStore<ImageAnnotation> & ImageAnnotationStore;
-export type SvelteImageAnnotatorState = SvelteAnnotatorState<ImageAnnotation> & {
-    store: SvelteImageAnnotationStore;
+export type SvelteImageAnnotationStore<I extends Annotation = Annotation> = SvelteStore<I> & ImageAnnotationStore<I>;
+export type SvelteImageAnnotatorState<I extends Annotation = Annotation> = SvelteAnnotatorState<I> & {
+    store: SvelteImageAnnotationStore<I>;
 };

package/dist/state/ImageAnnotatorState.d.ts

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

package/dist/state/spatialTree.d.ts

@@ -1,4 +1,5 @@
 import { ImageAnnotationTarget } from '../model';
+import { AnnotationTarget } from '@annotorious/core';
 interface IndexedTarget {
     minX: number;
     minY: number;
@@ -11,10 +12,10 @@ export declare const createSpatialTree: () => {
     clear: () => void;
     getAt: (x: number, y: number) => ImageAnnotationTarget | undefined;
     getIntersecting: (x: number, y: number, width: number, height: number) => ImageAnnotationTarget[];
-    insert: (target: ImageAnnotationTarget) => void;
-    remove: (target: ImageAnnotationTarget) => void;
-    set: (targets: ImageAnnotationTarget[], replace?: boolean) => void;
+    insert: (target: AnnotationTarget) => void;
+    remove: (target: AnnotationTarget) => void;
+    set: (targets: AnnotationTarget[], replace?: boolean) => void;
     size: () => number;
-    update: (previous: ImageAnnotationTarget, updated: ImageAnnotationTarget) => void;
+    update: (previous: AnnotationTarget, updated: AnnotationTarget) => void;
 };
 export {};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "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.github.io",
+  "homepage": "https://annotorious.dev",
   "type": "module",
   "repository": {
     "type": "git",
@@ -48,7 +48,7 @@
     "vitest": "^2.0.5"
   },
   "dependencies": {
-    "@annotorious/core": "3.0.0",
+    "@annotorious/core": "3.0.2",
     "rbush": "^4.0.1",
     "uuid": "^10.0.0"
   }

package/src/Annotorious.ts

@@ -1,6 +1,6 @@
 import type { SvelteComponent } from 'svelte';
 import { UserSelectAction } from '@annotorious/core';
-import type { Annotator, DrawingStyleExpression, Filter, User } from '@annotorious/core';
+import type { Annotation, Annotator, DrawingStyleExpression, Filter, User } from '@annotorious/core';
 import { createAnonymousGuest, createBaseAnnotator, createLifecycleObserver, createUndoStack } from '@annotorious/core';
 import { registerEditor } from './annotation/editors';
 import { getTool, registerTool, listDrawingTools, type DrawingTool } from './annotation/tools';
@@ -17,7 +17,7 @@ import './Annotorious.css';
 import './themes/dark/index.css';
 import './themes/light/index.css';
 
-export interface ImageAnnotator<E extends unknown = ImageAnnotation> extends Annotator<ImageAnnotation, E> { 
+export interface ImageAnnotator<I extends Annotation = ImageAnnotation, E extends unknown = ImageAnnotation> extends Annotator<I, E> { 
 
   element: HTMLDivElement;
 
@@ -35,10 +35,10 @@ export interface ImageAnnotator<E extends unknown = ImageAnnotation> extends Ann
 
 }
 
-export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
+export const createImageAnnotator = <I extends Annotation = ImageAnnotation, E extends unknown = ImageAnnotation>(
   image: string | HTMLImageElement | HTMLCanvasElement, 
-  options: AnnotoriousOpts<ImageAnnotation, E> = {}
-): ImageAnnotator<E> => {
+  options: AnnotoriousOpts<I, E> = {}
+): ImageAnnotator<I, E> => {
 
   if (!image)
     throw 'Missing argument: image';
@@ -47,20 +47,20 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     typeof image === 'string' ? document.getElementById(image) : image
   ) as HTMLImageElement | HTMLCanvasElement;
 
-  const opts = fillDefaults<ImageAnnotation, E>(options, {
+  const opts = fillDefaults<I, E>(options, {
     drawingEnabled: true,
     drawingMode: 'drag',
     userSelectAction: UserSelectAction.EDIT,
     theme: 'light'
   });
 
-  const state = createSvelteImageAnnotatorState(opts);
+  const state = createSvelteImageAnnotatorState<I, E>(opts);
 
   const { selection, store } = state;
 
   const undoStack = createUndoStack(store);
 
-  const lifecycle = createLifecycleObserver<ImageAnnotation, E>(
+  const lifecycle = createLifecycleObserver<I, E>(
     state, undoStack, opts.adapter, opts.autoSave
   );
 
@@ -87,13 +87,13 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
       drawingEnabled: Boolean(opts.drawingEnabled), 
       image: img, 
       preferredDrawingMode: opts.drawingMode!,
-      state, 
+      state: state, 
       style: opts.style, 
       user: currentUser
     }
   });
 
-  annotationLayer.$on('click', (evt: CustomEvent<SVGAnnotationLayerPointerEvent>) => {
+  annotationLayer.$on('click', (evt: CustomEvent<SVGAnnotationLayerPointerEvent<I>>) => {
     const { originalEvent, annotation } = evt.detail;
     if (annotation)
       selection.userSelect(annotation.id, originalEvent);
@@ -106,7 +106,7 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
   /******++++++*************/
 
   // Most of the external API functions are covered in the base annotator
-  const base = createBaseAnnotator<ImageAnnotation, E>(state, undoStack, opts.adapter);
+  const base = createBaseAnnotator<I, E>(state, undoStack, opts.adapter);
 
   const destroy = () => {
     // Destroy Svelte annotation layer
@@ -146,8 +146,8 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     console.warn('Filter not implemented yet');
   }
 
-  const setStyle = (style: DrawingStyleExpression<ImageAnnotation> | undefined) =>
-    annotationLayer.$set({ style });
+  const setStyle = (style: DrawingStyleExpression<I> | undefined) =>
+    annotationLayer.$set({ style: style as DrawingStyleExpression<ImageAnnotation> });
 
   const setTheme = (theme: Theme) => _setTheme(img, container, theme);
   

package/src/AnnotoriousOpts.ts

@@ -25,7 +25,7 @@ export type DrawingMode = 'click' | 'drag';
 
 export type Theme = 'dark' | 'light' | 'auto';
 
-export const fillDefaults = <I extends ImageAnnotation = ImageAnnotation, E extends unknown = ImageAnnotation> (
+export const fillDefaults = <I extends Annotation = ImageAnnotation, E extends unknown = ImageAnnotation> (
   opts: AnnotoriousOpts<I, E>,
   defaults: AnnotoriousOpts<I, E>
 ): AnnotoriousOpts<I, E> => ({

package/src/annotation/SVGAnnotationLayer.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
+<script lang="ts" generics="T extends Annotation">
   import { SvelteComponent, onMount } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
-  import type { DrawingStyleExpression, StoreChangeEvent, User } from '@annotorious/core';
-  import { ShapeType } from '../model';
+  import type { Annotation, DrawingStyleExpression, StoreChangeEvent, User } from '@annotorious/core';
+  import { isImageAnnotation, ShapeType } from '../model';
   import type { ImageAnnotation, Shape} from '../model';
   import { getEditor as _getEditor, EditorMount } from './editors';
   import { Ellipse, Polygon, Rectangle} from './shapes';
@@ -17,7 +17,7 @@
   export let drawingEnabled: boolean;
   export let image: HTMLImageElement | HTMLCanvasElement;
   export let preferredDrawingMode: DrawingMode;
-  export let state: SvelteImageAnnotatorState;
+  export let state: SvelteImageAnnotatorState<T>;
   export let style: DrawingStyleExpression<ImageAnnotation> | undefined = undefined;
   export let toolName: string = listDrawingTools()[0];
   export let user: User;
@@ -44,7 +44,7 @@
 
   $: ({ onPointerDown, onPointerUp } = addEventListeners(svgEl, store));
 
-  let storeObserver: (event: StoreChangeEvent<ImageAnnotation>) => void | undefined;
+  let storeObserver: (event: StoreChangeEvent<T>) => void | undefined;
 
   let editableAnnotations: ImageAnnotation[] | undefined;
 
@@ -62,12 +62,14 @@
 
     if (editableIds.length > 0) {
       // Resolve selected IDs from the store
-      editableAnnotations = editableIds.map(id => store.getAnnotation(id)!).filter(Boolean);
+      editableAnnotations = editableIds
+        .map(id => store.getAnnotation(id)!)
+        .filter(a => a && isImageAnnotation(a));
 
       // Track updates on the editable annotations
-      storeObserver = (event: StoreChangeEvent<ImageAnnotation>) => {
+      storeObserver = (event: StoreChangeEvent<T>) => {
         const { updated } = event.changes;
-        editableAnnotations = updated?.map(change => change.newValue);
+        editableAnnotations = updated?.map(change => change.newValue) as unknown as ImageAnnotation[];
       }   
       
       store.observe(storeObserver, { annotations: editableIds });
@@ -76,7 +78,7 @@
     }
   }
 
-  const onSelectionCreated = <T extends Shape>(evt: CustomEvent<T>) => {
+  const onSelectionCreated = <S extends Shape>(evt: CustomEvent<S>) => {
     const id = uuidv4();
 
     const annotation: ImageAnnotation = {
@@ -90,7 +92,7 @@
       }
     };
 
-    store.addAnnotation(annotation);
+    store.addAnnotation(annotation as unknown as Partial<T>);
 
     selection.setSelected(annotation.id);
   }
@@ -143,8 +145,8 @@
   on:pointermove={onPointerMove}>
   
   <g>
-    {#each $store as annotation}
-      {#if !isEditable(annotation)}
+    {#each $store.filter(a => isImageAnnotation(a)) as annotation}
+      {#if isImageAnnotation(annotation) && !isEditable(annotation)}
         {@const selector = annotation.target.selector}
         {#key annotation.id}
           {#if (selector?.type === ShapeType.ELLIPSE)}

package/src/annotation/SVGAnnotationLayerPointerEvent.ts

@@ -1,20 +1,20 @@
 import { createEventDispatcher } from 'svelte';
 import type { SvelteImageAnnotationStore } from '../state';
-import type { ImageAnnotation } from '../model';
+import type { Annotation } from '@annotorious/core';
 
-export interface SVGAnnotationLayerPointerEvent {
+export interface SVGAnnotationLayerPointerEvent<T extends Annotation> {
     
   originalEvent: PointerEvent;
   
-  annotation?: ImageAnnotation;
+  annotation?: T;
 
 }
 
 // Maximum amount of ms between pointer down and up to make it a click
 const MAX_CLICK_DURATION = 250;
 
-export const addEventListeners = (svg: SVGSVGElement, store: SvelteImageAnnotationStore) => {
-  const dispatch = createEventDispatcher<{ click: SVGAnnotationLayerPointerEvent}>();
+export const addEventListeners = <T extends Annotation>(svg: SVGSVGElement, store: SvelteImageAnnotationStore<T>) => {
+  const dispatch = createEventDispatcher<{ click: SVGAnnotationLayerPointerEvent<T> }>();
 
   let lastPointerDown: number;
 
@@ -27,7 +27,7 @@ export const addEventListeners = (svg: SVGSVGElement, store: SvelteImageAnnotati
     if (duration < MAX_CLICK_DURATION) {
       const { x, y } = getSVGPoint(evt, svg);
 
-      const annotation = store.getAt(x, y);
+      const annotation = store.getAt(x, y) as T | undefined;
 
       if (annotation)
         dispatch('click', { originalEvent: evt, annotation });

package/src/model/core/ImageAnnotation.ts

@@ -11,4 +11,15 @@ export interface ImageAnnotationTarget extends AnnotationTarget {
 
   selector: Shape
 
-}
+}
+
+export const isImageAnnotation = <T extends Annotation>(
+  a: T | ImageAnnotation
+): a is ImageAnnotation =>
+  isImageAnnotationTarget(a.target);
+
+ export const isImageAnnotationTarget = <T extends AnnotationTarget>(
+  t: T | ImageAnnotationTarget
+): t is ImageAnnotationTarget =>
+  t?.annotation !== undefined &&
+ (t as ImageAnnotationTarget)?.selector?.geometry?.bounds !== undefined;

package/src/state/ImageAnnotationStore.ts

@@ -1,7 +1,7 @@
-import type { Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
+import type { Annotation, Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
 import type { ImageAnnotation } from '../model';
 
-export type ImageAnnotationStore = Store<ImageAnnotation> & {
+export type ImageAnnotationStore<I extends Annotation> = Store<I> & {
 
   getAt(x: number, y: number): ImageAnnotation | undefined;
 
@@ -9,10 +9,10 @@ export type ImageAnnotationStore = Store<ImageAnnotation> & {
 
 }
 
-export type SvelteImageAnnotationStore = SvelteStore<ImageAnnotation> & ImageAnnotationStore;
+export type SvelteImageAnnotationStore<I extends Annotation = Annotation> = SvelteStore<I> & ImageAnnotationStore<I>;
 
-export type SvelteImageAnnotatorState = SvelteAnnotatorState<ImageAnnotation> & {
+export type SvelteImageAnnotatorState<I extends Annotation = Annotation> = SvelteAnnotatorState<I> & {
 
-  store: SvelteImageAnnotationStore;
+  store: SvelteImageAnnotationStore<I>;
 
 }

package/src/state/ImageAnnotatorState.ts

@@ -4,6 +4,7 @@ import { createSpatialTree } from './spatialTree';
 import { 
   createViewportState,
   toSvelteStore,
+  type Annotation,
   type AnnotatorState, 
   type HoverState,
   type SelectionState
@@ -19,9 +20,9 @@ import type {
   SvelteImageAnnotatorState
 } from './ImageAnnotationStore';
 
-export type ImageAnnotatorState<T extends ImageAnnotationStore = ImageAnnotationStore> = AnnotatorState<ImageAnnotation> & {
+export type ImageAnnotatorState<I extends Annotation> = AnnotatorState<I> & {
 
-  store: T;
+  store: ImageAnnotationStore<I>;
 
   selection: SelectionState<ImageAnnotation>;
 
@@ -29,16 +30,15 @@ export type ImageAnnotatorState<T extends ImageAnnotationStore = ImageAnnotation
 
 }
 
-export const createImageAnnotatorState = <E extends unknown>(
-  opts: AnnotoriousOpts<ImageAnnotation, E>
-): ImageAnnotatorState<ImageAnnotationStore> => {
+export const createImageAnnotatorState = <I extends Annotation, E extends unknown> (
+  opts: AnnotoriousOpts<I, E>
+): ImageAnnotatorState<I> => {
 
-  const store = createStore<ImageAnnotation>();
+  const store = createStore<I>();
 
   const tree = createSpatialTree();
 
-  const selection = createSelectionState(store);
-  selection.setUserSelectAction(opts.userSelectAction);
+  const selection = createSelectionState<I>(store, opts.userSelectAction);
 
   const hover = createHoverState(store);
 
@@ -49,40 +49,40 @@ export const createImageAnnotatorState = <E extends unknown>(
     
     (changes.deleted || []).forEach(a => tree.remove(a.target as ImageAnnotationTarget));
     
-    (changes.updated || []).forEach(({ oldValue, newValue }) =>
+    (changes.updated || []).forEach(({ oldValue, newValue }) => 
       tree.update(oldValue.target, newValue.target));
   });
 
   const getAt = (x: number, y: number): ImageAnnotation | undefined => {
     const target = tree.getAt(x, y);
-    return target ? store.getAnnotation(target.annotation) : undefined; 
+    return target ? store.getAnnotation(target.annotation) as unknown as ImageAnnotation : undefined; 
   }
 
   const getIntersecting = (x: number, y: number, width: number, height: number) =>
-    tree.getIntersecting(x, y, width, height).map(target => store.getAnnotation(target.annotation));
+    tree.getIntersecting(x, y, width, height).map(target => store.getAnnotation(target.annotation) as unknown as ImageAnnotation);
 
   return {
     store: {
       ...store,
       getAt,
       getIntersecting
-    } as ImageAnnotationStore,
+    },
     selection,
     hover,
     viewport
-  }
+  } as ImageAnnotatorState<I>;
 
 }
 
-export const createSvelteImageAnnotatorState = <E extends unknown>(  
-  opts: AnnotoriousOpts<ImageAnnotation, E>
-): SvelteImageAnnotatorState => {
+export const createSvelteImageAnnotatorState = <I extends Annotation, E extends unknown>(  
+  opts: AnnotoriousOpts<I, E>
+): SvelteImageAnnotatorState<I> => {
 
   const state = createImageAnnotatorState(opts);
   
   return {
     ...state,
-    store: toSvelteStore(state.store) as SvelteImageAnnotationStore
+    store: toSvelteStore(state.store) as SvelteImageAnnotationStore<I>
   }
 
 }

package/src/state/spatialTree.ts

@@ -1,6 +1,7 @@
 import RBush from 'rbush';
-import { ShapeType,computeArea, intersects } from '../model';
+import { ShapeType,computeArea, intersects, isImageAnnotationTarget } from '../model';
 import type { ImageAnnotationTarget } from '../model';
+import type { AnnotationTarget } from '@annotorious/core';
 
 interface IndexedTarget {
 
@@ -29,7 +30,9 @@ export const createSpatialTree = () => {
     index.clear();
   }
 
-  const insert = (target: ImageAnnotationTarget) => {
+  const insert = (target: AnnotationTarget) => {
+    if (!isImageAnnotationTarget(target)) return;
+
     const { minX, minY, maxX, maxY } = target.selector.geometry.bounds;
 
     const t = { minX, minY, maxX, maxY, target };
@@ -38,28 +41,30 @@ export const createSpatialTree = () => {
     index.set(target.annotation, t);
   };
 
-  const remove = (target: ImageAnnotationTarget) => {
+  const remove = (target: AnnotationTarget) => {
+    if (!isImageAnnotationTarget(target)) return;
+
     const item = index.get(target.annotation);
     if (item)
       tree.remove(item);
     index.delete(target.annotation);
   };
 
-  const update = (previous: ImageAnnotationTarget, updated: ImageAnnotationTarget) => {
+  const update = (previous: AnnotationTarget, updated: AnnotationTarget) => {
     remove(previous);
     insert(updated);
   };
 
-  const set = (targets: ImageAnnotationTarget[], replace: boolean = true) => {
+  const set = (targets: AnnotationTarget[], replace: boolean = true) => {
     if (replace) 
       clear();
 
     const indexedTargets = targets.reduce<IndexedTarget[]>((all, target) => {
-      if (target.selector?.geometry?.bounds) {
+      if (isImageAnnotationTarget(target)) {
         // In case the host app injects any custom annotations, the 
         // spatial index should simply ignore them. 
         const { minX, minY, maxX, maxY } = target.selector.geometry.bounds;
-        return [...all, { minX, minY, maxX, maxY, target }];
+        return [...all, { minX, minY, maxX, maxY, target } as IndexedTarget];
       } else {
         return all;
       }