@annotorious/annotorious 3.1.7 → 3.2.1

package/dist/model/core/Shape.d.ts

@@ -5,6 +5,7 @@ export interface Shape extends AbstractSelector {
 }
 export declare enum ShapeType {
     ELLIPSE = "ELLIPSE",
+    MULTIPOLYGLON = "MULTIPOLYGON",
     POLYGON = "POLYGON",
     RECTANGLE = "RECTANGLE"
 }

package/dist/model/core/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ellipse';
+export * from './multipolygon';
 export * from './polygon';
 export * from './rectangle';
 export * from './ImageAnnotation';

package/dist/model/core/multipolygon/MultiPolygon.d.ts

@@ -0,0 +1,15 @@
+import { Bounds, Geometry, Shape } from '../Shape';
+export interface MultiPolygon extends Shape {
+    geometry: MultiPolygonGeometry;
+}
+export interface MultiPolygonGeometry extends Geometry {
+    polygons: Array<MultiPolygonElement>;
+    bounds: Bounds;
+}
+export interface MultiPolygonElement {
+    rings: Array<MultiPolygonRing>;
+    bounds: Bounds;
+}
+export interface MultiPolygonRing {
+    points: Array<[number, number]>;
+}

package/dist/model/core/multipolygon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MultiPolygon';
+export * from './multiPolygonUtils';

package/dist/model/core/multipolygon/multiPolygonUtils.d.ts

@@ -0,0 +1,3 @@
+import { MultiPolygonElement } from './MultiPolygon';
+export declare const boundsFromMultiPolygonElements: (elements: MultiPolygonElement[]) => import('../Shape').Bounds;
+export declare const multipolygonElementToPath: (element: MultiPolygonElement) => string;

package/dist/model/core/shapeUtils.d.ts

@@ -29,3 +29,6 @@ export declare const intersects: (shape: Shape, x: number, y: number) => boolean
  * @returns the Bounds
  */
 export declare const boundsFromPoints: (points: Array<[number, number]>) => Bounds;
+export declare const computePolygonArea: (points: [number, number][]) => number;
+export declare const isPointInPolygon: (points: [number, number][], x: number, y: number) => boolean;
+export declare const pointsToPath: (points: [number, number][], close?: boolean) => string;

package/dist/model/w3c/svg/SVG.d.ts

@@ -2,3 +2,4 @@ export declare const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 export declare const sanitize: (doc: Element | Document) => Element | Document;
 /** Helper that forces an un-namespaced node to SVG **/
 export declare const insertSVGNamespace: (originalDoc: Document) => Element;
+export declare const parseSVGXML: (value: string) => Element;

package/dist/model/w3c/svg/pathParser.d.ts

@@ -0,0 +1,2 @@
+import { MultiPolygonElement } from '../../core';
+export declare const svgPathToMultiPolygonElement: (d: string) => MultiPolygonElement | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.1.7",
+  "version": "3.2.1",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -45,12 +45,13 @@
     "svelte-preprocess": "^6.0.3",
     "typescript": "5.8.2",
     "vite": "^5.4.14",
-    "vite-plugin-dts": "^4.5.0",
+    "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.8"
   },
   "dependencies": {
-    "@annotorious/core": "3.1.7",
+    "@annotorious/core": "3.2.1",
     "rbush": "^4.0.1",
+    "svg-pathdata": "^7.1.0",
     "uuid": "^11.1.0"
   }
 }

package/src/Annotorious.css

@@ -28,6 +28,7 @@
 }
 
 .a9s-annotationlayer ellipse, 
+.a9s-annotationlayer path,
 .a9s-annotationlayer polygon,
 .a9s-annotationlayer rect  {
   fill: transparent;

package/src/annotation/SVGAnnotationLayer.svelte

@@ -12,6 +12,7 @@
   import { addEventListeners, getSVGPoint } from './SVGAnnotationLayerPointerEvent';
   import type { SvelteImageAnnotatorState } from 'src/state';
   import type { DrawingMode } from 'src/AnnotoriousOpts';
+    import MultiPolygon from './shapes/MultiPolygon.svelte';
 
   /** Props **/
   export let drawingEnabled: boolean;
@@ -172,6 +173,11 @@
               annotation={annotation} 
               geom={selector.geometry} 
               style={style} />
+          {:else if (selector?.type === ShapeType.MULTIPOLYGLON)}
+            <MultiPolygon
+              annotation={annotation}
+              geom={selector.geometry}
+              style={style} />
           {/if}
         {/key}
       {/if}

package/src/annotation/editors/editorsRegistry.ts

@@ -1,11 +1,13 @@
-import { ShapeType, type Shape } from '../../model';
 import type { SvelteComponent } from 'svelte';
+import { ShapeType, type Shape } from '../../model';
+import { MultiPolygonEditor } from './multipolygon';
 import { PolygonEditor } from './polygon';
 import { RectangleEditor } from './rectangle';
 
 const REGISTERED = new Map<ShapeType, typeof SvelteComponent>([
   [ShapeType.RECTANGLE, RectangleEditor as typeof SvelteComponent],
-  [ShapeType.POLYGON, PolygonEditor as typeof SvelteComponent]
+  [ShapeType.POLYGON, PolygonEditor as typeof SvelteComponent],
+  [ShapeType.MULTIPOLYGLON, MultiPolygonEditor as typeof SvelteComponent]
 ]);
 
 export const getEditor = (shape: Shape) => REGISTERED.get(shape.type);

package/src/annotation/editors/multipolygon/MultiPolygonEditor.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { 
+    MultiPolygon, 
+    MultiPolygonElement, 
+    MultiPolygonGeometry, 
+    Shape 
+  } from '../../../model';
+  import { 
+    boundsFromMultiPolygonElements, 
+    boundsFromPoints, 
+    multipolygonElementToPath 
+  } from '../../../model';
+  import type { Transform } from '../../Transform';
+  import { Editor, Handle } from '..';
+
+  /** Props */
+  export let shape: MultiPolygon;
+  export let computedStyle: string | undefined;
+  export let transform: Transform;
+  export let viewportScale: number = 1;
+
+  $: geom = shape.geometry;
+
+  const editor = (shape: Shape, handle: string, delta: [number, number]) => {
+    const elements = ((shape.geometry) as MultiPolygonGeometry).polygons;
+
+    let updated: MultiPolygonElement[];
+
+    if (handle === 'SHAPE') {
+      updated = elements.map(element => {
+        const rings = element.rings.map((ring, r) => {
+          const points = ring.points.map((point, p) => {
+            return [point[0] + delta[0], point[1] + delta[1]];
+          });
+
+          return { points };
+        });
+
+        const bounds = boundsFromPoints(rings[0].points as [number, number][]);
+        return { rings, bounds } as MultiPolygonElement;
+      });
+    } else {
+      const [_, elementIdx, ringIdx, pointIdx] = handle.split('-').map(str => parseInt(str));
+
+      updated = elements.map((element, e) => {
+        if (e === elementIdx) {
+          const rings = element.rings.map((ring, r) => {
+            if (r === ringIdx) {
+              const points = ring.points.map((point, p) => {
+                if (p === pointIdx) {
+                  return [point[0] + delta[0], point[1] + delta[1]];
+                } else {
+                  return point;
+                }
+              });
+
+              return { points };
+            } else {
+              return ring;
+            }
+          });
+
+          const bounds = boundsFromPoints(rings[0].points as [number, number][]);
+          return { rings, bounds } as MultiPolygonElement;
+        } else {
+          return element;
+        }
+      });
+    }
+
+    return { 
+      ...shape, 
+      geometry: {
+        polygons: updated,
+        bounds: boundsFromMultiPolygonElements(updated)
+      } 
+    } as MultiPolygon;
+  }
+</script>
+
+<Editor
+  shape={shape}
+  transform={transform}
+  editor={editor}
+  on:change 
+  on:grab
+  on:release
+  let:grab={grab}>
+
+  {#each geom.polygons as element, elementIdx}
+    <g>
+      <path 
+        class="a9s-outer"
+        style={computedStyle ? 'display:none;' : undefined}
+        fill-rule="evenodd"
+        on:pointerdown={grab('SHAPE')}
+        d={multipolygonElementToPath(element)} />
+
+      <path 
+        class="a9s-inner"
+        style={computedStyle}
+        fill-rule="evenodd"
+        on:pointerdown={grab('SHAPE')}
+        d={multipolygonElementToPath(element)} />
+
+      {#each element.rings as ring, ringIdx}
+        {#each ring.points as point, pointIdx}
+          <Handle 
+            on:pointerdown={grab(`HANDLE-${elementIdx}-${ringIdx}-${pointIdx}`)}
+            x={point[0]} y={point[1]} 
+            scale={viewportScale} />
+        {/each}
+      {/each}
+    </g>
+  {/each}
+</Editor>

package/src/annotation/editors/multipolygon/index.ts

@@ -0,0 +1 @@
+export { default as MultiPolygonEditor } from './MultiPolygonEditor.svelte';

package/src/annotation/shapes/MultiPolygon.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { DrawingStyleExpression } from '@annotorious/core';
+  import { multipolygonElementToPath } from '../../model';
+  import type { Geometry, ImageAnnotation, MultiPolygonGeometry } from '../../model';
+  import { computeStyle } from '../utils/styling';
+  
+  /** Props **/
+  export let annotation: ImageAnnotation;
+  export let geom: Geometry;
+  export let style: DrawingStyleExpression<ImageAnnotation> | undefined;
+
+  $: computedStyle = computeStyle(annotation, style);
+
+  const { polygons } = geom as MultiPolygonGeometry;
+</script>
+
+<g class="a9s-annotation" data-id={annotation.id}>
+  {#each polygons as polygonElement}
+    <path 
+      class="a9s-outer"
+      style={computedStyle ? 'display:none;' : undefined}
+      fill-rule="evenodd"
+      d={multipolygonElementToPath(polygonElement)} />
+
+    <path 
+      class="a9s-inner"
+      style={computedStyle}
+      fill-rule="evenodd"
+      d={multipolygonElementToPath(polygonElement)} />
+  {/each}
+</g>

package/src/annotation/shapes/index.ts

@@ -1,3 +1,4 @@
 export { default as Ellipse } from './Ellipse.svelte';
+export { default as MultiPolygon } from './MultiPolygon.svelte';
 export { default as Polygon } from './Polygon.svelte';
 export { default as Rectangle } from './Rectangle.svelte';

package/src/model/core/Shape.ts

@@ -12,6 +12,8 @@ export enum ShapeType {
 
   ELLIPSE = 'ELLIPSE',
 
+  MULTIPOLYGLON = 'MULTIPOLYGON',
+
   POLYGON = 'POLYGON',
 
   RECTANGLE = 'RECTANGLE'

package/src/model/core/index.ts

@@ -1,4 +1,5 @@
 export * from './ellipse';
+export * from './multipolygon';
 export * from './polygon';
 export * from './rectangle';
 export * from './ImageAnnotation';

package/src/model/core/multipolygon/MultiPolygon.ts

@@ -0,0 +1,30 @@
+import type { Bounds, Geometry, Shape } from '../Shape';
+
+export interface MultiPolygon extends Shape {
+
+  geometry: MultiPolygonGeometry;
+
+}
+
+export interface MultiPolygonGeometry extends Geometry {
+
+  // Each polygon is an array of rings–outer boundardy + holes
+  polygons: Array<MultiPolygonElement>
+
+  bounds: Bounds;
+  
+}
+
+export interface MultiPolygonElement {
+
+  rings: Array<MultiPolygonRing>;
+
+  bounds: Bounds;
+
+}
+
+export interface MultiPolygonRing {
+
+  points: Array<[number, number]>;
+
+}

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

@@ -0,0 +1,2 @@
+export * from './MultiPolygon';
+export * from './multiPolygonUtils';

package/src/model/core/multipolygon/multiPolygonUtils.ts

@@ -0,0 +1,63 @@
+import { ShapeType } from '../Shape';
+import type { ShapeUtil } from '../shapeUtils';
+import { boundsFromPoints, computePolygonArea, isPointInPolygon, pointsToPath, registerShapeUtil } from '../shapeUtils';
+import type { MultiPolygon, MultiPolygonElement } from './MultiPolygon';
+
+const MultiPolygonUtil: ShapeUtil<MultiPolygon> = {
+
+  area: (multiPolygon: MultiPolygon): number => {
+    const { polygons } = multiPolygon.geometry;
+    
+    return polygons.reduce<number>((total, element) => {
+      const [exterior, ...holes] = element.rings;
+      
+      const exteriorArea = computePolygonArea(exterior.points);
+      
+      const holesArea = holes.reduce<number>((total, hole) =>
+        total + computePolygonArea(hole.points), 0);
+      
+      // Add this polygon's contribution to total area
+      return total + exteriorArea - holesArea;
+    }, 0);
+  },
+
+  intersects: (multiPolygon: MultiPolygon, x: number, y: number): boolean => {
+    const { polygons } = multiPolygon.geometry;
+
+    for (const element of polygons) {
+      const [exterior, ...holes] = element.rings;
+      
+      if (isPointInPolygon(exterior.points, x, y)) {
+        let insideAnyHole = false;
+        
+        for (const hole of holes) {
+          if (isPointInPolygon(hole.points, x, y)) {
+            insideAnyHole = true;
+            break;
+          }
+        }
+        
+        if (!insideAnyHole) return true;
+      }
+    }
+
+    return false;
+  }
+  
+}
+
+export const boundsFromMultiPolygonElements = (elements: MultiPolygonElement[]) => {
+  // All outer points, i.e. the points of each outer ring for each element
+  const outerPoints = elements.reduce<[number, number][]>((points, element) => {
+    return [...points, ...element.rings[0].points];
+  }, []);
+
+  return boundsFromPoints(outerPoints);
+}
+
+export const multipolygonElementToPath = (element: MultiPolygonElement) => {
+  const paths = element.rings.map(ring => pointsToPath(ring.points));
+  return paths.join(' ');
+}
+
+registerShapeUtil(ShapeType.MULTIPOLYGLON, MultiPolygonUtil);

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

@@ -1,41 +1,18 @@
 import { ShapeType } from '../Shape';
-import { registerShapeUtil, type ShapeUtil } from '../shapeUtils';
+import type { ShapeUtil } from '../shapeUtils';
+import { computePolygonArea, isPointInPolygon, registerShapeUtil } 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);
+    const points = polygon.geometry.points as [number, number][];
+    return computePolygonArea(points);
   },
 
   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;
+    const points = polygon.geometry.points as [number, number][];
+    return isPointInPolygon(points, x, y);
   }
   
 };

package/src/model/core/shapeUtils.ts

@@ -54,4 +54,52 @@ export const boundsFromPoints = (points: Array<[number, number]>): Bounds => {
   });
 
   return { minX, minY, maxX, maxY };
-};
+}
+
+export const computePolygonArea = (points: [number, number][]) => {
+  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);
+}
+
+export const isPointInPolygon = (points: [number, number][], x: number, y: number): boolean => {
+  // Based on https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html/pnpoly.html
+  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;
+}
+
+export const pointsToPath = (points: [number, number][], close: boolean = true): string => {
+  let d = 'M ';
+
+  points.forEach(([x, y], idx) => {
+    if (idx === 0) {
+      // First point after the M command
+      d += `${x},${y}`;
+    } else {
+      d += ` L ${x},${y}`;
+    }
+  });
+
+  if (close)
+    d += ' Z';
+
+  return d;
+}

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

@@ -33,3 +33,19 @@ export const insertSVGNamespace = (originalDoc: Document): Element => {
   const namespacedDoc = parser.parseFromString(namespaced, "image/svg+xml");
   return namespacedDoc.documentElement;
 }
+
+export 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;
+  }
+}

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

@@ -1,6 +1,15 @@
-import type { Ellipse, EllipseGeometry, Polygon, PolygonGeometry, Shape } from '../../core';
-import { boundsFromPoints, ShapeType } from '../../core';
-import { insertSVGNamespace, sanitize, SVG_NAMESPACE } from './SVG';
+import { boundsFromPoints, multipolygonElementToPath, ShapeType } from '../../core';
+import { parseSVGXML } from './SVG';
+import { svgPathToMultiPolygonElement } from './pathParser';
+import type { 
+  Ellipse, 
+  EllipseGeometry, 
+  MultiPolygon,
+  MultiPolygonGeometry, 
+  Polygon, 
+  PolygonGeometry, 
+  Shape 
+} from '../../core';
 
 export interface SVGSelector {
 
@@ -10,24 +19,8 @@ export interface SVGSelector {
 
 }
 
-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=["|'])([^("|')]*)/) || [];
+  const [_, __, str] = value.match(/(<polygon points=["|'])([^("|')]*)/) || [];
   const points = str.split(' ').map((p) => p.split(',').map(parseFloat));
 
   return {
@@ -66,17 +59,57 @@ const parseSVGEllipse = (value: string): Ellipse => {
   };
 }
 
+const parseSVGPath = (value: string): Polygon | MultiPolygon => {
+  const doc = parseSVGXML(value);
+
+  const paths = doc.nodeName === 'path' ? [doc] : Array.from(doc.querySelectorAll('path'));
+  const d = paths.map(path => path.getAttribute('d') || '');
+
+  const polygons = d.map(d => svgPathToMultiPolygonElement(d)!).filter(Boolean);
+
+  const outerPoints = polygons.reduce<[number, number][]>((points, element) => {
+    return [...points, ...element.rings[0].points]
+  }, []);
+
+  const bounds = boundsFromPoints(outerPoints);
+
+  // No need to create a MultiPolygon if theres only a single element with an outer ring
+  const isSinglePolygon = polygons.length === 1 && polygons[0].rings.length === 1;
+  return isSinglePolygon ? {
+    type: ShapeType.POLYGON,
+    geometry: {
+      points: outerPoints,
+      bounds
+    }
+  } : {
+    type: ShapeType.MULTIPOLYGLON,
+    geometry: {
+      polygons,
+      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('<path '))
+    return parseSVGPath(value) as unknown as T;
   else if (value.includes('<ellipse ')) 
     return parseSVGEllipse(value) as unknown as T;
   else 
     throw 'Unsupported SVG shape: ' + value;
 }
 
+const serializeMultiPolygon = (geom: MultiPolygonGeometry) => {
+  const paths = geom.polygons.map(elem =>
+    `<path fill-rule="evenodd" d="${multipolygonElementToPath(elem)}" />`);
+
+  return `<g>${paths.join('')}</g>`
+} 
+
 export const serializeSVGSelector = (shape: Shape): SVGSelector => {
   let value: string | undefined;
 
@@ -86,7 +119,10 @@ export const serializeSVGSelector = (shape: Shape): SVGSelector => {
     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>`
+    value = `<svg><ellipse cx="${geom.cx}" cy="${geom.cy}" rx="${geom.rx}" ry="${geom.ry}" /></svg>`;
+  } else if (shape.type === ShapeType.MULTIPOLYGLON) {
+    const geom = shape.geometry as MultiPolygonGeometry;
+    value = `<svg>${serializeMultiPolygon(geom)}</svg>`;
   }
 
   if (value) {