@annotorious/annotorious 3.3.6 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.3.6",
+  "version": "3.4.1",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -41,15 +41,15 @@
     "@tsconfig/svelte": "^5.0.4",
     "@types/rbush": "^4.0.0",
     "jsdom": "^26.1.0",
-    "svelte": "^4.2.19",
+    "svelte": "^4.2.20",
     "svelte-preprocess": "^6.0.3",
     "typescript": "5.8.3",
-    "vite": "^5.4.18",
-    "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.1.2"
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.1.4"
   },
   "dependencies": {
-    "@annotorious/core": "3.3.6",
+    "@annotorious/core": "3.4.1",
     "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 {
@@ -50,6 +51,10 @@
   cursor: move;
 }
 
+.a9s-handle.a9s-corner-handle {
+  cursor: crosshair;
+}
+
 .a9s-edge-handle-top {
   cursor: n-resize;
 }

package/src/annotation/SVGAnnotationLayer.svelte

@@ -143,16 +143,19 @@
   const getEditor = (shape: Shape): typeof SvelteComponent => _getEditor(shape)!;
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <svg
   bind:this={svgEl}
+  role="application"
+  tabindex={0}
   class="a9s-annotationlayer"
   class:drawing={tool}
+  class:editing={editableAnnotations}
   class:hidden={!visible}
   class:hover={$hover}
   on:pointerup={onPointerUp}
   on:pointerdown={onPointerDown}
   on:pointermove={onPointerMove}>
-  
   <g>
     {#each $store.filter(a => isImageAnnotation(a)) as annotation}
       {#if isImageAnnotation(annotation) && !isEditable(annotation)}

package/src/annotation/editors/Editor.svelte

@@ -9,6 +9,7 @@
   export let shape: Shape;
   export let editor: (shape: Shape, handle: string, delta: [number, number]) => Shape;
   export let transform: Transform;
+  export let svgEl: SVGSVGElement;
 
   let grabbedHandle: string | undefined;
 
@@ -18,7 +19,22 @@
 
   const onGrab = (handle: string) => (evt: PointerEvent) => {
     grabbedHandle = handle;
-    origin = transform.elementToImage(evt.offsetX, evt.offsetY);
+
+    // For legacy compatibility: offsetX and offsetY are not
+    // available on synthetic events, currently used by the
+    // new PolygonEditor. Old versions of Annotorious, however, 
+    // won't yet forward the svgEl prop!
+    if (svgEl) {
+      const { left, top } = svgEl.getBoundingClientRect();
+      const offsetX = evt.clientX - left;
+      const offsetY = evt.clientY - top;
+
+      origin = transform.elementToImage(offsetX, offsetY);
+    } else {
+      const { offsetX, offsetY } = evt;
+      origin = transform.elementToImage(offsetX, offsetY);
+    }
+
     initialShape = shape;
 
     const target = evt.target as Element;

package/src/annotation/editors/EditorMount.svelte

@@ -27,7 +27,13 @@
   onMount(() => {    
     editorComponent = new editor({
       target,
-      props: { shape: annotation.target.selector, computedStyle, transform, viewportScale }
+      props: { 
+        shape: annotation.target.selector, 
+        computedStyle, 
+        transform, 
+        viewportScale,
+        svgEl: target.closest('svg')
+      }
     });
 
     editorComponent.$on('change', event => {

package/src/annotation/editors/Handle.svelte

@@ -5,19 +5,19 @@
   export let x: number;
   export let y: number;
   export let scale: number;
-  export let radius: number = 30;
+  export let selected: Boolean | undefined = undefined;
 
   let touched = false;
 
-  const onPointerDown = (event: PointerEvent) => {
-    if (event.pointerType === 'touch')
+  const onPointerDown = (evt: PointerEvent) => {
+    if (evt.pointerType === 'touch')
       touched = true;
   }
 
   const onPointerUp = () =>
     touched = false;
 
-  $: handleSize = 10 / scale;
+  $: handleRadius = 4 / scale;
 </script>
 
 {#if isTouch}
@@ -25,42 +25,101 @@
     <circle 
       cx={x} 
       cy={y} 
-      r={radius / scale}
+      r={handleRadius * 10}
       class="a9s-touch-halo"
-      class:touched={touched}
+      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} />
+      on:pointerup={onPointerUp} /> 
 
-    <rect 
-      class={`a9s-handle ${$$props.class || ''}`.trim()}
-      x={x - handleSize / 2} 
-      y={y - handleSize / 2} 
-      width={handleSize} 
-      height={handleSize}
-      on:pointerdown
-      on:pointerdown={onPointerDown} 
-      on:pointerup={onPointerUp}  />
+    <circle 
+      class="a9s-handle-dot"
+      cx={x}
+      cy={y}
+      r={handleRadius + 2 / scale} />
   </g>
 {:else}
-  <rect 
-    class={`a9s-handle ${$$props.class || ''}`.trim()}
-    x={x - handleSize / 2} 
-    y={y - handleSize / 2} 
-    width={handleSize} 
-    height={handleSize} 
-    on:pointerdown />
+  <g class={`a9s-handle ${$$props.class || ''}`.trim()}>
+    <circle 
+      class="a9s-handle-buffer"
+      cx={x}
+      cy={y}
+      r={handleRadius + (6 / scale)} 
+      on:pointerenter
+      on:pointerleave
+      on:pointerdown
+      on:pointerdown={onPointerDown}
+      on:pointerup
+      on:pointerup={onPointerUp} />
+
+    {#if selected}
+      <circle 
+        class="a9s-handle-selected"
+        cx={x} 
+        cy={y} 
+        r={handleRadius + (8 / scale)} />
+    {/if}
+
+    <circle 
+      class={`a9s-handle-dot${selected ? ' selected': ''}`}
+      cx={x}
+      cy={y}
+      r={handleRadius} />
+  </g>
 {/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.25);
+    fill: rgba(255, 255, 255, 0.4);
+  }
+
+  .a9s-handle-buffer {
+    fill: transparent;
+  }
+
+  .a9s-handle-dot {
+    fill: #fff;
+    pointer-events: none;
+    stroke: rgba(0, 0, 0, 0.35);
+    stroke-width: 1px;
+    vector-effect: non-scaling-stroke;
+  }
+
+  .a9s-handle-dot.selected {
+    fill: #1a1a1a;
+    stroke: none;
   }
 
+  .a9s-handle-selected {
+    animation: dash-rotate 350ms linear infinite reverse;
+    fill: rgba(255, 255, 255, 0.25);
+    stroke: rgba(0, 0, 0, 0.9);
+    stroke-dasharray: 2 2;
+    stroke-width: 1px;
+    pointer-events: none;
+    vector-effect: non-scaling-stroke;
+  }
 
-</style>
+  @keyframes dash-rotate {
+    0% {
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dashoffset: 4; /* Sum of dash + gap */
+    }
+  }
+</style>

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

@@ -11,6 +11,7 @@
     multipolygonElementToPath 
   } from '../../../model';
   import type { Transform } from '../../Transform';
+  import { getMaskDimensions } from '../../utils';
   import { Editor, Handle } from '..';
 
   /** Props */
@@ -18,6 +19,7 @@
   export let computedStyle: string | undefined;
   export let transform: Transform;
   export let viewportScale: number = 1;
+  export let svgEl: SVGSVGElement;
 
   $: geom = shape.geometry;
 
@@ -76,22 +78,33 @@
       } 
     } as MultiPolygon;
   }
+
+  $: mask = getMaskDimensions(geom.bounds, 2 / viewportScale);
+
+  const maskId = `multipoly-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}>
-
   {#each geom.polygons as element, elementIdx}
     <g>
+      <defs>
+        <mask id={`${maskId}-${elementIdx}`} class="a9s-multipolygon-editor-mask">
+          <rect x={mask.x} y={mask.y} width={mask.w} height={mask.h} />
+          <path d={multipolygonElementToPath(element)} />   
+        </mask>
+      </defs>
+
       <path 
         class="a9s-outer"
-        style={computedStyle ? 'display:none;' : undefined}
+        mask={`url(#${maskId}-${elementIdx})`}
         fill-rule="evenodd"
         on:pointerdown={grab('SHAPE')}
         d={multipolygonElementToPath(element)} />
@@ -106,6 +119,7 @@
       {#each element.rings as ring, ringIdx}
         {#each ring.points as point, pointIdx}
           <Handle 
+            class="a9s-corner-handle"
             on:pointerdown={grab(`HANDLE-${elementIdx}-${ringIdx}-${pointIdx}`)}
             x={point[0]} y={point[1]} 
             scale={viewportScale} />
@@ -113,4 +127,14 @@
       {/each}
     </g>
   {/each}
-</Editor>
+</Editor>
+
+<style>
+  mask.a9s-multipolygon-editor-mask > rect {
+    fill: #fff;
+  }
+
+  mask.a9s-multipolygon-editor-mask > path {
+    fill: #000;
+  }
+</style>

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { isTouch } from '../../utils';
+
+  /** props **/
+  export let x: number;
+  export let y: number;
+  export let scale: number;
+
+  let touched = false;
+
+  const onPointerDown = (evt: PointerEvent) => {
+    if (evt.pointerType === 'touch')
+      touched = true;
+  }
+
+  const onPointerUp = () =>
+    touched = false;
+
+  $: handleRadius = 4 / scale;
+</script>
+
+{#if isTouch}
+  <circle 
+    cx={x}
+    cy={y}
+    r={handleRadius} />
+{:else}
+  <g class="a9s-polygon-midpoint">
+    <circle 
+      class="a9s-polygon-midpoint-buffer"
+      cx={x}
+      cy={y}
+      r={1.75 * handleRadius} 
+      on:pointerdown
+      on:pointerdown={onPointerDown} />
+
+    <circle 
+      class="a9s-polygon-midpoint-outer"
+      cx={x} 
+      cy={y} 
+      r={handleRadius} />
+
+    <circle 
+      class="a9s-polygon-midpoint-inner"
+      cx={x} 
+      cy={y} 
+      r={handleRadius} />
+  </g>
+{/if}
+
+<style>
+  .a9s-polygon-midpoint {
+    cursor: crosshair;
+  }
+  
+  .a9s-polygon-midpoint-buffer {
+    fill: transparent;
+  }
+
+  .a9s-polygon-midpoint-outer {
+    display: none;
+    fill: transparent;
+    pointer-events: none;
+    stroke: rgba(0, 0, 0, 0.35);
+    stroke-width: 1.5px;
+    vector-effect: non-scaling-stroke;
+  }
+
+  .a9s-polygon-midpoint-inner {
+    fill: rgba(0, 0, 0, 0.25);
+    pointer-events: none;
+    stroke: #fff;
+    stroke-width: 1px;  
+    vector-effect: non-scaling-stroke;
+  }
+</style>