@versa_ai/vmml-editor 1.0.57 → 1.0.59

package/dist/index.mjs

@@ -1038,6 +1038,7 @@ var EditorCanvas = forwardRef(
     const widthScaleRef = useRef(1);
     const fontCacheRef = useRef(/* @__PURE__ */ new Map());
     const lockInBoundsRef = useRef(lockInBounds);
+    const lastValidScaleRef = useRef(null);
     const initCanvas = () => {
       const canvas = new fabric.Canvas("canvas", {
         width: canvasSize.width,
@@ -1109,7 +1110,6 @@ var EditorCanvas = forwardRef(
         vmmlConverterRef.current.changeMute(clipData);
       });
       canvas.on("object:textEdit", (e) => {
-        console.log("1111111111");
         const active = canvas.getActiveObject();
         handleIntoTextMenu(active, canvas);
       });
@@ -1118,17 +1118,40 @@ var EditorCanvas = 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) => {
@@ -1352,6 +1375,7 @@ var EditorCanvas = 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 = getFontSize(width, height);
@@ -1425,8 +1449,11 @@ var EditorCanvas = forwardRef(
         rx: round,
         ry: round
       });
+      let list = [];
+      if (bgColor && isVisibleColor(bgColor)) list = [bgRect, ...textObjs];
+      else list = [...textObjs];
       return {
-        objects: [bgRect, ...textObjs],
+        objects: list,
         fontFamily
       };
     };