@versa_ai/vmml-editor 1.0.56 → 1.0.58

package/dist/index.mjs

@@ -1027,7 +1027,7 @@ function usePeekControl(canvas, hideConfig) {
   return canvas;
 }
 var EditorCanvas = forwardRef(
-  ({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, editClips = [], onVideoChange, isBatchModify, hideConfig, textWarapCenter, updateVmml }, ref) => {
+  ({ lockInBounds, previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, editClips = [], onVideoChange, isBatchModify, hideConfig, textWarapCenter, updateVmml }, ref) => {
     const [fc, setFc] = useState(null);
     const [history, setHistory] = useState(null);
     const [canvasReady, setCanvasReady] = useState(false);
@@ -1037,6 +1037,8 @@ var EditorCanvas = forwardRef(
     const heightScaleRef = useRef(1);
     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,
@@ -1111,6 +1113,46 @@ var EditorCanvas = forwardRef(
         const active = canvas.getActiveObject();
         handleIntoTextMenu(active, canvas);
       });
+      canvas.on("object:moving", (e) => {
+        if (!lockInBoundsRef.current) return;
+        const obj = e.target;
+        const canvasWidth = canvas.getWidth();
+        const canvasHeight = canvas.getHeight();
+        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) => {
       active.isSelected++;
@@ -1272,7 +1314,9 @@ var EditorCanvas = forwardRef(
             top,
             angle: posParam.rotationZ,
             originX: "center",
+            // 圆点：中心点
             originY: "center",
+            // 圆点：中心点
             clipData: {
               id: clip.id,
               isMute: null,
@@ -1331,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);
@@ -1404,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
       };
     };
@@ -1706,6 +1754,9 @@ var EditorCanvas = forwardRef(
         }
       }
     }, [fc]);
+    useEffect(() => {
+      lockInBoundsRef.current = lockInBounds;
+    }, [lockInBounds]);
     const getCanvasCtx = () => {
       return fc;
     };
@@ -2506,6 +2557,7 @@ var EditorFn = ({
   textWarapCenter = false,
   backgroundColor = "#000",
   existenceBorderRadio = true,
+  lockInBounds = false,
   hideConfig = { hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
   // { hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
 }, ref) => {
@@ -3000,6 +3052,7 @@ var EditorFn = ({
         /* @__PURE__ */ jsx(
           EditorCanvas_default,
           {
+            lockInBounds,
             ref: canvasRef,
             previewState,
             showCanvas,