@annotorious/annotorious 3.0.0-rc.3 → 3.0.0-rc.31

package/src/state/ImageAnnotatorState.ts

@@ -37,18 +37,18 @@ export const createImageAnnotatorState = <E extends unknown>(
 
   const tree = createSpatialTree();
 
-  const selection = createSelectionState(store, opts.pointerSelectAction);
+  const selection = createSelectionState(store, opts.userSelectAction);
 
   const hover = createHoverState(store);
 
   const viewport = createViewportState();
 
   store.observe(({ changes }) => {
-    tree.set(changes.created.map(a => a.target as ImageAnnotationTarget), false);
+    tree.set((changes.created || []).map(a => a.target as ImageAnnotationTarget), false);
     
-    changes.deleted.forEach(a => tree.remove(a.target as ImageAnnotationTarget));
+    (changes.deleted || []).forEach(a => tree.remove(a.target as ImageAnnotationTarget));
     
-    changes.updated.forEach(({ oldValue, newValue }) =>
+    (changes.updated || []).forEach(({ oldValue, newValue }) =>
       tree.update(oldValue.target, newValue.target));
   });
 
@@ -85,4 +85,3 @@ export const createSvelteImageAnnotatorState = <E extends unknown>(
   }
 
 }
-  

package/src/state/spatialTree.ts

@@ -40,7 +40,8 @@ export const createSpatialTree = () => {
 
   const remove = (target: ImageAnnotationTarget) => {
     const item = index.get(target.annotation);
-    tree.remove(item);
+    if (item)
+      tree.remove(item);
     index.delete(target.annotation);
   };
 
@@ -53,16 +54,22 @@ export const createSpatialTree = () => {
     if (replace) 
       clear();
 
-    const indexedTargets = targets.map(target => {
-      const { minX, minY, maxX, maxY } = target.selector.geometry.bounds;
-      return { minX, minY, maxX, maxY, target };
-    });
+    const indexedTargets = targets.reduce<IndexedTarget[]>((all, target) => {
+      if (target.selector?.geometry?.bounds) {
+        // In case the host app injects any custom annotations, the 
+        // spatial index should simply ignore them. 
+        const { minX, minY, maxX, maxY } = target.selector.geometry.bounds;
+        return [...all, { minX, minY, maxX, maxY, target }];
+      } else {
+        return all;
+      }
+    }, []);
 
     indexedTargets.forEach(t => index.set(t.target.annotation, t));
     tree.load(indexedTargets);
   };
 
-  const getAt = (x: number, y: number): ImageAnnotationTarget | null => {
+  const getAt = (x: number, y: number): ImageAnnotationTarget | undefined => {
     const idxHits = tree.search({
       minX: x,
       minY: y,

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/src/themes/smart/setTheme.ts

@@ -1,3 +1,5 @@
+import type { Theme } from '../../AnnotoriousOpts';
+
 export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
 
   let canvas: HTMLCanvasElement;
@@ -6,7 +8,7 @@ export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
 
   if (imageOrCanvas.nodeName === 'CANVAS') {
     canvas = imageOrCanvas as HTMLCanvasElement;
-    context = canvas.getContext('2d', { willReadFrequently: true });
+    context = canvas.getContext('2d', { willReadFrequently: true })!;
   } else {
     const img = imageOrCanvas as HTMLImageElement;
     // Copy image to in-memory canvas for processing
@@ -14,7 +16,7 @@ export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
     canvas.width = img.width;
     canvas.height = img.height;
 
-    context = canvas.getContext('2d', { willReadFrequently: true });
+    context = canvas.getContext('2d', { willReadFrequently: true })!;
     context.drawImage(img, 0, 0, img.width, img.height);
   }
 
@@ -35,12 +37,14 @@ export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
   return totalBrightness / 81;
 }
 
-export const setTheme = (imageOrCanvas: HTMLElement, container: HTMLElement) => {
+export const detectTheme = (imageOrCanvas: 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);
-}
+  return theme;
+}
+
+export const setTheme = (imageOrCanvas: HTMLElement, container: HTMLElement, theme: Theme) =>
+  container.setAttribute('data-theme', theme === 'auto' ? detectTheme(imageOrCanvas) : theme);

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';