@annotorious/annotorious - npm Package Compare versions

Comparing version 3.0.0-rc.16 to 3.0.0-rc.17

dist/annotation/editors/editorsRegistry.d.ts

 import { ShapeType, type Shape } from '../../model';
 import type { SvelteComponent } from 'svelte';
-export declare const getEditor: (shape: Shape) => typeof SvelteComponent;
+export declare const getEditor: (shape: Shape) => typeof SvelteComponent | undefined;
 export declare const registerEditor: (shapeType: ShapeType, editor: typeof SvelteComponent) => Map<ShapeType, typeof SvelteComponent>;
 //# sourceMappingURL=editorsRegistry.d.ts.map

dist/annotation/tools/drawingToolsRegistry.d.ts

@@ -6,3 +6,3 @@ import type { SvelteComponent } from 'svelte';
     drawingMode?: DrawingMode;
-    [key: string]: string;
+    [key: string]: any;
 };
@@ -12,8 +12,8 @@ export declare const listDrawingTools: () => string[];
     tool: typeof SvelteComponent;
-    opts?: DrawingToolOpts;
-};
+    opts?: DrawingToolOpts | undefined;
+} | undefined;
 export declare const registerTool: (name: string, tool: typeof SvelteComponent, opts?: DrawingToolOpts) => Map<string, {
     tool: typeof SvelteComponent;
-    opts?: DrawingToolOpts;
+    opts?: DrawingToolOpts | undefined;
 }>;
 //# sourceMappingURL=drawingToolsRegistry.d.ts.map

dist/annotation/utils/responsive.d.ts

@@ -0,5 +1,6 @@
+/// <reference types="svelte" />
 export declare const enableResponsive: (image: HTMLImageElement | HTMLCanvasElement, svg: SVGSVGElement) => {
     destroy: () => void;
-    subscribe: (this: void, run: import("svelte/store").Subscriber<number>, invalidate?: (value?: number) => void) => import("svelte/store").Unsubscriber;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number> | undefined) => import("svelte/store").Unsubscriber;
 };
 //# sourceMappingURL=responsive.d.ts.map

dist/annotation/utils/styling.d.ts

 import type { DrawingStyle } from '@annotorious/core';
 import type { ImageAnnotation } from '../../model';
-export declare const computeStyle: (annotation: ImageAnnotation, style?: DrawingStyle | ((a: ImageAnnotation) => DrawingStyle)) => string;
+export declare const computeStyle: (annotation: ImageAnnotation, style?: DrawingStyle | ((a: ImageAnnotation) => DrawingStyle) | undefined) => string | undefined;
 //# sourceMappingURL=styling.d.ts.map

dist/index.d.ts

@@ -9,3 +9,3 @@ export * from './annotation';
 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, W3CSelector } from '@annotorious/core';
+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';
 //# sourceMappingURL=index.d.ts.map

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

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

dist/model/w3c/index.d.ts

 export * from './fragment';
 export * from './svg';
+export * from './W3CImageAnnotation';
 export * from './W3CImageFormatAdapter';
 //# sourceMappingURL=index.d.ts.map

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

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

dist/model/w3c/W3CImageFormatAdapter.d.ts

 import type { FormatAdapter, ParseResult, W3CAnnotation } from '@annotorious/core';
 import type { ImageAnnotation } from '../core';
-export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CAnnotation>;
+import type { W3CImageAnnotation } from './W3CImageAnnotation';
+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>;
-export declare const serializeW3CImageAnnotation: (annotation: ImageAnnotation, source: string) => W3CAnnotation;
+export declare const serializeW3CImageAnnotation: (annotation: ImageAnnotation, source: string) => W3CImageAnnotation;
 //# sourceMappingURL=W3CImageFormatAdapter.d.ts.map

dist/state/spatialTree.d.ts

@@ -12,3 +12,3 @@ import type { ImageAnnotationTarget } from '../model';
     clear: () => void;
-    getAt: (x: number, y: number) => ImageAnnotationTarget | null;
+    getAt: (x: number, y: number) => ImageAnnotationTarget | undefined;
     getIntersecting: (x: number, y: number, width: number, height: number) => ImageAnnotationTarget[];
@@ -15,0 +15,0 @@ insert: (target: ImageAnnotationTarget) => void;

package.json

 {
   "name": "@annotorious/annotorious",
-  "version": "3.0.0-rc.16",
+  "version": "3.0.0-rc.17",
   "description": "Add image annotation functionality to any web page with a few lines of JavaScript",
@@ -39,11 +39,11 @@ "author": "Rainer Simon",
   "devDependencies": {
-    "@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"
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "@types/rbush": "^3.0.3",
+    "jsdom": "^23.0.1",
+    "svelte": "^4.2.8",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.7.0",
+    "vitest": "^1.1.1"
   },
@@ -50,0 +50,0 @@ "peerDependencies": {

src/annotation/SVGAnnotationLayerPointerEvent.ts

 import { createEventDispatcher } from 'svelte';
 import type { SvelteImageAnnotationStore } from '../state';
 import type { ImageAnnotation } from '../model';
-import { isTouch } from './utils';
 
@@ -54,3 +53,3 @@ export interface SVGAnnotationLayerPointerEvent {
 
-  return pt.matrixTransform(svg.getScreenCTM().inverse());
+  return pt.matrixTransform(svg.getScreenCTM()!.inverse());
 }

src/annotation/tools/drawingToolsRegistry.ts

@@ -12,6 +12,7 @@ import type { SvelteComponent } from 'svelte';
 
-  [key: string]: string;
+  [key: string]: any;
 
 }
 
+// @ts-ignore
 const REGISTERED = new Map<DrawingTool, { tool: typeof SvelteComponent, opts?: DrawingToolOpts }>([
@@ -18,0 +19,0 @@ ['rectangle', { tool: RubberbandRectangle }],

src/annotation/Transform.ts

@@ -22,3 +22,3 @@ export interface Transform {
   
-    const { x, y } = pt.matrixTransform(svg.getScreenCTM().inverse());
+    const { x, y } = pt.matrixTransform(svg.getScreenCTM()!.inverse());
     return [x, y];
@@ -25,0 +25,0 @@ }

src/annotation/utils/responsive.ts

@@ -45,3 +45,3 @@ import { writable } from 'svelte/store';
   
-    resizeObserver.observe(svg.parentElement);
+    resizeObserver.observe(svg.parentElement!);
   }
@@ -48,0 +48,0 @@

src/Annotorious.ts

@@ -71,3 +71,3 @@ import type { SvelteComponent } from 'svelte';
 
-  img.parentNode.insertBefore(container, img);
+  img.parentNode!.insertBefore(container, img);
   container.appendChild(img);
@@ -79,3 +79,3 @@
 
-  _setTheme(img, container, opts.theme);
+  _setTheme(img, container, opts.theme!);
 
@@ -85,5 +85,5 @@ const annotationLayer = new SVGAnnotationLayer({
     props: { 
-      drawingEnabled: opts.drawingEnabled, 
+      drawingEnabled: Boolean(opts.drawingEnabled), 
       image: img, 
-      preferredDrawingMode: opts.drawingMode,
+      preferredDrawingMode: opts.drawingMode!,
       state, 
@@ -115,4 +115,4 @@ style: opts.style,
     // Unwrap the image
-    container.parentNode.insertBefore(img, container);
-    container.parentNode.removeChild(container);
+    container.parentNode!.insertBefore(img, container);
+    container.parentNode!.removeChild(container);
 
@@ -138,2 +138,3 @@ // Other cleanup actions
 
+    // @ts-ignore
     annotationLayer.$set({ toolName: name })
@@ -140,0 +141,0 @@ }

src/index.ts

@@ -36,4 +36,3 @@ export * from './annotation';
   W3CAnnotationBody,
-  W3CAnnotationTarget,
-  W3CSelector
+  W3CAnnotationTarget
 } from '@annotorious/core';

src/keyboardCommands.ts

@@ -12,3 +12,5 @@ import type { Annotation, UndoStack } from '@annotorious/core';
 
-  const onWinKeyDown = (event: KeyboardEvent) => {
+  const onWinKeyDown = (evt: Event) => {
+    const event = evt as KeyboardEvent;
+    
     if (event.key === 'Z' && event.ctrlKey) {
@@ -21,3 +23,5 @@ undoStack.undo();
 
-  const onMacKeyDown = (event: KeyboardEvent) => {
+  const onMacKeyDown = (evt: Event) => {
+    const event = evt as KeyboardEvent;
+
     if (event.key === 'z' && event.metaKey) {
@@ -24,0 +28,0 @@ if (event.shiftKey) {

src/model/w3c/fragment/FragmentSelector.ts

@@ -1,6 +0,5 @@
-import type { W3CSelector } from '@annotorious/core';
+import type { Rectangle, RectangleGeometry } from '../../core';
 import { ShapeType } from '../../core';
-import type { Rectangle, RectangleGeometry } from '../../core';
 
-export interface FragmentSelector extends W3CSelector {
+export interface FragmentSelector {
 
@@ -12,3 +11,3 @@ type: 'FragmentSelector';
   value: string;
-  
+
 }
@@ -50,3 +49,3 @@
   }
-};
+}
 
@@ -61,2 +60,2 @@ export const serializeFragmentSelector = (geometry: RectangleGeometry): FragmentSelector => {
   };
-};
+}

src/model/w3c/index.ts

 export * from './fragment';
 export * from './svg';
+export * from './W3CImageAnnotation';
 export * from './W3CImageFormatAdapter';

src/model/w3c/svg/SVG.ts

@@ -16,4 +16,3 @@ export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 
-  Array.from(scripts).reverse().forEach(el =>
-    el.parentNode.removeChild(el));
+  Array.from(scripts).reverse().forEach(el => el.parentNode!.removeChild(el));
 
@@ -20,0 +19,0 @@ Array.from(doc.querySelectorAll('*')).forEach(cleanEl);

src/model/w3c/svg/SVGSelector.ts

@@ -1,7 +0,6 @@
-import type { W3CSelector } from '@annotorious/core';
+import type { Ellipse, EllipseGeometry, Polygon, PolygonGeometry, Shape } from '../../core';
 import { boundsFromPoints, ShapeType } from '../../core';
-import type { Ellipse, EllipseGeometry, Polygon, PolygonGeometry, Shape } from '../../core';
-import { SVG_NAMESPACE, insertSVGNamespace, sanitize } from './SVG';
+import { insertSVGNamespace, sanitize, SVG_NAMESPACE } from './SVG';
 
-export interface SVGSelector extends W3CSelector {
+export interface SVGSelector {
 
@@ -11,3 +10,3 @@ type: 'SvgSelector';
   value: string;
-  
+
 }
@@ -33,5 +32,2 @@
   const [a, b, str] = value.match(/(<polygon points=["|'])([^("|')]*)/) || [];
-
-  if (!str) return;
-
   const points = str.split(' ').map((p) => p.split(',').map(parseFloat));
@@ -51,6 +47,6 @@
 
-  const cx = parseFloat(doc.getAttribute('cx'));
-  const cy = parseFloat(doc.getAttribute('cy'));
-  const rx = parseFloat(doc.getAttribute('rx'));
-  const ry = parseFloat(doc.getAttribute('ry'));
+  const cx = parseFloat(doc.getAttribute('cx')!);
+  const cy = parseFloat(doc.getAttribute('cy')!);
+  const rx = parseFloat(doc.getAttribute('rx')!);
+  const ry = parseFloat(doc.getAttribute('ry')!);
 
@@ -83,6 +79,8 @@ const bounds = {
     return parseSVGEllipse(value) as unknown as T;
+  else 
+    throw 'Unsupported SVG shape: ' + value;
 }
 
 export const serializeSVGSelector = (shape: Shape): SVGSelector => {
-  let value: string;
+  let value: string | undefined;
 
@@ -89,0 +87,0 @@ if (shape.type === ShapeType.POLYGON) {

src/model/w3c/W3CImageFormatAdapter.ts

@@ -6,8 +6,9 @@ import { v4 as uuidv4 } from 'uuid';
 import type { ImageAnnotation, RectangleGeometry } from '../core';
-import type { FragmentSelector } from './fragment';
+import type {FragmentSelector } from './fragment';
 import { parseFragmentSelector, serializeFragmentSelector } from './fragment';
 import type { SVGSelector } from './svg';
 import { parseSVGSelector, serializeSVGSelector } from './svg';
+import type { W3CImageAnnotation } from './W3CImageAnnotation';
 
-export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CAnnotation>;
+export type W3CImageFormatAdapter = FormatAdapter<ImageAnnotation, W3CImageAnnotation>;
 
@@ -37,4 +38,3 @@ export const W3CImageFormat = (
     created,
-    updatedBy,
-    updated,
+    modified,
     body, 
@@ -46,10 +46,12 @@ ...rest
 
-  const target = Array.isArray(annotation.target) ? annotation.target[0] : annotation.target;
+  const w3cTarget = Array.isArray(annotation.target) 
+    ? annotation.target[0] : annotation.target;
 
-  const w3cSelector = Array.isArray(target.selector) ? target.selector[0] : target.selector;
+  const w3cSelector = Array.isArray(w3cTarget.selector) 
+    ? w3cTarget.selector[0] : w3cTarget.selector;
 
   const selector = 
-    w3cSelector.type === 'FragmentSelector' ?
+    w3cSelector?.type === 'FragmentSelector' ?
       parseFragmentSelector(w3cSelector as FragmentSelector, invertY) :
-    w3cSelector.type === 'SvgSelector' ?
+    w3cSelector?.type === 'SvgSelector' ?
       parseSVGSelector(w3cSelector as SVGSelector) : undefined;
@@ -65,2 +67,3 @@
         creator: parseW3CUser(creator),
+        updated: modified ? new Date(modified) : undefined,
         ...rest.target,
@@ -72,3 +75,3 @@ annotation: annotationId,
   } : {
-    error: Error(`Unknown selector type: ${w3cSelector.type}`)
+    error: Error(`Invalid selector: ${JSON.stringify(w3cSelector)}`)
   };
@@ -81,3 +84,3 @@
   source: string
-): W3CAnnotation => {
+): W3CImageAnnotation => {
   const { 
@@ -87,4 +90,4 @@ selector,
     created, 
-    updated, 
-    updatedBy, 
+    updated,
+    updatedBy, // Excluded from serialization
     ...rest 
@@ -104,4 +107,5 @@ } = annotation.target;
     body: serializeW3CBodies(annotation.bodies),
+    created: created?.toISOString(),
     creator,
-    created: created?.toISOString(),
+    modified: updated?.toISOString(),
     target: {
@@ -112,3 +116,3 @@ ...rest,
     }
-  };
-};
+  }
+}

src/state/ImageAnnotatorState.ts

@@ -47,7 +47,7 @@ import type { ImageAnnotation, ImageAnnotationTarget } from '../model';
   store.observe(({ changes }) => {
-    tree.set(changes.created.map(a => a.target as ImageAnnotationTarget), false);
+    tree.set((changes.created || []).map(a => a.target as ImageAnnotationTarget), false);
     
-    changes.deleted.forEach(a => tree.remove(a.target as ImageAnnotationTarget));
+    (changes.deleted || []).forEach(a => tree.remove(a.target as ImageAnnotationTarget));
     
-    changes.updated.forEach(({ oldValue, newValue }) =>
+    (changes.updated || []).forEach(({ oldValue, newValue }) =>
       tree.update(oldValue.target, newValue.target));
@@ -54,0 +54,0 @@ });

src/state/spatialTree.ts

@@ -43,3 +43,4 @@ import RBush from 'rbush';
     const item = index.get(target.annotation);
-    tree.remove(item);
+    if (item)
+      tree.remove(item);
     index.delete(target.annotation);
@@ -66,3 +67,3 @@ };
 
-  const getAt = (x: number, y: number): ImageAnnotationTarget | null => {
+  const getAt = (x: number, y: number): ImageAnnotationTarget | undefined => {
     const idxHits = tree.search({
@@ -69,0 +70,0 @@ minX: x,

src/themes/smart/setTheme.ts

@@ -11,3 +11,3 @@ import type { Theme } from '../../AnnotoriousOpts';
     canvas = imageOrCanvas as HTMLCanvasElement;
-    context = canvas.getContext('2d', { willReadFrequently: true });
+    context = canvas.getContext('2d', { willReadFrequently: true })!;
   } else {
@@ -20,3 +20,3 @@ const img = imageOrCanvas as HTMLImageElement;
 
-    context = canvas.getContext('2d', { willReadFrequently: true });
+    context = canvas.getContext('2d', { willReadFrequently: true })!;
     context.drawImage(img, 0, 0, img.width, img.height);
@@ -23,0 +23,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

870935

increased by0.85%

Number of package files

189

increased by1.61%

Lines of code

5761

increased by1.8%

No dependency changes