@annotorious/annotorious 3.0.0-rc.2 → 3.0.0-rc.20

package/src/index.ts

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

package/src/keyboardCommands.ts

@@ -0,0 +1,50 @@
+import type { Annotation, UndoStack } from '@annotorious/core';
+
+const isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
+
+export const initKeyboardCommands = <T extends Annotation>(
+  undoStack: UndoStack<T>,
+  container?: Element 
+) => {
+
+  const el = container || document;
+
+  const onWinKeyDown = (evt: Event) => {
+    const event = evt as KeyboardEvent;
+    
+    if (event.key === 'z' && event.ctrlKey) {
+      undoStack.undo();
+    } else if (event.key === 'y' && event.ctrlKey) {
+      undoStack.redo()
+    }
+  };
+
+  const onMacKeyDown = (evt: Event) => {
+    const event = evt as KeyboardEvent;
+
+    if (event.key === 'z' && event.metaKey) {
+      if (event.shiftKey) {
+        undoStack.redo()
+      } else {
+        undoStack.undo();
+      }
+    }
+  }
+
+  const destroy = () => {
+    if (isMac) {
+      el.removeEventListener('keydown', onMacKeyDown);
+    } else {
+      el.removeEventListener('keydown', onWinKeyDown);
+    }
+  }
+
+  if (isMac)
+    el.addEventListener('keydown', onMacKeyDown);
+  else
+    el.addEventListener('keydown', onWinKeyDown);
+
+  return { 
+    destroy
+  }
+}

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,14 +1,15 @@
 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 const W3CImageFormat = (
   source: string,
@@ -30,30 +31,44 @@ export const parseW3CImageAnnotation = (
 ): ParseResult<ImageAnnotation> => {
   const annotationId = annotation.id || uuidv4();
 
-  const bodies = parseW3CBodies(annotation.body, annotationId);
+  const { 
+    creator,
+    created,
+    modified,
+    body, 
+    ...rest 
+  } = annotation;
 
-  const target = Array.isArray(annotation.target) ? annotation.target[0] : annotation.target;
+  const bodies = parseW3CBodies(body, annotationId);
 
-  const w3cSelector = Array.isArray(target.selector) ? target.selector[0] : target.selector;
+  const w3cTarget = Array.isArray(annotation.target) 
+    ? annotation.target[0] : annotation.target;
+
+  const w3cSelector = Array.isArray(w3cTarget.selector) 
+    ? w3cTarget.selector[0] : w3cTarget.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 ? { 
     parsed: {
-      ...annotation,
+      ...rest,
       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),
         annotation: annotationId,
         selector
       }
     }
   } : {
-    error: Error(`Unknown selector type: ${selector.type}`)
+    error: Error(`Invalid selector: ${JSON.stringify(w3cSelector)}`)
   };
 
 }
@@ -61,23 +76,42 @@ export const parseW3CImageAnnotation = (
 export const serializeW3CImageAnnotation = (
   annotation: ImageAnnotation, 
   source: string
-): W3CAnnotation => {
-  const shape = annotation.target.selector;
+): W3CImageAnnotation => {
+  const { 
+    selector, 
+    creator, 
+    created, 
+    updated,
+    updatedBy, // Excluded from serialization
+    ...rest 
+  } = annotation.target;
 
-  const selector =
-    shape.type == ShapeType.RECTANGLE ?
-      serializeFragmentSelector(shape.geometry as RectangleGeometry) :
-      serializeSVGSelector(shape);
+  const w3CSelector =
+    selector.type == ShapeType.RECTANGLE ?
+      serializeFragmentSelector(selector.geometry as RectangleGeometry) :
+      serializeSVGSelector(selector);
 
-  return {
+  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;

package/src/state/ImageAnnotatorState.ts

@@ -44,11 +44,11 @@ export const createImageAnnotatorState = <E extends unknown>(
   const viewport = createViewportState();
 
   store.observe(({ changes }) => {
-    tree.set(changes.created.map(a => a.target as ImageAnnotationTarget), false);
+    tree.set((changes.created || []).map(a => a.target as ImageAnnotationTarget), false);
     
-    changes.deleted.forEach(a => tree.remove(a.target as ImageAnnotationTarget));
+    (changes.deleted || []).forEach(a => tree.remove(a.target as ImageAnnotationTarget));
     
-    changes.updated.forEach(({ oldValue, newValue }) =>
+    (changes.updated || []).forEach(({ oldValue, newValue }) =>
       tree.update(oldValue.target, newValue.target));
   });
 

package/src/state/spatialTree.ts

@@ -40,7 +40,8 @@ export const createSpatialTree = () => {
 
   const remove = (target: ImageAnnotationTarget) => {
     const item = index.get(target.annotation);
-    tree.remove(item);
+    if (item)
+      tree.remove(item);
     index.delete(target.annotation);
   };
 
@@ -62,7 +63,7 @@ export const createSpatialTree = () => {
     tree.load(indexedTargets);
   };
 
-  const getAt = (x: number, y: number): ImageAnnotationTarget | null => {
+  const getAt = (x: number, y: number): ImageAnnotationTarget | undefined => {
     const idxHits = tree.search({
       minX: x,
       minY: y,

package/src/themes/dark/index.css

@@ -11,8 +11,8 @@ div[data-theme="dark"] .a9s-annotationlayer .a9s-inner {
   stroke-width: 1px;
 }
 
-rect.a9s-corner-handle,
-div[data-theme="dark"] rect.a9s-corner-handle {
+rect.a9s-handle,
+div[data-theme="dark"] rect.a9s-handle {
   fill: #000;
   rx: 2px;
 }

package/src/themes/light/index.css

@@ -13,8 +13,8 @@ div[data-theme="light"] .a9s-annotationlayer .a9s-inner {
   stroke-width: 1.5px;
 }
 
-rect.a9s-corner-handle,
-div[data-theme="light"] rect.a9s-corner-handle {
+rect.a9s-handle,
+div[data-theme="light"] rect.a9s-handle {
   fill: #fff;
   rx: 1px;
   stroke: rgba(0, 0, 0, 0.45);

package/src/themes/smart/setTheme.ts

@@ -1,3 +1,5 @@
+import type { Theme } from '../../AnnotoriousOpts';
+
 export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
 
   let canvas: HTMLCanvasElement;
@@ -6,7 +8,7 @@ export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
 
   if (imageOrCanvas.nodeName === 'CANVAS') {
     canvas = imageOrCanvas as HTMLCanvasElement;
-    context = canvas.getContext('2d', { willReadFrequently: true });
+    context = canvas.getContext('2d', { willReadFrequently: true })!;
   } else {
     const img = imageOrCanvas as HTMLImageElement;
     // Copy image to in-memory canvas for processing
@@ -14,7 +16,7 @@ export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
     canvas.width = img.width;
     canvas.height = img.height;
 
-    context = canvas.getContext('2d', { willReadFrequently: true });
+    context = canvas.getContext('2d', { willReadFrequently: true })!;
     context.drawImage(img, 0, 0, img.width, img.height);
   }
 
@@ -35,12 +37,14 @@ export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
   return totalBrightness / 81;
 }
 
-export const setTheme = (imageOrCanvas: HTMLElement, container: HTMLElement) => {
+export const detectTheme = (imageOrCanvas: HTMLElement) => {
   const brightness = sampleBrightness(imageOrCanvas);
-
   const theme = brightness > 0.6 ? 'dark' : 'light'
 
   console.log(`[Annotorious] Image brightness: ${brightness.toFixed(1)}. Setting ${theme} theme.`);
 
-  container.setAttribute('data-theme', theme);
-}
+  return theme;
+}
+
+export const setTheme = (imageOrCanvas: HTMLElement, container: HTMLElement, theme: Theme) =>
+  container.setAttribute('data-theme', theme === 'auto' ? detectTheme(imageOrCanvas) : theme);

package/dist/annotation/editors/Handle.d.ts

@@ -1,14 +0,0 @@
-export type Handle = string;
-export declare const Handle: {
-    (value: string | number): string;
-    SHAPE: string;
-    TOP: string;
-    RIGHT: string;
-    BOTTOM: string;
-    LEFT: string;
-    TOP_LEFT: string;
-    TOP_RIGHT: string;
-    BOTTOM_RIGHT: string;
-    BOTTOM_LEFT: string;
-};
-//# sourceMappingURL=Handle.d.ts.map

package/dist/annotation/editors/Handle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Handle.d.ts","sourceRoot":"","sources":["../../../src/annotation/editors/Handle.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAE5B,eAAO,MAAM,MAAM;YAAW,MAAM,GAAG,MAAM;;;;;;;;;;CAAsB,CAAC"}

package/src/annotation/editors/Handle.ts

@@ -1,21 +0,0 @@
-export type Handle = string;
-
-export const Handle = (value: string | number) => `HANDLE-${value}`;
-
-Handle.SHAPE = 'SHAPE';
-
-Handle.TOP = 'TOP';
-
-Handle.RIGHT = 'RIGHT';
-
-Handle.BOTTOM = 'BOTTOM';
-
-Handle.LEFT = 'LEFT';
-
-Handle.TOP_LEFT = 'TOP_LEFT';
-
-Handle.TOP_RIGHT = 'TOP_RIGHT';
-
-Handle.BOTTOM_RIGHT = 'BOTTOM_RIGHT';
-
-Handle.BOTTOM_LEFT = 'BOTTOM_LEFT';