@8btc/whiteboard 0.0.20-alpha.16 → 0.0.20-alpha.18

package/dist/index.js

@@ -335,7 +335,6 @@ vi = new WeakMap(), de = new WeakMap(), Cs = new WeakMap(), Ss = new WeakMap(),
  */
 Zf = function() {
   b(this, de).on("transformstart", b(this, Cs)), b(this, de).on("transform", b(this, Ss)), b(this, de).on("transformend", b(this, ks)), b(this, de).on("dragstart", b(this, Es)), b(this, de).on("dragmove", b(this, Ts)), b(this, de).on("dragend", b(this, Ms)), b(this, de).on("pointerdblclick", (e) => {
-    console.log("Transformer double clicked", e);
     const t = b(this, de).nodes();
     if (t.length === 1) {
       const r = t[0];
@@ -18401,17 +18400,27 @@ class US extends nr {
     });
     L(this, xr, async () => {
       const t = this.htmlEditorElement.getBoundingClientRect();
-      if (!(t.width === 0 || t.height === 0))
-        return VS(this.htmlEditorElement, {
-          width: t.width,
-          height: t.height,
-          pixelRatio: 3
-        }).then((r) => {
-          const i = this.element.getClientRect();
-          this.element.image(r), this.element.width(i.width), this.element.height(i.height);
-        }).catch((r) => {
-          console.error("Failed to render text to canvas:", r);
-        });
+      if (t.width === 0 || t.height === 0)
+        return;
+      this.htmlElement.style.opacity = "1", this.element.opacity(0);
+      const r = t.width / (this.core.getState().viewport.scale / this.config.scaleWhenCreate), i = t.height / (this.core.getState().viewport.scale / this.config.scaleWhenCreate);
+      return VS(this.htmlEditorElement, {
+        width: r,
+        height: i,
+        pixelRatio: 2,
+        canvasWidth: r * 2,
+        canvasHeight: i * 2
+      }).then((o) => {
+        this.element.image(o), this.element.width(
+          t.width / this.core.getState().viewport.scale
+        ), this.element.height(
+          t.height / this.core.getState().viewport.scale
+        );
+      }).catch((o) => {
+        console.error("Failed to render text to canvas:", o);
+      }).finally(() => {
+        this.htmlElement.style.opacity = "0", this.element.opacity(1);
+      });
     });
     W(this, "detachEditor", () => {
       this.editor && (this.htmlElement.id = "", this.htmlEditorElement.innerHTML = this.editor.getHTML(), this.config.$_htmlContent = this.editor.getHTML(), this.editor.commands.blur(), this.htmlElement.style.pointerEvents = "none", this.element.listening(!0), this.core.isEditingText = !1, this.core._unregisterTextEditor(), window.removeEventListener("keydown", b(this, Mi)), window.removeEventListener("click", b(this, Ai)), this.editor.destroy(), this.editor = void 0, b(this, xr).call(this).then(() => {
@@ -18420,7 +18429,7 @@ class US extends nr {
     });
     L(this, yn, () => {
       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 / this.config.htmlScale * this.config.scaleWhenCreate / this.core.getState().viewport.scale}px` : this.htmlEditorElement.style.width = "auto", this.htmlEditorElement.style.transform = `scale(${this.config.htmlScale})`;
+      this.htmlElement.style.left = `${t.x}px`, this.htmlElement.style.top = `${t.y}px`, this.config.lockX ? this.htmlEditorElement.style.width = `${this.element.width() / this.config.htmlScale * this.config.scaleWhenCreate}px` : this.htmlEditorElement.style.width = "max-content", this.htmlEditorElement.style.transform = `scale(${this.config.htmlScale})`;
     });
     L(this, Ds, () => {
       this.resizeObserver = new ResizeObserver((t) => {
@@ -18506,7 +18515,6 @@ Xm = function() {
     t.width(t.width() * t.scaleX()), t.height(t.height() * t.scaleY()), this.config.htmlScale = this.config.htmlScale * t.scaleX(), t.setAttr("htmlScale", this.config.htmlScale), t.scale({ x: 1, y: 1 }), b(this, yn).call(this);
   }), t.on("transformend", (r) => {
     this.syncConfigFromElement(), this.core._rebuildStateAfterNodeChange(this, !0), b(this, xr).call(this).then(() => {
-      this.htmlElement.style.transition = "opacity 0.1s", this.element.opacity(1), this.htmlElement.style.opacity = "0";
     });
   }), t.on("dragmove", () => {
     b(this, yn).call(this);

package/package.json

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