@annotorious/annotorious 3.0.0-rc.1 → 3.0.0-rc.11

package/dist/index.d.ts

@@ -5,8 +5,6 @@ export * from './themes';
 export * from './annotation/tools';
 export * from './Annotorious';
 export * from './AnnotoriousOpts';
-export * from '@annotorious/core/src/model';
-export * from '@annotorious/core/src/presence';
-export * from '@annotorious/core/src/utils';
-export type { HoverState, Selection, SelectionState, Store, StoreObserver } from '@annotorious/core/src/state';
+export * from './keyboardCommands';
+export type { Annotation, AnnotationBody, AnnotationTarget, Annotator, AnnotatorState, Appearance, AppearanceProvider, Color, DrawingStyle, Filter, FormatAdapter, HoverState, LifecycleEvents, ParseResult, PresentUser, Purpose, Selection, SelectionState, Store, StoreChangeEvent, StoreObserver, User, W3CAnnotation, W3CAnnotationBody, W3CAnnotationTarget, W3CSelector } from '@annotorious/core';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAE5C,YAAY,EACV,UAAU,EACV,SAAS,EACT,cAAc,EACd,KAAK,EACL,aAAa,EACd,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AAGnC,YAAY,EACV,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,KAAK,EACL,YAAY,EACZ,MAAM,EACN,aAAa,EACb,UAAU,EACV,eAAe,EACf,WAAW,EACX,WAAW,EACX,OAAO,EACP,SAAS,EACT,cAAc,EACd,KAAK,EACL,gBAAgB,EAChB,aAAa,EACb,IAAI,EACJ,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACZ,MAAM,mBAAmB,CAAC"}

package/dist/keyboardCommands.d.ts

@@ -0,0 +1,5 @@
+import type { Annotation, UndoStack } from '@annotorious/core';
+export declare const initKeyboardCommands: <T extends Annotation>(undoStack: UndoStack<T>, container?: Element) => {
+    destroy: () => void;
+};
+//# sourceMappingURL=keyboardCommands.d.ts.map

package/dist/keyboardCommands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardCommands.d.ts","sourceRoot":"","sources":["../src/keyboardCommands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI/D,eAAO,MAAM,oBAAoB,8DAEnB,OAAO;;CAuCpB,CAAA"}

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;AAMlE,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAElF,eAAO,MAAM,cAAc,WACjB,MAAM,YACL,OAAO,0BAUjB,CAAA;AAED,eAAO,MAAM,uBAAuB,eACtB,aAAa,YAChB,OAAO,KACf,YAAY,eAAe,CA6B7B,CAAA;AAED,eAAO,MAAM,2BAA2B,eAC1B,eAAe,UACnB,MAAM,KACb,aAmBF,CAAC"}
+{"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;AAMlE,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAElF,eAAO,MAAM,cAAc,WACjB,MAAM,YACL,OAAO,0BAUjB,CAAA;AAED,eAAO,MAAM,uBAAuB,eACtB,aAAa,YAChB,OAAO,KACf,YAAY,eAAe,CAgC7B,CAAA;AAED,eAAO,MAAM,2BAA2B,eAC1B,eAAe,UACnB,MAAM,KACb,aAmBF,CAAC"}

package/dist/themes/smart/setTheme.d.ts

@@ -1,3 +1,5 @@
+import type { Theme } from '../../AnnotoriousOpts';
 export declare const sampleBrightness: (imageOrCanvas: HTMLElement) => number;
-export declare const setTheme: (imageOrCanvas: HTMLElement, container: HTMLElement) => void;
+export declare const detectTheme: (imageOrCanvas: HTMLElement) => "dark" | "light";
+export declare const setTheme: (imageOrCanvas: HTMLElement, container: HTMLElement, theme: Theme) => void;
 //# sourceMappingURL=setTheme.d.ts.map

package/dist/themes/smart/setTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setTheme.d.ts","sourceRoot":"","sources":["../../../src/themes/smart/setTheme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,kBAAmB,WAAW,WAmC1D,CAAA;AAED,eAAO,MAAM,QAAQ,kBAAmB,WAAW,aAAa,WAAW,SAQ1E,CAAA"}
+{"version":3,"file":"setTheme.d.ts","sourceRoot":"","sources":["../../../src/themes/smart/setTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,eAAO,MAAM,gBAAgB,kBAAmB,WAAW,WAmC1D,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,WAAW,qBAOrD,CAAA;AAED,eAAO,MAAM,QAAQ,kBAAmB,WAAW,aAAa,WAAW,SAAS,KAAK,SACI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0-rc.11",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -33,9 +33,7 @@
       "require": "./dist/annotorious.js"
     },
     "./annotorious.css": "./dist/annotorious.css",
-    "./src": "./src/index.ts",
-    "./src/annotation": "./src/annotation/index.ts",
-    "./src/model": "./src/model/index.ts"
+    "./src": "./src/index.ts"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.6",
@@ -48,6 +46,9 @@
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^0.34.6"
   },
+  "peerDependencies": {
+    "@annotorious/core": "*"
+  },
   "dependencies": {
     "rbush": "^3.0.1",
     "uuid": "^9.0.1"

package/src/Annotorious.ts

@@ -1,15 +1,16 @@
 import type { SvelteComponent } from 'svelte';
-import type { Annotator, DrawingStyle, User } from '@annotorious/core';
-import { createAnonymousGuest, createBaseAnnotator, createLifecyleObserver } from '@annotorious/core';
+import type { Annotator, DrawingStyle, Filter, User } from '@annotorious/core';
+import { createAnonymousGuest, createBaseAnnotator, createLifecyleObserver, createUndoStack } from '@annotorious/core';
 import { registerEditor } from './annotation/editors';
 import { getTool, registerTool, listDrawingTools, type DrawingTool } from './annotation/tools';
 import { SVGAnnotationLayer } from './annotation';
 import type { DrawingToolOpts, SVGAnnotationLayerPointerEvent } from './annotation';
 import type { ImageAnnotation, ShapeType } from './model';
 import { createSvelteImageAnnotatorState } from './state';
-import { setTheme } from './themes';
-import { fillDefaults } from './AnnotoriousOpts';
+import { setTheme as _setTheme } from './themes';
+import { fillDefaults, type Theme } from './AnnotoriousOpts';
 import type { AnnotoriousOpts } from './AnnotoriousOpts';
+import { initKeyboardCommands } from './keyboardCommands';
 
 import './Annotorious.css';
 import './themes/dark/index.css';
@@ -23,10 +24,12 @@ export interface ImageAnnotator<E extends unknown = ImageAnnotation> extends Ann
 
   registerShapeEditor(shapeType: ShapeType, editor: typeof SvelteComponent): void;
 
-  setDrawingTool(tool: DrawingTool): void; 
+  setDrawingTool(name: DrawingTool): void; 
 
   setDrawingEnabled(enabled: boolean): void;
 
+  setTheme(theme: Theme): void;
+
 }
 
 export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
@@ -44,14 +47,13 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
 
   const state = createSvelteImageAnnotatorState(opts);
 
-  const { hover, selection, store } = state;
+  const { selection, store } = state;
 
-  const lifecycle = createLifecyleObserver<ImageAnnotation, E>(
-    store, selection, hover, undefined, opts.adapter, opts.autoSave);
+  const undoStack = createUndoStack(store);
 
-  let currentUser: User = createAnonymousGuest();
-
-  let style = opts.style;
+  const lifecycle = createLifecyleObserver<ImageAnnotation, E>(
+    state, undoStack, opts.adapter, opts.autoSave
+  );
 
   // We'll wrap the image in a container DIV.
   const container = document.createElement('DIV');
@@ -64,7 +66,11 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
   img.parentNode.insertBefore(container, img);
   container.appendChild(img);
 
-  setTheme(img, container);
+  const keyboardCommands = initKeyboardCommands(undoStack);
+
+  let currentUser: User = createAnonymousGuest();
+
+  _setTheme(img, container, opts.theme);
 
   const annotationLayer = new SVGAnnotationLayer({
     target: container,
@@ -73,7 +79,7 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
       image: img, 
       preferredDrawingMode: opts.drawingMode,
       state, 
-      style, 
+      style: opts.style, 
       user: currentUser
     }
   });
@@ -91,12 +97,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>(store, opts.adapter);
-
-  const setStyle = (drawingStyle: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined) => {
-    style = drawingStyle;
-    annotationLayer.$set({ style });
-  }
+  const base = createBaseAnnotator<ImageAnnotation, E>(state, undoStack, opts.adapter);
 
   const destroy = () => {
     // Destroy Svelte annotation layer
@@ -105,6 +106,10 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     // Unwrap the image
     container.parentNode.insertBefore(img, container);
     container.parentNode.removeChild(container);
+
+    // Other cleanup actions
+    keyboardCommands.destroy();
+    undoStack.destroy();
   }
 
   const getUser = () => currentUser;
@@ -115,23 +120,27 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
   const registerShapeEditor = (shapeType: ShapeType, editor: typeof SvelteComponent) =>
     registerEditor(shapeType, editor);
 
-  const setDrawingTool = (t: DrawingTool) => {
-    const { tool, opts } = getTool(t);
-    // @ts-ignore
-    annotationLayer.$set({ tool, opts })
+  const setDrawingTool = (name: DrawingTool) => {
+    // Validate that the tool exists
+    const toolSpec = getTool(name);
+    if (!toolSpec)
+      throw `No drawing tool named ${name}`;
+
+    annotationLayer.$set({ toolName: name })
   }
 
   const setDrawingEnabled = (enabled: boolean) =>
     annotationLayer.$set({ drawingEnabled: enabled });
-
-  const setSelected = (arg?: string | string[]) => {
-    if (arg) {
-      selection.setSelected(arg);
-    } else {
-      selection.clear();
-    }
+  
+  const setFilter = (filter: Filter) => {
+    console.warn('Filter not implemented yet');
   }
 
+  const setStyle = (style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined) =>
+    annotationLayer.$set({ style });
+
+  const setTheme = (theme: Theme) => _setTheme(img, container, theme);
+  
   const setUser = (user: User) => {
     currentUser = user;
     annotationLayer.$set({ user });
@@ -139,8 +148,6 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
 
   return {
     ...base,
-    get style() { return style },
-    set style(s: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined) { setStyle(s) },
     destroy,
     getUser,
     listDrawingTools,
@@ -150,7 +157,9 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     registerShapeEditor,
     setDrawingEnabled,
     setDrawingTool,
-    setSelected,
+    setFilter,
+    setStyle,
+    setTheme,
     setUser,
     state
   }

package/src/AnnotoriousOpts.ts

@@ -18,10 +18,14 @@ export interface AnnotoriousOpts<I extends Annotation = ImageAnnotation, E exten
 
   style?: DrawingStyle | ((annotation: I) => DrawingStyle);
 
+  theme?: Theme;
+
 }
 
 export type DrawingMode = 'click' | 'drag';
 
+export type Theme = 'dark' | 'light' | 'auto';
+
 export const fillDefaults = <I extends ImageAnnotation = ImageAnnotation, E extends unknown = ImageAnnotation> (
   opts: AnnotoriousOpts<I, E>
 ): AnnotoriousOpts<I, E> => {
@@ -30,7 +34,8 @@ export const fillDefaults = <I extends ImageAnnotation = ImageAnnotation, E exte
     ...opts,
     drawingEnabled: opts.drawingEnabled === undefined ? true : opts.drawingEnabled,
     drawingMode: opts.drawingMode || 'drag',
-    pointerSelectAction: opts.pointerSelectAction || PointerSelectAction.EDIT
+    pointerSelectAction: opts.pointerSelectAction || PointerSelectAction.EDIT,
+    theme: opts.theme || 'light'
   };
 
 };

package/src/annotation/SVGAnnotationLayer.svelte

@@ -6,7 +6,7 @@
   import type { ImageAnnotation, Shape} from '../model';
   import { getEditor, EditorMount } from './editors';
   import { Ellipse, Polygon, Rectangle} from './shapes';
-  import { getTool, ToolMount } from './tools';
+  import { getTool, listDrawingTools, ToolMount } from './tools';
   import { enableResponsive } from './utils';
   import { createSVGTransform } from './Transform';
   import { addEventListeners } from './SVGAnnotationLayerPointerEvent';
@@ -19,9 +19,11 @@
   export let preferredDrawingMode: DrawingMode;
   export let state: SvelteImageAnnotatorState;
   export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
-  export let { tool, opts } = getTool('rectangle');
+  export let toolName: string = listDrawingTools().length > 0 ? listDrawingTools()[0] : undefined;
   export let user: User;
 
+  $: ({ tool, opts } = getTool(toolName));
+
   $: drawingMode = opts?.drawingMode || preferredDrawingMode;
 
   /** Drawing tool layer **/
@@ -154,7 +156,7 @@
           {/key}
         {/each}
       {:else if (tool && drawingEnabled)} 
-        {#key tool}
+        {#key toolName}
           <ToolMount 
             target={drawingEl}
             tool={tool}

package/src/annotation/Transform.ts

@@ -13,11 +13,13 @@ export const IdentityTransform: Transform = {
 export const createSVGTransform = (svg: SVGSVGElement): Transform => ({
 
   elementToImage: (offsetX: number, offsetY: number) => {
+    const bbox = svg.getBoundingClientRect();
+
     const pt = svg.createSVGPoint();
-    pt.x = offsetX;
-    pt.y = offsetY;
+    pt.x = offsetX + bbox.x;
+    pt.y = offsetY + bbox.y;
   
-    const { x, y } = pt.matrixTransform(svg.getCTM().inverse());
+    const { x, y } = pt.matrixTransform(svg.getScreenCTM().inverse());
     return [x, y];
   }
 

package/src/annotation/editors/EditorMount.svelte

@@ -19,8 +19,8 @@
 
   $: computedStyle = computeStyle(annotation, style);
 
+  $: if (annotation) editorComponent?.$set({ shape: annotation.target.selector });
   $: if (editorComponent) editorComponent.$set({ transform });
-
   $: if (editorComponent) editorComponent.$set({ viewportScale });
 
   onMount(() => {

package/src/annotation/shapes/Rectangle.svelte

@@ -10,7 +10,7 @@
 
   $: computedStyle = computeStyle(annotation, style);
 
-  const { x, y, w, h } = geom as RectangleGeometry;
+  $: ({ x, y, w, h } = geom as RectangleGeometry);
 </script>
 
 <g data-id={annotation.id}>

package/src/annotation/tools/polygon/RubberbandPolygon.svelte

@@ -1,7 +1,7 @@
 <script type="ts">
   import { onMount, createEventDispatcher } from 'svelte';
   import type { DrawingMode } from '../../../AnnotoriousOpts';
-  import { boundsFromPoints, ShapeType, type Polygon } from '../../../model';
+  import { boundsFromPoints, computeArea, ShapeType, type Polygon } from '../../../model';
   import { distance } from '../../utils';
   import type { Transform } from '../..';
 
@@ -13,9 +13,7 @@
   export let transform: Transform;
   export let viewportScale = 1;
 
-  let container: SVGGElement;
-
-  let lastPointerDown: number;
+  let lastPointerDown: { timeStamp: number, offsetX: number, offsetY: number };
 
   let points: [number, number][] = [];
   
@@ -28,7 +26,9 @@
   $: handleSize = 10 / viewportScale;
 
   const onPointerDown = (evt: PointerEvent) => {
-    lastPointerDown = performance.now();
+    // Note that the event itself is ephemeral!
+    const { timeStamp, offsetX, offsetY } = evt;
+    lastPointerDown = { timeStamp, offsetX, offsetY };
 
     if (drawingMode === 'drag') {
       if (points.length === 0) {
@@ -52,14 +52,15 @@
   }
 
   const onPointerUp = (evt: PointerEvent) => {
-    const timeDifference = performance.now() - lastPointerDown;
-
     if (drawingMode === 'click') {
-      // Not a single click - ignore
-      if (timeDifference > 300)
-        return;
+      const timeDifference = evt.timeStamp - lastPointerDown.timeStamp;
 
-      evt.stopPropagation();
+      const d = distance(
+        [lastPointerDown.offsetX, lastPointerDown.offsetY], 
+        [evt.offsetX, evt.offsetY]);
+
+      if (timeDifference > 300 || d > 15) // Not a single click - ignore
+        return;
 
       if (isClosable) {
         stopDrawing();
@@ -98,22 +99,25 @@
   }
 
   const onDblClick = () => {
-    console.log('dblclick');
-    
+    // Require min 3 points (incl. cursor) and minimum
+    // polygon area
     const p = [...points, cursor];
 
     const shape: Polygon = {
-        type: ShapeType.POLYGON, 
-        geometry: {
-          bounds: boundsFromPoints(p),
-          points: p
-        }
+      type: ShapeType.POLYGON, 
+      geometry: {
+        bounds: boundsFromPoints(p),
+        points: p
       }
+    }
 
+    const area = computeArea(shape);
+    if (area > 4) {
       points = [];
       cursor = null;
     
       dispatch('create', shape);
+    }
   }
 
   const stopDrawing = () => {
@@ -139,10 +143,7 @@
   });
 </script>
 
-<g 
-  bind:this={container}
-  class="a9s-annotation a9s-rubberband">
-
+<g class="a9s-annotation a9s-rubberband">
   {#if cursor}
     {@const coords = (isClosable ? points : [...points, cursor]).map(xy => xy.join(',')).join(' ')}
       <polygon 

package/src/annotation/tools/rectangle/RubberbandRectangle.svelte

@@ -10,8 +10,6 @@
   export let addEventListener: (type: string, fn: EventListener, capture?: boolean) => void;
   export let drawingMode: DrawingMode;
   export let transform: Transform;
-  
-  let container: SVGGElement;
 
   let lastPointerDown: number;
 
@@ -109,10 +107,7 @@
   });
 </script>
 
-<g 
-  bind:this={container}
-  class="a9s-annotation a9s-rubberband">
-  
+<g class="a9s-annotation a9s-rubberband">
   {#if origin}
     <rect
       class="a9s-outer"

package/src/index.ts

@@ -5,16 +5,34 @@ export * from './themes';
 export * from './annotation/tools';
 export * from './Annotorious';
 export * from './AnnotoriousOpts';
+export * from './keyboardCommands';
 
-// Re-export essentials from @annotorious/core utilities for convenience
-export * from '@annotorious/core/src/model';
-export * from '@annotorious/core/src/presence';
-export * from '@annotorious/core/src/utils';
-
-export type { 
+// Essential re-exports from @annotorious/core
+export type {
+  Annotation,
+  AnnotationBody,
+  AnnotationTarget,
+  Annotator,
+  AnnotatorState,
+  Appearance,
+  AppearanceProvider,
+  Color,
+  DrawingStyle,
+  Filter,
+  FormatAdapter,
   HoverState,
+  LifecycleEvents,
+  ParseResult,
+  PresentUser,
+  Purpose,
   Selection,
   SelectionState,
   Store,
-  StoreObserver
-} from '@annotorious/core/src/state';
+  StoreChangeEvent,
+  StoreObserver,
+  User,
+  W3CAnnotation,
+  W3CAnnotationBody,
+  W3CAnnotationTarget,
+  W3CSelector
+} from '@annotorious/core';

package/src/keyboardCommands.ts

@@ -0,0 +1,46 @@
+import type { Annotation, UndoStack } from '@annotorious/core';
+
+const isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
+
+export const initKeyboardCommands = <T extends Annotation>(
+  undoStack: UndoStack<T>,
+  container?: Element 
+) => {
+
+  const el = container || document;
+
+  const onWinKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Z' && event.ctrlKey) {
+      undoStack.undo();
+    } else if (event.key === 'Y' && event.ctrlKey) {
+      undoStack.redo()
+    }
+  };
+
+  const onMacKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'z' && event.metaKey) {
+      if (event.shiftKey) {
+        undoStack.redo()
+      } else {
+        undoStack.undo();
+      }
+    }
+  }
+
+  const destroy = () => {
+    if (isMac) {
+      el.removeEventListener('keydown', onMacKeyDown);
+    } else {
+      el.removeEventListener('keydown', onWinKeyDown);
+    }
+  }
+
+  if (isMac)
+    el.addEventListener('keydown', onMacKeyDown);
+  else
+    el.addEventListener('keydown', onWinKeyDown);
+
+  return { 
+    destroy
+  }
+}

package/src/model/w3c/W3CImageFormatAdapter.ts

@@ -30,7 +30,9 @@ export const parseW3CImageAnnotation = (
 ): ParseResult<ImageAnnotation> => {
   const annotationId = annotation.id || uuidv4();
 
-  const bodies = parseW3CBodies(annotation.body, annotationId);
+  const { body, ...rest } = annotation;
+
+  const bodies = parseW3CBodies(body, annotationId);
 
   const target = Array.isArray(annotation.target) ? annotation.target[0] : annotation.target;
 
@@ -44,16 +46,17 @@ export const parseW3CImageAnnotation = (
 
   return selector ? { 
     parsed: {
-      ...annotation,
+      ...rest,
       id: annotationId,
       bodies,
       target: {
+        ...rest.target,
         annotation: annotationId,
         selector
       }
     }
   } : {
-    error: Error(`Unknown selector type: ${selector.type}`)
+    error: Error(`Unknown selector type: ${w3cSelector.type}`)
   };
 
 }

package/src/themes/smart/setTheme.ts

@@ -1,3 +1,5 @@
+import type { Theme } from '../../AnnotoriousOpts';
+
 export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
 
   let canvas: HTMLCanvasElement;
@@ -35,12 +37,14 @@ export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
   return totalBrightness / 81;
 }
 
-export const setTheme = (imageOrCanvas: HTMLElement, container: HTMLElement) => {
+export const detectTheme = (imageOrCanvas: HTMLElement) => {
   const brightness = sampleBrightness(imageOrCanvas);
-
   const theme = brightness > 0.6 ? 'dark' : 'light'
 
   console.log(`[Annotorious] Image brightness: ${brightness.toFixed(1)}. Setting ${theme} theme.`);
 
-  container.setAttribute('data-theme', theme);
-}
+  return theme;
+}
+
+export const setTheme = (imageOrCanvas: HTMLElement, container: HTMLElement, theme: Theme) =>
+  container.setAttribute('data-theme', theme === 'auto' ? detectTheme(imageOrCanvas) : theme);