@annotorious/annotorious 3.0.0-rc.21 → 3.0.0-rc.4

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

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

package/src/annotation/shapes/Ellipse.svelte

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

package/src/annotation/shapes/Polygon.svelte

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

package/src/annotation/shapes/Rectangle.svelte

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

package/src/annotation/tools/ToolMount.svelte

@@ -23,9 +23,9 @@
 
     const cleanup: Function[] = [];
 
-    const addEventListener = (name: keyof SVGSVGElementEventMap, handler: EventListenerOrEventListenerObject, capture?: boolean) => {
-      svg?.addEventListener(name, handler, capture);
-      cleanup.push(() => svg?.removeEventListener(name, handler, capture));
+    const addEventListener = (name: string, handler: (evt: PointerEvent) => void, capture?: boolean) => {
+      svg.addEventListener(name, handler, capture);
+      cleanup.push(() => svg.removeEventListener(name, handler, capture));
     }
 
     toolComponent = new tool({

package/src/annotation/tools/drawingToolsRegistry.ts

@@ -9,11 +9,10 @@ export type DrawingToolOpts = {
 
   drawingMode?: DrawingMode;
 
-  [key: string]: any;
+  [key: string]: string;
 
 }
 
-// @ts-ignore
 const REGISTERED = new Map<DrawingTool, { tool: typeof SvelteComponent, opts?: DrawingToolOpts }>([
   ['rectangle', { tool: RubberbandRectangle }],
   ['polygon', { tool: RubberbandPolygon }]

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script type="ts">
   import { onMount, createEventDispatcher } from 'svelte';
   import type { DrawingMode } from '../../../AnnotoriousOpts';
   import { boundsFromPoints, computeArea, ShapeType, type Polygon } from '../../../model';
@@ -17,24 +17,15 @@
 
   let points: [number, number][] = [];
   
-  let cursor: [number, number] | undefined;
-
-  // Keep track of the user keeping the finger
-  // in place. Long pauses will be interpreted like a 
-  // double click and close the shape.
-  let touchPauseTimer: number | undefined;
+  let cursor: [number, number] = null;
 
   let isClosable: boolean = false;
 
   const CLOSE_DISTANCE = 20;
 
-  const TOUCH_PAUSE_LIMIT = 1500;
-
   $: handleSize = 10 / viewportScale;
 
-  const onPointerDown = (event: Event) => {
-    const evt = event as PointerEvent;
-
+  const onPointerDown = (evt: PointerEvent) => {
     // Note that the event itself is ephemeral!
     const { timeStamp, offsetX, offsetY } = evt;
     lastPointerDown = { timeStamp, offsetX, offsetY };
@@ -49,11 +40,7 @@
     }
   }
 
-  const onPointerMove = (event: Event) => {
-    const evt = event as PointerEvent;
-
-    if (touchPauseTimer) clearTimeout(touchPauseTimer);
-
+  const onPointerMove = (evt: PointerEvent) => {
     if (points.length > 0) {
       cursor = transform.elementToImage(evt.offsetX, evt.offsetY);
 
@@ -61,20 +48,10 @@
         const d = distance(cursor, points[0]) * viewportScale;
         isClosable = d < CLOSE_DISTANCE;
       }
-
-      if (evt.pointerType === 'touch') {
-        touchPauseTimer = setTimeout(() => {
-          onDblClick();
-        }, TOUCH_PAUSE_LIMIT);
-      }
     }
   }
 
-  const onPointerUp = (event: Event) => {
-    const evt = event as PointerEvent;
-
-    if (touchPauseTimer) clearTimeout(touchPauseTimer);
-
+  const onPointerUp = (evt: PointerEvent) => {
     if (drawingMode === 'click') {
       const timeDifference = evt.timeStamp - lastPointerDown.timeStamp;
 
@@ -94,17 +71,17 @@
 
         cursor = point;
       } else {
-        points.push(cursor!);
+        points.push(cursor);
       }
     } else {
       // Require minimum drag of 4px
       if (points.length === 1) {
-        const dist = distance(points[0], cursor!);
+        const dist = distance(points[0], cursor);
 
         if (dist <= 4) {
           // Cancel
           points = [];
-          cursor = undefined;
+          cursor = null;
 
           return;
         }
@@ -116,14 +93,12 @@
       if (isClosable) {
         stopDrawing();
       } else {
-        points.push(cursor!);
+        points.push(cursor);
       }
     }
   }
 
   const onDblClick = () => {
-    if (!cursor) return;
-
     // Require min 3 points (incl. cursor) and minimum
     // polygon area
     const p = [...points, cursor];
@@ -139,7 +114,7 @@
     const area = computeArea(shape);
     if (area > 4) {
       points = [];
-      cursor = undefined;
+      cursor = null;
     
       dispatch('create', shape);
     }
@@ -155,7 +130,7 @@
     }
 
     points = [];
-    cursor = undefined;
+    cursor = null;
   
     dispatch('create', shape);
   }

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script type="ts">
   import { createEventDispatcher, onMount } from 'svelte';
   import type { DrawingMode } from '../../../AnnotoriousOpts';
   import { ShapeType, type Rectangle } from '../../../model';
@@ -13,15 +13,13 @@
 
   let lastPointerDown: number;
 
-  let origin: [x: number, y: number] | undefined; 
+  let origin: [x: number, y: number]; 
 
-  let anchor: [number, number] | undefined;
+  let anchor: [number, number];
 
   let x: number, y: number, w: number, h: number;
 
-  const onPointerDown = (event: Event) => {
-    const evt = event as PointerEvent;
-
+  const onPointerDown = (evt: PointerEvent) => {
     lastPointerDown = performance.now();
 
     if (drawingMode === 'drag') {
@@ -35,9 +33,7 @@
     }
   }
 
-  const onPointerMove = (event: Event) => {
-    const evt = event as PointerEvent;
-
+  const onPointerMove = (evt: PointerEvent) => {
     if (origin) {
       anchor = transform.elementToImage(evt.offsetX, evt.offsetY);
 
@@ -48,9 +44,7 @@
     }
   }
     
-  const onPointerUp = (event: Event) => {
-    const evt = event as PointerEvent;
-
+  const onPointerUp = (evt: PointerEvent) => {
     const timeDifference = performance.now() - lastPointerDown;
 
     if (drawingMode === 'click') {
@@ -77,8 +71,8 @@
         evt.stopPropagation();
         stopDrawing();
       } else {
-        origin = undefined;
-        anchor = undefined;
+        origin = null;
+        anchor = null;
       }
     }
   }
@@ -102,8 +96,8 @@
       dispatch('create', shape);
     }
     
-    origin = undefined;
-    anchor = undefined;
+    origin = null;
+    anchor = null;
   }
 
   onMount(() => {

package/src/annotation/utils/responsive.ts

@@ -42,7 +42,7 @@ export const enableResponsive = (image: HTMLImageElement | HTMLCanvasElement, sv
       set(scale);
     });
   
-    resizeObserver.observe(svg.parentElement!);
+    resizeObserver.observe(svg.parentElement);
   }
 
   const destroy = () => {

package/src/annotation/utils/touch.ts

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

package/src/index.ts

@@ -7,31 +7,24 @@ export * from './Annotorious';
 export * from './AnnotoriousOpts';
 export * from './keyboardCommands';
 
-// Essential re-exports from @annotorious/core
-export type {
-  Annotation,
-  AnnotationBody,
-  AnnotationTarget,
-  Annotator,
-  AnnotatorState,
-  Appearance,
-  AppearanceProvider,
-  Color,
-  DrawingStyle,
-  Filter,
-  FormatAdapter,
+// 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 { 
   HoverState,
-  LifecycleEvents,
-  ParseResult,
-  PresentUser,
-  Purpose,
   Selection,
   SelectionState,
   Store,
   StoreChangeEvent,
-  StoreObserver,
-  User,
-  W3CAnnotation,
-  W3CAnnotationBody,
-  W3CAnnotationTarget
-} from '@annotorious/core';
+  StoreObserver
+} from '@annotorious/core/src/state';
+
+import {
+  Origin as _Origin,
+  PointerSelectAction as _PointerSelectAction
+} from '@annotorious/core/src/state';
+
+export { _Origin as Origin };
+export { _PointerSelectAction as PointerSelectAction };

package/src/keyboardCommands.ts

@@ -9,19 +9,15 @@ export const initKeyboardCommands = <T extends Annotation>(
 
   const el = container || document;
 
-  const onWinKeyDown = (evt: Event) => {
-    const event = evt as KeyboardEvent;
-    
-    if (event.key === 'z' && event.ctrlKey) {
+  const onWinKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Z' && event.ctrlKey) {
       undoStack.undo();
-    } else if (event.key === 'y' && event.ctrlKey) {
+    } else if (event.key === 'Y' && event.ctrlKey) {
       undoStack.redo()
     }
   };
 
-  const onMacKeyDown = (evt: Event) => {
-    const event = evt as KeyboardEvent;
-
+  const onMacKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'z' && event.metaKey) {
       if (event.shiftKey) {
         undoStack.redo()

package/src/model/w3c/W3CImageFormatAdapter.ts

@@ -1,15 +1,14 @@
 import { v4 as uuidv4 } from 'uuid';
-import { parseW3CUser, parseW3CBodies, serializeW3CBodies } from '@annotorious/core';
+import { parseW3CBodies, serializeW3CBodies } from '@annotorious/core';
 import type { FormatAdapter, ParseResult, W3CAnnotation } from '@annotorious/core';
 import { ShapeType } from '../core';
 import type { ImageAnnotation, RectangleGeometry } from '../core';
-import type {FragmentSelector } from './fragment';
+import type { FragmentSelector } from './fragment';
 import { parseFragmentSelector, serializeFragmentSelector } from './fragment';
 import type { SVGSelector } from './svg';
 import { parseSVGSelector, serializeSVGSelector } from './svg';
-import type { W3CImageAnnotation } from './W3CImageAnnotation';
 
-export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CImageAnnotation>;
+export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CAnnotation>;
 
 export const W3CImageFormat = (
   source: string,
@@ -31,26 +30,18 @@ export const parseW3CImageAnnotation = (
 ): ParseResult<ImageAnnotation> => {
   const annotationId = annotation.id || uuidv4();
 
-  const { 
-    creator,
-    created,
-    modified,
-    body, 
-    ...rest 
-  } = annotation;
+  const { body, ...rest } = annotation;
 
   const bodies = parseW3CBodies(body, annotationId);
 
-  const w3cTarget = Array.isArray(annotation.target) 
-    ? annotation.target[0] : annotation.target;
+  const target = Array.isArray(annotation.target) ? annotation.target[0] : annotation.target;
 
-  const w3cSelector = Array.isArray(w3cTarget.selector) 
-    ? w3cTarget.selector[0] : w3cTarget.selector;
+  const w3cSelector = Array.isArray(target.selector) ? target.selector[0] : target.selector;
 
   const selector = 
-    w3cSelector?.type === 'FragmentSelector' ?
+    w3cSelector.type === 'FragmentSelector' ?
       parseFragmentSelector(w3cSelector as FragmentSelector, invertY) :
-    w3cSelector?.type === 'SvgSelector' ?
+    w3cSelector.type === 'SvgSelector' ?
       parseSVGSelector(w3cSelector as SVGSelector) : undefined;
 
   return selector ? { 
@@ -59,16 +50,13 @@ export const parseW3CImageAnnotation = (
       id: annotationId,
       bodies,
       target: {
-        created: created ? new Date(created) : undefined,
-        creator: parseW3CUser(creator),
-        updated: modified ? new Date(modified) : undefined,
-        ...(Array.isArray(rest.target) ? rest.target[0] : rest.target),
+        ...rest.target,
         annotation: annotationId,
         selector
       }
     }
   } : {
-    error: Error(`Invalid selector: ${JSON.stringify(w3cSelector)}`)
+    error: Error(`Unknown selector type: ${w3cSelector.type}`)
   };
 
 }
@@ -76,42 +64,23 @@ export const parseW3CImageAnnotation = (
 export const serializeW3CImageAnnotation = (
   annotation: ImageAnnotation, 
   source: string
-): W3CImageAnnotation => {
-  const { 
-    selector, 
-    creator, 
-    created, 
-    updated,
-    updatedBy, // Excluded from serialization
-    ...rest 
-  } = annotation.target;
-
-  const w3CSelector =
-    selector.type == ShapeType.RECTANGLE ?
-      serializeFragmentSelector(selector.geometry as RectangleGeometry) :
-      serializeSVGSelector(selector);
-
-  const serialized = {
+): W3CAnnotation => {
+  const shape = annotation.target.selector;
+
+  const selector =
+    shape.type == ShapeType.RECTANGLE ?
+      serializeFragmentSelector(shape.geometry as RectangleGeometry) :
+      serializeSVGSelector(shape);
+
+  return {
     ...annotation,
     '@context': 'http://www.w3.org/ns/anno.jsonld',
     id: annotation.id,
     type: 'Annotation',
     body: serializeW3CBodies(annotation.bodies),
-    created: created?.toISOString(),
-    creator,
-    modified: updated?.toISOString(),
     target: {
-      ...rest,
       source,
-      selector: w3CSelector
+      selector
     }
-  } as W3CImageAnnotation;
-
-  // Remove core properties that should not appear in the W3C annotation
-  delete serialized.bodies;
-  
-  if ('annotation' in serialized.target)
-    delete serialized.target.annotation;
-
-  return serialized;
-}
+  };
+};

package/src/model/w3c/fragment/FragmentSelector.ts

@@ -1,14 +1,15 @@
-import type { Rectangle, RectangleGeometry } from '../../core';
+import type { W3CSelector } from '@annotorious/core';
 import { ShapeType } from '../../core';
+import type { Rectangle, RectangleGeometry } from '../../core';
 
-export interface FragmentSelector {
+export interface FragmentSelector extends W3CSelector {
 
   type: 'FragmentSelector';
 
   conformsTo: 'http://www.w3.org/TR/media-frags/',
 
   value: string;
-
+  
 }
 
 export const parseFragmentSelector = (
@@ -45,7 +46,7 @@ export const parseFragmentSelector = (
       }
     }
   }
-}
+};
 
 export const serializeFragmentSelector = (geometry: RectangleGeometry): FragmentSelector => {
   const { x, y, w, h } = geometry;
@@ -55,4 +56,4 @@ export const serializeFragmentSelector = (geometry: RectangleGeometry): Fragment
     conformsTo: 'http://www.w3.org/TR/media-frags/',
     value: `xywh=pixel:${x},${y},${w},${h}`
   };
-}
+};

package/src/model/w3c/index.ts

@@ -1,4 +1,3 @@
 export * from './fragment';
 export * from './svg';
-export * from './W3CImageAnnotation';
 export * from './W3CImageFormatAdapter';