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

package/src/model/w3c/svg/SVG.ts

@@ -13,7 +13,8 @@ export const sanitize = (doc: Element | Document) => {
   // Remove script tags
   const scripts = doc.getElementsByTagName('script');
 
-  Array.from(scripts).reverse().forEach(el => el.parentNode!.removeChild(el));
+  Array.from(scripts).reverse().forEach(el =>
+    el.parentNode.removeChild(el));
 
   Array.from(doc.querySelectorAll('*')).forEach(cleanEl);
 

package/src/model/w3c/svg/SVGSelector.ts

@@ -1,13 +1,14 @@
-import type { Ellipse, EllipseGeometry, Polygon, PolygonGeometry, Shape } from '../../core';
+import type { W3CSelector } from '@annotorious/core';
 import { boundsFromPoints, ShapeType } from '../../core';
-import { insertSVGNamespace, sanitize, SVG_NAMESPACE } from './SVG';
+import type { Ellipse, EllipseGeometry, Polygon, PolygonGeometry, Shape } from '../../core';
+import { SVG_NAMESPACE, insertSVGNamespace, sanitize } from './SVG';
 
-export interface SVGSelector {
+export interface SVGSelector extends W3CSelector {
 
   type: 'SvgSelector';
 
   value: string;
-
+  
 }
 
 const parseSVGXML = (value: string): Element => {
@@ -28,6 +29,9 @@ const parseSVGXML = (value: string): Element => {
 
 const parseSVGPolygon = (value: string): Polygon => {
   const [a, b, str] = value.match(/(<polygon points=["|'])([^("|')]*)/) || [];
+
+  if (!str) return;
+
   const points = str.split(' ').map((p) => p.split(',').map(parseFloat));
 
   return {
@@ -42,10 +46,10 @@ const parseSVGPolygon = (value: string): Polygon => {
 const parseSVGEllipse = (value: string): Ellipse => {
   const doc = parseSVGXML(value);
 
-  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'));
 
   const bounds = {
     minX: cx - rx,
@@ -73,12 +77,10 @@ export const parseSVGSelector = <T extends Shape>(valueOrSelector: SVGSelector |
     return parseSVGPolygon(value) as unknown as T;
   else if (value.includes('<ellipse ')) 
     return parseSVGEllipse(value) as unknown as T;
-  else 
-    throw 'Unsupported SVG shape: ' + value;
 }
 
 export const serializeSVGSelector = (shape: Shape): SVGSelector => {
-  let value: string | undefined;
+  let value: string;
 
   if (shape.type === ShapeType.POLYGON) {
     const geom = shape.geometry as PolygonGeometry;

package/src/state/ImageAnnotatorState.ts

@@ -44,11 +44,11 @@ export const createImageAnnotatorState = <E extends unknown>(
   const viewport = createViewportState();
 
   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));
   });
 

package/src/state/spatialTree.ts

@@ -40,8 +40,7 @@ export const createSpatialTree = () => {
 
   const remove = (target: ImageAnnotationTarget) => {
     const item = index.get(target.annotation);
-    if (item)
-      tree.remove(item);
+    tree.remove(item);
     index.delete(target.annotation);
   };
 
@@ -63,7 +62,7 @@ export const createSpatialTree = () => {
     tree.load(indexedTargets);
   };
 
-  const getAt = (x: number, y: number): ImageAnnotationTarget | undefined => {
+  const getAt = (x: number, y: number): ImageAnnotationTarget | null => {
     const idxHits = tree.search({
       minX: x,
       minY: y,

package/src/themes/dark/index.css

@@ -11,8 +11,8 @@ div[data-theme="dark"] .a9s-annotationlayer .a9s-inner {
   stroke-width: 1px;
 }
 
-rect.a9s-handle,
-div[data-theme="dark"] rect.a9s-handle {
+rect.a9s-corner-handle,
+div[data-theme="dark"] rect.a9s-corner-handle {
   fill: #000;
   rx: 2px;
 }

package/src/themes/light/index.css

@@ -13,8 +13,8 @@ div[data-theme="light"] .a9s-annotationlayer .a9s-inner {
   stroke-width: 1.5px;
 }
 
-rect.a9s-handle,
-div[data-theme="light"] rect.a9s-handle {
+rect.a9s-corner-handle,
+div[data-theme="light"] rect.a9s-corner-handle {
   fill: #fff;
   rx: 1px;
   stroke: rgba(0, 0, 0, 0.45);

package/src/themes/smart/setTheme.ts

@@ -8,7 +8,7 @@ export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
 
   if (imageOrCanvas.nodeName === 'CANVAS') {
     canvas = imageOrCanvas as HTMLCanvasElement;
-    context = canvas.getContext('2d', { willReadFrequently: true })!;
+    context = canvas.getContext('2d', { willReadFrequently: true });
   } else {
     const img = imageOrCanvas as HTMLImageElement;
     // Copy image to in-memory canvas for processing
@@ -16,7 +16,7 @@ export const sampleBrightness = (imageOrCanvas: HTMLElement) => {
     canvas.width = img.width;
     canvas.height = img.height;
 
-    context = canvas.getContext('2d', { willReadFrequently: true })!;
+    context = canvas.getContext('2d', { willReadFrequently: true });
     context.drawImage(img, 0, 0, img.width, img.height);
   }
 

package/dist/annotation/editors/Handle.svelte.d.ts

@@ -1 +0,0 @@
-export { SvelteComponentTyped as default } from 'svelte';

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

@@ -1,11 +0,0 @@
-import type { W3CAnnotation, W3CAnnotationTarget } from '@annotorious/core';
-import type { FragmentSelector } from './fragment';
-import type { SVGSelector } from './svg';
-export interface W3CImageAnnotation extends W3CAnnotation {
-    target: W3CImageAnnotationTarget | W3CImageAnnotationTarget[];
-}
-export interface W3CImageAnnotationTarget extends W3CAnnotationTarget {
-    selector: W3CImageSelector | W3CImageSelector[];
-}
-export type W3CImageSelector = FragmentSelector | SVGSelector;
-//# sourceMappingURL=W3CImageAnnotation.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"W3CImageAnnotation.d.ts","sourceRoot":"","sources":["../../../src/model/w3c/W3CImageAnnotation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IAEvD,MAAM,EAAE,wBAAwB,GAAG,wBAAwB,EAAE,CAAC;CAE/D;AAED,MAAM,WAAW,wBAAyB,SAAQ,mBAAmB;IAEnE,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;CAEjD;AAED,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,WAAW,CAAC"}

package/src/annotation/editors/Handle.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-  import { isTouch } from '../utils';
-
-  /** props **/
-  export let x: number;
-  export let y: number;
-  export let scale: number;
-  export let radius: number = 30;
-
-  let touched = false;
-
-  const onPointerDown = (event: PointerEvent) => {
-    if (event.pointerType === 'touch')
-      touched = true;
-  }
-
-  const onPointerUp = () =>
-    touched = false;
-
-  $: handleSize = 10 / scale;
-</script>
-
-{#if isTouch}
-  <g class="a9s-touch-handle">
-    <circle 
-      cx={x} 
-      cy={y} 
-      r={radius / scale}
-      class="a9s-touch-halo"
-      class:touched={touched}
-      on:pointerdown
-      on:pointerdown={onPointerDown} 
-      on:pointerup={onPointerUp} />
-
-    <rect 
-      class={`a9s-handle ${$$props.class || ''}`.trim()}
-      x={x - handleSize / 2} 
-      y={y - handleSize / 2} 
-      width={handleSize} 
-      height={handleSize}
-      on:pointerdown
-      on:pointerdown={onPointerDown} 
-      on:pointerup={onPointerUp}  />
-  </g>
-{:else}
-  <rect 
-    class={`a9s-handle ${$$props.class || ''}`.trim()}
-    x={x - handleSize / 2} 
-    y={y - handleSize / 2} 
-    width={handleSize} 
-    height={handleSize} 
-    on:pointerdown />
-{/if}
-
-<style>
-  .a9s-touch-halo {
-    fill: transparent;
-    stroke-width: 0;
-  }
-
-  .a9s-touch-halo.touched {
-    fill: rgba(255, 255, 255, 0.25);
-  }
-
-
-</style>

package/src/model/w3c/W3CImageAnnotation.ts

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