med-viewer-sdk 0.1.0

package/src/plugins/openseadragon-selection.js

@@ -0,0 +1,657 @@
+import OpenSeadragon from "openseadragon";
+
+(() => {
+  (function (t) {
+    "use strict";
+    ((t.SelectionOverlay = function (s, c) {
+      (t.Overlay.apply(this, arguments),
+        t.isPlainObject(s)
+          ? (this.rotation = s.location.rotation || 0)
+          : (this.rotation = c.rotation || 0));
+    }),
+      (t.SelectionOverlay.prototype = t.extend(
+        Object.create(t.Overlay.prototype),
+        {
+          drawHTML: function () {
+            (t.Overlay.prototype.drawHTML.apply(this, arguments),
+              (this.style.transform =
+                this.style.transform.replace(/ ?rotate\(.+rad\)/, "") +
+                " rotate(" +
+                this.rotation +
+                "rad)"));
+          },
+          update: function (s) {
+            (t.Overlay.prototype.update.apply(this, arguments),
+              (this.rotation = s.rotation || 0));
+          },
+        },
+      )));
+  })(OpenSeadragon);
+  (function (t) {
+    "use strict";
+    ((t.SelectionRect = function (s, c, g, m, y) {
+      (t.Rect.apply(this, [s, c, g, m]), (this.rotation = y || 0));
+    }),
+      (t.SelectionRect.fromRect = function (s) {
+        return new t.SelectionRect(s.x, s.y, s.width, s.height);
+      }),
+      (t.SelectionRect.prototype = t.extend(Object.create(t.Rect.prototype), {
+        clone: function () {
+          return new t.SelectionRect(
+            this.x,
+            this.y,
+            this.width,
+            this.height,
+            this.rotation,
+          );
+        },
+        equals: function (s) {
+          return (
+            t.Rect.prototype.equals.apply(this, [s]) &&
+            this.rotation === s.rotation
+          );
+        },
+        toString: function () {
+          return (
+            "[" +
+            Math.round(this.x * 100) / 100 +
+            "," +
+            Math.round(this.y * 100) / 100 +
+            "," +
+            Math.round(this.width * 100) / 100 +
+            "x" +
+            Math.round(this.height * 100) / 100 +
+            "@" +
+            Math.round(this.rotation * 100) / 100 +
+            "]"
+          );
+        },
+        swapWidthHeight: function () {
+          let s = this.clone();
+          return (
+            (s.width = this.height),
+            (s.height = this.width),
+            (s.x += (this.width - this.height) / 2),
+            (s.y += (this.height - this.width) / 2),
+            s
+          );
+        },
+        getDegreeRotation: function () {
+          return this.rotation * (180 / Math.PI);
+        },
+        getAngleFromCenter: function (s) {
+          let c = s.minus(this.getCenter());
+          return Math.atan2(c.x, c.y);
+        },
+        round: function () {
+          return new t.SelectionRect(
+            Math.round(this.x),
+            Math.round(this.y),
+            Math.round(this.width),
+            Math.round(this.height),
+            this.rotation,
+          );
+        },
+        normalize: function () {
+          let s = this.clone();
+          return (
+            s.width < 0 && ((s.x += s.width), (s.width *= -1)),
+            s.height < 0 && ((s.y += s.height), (s.height *= -1)),
+            (s.rotation %= Math.PI),
+            s
+          );
+        },
+        fitsIn: function (s) {
+          let c = this.normalize(),
+            g = [
+              c.getTopLeft(),
+              c.getTopRight(),
+              c.getBottomRight(),
+              c.getBottomLeft(),
+            ],
+            m = c.getCenter(),
+            y = c.getDegreeRotation(),
+            f = s.getBottomRight();
+          for (let d = 0; d < 4; d++)
+            if (
+              ((g[d] = g[d].rotate(y, m)),
+              g[d].x < s.x || g[d].x > f.x || g[d].y < s.y || g[d].y > f.y)
+            )
+              return !1;
+          return !0;
+        },
+        reduceRotation: function () {
+          let s;
+          return (
+            this.rotation < Math.PI / -4
+              ? ((s = this.swapWidthHeight()), (s.rotation += Math.PI / 2))
+              : this.rotation > Math.PI / 4
+                ? ((s = this.swapWidthHeight()), (s.rotation -= Math.PI / 2))
+                : (s = this.clone()),
+            s
+          );
+        },
+      })));
+  })(OpenSeadragon);
+  (function (t) {
+    "use strict";
+    if (!t.version || t.version.major < 3)
+      throw new Error(
+        "This version of OpenSeadragonSelection requires OpenSeadragon version 2.0.0+",
+      );
+    ((t.Viewer.prototype.selection = function (i) {
+      return (
+        (!this.selectionInstance || i) &&
+          ((i = i || {}),
+          (i.viewer = this),
+          (this.selectionInstance = new t.Selection(i))),
+        this.selectionInstance
+      );
+    }),
+      (t.Selection = function (i) {
+        (t.extend(
+          !0,
+          this,
+          {
+            viewer: null,
+            isSelecting: !1,
+            buttonActiveImg: !1,
+            rectDone: !0,
+            element: null,
+            toggleButton: null,
+            showSelectionControl: !0,
+            showConfirmDenyButtons: !0,
+            styleConfirmDenyButtons: !0,
+            returnPixelCoordinates: !0,
+            keyboardShortcut: "c",
+            rect: null,
+            allowRotation: !0,
+            startRotated: !1,
+            startRotatedHeight: 0.1,
+            restrictToImage: !1,
+            cropMinimumSize: !1,
+            cropMinimumWidth: 0,
+            cropMinimumHeight: 0,
+            onSelection: null,
+            onSelectionCanceled: null,
+            onSelectionChange: null,
+            onSelectionToggled: null,
+            prefixUrl: null,
+            navImages: {
+              selection: {
+                REST: "selection_rest.png",
+                GROUP: "selection_grouphover.png",
+                HOVER: "selection_hover.png",
+                DOWN: "selection_pressed.png",
+              },
+              selectionConfirm: {
+                REST: "selection_confirm_rest.png",
+                GROUP: "selection_confirm_grouphover.png",
+                HOVER: "selection_confirm_hover.png",
+                DOWN: "selection_confirm_pressed.png",
+              },
+              selectionCancel: {
+                REST: "selection_cancel_rest.png",
+                GROUP: "selection_cancel_grouphover.png",
+                HOVER: "selection_cancel_hover.png",
+                DOWN: "selection_cancel_pressed.png",
+              },
+            },
+            borderStyle: { width: "1px", color: "#fff" },
+            handleStyle: {
+              top: "50%",
+              left: "50%",
+              width: "6px",
+              height: "6px",
+              margin: "-4px 0 0 -4px",
+              background: "#000",
+              border: "1px solid #ccc",
+            },
+            cornersStyle: {
+              width: "6px",
+              height: "6px",
+              background: "#000",
+              border: "1px solid #ccc",
+            },
+          },
+          i,
+        ),
+          t.extend(!0, this.navImages, this.viewer.navImages),
+          this.element ||
+            ((this.element = t.makeNeutralElement("div")),
+            (this.element.style.background = "rgba(0, 0, 0, 0.1)"),
+            (this.element.className = "selection-box")),
+          (this.borders = this.borders || []));
+        let e,
+          n = [];
+        for (let r = 0; r < 4; r++)
+          (this.borders[r] ||
+            ((this.borders[r] = t.makeNeutralElement("div")),
+            (this.borders[r].className = "border-" + r),
+            (this.borders[r].style.position = "absolute"),
+            (this.borders[r].style.width = this.borderStyle.width),
+            (this.borders[r].style.height = this.borderStyle.width),
+            (this.borders[r].style.background = this.borderStyle.color)),
+            (e = t.makeNeutralElement("div")),
+            (e.className = "border-" + r + "-handle"),
+            (e.style.position = "absolute"),
+            (e.style.top = this.handleStyle.top),
+            (e.style.left = this.handleStyle.left),
+            (e.style.width = this.handleStyle.width),
+            (e.style.height = this.handleStyle.height),
+            (e.style.margin = this.handleStyle.margin),
+            (e.style.background = this.handleStyle.background),
+            (e.style.border = this.handleStyle.border),
+            new t.MouseTracker({
+              element: this.borders[r],
+              dragHandler: d.bind(this, r),
+              dragEndHandler: p.bind(this, r),
+            }),
+            (n[r] = t.makeNeutralElement("div")),
+            (n[r].className = "corner-" + r + "-handle"),
+            (n[r].style.position = "absolute"),
+            (n[r].style.width = this.cornersStyle.width),
+            (n[r].style.height = this.cornersStyle.height),
+            (n[r].style.background = this.cornersStyle.background),
+            (n[r].style.border = this.cornersStyle.border),
+            new t.MouseTracker({
+              element: n[r],
+              dragHandler: d.bind(this, r + 0.5),
+              dragEndHandler: p.bind(this, r),
+            }),
+            this.borders[r].appendChild(e),
+            this.element.appendChild(this.borders[r]),
+            setTimeout(this.element.appendChild.bind(this.element, n[r]), 0));
+        ((this.borders[0].style.top = 0),
+          (this.borders[0].style.width = "100%"),
+          (this.borders[1].style.right = 0),
+          (this.borders[1].style.height = "100%"),
+          (this.borders[2].style.bottom = 0),
+          (this.borders[2].style.width = "100%"),
+          (this.borders[3].style.left = 0),
+          (this.borders[3].style.height = "100%"),
+          (n[0].style.top = "-3px"),
+          (n[0].style.left = "-3px"),
+          (n[1].style.top = "-3px"),
+          (n[1].style.right = "-3px"),
+          (n[2].style.bottom = "-3px"),
+          (n[2].style.right = "-3px"),
+          (n[3].style.bottom = "-3px"),
+          (n[3].style.left = "-3px"),
+          this.overlay ||
+            (this.overlay = new t.SelectionOverlay(
+              this.element,
+              this.rect || new t.SelectionRect(),
+            )),
+          (this.innerTracker = new t.MouseTracker({
+            element: this.element,
+            clickTimeThreshold: this.viewer.clickTimeThreshold,
+            clickDistThreshold: this.viewer.clickDistThreshold,
+            dragHandler: t.delegate(this, y),
+            dragEndHandler: t.delegate(this, f),
+            clickHandler: t.delegate(this, m),
+          })),
+          this.viewer.addHandler("canvas-click", m.bind(this)),
+          this.viewer.addHandler("canvas-drag", c.bind(this)),
+          this.viewer.addHandler("canvas-drag-end", g.bind(this)),
+          this.keyboardShortcut &&
+            t.addEvent(
+              this.viewer.container,
+              "keypress",
+              t.delegate(this, b),
+              !1,
+            ));
+        let o = this.prefixUrl || this.viewer.prefixUrl || "",
+          h = this.viewer.buttons && this.viewer.buttonGroup.buttons,
+          a = h ? this.viewer.buttonGroup.buttons[0] : null,
+          u = a ? a.onFocus : null,
+          l = a ? a.onBlur : null;
+        if (
+          (this.showSelectionControl &&
+            ((this.toggleButton = new t.Button({
+              element: this.toggleButton
+                ? t.getElement(this.toggleButton)
+                : null,
+              clickTimeThreshold: this.viewer.clickTimeThreshold,
+              clickDistThreshold: this.viewer.clickDistThreshold,
+              tooltip:
+                t.getString("Tooltips.SelectionToggle") || "Toggle selection",
+              srcRest: o + this.navImages.selection.REST,
+              srcGroup: o + this.navImages.selection.GROUP,
+              srcHover: o + this.navImages.selection.HOVER,
+              srcDown: o + this.navImages.selection.DOWN,
+              onRelease: this.toggleState.bind(this),
+              onFocus: u,
+              onBlur: l,
+            })),
+            h &&
+              (this.viewer.buttonGroup.buttons.push(this.toggleButton),
+              this.viewer.buttonGroup.element.appendChild(
+                this.toggleButton.element,
+              )),
+            this.toggleButton.imgDown &&
+              ((this.buttonActiveImg = this.toggleButton.imgDown.cloneNode(!0)),
+              this.toggleButton.element.appendChild(this.buttonActiveImg))),
+          this.showConfirmDenyButtons)
+        ) {
+          this.confirmButton = new t.Button({
+            element: this.confirmButton
+              ? t.getElement(this.confirmButton)
+              : null,
+            clickTimeThreshold: this.viewer.clickTimeThreshold,
+            clickDistThreshold: this.viewer.clickDistThreshold,
+            tooltip:
+              t.getString("Tooltips.SelectionConfirm") || "Confirm selection",
+            srcRest: o + this.navImages.selectionConfirm.REST,
+            srcGroup: o + this.navImages.selectionConfirm.GROUP,
+            srcHover: o + this.navImages.selectionConfirm.HOVER,
+            srcDown: o + this.navImages.selectionConfirm.DOWN,
+            onRelease: this.confirm.bind(this),
+            onFocus: u,
+            onBlur: l,
+          });
+          let r = this.confirmButton.element;
+          (r.classList.add("confirm-button"),
+            this.element.appendChild(r),
+            (this.cancelButton = new t.Button({
+              element: this.cancelButton
+                ? t.getElement(this.cancelButton)
+                : null,
+              clickTimeThreshold: this.viewer.clickTimeThreshold,
+              clickDistThreshold: this.viewer.clickDistThreshold,
+              tooltip:
+                t.getString("Tooltips.SelectionCancel") || "Cancel selection",
+              srcRest: o + this.navImages.selectionCancel.REST,
+              srcGroup: o + this.navImages.selectionCancel.GROUP,
+              srcHover: o + this.navImages.selectionCancel.HOVER,
+              srcDown: o + this.navImages.selectionCancel.DOWN,
+              onRelease: this.cancel.bind(this),
+              onFocus: u,
+              onBlur: l,
+            })));
+          let w = this.cancelButton.element;
+          (w.classList.add("cancel-button"),
+            this.element.appendChild(w),
+            this.styleConfirmDenyButtons &&
+              ((r.style.position = "absolute"),
+              (r.style.top = "50%"),
+              (r.style.left = "50%"),
+              (r.style.transform = "translate(-100%, -50%)"),
+              (w.style.position = "absolute"),
+              (w.style.top = "50%"),
+              (w.style.left = "50%"),
+              (w.style.transform = "translate(0, -50%)")));
+        }
+        (this.viewer.addHandler("selection", this.onSelection),
+          this.viewer.addHandler("selection_cancel", this.onSelectionCanceled),
+          this.viewer.addHandler("selection_change", this.onSelectionChange),
+          this.viewer.addHandler("selection_toggle", this.onSelectionToggled),
+          this.viewer.addHandler("open", this.draw.bind(this)),
+          this.viewer.addHandler("animation", this.draw.bind(this)),
+          this.viewer.addHandler("resize", this.draw.bind(this)),
+          this.viewer.addHandler("rotate", this.draw.bind(this)));
+      }),
+      t.extend(t.Selection.prototype, t.ControlDock.prototype, {
+        toggleState: function () {
+          return this.setState(!this.isSelecting);
+        },
+        setState: function (i) {
+          return (
+            (this.isSelecting = i),
+            i ? this.draw() : this.undraw(),
+            this.buttonActiveImg &&
+              (this.buttonActiveImg.style.visibility = i
+                ? "visible"
+                : "hidden"),
+            this.viewer.raiseEvent("selection_toggle", { enabled: i }),
+            this
+          );
+        },
+        setAllowRotation: function (i) {
+          this.allowRotation = i;
+        },
+        enable: function () {
+          return this.setState(!0);
+        },
+        disable: function () {
+          return this.setState(!1);
+        },
+        draw: function () {
+          return (
+            this.rect &&
+              (this.overlay.update(this.rect.normalize()),
+              this.overlay.drawHTML(
+                this.viewer.drawer.container,
+                this.viewer.viewport,
+              ),
+              this.viewer.raiseEvent(
+                "selection_change",
+                this.getCurrentRect(),
+              )),
+            this
+          );
+        },
+        undraw: function () {
+          return (this.overlay.destroy(), (this.rect = null), this);
+        },
+        confirm: function () {
+          return (
+            this.rect &&
+              (this.viewer.raiseEvent("selection", this.getCurrentRect()),
+              this.undraw()),
+            this
+          );
+        },
+        getCurrentRect: function () {
+          let i = this.rect.normalize();
+          if (this.returnPixelCoordinates) {
+            let e = this.viewer.viewport.viewportToImageRectangle(i);
+            ((e = t.SelectionRect.fromRect(e).round()),
+              (e.rotation = i.rotation),
+              (i = e));
+          }
+          return i;
+        },
+        cancel: function () {
+          return (
+            this.viewer.raiseEvent("selection_cancel", !1),
+            this.undraw()
+          );
+        },
+      }));
+    function s(i) {
+      if (i.cropMinimumSize === !0) {
+        let e = i.viewer.viewport.imageToViewportCoordinates(
+          i.cropMinimumWidth,
+          i.cropMinimumHeight,
+        );
+        ((i.rect.width = i.rect.width < e.x ? e.x : i.rect.width),
+          (i.rect.height = i.rect.height < e.y ? e.y : i.rect.height));
+      }
+    }
+    function c(i) {
+      if (
+        ((i.preventDefaultAction =
+          this.isSelecting &&
+          (this.rect === null || !this.rectDone || this.allowRotation)),
+        !this.isSelecting)
+      )
+        return;
+      let e = this.viewer.viewport.deltaPointsFromPixels(i.delta, !0),
+        n = this.viewer.viewport.pointFromPixel(i.position, !0),
+        o = new t.Point(n.x - e.x, n.y - e.y);
+      if (this.rect) {
+        let h;
+        if (
+          ((this.restrictToImage || this.cropMinimumSize) &&
+            (h = this.rect.clone()),
+          this.rectDone)
+        ) {
+          if (this.allowRotation) {
+            let u = this.rect.getAngleFromCenter(o),
+              l = this.rect.getAngleFromCenter(n);
+            this.rect.rotation = (this.rect.rotation + u - l) % Math.PI;
+          }
+        } else
+          this.startRotated
+            ? (this.rect = v(
+                this.rotatedStartPoint,
+                n,
+                this.startRotatedHeight,
+              ))
+            : ((this.rect.width += e.x), (this.rect.height += e.y));
+        let a = this.viewer.world.getHomeBounds();
+        this.restrictToImage &&
+          !this.rect.fitsIn(new t.Rect(0, 0, a.width, a.height)) &&
+          (this.rect = h);
+      } else {
+        if (this.restrictToImage) {
+          if (!x(this, o)) return;
+          S(e, n);
+        }
+        (this.startRotated
+          ? ((this.rotatedStartPoint = o),
+            (this.rect = v(o, n, this.startRotatedHeight)))
+          : (this.rect = new t.SelectionRect(o.x, o.y, e.x, e.y)),
+          (this.rectDone = !1));
+      }
+      (s(this), this.draw());
+    }
+    function g() {
+      this.rect !== null &&
+        (this.rect.width < 0 &&
+          ((this.rect.x += this.rect.width),
+          (this.rect.width = Math.abs(this.rect.width))),
+        this.rect.height < 0 &&
+          ((this.rect.y += this.rect.height),
+          (this.rect.height = Math.abs(this.rect.height))),
+        this.viewer.setMouseNavEnabled(!0),
+        (this.rectDone = !0));
+    }
+    function m() {
+      this.viewer.canvas.focus();
+    }
+    function y(i) {
+      t.addClass(this.element, "dragging");
+      let e = this.viewer.viewport.deltaPointsFromPixels(i.delta, !0);
+      ((this.rect.x += e.x), (this.rect.y += e.y));
+      let n = this.viewer.world.getHomeBounds();
+      (this.restrictToImage &&
+        !this.rect.fitsIn(new t.Rect(0, 0, n.width, n.height)) &&
+        ((this.rect.x -= e.x), (this.rect.y -= e.y)),
+        s(this),
+        this.draw());
+    }
+    function f() {
+      t.removeClass(this.element, "dragging");
+    }
+    function d(i, e) {
+      let n = this.rect.getDegreeRotation(),
+        o =
+          this.restrictToImage || this.cropMinimumSize
+            ? this.rect.clone()
+            : null,
+        h = e.delta,
+        a;
+      switch (
+        (n !== 0 &&
+          ((h = h.rotate(-1 * n, new t.Point(0, 0))),
+          (a = this.rect.getCenter())),
+        (h = this.viewer.viewport.deltaPointsFromPixels(h, !0)),
+        i)
+      ) {
+        case 0:
+          ((this.rect.y += h.y), (this.rect.height -= h.y));
+          break;
+        case 1:
+          this.rect.width += h.x;
+          break;
+        case 2:
+          this.rect.height += h.y;
+          break;
+        case 3:
+          ((this.rect.x += h.x), (this.rect.width -= h.x));
+          break;
+        case 0.5:
+          ((this.rect.y += h.y),
+            (this.rect.height -= h.y),
+            (this.rect.x += h.x),
+            (this.rect.width -= h.x));
+          break;
+        case 1.5:
+          ((this.rect.y += h.y),
+            (this.rect.height -= h.y),
+            (this.rect.width += h.x));
+          break;
+        case 2.5:
+          ((this.rect.width += h.x), (this.rect.height += h.y));
+          break;
+        case 3.5:
+          ((this.rect.height += h.y),
+            (this.rect.x += h.x),
+            (this.rect.width -= h.x));
+          break;
+      }
+      if (n !== 0) {
+        let l = this.rect.getCenter();
+        ((h = l.rotate(n, a).minus(l)),
+          (this.rect.x += h.x),
+          (this.rect.y += h.y));
+      }
+      let u = this.viewer.world.getHomeBounds();
+      (this.restrictToImage &&
+        !this.rect.fitsIn(new t.Rect(0, 0, u.width, u.height)) &&
+        (this.rect = o),
+        s(this),
+        this.draw());
+    }
+    function p() {
+      (this.rect.width < 0 &&
+        ((this.rect.x += this.rect.width),
+        (this.rect.width = Math.abs(this.rect.width))),
+        this.rect.height < 0 &&
+          ((this.rect.y += this.rect.height),
+          (this.rect.height = Math.abs(this.rect.height))));
+    }
+    function b(i) {
+      let e = i.keyCode ? i.keyCode : i.charCode;
+      e === 13
+        ? this.confirm()
+        : String.fromCharCode(e) === this.keyboardShortcut &&
+          this.toggleState();
+    }
+    function v(i, e, n) {
+      if (i.x > e.x) {
+        let w = i;
+        ((i = e), (e = w));
+      }
+      let o = e.minus(i),
+        h = i.distanceTo(e),
+        a = -1 * Math.atan2(o.x, o.y) + Math.PI / 2,
+        u = new t.Point(o.x / 2 + i.x, o.y / 2 + i.y),
+        l = new t.SelectionRect(u.x - h / 2, u.y - n / 2, h, n, a),
+        r = new t.Point(0, n);
+      return (
+        (r = r.rotate(l.getDegreeRotation(), new t.Point(0, 0))),
+        (l.x += r.x / 2),
+        (l.y += r.y / 2),
+        l
+      );
+    }
+    function x(i, e) {
+      let n = i.viewer.world.getHomeBounds();
+      return e.x >= 0 && e.x <= n.width && e.y >= 0 && e.y <= n.height;
+    }
+    function S(i, e) {
+      let n;
+      for (let o in { x: 0, y: 0 })
+        ((n = e[o] - i[o]),
+          n < 1 &&
+            n > 0 &&
+            (e[o] > 1
+              ? ((i[o] -= e[o] - 1), (e[o] = 1))
+              : e[o] < 0 && ((i[o] -= e[o]), (e[o] = 0))));
+    }
+  })(OpenSeadragon);
+})();
+//# sourceMappingURL=openseadragonselection.js.map

package/src/types/type.d.ts

@@ -0,0 +1,9 @@
+
+declare module 'annotorious-openseadragon-ld';
+declare module '@silence_top/annotorious-openseadragon-ld';
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+