@annotorious/annotorious 3.0.0-rc.8 → 3.0.0

package/src/annotation/SVGAnnotationLayer.svelte

@@ -1,15 +1,15 @@
-<script type="ts">
-  import { onMount, type SvelteComponent } from 'svelte';
+<script lang="ts">
+  import { SvelteComponent, onMount } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
-  import type { DrawingStyle, StoreChangeEvent, User } from '@annotorious/core';
+  import type { DrawingStyleExpression, StoreChangeEvent, User } from '@annotorious/core';
   import { ShapeType } from '../model';
   import type { ImageAnnotation, Shape} from '../model';
-  import { getEditor, EditorMount } from './editors';
+  import { getEditor as _getEditor, EditorMount } from './editors';
   import { Ellipse, Polygon, Rectangle} from './shapes';
   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';
 
@@ -18,11 +18,12 @@
   export let image: HTMLImageElement | HTMLCanvasElement;
   export let preferredDrawingMode: DrawingMode;
   export let state: SvelteImageAnnotatorState;
-  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
-  export let toolName: string = listDrawingTools().length > 0 ? listDrawingTools()[0] : undefined;
+  export let style: DrawingStyleExpression<ImageAnnotation> | undefined = undefined;
+  export let toolName: string = listDrawingTools()[0];
   export let user: User;
+  export let visible = true;
 
-  $: ({ tool, opts } = getTool(toolName));
+  $: ({ tool, opts } = getTool(toolName) || { tool: undefined, opts: undefined });
 
   $: drawingMode = opts?.drawingMode || preferredDrawingMode;
 
@@ -39,20 +40,21 @@
   $: transform = createSVGTransform(svgEl);
 
   /** Selection tracking */
-  const { selection, store } = state;
+  const { hover, selection, store } = state;
 
   $: ({ onPointerDown, onPointerUp } = addEventListeners(svgEl, store));
 
-  let storeObserver = null;
+  let storeObserver: (event: StoreChangeEvent<ImageAnnotation>) => void | undefined;
 
-  let editableAnnotations: ImageAnnotation[] = null;
+  let editableAnnotations: ImageAnnotation[] | undefined;
 
   $: isEditable = (a: ImageAnnotation) => $selection.selected.find(s => s.id === a.id && s.editable);
 
   $: trackSelection($selection.selected);
 
   const trackSelection = (selected: { id: string, editable?: boolean }[]) => {
-    store.unobserve(storeObserver);
+    if (storeObserver)
+      store.unobserve(storeObserver);
 
     // Track only editable annotations
     const editableIds = 
@@ -60,17 +62,17 @@
 
     if (editableIds.length > 0) {
       // Resolve selected IDs from the store
-      editableAnnotations = editableIds.map(id => store.getAnnotation(id));
+      editableAnnotations = editableIds.map(id => store.getAnnotation(id)!).filter(Boolean);
 
       // Track updates on the editable annotations
       storeObserver = (event: StoreChangeEvent<ImageAnnotation>) => {
         const { updated } = event.changes;
-        editableAnnotations = updated.map(change => change.newValue);
+        editableAnnotations = updated?.map(change => change.newValue);
       }   
       
       store.observe(storeObserver, { annotations: editableIds });
     } else {
-      editableAnnotations = null;
+      editableAnnotations = undefined;
     }
   }
 
@@ -108,30 +110,58 @@
       ...target,
       selector: event.detail,
       created: isUpdate ? target.created : new Date(),
-      updated: isUpdate ? new Date() : null,
-      updatedBy: isUpdate ? user : null
+      updated: isUpdate ? new Date() : undefined,
+      updatedBy: isUpdate ? user : undefined
     });
   }
+
+  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>
 
 <svg
   bind:this={svgEl}
   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}
@@ -144,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}
@@ -168,4 +201,4 @@
       {/if}
     {/if}
   </g>
-</svg>
+</svg>

package/src/annotation/SVGAnnotationLayerPointerEvent.ts

@@ -1,7 +1,6 @@
 import { createEventDispatcher } from 'svelte';
 import type { SvelteImageAnnotationStore } from '../state';
 import type { ImageAnnotation } from '../model';
-import { isTouch } from './utils';
 
 export interface SVGAnnotationLayerPointerEvent {
     
@@ -40,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();
 
@@ -51,5 +50,5 @@ const getSVGPoint = (evt: PointerEvent, svg: SVGSVGElement) => {
   pt.x = x + left;
   pt.y = y + top;
 
-  return pt.matrixTransform(svg.getScreenCTM().inverse());
+  return pt.matrixTransform(svg.getScreenCTM()!.inverse());
 }

package/src/annotation/Transform.ts

@@ -19,7 +19,7 @@ export const createSVGTransform = (svg: SVGSVGElement): Transform => ({
     pt.x = offsetX + bbox.x;
     pt.y = offsetY + bbox.y;
   
-    const { x, y } = pt.matrixTransform(svg.getScreenCTM().inverse());
+    const { x, y } = pt.matrixTransform(svg.getScreenCTM()!.inverse());
     return [x, y];
   }
 

package/src/annotation/editors/Editor.svelte

@@ -1,23 +1,22 @@
-<script type="ts">
+<script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import type { Shape } from '../../model';
-  import type { Handle } from './Handle';
   import type { Transform } from '../Transform';
 
-  const dispatch = createEventDispatcher<{ grab: undefined, release: undefined, change: Shape }>();
+  const dispatch = createEventDispatcher<{ grab: PointerEvent, release: PointerEvent, change: Shape }>();
 
   /** Props */
   export let shape: Shape;
-  export let editor: (shape: Shape, handle: Handle, delta: [number, number]) => Shape;
+  export let editor: (shape: Shape, handle: string, delta: [number, number]) => Shape;
   export let transform: Transform;
 
-  let grabbedHandle: Handle = null;
+  let grabbedHandle: string | undefined;
 
   let origin: [number, number];
 
-  let initialShape: Shape = null;
+  let initialShape: Shape | undefined;
 
-  const onGrab = (handle: Handle) => (evt: PointerEvent) => {
+  const onGrab = (handle: string) => (evt: PointerEvent) => {
     grabbedHandle = handle;
     origin = transform.elementToImage(evt.offsetX, evt.offsetY);
     initialShape = shape;
@@ -25,7 +24,7 @@
     const target = evt.target as Element;
     target.setPointerCapture(evt.pointerId);
 
-    dispatch('grab');
+    dispatch('grab', evt);
   }
 
   const onPointerMove = (evt: PointerEvent) => {
@@ -34,7 +33,7 @@
 
       const delta: [number, number] = [x - origin[0], y - origin[1]];
 
-      shape = editor(initialShape, grabbedHandle, delta);
+      shape = editor(initialShape!, grabbedHandle, delta);
       
       dispatch('change', shape);
     }
@@ -44,11 +43,11 @@
     const target = evt.target as Element;
     target.releasePointerCapture(evt.pointerId);
 
-    grabbedHandle = null;
+    grabbedHandle = undefined;
 
     initialShape = shape;
     
-    dispatch('release');
+    dispatch('release', evt);
   }
 </script>
 

package/src/annotation/editors/EditorMount.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import type { DrawingStyle } from '@annotorious/core';
+  import type { DrawingStyleExpression } from '@annotorious/core';
   import { createEventDispatcher, onMount, type SvelteComponent } from 'svelte';
   import type { ImageAnnotation, Shape } from '../../model';
   import { computeStyle } from '../utils/styling';
   import type { Transform } from '../Transform';
 
-  const dispatch = createEventDispatcher<{ grab: undefined, release: undefined, change: Shape }>();
+  const dispatch = createEventDispatcher<{ grab: PointerEvent, release: PointerEvent, change: Shape }>();
 
   /** Props */
   export let annotation: ImageAnnotation;
   export let editor: typeof SvelteComponent;
-  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
+  export let style: DrawingStyleExpression<ImageAnnotation> | undefined;
   export let target: SVGGElement;
   export let transform: Transform;
   export let viewportScale: number;

package/src/annotation/editors/Handle.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { isTouch } from '../utils';
+
+  /** props **/
+  export let x: number;
+  export let y: number;
+  export let scale: number;
+  export let radius: number = 30;
+
+  let touched = false;
+
+  const onPointerDown = (event: PointerEvent) => {
+    if (event.pointerType === 'touch')
+      touched = true;
+  }
+
+  const onPointerUp = () =>
+    touched = false;
+
+  $: handleSize = 10 / scale;
+</script>
+
+{#if isTouch}
+  <g class="a9s-touch-handle">
+    <circle 
+      cx={x} 
+      cy={y} 
+      r={radius / scale}
+      class="a9s-touch-halo"
+      class:touched={touched}
+      on:pointerdown
+      on:pointerdown={onPointerDown} 
+      on:pointerup={onPointerUp} />
+
+    <rect 
+      class={`a9s-handle ${$$props.class || ''}`.trim()}
+      x={x - handleSize / 2} 
+      y={y - handleSize / 2} 
+      width={handleSize} 
+      height={handleSize}
+      on:pointerdown
+      on:pointerdown={onPointerDown} 
+      on:pointerup={onPointerUp}  />
+  </g>
+{:else}
+  <rect 
+    class={`a9s-handle ${$$props.class || ''}`.trim()}
+    x={x - handleSize / 2} 
+    y={y - handleSize / 2} 
+    width={handleSize} 
+    height={handleSize} 
+    on:pointerdown />
+{/if}
+
+<style>
+  .a9s-touch-halo {
+    fill: transparent;
+    stroke-width: 0;
+  }
+
+  .a9s-touch-halo.touched {
+    fill: rgba(255, 255, 255, 0.25);
+  }
+
+
+</style>

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/editors/index.ts

@@ -1,7 +1,7 @@
 export * from './polygon';
 export * from './rectangle';
 export * from './editorsRegistry';
-export * from './Handle';
 
 export { default as Editor } from './Editor.svelte';
-export { default as EditorMount } from './EditorMount.svelte';
+export { default as EditorMount } from './EditorMount.svelte';
+export { default as Handle } from './Handle.svelte';

package/src/annotation/editors/polygon/PolygonEditor.svelte

@@ -1,27 +1,27 @@
-<script type="ts">
+<script lang="ts">
   import { boundsFromPoints } from '../../../model';
-  import type { Polygon } from '../../../model';
+  import type { Polygon, PolygonGeometry, Shape } from '../../../model';
   import type { Transform } from '../../Transform';
   import { Editor, Handle } from '..';
 
   /** Props */
   export let shape: Polygon;
-  export let computedStyle: string = undefined;
+  export let computedStyle: string | undefined;
   export let transform: Transform;
   export let viewportScale: number = 1;
 
   $: geom = shape.geometry;
 
-  $: handleSize = 10 / viewportScale;
-
-  const editor = (polygon: Polygon, handle: Handle, delta: [number, number]) => {
+  const editor = (polygon: Shape, handle: string, delta: [number, number]) => {
     let points: [number, number][];
 
-    if (handle === Handle.SHAPE) {
-      points = polygon.geometry.points.map(([x, y]) => [x + delta[0], y + delta[1]]);
+    const geom = (polygon.geometry) as PolygonGeometry;
+
+    if (handle === 'SHAPE') {
+      points = geom.points.map(([x, y]) => [x + delta[0], y + delta[1]]);
     } else {
-      points = polygon.geometry.points.map(([x, y], idx) =>
-        handle === Handle(idx) ? [x + delta[0], y + delta[1]] : [x, y]
+      points = geom.points.map(([x, y], idx) =>
+        handle === `HANDLE-${idx}` ? [x + delta[0], y + delta[1]] : [x, y]
       );
     }
 
@@ -46,19 +46,19 @@
   <polygon
     class="a9s-outer"
     style={computedStyle ? 'display:none;' : undefined}
-    on:pointerdown={grab(Handle.SHAPE)}
+    on:pointerdown={grab('SHAPE')}
     points={geom.points.map(xy => xy.join(',')).join(' ')} />
 
   <polygon
     class="a9s-inner a9s-shape-handle"
     style={computedStyle}
-    on:pointerdown={grab(Handle.SHAPE)}
+    on:pointerdown={grab('SHAPE')}
     points={geom.points.map(xy => xy.join(',')).join(' ')} />
 
   {#each geom.points as point, idx}
-    <rect 
-      class="a9s-corner-handle"
-      on:pointerdown={grab(Handle(idx))}
-      x={point[0] - handleSize / 2} y={point[1] - handleSize / 2} height={handleSize} width={handleSize} />
+    <Handle 
+      on:pointerdown={grab(`HANDLE-${idx}`)}
+      x={point[0]} y={point[1]} 
+      scale={viewportScale} />
   {/each}
 </Editor>

package/src/annotation/editors/rectangle/RectangleEditor.svelte

@@ -1,19 +1,18 @@
-<script type="ts">
-  import type { Rectangle } from '../../../model';
+<script lang="ts">
+  import Handle from '../Handle.svelte';
+  import type { Rectangle, Shape } from '../../../model';
   import type { Transform } from '../../Transform';
-  import { Editor, Handle } from '..';
+  import { Editor } from '..';
 
   /** Props */
   export let shape: Rectangle;
-  export let computedStyle: string = undefined;
+  export let computedStyle: string | undefined;
   export let transform: Transform;
   export let viewportScale: number = 1;
 
   $: geom = shape.geometry;
 
-  $: handleSize = 10 / viewportScale;
-
-  const editor = (rectangle: Rectangle, handle: Handle, delta: [number, number]) => {
+  const editor = (rectangle: Shape, handle: string, delta: [number, number]) => {
     const initialBounds = rectangle.geometry.bounds;
 
     let [x0, y0] = [initialBounds.minX, initialBounds.minY];
@@ -21,39 +20,39 @@
 
     const [dx, dy] = delta;
 
-    if (handle === Handle.SHAPE) {
+    if (handle === 'SHAPE') {
       x0 += dx;
       x1 += dx;
       y0 += dy;
       y1 += dy;
     } else {
       switch (handle) {
-        case Handle.TOP:
-        case Handle.TOP_LEFT:
-        case Handle.TOP_RIGHT: {
+        case 'TOP':
+        case 'TOP_LEFT':
+        case 'TOP_RIGHT': {
           y0 += dy;
           break;
         }
 
-        case Handle.BOTTOM:
-        case Handle.BOTTOM_LEFT:
-        case Handle.BOTTOM_RIGHT: {
+        case 'BOTTOM':
+        case 'BOTTOM_LEFT':
+        case 'BOTTOM_RIGHT': {
           y1 += dy;
           break;
         }
       }
 
       switch (handle) {
-        case Handle.LEFT:
-        case Handle.TOP_LEFT:
-        case Handle.BOTTOM_LEFT: {
+        case 'LEFT':
+        case 'TOP_LEFT':
+        case 'BOTTOM_LEFT': {
           x0 += dx;
           break;
         }
 
-        case Handle.RIGHT:
-        case Handle.TOP_RIGHT:
-        case Handle.BOTTOM_RIGHT: {
+        case 'RIGHT':
+        case 'TOP_RIGHT':
+        case 'BOTTOM_RIGHT': {
           x1 += dx;
           break;
         }
@@ -92,52 +91,56 @@
   <rect 
     class="a9s-outer"
     style={computedStyle ? 'display:none;' : undefined}
-    on:pointerdown={grab(Handle.SHAPE)}
+    on:pointerdown={grab('SHAPE')}
     x={geom.x} y={geom.y} width={geom.w} height={geom.h} />
 
   <rect 
     class="a9s-inner a9s-shape-handle"
     style={computedStyle}
-    on:pointerdown={grab(Handle.SHAPE)}
+    on:pointerdown={grab('SHAPE')}
     x={geom.x} y={geom.y} width={geom.w} height={geom.h} />
 
   <rect 
     class="a9s-edge-handle a9s-edge-handle-top" 
-    on:pointerdown={grab(Handle.TOP)}
+    on:pointerdown={grab('TOP')}
     x={geom.x} y={geom.y} height={1} width={geom.w} />
 
   <rect 
     class="a9s-edge-handle a9s-edge-handle-right"
-    on:pointerdown={grab(Handle.RIGHT)}
+    on:pointerdown={grab('RIGHT')}
     x={geom.x + geom.w} y={geom.y} height={geom.h} width={1}/>
 
   <rect 
     class="a9s-edge-handle a9s-edge-handle-bottom" 
-    on:pointerdown={grab(Handle.BOTTOM)}
+    on:pointerdown={grab('BOTTOM')}
     x={geom.x} y={geom.y + geom.h} height={1} width={geom.w} />
 
   <rect 
     class="a9s-edge-handle a9s-edge-handle-left" 
-    on:pointerdown={grab(Handle.LEFT)}
+    on:pointerdown={grab('LEFT')}
     x={geom.x} y={geom.y} height={geom.h} width={1} />
 
-  <rect 
-    class="a9s-corner-handle a9s-corner-handle-topleft"
-    on:pointerdown={grab(Handle.TOP_LEFT)}
-    x={geom.x - handleSize / 2} y={geom.y - handleSize / 2} height={handleSize} width={handleSize} />
-
-  <rect 
-    class="a9s-corner-handle a9s-corner-handle-topright"
-    on:pointerdown={grab(Handle.TOP_RIGHT)}
-    x={geom.x + geom.w - handleSize / 2} y={geom.y - handleSize / 2} height={handleSize} width={handleSize} />
+  <Handle
+    class="a9s-corner-handle-topleft"
+    on:pointerdown={grab('TOP_LEFT')}
+    x={geom.x} y={geom.y}
+    scale={viewportScale} /> 
+
+  <Handle
+    class="a9s-corner-handle-topright"
+    on:pointerdown={grab('TOP_RIGHT')}
+    x={geom.x + geom.w} y={geom.y} 
+    scale={viewportScale} />
   
-  <rect 
-    class="a9s-corner-handle a9s-corner-handle-bottomright"
-    on:pointerdown={grab(Handle.BOTTOM_RIGHT)}
-    x={geom.x + geom.w - handleSize / 2} y={geom.y + geom.h - handleSize / 2} height={handleSize} width={handleSize} />
+  <Handle 
+    class="a9s-corner-handle-bottomright"
+    on:pointerdown={grab('BOTTOM_RIGHT')}
+    x={geom.x + geom.w} y={geom.y + geom.h} 
+    scale={viewportScale} />
     
-  <rect 
-    class="a9s-corner-handle a9s-corner-handle-bottomleft"
-    on:pointerdown={grab(Handle.BOTTOM_LEFT)}
-    x={geom.x - handleSize / 2} y={geom.y + geom.h - handleSize / 2} height={handleSize} width={handleSize} />
+  <Handle 
+    class="a9s-corner-handle-bottomleft"
+    on:pointerdown={grab('BOTTOM_LEFT')}
+    x={geom.x} y={geom.y + geom.h} 
+    scale={viewportScale} />
 </Editor>

package/src/annotation/shapes/Ellipse.svelte

@@ -1,19 +1,19 @@
-<script type="ts">
-  import type { DrawingStyle } from '@annotorious/core';
+<script lang="ts">
+  import type { DrawingStyleExpression } from '@annotorious/core';
   import type { Geometry, EllipseGeometry, ImageAnnotation } from '../../model';
   import { computeStyle } from '../utils/styling';
   
   /** Props */
   export let annotation: ImageAnnotation;
   export let geom: Geometry;
-  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
+  export let style: DrawingStyleExpression<ImageAnnotation> | undefined;
 
   $: computedStyle = computeStyle(annotation, style);
 
   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

@@ -1,19 +1,19 @@
-<script type="ts">
-  import type { DrawingStyle } from '@annotorious/core';
+<script lang="ts">
+  import type { DrawingStyleExpression } from '@annotorious/core';
   import type { Geometry, ImageAnnotation, PolygonGeometry } from '../../model';
   import { computeStyle } from '../utils/styling';
   
   /** Props **/
   export let annotation: ImageAnnotation;
   export let geom: Geometry;
-  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
+  export let style: DrawingStyleExpression<ImageAnnotation> | undefined;
 
   $: computedStyle = computeStyle(annotation, style);
 
   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}