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

package/dist/index.d.ts

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

package/dist/keyboardCommands.d.ts

@@ -1,6 +1,4 @@
 import { 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/model/core/ImageAnnotation.d.ts

@@ -1,10 +1,8 @@
 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

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

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

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

@@ -1,5 +1,4 @@
 import { Bounds, Geometry, Shape } from '../Shape';
-
 export interface Ellipse extends Shape {
     geometry: EllipseGeometry;
 }
@@ -10,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,5 +1,4 @@
 import { Bounds, Geometry, Shape } from '../Shape';
-
 export interface Polygon extends Shape {
     geometry: PolygonGeometry;
 }
@@ -7,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,5 +1,4 @@
 import { Bounds, Geometry, Shape } from '../Shape';
-
 export interface Rectangle extends Shape {
     geometry: RectangleGeometry;
 }
@@ -10,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,5 +1,3 @@
 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,5 +1,4 @@
 import { Bounds, Shape, ShapeType } from './Shape';
-
 export interface ShapeUtil<T extends Shape> {
     area: (shape: T) => number;
     intersects: (shape: T, x: number, y: number) => boolean;
@@ -30,4 +29,3 @@ export declare const intersects: (shape: Shape, x: number, y: number) => boolean
  * @returns the Bounds
  */
 export declare const boundsFromPoints: (points: Array<[number, number]>) => Bounds;
-//# sourceMappingURL=shapeUtils.d.ts.map

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

@@ -1,7 +1,6 @@
 import { W3CAnnotation, W3CAnnotationTarget } from '@annotorious/core';
 import { FragmentSelector } from './fragment';
 import { SVGSelector } from './svg';
-
 export interface W3CImageAnnotation extends W3CAnnotation {
     target: W3CImageAnnotationTarget | W3CImageAnnotationTarget[];
 }
@@ -9,4 +8,3 @@ export interface W3CImageAnnotationTarget extends W3CAnnotationTarget {
     selector: W3CImageSelector | W3CImageSelector[];
 }
 export type W3CImageSelector = FragmentSelector | SVGSelector;
-//# sourceMappingURL=W3CImageAnnotation.d.ts.map

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

@@ -1,9 +1,11 @@
 import { FormatAdapter, ParseResult, W3CAnnotation } from '@annotorious/core';
 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;
-//# sourceMappingURL=W3CImageFormatAdapter.d.ts.map
+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,5 +1,4 @@
 import { Rectangle, RectangleGeometry } from '../../core';
-
 export interface FragmentSelector {
     type: 'FragmentSelector';
     conformsTo: 'http://www.w3.org/TR/media-frags/';
@@ -7,4 +6,3 @@ export interface FragmentSelector {
 }
 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

@@ -2,4 +2,3 @@ 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 { 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,6 +1,5 @@
 import { Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
 import { ImageAnnotation } from '../model';
-
 export type ImageAnnotationStore = Store<ImageAnnotation> & {
     getAt(x: number, y: number): ImageAnnotation | undefined;
     getIntersecting(x: number, y: number, width: number, height: number): ImageAnnotation[];
@@ -9,4 +8,3 @@ export type SvelteImageAnnotationStore = SvelteStore<ImageAnnotation> & ImageAnn
 export type SvelteImageAnnotatorState = SvelteAnnotatorState<ImageAnnotation> & {
     store: SvelteImageAnnotationStore;
 };
-//# sourceMappingURL=ImageAnnotationStore.d.ts.map

package/dist/state/ImageAnnotatorState.d.ts

@@ -2,7 +2,6 @@ import { ImageAnnotation } from '../model';
 import { AnnotoriousOpts } from '../AnnotoriousOpts';
 import { AnnotatorState, HoverState, SelectionState } from '@annotorious/core';
 import { ImageAnnotationStore, SvelteImageAnnotatorState } from './ImageAnnotationStore';
-
 export type ImageAnnotatorState<T extends ImageAnnotationStore = ImageAnnotationStore> = AnnotatorState<ImageAnnotation> & {
     store: T;
     selection: SelectionState<ImageAnnotation>;
@@ -10,4 +9,3 @@ export type ImageAnnotatorState<T extends ImageAnnotationStore = 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

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,5 +1,4 @@
 import { ImageAnnotationTarget } from '../model';
-
 interface IndexedTarget {
     minX: number;
     minY: number;
@@ -19,4 +18,3 @@ export declare const createSpatialTree: () => {
     update: (previous: ImageAnnotationTarget, updated: ImageAnnotationTarget) => 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,6 +1,4 @@
 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,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.30",
+  "version": "3.0.0-rc.32",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -36,20 +36,20 @@
     "./src": "./src/index.ts"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tsconfig/svelte": "^5.0.4",
-    "@types/rbush": "^3.0.3",
-    "jsdom": "^24.1.0",
-    "svelte": "^4.2.18",
-    "svelte-preprocess": "^6.0.1",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1",
-    "vitest": "^1.6.0"
+    "@types/rbush": "^3.0.4",
+    "jsdom": "^24.1.1",
+    "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": {
-    "@annotorious/core": "3.0.0-rc.30",
-    "rbush": "^4.0.0",
+    "@annotorious/core": "3.0.0-rc.32",
+    "rbush": "^4.0.1",
     "uuid": "^10.0.0"
   }
 }

package/src/Annotorious.css

@@ -23,6 +23,10 @@
   display: none;
 }
 
+.a9s-annotationlayer .a9s-annotation {
+  cursor: pointer;
+}
+
 .a9s-annotationlayer ellipse, 
 .a9s-annotationlayer polygon,
 .a9s-annotationlayer rect  {

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/annotation/shapes/Ellipse.svelte

@@ -13,7 +13,7 @@
   const { cx, cy, rx, ry } = geom as EllipseGeometry;
 </script>
 
-<g data-id={annotation.id}>
+<g class="a9s-annotation" data-id={annotation.id}>
   <ellipse
     class="a9s-outer"
     style={computedStyle ? 'display:none;' : undefined}

package/src/annotation/shapes/Polygon.svelte

@@ -13,7 +13,7 @@
   const { points } = geom as PolygonGeometry;
 </script>
 
-<g data-id={annotation.id}>
+<g class="a9s-annotation" data-id={annotation.id}>
   <polygon 
     class="a9s-outer"
     style={computedStyle ? 'display:none;' : undefined}

package/src/annotation/shapes/Rectangle.svelte

@@ -13,7 +13,7 @@
   $: ({ x, y, w, h } = geom as RectangleGeometry);
 </script>
 
-<g data-id={annotation.id}>
+<g class="a9s-annotation" data-id={annotation.id}>
   <rect
     class="a9s-outer"
     style={computedStyle ? 'display:none;' : undefined}

package/src/annotation/utils/styling.ts

@@ -2,21 +2,27 @@ import type { DrawingStyleExpression } from '@annotorious/core';
 import type { ImageAnnotation } from '../../model';
 
 export const computeStyle = (
-  annotation: ImageAnnotation, 
+  annotation: ImageAnnotation,
   style?: DrawingStyleExpression<ImageAnnotation>
 ) => {
   const computed = typeof style === 'function' ? style(annotation) : style;
 
   if (computed) {
-    const { fill, fillOpacity } = computed;
+    const { fill, fillOpacity, stroke, strokeWidth, strokeOpacity } = computed;
 
     let css = '';
-    
-    if (fill)
-      css += `fill:${fill};stroke:${fill};`;
-    
-    css += `fill-opacity:${fillOpacity || '0.25'};`;
+
+    if (fill) {
+      css += `fill:${fill};`;
+      css += `fill-opacity:${fillOpacity || '0.25'};`;
+    }
+
+    if (stroke) {
+      css += `stroke:${stroke};`;
+      css += `stroke-width:${strokeWidth || '1'};`;
+      css += `stroke-opacity:${strokeOpacity || '1'};`;
+    }
 
     return css;
   }
-}
+};

package/src/annotation/utils/touch.ts

@@ -1,4 +1,4 @@
-export const isTouch = 'ontouchstart' in window 
-  || navigator.maxTouchPoints > 0
-  // @ts-ignore
-  || navigator.msMaxTouchPoints > 0;
+export const isTouch = window && navigator && (
+    // @ts-ignore
+    'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
+  );