@realsee/dnalogel 2.1.2-alpha.2 → 2.1.2-alpha.3

package/esm/base/BasePluginWithData.d.ts

@@ -0,0 +1,34 @@
+import * as BasePlugin from './BasePlugin';
+declare type State = BasePlugin.State;
+interface EventMap<PluginState, PluginData> extends BasePlugin.EventMap<PluginState> {
+    /** 数据变更 */
+    dataChange: (data: PluginData, prevData?: PluginData) => void;
+    /** 数据加载完成 */
+    dataLoaded: (data: PluginData) => void;
+}
+/**
+ * 插件的基础数据
+ */
+interface ServerData {
+    /**
+     * 数据版本
+     */
+    version: number;
+    /**
+     * 数据
+     */
+    data?: unknown;
+}
+declare abstract class Controller<PluginState extends State, PluginEventMap extends EventMap<PluginState, PluginData>, PluginServerData extends ServerData, PluginData> extends BasePlugin.Controller<PluginState, PluginEventMap> {
+    protected abstract data?: PluginData;
+    /**
+     * 加载插件依赖数据
+     * @param serverData 插件数据
+     * @param state 插件 State
+     */
+    abstract load(serverData: PluginServerData, state?: PluginState, userAction?: boolean): Promise<void>;
+    /** 把原始数据转化为插件数据 */
+    protected abstract formatData?(serverData: PluginServerData): Promise<PluginData>;
+}
+export type { State, EventMap, ServerData };
+export { Controller };

package/esm/base/BasePluginWithData.js

@@ -0,0 +1,6 @@
+import { C as o } from "./BasePlugin.js";
+class l extends o {
+}
+export {
+  l as C
+};

package/esm/components/PaintBrush/Controller.d.ts

@@ -0,0 +1,43 @@
+import { noop } from './utils';
+import { PaintBrushAction, PaintBrushConfigs, PaintBrushEventMap, PaintBrushState } from './typings';
+import { Subscribe } from './Subscribe';
+export declare class Controller extends Subscribe<PaintBrushEventMap> {
+    configs: PaintBrushConfigs;
+    private clientWidth;
+    private clientHeight;
+    private ready;
+    private uuid;
+    private tween?;
+    private tweening;
+    private container;
+    private canvas;
+    private data;
+    private tempLine;
+    get color(): string;
+    get state(): Record<string, PaintBrushState[]>;
+    get dpr(): number;
+    constructor(configs: PaintBrushConfigs);
+    ifInsertToDOM(): HTMLDivElement;
+    /**
+     *
+     * @param className 初始化画板
+     * @returns
+     */
+    initCanvas(className: string): HTMLCanvasElement;
+    /**
+     * 初始化操作面板
+     * @returns
+     */
+    initCtrl(): HTMLDivElement;
+    openBrush(): void;
+    closeBrush(): void;
+    updateCurrentColor(color: string): void;
+    openBrushHandle(): void;
+    emitStateChange(action: PaintBrushAction, userAction?: boolean): void;
+    action(action: PaintBrushAction): void;
+    handleDrawLine(_uuid: string, data: PaintBrushState, { withUndo }: {
+        withUndo?: boolean;
+    }, callback?: typeof noop): void;
+    handleUndo(uuid: string): void;
+    destroyBrush(): void;
+}

package/esm/components/PaintBrush/Controller.js

@@ -0,0 +1,308 @@
+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 { t as w, g as b, n as D, e as N, q as S, a as T, u as E } from "./utils.js";
+import { t as W } from "./tween.js";
+import { P as g } from "./typings.js";
+import { S as U } from "./Subscribe.js";
+import { u as k } from "../../shared-utils/uuid.js";
+import { P as M } from "./style.js";
+class X 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;
+    }
+    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
+        });
+      });
+    }, 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: 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;
+    }
+    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);
+      });
+    }
+  }
+  action(t) {
+    const { ready: e, type: h, uuid: i } = t;
+    if (!e && this.ready) {
+      this.closeBrush();
+      return;
+    }
+    if (e && !this.ready) {
+      this.openBrush();
+      return;
+    }
+    if (!!this.ready)
+      switch (h) {
+        case g.Drawline:
+          const { state: r, timestamp: s, end: c } = t;
+          if (!s || !r)
+            return;
+          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 = T) {
+    !e || Object.prototype.toString.call(e) != "[object Object]" || Object.keys(e).length === 0 || (console.log("handleDrawLine", e, e.line), S(() => 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();
+        });
+      } 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);
+        }
+        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 {
+  X as C
+};

package/esm/components/PaintBrush/Subscribe.d.ts

@@ -0,0 +1,76 @@
+export declare type EventMap = {
+    [name: string]: (...args: any[]) => void | boolean;
+};
+/**
+ * 监听者模式
+ * @template T 预设的监听回调类型
+ * @example
+ * ```
+ * new Subscribe<{
+ * "foo": [arg1: number, arg2: string],
+ * "bar": [arg: boolean],
+ * }>()
+ * ```
+ */
+declare class Subscribe<T extends EventMap> {
+    /**
+     * 判断是否注册了事件
+     * @param name  事件类型
+     */
+    hasListener(name: keyof T): boolean;
+    /**
+     * 注册事件
+     * @param  name    事件类型
+     * @param  callback 事件回调函数
+     * @param  once     是否只执行一次
+     * @returns 解除事件
+     * @template K 预设的监听事件名称
+     * @template C 回调函数函数上下文
+     */
+    on<K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>, once?: boolean): () => void;
+    /**
+     * 注册事件(是否只执行一次)
+     * @param  name     事件类型
+     * @param  callback 事件回调函数
+     * @returns 解除事件
+     * @template K 预设的监听事件名称
+     * @template C 回调函数函数上下文
+     */
+    once<K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>): () => void;
+    /**
+     * 解除事件
+     *
+     * 如果 name 不传的话解除对应所有事件
+     * 如果 name, callback 不传的话解除所有name的所有事件
+     * @param  name     事件类型
+     * @param  callback 事件回调函数
+     * @template K 预设的监听事件名称
+     */
+    off<K extends keyof T>(name?: K, callback?: (...args: Parameters<T[K]>) => ReturnType<T[K]>): void;
+    /**
+     * 触发事件
+     * @param  name  事件类型
+     * @param  data  触发事件的数据
+     * @returns canceled 是否被触发取消
+     * @template K 预设的监听事件名称
+     */
+    emit<K extends keyof T>(name: K, ...data: Parameters<T[K]>): boolean;
+}
+export declare namespace SubscribeMixinType {
+    interface hasListener<T extends EventMap> {
+        (name: keyof T): boolean;
+    }
+    interface on<T extends EventMap> {
+        <K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>, once?: boolean): () => void;
+    }
+    interface once<T extends EventMap> {
+        <K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>): () => void;
+    }
+    interface off<T extends EventMap> {
+        <K extends keyof T>(names?: K | K[], callback?: (...args: any[]) => any): void;
+    }
+    interface emit<T extends EventMap> {
+        <K extends keyof T>(name: K, ...data: Parameters<T[K]>): boolean;
+    }
+}
+export { Subscribe };

package/esm/components/PaintBrush/Subscribe.js

@@ -0,0 +1,47 @@
+const i = Symbol("$$PAINT_BRUSH_EVENT$$");
+function r(f) {
+  return f[i] || (f[i] = {}), f[i];
+}
+function v(f) {
+  f[i] || delete f[i];
+}
+class E {
+  hasListener(t) {
+    const e = r(this);
+    return e && e[t] && e[t].length > 0;
+  }
+  on(t, e, s) {
+    const o = r(this);
+    return o[t] || (o[t] = []), o[t].push([e, s || !1]), () => this.off(t, e);
+  }
+  once(t, e) {
+    return this.on(t, e, !0);
+  }
+  off(t, e) {
+    if (t === void 0) {
+      v(this);
+      return;
+    }
+    const s = r(this);
+    if (s[t] || (s[t] = []), e === void 0) {
+      s[t].length = 0;
+      return;
+    }
+    let o = 0;
+    for (; o < s[t].length && s[t][o][0] !== e; o++)
+      ;
+    o < s[t].length && s[t].splice(o, 1);
+  }
+  emit(t, ...e) {
+    let s = !1;
+    const l = r(this)[t] || [];
+    for (let h of l.slice()) {
+      const [n, u = !1] = h, c = n(...e);
+      u && this.off(t, n), c === !1 && (s = !0);
+    }
+    return s;
+  }
+}
+export {
+  E as S
+};

package/esm/components/PaintBrush/index.d.ts

@@ -0,0 +1,27 @@
+import type { PaintBrushAction, PaintBrushConfigs, PaintBrushEventMap, PaintBrushState } from './typings';
+export declare class PaintBrush {
+    private controller;
+    constructor(configs?: Partial<PaintBrushConfigs>);
+    on<K extends keyof PaintBrushEventMap>(name: K, callback: (...args: Parameters<PaintBrushEventMap[K]>) => ReturnType<PaintBrushEventMap[K]>): void;
+    off<K extends keyof PaintBrushEventMap>(name: K, callback: (...args: Parameters<PaintBrushEventMap[K]>) => ReturnType<PaintBrushEventMap[K]>): void;
+    once<K extends keyof PaintBrushEventMap>(name: K, callback: (...args: Parameters<PaintBrushEventMap[K]>) => ReturnType<PaintBrushEventMap[K]>): void;
+    /**
+     * 显示画笔。
+     */
+    show(): void;
+    action(action: PaintBrushAction): void;
+    /**
+     * 获取画笔状态。
+     */
+    get state(): Record<string, PaintBrushState[]>;
+    get configs(): PaintBrushConfigs;
+    /**
+     * 销毁。
+     *
+     * @deprecated
+     *
+     * @description 画笔应该维护一个 **全局单例**，重复利用。
+     */
+    dispose(): void;
+    setCurrentColor(color: string): void;
+}

package/esm/components/PaintBrush/index.js

@@ -0,0 +1,52 @@
+var e = Object.defineProperty;
+var s = (r, o, t) => o in r ? e(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var n = (r, o, t) => (s(r, typeof o != "symbol" ? o + "" : o, t), t);
+import { C as l } from "./Controller.js";
+import "./utils.js";
+import "./tween.js";
+import "@tweenjs/tween.js";
+import "./typings.js";
+import "./Subscribe.js";
+import "../../shared-utils/uuid.js";
+import "./style.js";
+class g {
+  constructor(o = {}) {
+    n(this, "controller");
+    const t = Object.assign({
+      currentColor: "#f44336",
+      onUndoText: "\u56DE\u9000",
+      onExitText: "\u5173\u95ED"
+    }, o);
+    this.controller = new l(t);
+  }
+  on(o, t) {
+    this.controller.on(o, t);
+  }
+  off(o, t) {
+    this.controller.off(o, t);
+  }
+  once(o, t) {
+    this.controller.once(o, t);
+  }
+  show() {
+    this.controller.openBrush();
+  }
+  action(o) {
+    this.controller.action(o);
+  }
+  get state() {
+    return this.controller.state;
+  }
+  get configs() {
+    return this.controller.configs;
+  }
+  dispose() {
+    return this.controller.destroyBrush();
+  }
+  setCurrentColor(o) {
+    this.controller.updateCurrentColor(o);
+  }
+}
+export {
+  g as PaintBrush
+};

package/esm/components/PaintBrush/style.d.ts

@@ -0,0 +1,2 @@
+declare const PaintBrushStyle = "\n<style type=\"text/css\">\n\n#_gl_paintBrush {\nposition: fixed;\ntop: 0;\nbottom: 0;\nleft: 0;\nright: 0;\ntransform: translateZ(0);\nz-index: 1997;\npointer-events: none;\nopacity: 0;\ntransition: all 500ms;\n}\n\n#_gl_paintBrush.brushing {\n  opacity: 1;\n}\n\n#_gl_paintBrush ._paintBrush-canvas {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n}\n\n#_gl_paintBrush ._paintBrush-canvas--sync {\n  pointer-events: none;\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n}\n\n#_gl_paintBrush ._paintBrush-canvas {\n  pointer-events: none;\n  z-index: 1;\n}\n\n#_gl_paintBrush.brushing ._paintBrush-canvas {\n  pointer-events: auto;\n}\n\n#_gl_paintBrush ._paintBrush-ctrl {\n  width: 140px;\n  height: 52px;\n  position: absolute;\n  bottom: 28px;\n  right: 50%;\n  transform: translateX(50%);\n  font-size: 10px;\n  color: white;\n  z-index: 2;\n}\n\n#_gl_paintBrush.brushing ._paintBrush-ctrl {\n  pointer-events: auto;\n}\n\n#_gl_paintBrush ._paintBrush-ctrl ._paintBrush-ctrlinner {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  border-radius: 26px;\n  padding: 8px 16px;\n  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);\n  background-image: linear-gradient(180deg, hsl(0deg 0% 0% / 57%), hsl(0deg 0% 0% / 70%) 117%);\n}\n\n._paintBrush-ctrlitem {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 38px;\n  height: 38px;\n  cursor: pointer;\n}\n\n._paintBrush-ctrlitem--undo >.brush-icon{\n    background-image: url(\"//vrlab-static.ljcdn.com/release/web/revoke.ab7694ef.svg\");\n    background-size: 100%;\n    width: 22px;\n    height: 22px;\n}\n\n._paintBrush-ctrlitem--close >.brush-icon {\n    background-image: url(\"//vrlab-static.ljcdn.com/release/web/exit_paintbrush.02bc1341.svg\");\n    background-size: 100%;\n    width: 22px;\n    height: 22px;\n}\n\n</style>\n";
+export default PaintBrushStyle;