@versa_ai/vmml-editor 1.0.30 → 1.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versa_ai/vmml-editor",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "module": "dist/index.mjs",
   "main": "dist/index.mjs",
   "types": "dist/index.d.mts",

package/src/assets/css/index.scss

@@ -78,98 +78,101 @@
       width: 100%;
       height: 100%;
     }
-    .controls-box {
+    
+  }
+
+  .controls-box {
+      position: relative;
       height: 12vw;
-      position: absolute;
-      bottom: 0;
+      // position: absolute;
+      // bottom: 0;
       width: 100%;
       border-radius: 3.2vw;
+  }
+  .player-controls {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 2.13vw;
+    box-sizing: border-box;
+    background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
+    .mr-16 {
+      margin-right: 2.13vw;
     }
-    .player-controls {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      padding: 0 2.13vw;
-      box-sizing: border-box;
-      background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
-      .mr-16 {
-        margin-right: 2.13vw;
-      }
-      .player-controls-toggle {
-        >img {
-          display: block;
-          width: 4.8vw;
-          height: 4.8vw;
-          cursor: pointer;
-        }
+    .player-controls-toggle {
+      >img {
+        display: block;
+        width: 4.8vw;
+        height: 4.8vw;
+        cursor: pointer;
       }
-      .player-controls-seekbar {
-        flex: 1;
+    }
+    .player-controls-seekbar {
+      flex: 1;
+      position: relative;
+      .seekbar-container {
+        height: 100%;
+        user-select: none;
+        touch-action: none;
         position: relative;
-        .seekbar-container {
-          height: 100%;
+        cursor: pointer;
+        box-sizing: border-box;
+        .seekbar-background {
           user-select: none;
-          touch-action: none;
-          position: relative;
-          cursor: pointer;
-          box-sizing: border-box;
-          .seekbar-background {
+          height: 1.6vw;
+          width: 100%;
+          background-color: rgba(255, 255, 255, 0.2);
+          border-radius: 1vw;
+          .seekbar-fill {
+            position: absolute;
             user-select: none;
-            height: 1.6vw;
             width: 100%;
-            background-color: rgba(255, 255, 255, 0.2);
+            height: 100%;
             border-radius: 1vw;
-            .seekbar-fill {
-              position: absolute;
-              user-select: none;
-              width: 100%;
-              height: 100%;
-              border-radius: 1vw;
-            }
-            .seekbar-line {
-              height: 100%;
-              border-radius: 1vw;
-              background-color: #eeeeee;
-            }
-            .seekbar-sign {
-              width: 10px;
-              position: absolute;
-              top: 50%;
-              margin-top: -6px;
-            }
-            .seekbar-cirle {
-              position: absolute;
-              top: -0.8vw;
-              width: 3.2vw;
-              height: 3.2vw;
-              border-radius: 50%;
-              background: #eeeeee;
-            }
+          }
+          .seekbar-line {
+            height: 100%;
+            border-radius: 1vw;
+            background-color: #eeeeee;
+          }
+          .seekbar-sign {
+            width: 10px;
+            position: absolute;
+            top: 50%;
+            margin-top: -6px;
+          }
+          .seekbar-cirle {
+            position: absolute;
+            top: -0.8vw;
+            width: 3.2vw;
+            height: 3.2vw;
+            border-radius: 50%;
+            background: #eeeeee;
           }
         }
       }
-      .player-controls-time {
-        width: 10vw;
-        color: #fff;
-      }
     }
-    .play-btn {
-      position: absolute;
-      bottom: 4vw;
-      left: 3vw;
-      width: 4.8vw;
-      height: 4.8vw;
-      img {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
+    .player-controls-time {
+      width: 10vw;
+      color: #fff;
     }
-    .opacity-06 {
-      opacity: 0.6;
+  }
+  .play-btn {
+    position: absolute;
+    bottom: 4vw;
+    left: 3vw;
+    width: 4.8vw;
+    height: 4.8vw;
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
     }
   }
+  .opacity-06 {
+    opacity: 0.6;
+  }
 
   //底部
   .footer{

package/src/components/EditorCanvas.tsx

@@ -8,7 +8,7 @@ import { usePeekControl } from "../utils/usePeekControl";
 import { toSvg } from 'dom-to-image'
 
 const EditorCanvas = forwardRef(
-	({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, editClips = [], onVideoChange, isBatchModify, hideConfig }: any, ref: any) => {
+	({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, editClips = [], onVideoChange, isBatchModify, hideConfig, textWarapCenter }: any, ref: any) => {
 		const [fc, setFc] = useState<any>(null);
 		const [history, setHistory] = useState<any>(null);
 		const [canvasReady, setCanvasReady] = useState(false);
@@ -480,6 +480,7 @@ const EditorCanvas = forwardRef(
 		lines.forEach((line: string) => {
 			const p = document.createElement('p');
 			p.style.position = 'relative';
+			p.style.display = 'flex';
 			p.style.fontSize = '22px';
 			p.style.lineHeight = '22px';
 			p.style.fontFamily = fontFamily;
@@ -488,6 +489,7 @@ const EditorCanvas = forwardRef(
 			p.style.padding = '0';
 			if (letterSpacing) p.style.letterSpacing = `${letterSpacing}px`;
 			p.style.zIndex = '2'
+			if (textWarapCenter) p.style.justifyContent = 'center' 
 
 			const fill = document.createElement('span');
 			fill.textContent = line || ' ';
@@ -498,11 +500,18 @@ const EditorCanvas = forwardRef(
 			const stroke = document.createElement('span');
 			stroke.textContent = line || ' ';
 			stroke.style.position = 'absolute';
-			stroke.style.left = '0';
-			stroke.style.top = '0';
+			
 			stroke.style.color = 'transparent';
 			stroke.style.webkitTextStrokeWidth = `${strokeW}px`;
 			stroke.style.webkitTextStrokeColor = stColor;
+			if (textWarapCenter) {
+				stroke.style.left = "50%";
+				stroke.style.top = "50%";
+				stroke.style.transform = 'translate(-50%, -50%)';
+			} else {
+				stroke.style.left = '0';
+				stroke.style.top = '0';
+			}
 			stroke.style.zIndex = '-1'
 
 			p.appendChild(fill);

package/src/index.tsx

@@ -29,6 +29,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		height = '100vh',
 		pauseWhenBuffering = false,
 		isBatchModify = false,
+		textWarapCenter = false,
 		hideConfig = null // { hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
 	}: any,
 	ref: any,
@@ -435,6 +436,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		console.log(v, vmmlState, isSame, '判断vmml是否相同')
 
 		needPlay.current = false
+		once.current = false
 
 		const convertedVmml = convertVmmlTextScaleByForbidden(v);
 		if (!isSame) { // vmml改变再重新刷新canvas
@@ -504,6 +506,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 				}}>
 					<section className={`main ${menuState === 'text' ? 'text-style' : ''}`}>
 						<div className="vessel" onClick={onClickMain}>
+							{/* 编辑器 */}
 							<VmmlPlayer
 								ref={vmmlPlayerRef}
 								vmml={vmmlState}
@@ -516,42 +519,47 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 								premountFor={40}
 								pauseWhenBuffering={pauseWhenBuffering}
 								filterIds={filterIds}
+								textWarapCenter={textWarapCenter}
 							/>
 						</div>
-					<EditorCanvas
-						ref={canvasRef}
-						previewState={previewState}
-						showCanvas={showCanvas}
-						canvasSize={canvasSize}
-						enterPreview={enterPreview}
-						intoTextEdit={intoTextEdit}
-						frame={frame}
-						vmml={vmmlState}
-						dragState={dragState}
-						initFcObjs={initFcObjs}
-						editClips={editClips}
-						onVideoChange={onVideoChange}
-						isBatchModify={isBatchModify}
-						hideConfig={hideConfig}
-						// textInfoReset={textInfoReset}
-					/>
-						<div className="controls-box">
-							<Controls
-								player={player}
-								vmmlRef={vmmlPlayerRef}
-								fps={fps}
-								durationInFrames={durationInFrames}
-								intoEdit={intoEdit}
-								frame={frame}
-								isPlaying={isPlaying}
-								setDragState={setDragState}
-								onControlsClick={onControlsClick}
-								signList={signList}
-							/>
-						</div>
+						{/* 编辑器 */}
+						<EditorCanvas
+							ref={canvasRef}
+							previewState={previewState}
+							showCanvas={showCanvas}
+							canvasSize={canvasSize}
+							enterPreview={enterPreview}
+							intoTextEdit={intoTextEdit}
+							frame={frame}
+							vmml={vmmlState}
+							dragState={dragState}
+							initFcObjs={initFcObjs}
+							editClips={editClips}
+							onVideoChange={onVideoChange}
+							isBatchModify={isBatchModify}
+							hideConfig={hideConfig}
+							textWarapCenter={textWarapCenter}
+							// textInfoReset={textInfoReset}
+						/>
+						
 						<Loaidng show={loading} />
 					</section>
 				</div>
+				{/* 控制器 */}
+				<div className="controls-box">
+					<Controls
+						player={player}
+						vmmlRef={vmmlPlayerRef}
+						fps={fps}
+						durationInFrames={durationInFrames}
+						intoEdit={intoEdit}
+						frame={frame}
+						isPlaying={isPlaying}
+						setDragState={setDragState}
+						onControlsClick={onControlsClick}
+						signList={signList}
+					/>
+				</div>
 				<div className="padding-box"></div>
 					{
 						(maxText > 0 || maxVideo > 0) && <section style={menuStyles} className={`footer ${menuState === 'text' ? 'text-style' : ''}`}>
@@ -618,5 +626,6 @@ export const Editor = forward(EditorFn);
 * @param pauseWhenBuffering 播放是否有缓冲状态，默认：false.
 * @param isBatchModify 是否批量更新 默认：false.
 * @param hideConfig 编辑框四个角的显示配置 默认：{ hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
+* @param textWarapCenter 文字是否居中 默认：false
 */