@annotorious/svelte 3.0.0-rc.3 → 3.0.0-rc.30

package/dist/annotorious-svelte.es3.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotorious-svelte.es3.js","sources":["../../annotorious-core/src/state/Selection.ts"],"sourcesContent":["import { writable } from 'svelte/store';\nimport type {  Annotation } from '../model';\nimport type { Store } from './Store';\n   \nexport type Selection = {\n\n  selected: { id: string, editable?: boolean }[],\n\n  pointerEvent?: PointerEvent;\n\n}\n\nexport type SelectionState<T extends Annotation> = ReturnType<typeof createSelectionState<T>>;\n\nexport enum PointerSelectAction {\n\n  EDIT = 'EDIT', // Make annotation target(s) editable on pointer select\n  \n  SELECT = 'SELECT',  // Just select, but don't make editable\n\n  NONE = 'NONE' // Click won't select - annotation is completely inert\n\n}\n\nconst EMPTY: Selection = { selected: [] };\n\nexport const createSelectionState = <T extends Annotation>(\n  store: Store<T>,\n  selectAction: PointerSelectAction | ((a: Annotation) => PointerSelectAction) = PointerSelectAction.EDIT\n) => {\n  const { subscribe, set } = writable<Selection>(EMPTY);\n\n  let currentSelection: Selection = EMPTY;\n\n  subscribe(updated => currentSelection = updated);\n\n  const clear = () => set(EMPTY);\n\n  const isEmpty = () => currentSelection.selected?.length === 0;\n\n  const isSelected = (annotationOrId: T | string) => {\n    if (currentSelection.selected.length === 0)\n      return false;\n\n    const id = typeof annotationOrId === 'string' ? annotationOrId : annotationOrId.id;\n    return currentSelection.selected.some(i => i.id === id);\n  }\n\n  // TODO enable CTRL select\n  const clickSelect = (id: string, pointerEvent: PointerEvent) => {\n    const annotation = store.getAnnotation(id);\n    if (annotation) {\n      const action = onPointerSelect(annotation, selectAction);\n      if (action === PointerSelectAction.EDIT)\n        set({ selected: [{ id, editable: true }], pointerEvent }); \n      else if (action === PointerSelectAction.SELECT)\n        set({ selected: [{ id }], pointerEvent }); \n      else\n        set({ selected: [], pointerEvent });\n    } else {\n      console.warn('Invalid selection: ' + id);\n    }\n  }\n\n  const setSelected = (idOrIds: string | string[], editable: boolean = true) => {\n    const ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds];\n\n    // Remove invalid\n    const annotations = \n      ids.map(id => store.getAnnotation(id)).filter(a => a); \n\n    set({ selected: annotations.map(({ id }) => ({ id, editable })) });\n    \n    if (annotations.length !== ids.length)\n      console.warn('Invalid selection', idOrIds);\n  }\n\n  const removeFromSelection = (ids: string[]) => {\n    if (currentSelection.selected.length === 0)\n      return false;\n\n    const { selected } = currentSelection;\n\n    // Checks which of the given annotations are actually in the selection\n    const toRemove = selected.filter(({ id  }) => ids.includes(id))\n\n    if (toRemove.length > 0)\n      set({ selected: selected.filter(({ id }) => !ids.includes(id)) });\n  }\n\n  // Track store delete and update events\n  store.observe(({ changes }) =>\n    removeFromSelection(changes.deleted.map(a => a.id)));\n\n  return { \n    clear, \n    clickSelect, \n    get selected() { return currentSelection ? [...currentSelection.selected ] : null},\n    get pointerEvent() { return currentSelection ? currentSelection.pointerEvent : null },\n    isEmpty, \n    isSelected, \n    setSelected, \n    subscribe \n  };\n\n}\n\nexport const onPointerSelect = (\n  annotation: Annotation, \n  action?: PointerSelectAction | ((a: Annotation) => PointerSelectAction)\n): PointerSelectAction => (typeof action === 'function') ?\n    (action(annotation) || PointerSelectAction.EDIT) : \n    (action || PointerSelectAction.EDIT);\n"],"names":["PointerSelectAction"],"mappings":"AAcY,IAAAA,sBAAAA,OAEVA,EAAA,OAAO,QAEPA,EAAA,SAAS,UAETA,EAAA,OAAO,QANGA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"annotorious-svelte.es3.js","sources":["../src/osd/OpenSeadragonAnnotator.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import { setContext } from 'svelte';\n  import { type SvelteAnnotator, type SvelteAnnotatorState, toSvelteStore } from '@annotorious/core';\n  import { createOSDAnnotator, type ImageAnnotation } from '@annotorious/openseadragon';\n  import type OpenSeadragon from 'openseadragon';\n\n  /** props **/\n  export let viewer: OpenSeadragon.Viewer;\n  export let opts = {};\n  export let anno: SvelteAnnotator<ImageAnnotation> = undefined;\n\n  $: init(viewer);\n\n  const init = (viewer: OpenSeadragon.Viewer) => {\n    if (viewer) {\n      const annotator = createOSDAnnotator(viewer, opts);\n\n      // Wrap the store for Svelte reactivity\n      const svelteStore = toSvelteStore(annotator.state.store);\n\n      const shim = {\n        ...annotator,\n        state: {\n          ...annotator.state,\n          store: svelteStore\n        } as SvelteAnnotatorState<ImageAnnotation>\n      } as SvelteAnnotator<ImageAnnotation>\n\n      setContext('anno', shim);\n      setContext('viewer', viewer);\n\n      anno = shim;\n    }\n  }\n</script>\n\n{#if viewer}\n  <slot />\n{/if}\n"],"names":["ctx","create_if_block","viewer","$$props","opts","anno","init","annotator","createOSDAnnotator","svelteStore","toSvelteStore","shim","setContext","$$invalidate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoCKA,EAAM,CAAA,KAAAC,EAAAD,CAAA;AAAA;;;;;;;;;;MAANA,EAAM,CAAA;;;;;;;;;;;;;;;;;6CA7BE,QAAAE,EAA4B,IAAAC,KAC5B,MAAAC,IAAI,GAAA,IAAAD,GACJ,EAAA,MAAAE,IAAyC,OAAS,IAAAF;AAIvD,QAAAG,IAAQ,CAAAJ,MAA4B;QACpCA,GAAM;AACF,YAAAK,IAAYC,EAAmBN,GAAQE,CAAI,GAG3CK,IAAcC,EAAcH,EAAU,MAAM,KAAK,GAEjDI,IAAI;AAAA,WACLJ;AAAA,QACH,YACKA,EAAU,OACb,OAAOE,EAAA;AAAA;AAIX,MAAAG,EAAW,QAAQD,CAAI,GACvBC,EAAW,UAAUV,CAAM,GAE3BW,EAAA,GAAAR,IAAOM,CAAI;AAAA;;;;;;SApBZL,EAAKJ,CAAM;AAAA;;;;;;;;"}

package/dist/annotorious-svelte.es4.js

@@ -1,12 +1,130 @@
-import n from "./annotorious-svelte.es14.js";
-const d = (t, e, o, a) => ({
-  id: n(),
-  annotation: t.id,
-  created: o || /* @__PURE__ */ new Date(),
-  creator: a,
-  ...e
-});
+import { safe_not_equal as H, noop as v, component_subscribe as I, action_destroyer as T, is_function as X, run_all as Y } from "./annotorious-svelte.es5.js";
+import { empty as q, insert as y, detach as P, element as x, text as G, attr as L, append as R, listen as _, set_data as U } from "./annotorious-svelte.es6.js";
+import { onMount as z } from "./annotorious-svelte.es8.js";
+import { SvelteComponent as B, init as F } from "./annotorious-svelte.es9.js";
+import "./annotorious-svelte.es10.js";
+import { draggable as J } from "./annotorious-svelte.es13.js";
+import b from "openseadragon";
+/* empty css                        */
+function w(n) {
+  let o, e = (
+    /*$selection*/
+    n[0].selected.map(S).join(", ") + ""
+  ), t, s, r, d;
+  return {
+    c() {
+      o = x("div"), t = G(e), L(o, "class", "a9s-popup a9s-osd-popup svelte-1xuxeat");
+    },
+    m(a, l) {
+      y(a, o, l), R(o, t), r || (d = [
+        T(s = J.call(null, o, {
+          position: { x: (
+            /*left*/
+            n[1]
+          ), y: (
+            /*top*/
+            n[2]
+          ) }
+        })),
+        _(
+          o,
+          "neodrag:start",
+          /*onDragStart*/
+          n[4]
+        ),
+        _(
+          o,
+          "neodrag:end",
+          /*onDragEnd*/
+          n[5]
+        )
+      ], r = !0);
+    },
+    p(a, l) {
+      l & /*$selection*/
+      1 && e !== (e = /*$selection*/
+      a[0].selected.map(S).join(", ") + "") && U(t, e), s && X(s.update) && l & /*left, top*/
+      6 && s.update.call(null, {
+        position: { x: (
+          /*left*/
+          a[1]
+        ), y: (
+          /*top*/
+          a[2]
+        ) }
+      });
+    },
+    d(a) {
+      a && P(o), r = !1, Y(d);
+    }
+  };
+}
+function K(n) {
+  let o, e = (
+    /*$selection*/
+    n[0] && w(n)
+  );
+  return {
+    c() {
+      e && e.c(), o = q();
+    },
+    m(t, s) {
+      e && e.m(t, s), y(t, o, s);
+    },
+    p(t, [s]) {
+      /*$selection*/
+      t[0] ? e ? e.p(t, s) : (e = w(t), e.c(), e.m(o.parentNode, o)) : e && (e.d(1), e = null);
+    },
+    i: v,
+    o: v,
+    d(t) {
+      t && P(o), e && e.d(t);
+    }
+  };
+}
+const S = (n) => n.id;
+function Q(n, o, e) {
+  let t, { state: s } = o, { viewer: r } = o, d, a, l = !1, p;
+  const { selection: u, store: f } = s;
+  I(n, u, (i) => e(0, t = i));
+  const g = (i) => {
+    var c;
+    return ((c = i.selected) == null ? void 0 : c.length) > 0;
+  }, E = () => {
+    l = !0, r.setMouseNavEnabled(!1);
+  }, D = () => {
+    r.setMouseNavEnabled(!0);
+  }, N = () => {
+    p && f.unobserve(p), g(t) && (l = !1, m(t), p = (i) => {
+      l || m(t);
+    }, f.observe(p, {
+      annotations: t.selected.map((i) => i.id)
+    }));
+  }, m = (i) => {
+    const c = i.selected[0].id, O = f.getAnnotation(c), { minX: h, minY: k, maxX: C, maxY: M } = O.target.selector.geometry.bounds, V = 14, j = r.viewport.imageToViewerElementCoordinates(new b.Point(h, k)), A = r.viewport.imageToViewerElementCoordinates(new b.Point(C, M));
+    e(1, d = A.x + V), e(2, a = j.y);
+  };
+  return z(() => {
+    const i = () => {
+      g(t) && !l && m(t);
+    };
+    return r.addHandler("update-viewport", i), () => {
+      r.removeHandler("update-viewport", i);
+    };
+  }), n.$$set = (i) => {
+    "state" in i && e(6, s = i.state), "viewer" in i && e(7, r = i.viewer);
+  }, n.$$.update = () => {
+    n.$$.dirty & /*$selection*/
+    1 && N();
+  }, [t, d, a, u, E, D, s, r];
+}
+class W extends B {
+  constructor(o) {
+    super(), F(this, o, Q, K, H, { state: 6, viewer: 7 });
+  }
+}
+const re = W;
 export {
-  d as createBody
+  re as default
 };
 //# sourceMappingURL=annotorious-svelte.es4.js.map

package/dist/annotorious-svelte.es4.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotorious-svelte.es4.js","sources":["../../annotorious-core/src/utils/annotationUtils.ts"],"sourcesContent":["import { v4 as uuidv4 } from 'uuid';\nimport type { Annotation, AnnotationBody, User } from '../model';\n\n/**\n * Returns all users listed as creators or updaters in any parts of this\n * annotation.\n */\nexport const getContributors = (annotation: Annotation): User[] => {\n  const { creator, updatedBy } = annotation.target;\n\n  const bodyCollaborators = annotation.bodies.reduce((users, body) =>  (\n    [...users, body.creator, body.updatedBy]\n  ), [] as User[]);\n\n  return [\n    creator,\n    updatedBy,\n    ...bodyCollaborators\n  ].filter(u => u); // Remove undefined\n}\n\nexport const createBody = (\n  annotation: Annotation, \n  payload: { [key: string]: any },\n  created?: Date,\n  creator?: User\n): AnnotationBody => ({\n  id: uuidv4(),\n  annotation: annotation.id,\n  created: created || new Date(),\n  creator,\n  ...payload\n});"],"names":["createBody","annotation","payload","created","creator","uuidv4"],"mappings":";AAqBO,MAAMA,IAAa,CACxBC,GACAC,GACAC,GACAC,OACoB;AAAA,EACpB,IAAIC,EAAO;AAAA,EACX,YAAYJ,EAAW;AAAA,EACvB,SAASE,KAAW,oBAAI,KAAK;AAAA,EAC7B,SAAAC;AAAA,EACA,GAAGF;AACL;"}
+{"version":3,"file":"annotorious-svelte.es4.js","sources":["../src/osd/OpenSeadragonPopup.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import { onMount } from 'svelte';\n  import { draggable } from '@neodrag/svelte';\n  import OpenSeadragon from 'openseadragon';\n  import type { Selection, StoreChangeEvent, SvelteAnnotatorState } from '@annotorious/core';\n  import type { ImageAnnotation } from '@annotorious/annotorious';\n\n  export let state: SvelteAnnotatorState<ImageAnnotation>;\n\n  export let viewer: OpenSeadragon.Viewer;\n\n  let left: number;\n\n  let top: number;\n\n  let dragged = false;\n\n  let storeObserver: (event: StoreChangeEvent<ImageAnnotation>) => void;\n\n  const { selection, store } = state; \n\n  const isSelected = (selection: Selection) => selection.selected?.length > 0;\n\n  const onDragStart = () => {\n    dragged = true;\n    viewer.setMouseNavEnabled(false);\n  }\n\n  const onDragEnd = () => {\n    viewer.setMouseNavEnabled(true);\n  }\n\n  $: $selection, onSelect();\n\n  const onSelect = () => {\n    if (storeObserver)\n      store.unobserve(storeObserver);\n\n    if (isSelected($selection)) {\n      dragged = false;\n\n      setPosition($selection);\n\n      storeObserver = (event: StoreChangeEvent<ImageAnnotation>) => {\n        if (!dragged)\n          setPosition($selection);\n      }\n\n      store.observe(storeObserver, { annotations: $selection.selected.map(s => s.id) });\n    }\n  }\n\n  const setPosition = (selection: Selection) => {\n    // Note: this demo popup only supports a single selection\n    const selectedId = selection.selected[0].id;\n    const annotation = store.getAnnotation(selectedId);\n\n    const { minX, minY, maxX, maxY } = annotation.target.selector.geometry.bounds;\n\n    const PADDING = 14;\n\n    const topLeft = viewer.viewport.imageToViewerElementCoordinates(new OpenSeadragon.Point(minX, minY));\n    const bottomRight = viewer.viewport.imageToViewerElementCoordinates(new OpenSeadragon.Point(maxX, maxY));\n\n    // [left, top] = defaultStrategy(annotation, lastPointerDown);\n    left = bottomRight.x + PADDING;\n    top = topLeft.y;\n  }\n\n  onMount(() => {\n    const onUpdateViewport = () => {\n      if (isSelected($selection) && !dragged)\n        setPosition($selection);\n    }\n\n    viewer.addHandler('update-viewport', onUpdateViewport);\n\n    return () => {\n      viewer.removeHandler('update-viewport', onUpdateViewport);\n    }\n  });\n</script>\n\n{#if $selection}\n  <div \n    class=\"a9s-popup a9s-osd-popup\"\n    use:draggable={{ position: { x: left, y: top }}}\n    on:neodrag:start={onDragStart}\n    on:neodrag:end={onDragEnd}>\n    {$selection.selected.map(s => s.id).join(', ')}\n  </div>\n{/if}\n\n<style>\n  .a9s-osd-popup {\n    background-color: #fff;\n    border: 1px solid #a2a2a2;\n    height: 250px;\n    position: absolute;\n    width: 400px;\n    z-index: 1;\n  }\n</style>"],"names":["t_value","ctx","func","insert","target","div","anchor","dirty","set_data","create_if_block","s","state","$$props","viewer","left","top","dragged","storeObserver","selection","store","isSelected","_a","onDragStart","onDragEnd","onSelect","$selection","setPosition","event","selectedId","annotation","minX","minY","maxX","maxY","PADDING","topLeft","OpenSeadragon","bottomRight","$$invalidate","onMount","onUpdateViewport"],"mappings":";;;;;;;;;SAyFKA;AAAA;AAAA,IAAAC,KAAW,SAAS,IAAeC,CAAA,EAAA,KAAK,IAAI,IAAA;AAAA;;;;;;AAL/C,MAAAC,EAMKC,GAAAC,GAAAC,CAAA;;UAJc,YAAY;AAAA;AAAA,YAAGL,EAAM,CAAA;AAAA,aAAA;AAAA;AAAA,YAAGA,EAAG,CAAA;AAAA,YAAA;AAAA;;;;;UAC1BA,EAAW,CAAA;AAAA,QAAA;AAAA;;;;UACbA,EAAS,CAAA;AAAA,QAAA;AAAA;;;AACxB,MAAAM;AAAA,MAAA,KAAAP,OAAAA;AAAA,MAAAC,KAAW,SAAS,IAAeC,CAAA,EAAA,KAAK,IAAI,IAAA,OAAAM,EAAA,GAAAR,CAAA;;QAH5B,YAAY;AAAA;AAAA,UAAGC,EAAM,CAAA;AAAA,WAAA;AAAA;AAAA,UAAGA,EAAG,CAAA;AAAA,UAAA;AAAA;;;;;;;;;;IAH3CA,EAAU,CAAA,KAAAQ,EAAAR,CAAA;AAAA;;;;;;;;;;MAAVA,EAAU,CAAA;;;;;;;;;UAMc,CAAAS,MAAKA,EAAE;;WAlFvB,OAAAC,EAA4C,IAAAC,KAE5C,QAAAC,EAA4B,IAAAD,GAEnCE,GAEAC,GAEAC,IAAU,IAEVC;UAEI,WAAAC,GAAW,OAAAC,EAAK,IAAKR;;QAEvBS,IAAc,CAAAF,MAAyB;;AAAA,aAAAG,IAAAH,EAAU,aAAV,gBAAAG,EAAoB,UAAS;AAAA,KAEpEC,IAAW,MAAA;AACf,IAAAN,IAAU,IACVH,EAAO,mBAAmB,EAAK;AAAA,KAG3BU,IAAS,MAAA;AACb,IAAAV,EAAO,mBAAmB,EAAI;AAAA,KAK1BW,IAAQ,MAAA;AACR,IAAAP,KACFE,EAAM,UAAUF,CAAa,GAE3BG,EAAWK,CAAU,MACvBT,IAAU,IAEVU,EAAYD,CAAU,GAEtBR,IAAiB,CAAAU,MAAwC;MAClDX,KACHU,EAAYD,CAAU;AAAA,OAG1BN,EAAM,QAAQF,GAAa;AAAA,MAAI,aAAaQ,EAAW,SAAS,IAAI,CAAAf,MAAKA,EAAE,EAAE;AAAA;KAI3EgB,IAAe,CAAAR,MAAoB;AAEjC,UAAAU,IAAaV,EAAU,SAAS,CAAC,EAAE,IACnCW,IAAaV,EAAM,cAAcS,CAAU,GAEzC,EAAA,MAAAE,GAAM,MAAAC,GAAM,MAAAC,GAAM,MAAAC,EAAI,IAAKJ,EAAW,OAAO,SAAS,SAAS,QAEjEK,IAAU,IAEVC,IAAUtB,EAAO,SAAS,gCAAoC,IAAAuB,EAAc,MAAMN,GAAMC,CAAI,CAAA,GAC5FM,IAAcxB,EAAO,SAAS,gCAAoC,IAAAuB,EAAc,MAAMJ,GAAMC,CAAI,CAAA;AAGtG,IAAAK,EAAA,GAAAxB,IAAOuB,EAAY,IAAIH,CAAO,QAC9BnB,IAAMoB,EAAQ,CAAC;AAAA;AAGjB,SAAAI,EAAO,MAAA;UACCC,IAAgB,MAAA;AAChB,MAAApB,EAAWK,CAAU,KAAA,CAAMT,KAC7BU,EAAYD,CAAU;AAAA;AAG1B,WAAAZ,EAAO,WAAW,mBAAmB2B,CAAgB;AAGnD,MAAA3B,EAAO,cAAc,mBAAmB2B,CAAgB;AAAA;;;;;SA9C7ChB,EAAQ;AAAA;;;;;;;;"}