@annotorious/annotorious 3.4.0 → 3.4.2

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "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,8 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
-    "@annotorious/core": "3.4.0",
+    "@annotorious/core": "3.4.2",
+    "dequal": "^2.0.3",
     "rbush": "^4.0.1",
     "svg-pathdata": "^7.2.0",
     "uuid": "^11.1.0"

package/src/Annotorious.css

@@ -11,7 +11,7 @@
   top: 0;
   touch-action: none;
   width: 100%;
-
+  -webkit-tap-highlight-color: transparent;
   -webkit-user-select: none; 
      -moz-user-select: none;
       -ms-user-select: none;
@@ -34,6 +34,7 @@
   fill: transparent;
   shape-rendering: geometricPrecision;
   vector-effect: non-scaling-stroke;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .a9s-edge-handle {

package/src/annotation/editors/Handle.svelte

@@ -21,10 +21,30 @@
 </script>
 
 {#if isTouch}
-  <circle 
-    cx={x}
-    cy={y}
-    r={2 * handleRadius} />
+  <g class="a9s-touch-handle">
+    <circle 
+      cx={x} 
+      cy={y} 
+      r={handleRadius * 10}
+      class="a9s-touch-halo"
+      class:touched={touched} />
+   
+    <circle 
+      cx={x} 
+      cy={y} 
+      r={handleRadius + 10 / scale}
+      class="a9s-handle-buffer"
+      on:pointerdown
+      on:pointerup
+      on:pointerdown={onPointerDown} 
+      on:pointerup={onPointerUp} /> 
+
+    <circle 
+      class="a9s-handle-dot"
+      cx={x}
+      cy={y}
+      r={handleRadius + 2 / scale} />
+  </g>
 {:else}
   <g class={`a9s-handle ${$$props.class || ''}`.trim()}>
     <circle 
@@ -44,7 +64,7 @@
         class="a9s-handle-selected"
         cx={x} 
         cy={y} 
-        r={handleRadius + (6 / scale)} />
+        r={handleRadius + (8 / scale)} />
     {/if}
 
     <circle 
@@ -56,6 +76,17 @@
 {/if}
 
 <style>
+  .a9s-touch-halo {
+    fill: transparent;
+    pointer-events: none;
+    stroke-width: 0;
+    transition: fill 150ms;
+  }
+
+  .a9s-touch-halo.touched {
+    fill: rgba(255, 255, 255, 0.4);
+  }
+
   .a9s-handle-buffer {
     fill: transparent;
   }

package/src/annotation/editors/{polygon/MidpointHandle.svelte → MidpointHandle.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { isTouch } from '../../utils';
+  import { isTouch } from '../utils';
 
   /** props **/
   export let x: number;

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

@@ -1,18 +1,30 @@
 <script lang="ts">
-  import type { 
-    MultiPolygon, 
-    MultiPolygonElement, 
-    MultiPolygonGeometry, 
-    Shape 
-  } from '../../../model';
+  import { createEventDispatcher, onMount, tick } from 'svelte';
+  import { dequal } from 'dequal/lite';
+  import type { MultiPolygon, MultiPolygonElement, MultiPolygonGeometry, Shape } from '../../../model';
+  import { getMaskDimensions, isTouch } from '../../utils';
+  import type { Transform } from '../../Transform';
+  import Editor from '../Editor.svelte';
+  import Handle from '../Handle.svelte';
+  import MidpointHandle from '../MidpointHandle.svelte';
+  import { computeMidpoints } from './utils';
   import { 
     boundsFromMultiPolygonElements, 
     boundsFromPoints, 
-    multipolygonElementToPath 
+    getAllCorners, 
+    multipolygonElementToPath
   } from '../../../model';
-  import type { Transform } from '../../Transform';
-  import { getMaskDimensions } from '../../utils';
-  import { Editor, Handle } from '..';
+
+  const dispatch = createEventDispatcher<{ change: MultiPolygon }>();
+
+  /** Time difference (milliseconds) required for registering a click/tap **/
+  const CLICK_THRESHOLD = 250;
+
+  /** Minimum distance (px) to shape required for midpoints to show */
+  const MIN_HOVER_DISTANCE = 1000;
+
+  /** Needed for the <mask> element **/
+  const MIDPOINT_SIZE = 4.5;
 
   /** Props */
   export let shape: MultiPolygon;
@@ -21,9 +33,120 @@
   export let viewportScale: number = 1;
   export let svgEl: SVGSVGElement;
 
+  /** Drawing tool layer **/
+  let visibleMidpoint: number | undefined;
+  let isHandleHovered = false;
+  let lastHandleClick: number | undefined;
+  let selectedCorners: { polygon: number, ring: number, point: number }[] = [];
+
   $: geom = shape.geometry;
 
+  // No support yet for adding or removing points in mobile!
+  $: midpoints = isTouch ? [] : computeMidpoints(geom, viewportScale);
+
+  /** Handle hover state **/
+  const onEnterHandle = () => isHandleHovered = true;
+  const onLeaveHandle = () => isHandleHovered = false;
+
+  /** Determine visible midpoint, if any **/
+  const onPointerMove = (evt: PointerEvent) => {
+    if (selectedCorners.length > 0) {
+      visibleMidpoint = undefined;
+      return;
+    }
+    
+    const [px, py] = transform.elementToImage(evt.offsetX, evt.offsetY);
+
+    const getDistSq = (pt: number[]) =>
+      Math.pow(pt[0] - px, 2) + Math.pow(pt[1] - py, 2);
+
+    const closestCorner = getAllCorners(geom).reduce((closest, corner) =>
+      getDistSq(corner) < getDistSq(closest) ? corner : closest);
+
+    const closestVisibleMidpoint = midpoints
+      .filter(m => m.visible)
+      .reduce((closest, midpoint) =>
+        getDistSq(midpoint.point) < getDistSq(closest.point) ? midpoint : closest);
+
+    // Show midpoint of the mouse is at least within THRESHOLD distance
+    // of the midpoint or the closest corner. (Basically a poor man's shape buffering).
+    const threshold = Math.pow(MIN_HOVER_DISTANCE / viewportScale, 2);
+
+    const shouldShow = 
+      getDistSq(closestCorner) < threshold ||
+      getDistSq(closestVisibleMidpoint.point) < threshold;
+
+    if (shouldShow)
+      visibleMidpoint = midpoints.indexOf(closestVisibleMidpoint);
+    else
+      visibleMidpoint = undefined;
+  }
+
+  /** 
+   * SVG element keeps loosing focus when interacting with 
+   * shapes–this function refocuses.
+   */
+  const reclaimFocus = () => {
+    if (document.activeElement !== svgEl)
+      svgEl.focus();
+  }
+
+  /**
+   * De-selects all corners and reclaims focus.
+   */
+  const onShapePointerUp = () => {
+    selectedCorners = [];
+    reclaimFocus();
+  }
+
+  /**
+   * Updates state, waiting for potential click.
+   */
+  const onHandlePointerDown = (evt: PointerEvent) => {
+    isHandleHovered = true;
+
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    lastHandleClick = performance.now();
+  }
+
+  /** Selection handling logic **/
+  const onHandlePointerUp = (polygon: number, ring: number, point: number) => (evt: PointerEvent) => {
+    if (!lastHandleClick || isTouch) return;
+
+    // Drag, not click
+    if (performance.now() - lastHandleClick > CLICK_THRESHOLD) return;
+
+    // Shorthand
+    const isMatch = (other: { polygon: number, ring: number, point: number }) => 
+      other.polygon === polygon && other.ring === ring && other.point === point;
+
+    const isSelected = selectedCorners.some(isMatch);
+
+    if (evt.metaKey || evt.ctrlKey || evt.shiftKey) {
+      // Add to or remove from selection
+      if (isSelected)
+        selectedCorners = selectedCorners.filter(other => !isMatch(other));
+      else
+        selectedCorners = [...selectedCorners, { polygon, ring, point }];
+    } else {
+      if (isSelected && selectedCorners.length > 1)
+        // Keep selected, de-select others
+        selectedCorners = [{ polygon, ring, point }]
+      else if (isSelected)
+        // De-select
+        selectedCorners = [];
+      else
+        selectedCorners = [{ polygon, ring, point }];
+    }
+
+    reclaimFocus();
+  }
+
   const editor = (shape: Shape, handle: string, delta: [number, number]) => {
+    reclaimFocus();
+    
     const elements = ((shape.geometry) as MultiPolygonGeometry).polygons;
 
     let updated: MultiPolygonElement[];
@@ -79,9 +202,126 @@
     } as MultiPolygon;
   }
 
-  $: mask = getMaskDimensions(geom.bounds, 2 / viewportScale);
+  const onAddPoint = (midpointIdx: number) => async (evt: PointerEvent) => {
+    evt.stopPropagation();
 
-  const maskId = `multipoly-mask-${Math.random().toString(36).substring(2, 12)}`;
+    const midpoint = midpoints[midpointIdx];
+    
+    const updated = geom.polygons.map((element, elIdx) => {
+      if (elIdx === midpoint.elementIdx) {
+        const rings = element.rings.map((ring, ringIdx) => {
+          if (ringIdx === midpoint.ringIdx) {
+            const points = [
+              ...ring.points.slice(0, midpoint.pointIdx + 1),
+              midpoint.point,
+              ...ring.points.slice(midpoint.pointIdx + 1)
+            ] as [number, number][];
+
+            return { points };
+          } else {
+            return ring;
+          }
+        });
+
+        const bounds = boundsFromPoints(rings[0].points as [number, number][]);
+        return { rings, bounds } as MultiPolygonElement;
+      } else {
+        return element;
+      }
+    });
+
+    dispatch('change', {
+      ...shape, 
+      geometry: {
+        polygons: updated,
+        bounds: boundsFromMultiPolygonElements(updated)
+      } 
+    } as MultiPolygon);
+
+    await tick();
+
+    // Find the newly inserted handle and dispatch grab event
+    const newHandle = [...document.querySelectorAll(`.a9s-handle`)][midpointIdx + 1];
+    if (newHandle?.firstChild) {
+      const newEvent = new PointerEvent('pointerdown', {
+        bubbles: true,
+        cancelable: true,
+        clientX: evt.clientX,
+        clientY: evt.clientY,
+        pointerId: evt.pointerId,
+        pointerType: evt.pointerType,
+        isPrimary: evt.isPrimary,
+        buttons: evt.buttons
+      });
+
+      newHandle.firstChild.dispatchEvent(newEvent);
+    }
+  }
+
+  const onDeleteSelected = () => {
+    const updatedPolygons = geom.polygons.map((polygon, polygonIdx) => {
+      const hasSelected = selectedCorners.some(s => s.polygon === polygonIdx);
+
+      if (hasSelected) {
+        const updatedRings = polygon.rings.map((ring, ringIdx) => {
+          const hasSelected = selectedCorners.some(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));
+
+            return { points };
+          } else {
+            // No points selected on this ring
+            return ring;
+          }
+        });
+
+        const bounds = boundsFromPoints(updatedRings[0].points as [number, number][]);
+        return { rings: updatedRings, bounds } as MultiPolygonElement;
+      } else {
+        // No points selected on this polygon
+        return polygon;
+      }
+    });
+
+    const hasChanged = !dequal(geom.polygons, updatedPolygons);
+    if (hasChanged) {
+      dispatch('change', {
+        ...shape, 
+        geometry: {
+          polygons: updatedPolygons,
+          bounds: boundsFromMultiPolygonElements(updatedPolygons)
+        } 
+      } as MultiPolygon);
+
+      selectedCorners = [];
+    }
+  }
+
+  onMount(() => {
+    if (isTouch) return;
+
+    const onKeydown = (evt: KeyboardEvent) => {
+      if (evt.key === 'Delete' || evt.key === 'Backspace') {
+        evt.preventDefault();
+        onDeleteSelected();
+      }
+    };
+
+    svgEl.addEventListener('pointermove', onPointerMove);
+    svgEl.addEventListener('keydown', onKeydown);
+
+    return () => {
+      svgEl.removeEventListener('pointermove', onPointerMove);
+      svgEl.removeEventListener('keydown', onKeydown);
+    }
+  });
+
+  $: mask = getMaskDimensions(geom.bounds, MIDPOINT_SIZE / viewportScale);
+
+  const maskId = `polygon-mask-${Math.random().toString(36).substring(2, 12)}`;
 </script>
 
 <Editor
@@ -96,23 +336,39 @@
   {#each geom.polygons as element, elementIdx}
     <g>
       <defs>
-        <mask id={`${maskId}-${elementIdx}`} class="a9s-multipolygon-editor-mask">
+        <mask id={`${maskId}-${elementIdx}-outer`} class="a9s-multipolygon-editor-mask">
           <rect x={mask.x} y={mask.y} width={mask.w} height={mask.h} />
-          <path d={multipolygonElementToPath(element)} />   
+          <path d={multipolygonElementToPath(element)} /> 
+          
+          {#if (visibleMidpoint !== undefined && !isHandleHovered)}
+            {@const { point } = midpoints[visibleMidpoint]}
+            <circle cx={point[0]} cy={point[1]} r={MIDPOINT_SIZE / viewportScale} />
+          {/if}
         </mask>
+
+        {#if (visibleMidpoint !== undefined && !isHandleHovered)}
+          {@const { point } = midpoints[visibleMidpoint]}
+          <mask id={`${maskId}-${elementIdx}-inner`}  class="a9s-multipolygon-editor-mask">
+            <rect x={mask.x} y={mask.y} width={mask.w} height={mask.h} /> 
+            <circle cx={point[0]} cy={point[1]} r={MIDPOINT_SIZE / viewportScale} />
+          </mask>
+        {/if}
       </defs>
 
       <path 
         class="a9s-outer"
-        mask={`url(#${maskId}-${elementIdx})`}
+        mask={`url(#${maskId}-${elementIdx}-outer)`}
         fill-rule="evenodd"
+        on:pointerup={onShapePointerUp}
         on:pointerdown={grab('SHAPE')}
         d={multipolygonElementToPath(element)} />
 
       <path 
         class="a9s-inner"
+        mask={`url(#${maskId}-${elementIdx}-inner)`}
         style={computedStyle}
         fill-rule="evenodd"
+        on:pointerup={onShapePointerUp}
         on:pointerdown={grab('SHAPE')}
         d={multipolygonElementToPath(element)} />
 
@@ -120,13 +376,29 @@
         {#each ring.points as point, pointIdx}
           <Handle 
             class="a9s-corner-handle"
+            x={point[0]} 
+            y={point[1]} 
+            scale={viewportScale}
+            selected={selectedCorners.some(({ polygon, ring, point }) => 
+              polygon === elementIdx && ring === ringIdx && point === pointIdx)}
+            on:pointerenter={onEnterHandle}
+            on:pointerleave={onLeaveHandle}
+            on:pointerdown={onHandlePointerDown}
             on:pointerdown={grab(`HANDLE-${elementIdx}-${ringIdx}-${pointIdx}`)}
-            x={point[0]} y={point[1]} 
-            scale={viewportScale} />
+            on:pointerup={onHandlePointerUp(elementIdx, ringIdx, pointIdx)}  />
         {/each}
       {/each}
     </g>
   {/each}
+
+  {#if (visibleMidpoint !== undefined && !isHandleHovered)}
+    {@const { point } = midpoints[visibleMidpoint]}
+    <MidpointHandle 
+      x={point[0]}
+      y={point[1]}
+      scale={viewportScale} 
+      on:pointerdown={onAddPoint(visibleMidpoint)} />
+  {/if}
 </Editor>
 
 <style>
@@ -134,6 +406,7 @@
     fill: #fff;
   }
 
+  mask.a9s-multipolygon-editor-mask > circle,
   mask.a9s-multipolygon-editor-mask > path {
     fill: #000;
   }

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

@@ -0,0 +1,42 @@
+import type { MultiPolygonGeometry } from '../../../model';
+
+/** Minimum distance (px) between corners required for midpoints to show **/
+const MIN_VISIBILITY_DISTANCE = 12;
+
+export interface MultipolygonMidpoint {
+
+  point: [number, number];
+
+  visible: boolean;
+
+  elementIdx: number;
+
+  ringIdx: number;
+
+  pointIdx: number;
+
+}
+
+export const computeMidpoints = (geom: MultiPolygonGeometry, viewportScale: number) =>
+  geom.polygons.reduce<MultipolygonMidpoint[]>((all, element, elementIdx) => {
+    const forThisPolygon = element.rings.reduce<MultipolygonMidpoint[]>((forThisPolygon, ring, ringIdx) => {
+      const forThisRing: MultipolygonMidpoint[] = ring.points.map((thisPoint, pointIdx) => {
+        const nextPoint = pointIdx === ring.points.length - 1 ? ring.points[0] : ring.points[pointIdx + 1];
+
+        const x = (thisPoint[0] + nextPoint[0]) / 2;
+        const y = (thisPoint[1] + nextPoint[1]) / 2;
+
+        const dist = Math.sqrt( 
+          Math.pow(nextPoint[0] - x, 2) + Math.pow(nextPoint[1] - y, 2));
+
+        // Don't show if the distance between the corners is too small
+        const visible = dist > MIN_VISIBILITY_DISTANCE / viewportScale;
+
+        return { point: [x, y], visible, elementIdx, ringIdx, pointIdx };
+      });
+
+      return [...forThisPolygon, ...forThisRing];
+    }, []);
+
+    return [...all, ...forThisPolygon];
+  }, []);

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

@@ -2,11 +2,11 @@
   import { createEventDispatcher, onMount, tick } from 'svelte';
   import { boundsFromPoints } from '../../../model';
   import type { Polygon, PolygonGeometry, Shape } from '../../../model';
-  import { getMaskDimensions } from '../../utils';
+  import { getMaskDimensions, isTouch } from '../../utils';
   import type { Transform } from '../../Transform';
   import Editor from '../Editor.svelte';
   import Handle from '../Handle.svelte';
-  import Midpoint from './MidpointHandle.svelte';
+  import MidpointHandle from '../MidpointHandle.svelte';
 
   const dispatch = createEventDispatcher<{ change: Polygon }>();
 
@@ -30,7 +30,6 @@
   export let svgEl: SVGSVGElement;
 
   /** Drawing tool layer **/
-  let polygonEl: SVGGElement;
   let visibleMidpoint: number | undefined;
   let isHandleHovered = false;
   let lastHandleClick: number | undefined;
@@ -38,7 +37,8 @@
 
   $: geom = shape.geometry;
 
-  $: midpoints = geom.points.map((thisCorner, idx) => {
+  // No support yet for adding or removing points in mobile!
+  $: midpoints = isTouch ? [] : geom.points.map((thisCorner, idx) => {
     const nextCorner = idx === geom.points.length - 1 ? geom.points[0] : geom.points[idx + 1];
     
     const x = (thisCorner[0] + nextCorner[0]) / 2;
@@ -122,7 +122,7 @@
 
   /** Selection handling logic **/
   const onHandlePointerUp = (idx: number) => (evt: PointerEvent) => {
-    if (!lastHandleClick) return;
+    if (!lastHandleClick || isTouch) return;
 
     // Drag, not click
     if (performance.now() - lastHandleClick > CLICK_THRESHOLD) return;
@@ -225,6 +225,8 @@
   }
 
   onMount(() => {
+    if (isTouch) return;
+
     const onKeydown = (evt: KeyboardEvent) => {
       if (evt.key === 'Delete' || evt.key === 'Backspace') {
         evt.preventDefault();
@@ -284,7 +286,6 @@
     points={geom.points.map(xy => xy.join(',')).join(' ')} />
 
   <polygon
-    bind:this={polygonEl}
     class="a9s-inner a9s-shape-handle"
     mask={`url(#${maskId}-inner)`}
     style={computedStyle}
@@ -309,7 +310,7 @@
 
   {#if (visibleMidpoint !== undefined && !isHandleHovered)}
     {@const { point } = midpoints[visibleMidpoint]}
-    <Midpoint 
+    <MidpointHandle 
       x={point[0]}
       y={point[1]}
       scale={viewportScale}

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

@@ -1,7 +1,7 @@
 import { ShapeType } from '../Shape';
 import type { ShapeUtil } from '../shapeUtils';
 import { boundsFromPoints, computePolygonArea, isPointInPolygon, pointsToPath, registerShapeUtil } from '../shapeUtils';
-import type { MultiPolygon, MultiPolygonElement } from './MultiPolygon';
+import type { MultiPolygon, MultiPolygonElement, MultiPolygonGeometry } from './MultiPolygon';
 
 const MultiPolygonUtil: ShapeUtil<MultiPolygon> = {
 
@@ -60,4 +60,14 @@ export const multipolygonElementToPath = (element: MultiPolygonElement) => {
   return paths.join(' ');
 }
 
+export const getAllCorners = (geom: MultiPolygonGeometry) => 
+  geom.polygons.reduce<[number, number][]>((all, element) => (
+    [
+      ...all, 
+      ...element.rings.reduce<[number, number][]>((onThisElement, ring) => (
+        [...onThisElement, ...ring.points]
+      ), [])
+    ]
+  ), []);
+
 registerShapeUtil(ShapeType.MULTIPOLYGLON, MultiPolygonUtil);