@annotorious/annotorious 3.0.0-rc.1

package/src/annotation/utils/responsive.ts

@@ -0,0 +1,56 @@
+import { writable } from 'svelte/store';
+
+const setSize = (image: HTMLImageElement | HTMLCanvasElement, svg: SVGElement) => {
+  const { naturalWidth, naturalHeight } = (image as HTMLImageElement);
+
+  if (!naturalWidth && !naturalHeight) {
+    // Might be because a) the image has not loaded yet, or b) because it's not 
+    // an image element (but maybe a CANVAS etc.)! Allow for both possibilities.
+    const { width, height } = image;
+
+    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+
+    image.addEventListener('load', event => {
+      const img = event.target as HTMLImageElement;
+      svg.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`);
+    });
+  } else {
+    svg.setAttribute('viewBox', `0 0 ${naturalWidth} ${naturalHeight}`);
+  }
+
+}
+
+export const enableResponsive = (image: HTMLImageElement | HTMLCanvasElement, svg: SVGSVGElement) => {
+
+  setSize(image, svg);
+
+  const { subscribe, set } = writable(1);
+
+  let resizeObserver: ResizeObserver;
+
+  if (window.ResizeObserver) {
+    resizeObserver = new ResizeObserver(() => {
+      const svgBounds = svg.getBoundingClientRect();
+
+      const { width, height } = svg.viewBox.baseVal;
+  
+      const scale = Math.max(
+        svgBounds.width / width,
+        svgBounds.height / height
+      );
+  
+      set(scale);
+    });
+  
+    resizeObserver.observe(svg.parentElement);
+  }
+
+  const destroy = () => {
+    if (resizeObserver)
+      resizeObserver.disconnect();
+  }
+
+  return { destroy, subscribe };
+
+}
+

package/src/annotation/utils/styling.ts

@@ -0,0 +1,19 @@
+import type { DrawingStyle } from '@annotorious/core';
+import type { ImageAnnotation } from '../../model';
+
+export const computeStyle = (annotation: ImageAnnotation, style?: DrawingStyle | ((a: ImageAnnotation) => DrawingStyle)) => {
+  const computed = typeof style === 'function' ? style(annotation) : style;
+
+  if (computed) {
+    const { fill, fillOpacity } = computed;
+
+    let css = '';
+    
+    if (fill)
+      css += `fill:${fill};stroke:${fill};`;
+    
+    css += `fill-opacity:${fillOpacity || '0.25'};`;
+
+    return css;
+  }
+}

package/src/annotation/utils/touch.ts

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

package/src/index.ts

@@ -0,0 +1,20 @@
+export * from './annotation';
+export * from './model';
+export * from './state';
+export * from './themes';
+export * from './annotation/tools';
+export * from './Annotorious';
+export * from './AnnotoriousOpts';
+
+// 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,
+  Selection,
+  SelectionState,
+  Store,
+  StoreObserver
+} from '@annotorious/core/src/state';

package/src/model/core/ImageAnnotation.ts

@@ -0,0 +1,14 @@
+import type { Annotation, AnnotationTarget } from '@annotorious/core';
+import type { Shape } from './Shape';
+
+export interface ImageAnnotation extends Annotation {
+
+  target: ImageAnnotationTarget;
+
+}
+
+export interface ImageAnnotationTarget extends AnnotationTarget {
+
+  selector: Shape
+
+}

package/src/model/core/Shape.ts

@@ -0,0 +1,37 @@
+import type { AbstractSelector } from '@annotorious/core';
+
+export interface Shape extends AbstractSelector {
+
+  type: ShapeType;
+
+  geometry: Geometry;
+
+}
+
+export enum ShapeType {
+
+  ELLIPSE = 'ELLIPSE',
+
+  POLYGON = 'POLYGON',
+
+  RECTANGLE = 'RECTANGLE'
+
+}
+
+export interface Geometry {
+
+  bounds: Bounds;
+
+}
+
+export interface Bounds {
+
+  minX: number;
+
+  minY: number;
+
+  maxX: number;
+
+  maxY: number;
+
+}

package/src/model/core/ellipse/Ellipse.ts

@@ -0,0 +1,21 @@
+import type { Bounds, Geometry, Shape } from '../Shape';
+
+export interface Ellipse extends Shape {
+
+  geometry: EllipseGeometry;
+
+}
+
+export interface EllipseGeometry extends Geometry {
+
+  cx: number;
+
+  cy: number;
+
+  rx: number;
+
+  ry: number;
+
+  bounds: Bounds;
+  
+}

package/src/model/core/ellipse/ellipseUtils.ts

@@ -0,0 +1,28 @@
+import { ShapeType } from '../Shape';
+import { registerShapeUtil, type ShapeUtil } from '../shapeUtils';
+import type { Ellipse } from './Ellipse';
+
+const EllipseUtil: ShapeUtil<Ellipse> = {
+
+  area: (e: Ellipse): number => Math.PI * e.geometry.rx * e.geometry.ry,
+
+  intersects: (e: Ellipse, x: number, y: number): boolean => {
+    const { cx, cy, rx, ry } = e.geometry;
+
+    // For future use
+    const rot = 0;
+
+    const cos = Math.cos(rot);
+    const sin = Math.sin(rot);
+  
+    const dx  = x - cx;
+    const dy  = y - cy;
+  
+    const tdx = cos * dx + sin * dy;
+    const tdy = sin * dx - cos * dy;
+  
+    return (tdx * tdx) / (rx * rx) + (tdy * tdy) / (ry * ry) <= 1;
+  }
+};
+
+registerShapeUtil(ShapeType.ELLIPSE, EllipseUtil);

package/src/model/core/ellipse/index.ts

@@ -0,0 +1,2 @@
+export * from './Ellipse';
+export * from './ellipseUtils';

package/src/model/core/index.ts

@@ -0,0 +1,6 @@
+export * from './ellipse';
+export * from './polygon';
+export * from './rectangle';
+export * from './ImageAnnotation';
+export * from './Shape';
+export * from './shapeUtils';

package/src/model/core/polygon/Polygon.ts

@@ -0,0 +1,15 @@
+import type { Bounds, Geometry, Shape } from '../Shape';
+
+export interface Polygon extends Shape {
+
+  geometry: PolygonGeometry;
+
+}
+
+export interface PolygonGeometry extends Geometry {
+
+  points: Array<Array<number>>;
+
+  bounds: Bounds;
+  
+}

package/src/model/core/polygon/index.ts

@@ -0,0 +1,2 @@
+export * from './Polygon';
+export * from './polygonUtils';

package/src/model/core/polygon/polygonUtils.ts

@@ -0,0 +1,43 @@
+import { ShapeType } from '../Shape';
+import { registerShapeUtil, type ShapeUtil } from '../shapeUtils';
+import type { Polygon } from './Polygon';
+
+const PolygonUtil: ShapeUtil<Polygon> = {
+
+  area: (polygon: Polygon): number => {
+    const { points } = polygon.geometry;
+
+    let area = 0;
+    let j = points.length - 1;
+
+    for (let i = 0; i < points.length; i++) {
+      area += (points[j][0] + points[i][0]) * (points[j][1] - points[i][1]);
+      j = i;
+    }
+
+    return Math.abs(0.5 * area);
+  },
+
+  intersects: (polygon: Polygon, x: number, y: number): boolean => {
+    // Based on https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html/pnpoly.html
+    const { points } = polygon.geometry;
+
+    let inside = false;
+
+    for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+      const xi = points[i][0],
+        yi = points[i][1];
+      const xj = points[j][0],
+        yj = points[j][1];
+
+      const intersect = yi > y != yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+
+      if (intersect) inside = !inside;
+    }
+
+    return inside;
+  }
+  
+};
+
+registerShapeUtil(ShapeType.POLYGON, PolygonUtil);

package/src/model/core/rectangle/Rectangle.ts

@@ -0,0 +1,21 @@
+import type { Bounds, Geometry, Shape } from '../Shape';
+
+export interface Rectangle extends Shape {
+
+  geometry: RectangleGeometry;
+  
+}
+
+export interface RectangleGeometry extends Geometry {
+
+  x: number;
+
+  y: number;
+
+  w: number;
+
+  h: number;
+
+  bounds: Bounds;
+
+}

package/src/model/core/rectangle/index.ts

@@ -0,0 +1,2 @@
+export * from './Rectangle';
+export * from './rectangleUtils';

package/src/model/core/rectangle/rectangleUtils.ts

@@ -0,0 +1,17 @@
+import { ShapeType } from '../Shape';
+import type { Rectangle } from './Rectangle';
+import { registerShapeUtil, type ShapeUtil } from '../shapeUtils';
+
+export const RectangleUtil: ShapeUtil<Rectangle> = {
+
+  area: (rect: Rectangle): number => rect.geometry.w * rect.geometry.h,
+
+  intersects: (rect: Rectangle, x: number, y: number): boolean =>
+    x >= rect.geometry.x &&
+    x <= rect.geometry.x + rect.geometry.w &&
+    y >= rect.geometry.y &&
+    y <= rect.geometry.y + rect.geometry.h
+    
+};
+
+registerShapeUtil(ShapeType.RECTANGLE, RectangleUtil);

package/src/model/core/shapeUtils.ts

@@ -0,0 +1,57 @@
+import type { Bounds, Shape, ShapeType } from './Shape';
+
+export interface ShapeUtil<T extends Shape> {
+
+  area: (shape: T) => number;
+
+  intersects: (shape: T, x: number, y: number) => boolean;
+
+}
+
+const Utils: { [key: string]: ShapeUtil<any> } = {};
+
+/**
+ * Registers a new ShapeUtil for a given shape type.
+ * @param type the shape type
+ * @param util the ShapeUtil implementation for this shape type
+ */
+export const registerShapeUtil = (type: ShapeType | string, util: ShapeUtil<any>) =>
+  (Utils[type] = util);
+
+/**
+ * Computes the area of the given shape. Delegates to the corresponding ShapeUtil.
+ * @param shape the shape
+ */
+export const computeArea = (shape: Shape) => Utils[shape.type].area(shape);
+
+/**
+ * Tests if the given shape intersects the given point. Delegates to
+ * the corresponding ShapeUtil.
+ * @param shape the shape
+ * @param x point x coord
+ * @param y point y coord
+ * @returns true if shape and point intersect
+ */
+export const intersects = (shape: Shape, x: number, y: number): boolean =>
+  Utils[shape.type].intersects(shape, x, y);
+
+/**
+ * Computes Bounds from a given list of points.
+ * @param points the points
+ * @returns the Bounds
+ */
+export const boundsFromPoints = (points: Array<[number, number]>): Bounds => {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  points.forEach(([x, y]) => {
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  });
+
+  return { minX, minY, maxX, maxY };
+};

package/src/model/index.ts

@@ -0,0 +1,2 @@
+export * from './core';
+export * from './w3c';

package/src/model/w3c/W3CImageFormatAdapter.ts

@@ -0,0 +1,83 @@
+import { v4 as uuidv4 } from 'uuid';
+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 { parseFragmentSelector, serializeFragmentSelector } from './fragment';
+import type { SVGSelector } from './svg';
+import { parseSVGSelector, serializeSVGSelector } from './svg';
+
+export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CAnnotation>;
+
+export const W3CImageFormat = (
+  source: string,
+  invertY: boolean = false
+): W3CImageFormatAdapter => {
+
+  const parse = (serialized: W3CAnnotation) =>
+    parseW3CImageAnnotation(serialized, invertY);
+
+  const serialize = (annotation: ImageAnnotation) =>
+    serializeW3CImageAnnotation(annotation, source);
+
+  return { parse, serialize }
+}
+
+export const parseW3CImageAnnotation = (
+  annotation: W3CAnnotation, 
+  invertY: boolean = false
+): ParseResult<ImageAnnotation> => {
+  const annotationId = annotation.id || uuidv4();
+
+  const bodies = parseW3CBodies(annotation.body, annotationId);
+
+  const target = Array.isArray(annotation.target) ? annotation.target[0] : annotation.target;
+
+  const w3cSelector = Array.isArray(target.selector) ? target.selector[0] : target.selector;
+
+  const selector = 
+    w3cSelector.type === 'FragmentSelector' ?
+      parseFragmentSelector(w3cSelector as FragmentSelector, invertY) :
+    w3cSelector.type === 'SvgSelector' ?
+      parseSVGSelector(w3cSelector as SVGSelector) : undefined;
+
+  return selector ? { 
+    parsed: {
+      ...annotation,
+      id: annotationId,
+      bodies,
+      target: {
+        annotation: annotationId,
+        selector
+      }
+    }
+  } : {
+    error: Error(`Unknown selector type: ${selector.type}`)
+  };
+
+}
+
+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 {
+    ...annotation,
+    '@context': 'http://www.w3.org/ns/anno.jsonld',
+    id: annotation.id,
+    type: 'Annotation',
+    body: serializeW3CBodies(annotation.bodies),
+    target: {
+      source,
+      selector
+    }
+  };
+};

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

@@ -0,0 +1,59 @@
+import type { W3CSelector } from '@annotorious/core';
+import { ShapeType } from '../../core';
+import type { Rectangle, RectangleGeometry } from '../../core';
+
+export interface FragmentSelector extends W3CSelector {
+
+  type: 'FragmentSelector';
+
+  conformsTo: 'http://www.w3.org/TR/media-frags/',
+
+  value: string;
+  
+}
+
+export const parseFragmentSelector = (
+  fragmentOrSelector: FragmentSelector | string,
+  invertY = false
+): Rectangle => {
+
+  const fragment =
+    typeof fragmentOrSelector === 'string' ? fragmentOrSelector : fragmentOrSelector.value;
+
+  const regex = /^(xywh)=(pixel|percent)?:?(.+?),(.+?),(.+?),(.+)*/g;
+
+  const matches = [...fragment.matchAll(regex)][0];
+  const [_, prefix, unit, a, b, c, d] = matches;
+
+  if (prefix !== 'xywh') throw new Error('Unsupported MediaFragment: ' + fragment);
+
+  if (unit && unit !== 'pixel') throw new Error(`Unsupported MediaFragment unit: ${unit}`);
+
+  const [x, y, w, h] = [a, b, c, d].map(parseFloat);
+
+  return {
+    type: ShapeType.RECTANGLE,
+    geometry: {
+      x,
+      y,
+      w,
+      h,
+      bounds: {
+        minX: x,
+        minY: invertY ? y - h : y,
+        maxX: x + w,
+        maxY: invertY ? y : y + h
+      }
+    }
+  }
+};
+
+export const serializeFragmentSelector = (geometry: RectangleGeometry): FragmentSelector => {
+  const { x, y, w, h } = geometry;
+  
+  return {
+    type: 'FragmentSelector',
+    conformsTo: 'http://www.w3.org/TR/media-frags/',
+    value: `xywh=pixel:${x},${y},${w},${h}`
+  };
+};

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

@@ -0,0 +1 @@
+export * from './FragmentSelector';

package/src/model/w3c/index.ts

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

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

@@ -0,0 +1,36 @@
+export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+
+export const sanitize = (doc: Element | Document) => {
+  // Cf. https://github.com/mattkrick/sanitize-svg#readme  
+  // for the basic approach
+  const cleanEl = (el: Element) => {
+    Array.from(el.attributes).forEach(attr => {
+      if (attr.name.startsWith('on'))
+        el.removeAttribute(attr.name)
+    });
+  }
+
+  // Remove script tags
+  const scripts = doc.getElementsByTagName('script');
+
+  Array.from(scripts).reverse().forEach(el =>
+    el.parentNode.removeChild(el));
+
+  Array.from(doc.querySelectorAll('*')).forEach(cleanEl);
+
+  return doc;
+}
+
+/** Helper that forces an un-namespaced node to SVG **/
+export const insertSVGNamespace = (originalDoc: Document): Element => {
+  // Serialize and parse for the namespace to take effect on every node
+  const serializer = new XMLSerializer();
+  const str = serializer.serializeToString(originalDoc.documentElement);
+
+  // Doesn't seem that there's a clean cross-browser way for this...
+  const namespaced = str.replace('<svg>', `<svg xmlns="${SVG_NAMESPACE}">`);
+
+  const parser = new DOMParser();
+  const namespacedDoc = parser.parseFromString(namespaced, "image/svg+xml");
+  return namespacedDoc.documentElement;
+}

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

@@ -0,0 +1,99 @@
+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';
+
+export interface SVGSelector extends W3CSelector {
+
+  type: 'SvgSelector';
+
+  value: string;
+  
+}
+
+const parseSVGXML = (value: string): Element => {
+  const parser = new DOMParser();
+
+  const doc = parser.parseFromString(value, "image/svg+xml");
+
+  // SVG needs a namespace declaration - check if it's set or insert if not
+  const isPrefixDeclared = doc.lookupPrefix(SVG_NAMESPACE); // SVG declared via prefix
+  const isDefaultNamespaceSVG = doc.lookupNamespaceURI(null); // SVG declared as default namespace
+
+  if (isPrefixDeclared || isDefaultNamespaceSVG) {
+    return sanitize(doc).firstChild as Element;
+  } else {
+    return sanitize(insertSVGNamespace(doc)).firstChild as 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 {
+    type: ShapeType.POLYGON,
+    geometry: {
+      points,
+      bounds: boundsFromPoints(points as [number, number][])
+    }
+  };
+}
+
+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 bounds = {
+    minX: cx - rx,
+    minY: cy - ry,
+    maxX: cx + rx,
+    maxY: cy + ry
+  };
+
+  return {
+    type: ShapeType.ELLIPSE,
+    geometry: {
+      cx,
+      cy,
+      rx,
+      ry,
+      bounds
+    }
+  };
+}
+
+export const parseSVGSelector = <T extends Shape>(valueOrSelector: SVGSelector | string): T => {
+  const value = typeof valueOrSelector === 'string' ? valueOrSelector : valueOrSelector.value;
+
+  if (value.includes('<polygon points='))
+    return parseSVGPolygon(value) as unknown as T;
+  else if (value.includes('<ellipse ')) 
+    return parseSVGEllipse(value) as unknown as T;
+}
+
+export const serializeSVGSelector = (shape: Shape): SVGSelector => {
+  let value: string;
+
+  if (shape.type === ShapeType.POLYGON) {
+    const geom = shape.geometry as PolygonGeometry;
+    const { points } = geom;
+    value = `<svg><polygon points="${points.map((xy) => xy.join(',')).join(' ')}" /></svg>`;
+  } else if (shape.type === ShapeType.ELLIPSE) {
+    const geom = shape.geometry as EllipseGeometry;
+    value = `<svg><ellipse cx="${geom.cx}" cy="${geom.cy}" rx="${geom.rx}" ry="${geom.ry}" /></svg>`
+  }
+
+  if (value) {
+    return { type: 'SvgSelector', value };
+  } else {
+    throw `Unsupported shape type: ${shape.type}`;
+  }
+}

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

@@ -0,0 +1 @@
+export * from './SVGSelector';