@annotorious/annotorious 3.2.0 → 3.2.1

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.2.0",
+  "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",
@@ -49,8 +49,9 @@
     "vitest": "^3.0.8"
   },
   "dependencies": {
-    "@annotorious/core": "3.2.0",
+    "@annotorious/core": "3.2.1",
     "rbush": "^4.0.1",
+    "svg-pathdata": "^7.1.0",
     "uuid": "^11.1.0"
   }
 }

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) {

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

@@ -0,0 +1,73 @@
+import { SVGPathData } from 'svg-pathdata';
+import { boundsFromPoints, type MultiPolygonElement, type MultiPolygonRing } from '../../core';
+
+export const svgPathToMultiPolygonElement = (d: string): MultiPolygonElement | undefined => {
+  const commands = new SVGPathData(d).toAbs().commands;
+  
+  const rings: MultiPolygonRing[] = [];
+
+  let currentRing: [number, number][] = [];
+  let startPoint: [number, number] | null = null;
+  
+  for (const cmd of commands) {
+    switch (cmd.type) {
+      case SVGPathData.MOVE_TO:
+        // Start a new ring
+        if (currentRing.length > 0) {
+          rings.push({ points: currentRing });
+          currentRing = [];
+        }
+
+        startPoint = [cmd.x, cmd.y];
+        currentRing.push(startPoint);
+        break;
+        
+      case SVGPathData.LINE_TO:
+        currentRing.push([cmd.x, cmd.y]);
+        break;
+        
+      case SVGPathData.HORIZ_LINE_TO:
+        // Get the last Y coordinate since H command only specifies X
+        const lastY = currentRing[currentRing.length - 1][1];
+        currentRing.push([cmd.x, lastY]);
+        break;
+        
+      case SVGPathData.VERT_LINE_TO:
+        // Get the last X coordinate since V command only specifies Y
+        const lastX = currentRing[currentRing.length - 1][0];
+        currentRing.push([lastX, cmd.y]);
+        break;
+      
+      /** Might be needed in the future **
+      case SVGPathData.CLOSE_PATH:
+        if (startPoint && 
+            (currentRing[currentRing.length - 1][0] !== startPoint[0] || 
+              currentRing[currentRing.length - 1][1] !== startPoint[1])) {
+          currentRing.push([...startPoint]);
+        }
+        rings.push({ points: currentRing });
+        currentRing = [];
+        startPoint = null;
+        break;
+      **/
+
+      // For curve commands, we just add the end point
+      case SVGPathData.CURVE_TO:
+      case SVGPathData.SMOOTH_CURVE_TO:
+      case SVGPathData.QUAD_TO:
+      case SVGPathData.SMOOTH_QUAD_TO:
+      case SVGPathData.ARC:
+        currentRing.push([cmd.x, cmd.y]);
+        break;
+    }
+  }
+  
+  if (currentRing.length > 2)
+    rings.push({ points: currentRing });
+  
+  if (rings.length > 0) {
+    const bounds = boundsFromPoints(rings[0].points);    
+    return { rings, bounds };
+  }
+
+}