@annotorious/core 3.0.0-rc.3 → 3.0.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/core",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-rc.4",
   "description": "Annotorious core types and functions",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",

package/src/lifecycle/Lifecycle.ts

@@ -1,20 +1,20 @@
 import { dequal } from 'dequal/lite';
-import type { Annotation, FormatAdapter } from '../model';
-import { Origin } from '../state';
-import type { HoverState, SelectionState, Store, ViewportState } from '../state';
+import type { Annotation, AnnotatorState, FormatAdapter } from '../model';
+import { Origin, type ChangeSet, type UndoStack } from '../state';
+import type { ViewportState } from '../state';
 import type { LifecycleEvents } from './LifecycleEvents';
 
 export type Lifecycle<I extends Annotation, E extends unknown> = 
   ReturnType<typeof createLifecyleObserver<I, E>>;
 
 export const createLifecyleObserver = <I extends Annotation, E extends unknown>(
-  store: Store<I>,
-  selectionState: SelectionState<I>, 
-  hoverState: HoverState<I>,
-  viewportState?: ViewportState,
+  state: AnnotatorState<I>,
+  undoStack: UndoStack<I>,
   adapter?: FormatAdapter<I, E>,
   autoSave?: boolean
 ) => {
+  const { store, selection, hover, viewport } = state;
+
   const observers: Map<keyof LifecycleEvents, Function[]> = new Map();
 
   // The currently selected annotations, in the state when they were selected 
@@ -62,7 +62,7 @@ export const createLifecyleObserver = <I extends Annotation, E extends unknown>(
   }
 
   const onIdleUpdate = () => {
-    const { selected } = selectionState;
+    const { selected } = selection;
 
     // User idle after activity - fire update events for selected
     // annotations that changed
@@ -81,7 +81,7 @@ export const createLifecyleObserver = <I extends Annotation, E extends unknown>(
     });
   }
 
-  selectionState.subscribe(({ selected })=> {
+  selection.subscribe(({ selected })=> {
     if (initialSelection.length === 0 && selected.length === 0)
       return;
 
@@ -125,7 +125,7 @@ export const createLifecyleObserver = <I extends Annotation, E extends unknown>(
     emit('selectionChanged', initialSelection);
   });
 
-  hoverState.subscribe(id => {
+  hover.subscribe(id => {
     if (!currentHover && id) {
       emit('mouseEnterAnnotation', store.getAnnotation(id));
     } else if (currentHover && !id) {
@@ -138,7 +138,7 @@ export const createLifecyleObserver = <I extends Annotation, E extends unknown>(
     currentHover = id;
   });
 
-  viewportState?.subscribe(ids => 
+  viewport?.subscribe(ids => 
     emit('viewportIntersect', ids.map(store.getAnnotation)));
 
   store.observe(event => {
@@ -192,6 +192,20 @@ export const createLifecyleObserver = <I extends Annotation, E extends unknown>(
     }
   }, { origin: Origin.REMOTE });
 
+  const onUndoOrRedo = (undo: boolean) => (changes: ChangeSet<I>) => {
+    const { created, deleted, updated } = changes;
+    created.forEach(a => emit('createAnnotation', a));
+    deleted.forEach(a => emit('deleteAnnotation', a));
+
+    if (undo)
+      updated.forEach(t => emit('updateAnnotation', t.oldValue, t.newValue));
+    else
+      updated.forEach(t => emit('updateAnnotation', t.newValue, t.oldValue));
+  }
+
+  undoStack.on('undo', onUndoOrRedo(true));
+  undoStack.on('redo', onUndoOrRedo(false));
+
   return { on, off, emit }
 
 }

package/src/model/Annotator.ts

@@ -16,6 +16,12 @@ export interface Annotator<I extends Annotation = Annotation, E extends unknown
 
   addAnnotation(annotation: E): void;
 
+  cancelSelected(): void;
+
+  canRedo(): boolean;
+
+  canUndo(): boolean;
+
   clearAnnotations(): void;
 
   destroy(): void;
@@ -24,6 +30,8 @@ export interface Annotator<I extends Annotation = Annotation, E extends unknown
 
   getAnnotations(): E[];
 
+  getSelected(): E[];
+
   getUser(): User;
 
   loadAnnotations(url: string): Promise<E[]>;
@@ -69,11 +77,13 @@ export interface AnnotatorState<A extends Annotation> {
 }
 
 export const createBaseAnnotator = <I extends Annotation, E extends unknown>(
-  store: Store<I>, 
-  undoStack: UndoStack,
+  state: AnnotatorState<I>, 
+  undoStack: UndoStack<I>,
   adapter?: FormatAdapter<I, E>
 ) => {
 
+  const { store, selection } = state;
+
   const addAnnotation = (annotation: E) => {
     if (adapter) {
       const { parsed, error } = adapter.parse(annotation);
@@ -87,6 +97,8 @@ export const createBaseAnnotator = <I extends Annotation, E extends unknown>(
     }
   }
 
+  const cancelSelected = () => selection.clear();
+
   const clearAnnotations = () => store.clear();
 
   const getAnnotationById = (id: string): E | undefined => {
@@ -98,6 +110,16 @@ export const createBaseAnnotator = <I extends Annotation, E extends unknown>(
   const getAnnotations = () =>
     (adapter ? store.all().map(adapter.serialize) : store.all()) as E[];
 
+  const getSelected = () => {
+    const selectedIds = selection.selected?.map(s => s.id) || [];
+
+    const selected = selectedIds.map(id => store.getAnnotation(id));
+
+    return adapter 
+      ? selected.map(adapter.serialize) 
+      : selected as unknown as E[];
+  }
+
   const loadAnnotations = (url: string) =>
     fetch(url)
       .then((response) => response.json())
@@ -132,6 +154,14 @@ export const createBaseAnnotator = <I extends Annotation, E extends unknown>(
     }
   }
 
+  const setSelected = (arg?: string | string[]) => {
+    if (arg) {
+      selection.setSelected(arg);
+    } else {
+      selection.clear();
+    }
+  }
+
   const updateAnnotation = (updated: E): E => {
     if (adapter) {
       const crosswalked = adapter.parse(updated).parsed;
@@ -145,15 +175,23 @@ export const createBaseAnnotator = <I extends Annotation, E extends unknown>(
     }
   }
 
+  // Note that we don't spread the undoStack - it has a .destroy()
+  // method that would likely get overwritten by other Annotator implementations
+  // if people are not careful.
   return { 
     addAnnotation,
+    cancelSelected,
+    canRedo: undoStack.canRedo,
+    canUndo: undoStack.canUndo,
     clearAnnotations,
     getAnnotationById,
     getAnnotations,
+    getSelected,
     loadAnnotations,
     redo: undoStack.redo,
     removeAnnotation,
     setAnnotations,
+    setSelected,
     undo: undoStack.undo,
     updateAnnotation
   }

package/src/state/UndoStack.ts

@@ -1,3 +1,4 @@
+import { createNanoEvents, type Unsubscribe } from 'nanoevents';
 import type { Annotation } from '../model';
 import type { Store } from './Store';
 import { Origin } from './StoreObserver';
@@ -8,17 +9,33 @@ import { mergeChanges, type ChangeSet, type StoreChangeEvent, type Update } from
 // as a new undo/redo step.
 const DEBOUNCE = 250;
 
-export interface UndoStack {
+export interface UndoStack <T extends Annotation> {
+
+  canRedo(): boolean;
+
+  canUndo(): boolean;
 
   destroy(): void;
 
+  on<E extends keyof UndoStackEvents<T>>(event: E, callback: UndoStackEvents<T>[E]): Unsubscribe;
+
   undo(): void;
 
   redo(): void;
 
 }
 
-export const createUndoStack = <T extends Annotation>(store: Store<T>): UndoStack => {
+export interface UndoStackEvents <T extends Annotation> {
+
+  redo(change: ChangeSet<T>): void;
+
+  undo(change: ChangeSet<T>): void;
+
+}
+
+export const createUndoStack = <T extends Annotation>(store: Store<T>): UndoStack<T> => {
+
+  const emitter = createNanoEvents<UndoStackEvents<T>>();
 
   const changeStack: ChangeSet<T>[] = [];
 
@@ -77,16 +94,20 @@ export const createUndoStack = <T extends Annotation>(store: Store<T>): UndoStac
     if (pointer > -1) {
       muteEvents = true;
 
-      const { created, updated, deleted} = changeStack[pointer];
+      const { created, updated, deleted } = changeStack[pointer];
 
       undoCreated(created);
       undoUpdated(updated);
       undoDeleted(deleted);
 
+      emitter.emit('undo', changeStack[pointer]);
+
       pointer -= 1;
     }
   }
 
+  const canUndo = () => pointer > -1;
+
   const redo = () => {
     if (changeStack.length - 1 > pointer) {
       muteEvents = true;
@@ -97,14 +118,24 @@ export const createUndoStack = <T extends Annotation>(store: Store<T>): UndoStac
       redoUpdated(updated);
       redoDeleted(deleted);
 
+      emitter.emit('redo', changeStack[pointer + 1]);
+
       pointer += 1;
     }
   }
 
+  const canRedo = () => changeStack.length - 1 > pointer;
+
   const destroy = () => store.unobserve(onChange);
 
+  const on = <E extends keyof UndoStackEvents<T>>(event: E, callback: UndoStackEvents<T>[E]) => 
+    emitter.on(event, callback);
+
   return {
+    canRedo,
+    canUndo,
     destroy,
+    on,
     redo,
     undo
   }