@realsee/dnalogel 2.1.2-alpha.0 → 2.1.2-alpha.10

package/dist/chunks/es/index.a273f06e.es.js

@@ -0,0 +1,532 @@
+var U = Object.defineProperty;
+var j = (o, n, t) => n in o ? U(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
+var g = (o, n, t) => (j(o, typeof n != "symbol" ? n + "" : n, t), t);
+import { Tween as W, Easing as $ } from "@tweenjs/tween.js";
+import { uuid as q } from "./uuid.676cb2c8.es.js";
+function H() {
+}
+const L = () => Promise.resolve(), k = {
+  __queue: Promise.resolve()
+};
+function M(o = L) {
+  k.__queue = k.__queue.then(o).catch(L);
+}
+function C(o, n, t) {
+  const e = o.x, s = o.y, i = Math.floor(e / n * 1e4) / 1e4, c = Math.floor(s / t * 1e4) / 1e4;
+  return { x: i, y: c };
+}
+function N(o, n, t) {
+  const { x: e, y: s } = o, i = e * n, c = s * t;
+  return { x: i, y: c };
+}
+function b(o) {
+  if (o.length < 2)
+    return {};
+  const n = o.slice(-2), t = n[0], e = {
+    x: (n[0].x + n[1].x) / 2,
+    y: (n[0].y + n[1].y) / 2
+  };
+  return { control: t, end: e };
+}
+function O(o, n, t = H) {
+  new Promise((e) => {
+    setTimeout(() => {
+      t(), e(!0);
+    }, n * o);
+  });
+}
+const I = window, S = window.requestAnimationFrame || I.webkitRequestAnimationFrame || ((o) => setTimeout(o, 16));
+function E(o, n = 0) {
+  n <= 0 ? S(o) : S(() => E(o, n - 1));
+}
+function A(o, n, t, e = $.Linear.None) {
+  const s = new W(o).to(n, t).easing(e).start();
+  function i(c) {
+    !s.update(c) || requestAnimationFrame(i);
+  }
+  return requestAnimationFrame(i), s;
+}
+var m = /* @__PURE__ */ ((o) => (o.Drawline = "Drawline", o.Undo = "Undo", o.Exit = "Exit", o))(m || {});
+const w = Symbol("$$PAINT_BRUSH_EVENT$$");
+function B(o) {
+  return o[w] || (o[w] = {}), o[w];
+}
+function F(o) {
+  o[w] || delete o[w];
+}
+class P {
+  hasListener(n) {
+    const t = B(this);
+    return t && t[n] && t[n].length > 0;
+  }
+  on(n, t, e) {
+    const s = B(this);
+    return s[n] || (s[n] = []), s[n].push([t, e || !1]), () => this.off(n, t);
+  }
+  once(n, t) {
+    return this.on(n, t, !0);
+  }
+  off(n, t) {
+    if (n === void 0) {
+      F(this);
+      return;
+    }
+    const e = B(this);
+    if (e[n] || (e[n] = []), t === void 0) {
+      e[n].length = 0;
+      return;
+    }
+    let s = 0;
+    for (; s < e[n].length && e[n][s][0] !== t; s++)
+      ;
+    s < e[n].length && e[n].splice(s, 1);
+  }
+  emit(n, ...t) {
+    let e = !1;
+    const i = B(this)[n] || [];
+    for (let c of i.slice()) {
+      const [r, u = !1] = c, f = r(...t);
+      u && this.off(n, r), f === !1 && (e = !0);
+    }
+    return e;
+  }
+}
+const R = `
+<style type="text/css">
+
+#_gl_paintBrush {
+position: fixed;
+top: 0;
+bottom: 0;
+left: 0;
+right: 0;
+transform: translateZ(0);
+z-index: 1997;
+pointer-events: none;
+opacity: 0;
+transition: all 500ms;
+}
+
+#_gl_paintBrush.brushing {
+  opacity: 1;
+}
+
+#_gl_paintBrush ._paintBrush-canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+#_gl_paintBrush ._paintBrush-canvas--sync {
+  pointer-events: none;
+  z-index: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+#_gl_paintBrush ._paintBrush-canvas {
+  pointer-events: none;
+  z-index: 1;
+}
+
+#_gl_paintBrush.brushing ._paintBrush-canvas {
+  pointer-events: auto;
+}
+
+#_gl_paintBrush ._paintBrush-ctrl {
+  width: 140px;
+  height: 52px;
+  position: absolute;
+  bottom: 28px;
+  right: 50%;
+  transform: translateX(50%);
+  font-size: 10px;
+  color: white;
+  z-index: 2;
+}
+
+#_gl_paintBrush.brushing ._paintBrush-ctrl {
+  pointer-events: auto;
+}
+
+#_gl_paintBrush ._paintBrush-ctrl ._paintBrush-ctrlinner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 26px;
+  padding: 8px 16px;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
+  background-image: linear-gradient(180deg, hsl(0deg 0% 0% / 57%), hsl(0deg 0% 0% / 70%) 117%);
+}
+
+._paintBrush-ctrlitem {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 38px;
+  height: 38px;
+  cursor: pointer;
+}
+
+._paintBrush-ctrlitem--undo >.brush-icon{
+    background-image: url("//vrlab-static.ljcdn.com/release/web/revoke.ab7694ef.svg");
+    background-size: 100%;
+    width: 22px;
+    height: 22px;
+}
+
+._paintBrush-ctrlitem--close >.brush-icon {
+    background-image: url("//vrlab-static.ljcdn.com/release/web/exit_paintbrush.02bc1341.svg");
+    background-size: 100%;
+    width: 22px;
+    height: 22px;
+}
+
+</style>
+`;
+class z extends P {
+  constructor(t) {
+    super();
+    g(this, "configs");
+    g(this, "clientWidth");
+    g(this, "clientHeight");
+    g(this, "ready", !1);
+    g(this, "uuid", q());
+    g(this, "tween");
+    g(this, "tweening", !1);
+    g(this, "container");
+    g(this, "canvas");
+    g(this, "data", {});
+    g(this, "tempLine", {});
+    this.configs = t, this.clientWidth = document.body.clientWidth, this.clientHeight = document.body.clientHeight, this.container = this.ifInsertToDOM(), this.canvas = {}, this.initCtrl();
+  }
+  get color() {
+    return this.configs.currentColor;
+  }
+  get state() {
+    return this.data;
+  }
+  get dpr() {
+    return this.configs.DPR || 1;
+  }
+  ifInsertToDOM() {
+    if (this.container)
+      return this.container;
+    if (this.configs.container)
+      this.configs.container.id = "_gl_paintBrush", this.container = this.configs.container;
+    else if (document.getElementById("_gl_paintBrush"))
+      this.container = document.getElementById("_gl_paintBrush");
+    else {
+      const t = document.createElement("div");
+      t.id = "_gl_paintBrush", document.body.appendChild(t), this.container = t;
+    }
+    return this.container.innerHTML = R, this.container;
+  }
+  initCanvas(t) {
+    const e = document.createElement("canvas");
+    e.className = t, e.width = this.clientWidth, e.height = this.clientHeight;
+    const s = e.getContext("2d");
+    if (!!s)
+      return s.lineWidth = 5 * this.dpr, s.lineCap = "round", s.lineJoin = "round", this.container.appendChild(e), e;
+  }
+  initCtrl() {
+    const t = document.createElement("div");
+    t.className = "_paintBrush-ctrl";
+    const e = document.createElement("div");
+    e.className = "_paintBrush-ctrlinner";
+    const s = document.createElement("a");
+    s.className = "_paintBrush-ctrlitem _paintBrush-ctrlitem--undo", s.addEventListener("click", (r) => {
+      var h;
+      if (r.stopPropagation(), this.configs.onClickUndo && this.configs.onClickUndo(), !this.canvas[this.uuid] || !this.data[this.uuid] || this.data[this.uuid].length === 0)
+        return;
+      const u = this.data[this.uuid].pop();
+      u && this.emitStateChange({
+        type: m.Undo,
+        color: this.color,
+        ready: this.ready,
+        state: u,
+        uuid: this.uuid
+      });
+      const f = (h = this.canvas[this.uuid]) == null ? void 0 : h.getContext("2d");
+      if (!this.canvas[this.uuid])
+        return;
+      const { width: v, height: l } = this.canvas[this.uuid];
+      f && f.clearRect(0, 0, v, l), this.data[this.uuid].forEach((a) => this.handleDrawLine(this.uuid, a, { withUndo: !0 }));
+    });
+    const i = document.createElement("a");
+    return i.className = "_paintBrush-ctrlitem _paintBrush-ctrlitem--close", i.addEventListener("click", (r) => {
+      r.stopPropagation(), this.closeBrush(), this.configs.onClickClose && this.configs.onClickClose();
+    }), [s, i].forEach((r) => {
+      const u = document.createElement("i");
+      u.className = "brush-icon";
+      const f = document.createElement("span");
+      f.className = "brush-txt", f.innerText = r.className.endsWith("undo") ? this.configs.onUndoText : this.configs.onExitText, r.appendChild(u), r.appendChild(f);
+    }), e.appendChild(s), e.appendChild(i), t.appendChild(e), this.container.appendChild(t), t;
+  }
+  openBrush() {
+    if (this.ready)
+      return;
+    this.canvas[this.uuid] || (this.canvas[this.uuid] = this.initCanvas("_paintBrush-canvas")), this.container.className = "brushing";
+    const t = this.canvas[this.uuid];
+    t.getContext("2d").clearRect(0, 0, t.width, t.height), this.openBrushHandle(), this.ready = !0, this.emit("readyChange", !0);
+  }
+  closeBrush() {
+    !this.ready || (this.container.className = "", this.data = {}, this.tempLine = {}, Object.keys(this.canvas).forEach((t) => {
+      this.canvas[t].ontouchstart = () => !1, this.canvas[t].ontouchmove = () => !1, this.canvas[t].ontouchend = () => !1, this.canvas[t].ontouchcancel = () => !1;
+      const e = this.canvas[t].getContext("2d");
+      e && e.clearRect(0, 0, this.canvas[t].width, this.canvas[t].height);
+    }), this.ready = !1, this.emit("readyChange", !1), this.emitStateChange({
+      type: m.Exit,
+      color: this.color,
+      ready: !1,
+      uuid: this.uuid
+    }));
+  }
+  updateCurrentColor(t) {
+    const e = this.canvas[this.uuid];
+    if (!e)
+      return;
+    const s = e.getContext("2d");
+    !s || (this.configs.currentColor = t, s.strokeStyle = t);
+  }
+  openBrushHandle() {
+    const t = this.canvas[this.uuid];
+    if (!t)
+      return;
+    const e = t.getContext("2d");
+    if (!e)
+      return;
+    const s = this.color || "#6D92FF";
+    e.strokeStyle = s;
+    let i = null, c = [], r, u = [], f = 0;
+    const v = (l, h, a) => {
+      const p = this.color || "#ff0000";
+      e.strokeStyle = p, e.beginPath(), e.moveTo(l.x, l.y), e.quadraticCurveTo(h.x, h.y, a.x, a.y), e.stroke();
+    };
+    t.onmousedown = (l) => {
+      l.preventDefault(), f = Date.now();
+      const h = l.clientX, a = l.clientY;
+      c = [], c.push({ x: h, y: a }), i = { x: h, y: a }, r = C({ x: h, y: a }, this.clientWidth, this.clientHeight), u = [];
+    }, t.onmousemove = (l) => {
+      if (l.preventDefault(), !i)
+        return;
+      const h = Number(l.clientX), a = Number(l.clientY);
+      if (Math.abs(h - i.x) < 5 && Math.abs(a - i.y) < 5 || (c.push({ x: h, y: a }), u.push(C({ x: h, y: a }, this.clientWidth, this.clientHeight)), c.length < 3))
+        return;
+      const { control: p, end: d } = b(c);
+      !p || !d || (v(i, p, d), i = d);
+    }, t.onmouseup = (l) => {
+      if (l.preventDefault(), i = null, c.length < 3)
+        return;
+      this.data[this.uuid] || (this.data[this.uuid] = []);
+      const h = Date.now() - f, a = {
+        move: Object.assign({}, r),
+        uuid: this.uuid,
+        line: [...u],
+        color: this.color,
+        duration: h < 1280 ? h : h < 2e3 ? 1280 : 0
+      };
+      this.data[this.uuid].push(a), E(() => {
+        this.emitStateChange({
+          type: m.Drawline,
+          color: this.color,
+          ready: this.ready,
+          state: a,
+          uuid: this.uuid
+        });
+      });
+    }, t.ontouchstart = (l) => {
+      l.preventDefault(), f = Date.now();
+      const h = l.touches[0].clientX, a = l.touches[0].clientY;
+      c = [], c.push({ x: h, y: a }), i = { x: h, y: a }, console.log("ontouchstart", h, a, i), r = C({ x: h, y: a }, this.clientWidth, this.clientHeight), u = [];
+    }, t.ontouchmove = (l) => {
+      if (l.preventDefault(), !i)
+        return;
+      const h = Number(l.touches[0].clientX), a = Number(l.touches[0].clientY);
+      if (Math.abs(h - i.x) < 5 && Math.abs(a - i.y) < 5 || (c.push({ x: h, y: a }), u.push(C({ x: h, y: a }, this.clientWidth, this.clientHeight)), c.length < 3))
+        return;
+      const { control: p, end: d } = b(c);
+      !p || !d || (v(i, p, d), i = d);
+    }, t.ontouchend = t.ontouchcancel = (l) => {
+      if (l.preventDefault(), i = null, c.length < 3)
+        return;
+      this.data[this.uuid] || (this.data[this.uuid] = []);
+      const h = Date.now() - f, a = {
+        move: Object.assign({}, r),
+        line: [...u],
+        uuid: this.uuid,
+        color: this.color,
+        duration: h < 1280 ? h : h < 2e3 ? 1280 : 0
+      };
+      this.data[this.uuid].push(a), E(() => {
+        this.emitStateChange({
+          type: m.Drawline,
+          color: this.color,
+          ready: this.ready,
+          state: a,
+          uuid: this.uuid
+        });
+      });
+    };
+  }
+  emitStateChange(t, e = !0) {
+    if (t.type !== m.Drawline) {
+      this.emit("stateChange", t, e);
+      return;
+    }
+    const s = Date.now(), i = t.state;
+    if (!i || !i.line)
+      return;
+    const c = Math.ceil(i.line.length / 100);
+    for (let r = 0; r < c; r++) {
+      const u = {
+        uuid: this.uuid,
+        color: this.color,
+        ready: this.ready,
+        type: t.type,
+        state: {
+          uuid: this.uuid,
+          move: i.move,
+          duration: i.duration,
+          color: this.color,
+          line: i.line.slice(r * 100, (r + 1) * 100)
+        },
+        timestamp: s,
+        end: r === c - 1
+      };
+      O(r, 20, () => {
+        this.emit("stateChange", u, e);
+      });
+    }
+  }
+  action(t) {
+    const { ready: e, type: s, uuid: i } = t;
+    if (!e && this.ready) {
+      this.closeBrush();
+      return;
+    }
+    if (e && !this.ready) {
+      this.openBrush();
+      return;
+    }
+    if (!!this.ready)
+      switch (s) {
+        case m.Drawline:
+          const { state: c, timestamp: r, end: u } = t;
+          if (!r || !c)
+            return;
+          this.tempLine[r] = [].concat(this.tempLine[r] || [], c.line), u && (Object.assign(c, { line: this.tempLine[r] }), this.handleDrawLine(i, c, {}, () => delete this.tempLine[r]));
+          break;
+        case m.Undo:
+          this.handleUndo(i);
+          break;
+      }
+  }
+  handleDrawLine(t, e, { withUndo: s = !1 }, i = H) {
+    !e || Object.prototype.toString.call(e) != "[object Object]" || Object.keys(e).length === 0 || (console.log("handleDrawLine", e, e.line), M(() => new Promise((c) => {
+      if (s || (this.canvas[t] || (this.canvas[t] = this.initCanvas("_paintBrush-canvas--sync")), this.data[t] || (this.data[t] = []), this.data[t].push(e)), !this.canvas[t])
+        return;
+      const r = this.canvas[t].getContext("2d");
+      if (!r)
+        return;
+      const { line: u = [], color: f = "black", duration: v = 0, uuid: l } = e, h = N(e.move || {}, this.clientWidth, this.clientHeight);
+      let a = [h];
+      if (r.strokeStyle = f, r.beginPath(), r.moveTo(h.x, h.y), v && !s) {
+        let p = [];
+        const d = this;
+        d.tween = A({ step: 0 }, { step: u.length - 1 }, v).onUpdate(({ step: x }) => {
+          var T;
+          if (d.tweening = !0, !d.ready)
+            return r.clearRect(0, 0, d.canvas[l].width, d.canvas[l].height), (T = d.tween) == null ? void 0 : T.stop();
+          const y = Math.floor(x);
+          if (!p.find((_) => _ === y)) {
+            if (p.push(y), console.log("__debug__", u, u[y], y), a.push(N(u[y], d.clientWidth, d.clientHeight)), a.length < 3)
+              return;
+            const { control: _, end: D } = b(a);
+            if (!_ || !D)
+              return;
+            r.quadraticCurveTo(_.x, _.y, D.x, D.y), r.stroke();
+          }
+        }).onComplete((x) => {
+          d.tween = void 0, d.tweening = !1, p = [], a = [], i && i(), c();
+        });
+      } else {
+        for (let p = 0; p < u.length; p++) {
+          if (a.push(N(u[p], this.clientWidth, this.clientHeight)), a.length < 3)
+            continue;
+          const { control: d, end: x } = b(a);
+          !d || !x || r.quadraticCurveTo(d.x, d.y, x.x, x.y);
+        }
+        r.stroke(), a = [], i && i(), c();
+      }
+    })));
+  }
+  handleUndo(t) {
+    if (console.log("handleUndo", t, this.canvas[t]), !this.canvas[t] || !this.data[t] || this.data[t].length === 0)
+      return;
+    this.data[t].pop();
+    const e = () => {
+      var i;
+      const s = (i = this.canvas[t]) == null ? void 0 : i.getContext("2d");
+      s && s.clearRect(0, 0, this.canvas[t].width, this.canvas[t].height), this.data[t].forEach((c) => this.handleDrawLine(t, c, { withUndo: !0 }));
+    };
+    if (this.tween && this.tweening) {
+      this.tween.stop(), E(e, 60);
+      return;
+    }
+    e();
+  }
+  destroyBrush() {
+    this.closeBrush(), this.ready = !1, this.emit("readyChange", !0);
+  }
+}
+class J {
+  constructor(n = {}) {
+    g(this, "controller");
+    const t = Object.assign({
+      currentColor: "#f44336",
+      onUndoText: "\u56DE\u9000",
+      onExitText: "\u5173\u95ED"
+    }, n);
+    this.controller = new z(t);
+  }
+  on(n, t) {
+    this.controller.on(n, t);
+  }
+  off(n, t) {
+    this.controller.off(n, t);
+  }
+  once(n, t) {
+    this.controller.once(n, t);
+  }
+  show() {
+    this.controller.openBrush();
+  }
+  action(n) {
+    this.controller.action(n);
+  }
+  get state() {
+    return this.controller.state;
+  }
+  get configs() {
+    return this.controller.configs;
+  }
+  dispose() {
+    return this.controller.destroyBrush();
+  }
+  setCurrentColor(n) {
+    this.controller.updateCurrentColor(n);
+  }
+}
+export {
+  J as PaintBrush,
+  m as PaintBrushTypeEnum
+};

package/dist/chunks/es/index.b8fdb59b.es.js

@@ -0,0 +1,50 @@
+var p = Object.defineProperty;
+var c = (t, i, e) => i in t ? p(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e;
+var s = (t, i, e) => (c(t, typeof i != "symbol" ? i + "" : i, e), e);
+import m from "@tweenjs/tween.js";
+class h extends m.Tween {
+  constructor() {
+    super(...arguments);
+    s(this, "disposeMethods", []);
+    s(this, "animationFrameDisposer");
+    s(this, "onDispose", (e) => (this.disposeMethods.push(e), this));
+    s(this, "play", () => (this.start(0), this.animationFrameDisposer = w((e) => this.update(e)), this));
+    s(this, "dispose", () => {
+      var e;
+      this.stop(), (e = this.animationFrameDisposer) == null || e.call(this), this.disposeMethods.forEach((r) => r()), this.disposeMethods = [], m.remove(this);
+    });
+  }
+}
+function g(t, i = m.Easing.Linear.None) {
+  const e = new h({ progress: 0 }).to({ progress: 1 });
+  return t !== void 0 && e.duration(t), i !== void 0 && e.easing(i), e;
+}
+const o = window.requestAnimationFrame || ((t) => setTimeout(t, 16)), l = window.cancelAnimationFrame || clearTimeout;
+function f(t, i = 0) {
+  i <= 0 ? o(t) : o(() => f(t, i - 1));
+}
+function w(t, i = 60) {
+  let e = -1, r = 0, a = -1;
+  const d = 1e3 / i;
+  function u(n) {
+    a === -1 && (a = n), e = o(u), !(n - r < d) && (r = n, t && t(n - a));
+  }
+  return e = o(u), function() {
+    l(e);
+  };
+}
+function A() {
+  const t = Date.now();
+  return new Promise((i) => {
+    o(() => {
+      i(Date.now() - t);
+    });
+  });
+}
+export {
+  h as BetterTween,
+  A as getFrameTime,
+  f as nextFrame,
+  w as requestAnimationFrameInterval,
+  g as tweenProgress
+};