@annotorious/annotorious 3.3.6 → 3.4.0

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

@@ -1,64 +1,329 @@
 <script lang="ts">
+  import { createEventDispatcher, onMount, tick } from 'svelte';
   import { boundsFromPoints } from '../../../model';
   import type { Polygon, PolygonGeometry, Shape } from '../../../model';
+  import { getMaskDimensions } from '../../utils';
   import type { Transform } from '../../Transform';
-  import { Editor, Handle } from '..';
+  import Editor from '../Editor.svelte';
+  import Handle from '../Handle.svelte';
+  import Midpoint from './MidpointHandle.svelte';
+
+  const dispatch = createEventDispatcher<{ change: Polygon }>();
+
+  /** 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;
+
+  /** Minimum distance (px) between corners required for midpoints to show **/
+  const MIN_CORNER_DISTANCE = 12;
+
+  /** Needed for the <mask> element **/
+  const MIDPOINT_SIZE = 4.5;
 
   /** Props */
   export let shape: Polygon;
   export let computedStyle: string | undefined;
   export let transform: Transform;
   export let viewportScale: number = 1;
+  export let svgEl: SVGSVGElement;
+
+  /** Drawing tool layer **/
+  let polygonEl: SVGGElement;
+  let visibleMidpoint: number | undefined;
+  let isHandleHovered = false;
+  let lastHandleClick: number | undefined;
+  let selectedCorners: number[] = [];
 
   $: geom = shape.geometry;
 
+  $: midpoints = 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;
+    const y = (thisCorner[1] + nextCorner[1]) / 2;
+
+    const dist = Math.sqrt( 
+      Math.pow(nextCorner[0] - x, 2) + Math.pow(nextCorner[1] - y, 2));
+
+    // Don't show if the distance between the corners is too small
+    const visible = dist > MIN_CORNER_DISTANCE / viewportScale;
+
+    return { point: [x, y], visible };
+  });
+
+  /** 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 = geom.points.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 = (idx: number) => (evt: PointerEvent) => {
+    if (!lastHandleClick) return;
+
+    // Drag, not click
+    if (performance.now() - lastHandleClick > CLICK_THRESHOLD) return;
+
+    const isSelected = selectedCorners.includes(idx);
+
+    if (evt.metaKey || evt.ctrlKey || evt.shiftKey) {
+      // Add to or remove from selection
+      if (isSelected)
+        selectedCorners = selectedCorners.filter(i => i !== idx);
+      else
+        selectedCorners = [...selectedCorners, idx];
+    } else {
+      if (isSelected && selectedCorners.length > 1)
+        // Keep selected, de-select others
+        selectedCorners = [idx]
+      else if (isSelected)
+        // De-select
+        selectedCorners = [];
+      else
+        selectedCorners = [idx];
+    }
+
+    reclaimFocus();
+  }
+
   const editor = (polygon: Shape, handle: string, delta: [number, number]) => {
+    reclaimFocus();
+    
     let points: [number, number][];
 
     const geom = (polygon.geometry) as PolygonGeometry;
 
-    if (handle === 'SHAPE') {
+    if (selectedCorners.length > 1) {
+      points = geom.points.map(([x, y], idx) =>
+          selectedCorners.includes(idx) ? [x + delta[0], y + delta[1]] : [x, y]);
+    } else if (handle === 'SHAPE') {
       points = geom.points.map(([x, y]) => [x + delta[0], y + delta[1]]);
     } else {
       points = geom.points.map(([x, y], idx) =>
-        handle === `HANDLE-${idx}` ? [x + delta[0], y + delta[1]] : [x, y]
-      );
+        handle === `HANDLE-${idx}` ? [x + delta[0], y + delta[1]] : [x, y]);
     }
 
     const bounds = boundsFromPoints(points);
-
     return {
       ...polygon,
       geometry: { points, bounds }
     }
   }
+
+  const onAddPoint = (midpointIdx: number) => async (evt: PointerEvent) => {
+    evt.stopPropagation();
+
+    const points = [
+      ...geom.points.slice(0, midpointIdx + 1),
+      midpoints[midpointIdx].point,
+      ...geom.points.slice(midpointIdx + 1)
+    ] as [number, number][];
+
+    const bounds = boundsFromPoints(points);
+
+    dispatch('change', {
+      ...shape,
+      geometry: { points, bounds }
+    });
+
+    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 = () => {
+    // Polygon needs 3 points min
+    if (geom.points.length < 4) return;
+
+    const points = geom.points.filter((_, i) => !selectedCorners.includes(i)) as [number, number][];
+    const bounds = boundsFromPoints(points);
+
+    dispatch('change', {
+      ...shape,
+      geometry: { points, bounds }
+    });
+
+    selectedCorners = [];
+  }
+
+  onMount(() => {
+    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
   shape={shape}
   transform={transform}
   editor={editor}
+  svgEl={svgEl}
   on:change 
   on:grab
   on:release
   let:grab={grab}>
+  
+  <defs>
+    <mask id={`${maskId}-outer`} class="a9s-polygon-editor-mask">
+      <rect x={mask.x} y={mask.y} width={mask.w} height={mask.h} />
+      <polygon points={geom.points.map(xy => xy.join(',')).join(' ')} />   
+      
+      {#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}-inner`}  class="a9s-polygon-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>
 
   <polygon
     class="a9s-outer"
-    style={computedStyle ? 'display:none;' : undefined}
+    mask={`url(#${maskId}-outer)`}
+    on:pointerup={onShapePointerUp}
     on:pointerdown={grab('SHAPE')}
     points={geom.points.map(xy => xy.join(',')).join(' ')} />
 
   <polygon
+    bind:this={polygonEl}
     class="a9s-inner a9s-shape-handle"
+    mask={`url(#${maskId}-inner)`}
     style={computedStyle}
+    on:pointermove={onPointerMove}
+    on:pointerup={onShapePointerUp}
     on:pointerdown={grab('SHAPE')}
     points={geom.points.map(xy => xy.join(',')).join(' ')} />
 
   {#each geom.points as point, idx}
     <Handle 
+      class="a9s-corner-handle"
+      x={point[0]}
+      y={point[1]}
+      scale={viewportScale}
+      selected={selectedCorners.includes(idx)}
+      on:pointerenter={onEnterHandle}
+      on:pointerleave={onLeaveHandle}
+      on:pointerdown={onHandlePointerDown}
       on:pointerdown={grab(`HANDLE-${idx}`)}
-      x={point[0]} y={point[1]} 
-      scale={viewportScale} />
+      on:pointerup={onHandlePointerUp(idx)} />
   {/each}
-</Editor>
+
+  {#if (visibleMidpoint !== undefined && !isHandleHovered)}
+    {@const { point } = midpoints[visibleMidpoint]}
+    <Midpoint 
+      x={point[0]}
+      y={point[1]}
+      scale={viewportScale}
+      on:pointerdown={onAddPoint(visibleMidpoint)} />
+  {/if}
+</Editor>
+
+<style>
+  mask.a9s-polygon-editor-mask > rect {
+    fill: #fff;
+  }
+
+  mask.a9s-polygon-editor-mask > circle,
+  mask.a9s-polygon-editor-mask > polygon {
+    fill: #000;
+  }
+</style>

package/src/annotation/editors/rectangle/RectangleEditor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Handle from '../Handle.svelte';
+  import { getMaskDimensions } from '../../utils';
   import type { Rectangle, Shape } from '../../../model';
   import type { Transform } from '../../Transform';
   import { Editor } from '..';
@@ -9,6 +10,7 @@
   export let computedStyle: string | undefined;
   export let transform: Transform;
   export let viewportScale: number = 1;
+  export let svgEl: SVGSVGElement;
 
   $: geom = shape.geometry;
 
@@ -77,20 +79,32 @@
       }
     };
   }
+
+  $: mask = getMaskDimensions(geom.bounds, 2 / viewportScale);
+  
+  const maskId = `rect-mask-${Math.random().toString(36).substring(2, 12)}`;
 </script>
 
 <Editor
   shape={shape}
   transform={transform}
   editor={editor}
+  svgEl={svgEl}
   on:grab
   on:change 
   on:release
   let:grab={grab}>
 
+  <defs>
+    <mask id={maskId} class="a9s-rectangle-editor-mask">
+      <rect class="rect-mask-bg" x={mask.x} y={mask.y} width={mask.w} height={mask.h} />
+      <rect class="rect-mask-fg" x={geom.x} y={geom.y} width={geom.w} height={geom.h} />
+    </mask>
+  </defs>
+
   <rect 
     class="a9s-outer"
-    style={computedStyle ? 'display:none;' : undefined}
+    mask={`url(#${maskId})`}
     on:pointerdown={grab('SHAPE')}
     x={geom.x} y={geom.y} width={geom.w} height={geom.h} />
 
@@ -143,4 +157,14 @@
     on:pointerdown={grab('BOTTOM_LEFT')}
     x={geom.x} y={geom.y + geom.h} 
     scale={viewportScale} />
-</Editor>
+</Editor>
+
+<style>
+  mask.a9s-rectangle-editor-mask > rect.rect-mask-bg {
+    fill: #fff;
+  }
+
+  mask.a9s-rectangle-editor-mask > rect.rect-mask-fg {
+    fill: #000;
+  }
+</style>

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

@@ -2,7 +2,7 @@
   import { onMount, createEventDispatcher } from 'svelte';
   import type { DrawingMode } from '../../../AnnotoriousOpts';
   import { boundsFromPoints, computeArea, ShapeType, type Polygon } from '../../../model';
-  import { distance } from '../../utils';
+  import { distance, getMaskDimensions } from '../../utils';
   import type { Transform } from '../..';
 
   const dispatch = createEventDispatcher<{ create: Polygon }>();
@@ -30,7 +30,7 @@
 
   const TOUCH_PAUSE_LIMIT = 1500;
 
-  $: handleSize = 10 / viewportScale;
+  $: handleRadius = 4 / viewportScale;
 
   const onPointerDown = (event: Event) => {
     const evt = event as PointerEvent;
@@ -167,26 +167,58 @@
     addEventListener('pointerup', onPointerUp, true);
     addEventListener('dblclick', onDblClick, true);
   });
+
+  $: coords = cursor ? (isClosable ? points : [...points, cursor]) : [];
+
+  $: mask = coords.length > 0 ? getMaskDimensions(boundsFromPoints(coords), 2 / viewportScale) : undefined;
+
+  const maskId = `polygon-mask-${Math.random().toString(36).substring(2, 12)}`;
 </script>
 
 <g class="a9s-annotation a9s-rubberband">
-  {#if cursor}
-    {@const coords = (isClosable ? points : [...points, cursor]).map(xy => xy.join(',')).join(' ')}
-      <polygon 
-        class="a9s-outer"
-        points={coords} />
-
-      <polygon 
-        class="a9s-inner"
-        points={coords} />
+  {#if mask}
+    {@const str = coords.map(xy => xy.join(',')).join(' ')}
+
+    <defs>
+      <mask id={maskId} class="a9s-rubberband-polygon-mask">
+        <rect x={mask.x} y={mask.y} width={mask.w} height={mask.h} />
+        <polygon points={str} />
+      </mask>
+    </defs>
+
+    <polygon 
+      class="a9s-outer"
+      mask={`url(#${maskId})`}
+      points={str} />
+
+    <polygon 
+      class="a9s-inner"
+      points={str} />
         
     {#if isClosable}
-      <rect 
+      <circle 
         class="a9s-handle"
-        x={points[0][0] - handleSize / 2} 
-        y={points[0][1] - handleSize / 2} 
-        height={handleSize} 
-        width={handleSize} />
+        cx={points[0][0]} 
+        cy={points[0][1]} 
+        r={handleRadius} />
     {/if}
   {/if}
-</g>
+</g>
+
+<style>
+  mask.a9s-rubberband-polygon-mask > rect {
+    fill: #fff;
+  }
+
+  mask.a9s-rubberband-polygon-mask > polygon {
+    fill: #000;
+  }
+
+  circle.a9s-handle {
+    fill: #fff;
+    pointer-events: none;
+    stroke: rgba(0, 0, 0, 0.35);
+    stroke-width: 1px;
+    vector-effect: non-scaling-stroke;
+  }
+</style>

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 type { Transform } from '../..';
+  import { getMaskDimensions, type Transform } from '../..';
 
   const dispatch = createEventDispatcher<{ create: Rectangle }>();
   
@@ -10,6 +10,7 @@
   export let addEventListener: (type: string, fn: EventListener, capture?: boolean) => void;
   export let drawingMode: DrawingMode;
   export let transform: Transform;
+  export let viewportScale: number = 1;
 
   let lastPointerDown: number;
 
@@ -121,12 +122,35 @@
     addEventListener('pointermove', onPointerMove);
     addEventListener('pointerup', onPointerUp, true);
   });
+  
+  const maskId = `rect-mask-${Math.random().toString(36).substring(2, 12)}`;
+  
+  $: buffer = 2 / viewportScale;
 </script>
 
 <g class="a9s-annotation a9s-rubberband">
   {#if origin}
+    <defs>
+      <mask id={maskId} class="a9s-rubberband-rectangle-mask">
+        <rect 
+          class="rect-mask-bg" 
+          x={x - buffer} 
+          y={y - buffer} 
+          width={w + 2 * buffer}
+          height={h + 2 * buffer}/>
+
+        <rect 
+          class="rect-mask-fg" 
+          x={x} 
+          y={y} 
+          width={w} 
+          height={h} />
+      </mask>
+    </defs>
+    
     <rect
       class="a9s-outer"
+      mask={`url(#${maskId})`}
       x={x} 
       y={y} 
       width={w} 
@@ -139,4 +163,14 @@
       width={w} 
       height={h} />
   {/if}
-</g>
+</g>
+
+<style>
+  mask.a9s-rubberband-rectangle-mask > rect.rect-mask-bg {
+    fill: #fff;
+  }
+
+  mask.a9s-rubberband-rectangle-mask > rect.rect-mask-fg {
+    fill: #000;
+  }
+</style>

package/src/annotation/utils/index.ts

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

package/src/annotation/utils/svg.ts

@@ -0,0 +1,11 @@
+import type { Bounds } from '../../model';
+
+export const getMaskDimensions = (bounds: Bounds, buffer: number = 0) => {
+  const { minX, minY, maxX, maxY } = bounds;
+  return {
+    x: minX - buffer,
+    y: minY - buffer,
+    w: maxX - minX + 2 * buffer,
+    h: maxY - minY + 2 * buffer
+  }
+}

package/src/themes/light/index.css

@@ -2,8 +2,8 @@
 .a9s-annotationlayer .a9s-outer,
 div[data-theme="light"] .a9s-annotationlayer .a9s-outer {
   display: block;
-  stroke: rgba(0, 0, 0, 0.25);
-  stroke-width: 3.5px;
+  stroke: rgba(0, 0, 0, 0.35);
+  stroke-width: 3px;
 }
 
 .a9s-annotationlayer .a9s-inner,