@versa_ai/vmml-editor 1.0.55 → 1.0.57

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.55 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.57 build D:\code\work\vmml-player\packages\editor
 > tsup
 
 CLI Building entry: src/index.tsx
@@ -9,6 +9,7 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
+DTS Build start
 
  WARN  ▲ [WARNING] Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
 
@@ -66,7 +67,6 @@ More info and automated migrator: https://sass-lang.com/d/slash-div [35
 
 
 
-DTS Build start
 
  WARN  ▲ [WARNING] Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
 
@@ -124,12 +124,12 @@ More info and automated migrator: https://sass-lang.com/d/slash-div [35
 
 
 
-CJS dist\index.js     122.48 KB
-CJS dist\index.js.map 235.03 KB
-CJS ⚡️ Build success in 756ms
-ESM dist\index.mjs     120.61 KB
-ESM dist\index.mjs.map 234.73 KB
-ESM ⚡️ Build success in 757ms
-DTS ⚡️ Build success in 1764ms
+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
 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,7 @@ 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 initCanvas = () => {
       const canvas = new fabric.fabric.Canvas("canvas", {
         width: canvasSize.width,
@@ -1114,9 +1115,27 @@ var EditorCanvas = react.forwardRef(
         vmmlConverterRef.current.changeMute(clipData);
       });
       canvas.on("object:textEdit", (e) => {
+        console.log("1111111111");
         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();
+        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 imitateDBclick = (active, canvas) => {
       active.isSelected++;
@@ -1278,7 +1297,9 @@ var EditorCanvas = react.forwardRef(
             top,
             angle: posParam.rotationZ,
             originX: "center",
+            // 圆点：中心点
             originY: "center",
+            // 圆点：中心点
             clipData: {
               id: clip.id,
               isMute: null,
@@ -1712,6 +1733,9 @@ var EditorCanvas = react.forwardRef(
         }
       }
     }, [fc]);
+    react.useEffect(() => {
+      lockInBoundsRef.current = lockInBounds;
+    }, [lockInBounds]);
     const getCanvasCtx = () => {
       return fc;
     };
@@ -2500,6 +2524,7 @@ var EditorFn = ({
   maxText = 10,
   maxVideo = 5,
   videoMenus = [],
+  controls = true,
   onMenuChange,
   showTextButtons = false,
   editableArray = [],
@@ -2511,6 +2536,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) => {
@@ -3005,6 +3031,7 @@ var EditorFn = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           EditorCanvas_default,
           {
+            lockInBounds,
             ref: canvasRef,
             previewState,
             showCanvas,
@@ -3025,7 +3052,7 @@ var EditorFn = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsx(Loading_default, { show: loading })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "controls-box", children: /* @__PURE__ */ jsxRuntime.jsx(
+      controls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "controls-box", children: /* @__PURE__ */ jsxRuntime.jsx(
         Controls_default,
         {
           backgroundColor,