@annotorious/core 3.0.0-pre-alpha-53 → 3.0.0-pre-alpha-55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/core",
-  "version": "3.0.0-pre-alpha-53",
+  "version": "3.0.0-pre-alpha-55",
   "description": "Annotorious core types and functions",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",

package/src/model/Annotator.ts

@@ -3,8 +3,8 @@ import type { User } from './User';
 import type { PresenceProvider } from '../presence';
 import { Origin, type HoverState, type SelectionState, type Store, type ViewportState } from '../state';
 import type { LifecycleEvents } from '../lifecycle';
-import type { Formatter } from './Formatter';
 import { parseAll, type FormatAdapter } from './FormatAdapter';
+import type { DrawingStyle } from './DrawingStyle';
 
 /**
  * Base annotator interface.
@@ -13,6 +13,8 @@ import { parseAll, type FormatAdapter } from './FormatAdapter';
  */
 export interface Annotator<I extends Annotation = Annotation, E extends unknown = Annotation> {
 
+  style: DrawingStyle | ((annotation: I) => DrawingStyle) | undefined;
+
   addAnnotation(annotation: E): void;
 
   clearAnnotations(): void;
@@ -31,8 +33,6 @@ export interface Annotator<I extends Annotation = Annotation, E extends unknown
 
   setAnnotations(annotations: E[]): void;
 
-  setFormatter(formatter: Formatter): void;
-
   setPresenceProvider?(provider: PresenceProvider): void;
 
   setSelected(arg?: string | string[]): void;

package/src/model/{Formatter.ts → DrawingStyle.ts}

@@ -1,5 +1,3 @@
-import type { Annotation } from './Annotation';
-
 type RGB = `rgb(${number}, ${number}, ${number})`;
 
 type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
@@ -14,6 +12,8 @@ export interface DrawingStyle {
 
   fillOpacity?: number;
 
-}
+  stroke?: Color;
+
+  strokeOpacity?: number;
 
-export type Formatter = <T extends Annotation = Annotation>(annotation: T, isSelected?: boolean) => DrawingStyle;
+}

package/src/model/W3CAnnotation.ts

@@ -83,7 +83,7 @@ export const parseW3CBodies = (
 ): AnnotationBody[] => (Array.isArray(body) ? body : [body]).map(body => {
 
   // Exctract properties that conform to the internal model, but keep custom props
-  const { id, type, purpose, value, created, creator, ...rest} = body;
+  const { id, type, purpose, value, created, creator, ...rest } = body;
 
   // The internal model strictly requires IDs. (Because multi-user scenarios
   // will have problems without them.) In the W3C model, bodys *may* have IDs.
@@ -91,7 +91,7 @@ export const parseW3CBodies = (
   // generating the ID is idempotent: the same body should always get the same ID.
   // This will avoid unexpected results when checking for equality.  
   return {
-    id: id || hashCode(body),
+    id: id || `temp-${hashCode(body)}`,
     annotation: annotationId,
     type,
     purpose,
@@ -105,11 +105,14 @@ export const parseW3CBodies = (
 
 });
 
+/** Serialization helper to remove core-specific fields from the annotation body **/
 export const serializeW3CBodies = (bodies: AnnotationBody[]): W3CAnnotationBody[] => 
   bodies.map(b => {
     const w3c = { ...b };
     delete w3c.annotation;
-    delete w3c.id;
-    return w3c;
-  });
 
+    if (w3c.id?.startsWith('temp-'))
+      delete w3c.id;
+  
+    return w3c;
+  });

package/src/model/index.ts

@@ -1,6 +1,6 @@
 export * from './Annotation';
 export * from './Annotator';
+export * from './DrawingStyle';
 export * from './FormatAdapter';
-export * from './Formatter';
 export * from './User';
 export * from './W3CAnnotation';

package/src/state/Selection.ts

@@ -16,7 +16,7 @@ export enum PointerSelectAction {
 
   EDIT = 'EDIT', // Make annotation target(s) editable on pointer select
   
-  HIGHLIGHT = 'HIGHLIGHT',  // Just hightlight on select, but don't make editable
+  SELECT = 'SELECT',  // Just select, but don't make editable
 
   NONE = 'NONE' // Click won't select - annotation is completely inert
 
@@ -53,7 +53,7 @@ export const createSelectionState = <T extends Annotation>(
       const action = onPointerSelect(annotation, selectAction);
       if (action === PointerSelectAction.EDIT)
         set({ selected: [{ id, editable: true }], pointerEvent }); 
-      else if (action === PointerSelectAction.HIGHLIGHT)
+      else if (action === PointerSelectAction.SELECT)
         set({ selected: [{ id }], pointerEvent }); 
       else
         set({ selected: [], pointerEvent });