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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.21",
+  "version": "3.0.0-rc.22",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -37,19 +37,19 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@tsconfig/svelte": "^5.0.2",
+    "@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",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6",
     "vite-plugin-dts": "^3.7.3",
     "vitest": "^1.4.0"
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.0-rc.20",
+    "@annotorious/core": "3.0.0-rc.22",
     "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) {