@8btc/whiteboard 0.0.20-alpha.6 → 0.0.20-alpha.7

package/dist/index.js

@@ -9,7 +9,7 @@ import { jsxs as ce, jsx as E, Fragment as Mr } from "react/jsx-runtime";
 import * as T from "react";
 import nt, { useState as ye, useEffect as be, useRef as et, useContext as Ar, createContext as Or, useLayoutEffect as As, useDebugValue as ty, forwardRef as xe, useMemo as nn, isValidElement as iu, version as ny, cloneElement as ry, Fragment as iy, useCallback as Qe, memo as $t } from "react";
 import me from "konva";
-import { N as ie, I as ut, R as te } from "./const-CNw7pZuI.js";
+import { N as oe, I as ut, R as te } from "./const-CNw7pZuI.js";
 import oy from "mitt";
 import { v4 as Vr } from "uuid";
 import { Slot as sy } from "@radix-ui/react-slot";
@@ -133,7 +133,7 @@ class my {
         return;
       const t = b(this, X).getPointerPosition(), r = e.target;
       let i = null;
-      r.getParent()?.className === "Transformer" ? i = r.getParent().nodes() : r === b(this, X) ? i = r : (i = r.findAncestor((o) => o.hasName(ie.selectable), !0), i && b(this, Q)._selectNodes([i.id()])), b(this, Q)._showContextMenu({
+      r.getParent()?.className === "Transformer" ? i = r.getParent().nodes() : r === b(this, X) ? i = r : (i = r.findAncestor((o) => o.hasName(oe.selectable), !0), i && b(this, Q)._selectNodes([i.id()])), b(this, Q)._showContextMenu({
         x: t ? t.x : 0,
         y: t ? t.y : 0,
         clientX: e.evt.clientX,
@@ -519,7 +519,7 @@ function ou(n, e) {
     ...i,
     width: t,
     height: r,
-    name: `${ie.nodeRoot} ${ie.selectable} ${ie.rect}`,
+    name: `${oe.nodeRoot} ${oe.selectable} ${oe.rect}`,
     draggable: !0
   };
 }
@@ -532,7 +532,7 @@ function su(n, e) {
   return {
     ...n,
     ...i,
-    name: `${ie.nodeRoot} ${ie.selectable} ${ie.image}`,
+    name: `${oe.nodeRoot} ${oe.selectable} ${oe.image}`,
     draggable: !0
   };
 }
@@ -545,7 +545,7 @@ function lu(n, e) {
   return {
     ...n,
     ...i,
-    name: `${ie.nodeRoot} ${ie.selectable} ${ie.video}`,
+    name: `${oe.nodeRoot} ${oe.selectable} ${oe.video}`,
     draggable: !0
   };
 }
@@ -556,7 +556,7 @@ function au(n, e) {
     ...i,
     width: t,
     height: r,
-    name: `${ie.nodeRoot} ${ie.imageMarker} ${n.$_parentId}`
+    name: `${oe.nodeRoot} ${oe.imageMarker} ${n.$_parentId}`
   };
 }
 function cu(n, e) {
@@ -566,7 +566,7 @@ function cu(n, e) {
     ...i,
     width: t,
     height: r,
-    name: `${ie.nodeRoot} ${ie.selectable} ${ie.html}`,
+    name: `${oe.nodeRoot} ${oe.selectable} ${oe.html}`,
     draggable: !0
   };
 }
@@ -580,7 +580,7 @@ function uu(n, e) {
     align: "left",
     ...n,
     ...t,
-    name: `${ie.nodeRoot} ${ie.selectable} ${ie.text}`,
+    name: `${oe.nodeRoot} ${oe.selectable} ${oe.text}`,
     draggable: !0
   };
 }
@@ -590,7 +590,7 @@ function du(n, e) {
     cornerRadius: 0,
     ...n,
     ...t,
-    name: `${ie.nodeRoot} ${ie.selectable} ${ie.richText}`,
+    name: `${oe.nodeRoot}  ${oe.richText}`,
     draggable: !0
   };
 }
@@ -835,7 +835,7 @@ class Sy extends Qn {
   createElement() {
     const t = Math.max(this.config.width ?? te.MIN_SIZE, te.MIN_SIZE), r = Math.max(this.config.height ?? te.MIN_SIZE, te.MIN_SIZE), i = new me.Group({
       id: this.config.id,
-      name: `${ie.nodeRoot} ${ie.imageMarker} ${this.config.$_parentId}`,
+      name: `${oe.nodeRoot} ${oe.imageMarker} ${this.config.$_parentId}`,
       x: this.config.x,
       y: this.config.y,
       width: t,
@@ -17901,7 +17901,7 @@ class CC extends Qn {
     W(this, "resizeObserver");
     W(this, "editor");
     W(this, "attachEditor", () => {
-      this.element.listening(!1), this.core._selectNodes(), this.core.isEditingText = !0, this.htmlElement.style.pointerEvents = "auto";
+      this.htmlElement.id = "rich-text-html-element", this.element.listening(!1), this.core._selectNodes(), this.core.isEditingText = !0, this.htmlElement.style.pointerEvents = "auto";
       const t = this.htmlEditorElement.innerHTML;
       this.htmlEditorElement.innerHTML = "";
       const r = new ww({
@@ -17921,11 +17921,11 @@ class CC extends Qn {
       }), window.addEventListener("keydown", b(this, xi));
     });
     W(this, "detachEditor", () => {
-      this.editor && (this.htmlEditorElement.innerHTML = this.editor.getHTML(), this.config.$_htmlContent = this.editor.getHTML(), this.editor.commands.blur(), this.editor.destroy(), this.editor = void 0, this.htmlElement.style.pointerEvents = "none", this.element.listening(!0), this.core.isEditingText = !1, this.core._unregisterTextEditor(), window.removeEventListener("keydown", b(this, xi)), window.removeEventListener("click", b(this, Ci)));
+      this.editor && (this.htmlElement.id = "", this.htmlEditorElement.innerHTML = this.editor.getHTML(), this.config.$_htmlContent = this.editor.getHTML(), this.editor.commands.blur(), this.editor.destroy(), this.editor = void 0, this.htmlElement.style.pointerEvents = "none", this.element.listening(!0), this.core.isEditingText = !1, this.core._unregisterTextEditor(), window.removeEventListener("keydown", b(this, xi)), window.removeEventListener("click", b(this, Ci)));
     });
     P(this, Jt, () => {
       const t = this.element.getClientRect();
-      this.htmlElement.style.left = `${t.x}px`, this.htmlElement.style.top = `${t.y}px`, this.config.lockX ? this.htmlEditorElement.style.width = `${t.width}px` : this.htmlEditorElement.style.width = "auto", this.htmlEditorElement.style.transform = `scale(${this.config.htmlScale})`, this.htmlElement.style.transform = `scale(${this.core.getState().viewport.scale * this.config.scaleWhenCreate})`;
+      this.htmlElement.style.left = `${t.x}px`, this.htmlElement.style.top = `${t.y}px`, this.config.lockX ? this.htmlEditorElement.style.width = `${t.width}px` : this.htmlEditorElement.style.width = "auto", this.htmlEditorElement.style.transform = `scale(${this.config.htmlScale})`, this.htmlElement.style.transform = `scale(${this.core.getState().viewport.scale / this.config.scaleWhenCreate})`;
     });
     P(this, Es, () => {
       this.resizeObserver = new ResizeObserver((t) => {
@@ -17952,7 +17952,7 @@ class CC extends Qn {
       const r = t.target;
       this.htmlElement.contains(r) || this.detachEditor();
     });
-    this.core = t, this.config = du(r, this.core.getTheme()), this.config.scaleWhenCreate = this.config.scaleWhenCreate || this.core.getState().viewport.scale || 1, this.config.htmlScale = this.config.htmlScale || 1, this.element = this.createElement(), tr(this.element, this), this.isDraft = i, this.htmlElement = document.createElement("div"), this.htmlElement.id = "rich-text-html-element", this.htmlElement.style.position = "absolute", this.htmlElement.style.pointerEvents = "none", this.htmlElement.style.overflowWrap = "break-word", this.htmlElement.style.transformOrigin = "top left", this.htmlElement.style.transform = `scale(${this.config.scaleWhenCreate})`, this.htmlEditorElement = document.createElement("div"), this.htmlEditorElement.style.transformOrigin = "top left", this.htmlEditorElement.innerHTML = this.config.$_htmlContent || "", this.htmlElement.appendChild(this.htmlEditorElement), this.core.getStage().content.appendChild(this.htmlElement), b(this, Es).call(this), ae(this, Ts, Cm).call(this), setTimeout(() => {
+    this.core = t, this.config = du(r, this.core.getTheme()), this.config.scaleWhenCreate = this.config.scaleWhenCreate || this.core.getState().viewport.scale || 1, this.config.htmlScale = this.config.htmlScale || 1, this.element = this.createElement(), tr(this.element, this), this.isDraft = i, this.htmlElement = document.createElement("div"), this.htmlElement.style.position = "absolute", this.htmlElement.style.pointerEvents = "none", this.htmlElement.style.overflowWrap = "break-word", this.htmlElement.style.transformOrigin = "top left", this.htmlEditorElement = document.createElement("div"), this.htmlEditorElement.style.transformOrigin = "top left", this.htmlEditorElement.innerHTML = this.config.$_htmlContent || "", this.htmlElement.appendChild(this.htmlEditorElement), this.core.getStage().content.appendChild(this.htmlElement), b(this, Es).call(this), ae(this, Ts, Cm).call(this), setTimeout(() => {
       b(this, Jt).call(this);
     });
   }
@@ -18564,7 +18564,7 @@ class MC extends yy {
       width: r.x - t.x,
       height: r.y - t.y
     });
-    const i = b(this, Ye).getClientRect(), s = b(this, lt).find(`.${ie.selectable}`).filter((l) => {
+    const i = b(this, Ye).getClientRect(), s = b(this, lt).find(`.${oe.selectable}`).filter((l) => {
       const a = l.getClientRect();
       return me.Util.haveIntersection(i, a);
     });
@@ -18590,7 +18590,7 @@ class MC extends yy {
       if (s.length === 0)
         b(this, bt).clearNodes();
       else {
-        const l = this.getStage().find(`.${ie.selectable}`).filter((a) => s.includes(a.id()));
+        const l = this.getStage().find(`.${oe.selectable}`).filter((a) => s.includes(a.id()));
         b(this, bt).setNodes(l);
       }
       this._updateState({ selectedNodeIds: s }, !1), this._emit("nodes:selected", s);
@@ -18664,7 +18664,7 @@ class MC extends yy {
   }
   // 在调整节点上下层级后调用，同步到 store 中
   _syncNodesZIndexToStore() {
-    const t = this.getStage().find(`.${ie.nodeRoot}`).map((s) => s.id()).filter((s) => s), r = this.getState().nodes || [], i = /* @__PURE__ */ new Map();
+    const t = this.getStage().find(`.${oe.nodeRoot}`).map((s) => s.id()).filter((s) => s), r = this.getState().nodes || [], i = /* @__PURE__ */ new Map();
     t.forEach((s, l) => {
       i.set(s, l);
     });
@@ -18943,7 +18943,7 @@ class AC extends MC {
     let s = 1 / 0, l = 1 / 0, a = -1 / 0, c = -1 / 0;
     const u = this.getMainLayer(), d = this.getState().selectedNodeIds || [], f = o && o.length > 0, h = !f && d.length > 0, p = f ? o : h ? d : null;
     if (u.children.forEach((k) => {
-      if (k.visible() && k.getClassName() !== "Transformer" && k.hasName(ie.selectable)) {
+      if (k.visible() && k.getClassName() !== "Transformer" && k.hasName(oe.selectable)) {
         if (p) {
           const R = k.id();
           if (!p.includes(R)) return;
@@ -20055,7 +20055,7 @@ function zt(n) {
 function Mc(n) {
   return Ws() ? n instanceof Node || n instanceof Ke(n).Node : !1;
 }
-function oe(n) {
+function ie(n) {
   return Ws() ? n instanceof Element || n instanceof Ke(n).Element : !1;
 }
 function mt(n) {
@@ -20091,7 +20091,7 @@ function js(n) {
 const ik = /transform|translate|scale|rotate|perspective|filter/, ok = /paint|layout|strict|content/, _n = (n) => !!n && n !== "none";
 let Tl;
 function Ac(n) {
-  const e = oe(n) ? pt(n) : n;
+  const e = ie(n) ? pt(n) : n;
   return _n(e.transform) || _n(e.translate) || _n(e.scale) || _n(e.rotate) || _n(e.perspective) || !Ks() && (_n(e.backdropFilter) || _n(e.filter)) || ik.test(e.willChange || "") || ok.test(e.contain || "");
 }
 function sk(n) {
@@ -20115,7 +20115,7 @@ function pt(n) {
   return Ke(n).getComputedStyle(n);
 }
 function qs(n) {
-  return oe(n) ? {
+  return ie(n) ? {
     scrollLeft: n.scrollLeft,
     scrollTop: n.scrollTop
   } : {
@@ -20163,7 +20163,7 @@ function Dm(n) {
   };
 }
 function Oc(n) {
-  return oe(n) ? n : n.contextElement;
+  return ie(n) ? n : n.contextElement;
 }
 function hr(n) {
   const e = Oc(n);
@@ -20195,11 +20195,11 @@ function Xn(n, e, t, r) {
   e === void 0 && (e = !1), t === void 0 && (t = !1);
   const i = n.getBoundingClientRect(), o = Oc(n);
   let s = Dt(1);
-  e && (r ? oe(r) && (s = hr(r)) : s = hr(n));
+  e && (r ? ie(r) && (s = hr(r)) : s = hr(n));
   const l = ak(o, t, r) ? Lm(o) : Dt(0);
   let a = (i.left + l.x) / s.x, c = (i.top + l.y) / s.y, u = i.width / s.x, d = i.height / s.y;
   if (o) {
-    const f = Ke(o), h = r && oe(r) ? Ke(r) : r;
+    const f = Ke(o), h = r && ie(r) ? Ke(r) : r;
     let p = f, m = Ea(p);
     for (; m && r && h !== p; ) {
       const g = hr(m), y = m.getBoundingClientRect(), v = pt(m), w = y.left + (m.clientLeft + parseFloat(v.paddingLeft)) * g.x, x = y.top + (m.clientTop + parseFloat(v.paddingTop)) * g.y;
@@ -20301,7 +20301,7 @@ function Jd(n, e, t) {
     r = fk(n, t);
   else if (e === "document")
     r = dk(zt(n));
-  else if (oe(e))
+  else if (ie(e))
     r = hk(e, t);
   else {
     const i = Lm(n);
@@ -20316,16 +20316,16 @@ function Jd(n, e, t) {
 }
 function _m(n, e) {
   const t = rn(n);
-  return t === e || !oe(t) || tn(t) ? !1 : pt(t).position === "fixed" || _m(t, e);
+  return t === e || !ie(t) || tn(t) ? !1 : pt(t).position === "fixed" || _m(t, e);
 }
 function pk(n, e) {
   const t = e.get(n);
   if (t)
     return t;
-  let r = En(n, [], !1).filter((l) => oe(l) && Rr(l) !== "body"), i = null;
+  let r = En(n, [], !1).filter((l) => ie(l) && Rr(l) !== "body"), i = null;
   const o = pt(n).position === "fixed";
   let s = o ? rn(n) : n;
-  for (; oe(s) && !tn(s); ) {
+  for (; ie(s) && !tn(s); ) {
     const l = pt(s), a = Ac(s);
     !a && l.position === "fixed" && (i = null), (o ? !a && !i : !a && l.position === "static" && !!i && (i.position === "absolute" || i.position === "fixed") || Oi(s) && !a && _m(n, s)) ? r = r.filter((u) => u !== s) : i = l, s = rn(s);
   }
@@ -20403,7 +20403,7 @@ function Bm(n, e) {
   if (!mt(n)) {
     let i = rn(n);
     for (; i && !tn(i); ) {
-      if (oe(i) && !Ml(i))
+      if (ie(i) && !Ml(i))
         return i;
       i = rn(i);
     }
@@ -20438,7 +20438,7 @@ const wk = {
   getClientRects: uk,
   getDimensions: gk,
   getScale: hr,
-  isElement: oe,
+  isElement: ie,
   isRTL: vk
 };
 function $m(n, e) {
@@ -23105,7 +23105,7 @@ function $E(n, e) {
     function Re(Z) {
       B() || J(Z, !1);
     }
-    if (oe(s.domReference)) {
+    if (ie(s.domReference)) {
       const Z = s.domReference, Ce = s.floating;
       return t && Z.addEventListener("mouseleave", F), f && Z.addEventListener("mousemove", D, {
         once: !0
@@ -23118,7 +23118,7 @@ function $E(n, e) {
     if (l && t && (D = m.current) != null && (D = D.__options) != null && D.blockPointerEvents && j()) {
       N.current = !0;
       const F = s.floating;
-      if (oe(s.domReference) && F) {
+      if (ie(s.domReference) && F) {
         var O;
         const Y = It(s.floating).body;
         Y.setAttribute(xf, "");
@@ -23398,14 +23398,14 @@ function GE(n, e) {
     if (v.current = !1, c === "click" && D || V || typeof y == "function" && !y(R))
       return;
     const O = cr(R), F = "[" + Ri("inert") + "]", Y = It(i.floating).querySelectorAll(F);
-    let Re = oe(O) ? O : null;
+    let Re = ie(O) ? O : null;
     for (; Re && !tn(Re); ) {
       const Ie = rn(Re);
-      if (tn(Ie) || !oe(Ie))
+      if (tn(Ie) || !ie(Ie))
         break;
       Re = Ie;
     }
-    if (Y.length && oe(O) && !uE(O) && // Clicked on a direct ancestor (e.g. FloatingOverlay).
+    if (Y.length && ie(O) && !uE(O) && // Clicked on a direct ancestor (e.g. FloatingOverlay).
     !Er(O, i.floating) && // If the target root element contains none of the markers, then the
     // element was injected after the floating element rendered.
     Array.from(Y).every((Ie) => !Er(Re, Ie)))
@@ -23466,7 +23466,7 @@ function GE(n, e) {
     const O = It(i.floating);
     l && (O.addEventListener("keydown", C ? _ : N, C), O.addEventListener("compositionstart", V), O.addEventListener("compositionend", D)), y && O.addEventListener(c, S ? j : L, S);
     let F = [];
-    return f && (oe(i.domReference) && (F = En(i.domReference)), oe(i.floating) && (F = F.concat(En(i.floating))), !oe(i.reference) && i.reference && i.reference.contextElement && (F = F.concat(En(i.reference.contextElement)))), F = F.filter((Y) => {
+    return f && (ie(i.domReference) && (F = En(i.domReference)), ie(i.floating) && (F = F.concat(En(i.floating))), !ie(i.reference) && i.reference && i.reference.contextElement && (F = F.concat(En(i.reference.contextElement)))), F = F.filter((Y) => {
       var Re;
       return Y !== ((Re = O.defaultView) == null ? void 0 : Re.visualViewport);
     }), F.forEach((Y) => {
@@ -23519,7 +23519,7 @@ function JE(n) {
   } = n, i = Hc(), o = T.useRef({}), [s] = T.useState(() => PE()), l = Vc() != null;
   if (process.env.NODE_ENV !== "production") {
     const h = r.reference;
-    h && !oe(h) && LE("Cannot pass a virtual element to the `elements.reference` option,", "as it must be a real DOM element. Use `refs.setPositionReference()`", "instead.");
+    h && !ie(h) && LE("Cannot pass a virtual element to the `elements.reference` option,", "as it must be a real DOM element. Use `refs.setPositionReference()`", "instead.");
   }
   const [a, c] = T.useState(r.reference), u = Nt((h, p, m) => {
     o.current.openEvent = h ? p : void 0, s.emit("openchange", {
@@ -23569,17 +23569,17 @@ function YE(n) {
       }
     }
   }), p = T.useCallback((w) => {
-    const x = oe(w) ? {
+    const x = ie(w) ? {
       getBoundingClientRect: () => w.getBoundingClientRect(),
       getClientRects: () => w.getClientRects(),
       contextElement: w
     } : w;
     a(x), h.refs.setReference(x);
   }, [h.refs]), m = T.useCallback((w) => {
-    (oe(w) || w === null) && (d.current = w, s(w)), (oe(h.refs.reference.current) || h.refs.reference.current === null || // Don't allow setting virtual elements using the old technique back to
+    (ie(w) || w === null) && (d.current = w, s(w)), (ie(h.refs.reference.current) || h.refs.reference.current === null || // Don't allow setting virtual elements using the old technique back to
     // `null` to support `positionReference` + an unstable `reference`
     // callback ref.
-    w !== null && !oe(w)) && h.refs.setReference(w);
+    w !== null && !ie(w)) && h.refs.setReference(w);
   }, [h.refs]), g = T.useMemo(() => ({
     ...h.refs,
     setReference: m,
@@ -23657,7 +23657,7 @@ function XE(n, e) {
     onFocus(h) {
       if (c.current) return;
       const p = cr(h.nativeEvent);
-      if (a && oe(p)) {
+      if (a && ie(p)) {
         if ($l() && !h.relatedTarget) {
           if (!d.current && !dE(p))
             return;
@@ -23668,7 +23668,7 @@ function XE(n, e) {
     },
     onBlur(h) {
       c.current = !1;
-      const p = h.relatedTarget, m = h.nativeEvent, g = oe(p) && p.hasAttribute(Ri("focus-guard")) && p.getAttribute("data-type") === "outside";
+      const p = h.relatedTarget, m = h.nativeEvent, g = ie(p) && p.hasAttribute(Ri("focus-guard")) && p.getAttribute("data-type") === "outside";
       u.current = window.setTimeout(() => {
         var y;
         const v = Na(s.domReference ? s.domReference.ownerDocument : document);
@@ -25639,7 +25639,7 @@ export {
   AC as CanvasApi,
   vy as DARK_THEME,
   Df as DEFAULT_THEME,
-  ie as NODE_NAMES,
+  oe as NODE_NAMES,
   nM as THEME_PRESETS,
   sM as TipTapBubbleMenu,
   iM as Whiteboard,

package/package.json

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