@annotorious/annotorious 3.0.0-rc.9 → 3.0.1

package/dist/index.d.ts

@@ -6,5 +6,4 @@ export * from './annotation/tools';
 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, Purpose, Selection, SelectionState, Store, StoreChangeEvent, StoreObserver, User, W3CAnnotation, W3CAnnotationBody, W3CAnnotationTarget, W3CSelector } from '@annotorious/core';
-//# sourceMappingURL=index.d.ts.map
+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';

package/dist/keyboardCommands.d.ts

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

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

@@ -1,9 +1,10 @@
-import type { Annotation, AnnotationTarget } from '@annotorious/core';
-import type { Shape } from './Shape';
+import { Annotation, AnnotationTarget } from '@annotorious/core';
+import { Shape } from './Shape';
 export interface ImageAnnotation extends Annotation {
     target: ImageAnnotationTarget;
 }
 export interface ImageAnnotationTarget extends AnnotationTarget {
     selector: Shape;
 }
-//# sourceMappingURL=ImageAnnotation.d.ts.map
+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/model/core/Shape.d.ts

@@ -1,4 +1,4 @@
-import type { AbstractSelector } from '@annotorious/core';
+import { AbstractSelector } from '@annotorious/core';
 export interface Shape extends AbstractSelector {
     type: ShapeType;
     geometry: Geometry;
@@ -17,4 +17,3 @@ export interface Bounds {
     maxX: number;
     maxY: number;
 }
-//# sourceMappingURL=Shape.d.ts.map

package/dist/model/core/ellipse/Ellipse.d.ts

@@ -1,4 +1,4 @@
-import type { Bounds, Geometry, Shape } from '../Shape';
+import { Bounds, Geometry, Shape } from '../Shape';
 export interface Ellipse extends Shape {
     geometry: EllipseGeometry;
 }
@@ -9,4 +9,3 @@ export interface EllipseGeometry extends Geometry {
     ry: number;
     bounds: Bounds;
 }
-//# sourceMappingURL=Ellipse.d.ts.map

package/dist/model/core/ellipse/ellipseUtils.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=ellipseUtils.d.ts.map

package/dist/model/core/ellipse/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Ellipse';
 export * from './ellipseUtils';
-//# sourceMappingURL=index.d.ts.map

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

@@ -4,4 +4,3 @@ export * from './rectangle';
 export * from './ImageAnnotation';
 export * from './Shape';
 export * from './shapeUtils';
-//# sourceMappingURL=index.d.ts.map

package/dist/model/core/polygon/Polygon.d.ts

@@ -1,4 +1,4 @@
-import type { Bounds, Geometry, Shape } from '../Shape';
+import { Bounds, Geometry, Shape } from '../Shape';
 export interface Polygon extends Shape {
     geometry: PolygonGeometry;
 }
@@ -6,4 +6,3 @@ export interface PolygonGeometry extends Geometry {
     points: Array<Array<number>>;
     bounds: Bounds;
 }
-//# sourceMappingURL=Polygon.d.ts.map

package/dist/model/core/polygon/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Polygon';
 export * from './polygonUtils';
-//# sourceMappingURL=index.d.ts.map

package/dist/model/core/polygon/polygonUtils.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=polygonUtils.d.ts.map

package/dist/model/core/rectangle/Rectangle.d.ts

@@ -1,4 +1,4 @@
-import type { Bounds, Geometry, Shape } from '../Shape';
+import { Bounds, Geometry, Shape } from '../Shape';
 export interface Rectangle extends Shape {
     geometry: RectangleGeometry;
 }
@@ -9,4 +9,3 @@ export interface RectangleGeometry extends Geometry {
     h: number;
     bounds: Bounds;
 }
-//# sourceMappingURL=Rectangle.d.ts.map

package/dist/model/core/rectangle/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Rectangle';
 export * from './rectangleUtils';
-//# sourceMappingURL=index.d.ts.map

package/dist/model/core/rectangle/rectangleUtils.d.ts

@@ -1,4 +1,3 @@
-import type { Rectangle } from './Rectangle';
-import { type ShapeUtil } from '../shapeUtils';
+import { Rectangle } from './Rectangle';
+import { ShapeUtil } from '../shapeUtils';
 export declare const RectangleUtil: ShapeUtil<Rectangle>;
-//# sourceMappingURL=rectangleUtils.d.ts.map

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

@@ -1,4 +1,4 @@
-import type { Bounds, Shape, ShapeType } from './Shape';
+import { Bounds, Shape, ShapeType } from './Shape';
 export interface ShapeUtil<T extends Shape> {
     area: (shape: T) => number;
     intersects: (shape: T, x: number, y: number) => boolean;
@@ -28,8 +28,4 @@ export declare const intersects: (shape: Shape, x: number, y: number) => boolean
  * @param points the points
  * @returns the Bounds
  */
-export declare const boundsFromPoints: (points: Array<[
-    number,
-    number
-]>) => Bounds;
-//# sourceMappingURL=shapeUtils.d.ts.map
+export declare const boundsFromPoints: (points: Array<[number, number]>) => Bounds;

package/dist/model/index.d.ts

@@ -1,3 +1,2 @@
 export * from './core';
 export * from './w3c';
-//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,10 @@
+import { W3CAnnotation, W3CAnnotationTarget } from '@annotorious/core';
+import { FragmentSelector } from './fragment';
+import { SVGSelector } from './svg';
+export interface W3CImageAnnotation extends W3CAnnotation {
+    target: W3CImageAnnotationTarget | W3CImageAnnotationTarget[];
+}
+export interface W3CImageAnnotationTarget extends W3CAnnotationTarget {
+    selector: W3CImageSelector | W3CImageSelector[];
+}
+export type W3CImageSelector = FragmentSelector | SVGSelector;

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

@@ -1,7 +1,11 @@
-import type { FormatAdapter, ParseResult, W3CAnnotation } from '@annotorious/core';
-import type { ImageAnnotation } from '../core';
-export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CAnnotation>;
-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) => W3CAnnotation;
-//# sourceMappingURL=W3CImageFormatAdapter.d.ts.map
+import { FormatAdapter, ParseResult, W3CAnnotation } from '@annotorious/core';
+import { ImageAnnotation } from '../core';
+import { W3CImageAnnotation } from './W3CImageAnnotation';
+export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, 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;

package/dist/model/w3c/fragment/FragmentSelector.d.ts

@@ -1,10 +1,8 @@
-import type { W3CSelector } from '@annotorious/core';
-import type { Rectangle, RectangleGeometry } from '../../core';
-export interface FragmentSelector extends W3CSelector {
+import { Rectangle, RectangleGeometry } from '../../core';
+export interface FragmentSelector {
     type: 'FragmentSelector';
     conformsTo: 'http://www.w3.org/TR/media-frags/';
     value: string;
 }
 export declare const parseFragmentSelector: (fragmentOrSelector: FragmentSelector | string, invertY?: boolean) => Rectangle;
 export declare const serializeFragmentSelector: (geometry: RectangleGeometry) => FragmentSelector;
-//# sourceMappingURL=FragmentSelector.d.ts.map

package/dist/model/w3c/fragment/index.d.ts

@@ -1,2 +1 @@
 export * from './FragmentSelector';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,4 +1,4 @@
 export * from './fragment';
 export * from './svg';
+export * from './W3CImageAnnotation';
 export * from './W3CImageFormatAdapter';
-//# sourceMappingURL=index.d.ts.map

package/dist/model/w3c/svg/SVG.d.ts

@@ -2,4 +2,3 @@ export declare const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 export declare const sanitize: (doc: Element | Document) => Element | Document;
 /** Helper that forces an un-namespaced node to SVG **/
 export declare const insertSVGNamespace: (originalDoc: Document) => Element;
-//# sourceMappingURL=SVG.d.ts.map

package/dist/model/w3c/svg/SVGSelector.d.ts

@@ -1,9 +1,7 @@
-import type { W3CSelector } from '@annotorious/core';
-import type { Shape } from '../../core';
-export interface SVGSelector extends W3CSelector {
+import { Shape } from '../../core';
+export interface SVGSelector {
     type: 'SvgSelector';
     value: string;
 }
 export declare const parseSVGSelector: <T extends Shape>(valueOrSelector: SVGSelector | string) => T;
 export declare const serializeSVGSelector: (shape: Shape) => SVGSelector;
-//# sourceMappingURL=SVGSelector.d.ts.map

package/dist/model/w3c/svg/index.d.ts

@@ -1,2 +1 @@
 export * from './SVGSelector';
-//# sourceMappingURL=index.d.ts.map

package/dist/state/ImageAnnotationStore.d.ts

@@ -1,11 +1,10 @@
-import type { Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
-import type { ImageAnnotation } from '../model';
-export type ImageAnnotationStore = Store<ImageAnnotation> & {
+import { Annotation, Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
+import { ImageAnnotation } from '../model';
+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>;
 };
-//# sourceMappingURL=ImageAnnotationStore.d.ts.map

package/dist/state/ImageAnnotatorState.d.ts

@@ -1,12 +1,11 @@
-import type { ImageAnnotation } from '../model';
-import type { AnnotoriousOpts } from '../AnnotoriousOpts';
-import { type AnnotatorState, type HoverState, type SelectionState } from '@annotorious/core';
-import type { ImageAnnotationStore, SvelteImageAnnotatorState } from './ImageAnnotationStore';
-export type ImageAnnotatorState<T extends ImageAnnotationStore = ImageAnnotationStore> = AnnotatorState<ImageAnnotation> & {
-    store: T;
+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> = 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;
-//# sourceMappingURL=ImageAnnotatorState.d.ts.map
+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/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ImageAnnotationStore';
 export * from './ImageAnnotatorState';
-//# sourceMappingURL=index.d.ts.map

package/dist/state/spatialTree.d.ts

@@ -1,4 +1,5 @@
-import type { ImageAnnotationTarget } from '../model';
+import { ImageAnnotationTarget } from '../model';
+import { AnnotationTarget } from '@annotorious/core';
 interface IndexedTarget {
     minX: number;
     minY: number;
@@ -9,13 +10,12 @@ interface IndexedTarget {
 export declare const createSpatialTree: () => {
     all: () => IndexedTarget[];
     clear: () => void;
-    getAt: (x: number, y: number) => ImageAnnotationTarget | null;
+    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 {};
-//# sourceMappingURL=spatialTree.d.ts.map

package/dist/themes/index.d.ts

@@ -1,2 +1 @@
 export * from './smart';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,2 +1 @@
 export * from './setTheme';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,5 +1,4 @@
-import type { Theme } from '../../AnnotoriousOpts';
+import { Theme } from '../../AnnotoriousOpts';
 export declare const sampleBrightness: (imageOrCanvas: HTMLElement) => number;
 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/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.9",
+  "version": "3.0.1",
   "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",
@@ -36,21 +36,20 @@
     "./src": "./src/index.ts"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.6",
-    "@tsconfig/svelte": "^3.0.0",
-    "@types/rbush": "^3.0.2",
-    "jsdom": "^22.1.0",
-    "svelte": "^3.59.2",
-    "typescript": "^4.9.5",
-    "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.6.0",
-    "vitest": "^0.34.6"
-  },
-  "peerDependencies": {
-    "@annotorious/core": "*"
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@tsconfig/svelte": "^5.0.4",
+    "@types/rbush": "^3.0.4",
+    "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.0.3",
+    "vitest": "^2.0.5"
   },
   "dependencies": {
-    "rbush": "^3.0.1",
-    "uuid": "^9.0.1"
+    "@annotorious/core": "3.0.1",
+    "rbush": "^4.0.1",
+    "uuid": "^10.0.0"
   }
-}
+}

package/src/Annotorious.css

@@ -19,6 +19,14 @@
           user-select: none;
 }
 
+.a9s-annotationlayer.hidden {
+  display: none;
+}
+
+.a9s-annotationlayer .a9s-annotation {
+  cursor: pointer;
+}
+
 .a9s-annotationlayer ellipse, 
 .a9s-annotationlayer polygon,
 .a9s-annotationlayer rect  {
@@ -37,7 +45,7 @@
   cursor: move;
 }
 
-.a9s-corner-handle {
+.a9s-handle {
   cursor: move;
 }
 
@@ -57,18 +65,18 @@
   cursor: w-resize;
 }
 
-.a9s-corner-handle.a9s-corner-handle-topleft {
+.a9s-handle.a9s-corner-handle-topleft {
   cursor: nw-resize;
 }
 
-.a9s-corner-handle.a9s-corner-handle-topright {
+.a9s-handle.a9s-corner-handle-topright {
   cursor: ne-resize;
 }
 
-.a9s-corner-handle.a9s-corner-handle-bottomright {
+.a9s-handle.a9s-corner-handle-bottomright {
   cursor: se-resize; 
 }
 
-.a9s-corner-handle.a9s-corner-handle-bottomleft {
+.a9s-handle.a9s-corner-handle-bottomleft {
   cursor: sw-resize;
 }

package/src/Annotorious.ts

@@ -1,6 +1,7 @@
 import type { SvelteComponent } from 'svelte';
-import type { Annotator, DrawingStyle, Filter, User } from '@annotorious/core';
-import { createAnonymousGuest, createBaseAnnotator, createLifecyleObserver, createUndoStack } from '@annotorious/core';
+import { UserSelectAction } 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';
 import { SVGAnnotationLayer } from './annotation';
@@ -16,7 +17,9 @@ 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;
 
   listDrawingTools(): string[];
 
@@ -32,62 +35,68 @@ 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';
 
-  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);
+  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 = createLifecyleObserver<ImageAnnotation, E>(
+  const lifecycle = createLifecycleObserver<I, E>(
     state, undoStack, opts.adapter, opts.autoSave
   );
 
   // 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';
 
   // Wrapper div has unwanted margin at the bottom otherwise!
   img.style.display = 'block';
 
-  img.parentNode.insertBefore(container, img);
+  img.parentNode!.insertBefore(container, img);
   container.appendChild(img);
 
   const keyboardCommands = initKeyboardCommands(undoStack);
 
   let currentUser: User = createAnonymousGuest();
 
-  _setTheme(img, container, opts.theme);
+  _setTheme(img, container, opts.theme!);
 
   const annotationLayer = new SVGAnnotationLayer({
     target: container,
     props: { 
-      drawingEnabled: opts.drawingEnabled, 
+      drawingEnabled: Boolean(opts.drawingEnabled), 
       image: img, 
-      preferredDrawingMode: opts.drawingMode,
-      state, 
+      preferredDrawingMode: opts.drawingMode!,
+      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.clickSelect(annotation.id, originalEvent);
+      selection.userSelect(annotation.id, originalEvent);
     else if (!selection.isEmpty())
       selection.clear();
   });
@@ -97,15 +106,15 @@ 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
     annotationLayer.$destroy();
 
     // Unwrap the image
-    container.parentNode.insertBefore(img, container);
-    container.parentNode.removeChild(container);
+    container.parentNode!.insertBefore(img, container);
+    container.parentNode!.removeChild(container);
 
     // Other cleanup actions
     keyboardCommands.destroy();
@@ -126,18 +135,19 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     if (!toolSpec)
       throw `No drawing tool named ${name}`;
 
+    // @ts-ignore
     annotationLayer.$set({ toolName: name })
   }
 
   const setDrawingEnabled = (enabled: boolean) =>
     annotationLayer.$set({ drawingEnabled: enabled });
   
-  const setFilter = (filter: Filter) => {
+  const setFilter = (_: Filter) => {
     console.warn('Filter not implemented yet');
   }
 
-  const setStyle = (style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | 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);
   
@@ -146,6 +156,10 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     annotationLayer.$set({ user });
   }
 
+  const setVisible = (visible: boolean) =>
+    // @ts-ignore
+    annotationLayer.$set({ visible });
+
   return {
     ...base,
     destroy,
@@ -161,7 +175,9 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     setStyle,
     setTheme,
     setUser,
+    setVisible,
+    element: container,
     state
   }
 
-}
+}

package/src/AnnotoriousOpts.ts

@@ -1,5 +1,4 @@
-import { PointerSelectAction } from '@annotorious/core';
-import type { Annotation, DrawingStyle, FormatAdapter } 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> {
@@ -14,9 +13,9 @@ 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?: DrawingStyle | ((annotation: I) => DrawingStyle);
+  style?: DrawingStyleExpression<ImageAnnotation>;
 
   theme?: Theme;
 
@@ -26,19 +25,16 @@ 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> => {
-
-  return {
-    ...opts,
-    drawingEnabled: opts.drawingEnabled === undefined ? true : opts.drawingEnabled,
-    drawingMode: opts.drawingMode || 'drag',
-    pointerSelectAction: opts.pointerSelectAction || PointerSelectAction.EDIT,
-    theme: opts.theme || 'light'
-  };
-
-};
+export const fillDefaults = <I extends Annotation = ImageAnnotation, E extends unknown = ImageAnnotation> (
+  opts: AnnotoriousOpts<I, E>,
+  defaults: AnnotoriousOpts<I, E>
+): 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
+});