@annotorious/annotorious 3.0.0-rc.21 → 3.0.0-rc.23

package/dist/keyboardCommands.d.ts

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

package/dist/model/core/ImageAnnotation.d.ts

@@ -1,5 +1,6 @@
-import type { Annotation, AnnotationTarget } from '@annotorious/core';
-import type { Shape } from './Shape';
+import { Shape } from './Shape';
+import { Annotation, AnnotationTarget } from '@annotorious/core';
+
 export interface ImageAnnotation extends Annotation {
     target: ImageAnnotationTarget;
 }

package/dist/model/core/Shape.d.ts

@@ -1,4 +1,5 @@
-import type { AbstractSelector } from '@annotorious/core';
+import { AbstractSelector } from '@annotorious/core';
+
 export interface Shape extends AbstractSelector {
     type: ShapeType;
     geometry: Geometry;

package/dist/model/core/ellipse/Ellipse.d.ts

@@ -1,4 +1,5 @@
-import type { Bounds, Geometry, Shape } from '../Shape';
+import { Bounds, Geometry, Shape } from '../Shape';
+
 export interface Ellipse extends Shape {
     geometry: EllipseGeometry;
 }

package/dist/model/core/polygon/Polygon.d.ts

@@ -1,4 +1,5 @@
-import type { Bounds, Geometry, Shape } from '../Shape';
+import { Bounds, Geometry, Shape } from '../Shape';
+
 export interface Polygon extends Shape {
     geometry: PolygonGeometry;
 }

package/dist/model/core/rectangle/Rectangle.d.ts

@@ -1,4 +1,5 @@
-import type { Bounds, Geometry, Shape } from '../Shape';
+import { Bounds, Geometry, Shape } from '../Shape';
+
 export interface Rectangle extends Shape {
     geometry: RectangleGeometry;
 }

package/dist/model/core/rectangle/rectangleUtils.d.ts

@@ -1,4 +1,5 @@
-import type { Rectangle } from './Rectangle';
-import { type ShapeUtil } from '../shapeUtils';
+import { ShapeUtil } from '../shapeUtils';
+import { Rectangle } from './Rectangle';
+
 export declare const RectangleUtil: ShapeUtil<Rectangle>;
 //# sourceMappingURL=rectangleUtils.d.ts.map

package/dist/model/core/shapeUtils.d.ts

@@ -1,4 +1,5 @@
-import type { Bounds, Shape, ShapeType } from './Shape';
+import { Bounds, Shape, ShapeType } from './Shape';
+
 export interface ShapeUtil<T extends Shape> {
     area: (shape: T) => number;
     intersects: (shape: T, x: number, y: number) => boolean;

package/dist/model/w3c/W3CImageAnnotation.d.ts

@@ -1,6 +1,7 @@
-import type { W3CAnnotation, W3CAnnotationTarget } from '@annotorious/core';
-import type { FragmentSelector } from './fragment';
-import type { SVGSelector } from './svg';
+import { SVGSelector } from './svg';
+import { FragmentSelector } from './fragment';
+import { W3CAnnotation, W3CAnnotationTarget } from '@annotorious/core';
+
 export interface W3CImageAnnotation extends W3CAnnotation {
     target: W3CImageAnnotationTarget | W3CImageAnnotationTarget[];
 }

package/dist/model/w3c/W3CImageFormatAdapter.d.ts

@@ -1,6 +1,7 @@
-import type { FormatAdapter, ParseResult, W3CAnnotation } from '@annotorious/core';
-import type { ImageAnnotation } from '../core';
-import type { W3CImageAnnotation } from './W3CImageAnnotation';
+import { W3CImageAnnotation } from './W3CImageAnnotation';
+import { ImageAnnotation } from '../core';
+import { FormatAdapter, ParseResult, W3CAnnotation } from '@annotorious/core';
+
 export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CImageAnnotation>;
 export declare const W3CImageFormat: (source: string, invertY?: boolean) => W3CImageFormatAdapter;
 export declare const parseW3CImageAnnotation: (annotation: W3CAnnotation, invertY?: boolean) => ParseResult<ImageAnnotation>;

package/dist/model/w3c/fragment/FragmentSelector.d.ts

@@ -1,4 +1,5 @@
-import type { Rectangle, RectangleGeometry } from '../../core';
+import { Rectangle, RectangleGeometry } from '../../core';
+
 export interface FragmentSelector {
     type: 'FragmentSelector';
     conformsTo: 'http://www.w3.org/TR/media-frags/';

package/dist/model/w3c/svg/SVGSelector.d.ts

@@ -1,4 +1,5 @@
-import type { Shape } from '../../core';
+import { Shape } from '../../core';
+
 export interface SVGSelector {
     type: 'SvgSelector';
     value: string;

package/dist/state/ImageAnnotationStore.d.ts

@@ -1,5 +1,6 @@
-import type { Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
-import type { ImageAnnotation } from '../model';
+import { ImageAnnotation } from '../model';
+import { Store, SvelteAnnotatorState, SvelteStore } from '@annotorious/core';
+
 export type ImageAnnotationStore = Store<ImageAnnotation> & {
     getAt(x: number, y: number): ImageAnnotation | undefined;
     getIntersecting(x: number, y: number, width: number, height: number): ImageAnnotation[];

package/dist/state/ImageAnnotatorState.d.ts

@@ -1,7 +1,8 @@
-import type { ImageAnnotation } from '../model';
-import type { AnnotoriousOpts } from '../AnnotoriousOpts';
-import { type AnnotatorState, type HoverState, type SelectionState } from '@annotorious/core';
-import type { ImageAnnotationStore, SvelteImageAnnotatorState } from './ImageAnnotationStore';
+import { ImageAnnotationStore, SvelteImageAnnotatorState } from './ImageAnnotationStore';
+import { AnnotatorState, HoverState, SelectionState } from '@annotorious/core';
+import { AnnotoriousOpts } from '../AnnotoriousOpts';
+import { ImageAnnotation } from '../model';
+
 export type ImageAnnotatorState<T extends ImageAnnotationStore = ImageAnnotationStore> = AnnotatorState<ImageAnnotation> & {
     store: T;
     selection: SelectionState<ImageAnnotation>;

package/dist/state/spatialTree.d.ts

@@ -1,4 +1,5 @@
-import type { ImageAnnotationTarget } from '../model';
+import { ImageAnnotationTarget } from '../model';
+
 interface IndexedTarget {
     minX: number;
     minY: number;

package/dist/themes/smart/setTheme.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.21",
+  "version": "3.0.0-rc.23",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -36,20 +36,20 @@
     "./src": "./src/index.ts"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@tsconfig/svelte": "^5.0.2",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@tsconfig/svelte": "^5.0.4",
     "@types/rbush": "^3.0.3",
     "jsdom": "^24.0.0",
-    "svelte": "^4.2.12",
-    "svelte-preprocess": "^5.1.3",
-    "typescript": "^5.3.3",
-    "vite": "^5.2.2",
-    "vite-plugin-dts": "^3.7.3",
-    "vitest": "^1.4.0"
+    "svelte": "^4.2.15",
+    "svelte-preprocess": "^5.1.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.10",
+    "vite-plugin-dts": "^3.9.0",
+    "vitest": "^1.5.0"
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.0-rc.20",
+    "@annotorious/core": "3.0.0-rc.23",
     "rbush": "^3.0.1",
     "uuid": "^9.0.1"
   }
-}
+}

package/src/Annotorious.css

@@ -19,6 +19,10 @@
           user-select: none;
 }
 
+.a9s-annotationlayer.hidden {
+  display: none;
+}
+
 .a9s-annotationlayer ellipse, 
 .a9s-annotationlayer polygon,
 .a9s-annotationlayer rect  {

package/src/Annotorious.ts

@@ -1,5 +1,6 @@
 import type { SvelteComponent } from 'svelte';
-import { PointerSelectAction, type Annotator, type DrawingStyle, type Filter, type User } from '@annotorious/core';
+import { PointerSelectAction } from '@annotorious/core';
+import type { Annotator, DrawingStyleExpression, Filter, User } from '@annotorious/core';
 import { createAnonymousGuest, createBaseAnnotator, createLifecyleObserver, createUndoStack } from '@annotorious/core';
 import { registerEditor } from './annotation/editors';
 import { getTool, registerTool, listDrawingTools, type DrawingTool } from './annotation/tools';
@@ -142,7 +143,7 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     console.warn('Filter not implemented yet');
   }
 
-  const setStyle = (style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined) =>
+  const setStyle = (style: DrawingStyleExpression<ImageAnnotation> | undefined) =>
     annotationLayer.$set({ style });
 
   const setTheme = (theme: Theme) => _setTheme(img, container, theme);
@@ -152,6 +153,10 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     annotationLayer.$set({ user });
   }
 
+  const setVisible = (visible: boolean) =>
+    // @ts-ignore
+    annotationLayer.$set({ visible });
+
   return {
     ...base,
     destroy,
@@ -167,6 +172,7 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     setStyle,
     setTheme,
     setUser,
+    setVisible,
     state
   }
 

package/src/annotation/SVGAnnotationLayer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { SvelteComponent, onMount } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
-  import type { DrawingStyle, StoreChangeEvent, User } from '@annotorious/core';
+  import type { DrawingStyleExpression, StoreChangeEvent, User } from '@annotorious/core';
   import { ShapeType } from '../model';
   import type { ImageAnnotation, Shape} from '../model';
   import { getEditor as _getEditor, EditorMount } from './editors';
@@ -18,9 +18,10 @@
   export let image: HTMLImageElement | HTMLCanvasElement;
   export let preferredDrawingMode: DrawingMode;
   export let state: SvelteImageAnnotatorState;
-  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined = undefined;
+  export let style: DrawingStyleExpression<ImageAnnotation> | undefined = undefined;
   export let toolName: string = listDrawingTools()[0];
   export let user: User;
+  export let visible = true;
 
   $: ({ tool, opts } = getTool(toolName) || { tool: undefined, opts: undefined });
 
@@ -122,6 +123,7 @@
   bind:this={svgEl}
   class="a9s-annotationlayer"
   class:drawing={tool}
+  class:hidden={!visible}
   on:pointerup={onPointerUp}
   on:pointerdown={onPointerDown}>
   

package/src/annotation/editors/EditorMount.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { DrawingStyle } from '@annotorious/core';
+  import type { DrawingStyleExpression } from '@annotorious/core';
   import { createEventDispatcher, onMount, type SvelteComponent } from 'svelte';
   import type { ImageAnnotation, Shape } from '../../model';
   import { computeStyle } from '../utils/styling';
@@ -10,7 +10,7 @@
   /** Props */
   export let annotation: ImageAnnotation;
   export let editor: typeof SvelteComponent;
-  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined;
+  export let style: DrawingStyleExpression<ImageAnnotation> | undefined;
   export let target: SVGGElement;
   export let transform: Transform;
   export let viewportScale: number;

package/src/annotation/shapes/Ellipse.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import type { DrawingStyle } from '@annotorious/core';
+  import type { DrawingStyleExpression } from '@annotorious/core';
   import type { Geometry, EllipseGeometry, ImageAnnotation } from '../../model';
   import { computeStyle } from '../utils/styling';
   
   /** Props */
   export let annotation: ImageAnnotation;
   export let geom: Geometry;
-  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined;
+  export let style: DrawingStyleExpression<ImageAnnotation> | undefined;
 
   $: computedStyle = computeStyle(annotation, style);
 

package/src/annotation/shapes/Polygon.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import type { DrawingStyle } from '@annotorious/core';
+  import type { DrawingStyleExpression } from '@annotorious/core';
   import type { Geometry, ImageAnnotation, PolygonGeometry } from '../../model';
   import { computeStyle } from '../utils/styling';
   
   /** Props **/
   export let annotation: ImageAnnotation;
   export let geom: Geometry;
-  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined;
+  export let style: DrawingStyleExpression<ImageAnnotation> | undefined;
 
   $: computedStyle = computeStyle(annotation, style);
 

package/src/annotation/shapes/Rectangle.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import type { DrawingStyle } from '@annotorious/core';
+  import type { DrawingStyleExpression } from '@annotorious/core';
   import type { Geometry, ImageAnnotation, RectangleGeometry } from '../../model';
   import { computeStyle } from '../utils/styling';
   
   /** Props **/
   export let annotation: ImageAnnotation;
   export let geom: Geometry;
-  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined;
+  export let style: DrawingStyleExpression<ImageAnnotation> | undefined;
 
   $: computedStyle = computeStyle(annotation, style);
 

package/src/annotation/utils/styling.ts

@@ -1,7 +1,10 @@
-import type { DrawingStyle } from '@annotorious/core';
+import type { DrawingStyleExpression } from '@annotorious/core';
 import type { ImageAnnotation } from '../../model';
 
-export const computeStyle = (annotation: ImageAnnotation, style?: DrawingStyle | ((a: ImageAnnotation) => DrawingStyle)) => {
+export const computeStyle = (
+  annotation: ImageAnnotation, 
+  style?: DrawingStyleExpression<ImageAnnotation>
+) => {
   const computed = typeof style === 'function' ? style(annotation) : style;
 
   if (computed) {