@annotorious/annotorious 3.7.21 → 3.8.0

package/dist/model/core/rectangle/Rectangle.d.ts

@@ -7,5 +7,6 @@ export interface RectangleGeometry extends Geometry {
     y: number;
     w: number;
     h: number;
+    rot?: number;
     bounds: Bounds;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.7.21",
+  "version": "3.8.0",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -55,7 +55,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@annotorious/core": "3.7.21",
+    "@annotorious/core": "3.8.0",
     "dequal": "^2.0.3",
     "rbush": "^4.0.1",
     "simplify-js": "^1.2.4",

package/src/Annotorious.css

@@ -93,6 +93,7 @@
   fill: transparent;
   stroke: transparent;
   stroke-width: 6px;
+  vector-effect: non-scaling-stroke;
 }
 
 .a9s-shape-handle {

package/src/annotation/SVGAnnotationLayer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="I extends Annotation, E extends unknown">
-  import { type SvelteComponent, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
-  import type { Annotation, DrawingStyleExpression, StoreChangeEvent, User } from '@annotorious/core';
+  import type { Annotation, DrawingStyleExpression, Selection, StoreChangeEvent, User } from '@annotorious/core';
   import { isImageAnnotation, ShapeType } from '../model';
   import type { ImageAnnotation, Shape} from '../model';
   import { getEditor, EditorMount } from './editors';
@@ -56,7 +56,7 @@
 
   let editableAnnotations: ImageAnnotation[] | undefined;
 
-  $: trackSelection($selection.selected);
+  $: trackSelection(($selection as Selection).selected);
 
   const trackSelection = (selected: { id: string, editable?: boolean }[]) => {
     if (storeObserver)

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

@@ -1,9 +1,17 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import Handle from '../Handle.svelte';
   import { getMaskDimensions } from '../../utils';
-  import type { Rectangle, Shape } from '../../../model';
+  import { boundsFromPoints, type Rectangle, type RectangleGeometry, type Shape } from '../../../model';
   import type { Transform } from '../../Transform';
   import { Editor } from '..';
+  import {
+    getRotatedCorners,
+    getRotationHandlePosition,
+    transformDeltaToLocalCoords,
+    angleFromPoints,
+    snapAngle
+  } from './rotationUtils';
 
   /** Props */
   export let shape: Rectangle;
@@ -12,75 +20,134 @@
   export let viewportScale: number = 1;
   export let svgEl: SVGSVGElement;
 
+  let shiftPressed = false;
+
+  $: ROTATION_HANDLE_OFFSET = 20 / viewportScale;
+
   $: geom = shape.geometry;
+  $: rotatedCorners = getRotatedCorners(geom.x, geom.y, geom.w, geom.h, geom.rot);
+  $: rotationHandlePos = getRotationHandlePosition(geom, ROTATION_HANDLE_OFFSET);
 
   const editor = (rectangle: Shape, handle: string, delta: [number, number]) => {
-    const initialBounds = rectangle.geometry.bounds;
-
-    let [x0, y0] = [initialBounds.minX, initialBounds.minY];
-    let [x1, y1] = [initialBounds.maxX, initialBounds.maxY];
+    let { x, y, w, h, rot = 0 } = (rectangle.geometry as RectangleGeometry);
 
     const [dx, dy] = delta;
 
-    if (handle === 'SHAPE') {
-      x0 += dx;
-      x1 += dx;
-      y0 += dy;
-      y1 += dy;
+    if (handle === 'ROTATION') {
+      const handlePos = getRotationHandlePosition(rectangle.geometry as RectangleGeometry, ROTATION_HANDLE_OFFSET);
+      
+      // Handle position after moving by delta
+      const currentHandleX = handlePos[0] + dx;
+      const currentHandleY = handlePos[1] + dy;
+
+      // Calculate the new rotation angle
+      const center: [number, number] = [x + w / 2, y + h / 2];
+      rot += angleFromPoints([handlePos[0], handlePos[1]], [currentHandleX, currentHandleY], center);
+      
+      // Snap to 10 degrees if SHIFT is held
+      if (shiftPressed)
+        rot = snapAngle(rot);
+    } else if (handle === 'SHAPE') {
+      // Moving the entire shape - translate it without rotation change
+      x += dx;
+      y += dy;
     } else {
+      // Edge or corner handle - resize in local (rotated) coordinate space
+      let localX0 = 0;
+      let localY0 = 0;
+      let localX1 = w;
+      let localY1 = h;
+
+      const [localDx, localDy] = rot !== 0 
+        ? transformDeltaToLocalCoords(dx, dy, rot)
+        : [dx, dy];
+
       switch (handle) {
         case 'TOP':
         case 'TOP_LEFT':
-        case 'TOP_RIGHT': {
-          y0 += dy;
+        case 'TOP_RIGHT':
+          localY0 += localDy;
           break;
-        }
-
         case 'BOTTOM':
         case 'BOTTOM_LEFT':
-        case 'BOTTOM_RIGHT': {
-          y1 += dy;
+        case 'BOTTOM_RIGHT':
+          localY1 += localDy;
           break;
-        }
       }
 
       switch (handle) {
         case 'LEFT':
         case 'TOP_LEFT':
-        case 'BOTTOM_LEFT': {
-          x0 += dx;
+        case 'BOTTOM_LEFT':
+          localX0 += localDx;
           break;
-        }
-
         case 'RIGHT':
         case 'TOP_RIGHT':
-        case 'BOTTOM_RIGHT': {
-          x1 += dx;
+        case 'BOTTOM_RIGHT':
+          localX1 += localDx;
           break;
-        }
       }
+
+      // The center shifts as edges move - calculate new center in local space
+      const newLocalCx = (localX0 + localX1) / 2;
+      const newLocalCy = (localY0 + localY1) / 2;
+
+      w = Math.abs(localX1 - localX0);
+      h = Math.abs(localY1 - localY0);
+
+      // Rotate the local center offset back to world space
+      const oldCenter: [number, number] = [
+        x + (rectangle.geometry as RectangleGeometry).w / 2, 
+        y + (rectangle.geometry as RectangleGeometry).h / 2
+      ];
+
+      const localCenterOffset: [number, number] = [
+        newLocalCx - (rectangle.geometry as RectangleGeometry).w / 2, 
+        newLocalCy - (rectangle.geometry as RectangleGeometry).h / 2
+      ];
+
+      const cos = Math.cos(rot);
+      const sin = Math.sin(rot);
+
+      const worldCx = oldCenter[0] + localCenterOffset[0] * cos - localCenterOffset[1] * sin;
+      const worldCy = oldCenter[1] + localCenterOffset[0] * sin + localCenterOffset[1] * cos;
+
+      x = worldCx - w / 2;
+      y = worldCy - h / 2;
     }
 
-    const x = Math.min(x0, x1);
-    const y = Math.min(y0, y1);
-    const w = Math.abs(x1 - x0);
-    const h = Math.abs(y1 - y0);
+    // Calculate new bounds
+    const bounds = boundsFromPoints(rotatedCorners);
 
     return {
       ...rectangle,
       geometry: {
-        x, y, w, h,
-        bounds: {
-          minX: x,
-          minY: y,
-          maxX: x + w,
-          maxY: y + h
-        }
+        x, y, w, h, rot,
+        bounds
       }
     };
   }
 
-  $: mask = getMaskDimensions(geom.bounds, 2 / viewportScale);
+  onMount(() => {
+    // Track SHIFT key
+    const onKeyDown = (evt: KeyboardEvent) => {
+      if (evt.key === 'Shift') shiftPressed = true;
+    }
+
+    const onKeyUp = (evt: KeyboardEvent) => {
+      if (evt.key === 'Shift') shiftPressed = false;
+    }
+
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+    };
+  });
+
+  $: mask = getMaskDimensions(geom.bounds, 5 / viewportScale);
   
   const maskId = `rect-mask-${Math.random().toString(36).substring(2, 12)}`;
 </script>
@@ -98,73 +165,122 @@
   <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} />
+      <polygon
+        class="rect-mask-fg"
+        points={rotatedCorners.map(c => `${c[0]},${c[1]}`).join(' ')} />
     </mask>
   </defs>
 
-  <rect 
-    class="a9s-outer"
-    mask={`url(#${maskId})`}
-    on:pointerdown={grab('SHAPE')}
-    x={geom.x} y={geom.y} width={geom.w} height={geom.h} />
+  <!-- Rotation handle -->
+  <g>
+    <line
+      class="a9s-rotation-handle-line-bg"
+      x1={rotatedCorners[0][0] + (rotatedCorners[1][0] - rotatedCorners[0][0]) / 2}
+      y1={rotatedCorners[0][1] + (rotatedCorners[1][1] - rotatedCorners[0][1]) / 2}
+      x2={rotationHandlePos[0]}
+      y2={rotationHandlePos[1]}
+      pointer-events="none" />
 
-  <rect 
-    class="a9s-inner a9s-shape-handle"
-    style={computedStyle}
-    on:pointerdown={grab('SHAPE')}
-    x={geom.x} y={geom.y} width={geom.w} height={geom.h} />
+    <line
+      class="a9s-rotation-handle-line-fg"
+      x1={rotatedCorners[0][0] + (rotatedCorners[1][0] - rotatedCorners[0][0]) / 2}
+      y1={rotatedCorners[0][1] + (rotatedCorners[1][1] - rotatedCorners[0][1]) / 2}
+      x2={rotationHandlePos[0]}
+      y2={rotationHandlePos[1]}
+      pointer-events="none" />
 
-  <rect 
-    class="a9s-edge-handle a9s-edge-handle-top" 
-    on:pointerdown={grab('TOP')}
-    x={geom.x} y={geom.y} height={1} width={geom.w} />
+    <Handle
+      class="a9s-rotation-handle"
+      on:pointerdown={grab('ROTATION')}
+      x={rotationHandlePos[0]} y={rotationHandlePos[1]}
+      scale={viewportScale} />
+  </g>
 
-  <rect 
+  <!-- Rectangle shape -->
+  <g>
+    <polygon
+      class="a9s-outer"
+      mask={`url(#${maskId})`}
+      on:pointerdown={grab('SHAPE')}
+      points={rotatedCorners.map(c => `${c[0]},${c[1]}`).join(' ')} />
+
+    <polygon
+      class="a9s-inner a9s-shape-handle"
+      style={computedStyle}
+      on:pointerdown={grab('SHAPE')}
+      points={rotatedCorners.map(c => `${c[0]},${c[1]}`).join(' ')} />
+  </g>
+
+  <!-- Edge handles -->
+  <line
+    class="a9s-edge-handle a9s-edge-handle-top"
+    x1={rotatedCorners[0][0]} y1={rotatedCorners[0][1]}
+    x2={rotatedCorners[1][0]} y2={rotatedCorners[1][1]}
+    on:pointerdown={grab('TOP')} />
+
+  <line
     class="a9s-edge-handle a9s-edge-handle-right"
-    on:pointerdown={grab('RIGHT')}
-    x={geom.x + geom.w} y={geom.y} height={geom.h} width={1}/>
+    x1={rotatedCorners[1][0]} y1={rotatedCorners[1][1]}
+    x2={rotatedCorners[2][0]} y2={rotatedCorners[2][1]}
+    on:pointerdown={grab('RIGHT')} />
 
-  <rect 
-    class="a9s-edge-handle a9s-edge-handle-bottom" 
-    on:pointerdown={grab('BOTTOM')}
-    x={geom.x} y={geom.y + geom.h} height={1} width={geom.w} />
+  <line
+    class="a9s-edge-handle a9s-edge-handle-bottom"
+    x1={rotatedCorners[2][0]} y1={rotatedCorners[2][1]}
+    x2={rotatedCorners[3][0]} y2={rotatedCorners[3][1]}
+    on:pointerdown={grab('BOTTOM')} />
 
-  <rect 
-    class="a9s-edge-handle a9s-edge-handle-left" 
-    on:pointerdown={grab('LEFT')}
-    x={geom.x} y={geom.y} height={geom.h} width={1} />
+  <line
+    class="a9s-edge-handle a9s-edge-handle-left"
+    x1={rotatedCorners[3][0]} y1={rotatedCorners[3][1]}
+    x2={rotatedCorners[0][0]} y2={rotatedCorners[0][1]}
+    on:pointerdown={grab('LEFT')} />
 
+  <!-- Corner handles -->
   <Handle
     class="a9s-corner-handle-topleft"
     on:pointerdown={grab('TOP_LEFT')}
-    x={geom.x} y={geom.y}
+    x={rotatedCorners[0][0]} y={rotatedCorners[0][1]}
     scale={viewportScale} /> 
 
   <Handle
     class="a9s-corner-handle-topright"
     on:pointerdown={grab('TOP_RIGHT')}
-    x={geom.x + geom.w} y={geom.y} 
+    x={rotatedCorners[1][0]} y={rotatedCorners[1][1]} 
     scale={viewportScale} />
   
   <Handle 
     class="a9s-corner-handle-bottomright"
     on:pointerdown={grab('BOTTOM_RIGHT')}
-    x={geom.x + geom.w} y={geom.y + geom.h} 
+    x={rotatedCorners[2][0]} y={rotatedCorners[2][1]} 
     scale={viewportScale} />
     
   <Handle 
     class="a9s-corner-handle-bottomleft"
     on:pointerdown={grab('BOTTOM_LEFT')}
-    x={geom.x} y={geom.y + geom.h} 
+    x={rotatedCorners[3][0]} y={rotatedCorners[3][1]} 
     scale={viewportScale} />
 </Editor>
 
 <style>
-  mask.a9s-rectangle-editor-mask > rect.rect-mask-bg {
+  mask.a9s-rectangle-editor-mask rect.rect-mask-bg {
     fill: #fff;
   }
 
-  mask.a9s-rectangle-editor-mask > rect.rect-mask-fg {
+  mask.a9s-rectangle-editor-mask polygon.rect-mask-fg {
     fill: #000;
   }
+
+  :global(.a9s-rotation-handle-line-bg) {
+    stroke: rgba(0, 0, 0, 0.5);
+    stroke-width: 1.5px;
+    vector-effect: non-scaling-stroke;
+  }
+
+  :global(.a9s-rotation-handle-line-fg) {
+    stroke: #fff;
+    stroke-width: 1px;
+    stroke-dasharray: 3 1;
+    vector-effect: non-scaling-stroke;
+  }
 </style>

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

@@ -0,0 +1,104 @@
+import type { Bounds, RectangleGeometry } from '../../../model';
+
+/**
+ * Rotates a point around a center by the given angle (in rad).
+ */
+export const rotatePoint = (
+  point: [number, number],
+  center: [number, number],
+  angle: number
+): [number, number] => {
+  const [px, py] = point;
+  const [cx, cy] = center;
+  
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+
+  const dx = px - cx;
+  const dy = py - cy;
+
+  return [
+    cx + dx * cos - dy * sin,
+    cy + dx * sin + dy * cos
+  ];
+}
+
+/**
+ * Gets the four corner points of a rotated rectangle in world space.
+ */
+export const getRotatedCorners = (
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  rot: number = 0
+): [[number, number], [number, number], [number, number], [number, number]] => {
+  const corners: [number, number][] = [
+    [x, y],
+    [x + w, y],
+    [x + w, y + h],
+    [x, y + h]
+  ];
+
+  const center: [number, number] = [x + w / 2, y + h / 2];
+
+  return corners.map(corner => 
+    rotatePoint(corner, center, rot)) as [[number, number], [number, number], [number, number], [number, number]];
+}
+
+/** 
+ * Calculates the position of the rotation handle.
+ */
+export const getRotationHandlePosition = (
+  geom: RectangleGeometry, offset: number
+): [number, number] => {
+  const { x , y, w, h, rot = 0 } = geom;
+  const center: [number, number] = [x + w / 2, y + h / 2];
+  let topCenter: [number, number] = [x + w / 2, y - offset];
+  return rotatePoint(topCenter, center, rot);
+}
+
+/**
+ * Transforms a movement delta from world coords to the rectangle's 
+ * local (non-rotated) coordinate system.
+ */
+export const transformDeltaToLocalCoords = (
+  deltaX: number,
+  deltaY: number,
+  rot: number
+): [number, number] => {
+  const cos = Math.cos(rot);
+  const sin = Math.sin(rot);
+
+  return [
+    deltaX * cos + deltaY * sin,
+    -deltaX * sin + deltaY * cos
+  ];
+}
+
+/**
+ * Calculates the rotation angle between a point and the origin, relative to a center.
+ */
+export const angleFromPoints = (
+  point1: [number, number],
+  point2: [number, number],
+  center: [number, number]
+): number => {
+  const dx1 = point1[0] - center[0];
+  const dy1 = point1[1] - center[1];
+  const angle1 = Math.atan2(dy1, dx1);
+
+  const dx2 = point2[0] - center[0];
+  const dy2 = point2[1] - center[1];
+  const angle2 = Math.atan2(dy2, dx2);
+
+  return angle2 - angle1;
+}
+
+/**
+ * Snaps an angle to the nearest 45-degree increment
+ */
+export const snapAngle = (angle: number, inc = 10): number => {
+  const step = (inc * Math.PI) / 180;
+  return Math.round(angle / step) * step;
+}

package/src/annotation/shapes/Rectangle.svelte

@@ -10,23 +10,30 @@
 
   $: computedStyle = computeStyle(annotation, style);
 
-  $: ({ x, y, w, h } = geom as RectangleGeometry);
+  $: ({ x, y, w, h, rot } = geom as RectangleGeometry);
+
+  // Calculate transform for rotation
+  $: rectTransform = (rot ?? 0) !== 0 ? 
+    `translate(${x + w / 2}, ${y + h / 2}) rotate(${((rot ?? 0) * 180) / Math.PI}) translate(${-(x + w / 2)}, ${-(y + h / 2)})` :
+    undefined;
 </script>
 
 <g class="a9s-annotation" data-id={annotation.id}>
-  <rect
-    class="a9s-outer"
-    style={computedStyle ? 'display:none;' : undefined}
-    x={x} 
-    y={y} 
-    width={w} 
-    height={h} />
+  <g transform={rectTransform}>
+    <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} />
+    <rect
+      class="a9s-inner"
+      style={computedStyle}
+      x={x} 
+      y={y} 
+      width={w} 
+      height={h} />
+  </g>
 </g>

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

@@ -106,6 +106,7 @@
             maxX: x + w,
             maxY: y + h
           },
+          rot: 0,
           x, y, w, h
         }
       }

package/src/model/core/rectangle/Rectangle.ts

@@ -16,6 +16,8 @@ export interface RectangleGeometry extends Geometry {
 
   h: number;
 
+  rot?: number;
+
   bounds: Bounds;
 
 }

package/src/model/core/rectangle/rectangleUtils.ts

@@ -6,11 +6,37 @@ export const RectangleUtil: ShapeUtil<Rectangle> = {
 
   area: (rect: Rectangle): number => rect.geometry.w * rect.geometry.h,
 
-  intersects: (rect: Rectangle, x: number, y: number): boolean =>
-    x >= rect.geometry.x &&
-    x <= rect.geometry.x + rect.geometry.w &&
-    y >= rect.geometry.y &&
-    y <= rect.geometry.y + rect.geometry.h
+  intersects: (rect: Rectangle, x: number, y: number): boolean => {
+    const geom = rect.geometry;
+    
+    if (!geom.rot) {
+      return x >= geom.x &&
+        x <= geom.x + geom.w &&
+        y >= geom.y &&
+        y <= geom.y + geom.h;
+    } else {
+      // For rotated rectangles, transform the test point to local coordinates
+      const centerX = geom.x + geom.w / 2;
+      const centerY = geom.y + geom.h / 2;
+
+      // Translate point relative to center
+      const dx = x - centerX;
+      const dy = y - centerY;
+
+      // Rotate backwards to get to local (non-rotated) coordinates
+      const cos = Math.cos(geom.rot);
+      const sin = Math.sin(geom.rot);
+
+      const localX = dx * cos + dy * sin;
+      const localY = -dx * sin + dy * cos;
+
+      // Check if point is within rectangle bounds in local space
+      return localX >= -geom.w / 2 &&
+        localX <= geom.w / 2 &&
+        localY >= -geom.h / 2 &&
+        localY <= geom.h / 2;
+    } 
+  }
     
 };
 

package/src/model/w3c/W3CImageFormatAdapter.ts

@@ -103,14 +103,16 @@ export const serializeW3CImageAnnotation = (
   let w3cSelector: FragmentSelector | SVGSelector | unknown;
 
   try {
-    w3cSelector = selector.type == ShapeType.RECTANGLE ?
-      serializeFragmentSelector(selector.geometry as RectangleGeometry) :
-      serializeSVGSelector(selector);
+    if (selector.type === ShapeType.RECTANGLE && !(selector.geometry as RectangleGeometry).rot) {
+      w3cSelector = serializeFragmentSelector(selector.geometry as RectangleGeometry);
+    } else {
+      w3cSelector = serializeSVGSelector(selector);
+    }
   } catch (error) {
     if (opts.strict)
       throw error;
     else 
-     w3cSelector = selector;
+      w3cSelector = selector;
   }
 
   const serialized = {

package/src/model/w3c/fragment/FragmentSelector.ts

@@ -21,7 +21,7 @@ export const isFragmentSelector = (
     const hashIndex = selector.indexOf('#');
     if (hashIndex < 0) return false;
 
-    const xywh = /#xywh(?:=(?:pixel:|percent:)?)\s*\d+(\.\d*)?,\s*\d+(\.\d*)?,\s*\d+(\.\d*)?,\s*\d+(\.\d*)?$/i;
+    const xywh = /#xywh(?:=(?:pixel:|percent:)?)(.+?),(.+?),(.+?),(.+)$/i;
     return xywh.test(selector);
   }
 
@@ -55,6 +55,7 @@ export const parseFragmentSelector = (
       y,
       w,
       h,
+      rot: 0,
       bounds: {
         minX: x,
         minY: invertY ? y - h : y,