@annotorious/annotorious 3.0.0-rc.17 → 3.0.0-rc.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.17",
+  "version": "3.0.0-rc.18",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",

package/src/Annotorious.css

@@ -37,7 +37,7 @@
   cursor: move;
 }
 
-.a9s-corner-handle {
+.a9s-handle {
   cursor: move;
 }
 
@@ -57,18 +57,18 @@
   cursor: w-resize;
 }
 
-.a9s-corner-handle.a9s-corner-handle-topleft {
+.a9s-handle.a9s-corner-handle-topleft {
   cursor: nw-resize;
 }
 
-.a9s-corner-handle.a9s-corner-handle-topright {
+.a9s-handle.a9s-corner-handle-topright {
   cursor: ne-resize;
 }
 
-.a9s-corner-handle.a9s-corner-handle-bottomright {
+.a9s-handle.a9s-corner-handle-bottomright {
   cursor: se-resize; 
 }
 
-.a9s-corner-handle.a9s-corner-handle-bottomleft {
+.a9s-handle.a9s-corner-handle-bottomleft {
   cursor: sw-resize;
 }

package/src/annotation/editors/Editor.svelte

@@ -1,23 +1,22 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import type { Shape } from '../../model';
-  import type { Handle } from './Handle';
   import type { Transform } from '../Transform';
 
-  const dispatch = createEventDispatcher<{ grab: undefined, release: undefined, change: Shape }>();
+  const dispatch = createEventDispatcher<{ grab: PointerEvent, release: PointerEvent, change: Shape }>();
 
   /** Props */
   export let shape: Shape;
-  export let editor: (shape: Shape, handle: Handle, delta: [number, number]) => Shape;
+  export let editor: (shape: Shape, handle: string, delta: [number, number]) => Shape;
   export let transform: Transform;
 
-  let grabbedHandle: Handle | undefined;
+  let grabbedHandle: string | undefined;
 
   let origin: [number, number];
 
   let initialShape: Shape | undefined;
 
-  const onGrab = (handle: Handle) => (evt: PointerEvent) => {
+  const onGrab = (handle: string) => (evt: PointerEvent) => {
     grabbedHandle = handle;
     origin = transform.elementToImage(evt.offsetX, evt.offsetY);
     initialShape = shape;
@@ -25,7 +24,7 @@
     const target = evt.target as Element;
     target.setPointerCapture(evt.pointerId);
 
-    dispatch('grab');
+    dispatch('grab', evt);
   }
 
   const onPointerMove = (evt: PointerEvent) => {
@@ -48,7 +47,7 @@
 
     initialShape = shape;
     
-    dispatch('release');
+    dispatch('release', evt);
   }
 </script>
 

package/src/annotation/editors/EditorMount.svelte

@@ -5,7 +5,7 @@
   import { computeStyle } from '../utils/styling';
   import type { Transform } from '../Transform';
 
-  const dispatch = createEventDispatcher<{ grab: undefined, release: undefined, change: Shape }>();
+  const dispatch = createEventDispatcher<{ grab: PointerEvent, release: PointerEvent, change: Shape }>();
 
   /** Props */
   export let annotation: ImageAnnotation;

package/src/annotation/editors/Handle.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { isTouch } from '../utils';
+
+  /** props **/
+  export let x: number;
+  export let y: number;
+  export let scale: number;
+  export let radius: number = 30;
+
+  let touched = false;
+
+  const onPointerDown = (event: PointerEvent) => {
+    if (event.pointerType === 'touch')
+      touched = true;
+  }
+
+  const onPointerUp = () =>
+    touched = false;
+
+  $: handleSize = 10 / scale;
+</script>
+
+{#if isTouch}
+  <g class="a9s-touch-handle">
+    <circle 
+      cx={x} 
+      cy={y} 
+      r={radius / scale}
+      class="a9s-touch-halo"
+      class:touched={touched}
+      on:pointerdown
+      on:pointerdown={onPointerDown} 
+      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}  />
+  </g>
+{:else}
+  <rect 
+    class={`a9s-handle ${$$props.class || ''}`.trim()}
+    x={x - handleSize / 2} 
+    y={y - handleSize / 2} 
+    width={handleSize} 
+    height={handleSize} 
+    on:pointerdown />
+{/if}
+
+<style>
+  .a9s-touch-halo {
+    fill: transparent;
+    stroke-width: 0;
+  }
+
+  .a9s-touch-halo.touched {
+    fill: rgba(255, 255, 255, 0.25);
+  }
+
+
+</style>

package/src/annotation/editors/index.ts

@@ -1,7 +1,7 @@
 export * from './polygon';
 export * from './rectangle';
 export * from './editorsRegistry';
-export * from './Handle';
 
 export { default as Editor } from './Editor.svelte';
-export { default as EditorMount } from './EditorMount.svelte';
+export { default as EditorMount } from './EditorMount.svelte';
+export { default as Handle } from './Handle.svelte';

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

@@ -12,18 +12,16 @@
 
   $: geom = shape.geometry;
 
-  $: handleSize = 10 / viewportScale;
-
-  const editor = (polygon: Shape, handle: Handle, delta: [number, number]) => {
+  const editor = (polygon: Shape, handle: string, delta: [number, number]) => {
     let points: [number, number][];
 
     const geom = (polygon.geometry) as PolygonGeometry;
 
-    if (handle === Handle.SHAPE) {
+    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]
       );
     }
 
@@ -48,19 +46,19 @@
   <polygon
     class="a9s-outer"
     style={computedStyle ? 'display:none;' : undefined}
-    on:pointerdown={grab(Handle.SHAPE)}
+    on:pointerdown={grab('SHAPE')}
     points={geom.points.map(xy => xy.join(',')).join(' ')} />
 
   <polygon
     class="a9s-inner a9s-shape-handle"
     style={computedStyle}
-    on:pointerdown={grab(Handle.SHAPE)}
+    on:pointerdown={grab('SHAPE')}
     points={geom.points.map(xy => xy.join(',')).join(' ')} />
 
   {#each geom.points as point, idx}
-    <rect 
-      class="a9s-corner-handle"
-      on:pointerdown={grab(Handle(idx))}
-      x={point[0] - handleSize / 2} y={point[1] - handleSize / 2} height={handleSize} width={handleSize} />
+    <Handle 
+      on:pointerdown={grab(`HANDLE-${idx}`)}
+      x={point[0]} y={point[1]} 
+      scale={viewportScale} />
   {/each}
 </Editor>

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

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import Handle from '../Handle.svelte';
   import type { Rectangle, Shape } from '../../../model';
   import type { Transform } from '../../Transform';
-  import { Editor, Handle } from '..';
+  import { Editor } from '..';
 
   /** Props */
   export let shape: Rectangle;
@@ -11,9 +12,7 @@
 
   $: geom = shape.geometry;
 
-  $: handleSize = 10 / viewportScale;
-
-  const editor = (rectangle: Shape, handle: Handle, delta: [number, number]) => {
+  const editor = (rectangle: Shape, handle: string, delta: [number, number]) => {
     const initialBounds = rectangle.geometry.bounds;
 
     let [x0, y0] = [initialBounds.minX, initialBounds.minY];
@@ -21,39 +20,39 @@
 
     const [dx, dy] = delta;
 
-    if (handle === Handle.SHAPE) {
+    if (handle === 'SHAPE') {
       x0 += dx;
       x1 += dx;
       y0 += dy;
       y1 += dy;
     } else {
       switch (handle) {
-        case Handle.TOP:
-        case Handle.TOP_LEFT:
-        case Handle.TOP_RIGHT: {
+        case 'TOP':
+        case 'TOP_LEFT':
+        case 'TOP_RIGHT': {
           y0 += dy;
           break;
         }
 
-        case Handle.BOTTOM:
-        case Handle.BOTTOM_LEFT:
-        case Handle.BOTTOM_RIGHT: {
+        case 'BOTTOM':
+        case 'BOTTOM_LEFT':
+        case 'BOTTOM_RIGHT': {
           y1 += dy;
           break;
         }
       }
 
       switch (handle) {
-        case Handle.LEFT:
-        case Handle.TOP_LEFT:
-        case Handle.BOTTOM_LEFT: {
+        case 'LEFT':
+        case 'TOP_LEFT':
+        case 'BOTTOM_LEFT': {
           x0 += dx;
           break;
         }
 
-        case Handle.RIGHT:
-        case Handle.TOP_RIGHT:
-        case Handle.BOTTOM_RIGHT: {
+        case 'RIGHT':
+        case 'TOP_RIGHT':
+        case 'BOTTOM_RIGHT': {
           x1 += dx;
           break;
         }
@@ -92,52 +91,56 @@
   <rect 
     class="a9s-outer"
     style={computedStyle ? 'display:none;' : undefined}
-    on:pointerdown={grab(Handle.SHAPE)}
+    on:pointerdown={grab('SHAPE')}
     x={geom.x} y={geom.y} width={geom.w} height={geom.h} />
 
   <rect 
     class="a9s-inner a9s-shape-handle"
     style={computedStyle}
-    on:pointerdown={grab(Handle.SHAPE)}
+    on:pointerdown={grab('SHAPE')}
     x={geom.x} y={geom.y} width={geom.w} height={geom.h} />
 
   <rect 
     class="a9s-edge-handle a9s-edge-handle-top" 
-    on:pointerdown={grab(Handle.TOP)}
+    on:pointerdown={grab('TOP')}
     x={geom.x} y={geom.y} height={1} width={geom.w} />
 
   <rect 
     class="a9s-edge-handle a9s-edge-handle-right"
-    on:pointerdown={grab(Handle.RIGHT)}
+    on:pointerdown={grab('RIGHT')}
     x={geom.x + geom.w} y={geom.y} height={geom.h} width={1}/>
 
   <rect 
     class="a9s-edge-handle a9s-edge-handle-bottom" 
-    on:pointerdown={grab(Handle.BOTTOM)}
+    on:pointerdown={grab('BOTTOM')}
     x={geom.x} y={geom.y + geom.h} height={1} width={geom.w} />
 
   <rect 
     class="a9s-edge-handle a9s-edge-handle-left" 
-    on:pointerdown={grab(Handle.LEFT)}
+    on:pointerdown={grab('LEFT')}
     x={geom.x} y={geom.y} height={geom.h} width={1} />
 
-  <rect 
-    class="a9s-corner-handle a9s-corner-handle-topleft"
-    on:pointerdown={grab(Handle.TOP_LEFT)}
-    x={geom.x - handleSize / 2} y={geom.y - handleSize / 2} height={handleSize} width={handleSize} />
-
-  <rect 
-    class="a9s-corner-handle a9s-corner-handle-topright"
-    on:pointerdown={grab(Handle.TOP_RIGHT)}
-    x={geom.x + geom.w - handleSize / 2} y={geom.y - handleSize / 2} height={handleSize} width={handleSize} />
+  <Handle
+    class="a9s-corner-handle-topleft"
+    on:pointerdown={grab('TOP_LEFT')}
+    x={geom.x} y={geom.y}
+    scale={viewportScale} /> 
+
+  <Handle
+    class="a9s-corner-handle-topright"
+    on:pointerdown={grab('TOP_RIGHT')}
+    x={geom.x + geom.w} y={geom.y} 
+    scale={viewportScale} />
   
-  <rect 
-    class="a9s-corner-handle a9s-corner-handle-bottomright"
-    on:pointerdown={grab(Handle.BOTTOM_RIGHT)}
-    x={geom.x + geom.w - handleSize / 2} y={geom.y + geom.h - handleSize / 2} height={handleSize} width={handleSize} />
+  <Handle 
+    class="a9s-corner-handle-bottomright"
+    on:pointerdown={grab('BOTTOM_RIGHT')}
+    x={geom.x + geom.w} y={geom.y + geom.h} 
+    scale={viewportScale} />
     
-  <rect 
-    class="a9s-corner-handle a9s-corner-handle-bottomleft"
-    on:pointerdown={grab(Handle.BOTTOM_LEFT)}
-    x={geom.x - handleSize / 2} y={geom.y + geom.h - handleSize / 2} height={handleSize} width={handleSize} />
+  <Handle 
+    class="a9s-corner-handle-bottomleft"
+    on:pointerdown={grab('BOTTOM_LEFT')}
+    x={geom.x} y={geom.y + geom.h} 
+    scale={viewportScale} />
 </Editor>

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

@@ -19,10 +19,17 @@
   
   let cursor: [number, number] | undefined;
 
+  // Keep track of the user keeping the finger
+  // in place. Long pauses will be interpreted like a 
+  // double click and close the shape.
+  let touchPauseTimer: number | undefined;
+
   let isClosable: boolean = false;
 
   const CLOSE_DISTANCE = 20;
 
+  const TOUCH_PAUSE_LIMIT = 1500;
+
   $: handleSize = 10 / viewportScale;
 
   const onPointerDown = (event: Event) => {
@@ -45,6 +52,8 @@
   const onPointerMove = (event: Event) => {
     const evt = event as PointerEvent;
 
+    if (touchPauseTimer) clearTimeout(touchPauseTimer);
+
     if (points.length > 0) {
       cursor = transform.elementToImage(evt.offsetX, evt.offsetY);
 
@@ -52,6 +61,12 @@
         const d = distance(cursor, points[0]) * viewportScale;
         isClosable = d < CLOSE_DISTANCE;
       }
+
+      if (evt.pointerType === 'touch') {
+        touchPauseTimer = setTimeout(() => {
+          onDblClick();
+        }, TOUCH_PAUSE_LIMIT);
+      }
     }
   }
 
@@ -105,9 +120,11 @@
   }
 
   const onDblClick = () => {
+    if (!cursor) return;
+
     // Require min 3 points (incl. cursor) and minimum
     // polygon area
-    const p = [...points, cursor!];
+    const p = [...points, cursor];
 
     const shape: Polygon = {
       type: ShapeType.POLYGON, 

package/src/annotation/utils/touch.ts

@@ -1 +1,4 @@
-export const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+export const isTouch = 'ontouchstart' in window 
+  || navigator.maxTouchPoints > 0
+  // @ts-ignore
+  || navigator.msMaxTouchPoints > 0;

package/src/keyboardCommands.ts

@@ -12,9 +12,9 @@ export const initKeyboardCommands = <T extends Annotation>(
   const onWinKeyDown = (evt: Event) => {
     const event = evt as KeyboardEvent;
     
-    if (event.key === 'Z' && event.ctrlKey) {
+    if (event.key === 'z' && event.ctrlKey) {
       undoStack.undo();
-    } else if (event.key === 'Y' && event.ctrlKey) {
+    } else if (event.key === 'y' && event.ctrlKey) {
       undoStack.redo()
     }
   };

package/src/themes/dark/index.css

@@ -11,8 +11,8 @@ div[data-theme="dark"] .a9s-annotationlayer .a9s-inner {
   stroke-width: 1px;
 }
 
-rect.a9s-corner-handle,
-div[data-theme="dark"] rect.a9s-corner-handle {
+rect.a9s-handle,
+div[data-theme="dark"] rect.a9s-handle {
   fill: #000;
   rx: 2px;
 }

package/src/themes/light/index.css

@@ -13,8 +13,8 @@ div[data-theme="light"] .a9s-annotationlayer .a9s-inner {
   stroke-width: 1.5px;
 }
 
-rect.a9s-corner-handle,
-div[data-theme="light"] rect.a9s-corner-handle {
+rect.a9s-handle,
+div[data-theme="light"] rect.a9s-handle {
   fill: #fff;
   rx: 1px;
   stroke: rgba(0, 0, 0, 0.45);

package/dist/annotation/editors/Handle.d.ts

@@ -1,14 +0,0 @@
-export type Handle = string;
-export declare const Handle: {
-    (value: string | number): string;
-    SHAPE: string;
-    TOP: string;
-    RIGHT: string;
-    BOTTOM: string;
-    LEFT: string;
-    TOP_LEFT: string;
-    TOP_RIGHT: string;
-    BOTTOM_RIGHT: string;
-    BOTTOM_LEFT: string;
-};
-//# sourceMappingURL=Handle.d.ts.map

package/dist/annotation/editors/Handle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Handle.d.ts","sourceRoot":"","sources":["../../../src/annotation/editors/Handle.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAE5B,eAAO,MAAM,MAAM;YAAW,MAAM,GAAG,MAAM;;;;;;;;;;CAAsB,CAAC"}

package/src/annotation/editors/Handle.ts

@@ -1,21 +0,0 @@
-export type Handle = string;
-
-export const Handle = (value: string | number) => `HANDLE-${value}`;
-
-Handle.SHAPE = 'SHAPE';
-
-Handle.TOP = 'TOP';
-
-Handle.RIGHT = 'RIGHT';
-
-Handle.BOTTOM = 'BOTTOM';
-
-Handle.LEFT = 'LEFT';
-
-Handle.TOP_LEFT = 'TOP_LEFT';
-
-Handle.TOP_RIGHT = 'TOP_RIGHT';
-
-Handle.BOTTOM_RIGHT = 'BOTTOM_RIGHT';
-
-Handle.BOTTOM_LEFT = 'BOTTOM_LEFT';