@8btc/whiteboard 0.0.20-alpha.30 → 0.0.20-alpha.31

package/dist/index.js

@@ -7,7 +7,7 @@ var p = (n, i, t) => kn(n, typeof i != "symbol" ? i + "" : i, t), Fe = (n, i, t)
 var r = (n, i, t) => (Fe(n, i, "read from private field"), t ? t.call(n) : i.get(n)), g = (n, i, t) => i.has(n) ? ai("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(n) : i.set(n, t), x = (n, i, t, e) => (Fe(n, i, "write to private field"), e ? e.call(n, t) : i.set(n, t), t), E = (n, i, t) => (Fe(n, i, "access private method"), t);
 import { jsxs as k, jsx as c, Fragment as Ie } from "react/jsx-runtime";
 import { useState as R, useEffect as Z, useRef as Ue, useMemo as St, forwardRef as $, createContext as Rn, isValidElement as li, version as $n, cloneElement as An, useContext as Fn, Fragment as Hn, useCallback as J, memo as ct } from "react";
-import _ from "konva";
+import M from "konva";
 import { N as b, R as N, I as Q } from "./const-BJHbPsA9.js";
 import Ln from "mitt";
 import { Editor as Dn } from "@tiptap/core";
@@ -172,7 +172,7 @@ class ms {
         targetIds: Array.isArray(s) ? s.map((o) => o.id()) : s ? [s.id()] : []
       });
     });
-    x(this, T, i), x(this, S, new _.Stage({
+    x(this, T, i), x(this, S, new M.Stage({
       id: "canvas-stage",
       container: t.container,
       width: t.width,
@@ -241,12 +241,12 @@ T = new WeakMap(), S = new WeakMap(), tt = new WeakMap(), ne = new WeakMap(), se
 _i = function() {
   r(this, S).on("wheel", r(this, ne)), r(this, S).on("pointerdown", r(this, se)), r(this, S).on("pointermove", r(this, oe)), r(this, S).on("pointerup", r(this, re)), r(this, S).on("dragstart", r(this, ae)), r(this, S).on("dragmove", r(this, le)), r(this, S).on("dragend", r(this, he)), r(this, S).on("contextmenu", r(this, ce));
 };
-var Lt, I, ge, ue, me, fe, pe, ye, ve, Mi;
+var Lt, _, ge, ue, me, fe, pe, ye, ve, Mi;
 class fs {
   constructor(i, t) {
     g(this, ve);
     g(this, Lt);
-    g(this, I);
+    g(this, _);
     /**
      * 处理 transformstart 事件
      */
@@ -283,7 +283,7 @@ class fs {
     g(this, ye, () => {
       this.emitPositionChange();
     });
-    x(this, Lt, i), x(this, I, new _.Transformer({
+    x(this, Lt, i), x(this, _, new M.Transformer({
       rotateEnabled: t?.rotateEnabled ?? !0,
       ignoreStroke: t?.ignoreStroke ?? !0,
       anchorSize: t?.anchorSize ?? 8,
@@ -297,21 +297,21 @@ class fs {
    * 获取原生 Konva.Transformer 实例
    */
   getTransformer() {
-    return r(this, I);
+    return r(this, _);
   }
   /**
    * 获取 Transformer 的位置信息
    */
   getPosition() {
-    if (r(this, I).nodes().length === 0)
+    if (r(this, _).nodes().length === 0)
       return null;
-    const t = r(this, I).getClientRect();
+    const t = r(this, _).getClientRect();
     return {
       x: t.x,
       y: t.y,
       width: t.width,
       height: t.height,
-      rotation: r(this, I).rotation()
+      rotation: r(this, _).rotation()
     };
   }
   /**
@@ -322,30 +322,39 @@ class fs {
       this.clearNodes();
       return;
     }
-    r(this, I).nodes(i), r(this, I).moveToTop(), r(this, I).rotateEnabled(
+    r(this, _).nodes(i), r(this, _).moveToTop(), r(this, _).rotateEnabled(
       !i.some(
         (t) => ["rich-text", "html"].includes(t.getAttr("$_type"))
       )
-    ), i.length === 1 && i[0].getAttr("$_type") === "rich-text" && r(this, I).enabledAnchors([
+    ), i.length === 1 && i[0].getAttr("$_type") === "rich-text" ? r(this, _).enabledAnchors([
       "top-left",
       "top-right",
       "bottom-left",
       "bottom-right",
       "middle-left",
       "middle-right"
-    ]), i.length === 1 && i[0].getAttr("$_type") === "arrow" ? r(this, I).visible(!1) : r(this, I).visible(!0), this.emitPositionChange();
+    ]) : i.length === 1 && i[0].getAttr("$_type") === "arrow" ? (r(this, _).enabledAnchors([]), r(this, _).rotateEnabled(!1), r(this, _).borderStroke("transparent")) : (r(this, _).visible(!0), r(this, _).rotateEnabled(!0), r(this, _).enabledAnchors([
+      "top-left",
+      "top-center",
+      "top-right",
+      "middle-right",
+      "middle-left",
+      "bottom-left",
+      "bottom-center",
+      "bottom-right"
+    ]), r(this, _).borderStroke("rgb(0, 161, 255)")), this.emitPositionChange();
   }
   /**
    * 获取当前变换的节点
    */
   getNodes() {
-    return r(this, I).nodes();
+    return r(this, _).nodes();
   }
   /**
    * 清除所有节点
    */
   clearNodes() {
-    r(this, I).nodes([]), this.emitPositionChange();
+    r(this, _).nodes([]), this.emitPositionChange();
   }
   /**
    * emit Transformer 位置
@@ -358,15 +367,15 @@ class fs {
    * 销毁 Transformer
    */
   destroy() {
-    r(this, I).destroy();
+    r(this, _).destroy();
   }
 }
-Lt = new WeakMap(), I = new WeakMap(), ge = new WeakMap(), ue = new WeakMap(), me = new WeakMap(), fe = new WeakMap(), pe = new WeakMap(), ye = new WeakMap(), ve = new WeakSet(), /**
+Lt = new WeakMap(), _ = new WeakMap(), ge = new WeakMap(), ue = new WeakMap(), me = new WeakMap(), fe = new WeakMap(), pe = new WeakMap(), ye = new WeakMap(), ve = new WeakSet(), /**
  * 设置事件监听器
  */
 Mi = function() {
-  r(this, I).on("transformstart", r(this, ge)), r(this, I).on("transform", r(this, ue)), r(this, I).on("transformend", r(this, me)), r(this, I).on("dragstart", r(this, fe)), r(this, I).on("dragmove", r(this, pe)), r(this, I).on("dragend", r(this, ye)), r(this, I).on("pointerdblclick", (i) => {
-    const t = r(this, I).nodes();
+  r(this, _).on("transformstart", r(this, ge)), r(this, _).on("transform", r(this, ue)), r(this, _).on("transformend", r(this, me)), r(this, _).on("dragstart", r(this, fe)), r(this, _).on("dragmove", r(this, pe)), r(this, _).on("dragend", r(this, ye)), r(this, _).on("pointerdblclick", (i) => {
+    const t = r(this, _).nodes();
     if (t.length === 1) {
       const e = t[0];
       e.fire("pointerdblclick", {
@@ -790,7 +799,7 @@ class ws extends st {
     this.config = e;
   }
   createElement() {
-    return new _.Rect(this.config);
+    return new M.Rect(this.config);
   }
   /**
    * 获取 Konva.Rect 实例
@@ -870,7 +879,7 @@ class bs extends st {
     this.config = e;
   }
   createElement() {
-    return new _.Image(this.config);
+    return new M.Image(this.config);
   }
   /**
    * 获取 Konva.Image 实例
@@ -947,7 +956,7 @@ Le = function() {
   l.forEach((f) => {
     const m = d.find((u) => u.id === f.id());
     if (m?.$_type === "image-marker" && m.$_relativeBox) {
-      const { start: u, end: y } = m.$_relativeBox, w = s + u.ratioX * a, v = o + u.ratioY * h, M = s + y.ratioX * a, C = o + y.ratioY * h, B = Math.min(w, M), dt = Math.min(v, C), K = Math.abs(M - w), q = Math.abs(C - v);
+      const { start: u, end: y } = m.$_relativeBox, w = s + u.ratioX * a, v = o + u.ratioY * h, I = s + y.ratioX * a, C = o + y.ratioY * h, B = Math.min(w, I), dt = Math.min(v, C), K = Math.abs(I - w), q = Math.abs(C - v);
       f.setAttrs({
         x: B,
         y: dt,
@@ -990,14 +999,14 @@ class Es extends st {
     return this.config;
   }
   createElement() {
-    const t = Math.max(this.config.width ?? N.MIN_SIZE, N.MIN_SIZE), e = Math.max(this.config.height ?? N.MIN_SIZE, N.MIN_SIZE), s = new _.Group({
+    const t = Math.max(this.config.width ?? N.MIN_SIZE, N.MIN_SIZE), e = Math.max(this.config.height ?? N.MIN_SIZE, N.MIN_SIZE), s = new M.Group({
       id: this.config.id,
       name: `${b.nodeRoot} ${b.imageMarker} ${this.config.$_parentId}`,
       x: this.config.x,
       y: this.config.y,
       width: t,
       height: e
-    }), o = this.core.getStageScale(), a = 2 / o, h = [5 / o, 5 / o], l = N.CORNER_RADIUS / o, d = new _.Rect({
+    }), o = this.core.getStageScale(), a = 2 / o, h = [5 / o, 5 / o], l = N.CORNER_RADIUS / o, d = new M.Rect({
       name: "rect",
       x: 0,
       y: 0,
@@ -1008,17 +1017,17 @@ class Es extends st {
       dash: h,
       cornerRadius: l,
       listening: !1
-    }), f = new _.Group({
+    }), f = new M.Group({
       name: "marker-group",
       x: t,
       y: e,
       visible: !this.isDraft
-    }), m = 14 / o, u = 3 / o, y = 16 / o, w = new _.Circle({
+    }), m = 14 / o, u = 3 / o, y = 16 / o, w = new M.Circle({
       radius: m,
       fill: this.config.markerColor,
       stroke: "white",
       strokeWidth: u
-    }), v = new _.Text({
+    }), v = new M.Text({
       x: -m,
       y: -m,
       width: m * 2,
@@ -1129,7 +1138,7 @@ class Ss extends st {
     this.config = e;
   }
   createElement() {
-    return new _.Rect(this.config);
+    return new M.Rect(this.config);
   }
   /**
    * 获取 Konva.Rect 实例
@@ -1219,7 +1228,7 @@ class Ns extends st {
         this.core.on("viewport:change", f), window.addEventListener("click", d), window.addEventListener("touchstart", d);
       });
     });
-    this.core = t, this.config = mi(e, this.core.getTheme()), this.element = this.createElement(), this.rect = new _.Rect(this.config), rt(this.element, this), this.isDraft = s, E(this, be, Di).call(this), setTimeout(() => {
+    this.core = t, this.config = mi(e, this.core.getTheme()), this.element = this.createElement(), this.rect = new M.Rect(this.config), rt(this.element, this), this.isDraft = s, E(this, be, Di).call(this), setTimeout(() => {
       r(this, we).call(this);
     });
   }
@@ -1234,7 +1243,7 @@ class Ns extends st {
     this.config = e;
   }
   createElement() {
-    return new _.Text(this.config);
+    return new M.Text(this.config);
   }
   /**
    * 获取 Konva.Text 实例
@@ -1384,7 +1393,7 @@ class Ts extends st {
     delete e.image, this.config = e;
   }
   createElement() {
-    return new _.Image({ ...this.config });
+    return new M.Image({ ...this.config });
   }
   /**
    * 获取 Konva.Rect 实例
@@ -1470,11 +1479,11 @@ class _s extends st {
     this.config = e;
   }
   createElement() {
-    const t = new _.Group({
+    const t = new M.Group({
       ...this.config,
       width: void 0,
       height: void 0
-    }), e = new _.Image({
+    }), e = new M.Image({
       ...this.config,
       name: "",
       id: `${this.config.id}-image`,
@@ -1483,7 +1492,7 @@ class _s extends st {
       listening: !1
     });
     t.add(e);
-    const s = new _.Rect({
+    const s = new M.Rect({
       name: "",
       x: 0,
       y: 0,
@@ -1493,7 +1502,7 @@ class _s extends st {
       listening: !1
     });
     t.add(s);
-    const o = new _.RegularPolygon({
+    const o = new M.RegularPolygon({
       x: this.config.width / 2,
       // 微调使其视觉居中
       y: this.config.height / 2,
@@ -1603,7 +1612,7 @@ class Ms extends st {
     this.config = e;
   }
   createElement() {
-    return new _.Star(this.config);
+    return new M.Star(this.config);
   }
   /**
    * 获取 Konva.Star 实例
@@ -1677,7 +1686,7 @@ class ks extends st {
     this.config = e;
   }
   createElement() {
-    return new _.Ellipse(this.config);
+    return new M.Ellipse(this.config);
   }
   /**
    * 获取 Konva.Ellipse 实例
@@ -1750,7 +1759,7 @@ class $s extends st {
     this.config = e;
   }
   createElement() {
-    return new _.Line(this.config);
+    return new M.Line(this.config);
   }
   /**
    * 获取 Konva.Line 实例
@@ -1826,7 +1835,7 @@ class As extends st {
     this.config = e;
   }
   createElement() {
-    return new _.Arrow(this.config);
+    return new M.Arrow(this.config);
   }
   /**
    * 获取 Konva.Arrow 实例
@@ -1860,7 +1869,7 @@ Ui = function() {
   const t = this.core.getMainLayer();
   if (!t) return;
   const e = this.core.getStageScale(), s = 6 / e, o = 2 / e;
-  x(this, A, new _.Circle({
+  x(this, A, new M.Circle({
     radius: s,
     fill: "white",
     stroke: "#1976d2",
@@ -1868,7 +1877,7 @@ Ui = function() {
     draggable: !0,
     visible: !1,
     name: "arrow-anchor"
-  })), x(this, F, new _.Circle({
+  })), x(this, F, new M.Circle({
     radius: s,
     fill: "white",
     stroke: "#1976d2",
@@ -2101,7 +2110,7 @@ class Ls extends ps {
       height: t.clientHeight,
       draggable: !1,
       className: "touch-none"
-    })), x(this, j, new _.Layer()), x(this, it, new fs(this)), r(this, D).getStage().add(r(this, j)), r(this, j).add(r(this, it).getTransformer()), this._renderCanvas(o), E(this, U, Yi).call(this), E(this, U, Gi).call(this);
+    })), x(this, j, new M.Layer()), x(this, it, new fs(this)), r(this, D).getStage().add(r(this, j)), r(this, j).add(r(this, it).getTransformer()), this._renderCanvas(o), E(this, U, Yi).call(this), E(this, U, Gi).call(this);
   }
   /**
    * 获取当前主题
@@ -2246,7 +2255,7 @@ class Ls extends ps {
     a.forEach((C) => {
       C.$_type === "image-marker" && typeof C.$_markerNumber == "number" && (h = Math.max(h, C.$_markerNumber));
     });
-    const l = (e.x - o.x) / o.width, d = (e.y - o.y) / o.height, f = (s.x - o.x) / o.width, m = (s.y - o.y) / o.height, u = Math.min(e.x, s.x), y = Math.min(e.y, s.y), w = Math.abs(s.x - e.x), v = Math.abs(s.y - e.y), M = {
+    const l = (e.x - o.x) / o.width, d = (e.y - o.y) / o.height, f = (s.x - o.x) / o.width, m = (s.y - o.y) / o.height, u = Math.min(e.x, s.x), y = Math.min(e.y, s.y), w = Math.abs(s.x - e.x), v = Math.abs(s.y - e.y), I = {
       id: Tt(),
       $_type: "image-marker",
       x: u,
@@ -2268,7 +2277,7 @@ class Ls extends ps {
         }
       }
     };
-    this.createNodes([M], !0);
+    this.createNodes([I], !0);
   }
   /**
    * 在指定位置查找图片节点
@@ -2388,7 +2397,7 @@ class Ls extends ps {
    * @internal 仅供内部使用
    */
   _createSelectRect() {
-    this.isEditingText || (r(this, Y) && r(this, Y).destroy(), x(this, Y, new _.Rect({
+    this.isEditingText || (r(this, Y) && r(this, Y).destroy(), x(this, Y, new M.Rect({
       x: r(this, G)[0].x,
       y: r(this, G)[0].y,
       width: 0,
@@ -2412,7 +2421,7 @@ class Ls extends ps {
     });
     const s = r(this, Y).getClientRect(), a = r(this, j).find(`.${b.selectable}`).filter((h) => {
       const l = h.getClientRect();
-      return _.Util.haveIntersection(s, l);
+      return M.Util.haveIntersection(s, l);
     });
     this._selectNodes(
       a.length > 0 ? a.filter((h) => h.listening()).map((h) => h.id()) : void 0,
@@ -2665,7 +2674,7 @@ class Ds extends Ls {
     const t = this.getState().selectedNodeIds || [];
     if (t.length === 0)
       return console.warn("No selection to export"), null;
-    const e = i?.padding ?? 0, s = new _.Group();
+    const e = i?.padding ?? 0, s = new M.Group();
     t.forEach((h) => {
       const l = this.getStage().findOne(`#${h}`);
       if (l) {
@@ -2698,7 +2707,7 @@ class Ds extends Ls {
     );
     if (o.length === 0)
       return console.warn("No image-marker nodes found for the given image ID"), null;
-    const a = new _.Group(), h = e.clone();
+    const a = new M.Group(), h = e.clone();
     a.add(h);
     const l = t?.markerScale ?? 1;
     o.forEach((m) => {
@@ -2706,8 +2715,8 @@ class Ds extends Ls {
       if (u) {
         const y = u.clone(), w = y.findOne(".rect"), v = y.findOne(".marker-group");
         if (w && (w.strokeWidth(3 * l), w.dash([5 * l, 5 * l]), w.cornerRadius(6 * l)), v) {
-          const M = v.findOne("Circle"), C = v.findOne("Text");
-          if (M && (M.radius(14 * l), M.strokeWidth(3 * l)), C) {
+          const I = v.findOne("Circle"), C = v.findOne("Text");
+          if (I && (I.radius(14 * l), I.strokeWidth(3 * l)), C) {
             const B = 14 * l;
             C.x(-B), C.y(-B), C.width(B * 2), C.height(B * 2), C.fontSize(16 * l);
           }
@@ -2838,10 +2847,10 @@ class Ds extends Ls {
           a = Math.min(a, ni), h = Math.min(h, si), l = Math.max(l, ni + En), d = Math.max(d, si + Sn);
       }
     }), a === 1 / 0 || h === 1 / 0) return;
-    const v = l - a, M = d - h, C = a + v / 2, B = h + M / 2;
+    const v = l - a, I = d - h, C = a + v / 2, B = h + I / 2;
     let K = this.getState().viewport.scale;
     if (s) {
-      const z = (this.getStage().width() - e * 2) / v, xt = (this.getStage().height() - e * 2) / M;
+      const z = (this.getStage().width() - e * 2) / v, xt = (this.getStage().height() - e * 2) / I;
       K = Math.min(z, xt, 1);
     }
     const q = this.getStage().width() / 2 - C * K, Ct = this.getStage().height() / 2 - B * K;
@@ -2942,7 +2951,7 @@ function Bs({
       "aria-hidden": "true",
       children: [
         /* @__PURE__ */ c("defs", { children: Ei.map(({ min: l, mid: d, step: f }, m) => {
-          const u = f * e * h, y = 0.5 + o * h, w = 0.5 + a * h, v = y > 0 ? y % u : u + y % u, M = w > 0 ? w % u : u + w % u, C = h < d ? Ps(h, [l, d], [0, 1]) : 1;
+          const u = f * e * h, y = 0.5 + o * h, w = 0.5 + a * h, v = y > 0 ? y % u : u + y % u, I = w > 0 ? w % u : u + w % u, C = h < d ? Ps(h, [l, d], [0, 1]) : 1;
           return /* @__PURE__ */ c(
             "pattern",
             {
@@ -2955,7 +2964,7 @@ function Bs({
                 {
                   className: "grid-dot",
                   cx: v,
-                  cy: M,
+                  cy: I,
                   r: 1,
                   opacity: C
                 }
@@ -3336,15 +3345,15 @@ function Ys({
     }
   }), y = cs(m, {
     enabled: t == null
-  }), w = ds(m), v = gs(m, { role: "tooltip" }), M = us([u, y, w, v]);
+  }), w = ds(m), v = gs(m, { role: "tooltip" }), I = us([u, y, w, v]);
   return St(
     () => ({
       open: l,
       setOpen: d,
-      ...M,
+      ...I,
       ...f
     }),
-    [l, d, M, f]
+    [l, d, I, f]
   );
 }
 const Ve = Rn(null);
@@ -3531,7 +3540,7 @@ const At = $(
       label: y,
       canToggle: w,
       isActive: v,
-      Icon: M,
+      Icon: I,
       shortcutKeys: C
     } = eo({
       editor: f,
@@ -3561,7 +3570,7 @@ const At = $(
         ...l,
         ref: d,
         children: h ?? /* @__PURE__ */ k(Ie, { children: [
-          /* @__PURE__ */ c(M, { className: "tiptap-button-icon" }),
+          /* @__PURE__ */ c(I, { className: "tiptap-button-icon" }),
           t && /* @__PURE__ */ c("span", { className: "tiptap-button-text", children: t }),
           o && /* @__PURE__ */ c(Ks, { type: i, shortcutKeys: C })
         ] })
@@ -4079,7 +4088,7 @@ const mn = $(
     const { editor: y } = yt(n), {
       isVisible: w,
       canColorHighlight: v,
-      isActive: M,
+      isActive: I,
       handleColorHighlight: C,
       label: B,
       shortcutKeys: dt
@@ -4108,13 +4117,13 @@ const mn = $(
       {
         type: "button",
         variant: "ghost",
-        "data-active-state": M ? "on" : "off",
+        "data-active-state": I ? "on" : "off",
         role: "button",
         tabIndex: -1,
         disabled: !v,
         "data-disabled": !v,
         "aria-label": B,
-        "aria-pressed": M,
+        "aria-pressed": I,
         tooltip: B,
         onClick: K,
         style: q,
@@ -4287,7 +4296,7 @@ function Qe(n) {
       const C = l.chain().focus().toggleNodeBackgroundColor(y).run();
       return C && h?.({ color: y, label: t, mode: o }), C;
     }
-  }, [u, y, l, t, h, o]), M = J(() => {
+  }, [u, y, l, t, h, o]), I = J(() => {
     const C = lo(l, o);
     return C && h?.({ color: "", label: "Remove highlight", mode: o }), C;
   }, [l, h, o]);
@@ -4305,7 +4314,7 @@ function Qe(n) {
     isVisible: f,
     isActive: w,
     handleColorHighlight: v,
-    handleRemoveHighlight: M,
+    handleRemoveHighlight: I,
     canColorHighlight: u,
     label: t || "Highlight",
     shortcutKeys: Oe,
@@ -4470,7 +4479,7 @@ const vn = $(
       isVisible: y,
       canTextColor: w,
       isActive: v,
-      handleTextColor: M,
+      handleTextColor: I,
       label: C,
       shortcutKeys: B
     } = ii({
@@ -4482,9 +4491,9 @@ const vn = $(
       onApplied: s
     }), dt = J(
       (q) => {
-        a?.(q), !q.defaultPrevented && (M(), q.preventDefault(), q.stopPropagation());
+        a?.(q), !q.defaultPrevented && (I(), q.preventDefault(), q.stopPropagation());
       },
-      [M, a]
+      [I, a]
     ), K = St(
       () => ({
         ...l,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@8btc/whiteboard",
   "private": false,
-  "version": "0.0.20-alpha.30",
+  "version": "0.0.20-alpha.31",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",