@annotorious/annotorious - npm Package Compare versions

Comparing version 3.0.0-rc.3 to 3.0.0-rc.4

dist/Annotorious.d.ts

@@ -6,2 +6,3 @@ import type { SvelteComponent } from 'svelte';
 import type { ImageAnnotation, ShapeType } from './model';
+import { type Theme } from './AnnotoriousOpts';
 import type { AnnotoriousOpts } from './AnnotoriousOpts';
@@ -14,4 +15,5 @@ export interface ImageAnnotator<E extends unknown = ImageAnnotation> extends Annotator<ImageAnnotation, E> {
     setDrawingEnabled(enabled: boolean): void;
+    setTheme(theme: Theme): void;
 }
 export declare const createImageAnnotator: <E extends unknown = ImageAnnotation>(image: string | HTMLImageElement | HTMLCanvasElement, options?: AnnotoriousOpts<ImageAnnotation, E>) => ImageAnnotator<E>;
 //# sourceMappingURL=Annotorious.d.ts.map

dist/AnnotoriousOpts.d.ts

@@ -11,5 +11,7 @@ import { PointerSelectAction } from '@annotorious/core';
     style?: DrawingStyle | ((annotation: I) => DrawingStyle);
+    theme?: Theme;
 }
 export type DrawingMode = 'click' | 'drag';
+export type Theme = 'dark' | 'light' | 'auto';
 export declare const fillDefaults: <I extends ImageAnnotation = ImageAnnotation, E extends unknown = ImageAnnotation>(opts: AnnotoriousOpts<I, E>) => AnnotoriousOpts<I, E>;
 //# sourceMappingURL=AnnotoriousOpts.d.ts.map

dist/keyboardCommands.d.ts

@@ -1,5 +0,5 @@
-import type { UndoStack } from '@annotorious/core';
-export declare const initKeyboardCommands: (undoStack: UndoStack, container?: Element) => {
+import type { Annotation, UndoStack } from '@annotorious/core';
+export declare const initKeyboardCommands: <T extends Annotation>(undoStack: UndoStack<T>, container?: Element) => {
     destroy: () => void;
 };
 //# sourceMappingURL=keyboardCommands.d.ts.map

dist/themes/smart/setTheme.d.ts

@@ -0,3 +1,5 @@
+import type { Theme } from '../../AnnotoriousOpts';
 export declare const sampleBrightness: (imageOrCanvas: HTMLElement) => number;
-export declare const setTheme: (imageOrCanvas: HTMLElement, container: HTMLElement) => void;
+export declare const detectTheme: (imageOrCanvas: HTMLElement) => "dark" | "light";
+export declare const setTheme: (imageOrCanvas: HTMLElement, container: HTMLElement, theme: Theme) => void;
 //# sourceMappingURL=setTheme.d.ts.map

package.json

 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-rc.4",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
@@ -51,2 +51,5 @@ "author": "Rainer Simon",
   },
+  "peerDependencies": {
+    "@annotorious/core": "*"
+  },
   "dependencies": {
@@ -53,0 +56,0 @@ "rbush": "^3.0.1",

src/Annotorious.ts

@@ -10,4 +10,4 @@ import type { SvelteComponent } from 'svelte';
 import { createSvelteImageAnnotatorState } from './state';
-import { setTheme } from './themes';
-import { fillDefaults } from './AnnotoriousOpts';
+import { setTheme as _setTheme } from './themes';
+import { fillDefaults, type Theme } from './AnnotoriousOpts';
 import type { AnnotoriousOpts } from './AnnotoriousOpts';
@@ -32,2 +32,4 @@ import { initKeyboardCommands } from './keyboardCommands';
 
+  setTheme(theme: Theme): void;
+
 }
@@ -50,9 +52,10 @@
 
-  const { hover, selection, store } = state;
+  const { selection, store } = state;
 
+  const undoStack = createUndoStack(store);
+
   const lifecycle = createLifecyleObserver<ImageAnnotation, E>(
-    store, selection, hover, undefined, opts.adapter, opts.autoSave);
+    state, undoStack, opts.adapter, opts.autoSave
+  );
 
-  const undoStack = createUndoStack(store);
-
   // We'll wrap the image in a container DIV.
@@ -73,3 +76,3 @@ const container = document.createElement('DIV');
 
-  setTheme(img, container);
+  _setTheme(img, container, opts.theme);
 
@@ -101,3 +104,3 @@ const annotationLayer = new SVGAnnotationLayer({
   // Most of the external API functions are covered in the base annotator
-  const base = createBaseAnnotator<ImageAnnotation, E>(store, undoStack, opts.adapter);
+  const base = createBaseAnnotator<ImageAnnotation, E>(state, undoStack, opts.adapter);
 
@@ -138,13 +141,7 @@ const destroy = () => {
 
-  const setSelected = (arg?: string | string[]) => {
-    if (arg) {
-      selection.setSelected(arg);
-    } else {
-      selection.clear();
-    }
-  }
-
   const setStyle = (style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined) =>
     annotationLayer.$set({ style });
 
+  const setTheme = (theme: Theme) => _setTheme(img, container, theme);
+  
   const setUser = (user: User) => {
@@ -167,4 +164,4 @@ currentUser = user;
     setFilter,
-    setSelected,
     setStyle,
+    setTheme,
     setUser,
@@ -171,0 +168,0 @@ state

src/AnnotoriousOpts.ts

@@ -21,2 +21,4 @@ import { PointerSelectAction } from '@annotorious/core';
 
+  theme?: Theme;
+
 }
@@ -26,2 +28,4 @@
 
+export type Theme = 'dark' | 'light' | 'auto';
+
 export const fillDefaults = <I extends ImageAnnotation = ImageAnnotation, E extends unknown = ImageAnnotation> (
@@ -35,3 +39,4 @@ opts: AnnotoriousOpts<I, E>
     drawingMode: opts.drawingMode || 'drag',
-    pointerSelectAction: opts.pointerSelectAction || PointerSelectAction.EDIT
+    pointerSelectAction: opts.pointerSelectAction || PointerSelectAction.EDIT,
+    theme: opts.theme || 'light'
   };
@@ -38,0 +43,0 @@

src/keyboardCommands.ts

@@ -1,7 +0,7 @@
-import type { UndoStack } from '@annotorious/core';
+import type { Annotation, UndoStack } from '@annotorious/core';
 
 const isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
 
-export const initKeyboardCommands = (
-  undoStack: UndoStack,
+export const initKeyboardCommands = <T extends Annotation>(
+  undoStack: UndoStack<T>,
   container?: Element 
@@ -8,0 +8,0 @@ ) => {

src/model/w3c/W3CImageFormatAdapter.ts

@@ -53,2 +53,3 @@ import { v4 as uuidv4 } from 'uuid';
       target: {
+        ...rest.target,
         annotation: annotationId,
@@ -59,3 +60,3 @@ selector
   } : {
-    error: Error(`Unknown selector type: ${selector.type}`)
+    error: Error(`Unknown selector type: ${w3cSelector.type}`)
   };
@@ -62,0 +63,0 @@

src/themes/smart/setTheme.ts

@@ -0,1 +1,3 @@
+import type { Theme } from '../../AnnotoriousOpts';
+
 export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
@@ -38,5 +40,4 @@
 
-export const setTheme = (imageOrCanvas: HTMLElement, container: HTMLElement) => {
+export const detectTheme = (imageOrCanvas: HTMLElement) => {
   const brightness = sampleBrightness(imageOrCanvas);
-
   const theme = brightness > 0.6 ? 'dark' : 'light'
@@ -46,3 +47,6 @@
 
-  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);

No alert changes

Improved metrics

Total package byte prevSize

932092

increased by1.14%

Lines of code

5685

increased by0.53%

Worsened metrics

Dependency count

3

increased by50%

No dependency changes