@annotorious/annotorious 3.0.0-rc.30 → 3.0.0-rc.31

package/dist/model/w3c/W3CImageFormatAdapter.d.ts

@@ -3,7 +3,11 @@ import { ImageAnnotation } from '../core';
 import { W3CImageAnnotation } from './W3CImageAnnotation';
 
 export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CImageAnnotation>;
-export declare const W3CImageFormat: (source: string, invertY?: boolean) => W3CImageFormatAdapter;
-export declare const parseW3CImageAnnotation: (annotation: W3CAnnotation, invertY?: boolean) => ParseResult<ImageAnnotation>;
-export declare const serializeW3CImageAnnotation: (annotation: ImageAnnotation, source: string) => W3CImageAnnotation;
+export interface W3CImageFormatAdapterOpts {
+    strict: boolean;
+    invertY: boolean;
+}
+export declare const W3CImageFormat: (source: string, opts?: W3CImageFormatAdapterOpts) => W3CImageFormatAdapter;
+export declare const parseW3CImageAnnotation: (annotation: W3CAnnotation, opts: W3CImageFormatAdapterOpts) => ParseResult<ImageAnnotation>;
+export declare const serializeW3CImageAnnotation: (annotation: ImageAnnotation, source: string, opts: W3CImageFormatAdapterOpts) => W3CImageAnnotation;
 //# sourceMappingURL=W3CImageFormatAdapter.d.ts.map

package/dist/model/w3c/W3CImageFormatAdapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"W3CImageFormatAdapter.d.ts","sourceRoot":"","sources":["../../../src/model/w3c/W3CImageFormatAdapter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAKlE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;AAEvF,eAAO,MAAM,cAAc,WACjB,MAAM,YACL,OAAO,KACf,qBASF,CAAA;AAED,eAAO,MAAM,uBAAuB,eACtB,aAAa,YAChB,OAAO,KACf,WAAW,CAAC,eAAe,CA2C7B,CAAA;AAED,eAAO,MAAM,2BAA2B,eAC1B,eAAe,UACnB,MAAM,KACb,kBAsCF,CAAA"}
+{"version":3,"file":"W3CImageFormatAdapter.d.ts","sourceRoot":"","sources":["../../../src/model/w3c/W3CImageFormatAdapter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAKlE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;AAEvF,MAAM,WAAW,yBAAyB;IAExC,MAAM,EAAE,OAAO,CAAC;IAEhB,OAAO,EAAE,OAAO,CAAC;CAElB;AAED,eAAO,MAAM,cAAc,WACjB,MAAM,SACR,yBAAyB,KAC9B,qBASF,CAAA;AAED,eAAO,MAAM,uBAAuB,eACtB,aAAa,QACnB,yBAAyB,KAC9B,WAAW,CAAC,eAAe,CA0C7B,CAAA;AAED,eAAO,MAAM,2BAA2B,eAC1B,eAAe,UACnB,MAAM,QACR,yBAAyB,KAC9B,kBA8CF,CAAA"}

package/dist/state/spatialTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spatialTree.d.ts","sourceRoot":"","sources":["../../src/state/spatialTree.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD,UAAU,aAAa;IAErB,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,EAAE,qBAAqB,CAAC;CAE/B;AAED,eAAO,MAAM,iBAAiB;;;eA+CV,MAAM,KAAK,MAAM,KAAG,qBAAqB,GAAG,SAAS;yBAqB3C,MAAM,KAAK,MAAM,SAAS,MAAM,UAAU,MAAM;qBAvDpD,qBAAqB;qBASrB,qBAAqB;mBAYvB,qBAAqB,EAAE,YAAW,OAAO;;uBALrC,qBAAqB,WAAW,qBAAqB;CA6DhF,CAAA"}
+{"version":3,"file":"spatialTree.d.ts","sourceRoot":"","sources":["../../src/state/spatialTree.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD,UAAU,aAAa;IAErB,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,EAAE,qBAAqB,CAAC;CAE/B;AAED,eAAO,MAAM,iBAAiB;;;eAqDV,MAAM,KAAK,MAAM,KAAG,qBAAqB,GAAG,SAAS;yBAqB3C,MAAM,KAAK,MAAM,SAAS,MAAM,UAAU,MAAM;qBA7DpD,qBAAqB;qBASrB,qBAAqB;mBAYvB,qBAAqB,EAAE,YAAW,OAAO;;uBALrC,qBAAqB,WAAW,qBAAqB;CAmEhF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.30",
+  "version": "3.0.0-rc.31",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -39,16 +39,16 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@tsconfig/svelte": "^5.0.4",
     "@types/rbush": "^3.0.3",
-    "jsdom": "^24.1.0",
+    "jsdom": "^24.1.1",
     "svelte": "^4.2.18",
-    "svelte-preprocess": "^6.0.1",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.1",
+    "svelte-preprocess": "^6.0.2",
+    "typescript": "5.5.3",
+    "vite": "^5.3.5",
     "vite-plugin-dts": "^3.9.1",
-    "vitest": "^1.6.0"
+    "vitest": "^2.0.4"
   },
   "dependencies": {
-    "@annotorious/core": "3.0.0-rc.30",
+    "@annotorious/core": "3.0.0-rc.31",
     "rbush": "^4.0.0",
     "uuid": "^10.0.0"
   }

package/src/Annotorious.ts

@@ -1,5 +1,5 @@
 import type { SvelteComponent } from 'svelte';
-import { PointerSelectAction } from '@annotorious/core';
+import { UserSelectAction } from '@annotorious/core';
 import type { Annotator, DrawingStyleExpression, Filter, User } from '@annotorious/core';
 import { createAnonymousGuest, createBaseAnnotator, createLifecycleObserver, createUndoStack } from '@annotorious/core';
 import { registerEditor } from './annotation/editors';
@@ -19,6 +19,8 @@ import './themes/light/index.css';
 
 export interface ImageAnnotator<E extends unknown = ImageAnnotation> extends Annotator<ImageAnnotation, E> { 
 
+  element: HTMLDivElement;
+
   listDrawingTools(): string[];
 
   registerDrawingTool(name: string, tool: typeof SvelteComponent, opts?: DrawingToolOpts): void;
@@ -41,13 +43,14 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
   if (!image)
     throw 'Missing argument: image';
 
-  const img = (typeof image === 'string' ? 
-    document.getElementById(image) : image) as HTMLImageElement | HTMLCanvasElement;
+  const img = (
+    typeof image === 'string' ? document.getElementById(image) : image
+  ) as HTMLImageElement | HTMLCanvasElement;
 
   const opts = fillDefaults<ImageAnnotation, E>(options, {
     drawingEnabled: true,
     drawingMode: 'drag',
-    pointerSelectAction: PointerSelectAction.EDIT,
+    userSelectAction: UserSelectAction.EDIT,
     theme: 'light'
   });
 
@@ -62,7 +65,7 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
   );
 
   // We'll wrap the image in a container DIV.
-  const container = document.createElement('DIV');
+  const container = document.createElement('DIV') as HTMLDivElement;
   container.style.position = 'relative';
   container.style.display = 'inline-block';
 
@@ -93,7 +96,7 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
   annotationLayer.$on('click', (evt: CustomEvent<SVGAnnotationLayerPointerEvent>) => {
     const { originalEvent, annotation } = evt.detail;
     if (annotation)
-      selection.clickSelect(annotation.id, originalEvent);
+      selection.userSelect(annotation.id, originalEvent);
     else if (!selection.isEmpty())
       selection.clear();
   });
@@ -173,6 +176,7 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     setTheme,
     setUser,
     setVisible,
+    element: container,
     state
   }
 

package/src/AnnotoriousOpts.ts

@@ -1,4 +1,4 @@
-import type { Annotation, DrawingStyle, DrawingStyleExpression, FormatAdapter, PointerSelectAction } from '@annotorious/core';
+import type { Annotation, DrawingStyleExpression, FormatAdapter, UserSelectActionExpression } from '@annotorious/core';
 import type { ImageAnnotation } from './model';
 
 export interface AnnotoriousOpts<I extends Annotation = ImageAnnotation, E extends unknown = ImageAnnotation> {
@@ -13,7 +13,7 @@ export interface AnnotoriousOpts<I extends Annotation = ImageAnnotation, E exten
   // 'drag': starts drawing on drag, single click always selects
   drawingMode?: DrawingMode;
 
-  pointerSelectAction?: PointerSelectAction | ((a: I) => PointerSelectAction);
+  userSelectAction?: UserSelectActionExpression<I>;
 
   style?: DrawingStyleExpression<ImageAnnotation>;
 
@@ -28,17 +28,13 @@ export type Theme = 'dark' | 'light' | 'auto';
 export const fillDefaults = <I extends ImageAnnotation = ImageAnnotation, E extends unknown = ImageAnnotation> (
   opts: AnnotoriousOpts<I, E>,
   defaults: AnnotoriousOpts<I, E>
-): AnnotoriousOpts<I, E> => {
-
-  return {
-    ...opts,
-    drawingEnabled: opts.drawingEnabled === undefined ? defaults.drawingEnabled : opts.drawingEnabled,
-    drawingMode: opts.drawingMode || defaults.drawingMode,
-    pointerSelectAction: opts.pointerSelectAction || defaults.pointerSelectAction,
-    theme: opts.theme || defaults.theme
-  };
-
-};
+): AnnotoriousOpts<I, E> => ({
+  ...opts,
+  drawingEnabled: opts.drawingEnabled === undefined ? defaults.drawingEnabled : opts.drawingEnabled,
+  drawingMode: opts.drawingMode || defaults.drawingMode,
+  userSelectAction: opts.userSelectAction || defaults.userSelectAction,
+  theme: opts.theme || defaults.theme
+});
 
 
 

package/src/annotation/SVGAnnotationLayer.svelte

@@ -9,7 +9,7 @@
   import { getTool, listDrawingTools, ToolMount } from './tools';
   import { enableResponsive } from './utils';
   import { createSVGTransform } from './Transform';
-  import { addEventListeners } from './SVGAnnotationLayerPointerEvent';
+  import { addEventListeners, getSVGPoint } from './SVGAnnotationLayerPointerEvent';
   import type { SvelteImageAnnotatorState } from 'src/state';
   import type { DrawingMode } from 'src/AnnotoriousOpts';
 
@@ -40,7 +40,7 @@
   $: transform = createSVGTransform(svgEl);
 
   /** Selection tracking */
-  const { selection, store } = state;
+  const { hover, selection, store } = state;
 
   $: ({ onPointerDown, onPointerUp } = addEventListeners(svgEl, store));
 
@@ -115,6 +115,19 @@
     });
   }
 
+  const onPointerMove = (evt: PointerEvent) => {
+    const { x, y } = getSVGPoint(evt, svgEl);
+
+    const hit = store.getAt(x, y);
+    if (hit) {
+      if ($hover !== hit.id) {
+        hover.set(hit.id);
+      }
+    } else {
+      hover.set(undefined);
+    }
+  }
+
   // To get around lack of TypeScript support in Svelte markup
   const getEditor = (shape: Shape): typeof SvelteComponent => _getEditor(shape)!;
 </script>
@@ -124,20 +137,31 @@
   class="a9s-annotationlayer"
   class:drawing={tool}
   class:hidden={!visible}
+  class:hover={$hover}
   on:pointerup={onPointerUp}
-  on:pointerdown={onPointerDown}>
+  on:pointerdown={onPointerDown}
+  on:pointermove={onPointerMove}>
   
   <g>
     {#each $store as annotation}
       {#if !isEditable(annotation)}
         {@const selector = annotation.target.selector}
         {#key annotation.id}
-          {#if (selector.type === ShapeType.ELLIPSE)}
-            <Ellipse annotation={annotation} geom={selector.geometry} style={style} />
-          {:else if (selector.type === ShapeType.RECTANGLE)}
-            <Rectangle annotation={annotation} geom={selector.geometry} style={style} />
-          {:else if (selector.type === ShapeType.POLYGON)}
-            <Polygon annotation={annotation} geom={selector.geometry} style={style} />
+          {#if (selector?.type === ShapeType.ELLIPSE)}
+            <Ellipse 
+              annotation={annotation} 
+              geom={selector?.geometry} 
+              style={style} />
+          {:else if (selector?.type === ShapeType.RECTANGLE)}
+            <Rectangle 
+              annotation={annotation} 
+              geom={selector.geometry} 
+              style={style} />
+          {:else if (selector?.type === ShapeType.POLYGON)}
+            <Polygon 
+              annotation={annotation} 
+              geom={selector.geometry} 
+              style={style} />
           {/if}
         {/key}
       {/if}
@@ -150,16 +174,19 @@
     {#if drawingEl}
       {#if editableAnnotations}
         {#each editableAnnotations as editable}
-          {#key editable.id}
-            <EditorMount
-              target={drawingEl}
-              editor={getEditor(editable.target.selector)}
-              annotation={editable}
-              style={style}
-              transform={transform}
-              viewportScale={$scale}
-              on:change={onChangeSelected(editable)} />
-          {/key}
+          {@const editor = getEditor(editable.target.selector)}
+          {#if editor}
+            {#key editable.id}        
+              <EditorMount
+                target={drawingEl}
+                editor={getEditor(editable.target.selector)}
+                annotation={editable}
+                style={style}
+                transform={transform}
+                viewportScale={$scale}
+                on:change={onChangeSelected(editable)} />
+            {/key}
+          {/if}
         {/each}
       {:else if (tool && drawingEnabled)} 
         {#key toolName}
@@ -174,4 +201,4 @@
       {/if}
     {/if}
   </g>
-</svg>
+</svg>

package/src/annotation/SVGAnnotationLayerPointerEvent.ts

@@ -39,7 +39,7 @@ export const addEventListeners = (svg: SVGSVGElement, store: SvelteImageAnnotati
   return { onPointerDown, onPointerUp };
 }
 
-const getSVGPoint = (evt: PointerEvent, svg: SVGSVGElement) => {
+export const getSVGPoint = (evt: PointerEvent, svg: SVGSVGElement) => {
   const pt = svg.createSVGPoint();
   const bbox = svg.getBoundingClientRect();
 

package/src/annotation/editors/editorsRegistry.ts

@@ -4,8 +4,8 @@ import { PolygonEditor } from './polygon';
 import { RectangleEditor } from './rectangle';
 
 const REGISTERED = new Map<ShapeType, typeof SvelteComponent>([
-  [ShapeType.RECTANGLE, RectangleEditor],
-  [ShapeType.POLYGON, PolygonEditor]
+  [ShapeType.RECTANGLE, RectangleEditor as typeof SvelteComponent],
+  [ShapeType.POLYGON, PolygonEditor as typeof SvelteComponent]
 ]);
 
 export const getEditor = (shape: Shape) => REGISTERED.get(shape.type);

package/src/model/w3c/W3CImageFormatAdapter.ts

@@ -11,23 +11,31 @@ import type { W3CImageAnnotation } from './W3CImageAnnotation';
 
 export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CImageAnnotation>;
 
+export interface W3CImageFormatAdapterOpts {
+
+  strict: boolean;
+
+  invertY: boolean;
+
+}
+
 export const W3CImageFormat = (
   source: string,
-  invertY: boolean = false
+  opts: W3CImageFormatAdapterOpts = { strict: true, invertY: false }
 ): W3CImageFormatAdapter => {
 
   const parse = (serialized: W3CAnnotation) =>
-    parseW3CImageAnnotation(serialized, invertY);
+    parseW3CImageAnnotation(serialized, opts);
 
   const serialize = (annotation: ImageAnnotation) =>
-    serializeW3CImageAnnotation(annotation, source);
+    serializeW3CImageAnnotation(annotation, source, opts);
 
   return { parse, serialize }
 }
 
 export const parseW3CImageAnnotation = (
   annotation: W3CAnnotation, 
-  invertY: boolean = false
+  opts: W3CImageFormatAdapterOpts
 ): ParseResult<ImageAnnotation> => {
   const annotationId = annotation.id || uuidv4();
 
@@ -39,7 +47,7 @@ export const parseW3CImageAnnotation = (
     ...rest 
   } = annotation;
 
-  const bodies = parseW3CBodies(body, annotationId);
+  const bodies = parseW3CBodies(body || [], annotationId);
 
   const w3cTarget = Array.isArray(annotation.target) 
     ? annotation.target[0] : annotation.target;
@@ -49,11 +57,11 @@ export const parseW3CImageAnnotation = (
 
   const selector = 
     w3cSelector?.type === 'FragmentSelector' ?
-      parseFragmentSelector(w3cSelector as FragmentSelector, invertY) :
+      parseFragmentSelector(w3cSelector as FragmentSelector, opts.invertY) :
     w3cSelector?.type === 'SvgSelector' ?
       parseSVGSelector(w3cSelector as SVGSelector) : undefined;
 
-  return selector ? { 
+  return (selector || !opts.strict) ? { 
     parsed: {
       ...rest,
       id: annotationId,
@@ -64,18 +72,18 @@ export const parseW3CImageAnnotation = (
         updated: modified ? new Date(modified) : undefined,
         ...(Array.isArray(rest.target) ? rest.target[0] : rest.target),
         annotation: annotationId,
-        selector
+        selector: selector || w3cSelector
       }
     }
   } : {
     error: Error(`Invalid selector: ${JSON.stringify(w3cSelector)}`)
   };
-
 }
 
 export const serializeW3CImageAnnotation = (
   annotation: ImageAnnotation, 
-  source: string
+  source: string,
+  opts: W3CImageFormatAdapterOpts
 ): W3CImageAnnotation => {
   const { 
     selector, 
@@ -86,10 +94,18 @@ export const serializeW3CImageAnnotation = (
     ...rest 
   } = annotation.target;
 
-  const w3CSelector =
-    selector.type == ShapeType.RECTANGLE ?
+  let w3cSelector: FragmentSelector | SVGSelector | unknown;
+
+  try {
+    w3cSelector = selector.type == ShapeType.RECTANGLE ?
       serializeFragmentSelector(selector.geometry as RectangleGeometry) :
       serializeSVGSelector(selector);
+  } catch (error) {
+    if (opts.strict)
+      throw error;
+    else 
+     w3cSelector = selector;
+  }
 
   const serialized = {
     ...annotation,
@@ -103,7 +119,7 @@ export const serializeW3CImageAnnotation = (
     target: {
       ...rest,
       source,
-      selector: w3CSelector
+      selector: w3cSelector
     }
   } as W3CImageAnnotation;
 

package/src/state/ImageAnnotatorState.ts

@@ -37,7 +37,7 @@ export const createImageAnnotatorState = <E extends unknown>(
 
   const tree = createSpatialTree();
 
-  const selection = createSelectionState(store, opts.pointerSelectAction);
+  const selection = createSelectionState(store, opts.userSelectAction);
 
   const hover = createHoverState(store);
 
@@ -85,4 +85,3 @@ export const createSvelteImageAnnotatorState = <E extends unknown>(
   }
 
 }
-  

package/src/state/spatialTree.ts

@@ -54,10 +54,16 @@ export const createSpatialTree = () => {
     if (replace) 
       clear();
 
-    const indexedTargets = targets.map(target => {
-      const { minX, minY, maxX, maxY } = target.selector.geometry.bounds;
-      return { minX, minY, maxX, maxY, target };
-    });
+    const indexedTargets = targets.reduce<IndexedTarget[]>((all, target) => {
+      if (target.selector?.geometry?.bounds) {
+        // 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 }];
+      } else {
+        return all;
+      }
+    }, []);
 
     indexedTargets.forEach(t => index.set(t.target.annotation, t));
     tree.load(indexedTargets);