@annotorious/annotorious 3.7.12 → 3.7.13

package/dist/state/ImageAnnotationStore.d.ts

@@ -1,4 +1,5 @@
-import { Annotation, Filter, Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
+import { Annotation, Filter, Store } from '@annotorious/core';
+import { SvelteAnnotatorState, SvelteStore } from './SvelteStore';
 export type ImageAnnotationStore<I extends Annotation> = Store<I> & {
     getAt(x: number, y: number, filter?: Filter<I>, buffer?: number): I | undefined;
     getIntersecting(x: number, y: number, width: number, height: number): I[];

package/dist/state/SvelteStore.d.ts

@@ -0,0 +1,20 @@
+import { Annotation, Annotator, AnnotatorState, Store } from '@annotorious/core';
+type Subscriber<T extends Annotation> = (annotation: T[]) => void;
+export interface SvelteStore<T extends Annotation> extends Store<T> {
+    subscribe(onChange: Subscriber<T>): void;
+}
+export interface SvelteAnnotatorState<I extends Annotation, E extends unknown> extends AnnotatorState<I, E> {
+    store: SvelteStore<I>;
+}
+export interface SvelteAnnotator<I extends Annotation, E extends unknown> extends Annotator<I, E> {
+    state: SvelteAnnotatorState<I, E>;
+}
+/**
+ * A simple wrapper around the event-based store implementation
+ * that adds a Svelte shim, for use with the reactive '$' notation.
+ * Other frameworks might not actually need this. But it's pretty
+ * convenient for everyone using Svelte, as well as for the
+ * basic (Svelte-based) Annotorious standard implementation.
+ */
+export declare const toSvelteStore: <T extends Annotation = Annotation>(store: Store<T>) => SvelteStore<T>;
+export {};

package/dist/state/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.7.12",
+  "version": "3.7.13",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -40,16 +40,16 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tsconfig/svelte": "^5.0.5",
     "@types/rbush": "^4.0.0",
-    "jsdom": "^27.0.0",
+    "jsdom": "^27.1.0",
     "svelte": "^4.2.20",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.9.3",
-    "vite": "^5.4.20",
+    "vite": "^5.4.21",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@annotorious/core": "3.7.12",
+    "@annotorious/core": "3.7.13",
     "dequal": "^2.0.3",
     "rbush": "^4.0.1",
     "simplify-js": "^1.2.4",

package/src/state/ImageAnnotationStore.ts

@@ -1,4 +1,5 @@
-import type { Annotation, Filter, Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
+import type { Annotation, Filter, Store } from '@annotorious/core';
+import type { SvelteAnnotatorState, SvelteStore } from './SvelteStore';
 
 export type ImageAnnotationStore<I extends Annotation> = Store<I> & {
 

package/src/state/ImageAnnotatorState.ts

@@ -1,9 +1,9 @@
 import type { ImageAnnotation, ImageAnnotationTarget } from '../model';
 import type { AnnotoriousOpts } from '../AnnotoriousOpts';
 import { createSpatialTree } from './spatialTree';
+import { toSvelteStore } from './SvelteStore';
 import { 
   createViewportState,
-  toSvelteStore,
   type Annotation,
   type AnnotatorState, 
   type Filter, 

package/src/state/SvelteStore.ts

@@ -0,0 +1,52 @@
+import type { Annotation, Annotator, AnnotatorState, Store, StoreChangeEvent } from '@annotorious/core';
+
+type Subscriber<T extends Annotation> = (annotation: T[]) => void; 
+
+export interface SvelteStore<T extends Annotation> extends Store<T> {
+
+  subscribe(onChange: Subscriber<T>): void;
+
+}
+
+export interface SvelteAnnotatorState<I extends Annotation, E extends unknown> extends AnnotatorState<I, E> {
+
+  store: SvelteStore<I>
+
+}
+
+export interface SvelteAnnotator<I extends Annotation, E extends unknown> extends Annotator<I, E> {
+
+  state: SvelteAnnotatorState<I, E>
+
+}
+
+/** 
+ * A simple wrapper around the event-based store implementation
+ * that adds a Svelte shim, for use with the reactive '$' notation.
+ * Other frameworks might not actually need this. But it's pretty
+ * convenient for everyone using Svelte, as well as for the
+ * basic (Svelte-based) Annotorious standard implementation.
+ */
+export const toSvelteStore = <T extends Annotation = Annotation>(store: Store<T>): SvelteStore<T> => {
+
+  const subscribe = (onChange: Subscriber<T>) => {
+
+    // Register a store observer on behalf of the subscriber
+    const shim = (event: StoreChangeEvent<T>) => onChange(event.state);
+    store.observe(shim);
+
+    // Immediately call the subscriber function with the
+    // current store value, according to the Svelte contract.
+    // https://stackoverflow.com/questions/68220955/how-does-svelte-unsubscribe-actually-work
+    onChange(store.all());
+
+    // Return the unsubscribe function
+    return () => store.unobserve(shim);
+  }
+
+  return {
+    ...store,
+    subscribe
+  }
+
+}

package/src/state/index.ts

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