@versa_ai/vmml-editor 1.0.57 → 1.0.58

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.57 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.58 build D:\code\work\vmml-player\packages\editor
 > tsup
 
 CLI Building entry: src/index.tsx
@@ -124,12 +124,12 @@ More info and automated migrator: https://sass-lang.com/d/slash-div [35
 
 
 
-CJS dist\index.js     123.55 KB
-CJS dist\index.js.map 237.48 KB
-CJS ⚡️ Build success in 779ms
-ESM dist\index.mjs     121.66 KB
-ESM dist\index.mjs.map 237.17 KB
-ESM ⚡️ Build success in 780ms
-DTS ⚡️ Build success in 1976ms
+ESM dist\index.mjs     122.67 KB
+ESM dist\index.mjs.map 239.53 KB
+ESM ⚡️ Build success in 3480ms
+CJS dist\index.js     124.56 KB
+CJS dist\index.js.map 239.83 KB
+CJS ⚡️ Build success in 3480ms
+DTS ⚡️ Build success in 3938ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -1044,6 +1044,7 @@ var EditorCanvas = react.forwardRef(
     const widthScaleRef = react.useRef(1);
     const fontCacheRef = react.useRef(/* @__PURE__ */ new Map());
     const lockInBoundsRef = react.useRef(lockInBounds);
+    const lastValidScaleRef = react.useRef(null);
     const initCanvas = () => {
       const canvas = new fabric.fabric.Canvas("canvas", {
         width: canvasSize.width,
@@ -1115,7 +1116,6 @@ var EditorCanvas = react.forwardRef(
         vmmlConverterRef.current.changeMute(clipData);
       });
       canvas.on("object:textEdit", (e) => {
-        console.log("1111111111");
         const active = canvas.getActiveObject();
         handleIntoTextMenu(active, canvas);
       });
@@ -1124,17 +1124,40 @@ var EditorCanvas = react.forwardRef(
         const obj = e.target;
         const canvasWidth = canvas.getWidth();
         const canvasHeight = canvas.getHeight();
-        let left = obj.left;
-        let top = obj.top;
-        let w = obj.width;
-        let h = obj.height;
-        const paddingX = 15;
-        const paddingY = 10;
-        if (left <= w / 2 - paddingX) left = w / 2 - paddingX;
-        if (left >= canvasWidth - (w / 2 - paddingX - 2.5)) left = canvasWidth - (w / 2 - paddingX - 2.5);
-        if (top <= (h - paddingY) / 2) top = (h - paddingY) / 2;
-        if (top >= canvasHeight - (h - paddingY) / 2) top = canvasHeight - (h - paddingY) / 2;
-        obj.set({ left, top }).setCoords();
+        const scaleX = obj.scaleX ?? 1;
+        const scaleY = obj.scaleY ?? 1;
+        const width = obj.width * scaleX;
+        const height = obj.height * scaleY;
+        let left = obj.left ?? 0;
+        let top = obj.top ?? 0;
+        const halfW = width / 2;
+        const halfH = height / 2;
+        if (left - halfW < 0) left = halfW;
+        if (left + halfW > canvasWidth) left = canvasWidth - halfW;
+        if (top - halfH < 0) top = halfH;
+        if (top + halfH > canvasHeight) top = canvasHeight - halfH;
+        obj.set({ left, top });
+      });
+      canvas.on("object:scaling", (e) => {
+        if (!lockInBoundsRef.current) return;
+        const obj = e.target;
+        obj.setCoords();
+        const bounds = obj.getBoundingRect();
+        const canvasWidth = canvas.getWidth();
+        const canvasHeight = canvas.getHeight();
+        const outOfBounds = bounds.left < 0 || bounds.top < 0 || bounds.left + bounds.width > canvasWidth || bounds.top + bounds.height > canvasHeight;
+        if (outOfBounds) {
+          if (lastValidScaleRef.current) {
+            obj.set(lastValidScaleRef.current).setCoords();
+          }
+        } else {
+          lastValidScaleRef.current = {
+            scaleX: obj.scaleX,
+            scaleY: obj.scaleY,
+            left: obj.left,
+            top: obj.top
+          };
+        }
       });
     };
     const imitateDBclick = (active, canvas) => {
@@ -1358,6 +1381,7 @@ var EditorCanvas = react.forwardRef(
       });
       window.dispatchEvent(event);
     };
+    const isVisibleColor = (color) => !!color && color !== "transparent" && !/rgba\([^)]*,\s*0\s*\)$/.test(color);
     const createTextObjs = async ({ strokeW, stColor, fontAssetUrl = null, letterSpace, bgColor, textContent, textBasicInfo, textColor }) => {
       const { width, height } = vmml.template.dimension;
       const fontSize = vmmlUtils.getFontSize(width, height);
@@ -1431,8 +1455,11 @@ var EditorCanvas = react.forwardRef(
         rx: round,
         ry: round
       });
+      let list = [];
+      if (bgColor && isVisibleColor(bgColor)) list = [bgRect, ...textObjs];
+      else list = [...textObjs];
       return {
-        objects: [bgRect, ...textObjs],
+        objects: list,
         fontFamily
       };
     };