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

package/dist/index.d.ts

@@ -6,5 +6,11 @@ export * from './annotation/tools';
 export * from './Annotorious';
 export * from './AnnotoriousOpts';
 export * from './keyboardCommands';
-export type { Annotation, AnnotationBody, AnnotationTarget, Annotator, AnnotatorState, Appearance, AppearanceProvider, Color, DrawingStyle, Filter, FormatAdapter, HoverState, LifecycleEvents, ParseResult, PresentUser, Purpose, Selection, SelectionState, Store, StoreChangeEvent, StoreObserver, User, W3CAnnotation, W3CAnnotationBody, W3CAnnotationTarget } from '@annotorious/core';
+export * from '@annotorious/core/src/model';
+export * from '@annotorious/core/src/presence';
+export * from '@annotorious/core/src/utils';
+export type { HoverState, Selection, SelectionState, Store, StoreChangeEvent, StoreObserver } from '@annotorious/core/src/state';
+import { Origin as _Origin, PointerSelectAction as _PointerSelectAction } from '@annotorious/core/src/state';
+export { _Origin as Origin };
+export { _PointerSelectAction as PointerSelectAction };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AAGnC,YAAY,EACV,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,KAAK,EACL,YAAY,EACZ,MAAM,EACN,aAAa,EACb,UAAU,EACV,eAAe,EACf,WAAW,EACX,WAAW,EACX,OAAO,EACP,SAAS,EACT,cAAc,EACd,KAAK,EACL,gBAAgB,EAChB,aAAa,EACb,IAAI,EACJ,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAE5C,YAAY,EACV,UAAU,EACV,SAAS,EACT,cAAc,EACd,KAAK,EACL,gBAAgB,EAChB,aAAa,EACd,MAAM,6BAA6B,CAAC;AAErC,OAAO,EACL,MAAM,IAAI,OAAO,EACjB,mBAAmB,IAAI,oBAAoB,EAC5C,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAC7B,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}

package/dist/keyboardCommands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboardCommands.d.ts","sourceRoot":"","sources":["../src/keyboardCommands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI/D,eAAO,MAAM,oBAAoB,oCACpB,UAAU,CAAC,CAAC,cACX,OAAO;;CA2CpB,CAAA"}
+{"version":3,"file":"keyboardCommands.d.ts","sourceRoot":"","sources":["../src/keyboardCommands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI/D,eAAO,MAAM,oBAAoB,8DAEnB,OAAO;;CAuCpB,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"W3CImageFormatAdapter.d.ts","sourceRoot":"","sources":["../../../src/model/w3c/W3CImageFormatAdapter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAKlE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;AAEvF,eAAO,MAAM,cAAc,WACjB,MAAM,YACL,OAAO,0BAUjB,CAAA;AAED,eAAO,MAAM,uBAAuB,eACtB,aAAa,YAChB,OAAO,KACf,YAAY,eAAe,CA2C7B,CAAA;AAED,eAAO,MAAM,2BAA2B,eAC1B,eAAe,UACnB,MAAM,KACb,kBAsCF,CAAA"}
+{"version":3,"file":"W3CImageFormatAdapter.d.ts","sourceRoot":"","sources":["../../../src/model/w3c/W3CImageFormatAdapter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAMlE,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAElF,eAAO,MAAM,cAAc,WACjB,MAAM,YACL,OAAO,0BAUjB,CAAA;AAED,eAAO,MAAM,uBAAuB,eACtB,aAAa,YAChB,OAAO,KACf,YAAY,eAAe,CA+B7B,CAAA;AAED,eAAO,MAAM,2BAA2B,eAC1B,eAAe,UACnB,MAAM,KACb,aAmBF,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"FragmentSelector.d.ts","sourceRoot":"","sources":["../../../../src/model/w3c/fragment/FragmentSelector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAG/D,MAAM,WAAW,gBAAgB;IAE/B,IAAI,EAAE,kBAAkB,CAAC;IAEzB,UAAU,EAAE,mCAAmC,CAAC;IAEhD,KAAK,EAAE,MAAM,CAAC;CAEf;AAED,eAAO,MAAM,qBAAqB,uBACZ,gBAAgB,GAAG,MAAM,wBAE5C,SA+BF,CAAA;AAED,eAAO,MAAM,yBAAyB,aAAc,iBAAiB,KAAG,gBAQvE,CAAA"}
+{"version":3,"file":"FragmentSelector.d.ts","sourceRoot":"","sources":["../../../../src/model/w3c/fragment/FragmentSelector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IAEnD,IAAI,EAAE,kBAAkB,CAAC;IAEzB,UAAU,EAAE,mCAAmC,CAAC;IAEhD,KAAK,EAAE,MAAM,CAAC;CAEf;AAED,eAAO,MAAM,qBAAqB,uBACZ,gBAAgB,GAAG,MAAM,wBAE5C,SA+BF,CAAC;AAEF,eAAO,MAAM,yBAAyB,aAAc,iBAAiB,KAAG,gBAQvE,CAAC"}

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

@@ -1,5 +1,4 @@
 export * from './fragment';
 export * from './svg';
-export * from './W3CImageAnnotation';
 export * from './W3CImageFormatAdapter';
 //# sourceMappingURL=index.d.ts.map

package/dist/model/w3c/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/model/w3c/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/model/w3c/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,yBAAyB,CAAC"}

package/dist/model/w3c/svg/SVG.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SVG.d.ts","sourceRoot":"","sources":["../../../../src/model/w3c/svg/SVG.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,+BAA+B,CAAC;AAE1D,eAAO,MAAM,QAAQ,QAAS,OAAO,GAAG,QAAQ,uBAkB/C,CAAA;AAED,uDAAuD;AACvD,eAAO,MAAM,kBAAkB,gBAAiB,QAAQ,KAAG,OAW1D,CAAA"}
+{"version":3,"file":"SVG.d.ts","sourceRoot":"","sources":["../../../../src/model/w3c/svg/SVG.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,+BAA+B,CAAC;AAE1D,eAAO,MAAM,QAAQ,QAAS,OAAO,GAAG,QAAQ,uBAmB/C,CAAA;AAED,uDAAuD;AACvD,eAAO,MAAM,kBAAkB,gBAAiB,QAAQ,KAAG,OAW1D,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SVGSelector.d.ts","sourceRoot":"","sources":["../../../../src/model/w3c/svg/SVGSelector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsD,KAAK,EAAE,MAAM,YAAY,CAAC;AAI5F,MAAM,WAAW,WAAW;IAE1B,IAAI,EAAE,aAAa,CAAC;IAEpB,KAAK,EAAE,MAAM,CAAC;CAEf;AA0DD,eAAO,MAAM,gBAAgB,qCAAsC,WAAW,GAAG,MAAM,KAAG,CASzF,CAAA;AAED,eAAO,MAAM,oBAAoB,UAAW,KAAK,KAAG,WAiBnD,CAAA"}
+{"version":3,"file":"SVGSelector.d.ts","sourceRoot":"","sources":["../../../../src/model/w3c/svg/SVGSelector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAsD,KAAK,EAAE,MAAM,YAAY,CAAC;AAG5F,MAAM,WAAW,WAAY,SAAQ,WAAW;IAE9C,IAAI,EAAE,aAAa,CAAC;IAEpB,KAAK,EAAE,MAAM,CAAC;CAEf;AA6DD,eAAO,MAAM,gBAAgB,qCAAsC,WAAW,GAAG,MAAM,MAOtF,CAAA;AAED,eAAO,MAAM,oBAAoB,UAAW,KAAK,KAAG,WAiBnD,CAAA"}

package/dist/state/ImageAnnotatorState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageAnnotatorState.d.ts","sourceRoot":"","sources":["../../src/state/ImageAnnotatorState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAM3B,OAAO,KAAK,EACV,oBAAoB,EAEpB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,oBAAoB,GAAG,oBAAoB,IAAI,cAAc,CAAC,eAAe,CAAC,GAAG;IAEzH,KAAK,EAAE,CAAC,CAAC;IAET,SAAS,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAE3C,KAAK,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;CAEpC,CAAA;AAED,eAAO,MAAM,yBAAyB,4BAC9B,gBAAgB,eAAe,EAAE,CAAC,CAAC,KACxC,oBAAoB,oBAAoB,CAwC1C,CAAA;AAED,eAAO,MAAM,+BAA+B,4BACpC,gBAAgB,eAAe,EAAE,CAAC,CAAC,KACxC,yBASF,CAAA"}
+{"version":3,"file":"ImageAnnotatorState.d.ts","sourceRoot":"","sources":["../../src/state/ImageAnnotatorState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAM3B,OAAO,KAAK,EACV,oBAAoB,EAEpB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,oBAAoB,GAAG,oBAAoB,IAAI,cAAc,CAAC,eAAe,CAAC,GAAG;IAEzH,KAAK,EAAE,CAAC,CAAC;IAET,SAAS,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAE3C,KAAK,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;CAEpC,CAAA;AAED,eAAO,MAAM,yBAAyB,oEAEnC,oBAAoB,oBAAoB,CAwC1C,CAAA;AAED,eAAO,MAAM,+BAA+B,oEAEzC,yBASF,CAAA"}

package/dist/state/spatialTree.d.ts

@@ -9,7 +9,7 @@ interface IndexedTarget {
 export declare const createSpatialTree: () => {
     all: () => IndexedTarget[];
     clear: () => void;
-    getAt: (x: number, y: number) => ImageAnnotationTarget | undefined;
+    getAt: (x: number, y: number) => ImageAnnotationTarget | null;
     getIntersecting: (x: number, y: number, width: number, height: number) => ImageAnnotationTarget[];
     insert: (target: ImageAnnotationTarget) => void;
     remove: (target: ImageAnnotationTarget) => void;

package/dist/state/spatialTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spatialTree.d.ts","sourceRoot":"","sources":["../../src/state/spatialTree.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD,UAAU,aAAa;IAErB,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,EAAE,qBAAqB,CAAC;CAE/B;AAED,eAAO,MAAM,iBAAiB;;;eA+CV,MAAM,KAAK,MAAM,KAAG,qBAAqB,GAAG,SAAS;yBAqB3C,MAAM,KAAK,MAAM,SAAS,MAAM,UAAU,MAAM;qBAvDpD,qBAAqB;qBASrB,qBAAqB;mBAYvB,qBAAqB,EAAE,YAAW,OAAO;;uBALrC,qBAAqB,WAAW,qBAAqB;CA6DhF,CAAA"}
+{"version":3,"file":"spatialTree.d.ts","sourceRoot":"","sources":["../../src/state/spatialTree.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD,UAAU,aAAa;IAErB,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,EAAE,qBAAqB,CAAC;CAE/B;AAED,eAAO,MAAM,iBAAiB;;;eA8CV,MAAM,KAAK,MAAM,KAAG,qBAAqB,GAAG,IAAI;yBAqBtC,MAAM,KAAK,MAAM,SAAS,MAAM,UAAU,MAAM;qBAtDpD,qBAAqB;qBASrB,qBAAqB;mBAWvB,qBAAqB,EAAE,YAAW,OAAO;;uBALrC,qBAAqB,WAAW,qBAAqB;CA6DhF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.21",
+  "version": "3.0.0-rc.4",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -33,22 +33,25 @@
       "require": "./dist/annotorious.js"
     },
     "./annotorious.css": "./dist/annotorious.css",
-    "./src": "./src/index.ts"
+    "./src": "./src/index.ts",
+    "./src/annotation": "./src/annotation/index.ts",
+    "./src/model": "./src/model/index.ts"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@tsconfig/svelte": "^5.0.2",
-    "@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"
+    "@sveltejs/vite-plugin-svelte": "^2.4.6",
+    "@tsconfig/svelte": "^3.0.0",
+    "@types/rbush": "^3.0.2",
+    "jsdom": "^22.1.0",
+    "svelte": "^3.59.2",
+    "typescript": "^4.9.5",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.6.0",
+    "vitest": "^0.34.6"
+  },
+  "peerDependencies": {
+    "@annotorious/core": "*"
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.0-rc.20",
     "rbush": "^3.0.1",
     "uuid": "^9.0.1"
   }

package/src/Annotorious.css

@@ -37,7 +37,7 @@
   cursor: move;
 }
 
-.a9s-handle {
+.a9s-corner-handle {
   cursor: move;
 }
 
@@ -57,18 +57,18 @@
   cursor: w-resize;
 }
 
-.a9s-handle.a9s-corner-handle-topleft {
+.a9s-corner-handle.a9s-corner-handle-topleft {
   cursor: nw-resize;
 }
 
-.a9s-handle.a9s-corner-handle-topright {
+.a9s-corner-handle.a9s-corner-handle-topright {
   cursor: ne-resize;
 }
 
-.a9s-handle.a9s-corner-handle-bottomright {
+.a9s-corner-handle.a9s-corner-handle-bottomright {
   cursor: se-resize; 
 }
 
-.a9s-handle.a9s-corner-handle-bottomleft {
+.a9s-corner-handle.a9s-corner-handle-bottomleft {
   cursor: sw-resize;
 }

package/src/Annotorious.ts

@@ -1,5 +1,5 @@
 import type { SvelteComponent } from 'svelte';
-import { PointerSelectAction, type Annotator, type DrawingStyle, type Filter, type User } from '@annotorious/core';
+import type { Annotator, DrawingStyle, 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';
@@ -24,7 +24,7 @@ export interface ImageAnnotator<E extends unknown = ImageAnnotation> extends Ann
 
   registerShapeEditor(shapeType: ShapeType, editor: typeof SvelteComponent): void;
 
-  setDrawingTool(name: DrawingTool): void; 
+  setDrawingTool(tool: DrawingTool): void; 
 
   setDrawingEnabled(enabled: boolean): void;
 
@@ -43,12 +43,7 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
   const img = (typeof image === 'string' ? 
     document.getElementById(image) : image) as HTMLImageElement | HTMLCanvasElement;
 
-  const opts = fillDefaults<ImageAnnotation, E>(options, {
-    drawingEnabled: true,
-    drawingMode: 'drag',
-    pointerSelectAction: PointerSelectAction.EDIT,
-    theme: 'light'
-  });
+  const opts = fillDefaults<ImageAnnotation, E>(options);
 
   const state = createSvelteImageAnnotatorState(opts);
 
@@ -68,21 +63,21 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
   // Wrapper div has unwanted margin at the bottom otherwise!
   img.style.display = 'block';
 
-  img.parentNode!.insertBefore(container, img);
+  img.parentNode.insertBefore(container, img);
   container.appendChild(img);
 
   const keyboardCommands = initKeyboardCommands(undoStack);
 
   let currentUser: User = createAnonymousGuest();
 
-  _setTheme(img, container, opts.theme!);
+  _setTheme(img, container, opts.theme);
 
   const annotationLayer = new SVGAnnotationLayer({
     target: container,
     props: { 
-      drawingEnabled: Boolean(opts.drawingEnabled), 
+      drawingEnabled: opts.drawingEnabled, 
       image: img, 
-      preferredDrawingMode: opts.drawingMode!,
+      preferredDrawingMode: opts.drawingMode,
       state, 
       style: opts.style, 
       user: currentUser
@@ -109,8 +104,8 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
     annotationLayer.$destroy();
 
     // Unwrap the image
-    container.parentNode!.insertBefore(img, container);
-    container.parentNode!.removeChild(container);
+    container.parentNode.insertBefore(img, container);
+    container.parentNode.removeChild(container);
 
     // Other cleanup actions
     keyboardCommands.destroy();
@@ -125,14 +120,10 @@ export const createImageAnnotator = <E extends unknown = ImageAnnotation>(
   const registerShapeEditor = (shapeType: ShapeType, editor: typeof SvelteComponent) =>
     registerEditor(shapeType, editor);
 
-  const setDrawingTool = (name: DrawingTool) => {
-    // Validate that the tool exists
-    const toolSpec = getTool(name);
-    if (!toolSpec)
-      throw `No drawing tool named ${name}`;
-
+  const setDrawingTool = (t: DrawingTool) => {
+    const { tool, opts } = getTool(t);
     // @ts-ignore
-    annotationLayer.$set({ toolName: name })
+    annotationLayer.$set({ tool, opts })
   }
 
   const setDrawingEnabled = (enabled: boolean) =>

package/src/AnnotoriousOpts.ts

@@ -1,4 +1,5 @@
-import type { Annotation, DrawingStyle, FormatAdapter, PointerSelectAction } from '@annotorious/core';
+import { PointerSelectAction } from '@annotorious/core';
+import type { Annotation, DrawingStyle, FormatAdapter } from '@annotorious/core';
 import type { ImageAnnotation } from './model';
 
 export interface AnnotoriousOpts<I extends Annotation = ImageAnnotation, E extends unknown = ImageAnnotation> {
@@ -26,16 +27,15 @@ export type DrawingMode = 'click' | 'drag';
 export type Theme = 'dark' | 'light' | 'auto';
 
 export const fillDefaults = <I extends ImageAnnotation = ImageAnnotation, E extends unknown = ImageAnnotation> (
-  opts: AnnotoriousOpts<I, E>,
-  defaults: AnnotoriousOpts<I, E>
+  opts: AnnotoriousOpts<I, E>
 ): AnnotoriousOpts<I, E> => {
 
   return {
     ...opts,
-    drawingEnabled: opts.drawingEnabled === undefined ? defaults.drawingEnabled : opts.drawingEnabled,
-    drawingMode: opts.drawingMode || defaults.drawingMode,
-    pointerSelectAction: opts.pointerSelectAction || defaults.pointerSelectAction,
-    theme: opts.theme || defaults.theme
+    drawingEnabled: opts.drawingEnabled === undefined ? true : opts.drawingEnabled,
+    drawingMode: opts.drawingMode || 'drag',
+    pointerSelectAction: opts.pointerSelectAction || PointerSelectAction.EDIT,
+    theme: opts.theme || 'light'
   };
 
 };

package/src/annotation/SVGAnnotationLayer.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { SvelteComponent, onMount } from 'svelte';
+<script type="ts">
+  import { onMount, type SvelteComponent } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
   import type { DrawingStyle, StoreChangeEvent, User } from '@annotorious/core';
   import { ShapeType } from '../model';
   import type { ImageAnnotation, Shape} from '../model';
-  import { getEditor as _getEditor, EditorMount } from './editors';
+  import { getEditor, EditorMount } from './editors';
   import { Ellipse, Polygon, Rectangle} from './shapes';
-  import { getTool, listDrawingTools, ToolMount } from './tools';
+  import { getTool, ToolMount } from './tools';
   import { enableResponsive } from './utils';
   import { createSVGTransform } from './Transform';
   import { addEventListeners } from './SVGAnnotationLayerPointerEvent';
@@ -18,12 +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 toolName: string = listDrawingTools()[0];
+  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
+  export let { tool, opts } = getTool('rectangle');
   export let user: User;
 
-  $: ({ tool, opts } = getTool(toolName) || { tool: undefined, opts: undefined });
-
   $: drawingMode = opts?.drawingMode || preferredDrawingMode;
 
   /** Drawing tool layer **/
@@ -43,17 +41,16 @@
 
   $: ({ onPointerDown, onPointerUp } = addEventListeners(svgEl, store));
 
-  let storeObserver: (event: StoreChangeEvent<ImageAnnotation>) => void | undefined;
+  let storeObserver = null;
 
-  let editableAnnotations: ImageAnnotation[] | undefined;
+  let editableAnnotations: ImageAnnotation[] = null;
 
   $: isEditable = (a: ImageAnnotation) => $selection.selected.find(s => s.id === a.id && s.editable);
 
   $: trackSelection($selection.selected);
 
   const trackSelection = (selected: { id: string, editable?: boolean }[]) => {
-    if (storeObserver)
-      store.unobserve(storeObserver);
+    store.unobserve(storeObserver);
 
     // Track only editable annotations
     const editableIds = 
@@ -61,17 +58,17 @@
 
     if (editableIds.length > 0) {
       // Resolve selected IDs from the store
-      editableAnnotations = editableIds.map(id => store.getAnnotation(id)!).filter(Boolean);
+      editableAnnotations = editableIds.map(id => store.getAnnotation(id));
 
       // Track updates on the editable annotations
       storeObserver = (event: StoreChangeEvent<ImageAnnotation>) => {
         const { updated } = event.changes;
-        editableAnnotations = updated?.map(change => change.newValue);
+        editableAnnotations = updated.map(change => change.newValue);
       }   
       
       store.observe(storeObserver, { annotations: editableIds });
     } else {
-      editableAnnotations = undefined;
+      editableAnnotations = null;
     }
   }
 
@@ -109,13 +106,10 @@
       ...target,
       selector: event.detail,
       created: isUpdate ? target.created : new Date(),
-      updated: isUpdate ? new Date() : undefined,
-      updatedBy: isUpdate ? user : undefined
+      updated: isUpdate ? new Date() : null,
+      updatedBy: isUpdate ? user : null
     });
   }
-
-  // To get around lack of TypeScript support in Svelte markup
-  const getEditor = (shape: Shape): typeof SvelteComponent => _getEditor(shape)!;
 </script>
 
 <svg
@@ -160,7 +154,7 @@
           {/key}
         {/each}
       {:else if (tool && drawingEnabled)} 
-        {#key toolName}
+        {#key tool}
           <ToolMount 
             target={drawingEl}
             tool={tool}

package/src/annotation/SVGAnnotationLayerPointerEvent.ts

@@ -1,6 +1,7 @@
 import { createEventDispatcher } from 'svelte';
 import type { SvelteImageAnnotationStore } from '../state';
 import type { ImageAnnotation } from '../model';
+import { isTouch } from './utils';
 
 export interface SVGAnnotationLayerPointerEvent {
     
@@ -50,5 +51,5 @@ const getSVGPoint = (evt: PointerEvent, svg: SVGSVGElement) => {
   pt.x = x + left;
   pt.y = y + top;
 
-  return pt.matrixTransform(svg.getScreenCTM()!.inverse());
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
 }

package/src/annotation/Transform.ts

@@ -19,7 +19,7 @@ export const createSVGTransform = (svg: SVGSVGElement): Transform => ({
     pt.x = offsetX + bbox.x;
     pt.y = offsetY + bbox.y;
   
-    const { x, y } = pt.matrixTransform(svg.getScreenCTM()!.inverse());
+    const { x, y } = pt.matrixTransform(svg.getScreenCTM().inverse());
     return [x, y];
   }
 

package/src/annotation/editors/Editor.svelte

@@ -1,22 +1,23 @@
-<script lang="ts">
+<script type="ts">
   import { createEventDispatcher } from 'svelte';
   import type { Shape } from '../../model';
+  import type { Handle } from './Handle';
   import type { Transform } from '../Transform';
 
-  const dispatch = createEventDispatcher<{ grab: PointerEvent, release: PointerEvent, change: Shape }>();
+  const dispatch = createEventDispatcher<{ grab: undefined, release: undefined, change: Shape }>();
 
   /** Props */
   export let shape: Shape;
-  export let editor: (shape: Shape, handle: string, delta: [number, number]) => Shape;
+  export let editor: (shape: Shape, handle: Handle, delta: [number, number]) => Shape;
   export let transform: Transform;
 
-  let grabbedHandle: string | undefined;
+  let grabbedHandle: Handle = null;
 
   let origin: [number, number];
 
-  let initialShape: Shape | undefined;
+  let initialShape: Shape = null;
 
-  const onGrab = (handle: string) => (evt: PointerEvent) => {
+  const onGrab = (handle: Handle) => (evt: PointerEvent) => {
     grabbedHandle = handle;
     origin = transform.elementToImage(evt.offsetX, evt.offsetY);
     initialShape = shape;
@@ -24,7 +25,7 @@
     const target = evt.target as Element;
     target.setPointerCapture(evt.pointerId);
 
-    dispatch('grab', evt);
+    dispatch('grab');
   }
 
   const onPointerMove = (evt: PointerEvent) => {
@@ -33,7 +34,7 @@
 
       const delta: [number, number] = [x - origin[0], y - origin[1]];
 
-      shape = editor(initialShape!, grabbedHandle, delta);
+      shape = editor(initialShape, grabbedHandle, delta);
       
       dispatch('change', shape);
     }
@@ -43,11 +44,11 @@
     const target = evt.target as Element;
     target.releasePointerCapture(evt.pointerId);
 
-    grabbedHandle = undefined;
+    grabbedHandle = null;
 
     initialShape = shape;
     
-    dispatch('release', evt);
+    dispatch('release');
   }
 </script>
 

package/src/annotation/editors/EditorMount.svelte

@@ -5,12 +5,12 @@
   import { computeStyle } from '../utils/styling';
   import type { Transform } from '../Transform';
 
-  const dispatch = createEventDispatcher<{ grab: PointerEvent, release: PointerEvent, change: Shape }>();
+  const dispatch = createEventDispatcher<{ grab: undefined, release: undefined, change: Shape }>();
 
   /** Props */
   export let annotation: ImageAnnotation;
   export let editor: typeof SvelteComponent;
-  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) | undefined;
+  export let style: DrawingStyle | ((annotation: ImageAnnotation) => DrawingStyle) = undefined;
   export let target: SVGGElement;
   export let transform: Transform;
   export let viewportScale: number;

package/src/annotation/editors/Handle.ts

@@ -0,0 +1,21 @@
+export type Handle = string;
+
+export const Handle = (value: string | number) => `HANDLE-${value}`;
+
+Handle.SHAPE = 'SHAPE';
+
+Handle.TOP = 'TOP';
+
+Handle.RIGHT = 'RIGHT';
+
+Handle.BOTTOM = 'BOTTOM';
+
+Handle.LEFT = 'LEFT';
+
+Handle.TOP_LEFT = 'TOP_LEFT';
+
+Handle.TOP_RIGHT = 'TOP_RIGHT';
+
+Handle.BOTTOM_RIGHT = 'BOTTOM_RIGHT';
+
+Handle.BOTTOM_LEFT = 'BOTTOM_LEFT';

package/src/annotation/editors/index.ts

@@ -1,7 +1,7 @@
 export * from './polygon';
 export * from './rectangle';
 export * from './editorsRegistry';
+export * from './Handle';
 
 export { default as Editor } from './Editor.svelte';
-export { default as EditorMount } from './EditorMount.svelte';
-export { default as Handle } from './Handle.svelte';
+export { default as EditorMount } from './EditorMount.svelte';

package/src/annotation/editors/polygon/PolygonEditor.svelte

@@ -1,27 +1,27 @@
-<script lang="ts">
+<script type="ts">
   import { boundsFromPoints } from '../../../model';
-  import type { Polygon, PolygonGeometry, Shape } from '../../../model';
+  import type { Polygon } from '../../../model';
   import type { Transform } from '../../Transform';
   import { Editor, Handle } from '..';
 
   /** Props */
   export let shape: Polygon;
-  export let computedStyle: string | undefined;
+  export let computedStyle: string = undefined;
   export let transform: Transform;
   export let viewportScale: number = 1;
 
   $: geom = shape.geometry;
 
-  const editor = (polygon: Shape, handle: string, delta: [number, number]) => {
-    let points: [number, number][];
+  $: handleSize = 10 / viewportScale;
 
-    const geom = (polygon.geometry) as PolygonGeometry;
+  const editor = (polygon: Polygon, handle: Handle, delta: [number, number]) => {
+    let points: [number, number][];
 
-    if (handle === 'SHAPE') {
-      points = geom.points.map(([x, y]) => [x + delta[0], y + delta[1]]);
+    if (handle === Handle.SHAPE) {
+      points = polygon.geometry.points.map(([x, y]) => [x + delta[0], y + delta[1]]);
     } else {
-      points = geom.points.map(([x, y], idx) =>
-        handle === `HANDLE-${idx}` ? [x + delta[0], y + delta[1]] : [x, y]
+      points = polygon.geometry.points.map(([x, y], idx) =>
+        handle === Handle(idx) ? [x + delta[0], y + delta[1]] : [x, y]
       );
     }
 
@@ -46,19 +46,19 @@
   <polygon
     class="a9s-outer"
     style={computedStyle ? 'display:none;' : undefined}
-    on:pointerdown={grab('SHAPE')}
+    on:pointerdown={grab(Handle.SHAPE)}
     points={geom.points.map(xy => xy.join(',')).join(' ')} />
 
   <polygon
     class="a9s-inner a9s-shape-handle"
     style={computedStyle}
-    on:pointerdown={grab('SHAPE')}
+    on:pointerdown={grab(Handle.SHAPE)}
     points={geom.points.map(xy => xy.join(',')).join(' ')} />
 
   {#each geom.points as point, idx}
-    <Handle 
-      on:pointerdown={grab(`HANDLE-${idx}`)}
-      x={point[0]} y={point[1]} 
-      scale={viewportScale} />
+    <rect 
+      class="a9s-corner-handle"
+      on:pointerdown={grab(Handle(idx))}
+      x={point[0] - handleSize / 2} y={point[1] - handleSize / 2} height={handleSize} width={handleSize} />
   {/each}
 </Editor>