@annotorious/annotorious 3.4.0 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.4.0",
+  "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",
@@ -49,7 +49,7 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
-    "@annotorious/core": "3.4.0",
+    "@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 {

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/PolygonEditor.svelte

@@ -2,7 +2,7 @@
   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';
@@ -38,7 +38,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 +123,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 +226,8 @@
   }
 
   onMount(() => {
+    if (isTouch) return;
+
     const onKeydown = (evt: KeyboardEvent) => {
       if (evt.key === 'Delete' || evt.key === 'Backspace') {
         evt.preventDefault();