@annotorious/annotorious 3.6.1 → 3.6.2

package/dist/model/core/polyline/polylineUtils.d.ts

@@ -1,3 +1,3 @@
-import { PolylineGeometry } from './Polyline';
-export declare const approximateAsPolygon: (geom: PolylineGeometry) => [number, number][];
+import { PolylineGeometry, PolylinePoint } from './Polyline';
+export declare const approximateAsPolygon: (corners: PolylinePoint[], closed?: boolean) => [number, number][];
 export declare const computeSVGPath: (geom: PolylineGeometry) => string;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -49,11 +49,10 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@annotorious/core": "3.6.1",
+    "@annotorious/core": "3.6.2",
     "dequal": "^2.0.3",
     "rbush": "^4.0.1",
     "simplify-js": "^1.2.4",
-    "svg-pathdata": "^8.0.0",
     "uuid": "^11.1.0"
   }
 }

package/src/model/core/polyline/polylineUtils.ts

@@ -1,6 +1,6 @@
 import { ShapeType } from '../Shape';
 import { computePolygonArea, isPointInPolygon, registerShapeUtil, type ShapeUtil } from '../shapeUtils';
-import type { Polyline, PolylineGeometry } from './Polyline';
+import type { Polyline, PolylineGeometry, PolylinePoint } from './Polyline';
 
 const PolylineUtil: ShapeUtil<Polyline> = {
 
@@ -10,7 +10,7 @@ const PolylineUtil: ShapeUtil<Polyline> = {
     if (!geom.closed || geom.points.length < 3)
       return 0;
 
-    const points = approximateAsPolygon(geom);
+    const points = approximateAsPolygon(geom.points, geom.closed);
     return computePolygonArea(points);
   },
 
@@ -18,7 +18,7 @@ const PolylineUtil: ShapeUtil<Polyline> = {
     const geom = polyline.geometry;
     
     if (geom.closed) {
-      const points = approximateAsPolygon(geom);
+      const points = approximateAsPolygon(geom.points, geom.closed);
       return isPointInPolygon(points, x, y);
     } else {
       return isPointNearPath(geom, [x, y], buffer);
@@ -27,17 +27,17 @@ const PolylineUtil: ShapeUtil<Polyline> = {
   
 };
 
-export const approximateAsPolygon = (geom: PolylineGeometry): [number, number][] => {
+export const approximateAsPolygon = (corners: PolylinePoint[], closed = false): [number, number][] => {
   const points: [number, number][] = [];
   
-  for (let i = 0; i < geom.points.length; i++) {
-    const currentPoint = geom.points[i];
-    const nextPoint = geom.points[(i + 1) % geom.points.length];
+  for (let i = 0; i < corners.length; i++) {
+    const currentPoint = corners[i];
+    const nextPoint = corners[(i + 1) % corners.length];
     
     points.push(currentPoint.point);
     
     // If there's a curve to the next point, approximate it
-    if (i < geom.points.length - 1 || geom.closed) {
+    if (i < corners.length - 1 || closed) {
       const hasCurve = currentPoint.outHandle || nextPoint.inHandle;
       if (hasCurve) {
         const curvePoints = approximateBezierCurve(

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

@@ -1,6 +1,6 @@
-import { boundsFromPoints, multipolygonElementToPath, ShapeType } from '../../core';
+import { boundsFromPoints, computeSVGPath, multipolygonElementToPath, ShapeType } from '../../core';
 import { parseSVGXML } from './SVG';
-import { svgPathToMultiPolygonElement } from './pathParser';
+import { svgPathToMultiPolygonElement, svgPathToPolyline } from './pathParser';
 import type { 
   Ellipse, 
   EllipseGeometry, 
@@ -10,6 +10,8 @@ import type {
   MultiPolygonGeometry, 
   Polygon, 
   PolygonGeometry, 
+  Polyline,
+  PolylineGeometry, 
   Shape 
 } from '../../core';
 
@@ -85,7 +87,27 @@ const parseSVGLine = (value: string): Line => {
   };
 }
 
-const parseSVGPath = (value: string): Polygon | MultiPolygon => {
+const parseSVGPathToPolyline = (value: string): Polyline => {
+  const doc = parseSVGXML(value);
+
+  const path = doc.nodeName === 'path' ? doc : Array.from(doc.querySelectorAll('path'))[0];
+  const d = path?.getAttribute('d');
+
+  if (!d)
+    throw new Error('Could not parse SVG path');
+
+  const polyline = svgPathToPolyline(d);
+
+  if (!polyline)
+    throw new Error('Could not parse SVG path');
+
+  return {
+    type: ShapeType.POLYLINE,
+    geometry: polyline
+  }
+}
+
+const parseSVGPathToPolygon = (value: string): Polygon | MultiPolygon => {
   const doc = parseSVGXML(value);
 
   const paths = doc.nodeName === 'path' ? [doc] : Array.from(doc.querySelectorAll('path'));
@@ -121,8 +143,10 @@ export const parseSVGSelector = <T extends Shape>(valueOrSelector: SVGSelector |
 
   if (value.includes('<polygon points='))
     return parseSVGPolygon(value) as unknown as T;
+  else if (value.includes('<path ') && (value.includes(' C ') || !value.includes('Z')))
+    return parseSVGPathToPolyline(value) as unknown as T;
   else if (value.includes('<path '))
-    return parseSVGPath(value) as unknown as T;
+    return parseSVGPathToPolygon(value) as unknown as T;
   else if (value.includes('<ellipse ')) 
     return parseSVGEllipse(value) as unknown as T;
   else if (value.includes("<line "))
@@ -164,6 +188,10 @@ export const serializeSVGSelector = (shape: Shape): SVGSelector => {
       value = `<svg><line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" /></svg>`;
       break;
     }
+    case ShapeType.POLYLINE: {
+      const d = computeSVGPath(shape.geometry as PolylineGeometry);
+      value = `<svg><path d="${d}" /></svg>`;
+    }
   }
 
   if (value) {

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

@@ -1,63 +1,52 @@
-import { SVGPathData } from 'svg-pathdata';
-import { boundsFromPoints, type MultiPolygonElement, type MultiPolygonRing } from '../../core';
+import { approximateAsPolygon, boundsFromPoints } from '../../core';
+import type { MultiPolygonElement, MultiPolygonRing, PolylineGeometry, PolylinePoint } from '../../core';
 
 export const svgPathToMultiPolygonElement = (d: string): MultiPolygonElement | undefined => {
-  const commands = new SVGPathData(d).toAbs().commands;
+  const commands = parsePathCommands(d);
   
   const rings: MultiPolygonRing[] = [];
-
   let currentRing: [number, number][] = [];
-  let startPoint: [number, number] | null = null;
+  let currentPoint: [number, number] = [0, 0];
   
   for (const cmd of commands) {
-    switch (cmd.type) {
-      case SVGPathData.MOVE_TO:
+    switch (cmd.type.toUpperCase()) {
+      case 'M':
         // Start a new ring
         if (currentRing.length > 0) {
           rings.push({ points: currentRing });
           currentRing = [];
         }
-
-        startPoint = [cmd.x, cmd.y];
-        currentRing.push(startPoint);
+        currentPoint = [cmd.args[0], cmd.args[1]];
+        currentRing.push([...currentPoint]);
         break;
         
-      case SVGPathData.LINE_TO:
-        currentRing.push([cmd.x, cmd.y]);
+      case 'L':
+        currentPoint = [cmd.args[0], cmd.args[1]];
+        currentRing.push([...currentPoint]);
         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]);
+      case 'H':
+        currentPoint = [cmd.args[0], currentPoint[1]];
+        currentRing.push([...currentPoint]);
         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]);
+      case 'V':
+        currentPoint = [currentPoint[0], cmd.args[0]];
+        currentRing.push([...currentPoint]);
         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;
+        
+      case 'C':
+        // For multi-polygon, we only care about the end point
+        currentPoint = [cmd.args[4], cmd.args[5]];
+        currentRing.push([...currentPoint]);
         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]);
+        
+      case 'Z':
+        // Close the current ring (no action needed since we don't track closed state here)
+        break;
+        
+      default:
+        console.warn(`Unsupported SVG path command: ${cmd.type}`);
         break;
     }
   }
@@ -69,5 +58,108 @@ export const svgPathToMultiPolygonElement = (d: string): MultiPolygonElement | u
     const bounds = boundsFromPoints(rings[0].points);    
     return { rings, bounds };
   }
+}
+
+export const svgPathToPolyline = (d: string): PolylineGeometry => {
+  const commands = parsePathCommands(d);
+
+  const points: PolylinePoint[] = [];
+
+  let currentPoint: [number, number] = [0, 0];
+  let closed = false;
+
+  for (let i = 0; i < commands.length; i++) {
+    const cmd = commands[i];
+    
+    switch (cmd.type.toUpperCase()) {
+      case 'M':
+        currentPoint = [cmd.args[0], cmd.args[1]];
+        points.push({
+          type: 'CORNER',
+          point: [...currentPoint]
+        });
+        break;
+        
+      case 'L':
+        currentPoint = [cmd.args[0], cmd.args[1]];
+        points.push({
+          type: 'CORNER',
+          point: [...currentPoint]
+        });
+        break;
+        
+      case 'C':
+        const cp1: [number, number] = [cmd.args[0], cmd.args[1]];
+        const cp2: [number, number] = [cmd.args[2], cmd.args[3]];
+        const endPoint: [number, number] = [cmd.args[4], cmd.args[5]];
+        
+        // Set outHandle for the previous point if it doesn't match the point itself
+        if (points.length > 0) {
+          const prevPoint = points[points.length - 1];
+          if (cp1[0] !== prevPoint.point[0] || cp1[1] !== prevPoint.point[1]) {
+            prevPoint.type = 'CURVE';
+            prevPoint.outHandle = cp1;
+          }
+        }
+        
+        // Create the end point with inHandle if it doesn't match the point itself
+        const newPoint: PolylinePoint = {
+          type: cp2[0] !== endPoint[0] || cp2[1] !== endPoint[1] ? 'CURVE' : 'CORNER',
+          point: endPoint
+        };
+        
+        if (newPoint.type === 'CURVE')
+          newPoint.inHandle = cp2;
+        
+        points.push(newPoint);
+        currentPoint = endPoint;
+        break;
+        
+      case 'Z':
+        closed = true;
+        break;
+        
+      default:
+        console.warn(`Unsupported SVG path command: ${cmd.type}`);
+        break;
+    }
+  }
+
+  const bounds = boundsFromPoints(approximateAsPolygon(points, closed));
 
+  return {
+    points,
+    closed,
+    bounds
+  };
+}
+
+interface PathCommand {
+
+  type: string;
+
+  args: number[];
+
+}
+
+const parsePathCommands = (d: string) => {
+  const commands: PathCommand[] = [];
+  const cleanPath = d.replace(/,/g, ' ').trim();
+  
+  // Updated regex to include H and V commands
+  const commandRegex = /([MmLlHhVvCcZz])\s*([^MmLlHhVvCcZz]*)/g;
+  let match;
+  
+  while ((match = commandRegex.exec(cleanPath)) !== null) {
+    const [, commandLetter, argsString] = match;
+    const args = argsString.trim() === '' ? [] : 
+      argsString.trim().split(/\s+/).map(Number).filter(n => !isNaN(n));
+    
+    commands.push({
+      type: commandLetter,
+      args
+    });
+  }
+  
+  return commands;
 }