@realsee/dnalogel 2.16.0-10 → 2.16.0-11

package/libs/PanoVideoPlugin/VideoMeshController.js

@@ -1,15 +1,15 @@
 var g = Object.defineProperty;
-var F = (h, e, i) => e in h ? g(h, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : h[e] = i;
-var t = (h, e, i) => (F(h, typeof e != "symbol" ? e + "" : e, i), i);
-import { vertexShader as E, fragmentShader as I } from "./utils/shader.js";
+var I = (v, e, i) => e in v ? g(v, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : v[e] = i;
+var t = (v, e, i) => (I(v, typeof e != "symbol" ? e + "" : e, i), i);
+import { vertexShader as P, fragmentShader as F } from "./utils/shader.js";
 import "@realsee/five";
 import "hammerjs";
-import { VideoTexture as D, LinearFilter as m, ShaderMaterial as P, Vector4 as A, SphereBufferGeometry as M, Mesh as x, Vector3 as f, Quaternion as C } from "three";
-import "@tweenjs/tween.js";
+import { VideoTexture as M, LinearFilter as m, ShaderMaterial as x, Vector4 as L, SphereBufferGeometry as V, Mesh as y, Vector3 as f, Quaternion as b } from "three";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import { requestAnimationFrameInterval as L } from "../shared-utils/animationFrame/index.js";
-import V from "./utils/index.js";
+import { requestAnimationFrameInterval as A } from "../shared-utils/animationFrame/index.js";
+import W from "./utils/index.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
 import "three/examples/jsm/renderers/CSS3DRenderer";
 import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
@@ -22,22 +22,35 @@ import "../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
 import "../shared-utils/three/centerPoint.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
-import "../shared-utils/animationFrame/BetterTween.js";
-class Y {
+class K {
+  /** 初始化视频、模型以及相关事件监听。 */
   constructor(e, i) {
     t(this, "_id");
+    /** 视频资源地址 */
     t(this, "url");
+    /** Five Instance */
     t(this, "five");
+    /** 视频对应的点位 */
     t(this, "panoIndex");
+    /** 视频对应的 Work Observer */
     t(this, "observer");
+    /** 视频在球面的 uv：[left, top, width, height] */
     t(this, "origin");
+    /** Video DOM */
     t(this, "video");
+    /** Video Mesh */
     t(this, "videoMesh");
     t(this, "_enabled", !0);
     t(this, "_disposed", !1);
+    /** 视频资源是否满足播放条件 */
     t(this, "videoDataLoaded", !1);
+    /** 视频是否曾经播放过 */
     t(this, "hasVideoEverPlayed", !1);
+    /** 自动 render five 的销毁函数
+     * @remark 由于 render video 依赖 Five render，因此需要自动 render five。
+     */
     t(this, "renderFiveDisposer");
+    /** 把 uv 值转换成位置 */
     t(this, "uv2Position", (e, i) => {
       var c;
       const o = Math.PI, a = Math.PI * 2, d = e, s = 1 - i, r = new f(
@@ -46,121 +59,145 @@ class Y {
         1 * Math.sin(a * d) * Math.sin(o * s)
       );
       r.setX(-r.x);
-      const u = (c = this.five.work) == null ? void 0 : c.observers[this.panoIndex];
-      if (!u)
-        return this.logWarning(`\u70B9\u4F4D ${this.panoIndex} \u4E0D\u5B58\u5728\uFF0C\u8BF7\u68C0\u67E5 Five \u6570\u636E\u662F\u5426\u6B63\u5E38\u3002`);
-      const l = u.position.clone(), p = u.quaternion.clone(), v = r.clone();
-      return v.applyAxisAngle(new f(0, 1, 0), Math.PI / 2), v.applyQuaternion(p), v.add(l), v;
+      const h = (c = this.five.work) == null ? void 0 : c.observers[this.panoIndex];
+      if (!h)
+        return this.logWarning(`点位 ${this.panoIndex} 不存在，请检查 Five 数据是否正常。`);
+      const l = h.position.clone(), p = h.quaternion.clone(), u = r.clone();
+      return u.applyAxisAngle(new f(0, 1, 0), Math.PI / 2), u.applyQuaternion(p), u.add(l), u;
     });
+    /** Five 数据加载后需要根据点位位姿调整点位模型位置 */
     t(this, "onFiveDataLoaded", () => {
       var r;
       const e = (r = this.five.work) == null ? void 0 : r.observers[this.panoIndex];
       if (!e)
-        return this.logWarning(`\u70B9\u4F4D ${this.panoIndex} \u4E0D\u5B58\u5728\uFF0C\u8BF7\u68C0\u67E5 Five \u6570\u636E\u662F\u5426\u6B63\u5E38\u3002`);
+        return this.logWarning(`点位 ${this.panoIndex} 不存在，请检查 Five 数据是否正常。`);
       this.observer = e;
-      const { x: i, y: n, z: o, w: a } = e.quaternion, d = new C(i, n, o, a), s = e.position;
+      const { x: i, y: n, z: o, w: a } = e.quaternion, d = new b(i, n, o, a), s = e.position;
       this.videoMesh.position.fromArray([s.x, s.y, s.z]), this.videoMesh.quaternion.set(0, 0, 0, 1), this.videoMesh.rotateOnAxis(new f(0, 1, 0), Math.PI / 2), this.videoMesh.applyQuaternion(d);
     });
+    /** 兼容视频播放 */
     t(this, "onFiveWantsMoveToPano", (e) => {
       e === this.panoIndex && (this.hasVideoEverPlayed || this.video.play().catch((i) => {
-        console.error("\u{1F436} ==> error:", i);
+        console.error("🐶 ==> error:", i);
       }));
     });
+    /** 走到某个点位上时，挂载/卸载视频 */
     t(this, "onFivePanoArrived", (e) => {
       if (this.disposed)
-        return this.logWarning("\u5B9E\u4F8B\u5DF2\u88AB\u9500\u6BC1");
-      !this.enabled || this.panoIndex === e && this.mount();
+        return this.logWarning("实例已被销毁");
+      this.enabled && this.panoIndex === e && this.mount();
     });
     t(this, "onFivePanoWillArrive", (e) => {
       if (e !== this.panoIndex)
         return this.unmount();
       this.panoIndex !== e && this.unmount();
     });
+    /** Five 模型变化 */
     t(this, "onFiveModeChange", (e) => {
       e !== "Panorama" && this.hide();
     });
+    /** Five mode change 动画结束 */
     t(this, "onFiveInitAnimationEnded", () => {
       const e = this.five.getCurrentState();
       e.mode === "Panorama" && e.panoIndex === this.panoIndex && this.mount();
     });
+    /** Five Canvas 点击 */
     t(this, "onFiveWantsTapGesture", (e) => {
       if (!this.five.scene.children.includes(this.videoMesh))
         return;
       if (this.disposed)
-        return this.logWarning("\u5B9E\u4F8B\u5DF2\u88AB\u9500\u6BC1");
+        return this.logWarning("实例已被销毁");
       if (!this.enabled)
-        return this.logWarning("\u5B9E\u4F8B\u5DF2\u88AB\u7981\u7528");
+        return this.logWarning("实例已被禁用");
       const [i] = e.intersectObject(this.videoMesh);
       if (!i)
         return;
       if (this.checkIntersectionInBounding(this.origin, i))
         return this.video.muted = !this.video.muted, !1;
     });
+    /** video canplaythrough 事件触发 */
     t(this, "onVideoDataLoaded", () => {
       this.videoDataLoaded = !0, this.video.paused === !1 && this.video.src !== "" && this.onVideoPlayingAndLoaded();
     });
+    /** video playing 事件触发
+     * @remarks
+     * 事件触发时机：
+     * - video is ready to start after having been paused.
+     * - video is ready to play after delayed due to lack of data.
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
+     */
     t(this, "onVideoPlaying", () => {
       this.hasVideoEverPlayed = !0, this.video.src !== "" && this.videoDataLoaded && this.onVideoPlayingAndLoaded();
     });
+    /** 触发 playing 和 canplaythrough */
     t(this, "onVideoPlayingAndLoaded", () => {
       if (!this.videoDataLoaded)
-        return this.logWarning("\u89C6\u9891\u6570\u636E\u672A\u52A0\u8F7D");
+        return this.logWarning("视频数据未加载");
       if (this.video.paused === !0)
-        return this.logWarning("\u89C6\u9891\u5DF2\u6682\u505C");
+        return this.logWarning("视频已暂停");
       this.video.addEventListener(
         "timeupdate",
         () => {
-          this.video.src !== "" && this.panoIndex === this.five.getCurrentState().panoIndex && this.five.getCurrentState().mode === "Panorama" && (this.renderFiveDisposer || (this.renderFiveDisposer = L(() => {
+          this.video.src !== "" && this.panoIndex === this.five.getCurrentState().panoIndex && this.five.getCurrentState().mode === "Panorama" && (this.renderFiveDisposer || (this.renderFiveDisposer = A(() => {
             this.five.needsRender = !0;
           }, 30)), this.five.scene.add(this.videoMesh));
         },
         { once: !0 }
       );
     });
+    /** video pause 事件触发 */
     t(this, "onVideoPaused", () => {
       var e;
       (e = this.renderFiveDisposer) == null || e.call(this), this.renderFiveDisposer = void 0;
     });
-    var r, u;
-    this.five = e, this.panoIndex = i.panoIndex, this._id = i.renderID, this.url = i.url, this.origin = i.origin.slice(), this._enabled = (u = (r = i.initialState) == null ? void 0 : r.enabled) != null ? u : !0;
+    var r, h;
+    this.five = e, this.panoIndex = i.panoIndex, this._id = i.renderID, this.url = i.url, this.origin = i.origin.slice(), this._enabled = (h = (r = i.initialState) == null ? void 0 : r.enabled) != null ? h : !0;
     const n = document.createElement("video");
     n.crossOrigin = "anonymous", n.autoplay = !1, n.muted = !0, n.loop = !0, n.playsInline = !0, this.video = n;
-    const o = new D(this.video);
+    const o = new M(this.video);
     o.minFilter = m, o.magFilter = m;
-    const a = new P({
-      vertexShader: E,
-      fragmentShader: I,
+    const a = new x({
+      vertexShader: P,
+      fragmentShader: F,
       uniforms: {
         map: { value: o },
         size: {
-          value: new A(this.origin[0], 1 - this.origin[1] - this.origin[3], this.origin[2], this.origin[3])
+          value: new L(this.origin[0], 1 - this.origin[1] - this.origin[3], this.origin[2], this.origin[3])
         }
       },
       depthTest: !0,
       transparent: !0
-    }), d = new M(1, 64, 64);
+    }), d = new V(1, 64, 64);
     d.scale(-1, 1, 1);
-    const s = new x(d, a);
+    const s = new y(d, a);
     s.name = "pano-video", this.videoMesh = s, this.five.work && this.onFiveDataLoaded(), this.enabled && this.addEventListeners(), this.mountIfNeeded();
   }
+  /** 传入的 ID，不可更改 */
   get renderID() {
     return this._id;
   }
+  /** 是否已经销毁 */
   get disposed() {
     return this._disposed;
   }
+  /** 是否已经启用 */
   get enabled() {
     return this._enabled;
   }
+  /** 彻底销毁，不响应之后的任何事件 */
   dispose() {
     this.disposed || (this.disable(), this._disposed = !0);
   }
   enable() {
     this.disposed || this.enabled || (this._enabled = !0, this.addEventListeners(), this.mountIfNeeded());
   }
+  /** 禁用插件 */
   disable() {
-    this.disposed || !this.enabled || (this._enabled = !1, this.removeEventListeners(), this.unmount());
+    this.disposed || this.enabled && (this._enabled = !1, this.removeEventListeners(), this.unmount());
   }
+  /** 切换到全景模式并看向视频
+   * @remark 如果遇到不能自动播放的问题，需要放到用户交互事件中调用。
+   */
   lookAtVideo() {
     if (!this.observer)
       return;
@@ -170,54 +207,63 @@ class Y {
     const i = this.uv2Position(e[0], e[1]);
     if (!i)
       return;
-    const n = new f().subVectors(i, this.observer.position).normalize(), { longitude: o, latitude: a } = V(n);
+    const n = new f().subVectors(i, this.observer.position).normalize(), { longitude: o, latitude: a } = W(n);
     this.five.setState({ panoIndex: this.panoIndex, longitude: o, latitude: a }), this.onFiveWantsMoveToPano(this.panoIndex);
   }
+  /** 获取视频中心点的 uv */
   getUVCenter() {
     if (!this.origin)
       return;
     const e = this.origin[0] + this.origin[2] / 2, i = this.origin[1] + this.origin[3] / 2;
     return [e, i];
   }
+  /** 添加时间监听 */
   addEventListeners() {
     this.five.on("loaded", this.onFiveDataLoaded), this.five.on("modeChange", this.onFiveModeChange), this.five.on("panoArrived", this.onFivePanoArrived), this.five.on("panoWillArrive", this.onFivePanoWillArrive), this.five.on("wantsMoveToPano", this.onFiveWantsMoveToPano), this.five.on("wantsTapGesture", this.onFiveWantsTapGesture), this.five.on("initAnimationEnded", this.onFiveInitAnimationEnded), this.video.addEventListener("canplaythrough", this.onVideoDataLoaded), this.video.addEventListener("playing", this.onVideoPlaying), this.video.addEventListener("pause", this.onVideoPaused);
   }
+  /** 移除事件监听 */
   removeEventListeners() {
     this.five.off("loaded", this.onFiveDataLoaded), this.five.off("modeChange", this.onFiveModeChange), this.five.off("panoArrived", this.onFivePanoArrived), this.five.off("panoWillArrive", this.onFivePanoWillArrive), this.five.off("wantsMoveToPano", this.onFiveWantsMoveToPano), this.five.off("wantsTapGesture", this.onFiveWantsTapGesture), this.five.off("initAnimationEnded", this.onFiveInitAnimationEnded), this.video.removeEventListener("canplaythrough", this.onVideoDataLoaded), this.video.removeEventListener("playing", this.onVideoPlaying), this.video.removeEventListener("pause", this.onVideoPaused);
   }
+  /** 如果满足 mount 条件，mount */
   mountIfNeeded() {
     const e = this.five.getCurrentState();
     e.mode === "Panorama" && e.panoIndex === this.panoIndex && this.enabled && this.mount();
   }
+  /** 挂载：加载视频资源；添加模型。 */
   mount() {
     if (this.disposed)
-      return this.logWarning("\u63D2\u4EF6\u5DF2\u7ECF\u9500\u6BC1\uFF0C\u65E0\u6CD5\u6302\u8F7D\u3002");
+      return this.logWarning("插件已经销毁，无法挂载。");
     if (this.url === "")
-      return this.logWarning("\u89C6\u9891\u8D44\u6E90\u4E0D\u5B58\u5728\u3002");
+      return this.logWarning("视频资源不存在。");
     this.video.src !== this.url && (this.video.src = this.url), this.video.paused && this.video.play().catch((e) => {
-      this.logWarning(e instanceof Error ? e.message : "\u89C6\u9891\u64AD\u653E\u5931\u8D25\u3002"), this.five.once("gesture", () => {
+      this.logWarning(e instanceof Error ? e.message : "视频播放失败。"), this.five.once("gesture", () => {
         this.video.play().catch((i) => {
-          this.logWarning(i instanceof Error ? i.message : "\u81EA\u52A8\u64AD\u653E\u89C6\u9891\u5931\u8D25\u3002");
+          this.logWarning(i instanceof Error ? i.message : "自动播放视频失败。");
         });
       });
     });
   }
+  /** 卸载：销毁视频资源；移除模型。 */
   unmount() {
     this.video.pause(), this.video.src !== "" && (this.video.src = ""), this.five.scene.remove(this.videoMesh);
   }
+  /** 暂停视频，去除模型。 */
   hide() {
     this.video.pause(), this.five.scene.remove(this.videoMesh);
   }
+  /** 控制台打印警告 */
   logWarning(e) {
-    console.warn("\u26D4 ==> [VideoMeshController]:", e);
+    console.warn("⛔ ==> [VideoMeshController]:", e);
   }
+  /** 检测射线与模型的交点是不是在视频的范围内 */
   checkIntersectionInBounding(e, i) {
     if (!i.uv)
       return !1;
-    const [n, o] = i.uv.toArray(), [a, d, s, r] = e, u = 1 - d - r, l = a + s, p = u + r;
-    return n >= a && n <= l && o >= u && o <= p;
+    const [n, o] = i.uv.toArray(), [a, d, s, r] = e, h = 1 - d - r, l = a + s, p = h + r;
+    return n >= a && n <= l && o >= h && o <= p;
   }
 }
 export {
-  Y as VideoMeshController
+  K as VideoMeshController
 };

package/libs/PanoVideoPlugin/index.js

@@ -1,11 +1,11 @@
 import { PanoVideoPluginController as r } from "./Controller.js";
-import { typings as B } from "./typings/index.js";
+import { typings as A } from "./typings/index.js";
 import "./VideoMeshController.js";
 import "./utils/shader.js";
 import "@realsee/five";
 import "hammerjs";
 import "three";
-import "@tweenjs/tween.js";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
 import "three/examples/jsm/renderers/CSS3DRenderer";
@@ -21,13 +21,12 @@ import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
 import "../shared-utils/animationFrame/index.js";
-import "../shared-utils/animationFrame/BetterTween.js";
 import "./utils/index.js";
 import "../base/BasePlugin.js";
 import "../shared-utils/isAbsoluteURL.js";
-const v = (o) => new r(o);
+const q = (o) => new r(o);
 export {
-  v as PanoVideoPlugin,
-  B as PanoVideoPluginType,
-  v as default
+  q as PanoVideoPlugin,
+  A as PanoVideoPluginType,
+  q as default
 };

package/libs/_commonjsHelpers.js

@@ -0,0 +1,4 @@
+var e = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : {};
+export {
+  e as commonjsGlobal
+};

package/libs/base/BasePlugin.js

@@ -1,30 +1,38 @@
-var e = Object.defineProperty;
-var o = (i, t, r) => t in i ? e(i, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : i[t] = r;
-var s = (i, t, r) => (o(i, typeof t != "symbol" ? t + "" : t, r), r);
-import { Subscribe as m } from "../shared-utils/Subscribe.js";
+var s = Object.defineProperty;
+var o = (i, t, r) => t in i ? s(i, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : i[t] = r;
+var e = (i, t, r) => (o(i, typeof t != "symbol" ? t + "" : t, r), r);
+import { Subscribe as a } from "../shared-utils/Subscribe.js";
 import "@realsee/five";
 import "hammerjs";
 import "three";
-import "@tweenjs/tween.js";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import { isAbsoluteURL as a } from "../shared-utils/isAbsoluteURL.js";
-import "../shared-utils/animationFrame/BetterTween.js";
-class R {
+import { isAbsoluteURL as m } from "../shared-utils/isAbsoluteURL.js";
+let n = class {
   constructor(t, r) {
-    s(this, "VERSION", "2.16.0-10");
-    s(this, "five");
-    s(this, "hooks", new m());
-    s(this, "staticPrefix", "//vrlab-static.ljcdn.com");
+    /**
+     * @realsee/dnalogel 版本号
+     */
+    e(this, "VERSION", "2.16.0-11");
+    e(this, "five");
+    /**
+     * 插件事件钩子
+     */
+    e(this, "hooks", new a());
+    e(this, "staticPrefix", "//vrlab-static.ljcdn.com");
     this.five = t, r != null && r.staticPrefix && (this.staticPrefix = r.staticPrefix);
   }
+  /**
+   * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
+   */
   getCurrentState() {
     return this.state;
   }
   isAbsoluteURL(t) {
-    return a(t) ? t : `${this.staticPrefix}${t}`;
+    return m(t) ? t : `${this.staticPrefix}${t}`;
   }
-}
+};
 export {
-  R as Controller
+  n as Controller
 };

package/libs/base/BasePluginWithData.js

@@ -1,6 +1,6 @@
 import { Controller as o } from "./BasePlugin.js";
-class e extends o {
-}
+let e = class extends o {
+};
 export {
   e as Controller
 };

package/libs/components/PaintBrush/Controller.js

@@ -45,13 +45,22 @@ class X extends k {
     }
     return this.container.innerHTML = O, this.container;
   }
+  /**
+   *
+   * @param className 初始化画板
+   * @returns
+   */
   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)
+    if (h)
       return h.lineWidth = 5 * this.dpr, h.lineCap = "round", h.lineJoin = "round", this.container.appendChild(e), e;
   }
+  /**
+   * 初始化操作面板
+   * @returns
+   */
   initCtrl() {
     const t = document.createElement("div");
     t.className = "_paintBrush-ctrl";
@@ -94,7 +103,7 @@ class X extends k {
     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.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);
@@ -110,7 +119,7 @@ class X extends k {
     if (!e)
       return;
     const h = e.getContext("2d");
-    !h || (this.configs.currentColor = t, h.strokeStyle = t);
+    h && (this.configs.currentColor = t, h.strokeStyle = t);
   }
   openBrushHandle() {
     const t = this.canvas[this.uuid];
@@ -148,6 +157,7 @@ class X extends k {
         line: [...u],
         color: this.color,
         duration: a < 1280 ? a : a < 2e3 ? 1280 : 0
+        // 单次笔迹时长超过2000ms不加动画
       };
       this.data[this.uuid].push(s), D(() => {
         this.emitStateChange({
@@ -180,6 +190,7 @@ class X extends k {
         uuid: this.uuid,
         color: this.color,
         duration: a < 1280 ? a : a < 2e3 ? 1280 : 0
+        // 单次笔迹时长超过2000ms不加动画
       };
       this.data[this.uuid].push(s), D(() => {
         this.emitStateChange({
@@ -232,7 +243,7 @@ class X extends k {
       this.openBrush();
       return;
     }
-    if (!!this.ready)
+    if (this.ready)
       switch (h) {
         case g.Drawline:
           const { state: o, timestamp: n, end: u } = t;

package/libs/components/PaintBrush/Subscribe.js

@@ -6,17 +6,47 @@ function v(f) {
   f[i] || delete f[i];
 }
 class E {
+  /**
+   * 判断是否注册了事件
+   * @param name  事件类型
+   */
   hasListener(t) {
     const e = r(this);
     return e && e[t] && e[t].length > 0;
   }
+  /**
+   * 注册事件
+   * @param  name    事件类型
+   * @param  callback 事件回调函数
+   * @param  once     是否只执行一次
+   * @returns 解除事件
+   * @template K 预设的监听事件名称
+   * @template C 回调函数函数上下文
+   */
   on(t, e, s) {
     const o = r(this);
     return o[t] || (o[t] = []), o[t].push([e, s || !1]), () => this.off(t, e);
   }
+  /**
+   * 注册事件(是否只执行一次)
+   * @param  name     事件类型
+   * @param  callback 事件回调函数
+   * @returns 解除事件
+   * @template K 预设的监听事件名称
+   * @template C 回调函数函数上下文
+   */
   once(t, e) {
     return this.on(t, e, !0);
   }
+  /**
+   * 解除事件
+   *
+   * 如果 name 不传的话解除对应所有事件
+   * 如果 name, callback 不传的话解除所有name的所有事件
+   * @param  name     事件类型
+   * @param  callback 事件回调函数
+   * @template K 预设的监听事件名称
+   */
   off(t, e) {
     if (t === void 0) {
       v(this);
@@ -32,6 +62,13 @@ class E {
       ;
     o < s[t].length && s[t].splice(o, 1);
   }
+  /**
+   * 触发事件
+   * @param  name  事件类型
+   * @param  data  触发事件的数据
+   * @returns canceled 是否被触发取消
+   * @template K 预设的监听事件名称
+   */
   emit(t, ...e) {
     let s = !1;
     const l = r(this)[t] || [];

package/libs/components/PaintBrush/index.js

@@ -2,13 +2,13 @@ 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 { Controller as l } from "./Controller.js";
-class u {
+class h {
   constructor(o = {}) {
     n(this, "controller");
     const t = Object.assign({
       currentColor: "#f44336",
-      onUndoText: "\u56DE\u9000",
-      onExitText: "\u5173\u95ED"
+      onUndoText: "回退",
+      onExitText: "关闭"
     }, o);
     this.controller = new l(t);
   }
@@ -21,18 +21,31 @@ class u {
   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;
   }
+  /**
+   * 销毁。
+   *
+   * @deprecated
+   *
+   * @description 画笔应该维护一个 **全局单例**，重复利用。
+   */
   dispose() {
     return this.controller.destroyBrush();
   }
@@ -41,5 +54,5 @@ class u {
   }
 }
 export {
-  u as PaintBrush
+  h as PaintBrush
 };

package/libs/components/PaintBrush/tween.js

@@ -1,8 +1,8 @@
-import { Tween as m, Easing as s } from "@tweenjs/tween.js";
+import { Tween as m, Easing as s } from "../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 function c(t, r, a, i = s.Linear.None) {
   const e = new m(t).to(r, a).easing(i).start();
   function n(o) {
-    !e.update(o) || requestAnimationFrame(n);
+    e.update(o) && requestAnimationFrame(n);
   }
   return requestAnimationFrame(n), e;
 }

package/libs/components/index.js

@@ -1,2 +1,2 @@
 import "./PaintBrush/utils.js";
-import "@tweenjs/tween.js";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";