@annotorious/annotorious 3.0.0-rc.1

package/src/state/ImageAnnotationStore.ts

@@ -0,0 +1,18 @@
+import type { Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
+import type { ImageAnnotation } from '../model';
+
+export type ImageAnnotationStore = Store<ImageAnnotation> & {
+
+  getAt(x: number, y: number): ImageAnnotation | undefined;
+
+  getIntersecting(x: number, y: number, width: number, height: number): ImageAnnotation[];
+
+}
+
+export type SvelteImageAnnotationStore = SvelteStore<ImageAnnotation> & ImageAnnotationStore;
+
+export type SvelteImageAnnotatorState = SvelteAnnotatorState<ImageAnnotation> & {
+
+  store: SvelteImageAnnotationStore;
+
+}

package/src/state/ImageAnnotatorState.ts

@@ -0,0 +1,88 @@
+import type { ImageAnnotation, ImageAnnotationTarget } from '../model';
+import type { AnnotoriousOpts } from '../AnnotoriousOpts';
+import { createSpatialTree } from './spatialTree';
+import { 
+  createViewportState,
+  toSvelteStore,
+  type AnnotatorState, 
+  type HoverState,
+  type SelectionState
+} from '@annotorious/core';
+import { 
+  createHoverState, 
+  createSelectionState, 
+  createStore
+} from '@annotorious/core';
+import type { 
+  ImageAnnotationStore,
+  SvelteImageAnnotationStore, 
+  SvelteImageAnnotatorState
+} from './ImageAnnotationStore';
+
+export type ImageAnnotatorState<T extends ImageAnnotationStore = ImageAnnotationStore> = AnnotatorState<ImageAnnotation> & {
+
+  store: T;
+
+  selection: SelectionState<ImageAnnotation>;
+
+  hover: HoverState<ImageAnnotation>;
+
+}
+
+export const createImageAnnotatorState = <E extends unknown>(
+  opts: AnnotoriousOpts<ImageAnnotation, E>
+): ImageAnnotatorState<ImageAnnotationStore> => {
+
+  const store = createStore<ImageAnnotation>();
+
+  const tree = createSpatialTree();
+
+  const selection = createSelectionState(store, opts.pointerSelectAction);
+
+  const hover = createHoverState(store);
+
+  const viewport = createViewportState();
+
+  store.observe(({ changes }) => {
+    tree.set(changes.created.map(a => a.target as ImageAnnotationTarget), false);
+    
+    changes.deleted.forEach(a => tree.remove(a.target as ImageAnnotationTarget));
+    
+    changes.updated.forEach(({ oldValue, newValue }) =>
+      tree.update(oldValue.target, newValue.target));
+  });
+
+  const getAt = (x: number, y: number): ImageAnnotation | undefined => {
+    const target = tree.getAt(x, y);
+    return target ? store.getAnnotation(target.annotation) : undefined; 
+  }
+
+  const getIntersecting = (x: number, y: number, width: number, height: number) =>
+    tree.getIntersecting(x, y, width, height).map(target => store.getAnnotation(target.annotation));
+
+  return {
+    store: {
+      ...store,
+      getAt,
+      getIntersecting
+    } as ImageAnnotationStore,
+    selection,
+    hover,
+    viewport
+  }
+
+}
+
+export const createSvelteImageAnnotatorState = <E extends unknown>(  
+  opts: AnnotoriousOpts<ImageAnnotation, E>
+): SvelteImageAnnotatorState => {
+
+  const state = createImageAnnotatorState(opts);
+  
+  return {
+    ...state,
+    store: toSvelteStore(state.store) as SvelteImageAnnotationStore
+  }
+
+}
+  

package/src/state/index.ts

@@ -0,0 +1,2 @@
+export * from './ImageAnnotationStore';
+export * from './ImageAnnotatorState';

package/src/state/spatialTree.ts

@@ -0,0 +1,108 @@
+import RBush from 'rbush';
+import { ShapeType,computeArea, intersects } from '../model';
+import type { ImageAnnotationTarget } from '../model';
+
+interface IndexedTarget {
+
+  minX: number;
+
+  minY: number;
+
+  maxX: number;
+
+  maxY: number;
+
+  target: ImageAnnotationTarget;
+
+}
+
+export const createSpatialTree = () => {
+
+  const tree = new RBush<IndexedTarget>();
+
+  const index = new Map<string, IndexedTarget>();
+
+  const all = () => [...index.values()];
+
+  const clear = () => {
+    tree.clear();
+    index.clear();
+  }
+
+  const insert = (target: ImageAnnotationTarget) => {
+    const { minX, minY, maxX, maxY } = target.selector.geometry.bounds;
+
+    const t = { minX, minY, maxX, maxY, target };
+
+    tree.insert(t);
+    index.set(target.annotation, t);
+  };
+
+  const remove = (target: ImageAnnotationTarget) => {
+    const item = index.get(target.annotation);
+    tree.remove(item);
+    index.delete(target.annotation);
+  };
+
+  const update = (previous: ImageAnnotationTarget, updated: ImageAnnotationTarget) => {
+    remove(previous);
+    insert(updated);
+  };
+
+  const set = (targets: ImageAnnotationTarget[], replace: boolean = true) => {
+    if (replace) 
+      clear();
+
+    const indexedTargets = targets.map(target => {
+      const { minX, minY, maxX, maxY } = target.selector.geometry.bounds;
+      return { minX, minY, maxX, maxY, target };
+    });
+
+    indexedTargets.forEach(t => index.set(t.target.annotation, t));
+    tree.load(indexedTargets);
+  };
+
+  const getAt = (x: number, y: number): ImageAnnotationTarget | null => {
+    const idxHits = tree.search({
+      minX: x,
+      minY: y,
+      maxX: x,
+      maxY: y
+    }).map(item => item.target);
+
+    // Exact hit test on shape (not needed for rectangles!)
+    const exactHits = idxHits.filter(target => {
+      return (target.selector.type === ShapeType.RECTANGLE) ||
+        intersects(target.selector, x, y);
+    });
+
+    // Get smallest shape
+    if (exactHits.length > 0) {
+      exactHits.sort((a, b) => computeArea(a.selector) - computeArea(b.selector));
+      return exactHits[0];
+    }
+  };
+
+  const getIntersecting = (x: number, y: number, width: number, height: number) =>
+    tree.search({
+      minX: x,
+      minY: y,
+      maxX: x + width,
+      maxY: y + height
+    }).map(item => item.target);
+  
+  const size = () => tree.all().length;
+
+  return {
+    all,
+    clear,
+    getAt,
+    getIntersecting,
+    insert,
+    remove,
+    set,
+    size,
+    update
+  }
+
+}

package/src/themes/dark/index.css

@@ -0,0 +1,24 @@
+/** A simple black theme that works best on ligh backgrounds **/
+.a9s-annotationlayer .a9s-outer,
+div[data-theme="dark"] .a9s-annotationlayer .a9s-outer {
+  display: none;
+}
+
+.a9s-annotationlayer .a9s-inner,
+div[data-theme="dark"] .a9s-annotationlayer .a9s-inner {
+  fill: rgba(0, 0, 0, 0.12);
+  stroke: #000;
+  stroke-width: 1px;
+}
+
+rect.a9s-corner-handle,
+div[data-theme="dark"] rect.a9s-corner-handle {
+  fill: #000;
+  rx: 2px;
+}
+
+rect.a9s-close-polygon-handle,
+div[data-theme="dark"] rect.a9s-close-polygon-handle {
+  fill: #000;
+  rx: 1px;
+}

package/src/themes/index.ts

@@ -0,0 +1 @@
+export * from './smart';

package/src/themes/light/index.css

@@ -0,0 +1,30 @@
+/** A simple white theme that works best on dark backgrounds **/
+.a9s-annotationlayer .a9s-outer,
+div[data-theme="light"] .a9s-annotationlayer .a9s-outer {
+  display: block;
+  stroke: rgba(0, 0, 0, 0.25);
+  stroke-width: 3.5px;
+}
+
+.a9s-annotationlayer .a9s-inner,
+div[data-theme="light"] .a9s-annotationlayer .a9s-inner {
+  fill: rgba(255, 255, 255, 0.15);
+  stroke: #fff;
+  stroke-width: 1.5px;
+}
+
+rect.a9s-corner-handle,
+div[data-theme="light"] rect.a9s-corner-handle {
+  fill: #fff;
+  rx: 1px;
+  stroke: rgba(0, 0, 0, 0.45);
+  stroke-width: 1px;  
+}
+
+rect.a9s-close-polygon-handle,
+div[data-theme="light"] rect.a9s-close-polygon-handle {
+  fill: #fff;
+  rx: 1px;
+  stroke: rgba(0, 0, 0, 0.45);
+  stroke-width: 1px;  
+}

package/src/themes/smart/index.ts

@@ -0,0 +1 @@
+export * from './setTheme';

package/src/themes/smart/setTheme.ts

@@ -0,0 +1,46 @@
+export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
+
+  let canvas: HTMLCanvasElement;
+
+  let context: CanvasRenderingContext2D;
+
+  if (imageOrCanvas.nodeName === 'CANVAS') {
+    canvas = imageOrCanvas as HTMLCanvasElement;
+    context = canvas.getContext('2d', { willReadFrequently: true });
+  } else {
+    const img = imageOrCanvas as HTMLImageElement;
+    // Copy image to in-memory canvas for processing
+    canvas = document.createElement('canvas');
+    canvas.width = img.width;
+    canvas.height = img.height;
+
+    context = canvas.getContext('2d', { willReadFrequently: true });
+    context.drawImage(img, 0, 0, img.width, img.height);
+  }
+
+  let totalBrightness = 0;
+
+  // Sample a grid of points spaced 10% width/height apart (= 9 x 9 samples)
+  for (let i = 1; i < 10; i++) {
+    for (let j = 1; j < 10; j++) {
+      const x = Math.round(j * canvas.width / 10);
+      const y = Math.round(i * canvas.height / 10);
+
+      const pixelData = context.getImageData(x, y, 1, 1).data;
+      const brightness = (0.299 * pixelData[0] + 0.587 * pixelData[1] + 0.114 * pixelData[2]) / 255;
+      totalBrightness += brightness;
+    }
+  }
+
+  return totalBrightness / 81;
+}
+
+export const setTheme = (imageOrCanvas: HTMLElement, container: HTMLElement) => {
+  const brightness = sampleBrightness(imageOrCanvas);
+
+  const theme = brightness > 0.6 ? 'dark' : 'light'
+
+  console.log(`[Annotorious] Image brightness: ${brightness.toFixed(1)}. Setting ${theme} theme.`);
+
+  container.setAttribute('data-theme', theme);
+}

package/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />