@annotorious/annotorious 3.0.0-rc.8 → 3.0.0

package/src/annotation/shapes/Rectangle.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, RectangleGeometry } 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);
 
   $: ({ 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/tools/ToolMount.svelte

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

package/src/annotation/tools/drawingToolsRegistry.ts

@@ -9,10 +9,11 @@ export type DrawingToolOpts = {
 
   drawingMode?: DrawingMode;
 
-  [key: string]: string;
+  [key: string]: any;
 
 }
 
+// @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 type="ts">
+<script lang="ts">
   import { onMount, createEventDispatcher } from 'svelte';
   import type { DrawingMode } from '../../../AnnotoriousOpts';
   import { boundsFromPoints, computeArea, ShapeType, type Polygon } from '../../../model';
@@ -17,15 +17,24 @@
 
   let points: [number, number][] = [];
   
-  let cursor: [number, number] = null;
+  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 isClosable: boolean = false;
 
   const CLOSE_DISTANCE = 20;
 
+  const TOUCH_PAUSE_LIMIT = 1500;
+
   $: handleSize = 10 / viewportScale;
 
-  const onPointerDown = (evt: PointerEvent) => {
+  const onPointerDown = (event: Event) => {
+    const evt = event as PointerEvent;
+
     // Note that the event itself is ephemeral!
     const { timeStamp, offsetX, offsetY } = evt;
     lastPointerDown = { timeStamp, offsetX, offsetY };
@@ -40,7 +49,11 @@
     }
   }
 
-  const onPointerMove = (evt: PointerEvent) => {
+  const onPointerMove = (event: Event) => {
+    const evt = event as PointerEvent;
+
+    if (touchPauseTimer) clearTimeout(touchPauseTimer);
+
     if (points.length > 0) {
       cursor = transform.elementToImage(evt.offsetX, evt.offsetY);
 
@@ -48,10 +61,20 @@
         const d = distance(cursor, points[0]) * viewportScale;
         isClosable = d < CLOSE_DISTANCE;
       }
+
+      if (evt.pointerType === 'touch') {
+        touchPauseTimer = setTimeout(() => {
+          onDblClick();
+        }, TOUCH_PAUSE_LIMIT);
+      }
     }
   }
 
-  const onPointerUp = (evt: PointerEvent) => {
+  const onPointerUp = (event: Event) => {
+    const evt = event as PointerEvent;
+
+    if (touchPauseTimer) clearTimeout(touchPauseTimer);
+
     if (drawingMode === 'click') {
       const timeDifference = evt.timeStamp - lastPointerDown.timeStamp;
 
@@ -71,17 +94,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 = null;
+          cursor = undefined;
 
           return;
         }
@@ -93,12 +116,14 @@
       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];
@@ -114,7 +139,7 @@
     const area = computeArea(shape);
     if (area > 4) {
       points = [];
-      cursor = null;
+      cursor = undefined;
     
       dispatch('create', shape);
     }
@@ -130,7 +155,7 @@
     }
 
     points = [];
-    cursor = null;
+    cursor = undefined;
   
     dispatch('create', shape);
   }

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

@@ -1,4 +1,4 @@
-<script type="ts">
+<script lang="ts">
   import { createEventDispatcher, onMount } from 'svelte';
   import type { DrawingMode } from '../../../AnnotoriousOpts';
   import { ShapeType, type Rectangle } from '../../../model';
@@ -13,13 +13,15 @@
 
   let lastPointerDown: number;
 
-  let origin: [x: number, y: number]; 
+  let origin: [x: number, y: number] | undefined; 
 
-  let anchor: [number, number];
+  let anchor: [number, number] | undefined;
 
   let x: number, y: number, w: number, h: number;
 
-  const onPointerDown = (evt: PointerEvent) => {
+  const onPointerDown = (event: Event) => {
+    const evt = event as PointerEvent;
+
     lastPointerDown = performance.now();
 
     if (drawingMode === 'drag') {
@@ -33,7 +35,9 @@
     }
   }
 
-  const onPointerMove = (evt: PointerEvent) => {
+  const onPointerMove = (event: Event) => {
+    const evt = event as PointerEvent;
+
     if (origin) {
       anchor = transform.elementToImage(evt.offsetX, evt.offsetY);
 
@@ -44,7 +48,9 @@
     }
   }
     
-  const onPointerUp = (evt: PointerEvent) => {
+  const onPointerUp = (event: Event) => {
+    const evt = event as PointerEvent;
+
     const timeDifference = performance.now() - lastPointerDown;
 
     if (drawingMode === 'click') {
@@ -52,7 +58,17 @@
       if (timeDifference > 300)
         return;
 
-      evt.stopPropagation();
+      // This statement caused a weird bug on OSD: when starting
+      // to draw with a quick drag (<300ms), OSD got stuck in mouseNav 
+      // mode. The image still moved with the mouse cursor, even though 
+      // button was no longer pressed. 
+      // I'm commenting out this statement as a fix. But there must have
+      // been a reason I put it here in the first place. Keep an eye ou
+      // for regressions.
+      // 
+      // And if you are ever tempted to un-comment the statement: beware!
+      
+      // evt.stopPropagation();
 
       if (origin) {
         stopDrawing();
@@ -71,8 +87,8 @@
         evt.stopPropagation();
         stopDrawing();
       } else {
-        origin = null;
-        anchor = null;
+        origin = undefined;
+        anchor = undefined;
       }
     }
   }
@@ -96,8 +112,8 @@
       dispatch('create', shape);
     }
     
-    origin = null;
-    anchor = null;
+    origin = undefined;
+    anchor = undefined;
   }
 
   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/styling.ts

@@ -1,19 +1,28 @@
-import type { DrawingStyle } from '@annotorious/core';
+import type { DrawingStyleExpression } from '@annotorious/core';
 import type { ImageAnnotation } from '../../model';
 
-export const computeStyle = (annotation: ImageAnnotation, style?: DrawingStyle | ((a: ImageAnnotation) => DrawingStyle)) => {
+export const computeStyle = (
+  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 +1,9 @@
-export const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+export const isTouch = (() => {
+  if (typeof window === 'undefined' || typeof navigator === 'undefined')
+    return false;
+  
+  return 'ontouchstart' in window || 
+         navigator.maxTouchPoints > 0 || 
+         // @ts-ignore
+         navigator.msMaxTouchPoints > 0;
+})();

package/src/index.ts

@@ -24,7 +24,6 @@ export type {
   LifecycleEvents,
   ParseResult,
   PresentUser,
-  Purpose,
   Selection,
   SelectionState,
   Store,
@@ -33,6 +32,5 @@ export type {
   User,
   W3CAnnotation,
   W3CAnnotationBody,
-  W3CAnnotationTarget,
-  W3CSelector
+  W3CAnnotationTarget
 } from '@annotorious/core';

package/src/keyboardCommands.ts

@@ -1,6 +1,10 @@
 import type { Annotation, UndoStack } from '@annotorious/core';
 
-const isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
+export const isMac = (() => {
+  if (typeof navigator === 'undefined') return false;
+
+  return navigator.userAgent.indexOf('Mac OS X') !== -1;
+})();
 
 export const initKeyboardCommands = <T extends Annotation>(
   undoStack: UndoStack<T>,
@@ -9,15 +13,19 @@ export const initKeyboardCommands = <T extends Annotation>(
 
   const el = container || document;
 
-  const onWinKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Z' && event.ctrlKey) {
+  const onWinKeyDown = (evt: Event) => {
+    const event = evt as 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 = (event: KeyboardEvent) => {
+  const onMacKeyDown = (evt: Event) => {
+    const event = evt as KeyboardEvent;
+
     if (event.key === 'z' && event.metaKey) {
       if (event.shiftKey) {
         undoStack.redo()

package/src/model/w3c/W3CImageAnnotation.ts

@@ -0,0 +1,17 @@
+import type { W3CAnnotation, W3CAnnotationTarget } from '@annotorious/core';
+import type { FragmentSelector } from './fragment';
+import type { 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/src/model/w3c/W3CImageFormatAdapter.ts

@@ -1,86 +1,133 @@
 import { v4 as uuidv4 } from 'uuid';
-import { parseW3CBodies, serializeW3CBodies } from '@annotorious/core';
+import { parseW3CUser, 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, W3CAnnotation>;
+export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CImageAnnotation>;
+
+export interface W3CImageFormatAdapterOpts {
+
+  strict: boolean;
+
+  invertY: boolean;
+
+}
 
 export const W3CImageFormat = (
   source: string,
-  invertY: boolean = false
+  opts: W3CImageFormatAdapterOpts = { strict: true, invertY: false }
 ): W3CImageFormatAdapter => {
 
   const parse = (serialized: W3CAnnotation) =>
-    parseW3CImageAnnotation(serialized, invertY);
+    parseW3CImageAnnotation(serialized, opts);
 
   const serialize = (annotation: ImageAnnotation) =>
-    serializeW3CImageAnnotation(annotation, source);
+    serializeW3CImageAnnotation(annotation, source, opts);
 
   return { parse, serialize }
 }
 
 export const parseW3CImageAnnotation = (
   annotation: W3CAnnotation, 
-  invertY: boolean = false
+  opts: W3CImageFormatAdapterOpts = { strict: true, invertY: false }
 ): ParseResult<ImageAnnotation> => {
   const annotationId = annotation.id || uuidv4();
 
-  const { body, ...rest } = annotation;
+  const { 
+    creator,
+    created,
+    modified,
+    body, 
+    ...rest 
+  } = annotation;
 
-  const bodies = parseW3CBodies(body, annotationId);
+  const bodies = parseW3CBodies(body || [], annotationId);
 
-  const target = Array.isArray(annotation.target) ? annotation.target[0] : annotation.target;
+  const w3cTarget = Array.isArray(annotation.target) 
+    ? annotation.target[0] : annotation.target;
 
-  const w3cSelector = Array.isArray(target.selector) ? target.selector[0] : target.selector;
+  const w3cSelector = Array.isArray(w3cTarget.selector) 
+    ? w3cTarget.selector[0] : w3cTarget.selector;
 
   const selector = 
-    w3cSelector.type === 'FragmentSelector' ?
-      parseFragmentSelector(w3cSelector as FragmentSelector, invertY) :
-    w3cSelector.type === 'SvgSelector' ?
+    w3cSelector?.type === 'FragmentSelector' ?
+      parseFragmentSelector(w3cSelector as FragmentSelector, opts.invertY) :
+    w3cSelector?.type === 'SvgSelector' ?
       parseSVGSelector(w3cSelector as SVGSelector) : undefined;
 
-  return selector ? { 
+  return (selector || !opts.strict) ? { 
     parsed: {
       ...rest,
       id: annotationId,
       bodies,
       target: {
-        ...rest.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),
         annotation: annotationId,
-        selector
+        selector: selector || w3cSelector
       }
     }
   } : {
-    error: Error(`Unknown selector type: ${w3cSelector.type}`)
+    error: Error(`Invalid selector: ${JSON.stringify(w3cSelector)}`)
   };
-
 }
 
 export const serializeW3CImageAnnotation = (
   annotation: ImageAnnotation, 
-  source: string
-): W3CAnnotation => {
-  const shape = annotation.target.selector;
-
-  const selector =
-    shape.type == ShapeType.RECTANGLE ?
-      serializeFragmentSelector(shape.geometry as RectangleGeometry) :
-      serializeSVGSelector(shape);
-
-  return {
+  source: string,
+  opts: W3CImageFormatAdapterOpts = { strict: true, invertY: false }
+): W3CImageAnnotation => {
+  const { 
+    selector, 
+    creator, 
+    created, 
+    updated,
+    updatedBy, // Excluded from serialization
+    ...rest 
+  } = annotation.target;
+
+  let w3cSelector: FragmentSelector | SVGSelector | unknown;
+
+  try {
+    w3cSelector = selector.type == ShapeType.RECTANGLE ?
+      serializeFragmentSelector(selector.geometry as RectangleGeometry) :
+      serializeSVGSelector(selector);
+  } catch (error) {
+    if (opts.strict)
+      throw error;
+    else 
+     w3cSelector = selector;
+  }
+
+  const serialized = {
     ...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
+      selector: w3cSelector
     }
-  };
-};
+  } 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,15 +1,14 @@
-import type { W3CSelector } from '@annotorious/core';
-import { ShapeType } from '../../core';
 import type { Rectangle, RectangleGeometry } from '../../core';
+import { ShapeType } from '../../core';
 
-export interface FragmentSelector extends W3CSelector {
+export interface FragmentSelector {
 
   type: 'FragmentSelector';
 
   conformsTo: 'http://www.w3.org/TR/media-frags/',
 
   value: string;
-  
+
 }
 
 export const parseFragmentSelector = (
@@ -46,7 +45,7 @@ export const parseFragmentSelector = (
       }
     }
   }
-};
+}
 
 export const serializeFragmentSelector = (geometry: RectangleGeometry): FragmentSelector => {
   const { x, y, w, h } = geometry;
@@ -56,4 +55,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,3 +1,4 @@
 export * from './fragment';
 export * from './svg';
+export * from './W3CImageAnnotation';
 export * from './W3CImageFormatAdapter';

package/src/model/w3c/svg/SVG.ts

@@ -13,8 +13,7 @@ export const sanitize = (doc: Element | Document) => {
   // Remove script tags
   const scripts = doc.getElementsByTagName('script');
 
-  Array.from(scripts).reverse().forEach(el =>
-    el.parentNode.removeChild(el));
+  Array.from(scripts).reverse().forEach(el => el.parentNode!.removeChild(el));
 
   Array.from(doc.querySelectorAll('*')).forEach(cleanEl);
 

package/src/model/w3c/svg/SVGSelector.ts

@@ -1,14 +1,13 @@
-import type { W3CSelector } from '@annotorious/core';
-import { boundsFromPoints, ShapeType } from '../../core';
 import type { Ellipse, EllipseGeometry, Polygon, PolygonGeometry, Shape } from '../../core';
-import { SVG_NAMESPACE, insertSVGNamespace, sanitize } from './SVG';
+import { boundsFromPoints, ShapeType } from '../../core';
+import { insertSVGNamespace, sanitize, SVG_NAMESPACE } from './SVG';
 
-export interface SVGSelector extends W3CSelector {
+export interface SVGSelector {
 
   type: 'SvgSelector';
 
   value: string;
-  
+
 }
 
 const parseSVGXML = (value: string): Element => {
@@ -29,9 +28,6 @@ const parseSVGXML = (value: string): Element => {
 
 const parseSVGPolygon = (value: string): Polygon => {
   const [a, b, str] = value.match(/(<polygon points=["|'])([^("|')]*)/) || [];
-
-  if (!str) return;
-
   const points = str.split(' ').map((p) => p.split(',').map(parseFloat));
 
   return {
@@ -46,10 +42,10 @@ const parseSVGPolygon = (value: string): Polygon => {
 const parseSVGEllipse = (value: string): Ellipse => {
   const doc = parseSVGXML(value);
 
-  const cx = parseFloat(doc.getAttribute('cx'));
-  const cy = parseFloat(doc.getAttribute('cy'));
-  const rx = parseFloat(doc.getAttribute('rx'));
-  const ry = parseFloat(doc.getAttribute('ry'));
+  const cx = parseFloat(doc.getAttribute('cx')!);
+  const cy = parseFloat(doc.getAttribute('cy')!);
+  const rx = parseFloat(doc.getAttribute('rx')!);
+  const ry = parseFloat(doc.getAttribute('ry')!);
 
   const bounds = {
     minX: cx - rx,
@@ -77,10 +73,12 @@ export const parseSVGSelector = <T extends Shape>(valueOrSelector: SVGSelector |
     return parseSVGPolygon(value) as unknown as T;
   else if (value.includes('<ellipse ')) 
     return parseSVGEllipse(value) as unknown as T;
+  else 
+    throw 'Unsupported SVG shape: ' + value;
 }
 
 export const serializeSVGSelector = (shape: Shape): SVGSelector => {
-  let value: string;
+  let value: string | undefined;
 
   if (shape.type === ShapeType.POLYGON) {
     const geom = shape.geometry as PolygonGeometry;