@versa_ai/vmml-editor 1.0.2

package/src/components/CloseLayer.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import "../assets/css/closeLayer.scss";
+const CloseLayer = ({ show = false, cancel, confirm }: { show: boolean; cancel: () => void; confirm: () => void }) => {
+	return (
+		show && (
+			<>
+				<div className="closeLayer">
+					<div>
+						<p>
+							确定关闭吗？ <br />
+							关闭后将不保存涂鸦操作
+						</p>
+						<div>
+							<p onClick={cancel}>取消</p>
+							<div />
+							<p onClick={confirm}>确定</p>
+						</div>
+					</div>
+				</div>
+			</>
+		)
+	);
+};
+
+export default CloseLayer;

package/src/components/ColorSelector.tsx

@@ -0,0 +1,90 @@
+import "../assets/css/colorSelector.scss";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { iconText1, iconText2 } from "../utils/const";
+interface Props {
+	colors: string[];
+	currentColor: string;
+	onSelectColor: (color: string) => void;
+}
+const colorList = [
+	{ colorName: "white", colorValue: "rgb(255,255,255)" },
+	{ colorName: "black", colorValue: "rgb(0,0,0)" },
+	{ colorName: "gray", colorValue: "rgb(153,153,153)" },
+	{ colorName: "red", colorValue: "rgb(248,82,81)" },
+	{ colorName: "orange", colorValue: "rgb(250,158,60)" },
+	{ colorName: "yellow", colorValue: "rgb(255,196,0)" },
+	{ colorName: "lightGreen", colorValue: "rgb(145,212,0)" },
+	{ colorName: "green", colorValue: "rgb(0,181,212)" },
+	{ colorName: "lightBlue", colorValue: "rgb(0,183,244)" },
+	{ colorName: "blue", colorValue: "rgb(23,120,255)" },
+	{ colorName: "purple", colorValue: "rgb(82,95,255)" },
+];
+
+const ColorSelector = forwardRef(({ onColorChange, onBackGroundChange }: any, ref: any) => {
+	// const [currentColor, setCurrentColor] = useState("red");
+	const [currentColorItem, setCurrentColorItem] = useState<any>(colorList.find((color) => color.colorName === "red"));
+	const [currentBack, setCurrentBgColor] = useState<string | null>(null);
+	const [isSetBack, setIsSetBack] = useState(false);
+	const setColorClass = (item: any) => {
+		const { colorName } = currentColorItem;
+		const classes = [
+			item.colorName === "black" && "black-border",
+			item.colorName === colorName && "current",
+			"color-item",
+		]
+			.filter(Boolean)
+			.join(" ");
+		return classes;
+	};
+
+	const handleColorClick = (item: any) => {
+		setCurrentColorItem(item);
+		onColorChange(item);
+	};
+
+	const handleChangeBackGround = () => {
+		const setBgStatus = new Promise<void>((resolve, reject) => {
+			setIsSetBack(!isSetBack);
+			resolve();
+		});
+		//暴露到父组件调用
+		setBgStatus.then(() => {
+			onBackGroundChange(currentColorItem);
+		});
+	};
+	const getBackState = () => {
+		return isSetBack;
+	};
+	useImperativeHandle(ref, () => ({
+		getBackState,
+		setIsSetBack,
+		setCurrentColorItem,
+	}));
+	return (
+		<div className="color-selector">
+			<div
+				className="text_bg_change"
+				onClick={() => {
+					handleChangeBackGround();
+				}}
+			>
+				<img alt="" src={isSetBack ? iconText2 : iconText1} style={{ width: "100%", height: "100%" }} />
+			</div>
+			<div className="text_color_change">
+				{colorList.map((item: any) => {
+					return (
+						<div
+							className={setColorClass(item)}
+							key={item.colorName}
+							style={{ backgroundColor: item.colorValue }}
+							onClick={() => {
+								handleColorClick(item);
+							}}
+						/>
+					);
+				})}
+			</div>
+		</div>
+	);
+});
+export default ColorSelector;

package/src/components/Controls.tsx

@@ -0,0 +1,32 @@
+import { formatTime } from "@versa_ai/vmml-utils"
+import { pauseIcon, playIcon } from "../utils/const"
+import SeekBar from "./SeekBar"
+
+const Controls = ({ player, vmmlRef, frame, fps, durationInFrames, intoEdit, isPlaying, setDragState, onControlsClick, signList }: any) => {
+  const onClickToggle = (e: any) => {
+    if (isPlaying) {
+      intoEdit();
+    } else {
+      onControlsClick();
+    }
+  }
+  
+  return (
+    <div className="player-controls">
+      <div className="player-controls-toggle mr-16 opacity-06" onClick={onClickToggle}>
+        { isPlaying ? <img src={pauseIcon} alt="暂停" /> : <img src={playIcon} alt="播放" /> }
+      </div>
+      <div className="player-controls-time opacity-06">
+        {formatTime(frame / fps)}
+      </div>
+      <div className="player-controls-seekbar mr-16">
+        <SeekBar player={player} vmmlRef={vmmlRef} frame={frame} durationInFrames={durationInFrames} intoEdit={intoEdit} setDragState={setDragState} signList={signList} />
+      </div>
+      <div className="player-controls-time opacity-06">
+        {formatTime(durationInFrames / fps)}
+      </div>
+    </div>
+  )
+}
+
+export default Controls