@annotorious/react 3.0.0-rc.20 → 3.0.0-rc.3

package/dist/annotorious-react.es17.js

@@ -1,35 +1,5 @@
-import b from "openseadragon";
-const L = (h, x) => {
-  const { minX: e, minY: n, maxX: i, maxY: t } = x.target.selector.geometry.bounds, l = h.viewport.imageToViewerElementCoordinates(new b.Point(e, n)), s = h.viewport.imageToViewerElementCoordinates(new b.Point(i, t));
-  return {
-    x: l.x,
-    right: s.x,
-    y: l.y,
-    bottom: s.y,
-    width: s.x - l.x,
-    height: s.y - l.y
-  };
-}, T = (h, x, e, n = 5) => {
-  const i = h.element.getBoundingClientRect(), t = L(h, x), l = t.y - i.y, s = i.right - t.x, w = i.bottom - t.bottom, $ = t.x - i.left, o = e.firstElementChild.getBoundingClientRect(), c = l / o.height, a = s / o.width, g = w / o.height, r = $ / o.width, d = () => {
-    e.style.left = `${t.x}px`, e.style.top = `${t.y - n - o.height}px`;
-  }, f = () => {
-    e.style.left = `${t.right - o.width}px`, e.style.top = `${t.y - n - o.height}px`;
-  }, v = () => {
-    e.style.left = `${t.x - o.width - n}px`, e.style.top = `${t.y}px`;
-  }, B = () => {
-    e.style.left = `${t.right + n}px`, e.style.top = `${t.y}px`;
-  }, R = () => {
-    e.style.left = `${t.x - o.width - n}px`, e.style.top = `${t.bottom - o.height}px`;
-  }, C = () => {
-    e.style.left = `${t.x + t.width + n}px`, e.style.top = `${t.bottom - o.height}px`;
-  }, A = () => {
-    e.style.left = `${t.x}px`, e.style.top = `${t.bottom + n}px`;
-  }, E = () => {
-    e.style.left = `${t.right - o.width}px`, e.style.top = `${t.bottom + n}px`;
-  }, m = [c, a, g, r], y = m.indexOf(Math.max(...m));
-  y === 0 ? a > r ? d() : f() : y === 1 ? c > g ? C() : B() : y === 2 ? a > r ? A() : E() : c > g ? R() : v();
-};
+var L = /* @__PURE__ */ ((E) => (E.LOCAL = "LOCAL", E.REMOTE = "REMOTE", E))(L || {});
 export {
-  T as setPosition
+  L as Origin
 };
 //# sourceMappingURL=annotorious-react.es17.js.map

package/dist/annotorious-react.es17.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotorious-react.es17.js","sources":["../src/openseadragon/setPosition.ts"],"sourcesContent":["import { ImageAnnotation } from '@annotorious/annotorious';\nimport OpenSeadragon from 'openseadragon';\n\nconst getAnnotationDomRect = (viewer: OpenSeadragon.Viewer, annotation: ImageAnnotation) => {\n  // Annotation bounds (image coordinates)\n  const { minX, minY, maxX, maxY } = annotation.target.selector.geometry.bounds;\n\n  // Annotation coordinates - viewer element coordinates\n  const topLeft = viewer.viewport.imageToViewerElementCoordinates(new OpenSeadragon.Point(minX, minY));\n  const bottomRight = viewer.viewport.imageToViewerElementCoordinates(new OpenSeadragon.Point(maxX, maxY));\n\n  // Account for viewer element offset\n  return {\n    x: topLeft.x,\n    right: bottomRight.x,\n    y: topLeft.y, \n    bottom: bottomRight.y,\n    width: bottomRight.x  - topLeft.x,\n    height: bottomRight.y - topLeft.y,\n  };\n}\n\nexport const setPosition = (\n  viewer: OpenSeadragon.Viewer, \n  annotation: ImageAnnotation, \n  popup: HTMLElement,\n  sideOffset: number = 5\n) => {\n  const viewerBounds = viewer.element.getBoundingClientRect();\n  const annoBounds = getAnnotationDomRect(viewer, annotation);\n\n  // Available space above, right, below, left the annotation in the viewport\n  const availableAbove = annoBounds.y - viewerBounds.y;\n  const availableRight = viewerBounds.right - annoBounds.x;\n  const availableBelow = viewerBounds.bottom - annoBounds.bottom;\n  const availableLeft = annoBounds.x - viewerBounds.left;\n\n  // Popup element bounds\n  const popupBounds = popup.firstElementChild.getBoundingClientRect();\n\n  // Eight possible base alignment anchor points\n  //\n  //            topleft        topright\n  //            *                     *\n  // leftdown * |---------------------| * rightdown\n  //            |                     |\n  //            |                     |\n  //            |                     |\n  //   leftup * |---------------------| * rightup\n  //            *                     * \n  //            bottomleft  bottomright\n  //\n  // We'll position the popup at the cardinal direction\n  // with the highest ratio: available space vs. popup size.\n  const ratioAbove = availableAbove / popupBounds.height;\n  const ratioRight = availableRight / popupBounds.width;\n  const ratioBelow = availableBelow / popupBounds.height;\n  const ratioLeft = availableLeft / popupBounds.width;\n\n  const topleft = () => {\n    popup.style.left = `${annoBounds.x}px`;\n    popup.style.top = `${annoBounds.y - sideOffset - popupBounds.height}px`;\n  }\n\n  const topright = () => {\n    popup.style.left = `${annoBounds.right - popupBounds.width}px`;\n    popup.style.top = `${annoBounds.y - sideOffset - popupBounds.height}px`;\n  }\n\n  const leftdown = () => {\n    popup.style.left = `${annoBounds.x - popupBounds.width - sideOffset}px`;\n    popup.style.top = `${annoBounds.y}px`;\n  } \n\n  const rightdown = () => {\n    popup.style.left = `${annoBounds.right + sideOffset}px`;\n    popup.style.top = `${annoBounds.y}px`;\n  }\n\n  const leftup = () => {\n    popup.style.left = `${annoBounds.x - popupBounds.width - sideOffset}px`;\n    popup.style.top = `${annoBounds.bottom - popupBounds.height}px`;\n  }\n\n  const rightup = () => {\n    popup.style.left = `${annoBounds.x + annoBounds.width + sideOffset}px`;\n    popup.style.top = `${annoBounds.bottom - popupBounds.height}px`;\n  }\n\n  const bottomleft = () => {\n    popup.style.left = `${annoBounds.x}px`;\n    popup.style.top = `${annoBounds.bottom + sideOffset}px`;\n  }\n\n  const bottomright = () => {\n    popup.style.left = `${annoBounds.right - popupBounds.width}px`;\n    popup.style.top = `${annoBounds.bottom + sideOffset}px`;\n  }\n\n  const ratios = [ratioAbove, ratioRight, ratioBelow, ratioLeft];\n  const maxIdx = ratios.indexOf(Math.max(...ratios));\n\n  if (maxIdx === 0) {\n    // Main orientation: above\n    if (ratioRight > ratioLeft)\n      topleft();\n    else \n      topright();\n  } else if (maxIdx === 1) {\n    // Main orientation: right\n    if (ratioAbove > ratioBelow)\n      rightup();\n    else\n      rightdown();\n  } else if (maxIdx === 2) {\n    // Main orientation: below\n    if (ratioRight > ratioLeft)\n      bottomleft();\n    else\n      bottomright();\n  } else {\n    // Main orientation: left\n    if (ratioAbove > ratioBelow)\n      leftup();\n    else \n      leftdown();\n  }\n}"],"names":["getAnnotationDomRect","viewer","annotation","minX","minY","maxX","maxY","topLeft","OpenSeadragon","bottomRight","setPosition","popup","sideOffset","viewerBounds","annoBounds","availableAbove","availableRight","availableBelow","availableLeft","popupBounds","ratioAbove","ratioRight","ratioBelow","ratioLeft","topleft","topright","leftdown","rightdown","leftup","rightup","bottomleft","bottomright","ratios","maxIdx"],"mappings":";AAGA,MAAMA,IAAuB,CAACC,GAA8BC,MAAgC;AAEpF,QAAA,EAAE,MAAAC,GAAM,MAAAC,GAAM,MAAAC,GAAM,MAAAC,MAASJ,EAAW,OAAO,SAAS,SAAS,QAGjEK,IAAUN,EAAO,SAAS,gCAAgC,IAAIO,EAAc,MAAML,GAAMC,CAAI,CAAC,GAC7FK,IAAcR,EAAO,SAAS,gCAAgC,IAAIO,EAAc,MAAMH,GAAMC,CAAI,CAAC;AAGhG,SAAA;AAAA,IACL,GAAGC,EAAQ;AAAA,IACX,OAAOE,EAAY;AAAA,IACnB,GAAGF,EAAQ;AAAA,IACX,QAAQE,EAAY;AAAA,IACpB,OAAOA,EAAY,IAAKF,EAAQ;AAAA,IAChC,QAAQE,EAAY,IAAIF,EAAQ;AAAA,EAAA;AAEpC,GAEaG,IAAc,CACzBT,GACAC,GACAS,GACAC,IAAqB,MAClB;AACG,QAAAC,IAAeZ,EAAO,QAAQ,sBAAsB,GACpDa,IAAad,EAAqBC,GAAQC,CAAU,GAGpDa,IAAiBD,EAAW,IAAID,EAAa,GAC7CG,IAAiBH,EAAa,QAAQC,EAAW,GACjDG,IAAiBJ,EAAa,SAASC,EAAW,QAClDI,IAAgBJ,EAAW,IAAID,EAAa,MAG5CM,IAAcR,EAAM,kBAAkB,sBAAsB,GAgB5DS,IAAaL,IAAiBI,EAAY,QAC1CE,IAAaL,IAAiBG,EAAY,OAC1CG,IAAaL,IAAiBE,EAAY,QAC1CI,IAAYL,IAAgBC,EAAY,OAExCK,IAAU,MAAM;AACpB,IAAAb,EAAM,MAAM,OAAO,GAAGG,EAAW,CAAC,MAClCH,EAAM,MAAM,MAAM,GAAGG,EAAW,IAAIF,IAAaO,EAAY,MAAM;AAAA,EAAA,GAG/DM,IAAW,MAAM;AACrB,IAAAd,EAAM,MAAM,OAAO,GAAGG,EAAW,QAAQK,EAAY,KAAK,MAC1DR,EAAM,MAAM,MAAM,GAAGG,EAAW,IAAIF,IAAaO,EAAY,MAAM;AAAA,EAAA,GAG/DO,IAAW,MAAM;AACrB,IAAAf,EAAM,MAAM,OAAO,GAAGG,EAAW,IAAIK,EAAY,QAAQP,CAAU,MACnED,EAAM,MAAM,MAAM,GAAGG,EAAW,CAAC;AAAA,EAAA,GAG7Ba,IAAY,MAAM;AACtB,IAAAhB,EAAM,MAAM,OAAO,GAAGG,EAAW,QAAQF,CAAU,MACnDD,EAAM,MAAM,MAAM,GAAGG,EAAW,CAAC;AAAA,EAAA,GAG7Bc,IAAS,MAAM;AACnB,IAAAjB,EAAM,MAAM,OAAO,GAAGG,EAAW,IAAIK,EAAY,QAAQP,CAAU,MACnED,EAAM,MAAM,MAAM,GAAGG,EAAW,SAASK,EAAY,MAAM;AAAA,EAAA,GAGvDU,IAAU,MAAM;AACpB,IAAAlB,EAAM,MAAM,OAAO,GAAGG,EAAW,IAAIA,EAAW,QAAQF,CAAU,MAClED,EAAM,MAAM,MAAM,GAAGG,EAAW,SAASK,EAAY,MAAM;AAAA,EAAA,GAGvDW,IAAa,MAAM;AACvB,IAAAnB,EAAM,MAAM,OAAO,GAAGG,EAAW,CAAC,MAClCH,EAAM,MAAM,MAAM,GAAGG,EAAW,SAASF,CAAU;AAAA,EAAA,GAG/CmB,IAAc,MAAM;AACxB,IAAApB,EAAM,MAAM,OAAO,GAAGG,EAAW,QAAQK,EAAY,KAAK,MAC1DR,EAAM,MAAM,MAAM,GAAGG,EAAW,SAASF,CAAU;AAAA,EAAA,GAG/CoB,IAAS,CAACZ,GAAYC,GAAYC,GAAYC,CAAS,GACvDU,IAASD,EAAO,QAAQ,KAAK,IAAI,GAAGA,CAAM,CAAC;AAEjD,EAAIC,MAAW,IAETZ,IAAaE,IACPC,MAECC,MACFQ,MAAW,IAEhBb,IAAaE,IACPO,MAEEF,MACHM,MAAW,IAEhBZ,IAAaE,IACJO,MAECC,MAGVX,IAAaE,IACRM,MAEEF;AAEf;"}
+{"version":3,"file":"annotorious-react.es17.js","sources":["../../annotorious-core/src/state/StoreObserver.ts"],"sourcesContent":["import type { Annotation, AnnotationBody, AnnotationTarget } from '../model';\nimport { diffAnnotations } from '../utils';\n\n/** Interface for listening to changes in the annotation store **/\nexport interface StoreObserver<T extends Annotation> { \n\n  onChange: { (event: StoreChangeEvent<T>): void };\n\n  options: StoreObserveOptions;\n\n}\n\n/** A change event fired when the store state changes **/\nexport interface StoreChangeEvent<T extends Annotation> {\n\n  origin: Origin;\n\n  changes: ChangeSet<T>;\n\n  state: T[];\n\n}\n\nexport interface ChangeSet<T extends Annotation> {\n\n  created?: T[];\n\n  deleted?: T[];\n\n  updated?: Update<T>[];\n\n}\n\nexport interface Update<T extends Annotation> {\n\n  oldValue: T;\n\n  newValue: T;\n\n  bodiesCreated?: AnnotationBody[];\n\n  bodiesDeleted?: AnnotationBody[];\n\n  bodiesUpdated?: Array<{ oldBody: AnnotationBody, newBody: AnnotationBody }>;\n\n  targetUpdated?: { oldTarget: AnnotationTarget, newTarget: AnnotationTarget};\n\n}\n\n/** Options to control which events the observer wants to get notified about **/\nexport interface StoreObserveOptions {\n\n  // Observe changes on targets, bodies or both?\n  ignore?: Ignore;\n\n  // Observe changes on one more specific annotations\n  annotations?: string | string[];\n\n  // Observer changes only for a specific origin\n  origin?: Origin\n\n}\n\n/** Allows the observer to ignore certain event types **/\nexport enum Ignore { \n\n  // Don't notify this observer for changes that involve bodies only\n  BODY_ONLY = 'BODY_ONLY',\n\n  // Don't notify for changes on targets only\n  TARGET_ONLY = 'TARGET_ONLY'\n\n}\n\n/** Allows the observer to listen only for events that originated locally or from a remote source **/\nexport enum Origin { \n  \n  LOCAL = 'LOCAL', \n  \n  REMOTE = 'REMOTE' \n\n}\n\n/** Tests if this observer should be notified about this event **/\nexport const shouldNotify = <T extends Annotation>(observer: StoreObserver<T>, event: StoreChangeEvent<T>) => {\n  const { changes, origin } = event;\n\n  const isRelevantOrigin = \n    !observer.options.origin || observer.options.origin === origin;\n\n  if (!isRelevantOrigin)\n    return false;\n\n  if (observer.options.ignore) {\n    const { ignore } = observer.options;\n\n    // Shorthand\n    const has = (arg: any[]) => arg?.length > 0;\n\n    const hasAnnotationChanges =\n      has(changes.created) || has(changes.deleted);\n\n    if (!hasAnnotationChanges) {\n      const hasBodyChanges =\n        changes.updated?.some(u => has(u.bodiesCreated) || has(u.bodiesDeleted) || has(u.bodiesUpdated));\n    \n      const hasTargetChanges = \n        changes.updated?.some(u => u.targetUpdated);\n\n      if (ignore === Ignore.BODY_ONLY && hasBodyChanges && !hasTargetChanges)\n        return false;\n\n      if (ignore === Ignore.TARGET_ONLY && hasTargetChanges && !hasBodyChanges)\n        return false;\n    }\n  }\n\n  if (observer.options.annotations) {\n    // This observer has a filter set on specific annotations - check affected\n    const affectedAnnotations = new Set([\n      ...changes.created.map(a => a.id),\n      ...changes.deleted.map(a => a.id),\n      ...changes.updated.map(({ oldValue }) => oldValue.id)\n    ]);\n\n    const observed = Array.isArray(observer.options.annotations) ?\n      observer.options.annotations : [ observer.options.annotations ];\n\n    return Boolean(observed.find(id => affectedAnnotations.has(id)));\n  } else {\n    return true;\n  }\n\n}\n\nexport const mergeChanges = <T extends Annotation>(changes: ChangeSet<T>, toMerge: ChangeSet<T>) => {\n\n  const previouslyCreatedIds = new Set((changes.created || []).map(a => a.id));\n  const previouslyUpdatedIds = new Set((changes.updated || []).map(({ newValue })=> newValue.id));\n\n  const createdIds = new Set((toMerge.created || []).map(a => a.id));\n  const deletedIds = new Set((toMerge.deleted || []).map(a => a.id));\n  const updatedIds = new Set((toMerge.updated || []).map(({ oldValue }) => oldValue.id));\n\n  // Updates that will be merged into create or previous update events\n  const mergeableUpdates = new Set((toMerge.updated || [])\n    .filter(({ oldValue }) => previouslyCreatedIds.has(oldValue.id) || previouslyUpdatedIds.has(oldValue.id))\n    .map(({ oldValue }) => oldValue.id ));\n\n  // * created *\n  // - drop created that were then deleted\n  // - merge any updates on created\n  // - append newly created\n  const created = [\n    ...(changes.created || [])\n      .filter(a => !deletedIds.has(a.id))\n      .map(a => updatedIds.has(a.id) \n        ? toMerge.updated.find(({ oldValue }) => oldValue.id === a.id).newValue\n        : a),\n    ...(toMerge.created || [])\n  ];\n\n  // * deleted *\n  // - drop deleted that were later re-created (redo action!)\n  // - append newly deleted, but remove any that delete annotations \n  //   that were created in the same round\n  const deleted = [\n    ...(changes.deleted || [])\n      .filter(a => !createdIds.has(a.id)),\n    ...(toMerge.deleted || []) \n      .filter(a => !previouslyCreatedIds.has(a.id))\n  ] \n\n  // * updated *\n  // - drop updates on deleted annotations\n  // - merge any updates that override previous ones\n  // - append new updates, but remove any that were merged\n  const updated = [\n    ...(changes.updated || [])\n      .filter(({ newValue }) => !deletedIds.has(newValue.id))\n      .map(update => {\n        const { oldValue, newValue } = update;\n        if (updatedIds.has(newValue.id)) {\n          const updated = toMerge.updated.find(u => u.oldValue.id === newValue.id).newValue;\n          return diffAnnotations(oldValue, updated);\n        } else {\n          return update;\n        }\n      }),\n    ...(toMerge.updated || []).filter(({ oldValue }) => !mergeableUpdates.has(oldValue.id))\n  ]\n\n  return { created, deleted, updated };\n}"],"names":["Origin"],"mappings":"AA2EY,IAAAA,sBAAAA,OAEVA,EAAA,QAAQ,SAERA,EAAA,SAAS,UAJCA,IAAAA,KAAA,CAAA,CAAA;"}