@annotorious/annotorious 3.0.0-rc.3 → 3.0.0-rc.5

package/dist/keyboardCommands.d.ts

@@ -1,5 +1,5 @@
-import type { UndoStack } from '@annotorious/core';
-export declare const initKeyboardCommands: (undoStack: UndoStack, container?: Element) => {
+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

@@ -1 +1 @@
-{"version":3,"file":"keyboardCommands.d.ts","sourceRoot":"","sources":["../src/keyboardCommands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,eAAO,MAAM,oBAAoB,cACpB,SAAS,cACR,OAAO;;CAuCpB,CAAA"}
+{"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,CA+B7B,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.3",
+  "version": "3.0.0-rc.5",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -48,6 +48,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

@@ -7,8 +7,8 @@ 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';
 
@@ -28,6 +28,8 @@ export interface ImageAnnotator<E extends unknown = ImageAnnotation> extends Ann
 
   setDrawingEnabled(enabled: boolean): void;
 
+  setTheme(theme: Theme): void;
+
 }
 
 export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
@@ -45,13 +47,14 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
 
   const state = createSvelteImageAnnotatorState(opts);
 
-  const { hover, selection, store } = state;
-
-  const lifecycle = createLifecyleObserver<ImageAnnotation, E>(
-    store, selection, hover, undefined, opts.adapter, opts.autoSave);
+  const { selection, store } = state;
 
   const undoStack = createUndoStack(store);
 
+  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');
   container.style.position = 'relative';
@@ -67,7 +70,7 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
 
   let currentUser: User = createAnonymousGuest();
 
-  setTheme(img, container);
+  _setTheme(img, container, opts.theme);
 
   const annotationLayer = new SVGAnnotationLayer({
     target: container,
@@ -94,7 +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, undoStack, opts.adapter);
+  const base = createBaseAnnotator<ImageAnnotation, E>(state, undoStack, opts.adapter);
 
   const destroy = () => {
     // Destroy Svelte annotation layer
@@ -130,17 +133,11 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     console.warn('Filter not implemented yet');
   }
 
-  const setSelected = (arg?: string | string[]) => {
-    if (arg) {
-      selection.setSelected(arg);
-    } else {
-      selection.clear();
-    }
-  }
-
   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 });
@@ -158,8 +155,8 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     setDrawingEnabled,
     setDrawingTool,
     setFilter,
-    setSelected,
     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/tools/polygon/RubberbandPolygon.svelte

@@ -13,7 +13,7 @@
   export let transform: Transform;
   export let viewportScale = 1;
 
-  let lastPointerDown: PointerEvent;
+  let lastPointerDown: { timeStamp: number, offsetX: number, offsetY: number };
 
   let points: [number, number][] = [];
   
@@ -26,7 +26,9 @@
   $: handleSize = 10 / viewportScale;
 
   const onPointerDown = (evt: PointerEvent) => {
-    lastPointerDown = {...evt};
+    // Note that the event itself is ephemeral!
+    const { timeStamp, offsetX, offsetY } = evt;
+    lastPointerDown = { timeStamp, offsetX, offsetY };
 
     if (drawingMode === 'drag') {
       if (points.length === 0) {

package/src/keyboardCommands.ts

@@ -1,9 +1,9 @@
-import type { UndoStack } from '@annotorious/core';
+import type { Annotation, UndoStack } from '@annotorious/core';
 
 const isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
 
-export const initKeyboardCommands = (
-  undoStack: UndoStack,
+export const initKeyboardCommands = <T extends Annotation>(
+  undoStack: UndoStack<T>,
   container?: Element 
 ) => {
 

package/src/model/w3c/W3CImageFormatAdapter.ts

@@ -50,12 +50,13 @@ export const parseW3CImageAnnotation = (
       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);