@realsee/dnalogel 2.0.3 → 2.0.4-dev.1

package/libs/components/PaintBrush/Controller.js

@@ -1,575 +1,309 @@
-import { queue, execInterval, transformCoords, unTransformCoords, getQuadraticCurvePoint, noop, nextFrame, } from './utils';
-import tween from './tween';
-import { PaintBrushTypeEnum, } from './typings';
-import { Subscribe } from './Subscribe';
-import { uuid } from '../../shared-utils/uuid';
-import PaintBrushStyle from './style';
-export class Controller extends Subscribe {
-    constructor(configs) {
-        super();
-        Object.defineProperty(this, "configs", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "clientWidth", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "clientHeight", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "ready", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "uuid", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: uuid()
-        });
-        Object.defineProperty(this, "tween", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "tweening", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "container", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "canvas", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "data", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {}
-        });
-        Object.defineProperty(this, "tempLine", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {}
-        });
-        this.configs = configs;
-        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;
+var H = Object.defineProperty;
+var L = (v, p, t) => p in v ? H(v, p, { enumerable: !0, configurable: !0, writable: !0, value: t }) : v[p] = t;
+var f = (v, p, t) => (L(v, typeof p != "symbol" ? p + "" : p, t), t);
+import { transformCoords as w, getQuadraticCurvePoint as b, nextFrame as D, execInterval as N, queue as T, unTransformCoords as E, noop as S } from "./utils.js";
+import W from "./tween.js";
+import { PaintBrushTypeEnum as g } from "./typings.js";
+import { Subscribe as U } from "./Subscribe.js";
+import k from "../../shared-utils/uuid.js";
+import M from "./style.js";
+import "@tweenjs/tween.js";
+class Y extends U {
+  constructor(t) {
+    super();
+    f(this, "configs");
+    f(this, "clientWidth");
+    f(this, "clientHeight");
+    f(this, "ready", !1);
+    f(this, "uuid", k());
+    f(this, "tween");
+    f(this, "tweening", !1);
+    f(this, "container");
+    f(this, "canvas");
+    f(this, "data", {});
+    f(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;
     }
-    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')) {
-            const container = document.createElement('div');
-            container.id = '_gl_paintBrush';
-            document.body.appendChild(container);
-            this.container = container;
-        }
-        else {
-            this.container = document.getElementById('_gl_paintBrush');
-        }
-        this.container.innerHTML = PaintBrushStyle;
-        return this.container;
-    }
-    /**
-     *
-     * @param className 初始化画板
-     * @returns
-     */
-    initCanvas(className) {
-        const canvas = document.createElement('canvas');
-        canvas.className = className;
-        canvas.width = this.clientWidth;
-        canvas.height = this.clientHeight;
-        const ctx = canvas.getContext('2d');
-        if (!ctx)
-            return;
-        ctx.lineWidth = 5 * this.dpr;
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
-        this.container.appendChild(canvas);
-        return canvas;
-    }
-    /**
-     * 初始化操作面板
-     * @returns
-     */
-    initCtrl() {
-        const ctrl = document.createElement('div');
-        ctrl.className = '_paintBrush-ctrl';
-        const ctrl_inner = document.createElement('div');
-        ctrl_inner.className = '_paintBrush-ctrlinner';
-        const a_undo = document.createElement('a');
-        a_undo.className = '_paintBrush-ctrlitem _paintBrush-ctrlitem--undo';
-        a_undo.addEventListener('click', (e) => {
-            var _a;
-            e.stopPropagation();
-            // 点击撤回：供埋点使用
-            if (this.configs.onClickUndo) {
-                this.configs.onClickUndo();
-            }
-            if (!this.canvas[this.uuid] || !this.data[this.uuid] || this.data[this.uuid].length === 0) {
-                return;
-            }
-            const popState = this.data[this.uuid].pop();
-            if (popState) {
-                this.emitStateChange({
-                    type: PaintBrushTypeEnum.Undo,
-                    color: this.color,
-                    ready: this.ready,
-                    state: popState,
-                    uuid: this.uuid,
-                });
-            }
-            const $ctx = (_a = this.canvas[this.uuid]) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-            if (!this.canvas[this.uuid]) {
-                return;
-            }
-            const { width, height } = this.canvas[this.uuid];
-            if ($ctx) {
-                $ctx.clearRect(0, 0, width, height);
-            }
-            this.data[this.uuid].forEach((ld) => this.handleDrawLine(this.uuid, ld, { withUndo: true }));
-        });
-        const a_close = document.createElement('a');
-        a_close.className = '_paintBrush-ctrlitem _paintBrush-ctrlitem--close';
-        a_close.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.closeBrush();
-            // 点击关闭：供埋点使用
-            if (this.configs.onClickClose) {
-                this.configs.onClickClose();
-            }
-        });
-        const $A = [a_undo, a_close];
-        $A.forEach(($a) => {
-            const $i = document.createElement('i');
-            $i.className = 'brush-icon';
-            const $span = document.createElement('span');
-            $span.className = 'brush-txt';
-            $span.innerText = $a.className.endsWith('undo') ? this.configs.onUndoText : this.configs.onExitText;
-            $a.appendChild($i);
-            $a.appendChild($span);
-        });
-        ctrl_inner.appendChild(a_undo);
-        ctrl_inner.appendChild(a_close);
-        ctrl.appendChild(ctrl_inner);
-        this.container.appendChild(ctrl);
-        return ctrl;
-    }
-    openBrush() {
-        if (this.ready)
-            return;
-        if (!this.canvas[this.uuid]) {
-            this.canvas[this.uuid] = this.initCanvas('_paintBrush-canvas');
-        }
-        this.container.className = 'brushing';
-        const $curCanvas = this.canvas[this.uuid];
-        const $ctx = $curCanvas.getContext('2d');
-        $ctx.clearRect(0, 0, $curCanvas.width, $curCanvas.height);
-        this.openBrushHandle();
-        this.ready = true;
-        this.emit('readyChange', true);
-    }
-    closeBrush() {
-        if (!this.ready)
-            return;
-        this.container.className = '';
-        this.data = {};
-        this.tempLine = {};
-        Object.keys(this.canvas).forEach((key) => {
-            this.canvas[key].ontouchstart = () => false;
-            this.canvas[key].ontouchmove = () => false;
-            this.canvas[key].ontouchend = () => false;
-            this.canvas[key].ontouchcancel = () => false;
-            const $ctx = this.canvas[key].getContext('2d');
-            if ($ctx) {
-                $ctx.clearRect(0, 0, this.canvas[key].width, this.canvas[key].height);
-            }
+    return this.container.innerHTML = M, this.container;
+  }
+  initCanvas(t) {
+    const e = document.createElement("canvas");
+    e.className = t, e.width = this.clientWidth, e.height = this.clientHeight;
+    const h = e.getContext("2d");
+    if (!!h)
+      return h.lineWidth = 5 * this.dpr, h.lineCap = "round", h.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 h = document.createElement("a");
+    h.className = "_paintBrush-ctrlitem _paintBrush-ctrlitem--undo", h.addEventListener("click", (s) => {
+      var a;
+      if (s.stopPropagation(), this.configs.onClickUndo && this.configs.onClickUndo(), !this.canvas[this.uuid] || !this.data[this.uuid] || this.data[this.uuid].length === 0)
+        return;
+      const c = this.data[this.uuid].pop();
+      c && this.emitStateChange({
+        type: g.Undo,
+        color: this.color,
+        ready: this.ready,
+        state: c,
+        uuid: this.uuid
+      });
+      const d = (a = this.canvas[this.uuid]) == null ? void 0 : a.getContext("2d");
+      if (!this.canvas[this.uuid])
+        return;
+      const { width: m, height: o } = this.canvas[this.uuid];
+      d && d.clearRect(0, 0, m, o), this.data[this.uuid].forEach((n) => this.handleDrawLine(this.uuid, n, { withUndo: !0 }));
+    });
+    const i = document.createElement("a");
+    return i.className = "_paintBrush-ctrlitem _paintBrush-ctrlitem--close", i.addEventListener("click", (s) => {
+      s.stopPropagation(), this.closeBrush(), this.configs.onClickClose && this.configs.onClickClose();
+    }), [h, i].forEach((s) => {
+      const c = document.createElement("i");
+      c.className = "brush-icon";
+      const d = document.createElement("span");
+      d.className = "brush-txt", d.innerText = s.className.endsWith("undo") ? this.configs.onUndoText : this.configs.onExitText, s.appendChild(c), s.appendChild(d);
+    }), e.appendChild(h), 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: g.Exit,
+      color: this.color,
+      ready: !1,
+      uuid: this.uuid
+    }));
+  }
+  updateCurrentColor(t) {
+    const e = this.canvas[this.uuid];
+    if (!e)
+      return;
+    const h = e.getContext("2d");
+    !h || (this.configs.currentColor = t, h.strokeStyle = t);
+  }
+  openBrushHandle() {
+    const t = this.canvas[this.uuid];
+    if (!t)
+      return;
+    const e = t.getContext("2d");
+    if (!e)
+      return;
+    const h = this.color || "#6D92FF";
+    e.strokeStyle = h;
+    let i = null, r = [], s, c = [], d = 0;
+    const m = (o, a, n) => {
+      const l = this.color || "#ff0000";
+      e.strokeStyle = l, e.beginPath(), e.moveTo(o.x, o.y), e.quadraticCurveTo(a.x, a.y, n.x, n.y), e.stroke();
+    };
+    t.onmousedown = (o) => {
+      o.preventDefault(), d = Date.now();
+      const a = o.clientX, n = o.clientY;
+      r = [], r.push({ x: a, y: n }), i = { x: a, y: n }, s = w({ x: a, y: n }, this.clientWidth, this.clientHeight), c = [];
+    }, t.onmousemove = (o) => {
+      if (o.preventDefault(), !i)
+        return;
+      const a = Number(o.clientX), n = Number(o.clientY);
+      if (Math.abs(a - i.x) < 5 && Math.abs(n - i.y) < 5 || (r.push({ x: a, y: n }), c.push(w({ x: a, y: n }, this.clientWidth, this.clientHeight)), r.length < 3))
+        return;
+      const { control: l, end: u } = b(r);
+      !l || !u || (m(i, l, u), i = u);
+    }, t.onmouseup = (o) => {
+      if (o.preventDefault(), i = null, r.length < 3)
+        return;
+      this.data[this.uuid] || (this.data[this.uuid] = []);
+      const a = Date.now() - d, n = {
+        move: Object.assign({}, s),
+        uuid: this.uuid,
+        line: [...c],
+        color: this.color,
+        duration: a < 1280 ? a : a < 2e3 ? 1280 : 0
+      };
+      this.data[this.uuid].push(n), D(() => {
+        this.emitStateChange({
+          type: g.Drawline,
+          color: this.color,
+          ready: this.ready,
+          state: n,
+          uuid: this.uuid
         });
-        this.ready = false;
-        this.emit('readyChange', false);
+      });
+    }, t.ontouchstart = (o) => {
+      o.preventDefault(), d = Date.now();
+      const a = o.touches[0].clientX, n = o.touches[0].clientY;
+      r = [], r.push({ x: a, y: n }), i = { x: a, y: n }, console.log("ontouchstart", a, n, i), s = w({ x: a, y: n }, this.clientWidth, this.clientHeight), c = [];
+    }, t.ontouchmove = (o) => {
+      if (o.preventDefault(), !i)
+        return;
+      const a = Number(o.touches[0].clientX), n = Number(o.touches[0].clientY);
+      if (Math.abs(a - i.x) < 5 && Math.abs(n - i.y) < 5 || (r.push({ x: a, y: n }), c.push(w({ x: a, y: n }, this.clientWidth, this.clientHeight)), r.length < 3))
+        return;
+      const { control: l, end: u } = b(r);
+      !l || !u || (m(i, l, u), i = u);
+    }, t.ontouchend = t.ontouchcancel = (o) => {
+      if (o.preventDefault(), i = null, r.length < 3)
+        return;
+      this.data[this.uuid] || (this.data[this.uuid] = []);
+      const a = Date.now() - d, n = {
+        move: Object.assign({}, s),
+        line: [...c],
+        uuid: this.uuid,
+        color: this.color,
+        duration: a < 1280 ? a : a < 2e3 ? 1280 : 0
+      };
+      this.data[this.uuid].push(n), D(() => {
         this.emitStateChange({
-            type: PaintBrushTypeEnum.Exit,
-            color: this.color,
-            ready: false,
-            uuid: this.uuid,
+          type: g.Drawline,
+          color: this.color,
+          ready: this.ready,
+          state: n,
+          uuid: this.uuid
         });
+      });
+    };
+  }
+  emitStateChange(t, e = !0) {
+    if (t.type !== g.Drawline) {
+      this.emit("stateChange", t, e);
+      return;
     }
-    updateCurrentColor(color) {
-        const currentCanvas = this.canvas[this.uuid];
-        if (!currentCanvas)
-            return;
-        const currentCtx = currentCanvas.getContext('2d');
-        if (!currentCtx)
-            return;
-        this.configs.currentColor = color;
-        currentCtx.strokeStyle = color;
+    const h = Date.now(), i = t.state;
+    if (!i || !i.line)
+      return;
+    const r = Math.ceil(i.line.length / 100);
+    for (let s = 0; s < r; s++) {
+      const c = {
+        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(s * 100, (s + 1) * 100)
+        },
+        timestamp: h,
+        end: s === r - 1
+      };
+      N(s, 20, () => {
+        this.emit("stateChange", c, e);
+      });
     }
-    openBrushHandle() {
-        const currentCanvas = this.canvas[this.uuid];
-        if (!currentCanvas)
-            return;
-        const currentCtx = currentCanvas.getContext('2d');
-        if (!currentCtx)
-            return;
-        const color = this.color || '#6D92FF';
-        currentCtx.strokeStyle = color;
-        let begin = null; // 开始点
-        let points = []; // 单次 touch 点位集合
-        let move;
-        let line = []; // 同步 touch 点位数据
-        let startTime = 0; // touch 开始时间
-        // 绘制
-        const draw = (beginPoint, controlPoint, endPoint) => {
-            const color = this.color || '#ff0000';
-            currentCtx.strokeStyle = color;
-            currentCtx.beginPath();
-            currentCtx.moveTo(beginPoint.x, beginPoint.y);
-            currentCtx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
-            currentCtx.stroke();
-        };
-        // 鼠标按下
-        currentCanvas.onmousedown = (e) => {
-            e.preventDefault();
-            startTime = Date.now();
-            const x = e.clientX;
-            const y = e.clientY;
-            points = [];
-            points.push({ x, y });
-            begin = { x, y };
-            move = transformCoords({ x, y }, this.clientWidth, this.clientHeight);
-            line = [];
-        };
-        // 鼠标移动
-        currentCanvas.onmousemove = (e) => {
-            e.preventDefault();
-            if (!begin)
-                return;
-            const x = Number(e.clientX);
-            const y = Number(e.clientY);
-            // 密集点位稀释
-            if (Math.abs(x - begin.x) < 5 && Math.abs(y - begin.y) < 5) {
-                return;
-            }
-            points.push({ x, y });
-            // 此处应记录折线拟合之前的点
-            line.push(transformCoords({ x, y }, this.clientWidth, this.clientHeight));
-            // 折线拟合二次贝塞尔曲线至少需要三个点
-            if (points.length < 3) {
-                return;
-            }
-            const { control, end } = getQuadraticCurvePoint(points);
-            if (!control || !end) {
-                return;
-            }
-            draw(begin, control, end);
-            begin = end;
-        };
-        // 鼠标松开
-        currentCanvas.onmouseup = (e) => {
-            e.preventDefault();
-            begin = null;
-            if (points.length < 3)
-                return;
-            if (!this.data[this.uuid]) {
-                this.data[this.uuid] = [];
-            }
-            const duration = Date.now() - startTime;
-            const state = {
-                move: Object.assign({}, move),
-                uuid: this.uuid,
-                line: [...line],
-                color: this.color,
-                duration: duration < 1280 ? duration : duration < 2000 ? 1280 : 0, // 单次笔迹时长超过2000ms不加动画
-            };
-            this.data[this.uuid].push(state);
-            // 广播数据
-            nextFrame(() => {
-                this.emitStateChange({
-                    type: PaintBrushTypeEnum.Drawline,
-                    color: this.color,
-                    ready: this.ready,
-                    state,
-                    uuid: this.uuid,
-                });
-            });
-        };
-        // 手势按压
-        currentCanvas.ontouchstart = (e) => {
-            e.preventDefault();
-            startTime = Date.now();
-            const x = e.touches[0].clientX;
-            const y = e.touches[0].clientY;
-            points = [];
-            points.push({ x, y });
-            begin = { x, y };
-            console.log('ontouchstart', x, y, begin);
-            move = transformCoords({ x, y }, this.clientWidth, this.clientHeight);
-            line = [];
-        };
-        // 手势移动
-        currentCanvas.ontouchmove = (e) => {
-            e.preventDefault();
-            if (!begin)
-                return;
-            const x = Number(e.touches[0].clientX);
-            const y = Number(e.touches[0].clientY);
-            if (Math.abs(x - begin.x) < 5 && Math.abs(y - begin.y) < 5)
-                return; // 密集点位稀释
-            points.push({ x, y });
-            line.push(transformCoords({ x, y }, this.clientWidth, this.clientHeight)); // 此处应记录折线拟合之前的点
-            if (points.length < 3)
-                return; // 折线拟合二次贝塞尔曲线至少需要三个点
-            const { control, end } = getQuadraticCurvePoint(points);
-            if (!control || !end)
-                return;
-            draw(begin, control, end);
-            begin = end;
-        };
-        // 手势按压离开
-        currentCanvas.ontouchend = currentCanvas.ontouchcancel = (e) => {
-            e.preventDefault();
-            begin = null;
-            if (points.length < 3)
-                return;
-            if (!this.data[this.uuid]) {
-                this.data[this.uuid] = [];
-            }
-            const duration = Date.now() - startTime;
-            const state = {
-                move: Object.assign({}, move),
-                line: [...line],
-                uuid: this.uuid,
-                color: this.color,
-                duration: duration < 1280 ? duration : duration < 2000 ? 1280 : 0, // 单次笔迹时长超过2000ms不加动画
-            };
-            this.data[this.uuid].push(state);
-            // 广播数据
-            nextFrame(() => {
-                this.emitStateChange({
-                    type: PaintBrushTypeEnum.Drawline,
-                    color: this.color,
-                    ready: this.ready,
-                    state,
-                    uuid: this.uuid,
-                });
-            });
-        };
-    }
-    emitStateChange(action, userAction = true) {
-        if (action.type !== PaintBrushTypeEnum.Drawline) {
-            this.emit('stateChange', action, userAction);
-            return;
-        }
-        const timestamp = Date.now();
-        const state = action.state;
-        if (!state)
-            return;
-        if (!state.line)
-            return;
-        const sliceCount = Math.ceil(state.line.length / 100);
-        for (let i = 0; i < sliceCount; i++) {
-            const localityAction = {
-                uuid: this.uuid,
-                color: this.color,
-                ready: this.ready,
-                type: action.type,
-                state: {
-                    uuid: this.uuid,
-                    move: state.move,
-                    duration: state.duration,
-                    color: this.color,
-                    line: state.line.slice(i * 100, (i + 1) * 100),
-                },
-                timestamp,
-                end: i === sliceCount - 1,
-            };
-            /** 由于单次 ws 传输数据量过大，会导致 ws 断掉，所以分批传数据 */
-            execInterval(i, 20, () => {
-                this.emit('stateChange', localityAction, userAction);
-            });
-        }
+  }
+  action(t) {
+    const { ready: e, type: h, uuid: i } = t;
+    if (!e && this.ready) {
+      this.closeBrush();
+      return;
     }
-    action(action) {
-        const { ready, type, uuid } = action;
-        if (!ready && this.ready) {
-            // 关闭面板
-            this.closeBrush();
-            return;
-        }
-        if (ready && !this.ready) {
-            // 开启面板：首次打开画笔不同步上一次的画线
-            this.openBrush();
-            return;
-        }
-        if (!this.ready) {
-            return;
-        }
-        switch (type) {
-            case PaintBrushTypeEnum.Drawline:
-                const { state, timestamp, end } = action;
-                if (!timestamp)
-                    return;
-                if (!state)
-                    return;
-                this.tempLine[timestamp] = [].concat(this.tempLine[timestamp] || [], state.line);
-                if (end) {
-                    Object.assign(state, { line: this.tempLine[timestamp] });
-                    this.handleDrawLine(uuid, state, {}, () => delete this.tempLine[timestamp]);
-                }
-                break;
-            case PaintBrushTypeEnum.Undo:
-                this.handleUndo(uuid);
-                break;
-            default:
-                break;
-        }
+    if (e && !this.ready) {
+      this.openBrush();
+      return;
     }
-    handleDrawLine(_uuid, data, { withUndo = false }, callback = noop) {
-        if (!data || Object.prototype.toString.call(data) != '[object Object]' || Object.keys(data).length === 0) {
+    if (!!this.ready)
+      switch (h) {
+        case g.Drawline:
+          const { state: r, timestamp: s, end: c } = t;
+          if (!s || !r)
             return;
-        }
-        console.log('handleDrawLine', data, data.line);
-        queue(() => {
-            return new Promise((resolve) => {
-                if (!withUndo) {
-                    if (!this.canvas[_uuid]) {
-                        this.canvas[_uuid] = this.initCanvas('_paintBrush-canvas--sync');
-                    }
-                    if (!this.data[_uuid]) {
-                        this.data[_uuid] = [];
-                    }
-                    this.data[_uuid].push(data);
-                }
-                if (!this.canvas[_uuid]) {
-                    return;
-                }
-                const $ctx = this.canvas[_uuid].getContext('2d');
-                if (!$ctx)
-                    return;
-                const { line = [], color = 'black', duration = 0, uuid } = data;
-                const move = unTransformCoords(data.move || {}, this.clientWidth, this.clientHeight);
-                let points = [move];
-                $ctx.strokeStyle = color;
-                $ctx.beginPath();
-                $ctx.moveTo(move.x, move.y);
-                if (duration && !withUndo) {
-                    let drawCache = [];
-                    const self = this;
-                    self.tween = tween({ step: 0 }, { step: line.length - 1 }, duration)
-                        .onUpdate(({ step }) => {
-                        var _a;
-                        self.tweening = true;
-                        if (!self.ready) {
-                            $ctx.clearRect(0, 0, self.canvas[uuid].width, self.canvas[uuid].height);
-                            return (_a = self.tween) === null || _a === void 0 ? void 0 : _a.stop();
-                        }
-                        const i = Math.floor(step);
-                        if (!drawCache.find((dc) => dc === i)) {
-                            drawCache.push(i);
-                            console.log('__debug__', line, line[i], i);
-                            points.push(unTransformCoords(line[i], self.clientWidth, self.clientHeight));
-                            if (points.length < 3)
-                                return;
-                            const { control, end } = getQuadraticCurvePoint(points);
-                            if (!control || !end)
-                                return;
-                            $ctx.quadraticCurveTo(control.x, control.y, end.x, end.y);
-                            $ctx.stroke();
-                        }
-                    })
-                        .onComplete((e) => {
-                        self.tween = undefined;
-                        self.tweening = false;
-                        drawCache = [];
-                        points = [];
-                        if (callback)
-                            callback();
-                        resolve();
-                    });
-                }
-                else {
-                    for (let i = 0; i < line.length; i++) {
-                        points.push(unTransformCoords(line[i], this.clientWidth, this.clientHeight));
-                        if (points.length < 3)
-                            continue;
-                        const { control, end } = getQuadraticCurvePoint(points);
-                        if (!control || !end)
-                            continue;
-                        $ctx.quadraticCurveTo(control.x, control.y, end.x, end.y);
-                    }
-                    $ctx.stroke();
-                    points = [];
-                    if (callback)
-                        callback();
-                    resolve();
-                }
-            });
+          this.tempLine[s] = [].concat(this.tempLine[s] || [], r.line), c && (Object.assign(r, { line: this.tempLine[s] }), this.handleDrawLine(i, r, {}, () => delete this.tempLine[s]));
+          break;
+        case g.Undo:
+          this.handleUndo(i);
+          break;
+      }
+  }
+  handleDrawLine(t, e, { withUndo: h = !1 }, i = S) {
+    !e || Object.prototype.toString.call(e) != "[object Object]" || Object.keys(e).length === 0 || (console.log("handleDrawLine", e, e.line), T(() => new Promise((r) => {
+      if (h || (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 s = this.canvas[t].getContext("2d");
+      if (!s)
+        return;
+      const { line: c = [], color: d = "black", duration: m = 0, uuid: o } = e, a = E(e.move || {}, this.clientWidth, this.clientHeight);
+      let n = [a];
+      if (s.strokeStyle = d, s.beginPath(), s.moveTo(a.x, a.y), m && !h) {
+        let l = [];
+        const u = this;
+        u.tween = W({ step: 0 }, { step: c.length - 1 }, m).onUpdate(({ step: C }) => {
+          var _;
+          if (u.tweening = !0, !u.ready)
+            return s.clearRect(0, 0, u.canvas[o].width, u.canvas[o].height), (_ = u.tween) == null ? void 0 : _.stop();
+          const y = Math.floor(C);
+          if (!l.find((x) => x === y)) {
+            if (l.push(y), console.log("__debug__", c, c[y], y), n.push(E(c[y], u.clientWidth, u.clientHeight)), n.length < 3)
+              return;
+            const { control: x, end: B } = b(n);
+            if (!x || !B)
+              return;
+            s.quadraticCurveTo(x.x, x.y, B.x, B.y), s.stroke();
+          }
+        }).onComplete((C) => {
+          u.tween = void 0, u.tweening = !1, l = [], n = [], i && i(), r();
         });
-    }
-    handleUndo(uuid) {
-        console.log('handleUndo', uuid, this.canvas[uuid]);
-        if (!this.canvas[uuid] || !this.data[uuid] || this.data[uuid].length === 0) {
-            return;
+      } else {
+        for (let l = 0; l < c.length; l++) {
+          if (n.push(E(c[l], this.clientWidth, this.clientHeight)), n.length < 3)
+            continue;
+          const { control: u, end: C } = b(n);
+          !u || !C || s.quadraticCurveTo(u.x, u.y, C.x, C.y);
         }
-        this.data[uuid].pop();
-        const handle = () => {
-            var _a;
-            const $ctx = (_a = this.canvas[uuid]) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-            if ($ctx) {
-                $ctx.clearRect(0, 0, this.canvas[uuid].width, this.canvas[uuid].height);
-            }
-            this.data[uuid].forEach((ld) => this.handleDrawLine(uuid, ld, { withUndo: true }));
-        };
-        if (this.tween && this.tweening) {
-            this.tween.stop();
-            nextFrame(handle, 60);
-            return;
-        }
-        handle();
-    }
-    destroyBrush() {
-        this.closeBrush();
-        this.ready = false;
-        this.emit('readyChange', true);
+        s.stroke(), n = [], i && i(), r();
+      }
+    })));
+  }
+  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 h = (i = this.canvas[t]) == null ? void 0 : i.getContext("2d");
+      h && h.clearRect(0, 0, this.canvas[t].width, this.canvas[t].height), this.data[t].forEach((r) => this.handleDrawLine(t, r, { withUndo: !0 }));
+    };
+    if (this.tween && this.tweening) {
+      this.tween.stop(), D(e, 60);
+      return;
     }
+    e();
+  }
+  destroyBrush() {
+    this.closeBrush(), this.ready = !1, this.emit("readyChange", !0);
+  }
 }
+export {
+  Y as Controller
+};