@annotorious/annotorious 3.5.1 → 3.6.0

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

@@ -7,6 +7,7 @@ export declare enum ShapeType {
     ELLIPSE = "ELLIPSE",
     MULTIPOLYGON = "MULTIPOLYGON",
     POLYGON = "POLYGON",
+    POLYLINE = "POLYLINE",
     RECTANGLE = "RECTANGLE",
     LINE = "LINE"
 }

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

@@ -2,6 +2,7 @@ export * from './ellipse';
 export * from './line';
 export * from './multipolygon';
 export * from './polygon';
+export * from './polyline';
 export * from './rectangle';
 export * from './ImageAnnotation';
 export * from './Shape';

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

@@ -0,0 +1,16 @@
+import { Bounds, Geometry, Shape } from '../Shape';
+export interface Polyline extends Shape {
+    geometry: PolylineGeometry;
+}
+export interface PolylineGeometry extends Geometry {
+    points: PolylinePoint[];
+    closed?: boolean;
+    bounds: Bounds;
+}
+export interface PolylinePoint {
+    type: 'CORNER' | 'CURVE';
+    point: [number, number];
+    inHandle?: [number, number];
+    outHandle?: [number, number];
+    locked?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export * from './Polyline';
+export * from './polylineUtils';

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

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

package/package.json

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

package/src/annotation/SVGAnnotationLayer.svelte

@@ -4,8 +4,8 @@
   import type { Annotation, DrawingStyleExpression, StoreChangeEvent, User } from '@annotorious/core';
   import { isImageAnnotation, ShapeType } from '../model';
   import type { ImageAnnotation, Shape} from '../model';
-  import { getEditor as _getEditor, EditorMount } from './editors';
-  import { Ellipse, Line, MultiPolygon, Polygon, Rectangle} from './shapes';
+  import { getEditor, EditorMount } from './editors';
+  import { Ellipse, Line, MultiPolygon, Polygon, Polyline, Rectangle} from './shapes';
   import { getTool, listDrawingTools, ToolMount } from './tools';
   import { enableResponsive } from './utils';
   import { createSVGTransform } from './Transform';
@@ -56,8 +56,6 @@
 
   let editableAnnotations: ImageAnnotation[] | undefined;
 
-  $: isEditable = (a: ImageAnnotation) => $selection.selected.find(s => s.id === a.id && s.editable);
-
   $: trackSelection($selection.selected);
 
   const trackSelection = (selected: { id: string, editable?: boolean }[]) => {
@@ -128,7 +126,7 @@
   const onPointerMove = (evt: PointerEvent) => {
     const { x, y } = getSVGPoint(evt, svgEl);
 
-    const hit = store.getAt(x, y);
+    const hit = store.getAt(x, y, undefined, 2);
     if (hit) {
       if ($hover !== hit.id) {
         hover.set(hit.id);
@@ -138,8 +136,13 @@
     }
   }
 
-  // To get around lack of TypeScript support in Svelte markup
-  const getEditor = (shape: Shape): typeof SvelteComponent => _getEditor(shape)!;
+  // [annotation -> editor] - note that we may not have editors available for
+  // all annotations, because they might rely on plugins in some cases!
+  $: editors = editableAnnotations ? editableAnnotations.map(annotation => ({ 
+    annotation, editor: getEditor(annotation.target.selector)! 
+  })).filter(t => t.editor) : undefined; 
+
+  $: isEditable = (a: ImageAnnotation) => editors && editors.some(t => t.annotation.id === a.id);
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -180,6 +183,11 @@
               annotation={annotation}
               geom={selector.geometry}
               style={style} />
+          {:else if (selector?.type === ShapeType.POLYLINE)}
+            <Polyline 
+              annotation={annotation} 
+              geom={selector.geometry}
+              style={style} />
           {:else if (selector?.type === ShapeType.LINE)}
             <Line
               annotation={annotation}
@@ -195,21 +203,18 @@
     bind:this={drawingEl}
     class="drawing" >
     {#if drawingEl}
-      {#if editableAnnotations}
-        {#each editableAnnotations as editable}
-          {@const editor = getEditor(editable.target.selector)}
-          {#if editor}
-            {#key editable.id}        
-              <EditorMount
-                target={drawingEl}
-                editor={getEditor(editable.target.selector)}
-                annotation={editable}
-                style={style}
-                transform={transform}
-                viewportScale={$scale}
-                on:change={onChangeSelected(editable)} />
-            {/key}
-          {/if}
+      {#if editors}
+        {#each editors as editable}
+          {#key editable.annotation.id}        
+            <EditorMount
+              target={drawingEl}
+              editor={editable.editor}
+              annotation={editable.annotation}
+              style={style}
+              transform={transform}
+              viewportScale={$scale}
+              on:change={onChangeSelected(editable.annotation)} />
+          {/key}
         {/each}
       {:else if (tool && drawingEnabled)} 
         {#key `${toolName}-${toolMountKey}`}

package/src/annotation/SVGAnnotationLayerPointerEvent.ts

@@ -27,7 +27,7 @@ export const addEventListeners = <T extends Annotation>(svg: SVGSVGElement, stor
     if (duration < MAX_CLICK_DURATION) {
       const { x, y } = getSVGPoint(evt, svg);
 
-      const annotation = store.getAt(x, y) as T | undefined;
+      const annotation = store.getAt(x, y, undefined, 2) as T | undefined;
 
       if (annotation)
         dispatch('click', { originalEvent: evt, annotation });

package/src/annotation/shapes/Polyline.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { DrawingStyleExpression } from '@annotorious/core';
+  import { computeSVGPath} from '../../model';
+  import type { Geometry, ImageAnnotation, PolylineGeometry } 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);
+
+  $: d = computeSVGPath(geom as PolylineGeometry);
+
+  $: cssClass = (geom as PolylineGeometry).closed ? 'closed' : 'open'
+</script>
+
+<g class="a9s-annotation" data-id={annotation.id}>
+  <path 
+    class={`a9s-outer ${cssClass}`}
+    style={computedStyle ? 'display:none;' : undefined}
+    d={d} />
+
+  <path 
+    class={`a9s-inner ${cssClass}`}
+    style={computedStyle}
+    d={d} />
+</g>
+
+<style>
+  path.open {
+    fill: transparent !important;
+  }
+</style>

package/src/annotation/shapes/index.ts

@@ -1,5 +1,6 @@
 export { default as Ellipse } from './Ellipse.svelte';
+export { default as Line } from './Line.svelte';
 export { default as MultiPolygon } from './MultiPolygon.svelte';
 export { default as Polygon } from './Polygon.svelte';
+export { default as Polyline } from './Polyline.svelte';
 export { default as Rectangle } from './Rectangle.svelte';
-export { default as Line } from './Line.svelte';

package/src/model/core/Shape.ts

@@ -16,6 +16,8 @@ export enum ShapeType {
 
   POLYGON = 'POLYGON',
 
+  POLYLINE = 'POLYLINE',
+
   RECTANGLE = 'RECTANGLE',
 
   LINE = 'LINE'

package/src/model/core/index.ts

@@ -2,6 +2,7 @@ export * from './ellipse';
 export * from './line';
 export * from './multipolygon';
 export * from './polygon';
+export * from './polyline';
 export * from './rectangle';
 export * from './ImageAnnotation';
 export * from './Shape';

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

@@ -0,0 +1,31 @@
+import type { Bounds, Geometry, Shape } from '../Shape';
+
+export interface Polyline extends Shape {
+
+  geometry: PolylineGeometry;
+
+}
+
+export interface PolylineGeometry extends Geometry {
+
+  points: PolylinePoint[];
+
+  closed?: boolean;
+
+  bounds: Bounds;
+
+}
+
+export interface PolylinePoint {
+
+  type: 'CORNER' | 'CURVE';
+
+  point: [number, number];
+
+  inHandle?: [number, number];
+
+  outHandle?: [number, number];
+
+  locked?: boolean;
+
+}

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

@@ -0,0 +1,2 @@
+export * from './Polyline';
+export * from './polylineUtils';

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

@@ -0,0 +1,193 @@
+import { ShapeType } from '../Shape';
+import { computePolygonArea, isPointInPolygon, registerShapeUtil, type ShapeUtil } from '../shapeUtils';
+import type { Polyline, PolylineGeometry } from './Polyline';
+
+const PolylineUtil: ShapeUtil<Polyline> = {
+
+  area: (polyline: Polyline): number => {
+    const geom = polyline.geometry;
+    
+    if (!geom.closed || geom.points.length < 3)
+      return 0;
+
+    const points = approximateAsPolygon(geom);
+    return computePolygonArea(points);
+  },
+
+  intersects: (polyline: Polyline, x: number, y: number, buffer: number = 2): boolean => {
+    const geom = polyline.geometry;
+    
+    if (geom.closed) {
+      const points = approximateAsPolygon(geom);
+      return isPointInPolygon(points, x, y);
+    } else {
+      return isPointNearPath(geom, [x, y], buffer);
+    }
+  }
+  
+};
+
+export const approximateAsPolygon = (geom: PolylineGeometry): [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];
+    
+    points.push(currentPoint.point);
+    
+    // If there's a curve to the next point, approximate it
+    if (i < geom.points.length - 1 || geom.closed) {
+      const hasCurve = currentPoint.outHandle || nextPoint.inHandle;
+      if (hasCurve) {
+        const curvePoints = approximateBezierCurve(
+          currentPoint.point,
+          currentPoint.outHandle || currentPoint.point,
+          nextPoint.inHandle || nextPoint.point,
+          nextPoint.point,
+          10 // number of approximation segments
+        );
+        points.push(...curvePoints.slice(1)); // Skip first point (already added)
+      }
+    }
+  }
+  
+  return points;
+}
+
+const approximateBezierCurve = (
+  p0: [number, number], 
+  p1: [number, number], 
+  p2: [number, number], 
+  p3: [number, number], 
+  segments: number = 10
+): [number, number][] => {
+  const points: [number, number][] = [];
+  
+  for (let i = 0; i <= segments; i++) {
+    const t = i / segments;
+    const x = Math.pow(1 - t, 3) * p0[0] + 
+              3 * Math.pow(1 - t, 2) * t * p1[0] + 
+              3 * (1 - t) * Math.pow(t, 2) * p2[0] + 
+              Math.pow(t, 3) * p3[0];
+    const y = Math.pow(1 - t, 3) * p0[1] + 
+              3 * Math.pow(1 - t, 2) * t * p1[1] + 
+              3 * (1 - t) * Math.pow(t, 2) * p2[1] + 
+              Math.pow(t, 3) * p3[1];
+    points.push([x, y]);
+  }
+  
+  return points;
+}
+
+const isPointNearPath = (geom: PolylineGeometry, point: [number, number], buffer: number): boolean => {  
+  for (let i = 0; i < geom.points.length - 1; i++) {
+    const currentPoint = geom.points[i];
+    const nextPoint = geom.points[i + 1];
+    
+    const hasCurve = currentPoint.outHandle || nextPoint.inHandle;
+    if (hasCurve) {
+      const curvePoints = approximateBezierCurve(
+        currentPoint.point,
+        currentPoint.outHandle || currentPoint.point,
+        nextPoint.inHandle || nextPoint.point,
+        nextPoint.point,
+        20 // TODO make configurable? Based on scale factor? Length?
+      );
+      
+      for (let j = 0; j < curvePoints.length - 1; j++) {
+        const distance = distanceToLineSegment(point, curvePoints[j], curvePoints[j + 1]);
+        if (distance <= buffer) return true;
+      }
+    } else {
+      const distance = distanceToLineSegment(point, currentPoint.point, nextPoint.point);
+      if (distance <= buffer) return true;
+    }
+  }
+  
+  return false;
+}
+
+const distanceToLineSegment = (
+  point: [number, number], 
+  lineStart: [number, number], 
+  lineEnd: [number, number]
+): number => {
+  const [px, py] = point;
+  const [x1, y1] = lineStart;
+  const [x2, y2] = lineEnd;
+  
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const length = Math.sqrt(dx * dx + dy * dy);
+  
+  if (length === 0) {
+    // Line segment is a point
+    return Math.sqrt((px - x1) * (px - x1) + (py - y1) * (py - y1));
+  }
+  
+  // Calculate the projection parameter t to see where the perpendicular falls
+  const t = ((px - x1) * dx + (py - y1) * dy) / (length * length);
+  
+  if (t <= 0) {
+    // Closest point is the start of the segment
+    return Math.sqrt((px - x1) * (px - x1) + (py - y1) * (py - y1));
+  } else if (t >= 1) {
+    // Closest point is the end of the segment
+    return Math.sqrt((px - x2) * (px - x2) + (py - y2) * (py - y2));
+  } else {
+    // Closest point is on the segment - use the exact line distance formula
+    // This is the same formula as your LineUtil.intersects
+    const area = Math.abs(((y2 - y1) * px) - ((x2 - x1) * py) + (x2 * y1) - (y2 * x1));
+    return area / length;
+  }
+};
+
+export const computeSVGPath = (geom: PolylineGeometry) => {
+  if (!geom.points || geom.points.length === 0)
+    return '';
+
+  const pathCommands: string[] = [];
+
+  const firstPoint = geom.points[0];
+  pathCommands.push(`M ${firstPoint.point[0]} ${firstPoint.point[1]}`);
+
+  for (let i = 1; i < geom.points.length; i++) {
+    const currentPoint = geom.points[i];
+    const previousPoint = geom.points[i - 1];
+    
+    if (currentPoint.type === 'CURVE' || previousPoint.type === 'CURVE') {
+      // Cubic Bézier curve
+      const cp1 = previousPoint.outHandle || previousPoint.point;
+      const cp2 = currentPoint.inHandle || currentPoint.point;
+      const endPoint = currentPoint.point;
+      
+      pathCommands.push(`C ${cp1[0]} ${cp1[1]} ${cp2[0]} ${cp2[1]} ${endPoint[0]} ${endPoint[1]}`);
+    } else {
+      // Straight line
+      pathCommands.push(`L ${currentPoint.point[0]} ${currentPoint.point[1]}`);
+    }
+  }
+
+  if (geom.closed) {
+    // Handle curve from last point back to first point
+    const lastPoint = geom.points[geom.points.length - 1];
+    const firstPointRef = geom.points[0];
+    
+    const hasClosingCurve = lastPoint.outHandle || firstPointRef.inHandle;
+    
+    if (hasClosingCurve) {
+      const cp1 = lastPoint.outHandle || lastPoint.point;
+      const cp2 = firstPointRef.inHandle || firstPointRef.point;
+      const endPoint = firstPointRef.point;
+      
+      pathCommands.push(`C ${cp1[0]} ${cp1[1]} ${cp2[0]} ${cp2[1]} ${endPoint[0]} ${endPoint[1]}`);
+    }
+    
+    pathCommands.push('Z');
+  }
+  
+  return pathCommands.join(' ');
+}
+
+registerShapeUtil(ShapeType.POLYLINE, PolylineUtil);