@annotorious/annotorious 3.0.0-rc.1

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

@@ -0,0 +1,143 @@
+<script type="ts">
+  import type { Rectangle } from '../../../model';
+  import type { Transform } from '../../Transform';
+  import { Editor, Handle } from '..';
+
+  /** Props */
+  export let shape: Rectangle;
+  export let computedStyle: string = undefined;
+  export let transform: Transform;
+  export let viewportScale: number = 1;
+
+  $: geom = shape.geometry;
+
+  $: handleSize = 10 / viewportScale;
+
+  const editor = (rectangle: Rectangle, handle: Handle, delta: [number, number]) => {
+    const initialBounds = rectangle.geometry.bounds;
+
+    let [x0, y0] = [initialBounds.minX, initialBounds.minY];
+    let [x1, y1] = [initialBounds.maxX, initialBounds.maxY];
+
+    const [dx, dy] = delta;
+
+    if (handle === Handle.SHAPE) {
+      x0 += dx;
+      x1 += dx;
+      y0 += dy;
+      y1 += dy;
+    } else {
+      switch (handle) {
+        case Handle.TOP:
+        case Handle.TOP_LEFT:
+        case Handle.TOP_RIGHT: {
+          y0 += dy;
+          break;
+        }
+
+        case Handle.BOTTOM:
+        case Handle.BOTTOM_LEFT:
+        case Handle.BOTTOM_RIGHT: {
+          y1 += dy;
+          break;
+        }
+      }
+
+      switch (handle) {
+        case Handle.LEFT:
+        case Handle.TOP_LEFT:
+        case Handle.BOTTOM_LEFT: {
+          x0 += dx;
+          break;
+        }
+
+        case Handle.RIGHT:
+        case Handle.TOP_RIGHT:
+        case Handle.BOTTOM_RIGHT: {
+          x1 += dx;
+          break;
+        }
+      }
+    }
+
+    const x = Math.min(x0, x1);
+    const y = Math.min(y0, y1);
+    const w = Math.abs(x1 - x0);
+    const h = Math.abs(y1 - y0);
+
+    return {
+      ...rectangle,
+      geometry: {
+        x, y, w, h,
+        bounds: {
+          minX: x,
+          minY: y,
+          maxX: x + w,
+          maxY: y + h
+        }
+      }
+    };
+  }
+</script>
+
+<Editor
+  shape={shape}
+  transform={transform}
+  editor={editor}
+  on:grab
+  on:change 
+  on:release
+  let:grab={grab}>
+
+  <rect 
+    class="a9s-outer"
+    style={computedStyle ? 'display:none;' : undefined}
+    on:pointerdown={grab(Handle.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)}
+    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)}
+    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)}
+    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)}
+    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)}
+    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} />
+  
+  <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} />
+    
+  <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} />
+</Editor>

package/src/annotation/editors/rectangle/index.ts

@@ -0,0 +1 @@
+export { default as RectangleEditor } from './RectangleEditor.svelte';

package/src/annotation/index.ts

@@ -0,0 +1,7 @@
+export * from './editors';
+export * from './tools';
+export * from './utils';
+
+export { default as SVGAnnotationLayer } from './SVGAnnotationLayer.svelte';
+export * from './SVGAnnotationLayerPointerEvent';
+export * from './Transform';

package/src/annotation/shapes/Ellipse.svelte

@@ -0,0 +1,32 @@
+<script type="ts">
+  import type { DrawingStyle } from '@annotorious/core';
+  import type { Geometry, EllipseGeometry, ImageAnnotation } from '../../model';
+  import { computeStyle } from '../utils/styling';
+  
+  /** Props */
+  export let annotation: ImageAnnotation;
+  export let geom: Geometry;
+  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
+
+  $: computedStyle = computeStyle(annotation, style);
+
+  const { cx, cy, rx, ry } = geom as EllipseGeometry;
+</script>
+
+<g data-id={annotation.id}>
+  <ellipse
+    class="a9s-outer"
+    style={computedStyle ? 'display:none;' : undefined}
+    cx={cx} 
+    cy={cy} 
+    rx={rx} 
+    ry={ry} />
+
+  <ellipse
+    class="a9s-inner"
+    style={computedStyle}
+    cx={cx} 
+    cy={cy} 
+    rx={rx} 
+    ry={ry} />
+</g>

package/src/annotation/shapes/Polygon.svelte

@@ -0,0 +1,26 @@
+<script type="ts">
+  import type { DrawingStyle } from '@annotorious/core';
+  import type { Geometry, ImageAnnotation, PolygonGeometry } from '../../model';
+  import { computeStyle } from '../utils/styling';
+  
+  /** Props **/
+  export let annotation: ImageAnnotation;
+  export let geom: Geometry;
+  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
+
+  $: computedStyle = computeStyle(annotation, style);
+
+  const { points } = geom as PolygonGeometry;
+</script>
+
+<g data-id={annotation.id}>
+  <polygon 
+    class="a9s-outer"
+    style={computedStyle ? 'display:none;' : undefined}
+    points={points.map(xy => xy.join(',')).join(' ')} />
+
+  <polygon 
+    class="a9s-inner"
+    style={computedStyle}
+    points={points.map(xy => xy.join(',')).join(' ')} />
+</g>

package/src/annotation/shapes/Rectangle.svelte

@@ -0,0 +1,32 @@
+<script type="ts">
+  import type { DrawingStyle } from '@annotorious/core';
+  import type { Geometry, ImageAnnotation, RectangleGeometry } from '../../model';
+  import { computeStyle } from '../utils/styling';
+  
+  /** Props **/
+  export let annotation: ImageAnnotation;
+  export let geom: Geometry;
+  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
+
+  $: computedStyle = computeStyle(annotation, style);
+
+  const { x, y, w, h } = geom as RectangleGeometry;
+</script>
+
+<g data-id={annotation.id}>
+  <rect
+    class="a9s-outer"
+    style={computedStyle ? 'display:none;' : undefined}
+    x={x} 
+    y={y} 
+    width={w} 
+    height={h} />
+
+  <rect
+    class="a9s-inner"
+    style={computedStyle}
+    x={x} 
+    y={y} 
+    width={w} 
+    height={h} />
+</g>

package/src/annotation/shapes/index.ts

@@ -0,0 +1,3 @@
+export { default as Ellipse } from './Ellipse.svelte';
+export { default as Polygon } from './Polygon.svelte';
+export { default as Rectangle } from './Rectangle.svelte';

package/src/annotation/tools/DrawingToolConfig.ts

@@ -0,0 +1,9 @@
+import type { SvelteComponent } from 'svelte';
+
+export interface ToolConfig {
+
+  component: typeof SvelteComponent;
+
+  opts?: { [key: string]: any }
+
+}

package/src/annotation/tools/ToolMount.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount, type SvelteComponent } from 'svelte';
+  import type { Transform } from '../Transform';
+  import type { Shape } from 'src/model';
+  import type { DrawingMode } from 'src/AnnotoriousOpts';
+
+  const dispatch = createEventDispatcher<{ create: Shape }>();
+
+  /** Props **/
+  export let drawingMode: DrawingMode;
+  export let target: SVGGElement;
+  export let tool: typeof SvelteComponent;
+  export let transform: Transform;
+  export let viewportScale: number;
+
+  let toolComponent: SvelteComponent;
+
+  $: if (toolComponent) toolComponent.$set({ transform });
+  $: if (toolComponent) toolComponent.$set({ viewportScale });
+
+  onMount(() => {
+    const svg = target.closest('svg');
+
+    const cleanup: Function[] = [];
+
+    const addEventListener = (name: string, handler: (evt: PointerEvent) => void, capture?: boolean) => {
+      svg.addEventListener(name, handler, capture);
+      cleanup.push(() => svg.removeEventListener(name, handler, capture));
+    }
+
+    toolComponent = new tool({
+      target,
+      props: { 
+        addEventListener,
+        drawingMode,
+        transform, 
+        viewportScale
+      }
+    });
+
+    toolComponent.$on('create', 
+      event => dispatch('create', event.detail));
+
+    return () => {
+      cleanup.forEach(fn => fn());
+      toolComponent.$destroy();
+    }
+  });
+</script>

package/src/annotation/tools/drawingToolsRegistry.ts

@@ -0,0 +1,26 @@
+import type { SvelteComponent } from 'svelte';
+import { RubberbandRectangle } from './rectangle';
+import { RubberbandPolygon } from './polygon';
+import type { DrawingMode } from '../../AnnotoriousOpts';
+
+export type DrawingTool = 'rectangle' | 'polygon' | string;
+
+export type DrawingToolOpts = {
+
+  drawingMode?: DrawingMode;
+
+  [key: string]: string;
+
+}
+
+const REGISTERED = new Map<DrawingTool, { tool: typeof SvelteComponent, opts?: DrawingToolOpts }>([
+  ['rectangle', { tool: RubberbandRectangle }],
+  ['polygon', { tool: RubberbandPolygon }]
+]);
+
+export const listDrawingTools = () => [...REGISTERED.keys()];
+
+export const getTool = (name: string) => REGISTERED.get(name);
+  
+export const registerTool = (name: string, tool: typeof SvelteComponent, opts?: DrawingToolOpts) =>
+  REGISTERED.set(name, { tool, opts });

package/src/annotation/tools/index.ts

@@ -0,0 +1,4 @@
+export { default as ToolMount } from './ToolMount.svelte';
+export * from './rectangle';
+export * from './DrawingToolConfig';
+export * from './drawingToolsRegistry';

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

@@ -0,0 +1,165 @@
+<script type="ts">
+  import { onMount, createEventDispatcher } from 'svelte';
+  import type { DrawingMode } from '../../../AnnotoriousOpts';
+  import { boundsFromPoints, ShapeType, type Polygon } from '../../../model';
+  import { distance } from '../../utils';
+  import type { Transform } from '../..';
+
+  const dispatch = createEventDispatcher<{ create: Polygon }>();
+
+  /** Props **/
+  export let addEventListener: (type: string, fn: EventListener, capture?: boolean) => void;
+  export let drawingMode: DrawingMode;
+  export let transform: Transform;
+  export let viewportScale = 1;
+
+  let container: SVGGElement;
+
+  let lastPointerDown: number;
+
+  let points: [number, number][] = [];
+  
+  let cursor: [number, number] = null;
+
+  let isClosable: boolean = false;
+
+  const CLOSE_DISTANCE = 20;
+
+  $: handleSize = 10 / viewportScale;
+
+  const onPointerDown = (evt: PointerEvent) => {
+    lastPointerDown = performance.now();
+
+    if (drawingMode === 'drag') {
+      if (points.length === 0) {
+        const point = transform.elementToImage(evt.offsetX, evt.offsetY);
+        points.push(point);
+
+        cursor = point;
+      }
+    }
+  }
+
+  const onPointerMove = (evt: PointerEvent) => {
+    if (points.length > 0) {
+      cursor = transform.elementToImage(evt.offsetX, evt.offsetY);
+
+      if (points.length >  2) {
+        const d = distance(cursor, points[0]) * viewportScale;
+        isClosable = d < CLOSE_DISTANCE;
+      }
+    }
+  }
+
+  const onPointerUp = (evt: PointerEvent) => {
+    const timeDifference = performance.now() - lastPointerDown;
+
+    if (drawingMode === 'click') {
+      // Not a single click - ignore
+      if (timeDifference > 300)
+        return;
+
+      evt.stopPropagation();
+
+      if (isClosable) {
+        stopDrawing();
+      } else if (points.length === 0) {
+        // Start drawing
+        const point = transform.elementToImage(evt.offsetX, evt.offsetY);
+        points.push(point);
+
+        cursor = point;
+      } else {
+        points.push(cursor);
+      }
+    } else {
+      // Require minimum drag of 4px
+      if (points.length === 1) {
+        const dist = distance(points[0], cursor);
+
+        if (dist <= 4) {
+          // Cancel
+          points = [];
+          cursor = null;
+
+          return;
+        }
+      }
+
+      // Stop click event from propagating if we're drawing
+      evt.stopImmediatePropagation();
+
+      if (isClosable) {
+        stopDrawing();
+      } else {
+        points.push(cursor);
+      }
+    }
+  }
+
+  const onDblClick = () => {
+    console.log('dblclick');
+    
+    const p = [...points, cursor];
+
+    const shape: Polygon = {
+        type: ShapeType.POLYGON, 
+        geometry: {
+          bounds: boundsFromPoints(p),
+          points: p
+        }
+      }
+
+      points = [];
+      cursor = null;
+    
+      dispatch('create', shape);
+  }
+
+  const stopDrawing = () => {
+    const shape: Polygon = {
+      type: ShapeType.POLYGON, 
+      geometry: {
+        bounds: boundsFromPoints(points),
+        points: [...points]
+      }
+    }
+
+    points = [];
+    cursor = null;
+  
+    dispatch('create', shape);
+  }
+
+  onMount(() => {
+    addEventListener('pointerdown', onPointerDown, true);
+    addEventListener('pointermove', onPointerMove);
+    addEventListener('pointerup', onPointerUp, true);
+    addEventListener('dblclick', onDblClick, true);
+  });
+</script>
+
+<g 
+  bind:this={container}
+  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 isClosable}
+      <rect 
+        class="a9s-corner-handle"
+        x={points[0][0] - handleSize / 2} 
+        y={points[0][1] - handleSize / 2} 
+        height={handleSize} 
+        width={handleSize} />
+    {/if}
+  {/if}
+</g>

package/src/annotation/tools/polygon/index.ts

@@ -0,0 +1 @@
+export { default as RubberbandPolygon } from './RubberbandPolygon.svelte';

package/src/annotation/tools/rectangle/RubberbandRectangle.svelte

@@ -0,0 +1,131 @@
+<script type="ts">
+  import { createEventDispatcher, onMount } from 'svelte';
+  import type { DrawingMode } from '../../../AnnotoriousOpts';
+  import { ShapeType, type Rectangle } from '../../../model';
+  import type { Transform } from '../..';
+
+  const dispatch = createEventDispatcher<{ create: Rectangle }>();
+  
+  /** Props **/
+  export let addEventListener: (type: string, fn: EventListener, capture?: boolean) => void;
+  export let drawingMode: DrawingMode;
+  export let transform: Transform;
+  
+  let container: SVGGElement;
+
+  let lastPointerDown: number;
+
+  let origin: [x: number, y: number]; 
+
+  let anchor: [number, number];
+
+  let x: number, y: number, w: number, h: number;
+
+  const onPointerDown = (evt: PointerEvent) => {
+    lastPointerDown = performance.now();
+
+    if (drawingMode === 'drag') {
+      origin = transform.elementToImage(evt.offsetX, evt.offsetY);
+      anchor = origin;
+
+      x = origin[0];
+      y = origin[1];
+      w = 1;
+      h = 1;
+    }
+  }
+
+  const onPointerMove = (evt: PointerEvent) => {
+    if (origin) {
+      anchor = transform.elementToImage(evt.offsetX, evt.offsetY);
+
+      x = Math.min(anchor[0], origin[0]);
+      y = Math.min(anchor[1], origin[1]);
+      w = Math.abs(anchor[0] - origin[0]);
+      h = Math.abs(anchor[1] - origin[1]);
+    }
+  }
+    
+  const onPointerUp = (evt: PointerEvent) => {
+    const timeDifference = performance.now() - lastPointerDown;
+
+    if (drawingMode === 'click') {
+      // Not a single click - ignore
+      if (timeDifference > 300)
+        return;
+
+      evt.stopPropagation();
+
+      if (origin) {
+        stopDrawing();
+      } else {
+        // Start drawing
+        origin = transform.elementToImage(evt.offsetX, evt.offsetY);
+        anchor = origin;
+
+        x = origin[0];
+        y = origin[1];
+        w = 1;
+        h = 1;
+      }
+    } else if (origin) {
+      if (timeDifference > 300 || w * h > 100) {
+        evt.stopPropagation();
+        stopDrawing();
+      } else {
+        origin = null;
+        anchor = null;
+      }
+    }
+  }
+
+  const stopDrawing = () => {
+    // Require 4x4 pixels minimum
+    if (w * h > 15) {
+      const shape: Rectangle = {
+        type: ShapeType.RECTANGLE, 
+        geometry: {
+          bounds: {
+            minX: x, 
+            minY: y,
+            maxX: x + w,
+            maxY: y + h
+          },
+          x, y, w, h
+        }
+      }
+
+      dispatch('create', shape);
+    }
+    
+    origin = null;
+    anchor = null;
+  }
+
+  onMount(() => {
+    addEventListener('pointerdown', onPointerDown);
+    addEventListener('pointermove', onPointerMove);
+    addEventListener('pointerup', onPointerUp, true);
+  });
+</script>
+
+<g 
+  bind:this={container}
+  class="a9s-annotation a9s-rubberband">
+  
+  {#if origin}
+    <rect
+      class="a9s-outer"
+      x={x} 
+      y={y} 
+      width={w} 
+      height={h} />
+
+    <rect
+      class="a9s-inner"
+      x={x} 
+      y={y} 
+      width={w} 
+      height={h} />
+  {/if}
+</g>

package/src/annotation/tools/rectangle/index.ts

@@ -0,0 +1 @@
+export { default as RubberbandRectangle } from './RubberbandRectangle.svelte';

package/src/annotation/utils/index.ts

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

package/src/annotation/utils/math.ts

@@ -0,0 +1,6 @@
+export const distance = (a: [number, number], b: [number, number]): number => {
+  const dx = Math.abs(b[0] - a[0]);
+  const dy = Math.abs(b[1] - a[1]);
+
+  return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+}