@annotorious/annotorious 3.4.7 → 3.5.0

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

@@ -7,7 +7,8 @@ export declare enum ShapeType {
     ELLIPSE = "ELLIPSE",
     MULTIPOLYGLON = "MULTIPOLYGON",
     POLYGON = "POLYGON",
-    RECTANGLE = "RECTANGLE"
+    RECTANGLE = "RECTANGLE",
+    LINE = "LINE"
 }
 export interface Geometry {
     bounds: Bounds;

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

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

package/dist/model/core/line/Line.d.ts

@@ -0,0 +1,8 @@
+import { Bounds, Geometry, Shape } from '../Shape';
+export interface Line extends Shape {
+    geometry: LineGeometry;
+}
+export interface LineGeometry extends Geometry {
+    points: [[number, number], [number, number]];
+    bounds: Bounds;
+}

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

@@ -0,0 +1,2 @@
+export * from './Line';
+export * from './lineUtils';

package/dist/model/core/line/lineUtils.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,7 @@
 import { Bounds, Shape, ShapeType } from './Shape';
 export interface ShapeUtil<T extends Shape> {
     area: (shape: T) => number;
-    intersects: (shape: T, x: number, y: number) => boolean;
+    intersects: (shape: T, x: number, y: number, buffer?: number) => boolean;
 }
 /**
  * Registers a new ShapeUtil for a given shape type.
@@ -20,9 +20,10 @@ export declare const computeArea: (shape: Shape) => number;
  * @param shape the shape
  * @param x point x coord
  * @param y point y coord
+ * @param buffer optional buffer around the point to consider as intersection
  * @returns true if shape and point intersect
  */
-export declare const intersects: (shape: Shape, x: number, y: number) => boolean;
+export declare const intersects: (shape: Shape, x: number, y: number, buffer?: number) => boolean;
 /**
  * Computes Bounds from a given list of points.
  * @param points the points
@@ -33,3 +34,4 @@ 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;
 export declare const simplifyPoints: (points: number[][], tolerance?: number) => [number, number][];
+export declare const distance: (a: [number, number], b: [number, number]) => number;

package/dist/state/ImageAnnotationStore.d.ts

@@ -1,6 +1,6 @@
 import { Annotation, Filter, Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
 export type ImageAnnotationStore<I extends Annotation> = Store<I> & {
-    getAt(x: number, y: number, filter?: Filter<I>): I | undefined;
+    getAt(x: number, y: number, filter?: Filter<I>, buffer?: number): I | undefined;
     getIntersecting(x: number, y: number, width: number, height: number): I[];
 };
 export type SvelteImageAnnotationStore<I extends Annotation = Annotation> = SvelteStore<I> & ImageAnnotationStore<I>;

package/dist/state/spatialTree.d.ts

@@ -10,7 +10,7 @@ interface IndexedTarget {
 export declare const createSpatialTree: () => {
     all: () => IndexedTarget[];
     clear: () => void;
-    getAt: (x: number, y: number, filter?: Filter<Annotation>) => ImageAnnotationTarget[];
+    getAt: (x: number, y: number, filter?: Filter<Annotation>, buffer?: number) => ImageAnnotationTarget[];
     getIntersecting: (x: number, y: number, width: number, height: number) => ImageAnnotationTarget[];
     insert: (target: AnnotationTarget) => void;
     remove: (target: AnnotationTarget) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.4.7",
+  "version": "3.5.0",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -46,14 +46,14 @@
     "typescript": "5.8.3",
     "vite": "^5.4.19",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.1.4"
+    "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@annotorious/core": "3.4.7",
+    "@annotorious/core": "3.5.0",
     "dequal": "^2.0.3",
     "rbush": "^4.0.1",
     "simplify-js": "^1.2.4",
-    "svg-pathdata": "^7.2.0",
+    "svg-pathdata": "^8.0.0",
     "uuid": "^11.1.0"
   }
 }

package/src/Annotorious.css

@@ -28,6 +28,7 @@
 }
 
 .a9s-annotationlayer ellipse, 
+.a9s-annotationlayer line, 
 .a9s-annotationlayer path,
 .a9s-annotationlayer polygon,
 .a9s-annotationlayer rect  {

package/src/annotation/SVGAnnotationLayer.svelte

@@ -5,14 +5,13 @@
   import { isImageAnnotation, ShapeType } from '../model';
   import type { ImageAnnotation, Shape} from '../model';
   import { getEditor as _getEditor, EditorMount } from './editors';
-  import { Ellipse, Polygon, Rectangle} from './shapes';
+  import { Ellipse, Line, MultiPolygon, Polygon, Rectangle} from './shapes';
   import { getTool, listDrawingTools, ToolMount } from './tools';
   import { enableResponsive } from './utils';
   import { createSVGTransform } from './Transform';
   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;
@@ -181,6 +180,11 @@
               annotation={annotation}
               geom={selector.geometry}
               style={style} />
+          {:else if (selector?.type === ShapeType.LINE)}
+            <Line
+              annotation={annotation}
+              geom={selector.geometry}
+              style={style} />
           {/if}
         {/key}
       {/if}

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

@@ -264,13 +264,11 @@
 
       if (hasSelected) {
         const updatedRings = polygon.rings.map((ring, ringIdx) => {
-          const hasSelected = selectedCorners.some(s => s.polygon === polygonIdx && s.ring === ringIdx);
+          const selectedCornersInRing = selectedCorners.filter(s => s.polygon === polygonIdx && s.ring === ringIdx);
 
           // Rings needs 3 points min
-          if (hasSelected && ring.points.length > 3) {
-            const points = ring.points.filter((_, i) => 
-              !selectedCorners.some(s => s.polygon === polygonIdx && s.ring === ringIdx && s.point === i));
-
+          if (selectedCornersInRing.length && ring.points.length - selectedCornersInRing.length >= 3) {
+            const points = ring.points.filter((_, i) => !selectedCornersInRing.some(s => s.point === i));
             return { points };
           } else {
             // No points selected on this ring

package/src/annotation/editors/polygon/PolygonEditor.svelte

@@ -211,7 +211,7 @@
 
   const onDeleteSelected = () => {
     // Polygon needs 3 points min
-    if (geom.points.length < 4) return;
+    if (geom.points.length - selectedCorners.length < 3) return;
 
     const points = geom.points.filter((_, i) => !selectedCorners.includes(i)) as [number, number][];
     const bounds = boundsFromPoints(points);

package/src/annotation/shapes/Line.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { DrawingStyleExpression } from '@annotorious/core';
+  import type { Geometry, LineGeometry, ImageAnnotation } 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 { points } = geom as LineGeometry;
+  const [[x1, y1], [x2, y2]] = points;
+</script>
+
+<g class="a9s-annotation" data-id={annotation.id}>
+  <line
+    class="a9s-outer"
+    style={computedStyle ? 'display:none;' : undefined}
+    x1={x1}
+    y1={y1}
+    x2={x2}
+    y2={y2} />
+
+  <line
+    class="a9s-inner"
+    style={computedStyle}
+    x1={x1}
+    y1={y1}
+    x2={x2}
+    y2={y2} />
+</g>

package/src/annotation/shapes/index.ts

@@ -1,4 +1,5 @@
 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';
+export { default as Rectangle } from './Rectangle.svelte';
+export { default as Line } from './Line.svelte';

package/src/annotation/tools/polygon/RubberbandPolygon.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount, createEventDispatcher } from 'svelte';
   import type { DrawingMode } from '../../../AnnotoriousOpts';
-  import { boundsFromPoints, computeArea, ShapeType, type Polygon } from '../../../model';
-  import { distance, getMaskDimensions } from '../../utils';
+  import { boundsFromPoints, computeArea, distance, ShapeType, type Polygon } from '../../../model';
+  import { getMaskDimensions } from '../../utils';
   import type { Transform } from '../..';
 
   const dispatch = createEventDispatcher<{ create: Polygon }>();

package/src/annotation/tools/rectangle/RubberbandRectangle.svelte

@@ -2,7 +2,7 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import type { DrawingMode } from '../../../AnnotoriousOpts';
   import { ShapeType, type Rectangle } from '../../../model';
-  import { getMaskDimensions, type Transform } from '../..';
+  import type { Transform } from '../..';
 
   const dispatch = createEventDispatcher<{ create: Rectangle }>();
   

package/src/annotation/utils/index.ts

@@ -1,4 +1,3 @@
-export * from './math';
 export * from './responsive';
 export * from './styling';
 export * from './svg';

package/src/model/core/Shape.ts

@@ -16,7 +16,9 @@ export enum ShapeType {
 
   POLYGON = 'POLYGON',
 
-  RECTANGLE = 'RECTANGLE'
+  RECTANGLE = 'RECTANGLE',
+
+  LINE = 'LINE'
 
 }
 

package/src/model/core/index.ts

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

package/src/model/core/line/Line.ts

@@ -0,0 +1,15 @@
+import type { Bounds, Geometry, Shape } from '../Shape';
+
+export interface Line extends Shape {
+
+  geometry: LineGeometry;
+
+}
+
+export interface LineGeometry extends Geometry {
+
+  points: [[number, number], [number, number]]
+
+  bounds: Bounds;
+  
+}

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

@@ -0,0 +1,2 @@
+export * from './Line';
+export * from './lineUtils';

package/src/model/core/line/lineUtils.ts

@@ -0,0 +1,23 @@
+import { ShapeType } from '../Shape';
+import { distance, registerShapeUtil, type ShapeUtil } from '../shapeUtils';
+import type { Line } from './Line';
+
+const LineUtil: ShapeUtil<Line> = {
+
+  area: (_: Line): number => 0,
+
+  intersects: (l: Line, x: number, y: number, buffer: number = 2): boolean => {
+    // See https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_two_points
+    const [[x1, y1], [x2, y2]] = l.geometry.points;
+    
+    // Twice the area of the triangle formed by connecting the three points
+    const area = Math.abs(((y2 - y1) * x) - ((x2 - x1) * y) + (x2 * y1) - (y2 * x1));
+  
+    const length = distance([x1, y1], [x2, y2]);
+
+    return area / length <= buffer;
+  }
+  
+};
+
+registerShapeUtil(ShapeType.LINE, LineUtil);

package/src/model/core/shapeUtils.ts

@@ -5,7 +5,7 @@ export interface ShapeUtil<T extends Shape> {
 
   area: (shape: T) => number;
 
-  intersects: (shape: T, x: number, y: number) => boolean;
+  intersects: (shape: T, x: number, y: number, buffer?: number) => boolean;
 
 }
 
@@ -31,10 +31,11 @@ export const computeArea = (shape: Shape) => Utils[shape.type].area(shape);
  * @param shape the shape
  * @param x point x coord
  * @param y point y coord
+ * @param buffer optional buffer around the point to consider as intersection
  * @returns true if shape and point intersect
  */
-export const intersects = (shape: Shape, x: number, y: number): boolean =>
-  Utils[shape.type].intersects(shape, x, y);
+export const intersects = (shape: Shape, x: number, y: number, buffer?: number): boolean =>
+  Utils[shape.type].intersects(shape, x, y, buffer);
 
 /**
  * Computes Bounds from a given list of points.
@@ -108,4 +109,11 @@ export const pointsToPath = (points: [number, number][], close: boolean = true):
 export const simplifyPoints = (points: number[][], tolerance = 1): [number, number][] => {
   const mapped = points.map(([x, y]) => ({ x, y }));
   return simplify(mapped, tolerance, true).map(pt => [pt.x, pt.y]);
+}
+
+export const distance = (a: [number, number], b: [number, number]): number => {
+  const dx = Math.abs(b[0] - a[0]);
+  const dy = Math.abs(b[1] - a[1]);
+
+  return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
 }

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

@@ -4,6 +4,8 @@ import { svgPathToMultiPolygonElement } from './pathParser';
 import type { 
   Ellipse, 
   EllipseGeometry, 
+  Line,
+  LineGeometry,
   MultiPolygon,
   MultiPolygonGeometry, 
   Polygon, 
@@ -59,6 +61,30 @@ const parseSVGEllipse = (value: string): Ellipse => {
   };
 }
 
+const parseSVGLine = (value: string): Line => {
+  const doc = parseSVGXML(value);
+
+  const x1 = parseFloat(doc.getAttribute("x1")!);
+  const x2 = parseFloat(doc.getAttribute("x2")!);
+  const y1 = parseFloat(doc.getAttribute("y1")!);
+  const y2 = parseFloat(doc.getAttribute("y2")!);
+
+  const bounds = {
+    minX: Math.min(x1, x2),
+    minY: Math.min(y1, y2),
+    maxX: Math.max(x1, x2),
+    maxY: Math.max(y1, y2),
+  };
+
+  return {
+    type: ShapeType.LINE,
+    geometry: {
+      points: [[x1, y1], [x2, y2]],
+      bounds,
+    },
+  };
+}
+
 const parseSVGPath = (value: string): Polygon | MultiPolygon => {
   const doc = parseSVGXML(value);
 
@@ -99,6 +125,8 @@ export const parseSVGSelector = <T extends Shape>(valueOrSelector: SVGSelector |
     return parseSVGPath(value) as unknown as T;
   else if (value.includes('<ellipse ')) 
     return parseSVGEllipse(value) as unknown as T;
+  else if (value.includes("<line "))
+    return parseSVGLine(value) as unknown as T;
   else 
     throw 'Unsupported SVG shape: ' + value;
 }
@@ -113,16 +141,29 @@ const serializeMultiPolygon = (geom: MultiPolygonGeometry) => {
 export const serializeSVGSelector = (shape: Shape): SVGSelector => {
   let value: string | undefined;
 
-  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>`;
-  } else if (shape.type === ShapeType.MULTIPOLYGLON) {
-    const geom = shape.geometry as MultiPolygonGeometry;
-    value = `<svg>${serializeMultiPolygon(geom)}</svg>`;
+  switch (shape.type) {
+    case ShapeType.POLYGON: {
+      const geom = shape.geometry as PolygonGeometry;
+      const { points } = geom;
+      value = `<svg><polygon points="${points.map((xy) => xy.join(',')).join(' ')}" /></svg>`;
+      break;
+    }
+    case ShapeType.ELLIPSE: {
+      const geom = shape.geometry as EllipseGeometry;
+      value = `<svg><ellipse cx="${geom.cx}" cy="${geom.cy}" rx="${geom.rx}" ry="${geom.ry}" /></svg>`;
+      break;
+    }
+    case ShapeType.MULTIPOLYGLON: {
+      const geom = shape.geometry as MultiPolygonGeometry;
+      value = `<svg>${serializeMultiPolygon(geom)}</svg>`;
+      break;
+    }
+    case ShapeType.LINE: {
+      const geom = shape.geometry as LineGeometry;
+      const [[x1, y1], [x2, y2]] = geom.points;
+      value = `<svg><line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" /></svg>`;
+      break;
+    }
   }
 
   if (value) {

package/src/state/ImageAnnotationStore.ts

@@ -2,7 +2,7 @@ import type { Annotation, Filter, Store, SvelteAnnotatorState, SvelteStore } fro
 
 export type ImageAnnotationStore<I extends Annotation> = Store<I> & {
 
-  getAt(x: number, y: number, filter?: Filter<I>): I | undefined;
+  getAt(x: number, y: number, filter?: Filter<I>, buffer?: number): I | undefined;
 
   getIntersecting(x: number, y: number, width: number, height: number): I[];
 

package/src/state/ImageAnnotatorState.ts

@@ -54,8 +54,8 @@ export const createImageAnnotatorState = <I extends Annotation, E extends unknow
       tree.update(oldValue.target, newValue.target));
   });
 
-  const getAt = (x: number, y: number, filter?: Filter<I>): I | undefined => {
-    const targets = tree.getAt(x, y, filter as Filter<Annotation>);
+  const getAt = (x: number, y: number, filter?: Filter<I>, buffer?: number): I | undefined => {
+    const targets = tree.getAt(x, y, filter as Filter<Annotation>, buffer);
 
     if (filter) {
       // Resolve annotations first, so we can filter

package/src/state/spatialTree.ts

@@ -75,18 +75,18 @@ export const createSpatialTree = () => {
   };
 
 
-  const getAt = (x: number, y: number, filter?: Filter<Annotation>): ImageAnnotationTarget[] => {
+  const getAt = (x: number, y: number, filter?: Filter<Annotation>, buffer: number = 0): ImageAnnotationTarget[] => {
     const idxHits = tree.search({
-      minX: x,
-      minY: y,
-      maxX: x,
-      maxY: y
+      minX: x - buffer,
+      minY: y - buffer,
+      maxX: x + buffer,
+      maxY: y + buffer
     }).map(item => item.target);
 
     // Exact hit test on shape (not needed for rectangles!)
     const exactHits = idxHits.filter(target => {
       return (target.selector.type === ShapeType.RECTANGLE) ||
-        intersects(target.selector, x, y);
+        intersects(target.selector, x, y, buffer);
     });
 
     // Get smallest shape

package/dist/annotation/utils/math.d.ts

@@ -1 +0,0 @@
-export declare const distance: (a: [number, number], b: [number, number]) => number;

package/src/annotation/utils/math.ts

@@ -1,6 +0,0 @@
-export const distance = (a: [number, number], b: [number, number]): number => {
-  const dx = Math.abs(b[0] - a[0]);
-  const dy = Math.abs(b[1] - a[1]);
-
-  return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
-}