@annotorious/annotorious 3.0.0-rc.5 → 3.0.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.5",
+  "version": "3.0.0-rc.6",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",

package/src/Annotorious.ts

@@ -24,7 +24,7 @@ export interface ImageAnnotator<E extends unknown = ImageAnnotation> extends Ann
 
   registerShapeEditor(shapeType: ShapeType, editor: typeof SvelteComponent): void;
 
-  setDrawingTool(tool: DrawingTool): void; 
+  setDrawingTool(name: DrawingTool): void; 
 
   setDrawingEnabled(enabled: boolean): void;
 
@@ -120,10 +120,13 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
   const registerShapeEditor = (shapeType: ShapeType, editor: typeof SvelteComponent) =>
     registerEditor(shapeType, editor);
 
-  const setDrawingTool = (t: DrawingTool) => {
-    const { tool, opts } = getTool(t);
-    // @ts-ignore
-    annotationLayer.$set({ tool, opts })
+  const setDrawingTool = (name: DrawingTool) => {
+    // Validate that the tool exists
+    const toolSpec = getTool(name);
+    if (!toolSpec)
+      throw `No drawing tool named ${name}`;
+
+    annotationLayer.$set({ toolName: name })
   }
 
   const setDrawingEnabled = (enabled: boolean) =>

package/src/annotation/SVGAnnotationLayer.svelte

@@ -6,7 +6,7 @@
   import type { ImageAnnotation, Shape} from '../model';
   import { getEditor, EditorMount } from './editors';
   import { Ellipse, Polygon, Rectangle} from './shapes';
-  import { getTool, ToolMount } from './tools';
+  import { getTool, listDrawingTools, ToolMount } from './tools';
   import { enableResponsive } from './utils';
   import { createSVGTransform } from './Transform';
   import { addEventListeners } from './SVGAnnotationLayerPointerEvent';
@@ -19,9 +19,11 @@
   export let preferredDrawingMode: DrawingMode;
   export let state: SvelteImageAnnotatorState;
   export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
-  export let { tool, opts } = getTool('rectangle');
+  export let toolName: string = listDrawingTools().length > 0 ? listDrawingTools()[0] : undefined;
   export let user: User;
 
+  $: ({ tool, opts } = getTool(toolName));
+
   $: drawingMode = opts?.drawingMode || preferredDrawingMode;
 
   /** Drawing tool layer **/
@@ -154,7 +156,7 @@
           {/key}
         {/each}
       {:else if (tool && drawingEnabled)} 
-        {#key tool}
+        {#key toolName}
           <ToolMount 
             target={drawingEl}
             tool={tool}