@versa_ai/vmml-editor 1.0.56 → 1.0.58

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.56 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     122.51 KB
-CJS dist\index.js.map 235.18 KB
-CJS ⚡️ Build success in 803ms
-ESM dist\index.mjs     120.64 KB
-ESM dist\index.mjs.map 234.88 KB
-ESM ⚡️ Build success in 804ms
-DTS ⚡️ Build success in 1791ms
+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

@@ -1033,7 +1033,7 @@ function usePeekControl(canvas, hideConfig) {
   return canvas;
 }
 var EditorCanvas = react.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] = react.useState(null);
     const [history, setHistory] = react.useState(null);
     const [canvasReady, setCanvasReady] = react.useState(false);
@@ -1043,6 +1043,8 @@ var EditorCanvas = react.forwardRef(
     const heightScaleRef = react.useRef(1);
     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,
@@ -1117,6 +1119,46 @@ var EditorCanvas = react.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++;
@@ -1278,7 +1320,9 @@ var EditorCanvas = react.forwardRef(
             top,
             angle: posParam.rotationZ,
             originX: "center",
+            // 圆点：中心点
             originY: "center",
+            // 圆点：中心点
             clipData: {
               id: clip.id,
               isMute: null,
@@ -1337,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);
@@ -1410,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
       };
     };
@@ -1712,6 +1760,9 @@ var EditorCanvas = react.forwardRef(
         }
       }
     }, [fc]);
+    react.useEffect(() => {
+      lockInBoundsRef.current = lockInBounds;
+    }, [lockInBounds]);
     const getCanvasCtx = () => {
       return fc;
     };
@@ -2512,6 +2563,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) => {
@@ -3006,6 +3058,7 @@ var EditorFn = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           EditorCanvas_default,
           {
+            lockInBounds,
             ref: canvasRef,
             previewState,
             showCanvas,