Merge pull request #25 from H5-Dooring/animate-patch

Animate patch

.github/workflows/main.yml

@@ -1,5 +1,8 @@
 name: build
-on: [push]
+on:
+  push:
+    branches:
+      - main
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest

packages/dooringx-example/src/plugin/formComponents/animateControl.tsx

@@ -118,7 +118,7 @@ const repeat = ['1', '2', '3', '4', '5', 'infinite'];
 
 const timeFunction: Record<string, string> = {
 	平滑: 'linear',
-	缓入: 'ease in',
+	缓入: 'ease-in',
 };
 
 let lastAnimate: AnimateItem[] = [];
@@ -302,17 +302,19 @@ function AnimateControl(props: AnimateControlProps) {
 			<Row style={{ padding: padding, justifyContent: 'space-around' }}>
 				{animate.length > 0 && (
 					<Button
-						onClick={() => {
+						onClick={async () => {
 							if (!isOmit) {
 								isOmit = true;
-								props.config.waitAnimate = true;
 								const cacheProps = animate;
+								await props.config.timelineNeedleConfig.resetFunc(false);
 								const data: IStoreData = deepCopy(store.getData());
+								props.config.waitAnimate = true;
 								data.block.forEach((v) => {
 									if (v.id === props.current.id) {
 										v.animate = [];
 									}
 								});
+								props.config.timelineNeedleConfig.status = 'pause';
 								store.setData(data);
 								setTimeout(() => {
 									const clone: IStoreData = deepCopy(store.getData());
@@ -323,10 +325,9 @@ function AnimateControl(props: AnimateControlProps) {
 									});
 									isOmit = false;
 									props.config.waitAnimate = false;
-									store.cleanLast();
+									props.config.timelineNeedleConfig.status = 'start';
 									store.setData(clone);
 									store.cleanLast();
-									props.config.timelineNeedleConfig.resetFunc();
 								});
 							}
 						}}

packages/dooringx-lib/src/components/blocks.tsx

@@ -8,6 +8,8 @@ import { transfer } from '../core/transfer';
 import { UserConfig } from '../config';
 import styles from '../index.less';
 import { RotateReset, RotateResizer } from '../core/rotateHandler';
+import { mergeAnimate } from '../core/utils/animate';
+
 interface BlockProps {
 	data: IBlockType;
 	context: 'edit' | 'preview';
@@ -95,39 +97,39 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 		props.data.fixed,
 	]);
 
-	const animateProps: CSSProperties = useMemo(() => {
-		const select: CSSProperties = {
-			animationName: '',
-			animationDelay: '',
-			animationDuration: '',
-			animationIterationCount: '',
-			//	animationFillMode: 'forwards',// 这个属性和transform冲突
-			animationTimingFunction: '',
+	const [force, animateForce] = useState(0);
+
+	useEffect(() => {
+		const fn = () => {
+			animateForce((p) => p + 1);
 		};
-		props.data.animate.forEach((v) => {
-			select.animationName =
-				select.animationName === ''
-					? v.animationName
-					: select.animationName + ',' + v.animationName;
-			select.animationDelay =
-				select.animationDelay === ''
-					? v.animationDelay + 's'
-					: select.animationDelay + ',' + v.animationDelay + 's';
-			select.animationDuration =
-				select.animationDuration === ''
-					? v.animationDuration + 's'
-					: select.animationDuration + ',' + v.animationDuration + 's';
-			select.animationIterationCount =
-				select.animationIterationCount === ''
-					? v.animationIterationCount
-					: select.animationIterationCount + ',' + v.animationIterationCount;
-			select.animationTimingFunction =
-				select.animationTimingFunction === ''
-					? v.animationTimingFunction
-					: select.animationTimingFunction + ',' + v.animationTimingFunction;
+		props.config.blockForceUpdate.push(fn);
+		const unload = () => {
+			props.config.blockForceUpdate = props.config.blockForceUpdate.filter((v) => v !== fn);
+		};
+		return () => {
+			unload();
+		};
+	}, [animateForce, props.config]);
+
+	const [animateProps, animationEdit]: [CSSProperties, CSSProperties] = useMemo(() => {
+		const [normal, editProps] = mergeAnimate(props.data.animate, {
+			isPause: props.config.timelineNeedleConfig.status !== 'start' ? true : false,
+			delay:
+				props.config.timelineNeedleConfig.status === 'stop'
+					? props.config.timelineNeedleConfig.current
+					: 0,
 		});
-		return select;
-	}, [props.data.animate]);
+		return [
+			{
+				animation: normal,
+			},
+			{
+				animation: editProps,
+			},
+		];
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [props.data.animate, props.config.timelineNeedleConfig, force]);
 
 	const render = useMemo(() => {
 		// 如果是编辑模式下，则需要包裹不能选中层，位移层，缩放控制层，平面移动层。
@@ -167,7 +169,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						<div
 							style={{
 								...style,
-								...animateProps,
+								...animationEdit,
 							}}
 						>
 							{state}
@@ -180,7 +182,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 								pointerEvents: 'none',
 								width: '100%',
 								height: '100%',
-								...animateProps,
+								...animationEdit,
 							}}
 						>
 							{state}
@@ -191,7 +193,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						<span
 							style={{
 								pointerEvents: 'none',
-								...animateProps,
+								...animationEdit,
 							}}
 						>
 							{state}
@@ -214,10 +216,9 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						zIndex: props.data.zIndex,
 						display: props.data.display,
 						transform: `rotate(${props.data.rotate.value}deg)`,
-						...animateProps,
 					}}
 				>
-					{state}
+					<div style={{ ...animateProps }}>{state}</div>
 				</div>
 			);
 		}
@@ -225,14 +226,15 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 		state,
 		props.context,
 		props.data,
-		props.config,
 		props.iframe,
+		props.config,
 		innerDragData,
-		animateProps,
+		animationEdit,
 		previewState.top,
 		previewState.left,
 		previewState.width,
 		previewState.height,
+		animateProps,
 	]);
 	return render;
 }

packages/dooringx-lib/src/components/timeLine/timeline.tsx

@@ -16,7 +16,9 @@ import {
 	EyeInvisibleOutlined,
 	EyeOutlined,
 	MenuOutlined,
+	PauseCircleOutlined,
 	PlayCircleOutlined,
+	ReloadOutlined,
 } from '@ant-design/icons';
 import {
 	TimeLineItem,
@@ -43,7 +45,10 @@ export interface TimeLineNeedleConfigType {
 	status: 'stop' | 'start' | 'pause';
 	runFunc: Function;
 	resetFunc: Function;
+	pauseFunc: Function;
 	current: number;
+	isRefresh: boolean;
+	setNeedle: Function;
 }
 
 const animateTicker = new Array(iter).fill(1).map((_, y) => y);
@@ -165,9 +170,84 @@ const SortableList = SortableContainer(
 
 let cacheBlock: IBlockType[] = [];
 
-// const needleWidth = 2;
-// const initialLeft = 20 - needleWidth / 2;
-// let timer: number | null = null;
+const needleWidth = 2;
+const initialLeft = 20 - needleWidth / 2;
+const needleHeadWidth = 15;
+const needleHeadHeight = 22;
+
+let timer: number | null = null;
+
+const needleState = {
+	isDrag: false,
+	startX: 0,
+	origin: 0,
+};
+
+const needleHeadEvent = (
+	setNeedle: React.Dispatch<React.SetStateAction<number>>,
+	config: UserConfig
+) => {
+	return {
+		onMouseDown: async (e: React.MouseEvent) => {
+			e.persist();
+			e.stopPropagation();
+			if (
+				config.timelineNeedleConfig.status === 'start' ||
+				!config.timelineNeedleConfig.isRefresh
+			) {
+				await config.timelineNeedleConfig.resetFunc();
+			}
+			setNeedle((p) => {
+				needleState.origin = p;
+				return p;
+			});
+			needleState.isDrag = true;
+			needleState.startX = e.clientX;
+			config.blockForceUpdate.forEach((v) => {
+				v();
+			});
+			if (timer) {
+				window.clearInterval(timer);
+			}
+		},
+	};
+};
+export const needleMoveEvent = (config: UserConfig) => {
+	const setNeedle = config.timelineNeedleConfig.setNeedle;
+	return {
+		onMouseMove: async (e: React.MouseEvent) => {
+			if (needleState.isDrag) {
+				e.persist(); //不加这个很容易导致clientx为null
+				const diff = e.clientX - needleState.startX;
+				setNeedle(() => {
+					const shouldMoveX = needleState.origin + diff;
+					if (shouldMoveX < initialLeft) {
+						config.timelineNeedleConfig.current = 0;
+						return initialLeft;
+					} else if (shouldMoveX > ruleWidth) {
+						config.timelineNeedleConfig.current = (ruleWidth - initialLeft) / 20;
+						return ruleWidth;
+					} else {
+						config.timelineNeedleConfig.current = (shouldMoveX - initialLeft) / 20;
+						return shouldMoveX;
+					}
+				});
+				config.timelineNeedleConfig.status = 'stop';
+				config.blockForceUpdate.forEach((v) => {
+					v();
+				});
+			}
+		},
+		onMouseUp: () => {
+			needleState.isDrag = false;
+			needleState.startX = 0;
+		},
+		onDoubleClick: () => {
+			// 这个暂时搞不定，可以在起始点埋个点位得到坐标值进行计算。
+		},
+	};
+};
+
 export function TimeLine(props: TimeLineProps) {
 	const store = props.config.getStore();
 	const data = store.getData().block;
@@ -223,72 +303,106 @@ export function TimeLine(props: TimeLineProps) {
 		}
 	}, [props.config]);
 
-	// const [needle, setNeedle] = useState(initialLeft);
+	const [needle, setNeedle] = useState(initialLeft);
 
-	//const needleStart = () => {
-	// props.config.timelineNeedleConfig.current = 0;
-	// setNeedle(initialLeft);
-	// //每过0.1秒移动2
-	// if (timer) {
-	// 	window.clearInterval(timer);
-	// }
-	// props.config.timelineNeedleConfig.status = 'start';
-	// const cloneData: IStoreData = deepcopy(store.getData());
-	// store.setData(cloneData);
-	// store.cleanLast();
-	// timer = window.setInterval(() => {
-	// 	if (needle < ruleWidth) {
-	// 		setNeedle((pre) => {
-	// 			props.config.timelineNeedleConfig.current = (pre - initialLeft) / 20;
-	// 			console.log(props.config.timelineNeedleConfig.current);
-	// 			return pre + 2;
-	// 		});
-	// 	}
-	// }, 100);
-	//	};
+	const resetAnimate = async () => {
+		// 重置动画后才能调整delay
+		return new Promise<void>((res) => {
+			if (!WAIT) {
+				WAIT = true;
+				props.config.waitAnimate = true;
+				const cache = data.map((v) => {
+					return v.animate;
+				});
+				const cloneData: IStoreData = deepcopy(store.getData());
+				cloneData.block.forEach((v) => {
+					v.animate = [];
+				});
+				store.setData(cloneData);
+				setTimeout(() => {
+					props.config.timelineNeedleConfig.status = 'pause';
+					const cloneData: IStoreData = deepcopy(store.getData());
+					cloneData.block.forEach((v, i) => {
+						v.animate = cache[i];
+					});
+					WAIT = false;
+					props.config.waitAnimate = false;
+					store.setData(cloneData);
+					store.cleanLast();
+					res();
+				});
+			}
+		});
+	};
 
-	// const needlePlay = async () => {
-	// 	if (timer) {
-	// 		window.clearInterval(timer);
-	// 	}
-	// 	await resetAnimate();
-	// 	setTimeout(() => {
-	// 		props.config.timelineNeedleConfig.status = 'pause';
-	// 		timer = window.setInterval(() => {
-	// 			if (needle < ruleWidth) {
-	// 				setNeedle((pre) => {
-	// 					props.config.timelineNeedleConfig.current = (pre - initialLeft) / 20;
-	// 					return pre + 2;
-	// 				});
-	// 			}
-	// 		}, 100);
-	// 	});
-	// };
+	const refreshBlock = () => {
+		const cloneData: IStoreData = deepcopy(store.getData());
+		store.setData(cloneData);
+		store.cleanLast();
+	};
 
-	// const needleReset = () => {
-	// 	if (timer) {
-	// 		window.clearInterval(timer);
-	// 	}
-	// 	props.config.timelineNeedleConfig.status = 'pause';
-	// 	props.config.timelineNeedleConfig.current = 0;
-	// 	resetAnimate();
-	// 	setNeedle(initialLeft);
-	// 	store.cleanLast();
-	// };
+	const needlePlay = async () => {
+		if (timer) {
+			window.clearInterval(timer);
+		}
+		//判断如果status不是pause，则要执行reset
+		if (props.config.timelineNeedleConfig.status !== 'pause') {
+			await needleReset();
+		}
+		props.config.timelineNeedleConfig.status = 'start';
+		props.config.timelineNeedleConfig.isRefresh = false;
+		refreshBlock();
+		setTimeout(() => {
+			timer = window.setInterval(() => {
+				setNeedle((pre) => {
+					if (pre < ruleWidth) {
+						props.config.timelineNeedleConfig.current = (pre - initialLeft) / 20;
+						return pre + 2;
+					} else {
+						if (timer) {
+							window.clearInterval(timer);
+						}
+						return pre;
+					}
+				});
+				//	props.config.blockForceUpdate.forEach((v) => v());
+			}, 100);
+		});
+	};
 
-	// const needlePause = () => {
-	// 	props.config.timelineNeedleConfig.status = 'pause';
-	// 	if (timer) {
-	// 		window.clearInterval(timer);
-	// 	}
-	// 	const cloneData: IStoreData = deepcopy(store.getData());
-	// 	store.setData(cloneData);
-	// 	store.cleanLast();
-	// };
+	const needleReset = async (needResetAnimate = true) => {
+		if (timer) {
+			window.clearInterval(timer);
+		}
+		props.config.timelineNeedleConfig.status = 'start';
+		if (needResetAnimate) {
+			await resetAnimate();
+		}
+		return new Promise<void>((res) => {
+			setTimeout(() => {
+				props.config.timelineNeedleConfig.status = 'pause';
+				props.config.timelineNeedleConfig.current = 0;
+				props.config.timelineNeedleConfig.isRefresh = true;
+				setNeedle(initialLeft);
+				refreshBlock();
+				res();
+			});
+		});
+	};
 
-	// props.config.timelineNeedleConfig.resetFunc = needleReset;
-	// props.config.timelineNeedleConfig.runFunc = needleStart;
+	const needlePause = () => {
+		props.config.timelineNeedleConfig.status = 'pause';
+		props.config.timelineNeedleConfig.isRefresh = false;
+		if (timer) {
+			window.clearInterval(timer);
+		}
+		refreshBlock();
+	};
 
+	props.config.timelineNeedleConfig.resetFunc = needleReset;
+	props.config.timelineNeedleConfig.runFunc = needlePlay;
+	props.config.timelineNeedleConfig.pauseFunc = needlePause;
+	props.config.timelineNeedleConfig.setNeedle = setNeedle;
 	return (
 		<div
 			className={`${props.classes} ant-menu yh-timeline-wrap`}
@@ -330,14 +444,19 @@ export function TimeLine(props: TimeLineProps) {
 									textAlign: 'right',
 								}}
 							>
-								{/* <span
+								<span
 									style={{
 										display: 'inline-block',
 										cursor: 'pointer',
 										marginRight: '10px',
 									}}
+									title="reset"
 								>
-									<ReloadOutlined onClick={() => needleReset()} />
+									<ReloadOutlined
+										onClick={() => {
+											needleReset();
+										}}
+									/>
 								</span>
 								<span
 									style={{
@@ -345,9 +464,14 @@ export function TimeLine(props: TimeLineProps) {
 										cursor: 'pointer',
 										marginRight: '10px',
 									}}
+									title="pause"
 								>
-									<PauseCircleOutlined onClick={() => needlePause()} />
-								</span> */}
+									<PauseCircleOutlined
+										onClick={() => {
+											needlePause();
+										}}
+									/>
+								</span>
 								<span
 									title="play"
 									style={{
@@ -356,29 +480,7 @@ export function TimeLine(props: TimeLineProps) {
 										cursor: 'pointer',
 									}}
 									onClick={() => {
-										//缓存所有animate后执行
-										if (!WAIT) {
-											WAIT = true;
-											props.config.waitAnimate = true;
-											const cache = data.map((v) => {
-												return v.animate;
-											});
-											const cloneData: IStoreData = deepcopy(store.getData());
-											cloneData.block.forEach((v) => {
-												v.animate = [];
-											});
-											store.setData(cloneData);
-											setTimeout(() => {
-												const cloneData: IStoreData = deepcopy(store.getData());
-												cloneData.block.forEach((v, i) => {
-													v.animate = cache[i];
-												});
-												WAIT = false;
-												props.config.waitAnimate = false;
-												store.setData(cloneData);
-												store.cleanLast();
-											});
-										}
+										needlePlay();
 									}}
 								>
 									<PlayCircleOutlined />
@@ -396,7 +498,25 @@ export function TimeLine(props: TimeLineProps) {
 							position: 'relative',
 						}}
 					>
-						{/* <div
+						<div
+							className="yh-timeline-needle-head"
+							style={{
+								position: 'absolute',
+								transform: `translate(-${scrollx}px, 0px)`,
+								width: needleHeadWidth,
+								height: needleHeadHeight,
+								backgroundColor: '#ff5722',
+								zIndex: 3,
+								left: needle - needleHeadWidth / 2,
+								transition: 'left linear',
+								willChange: 'left',
+								borderRadius: '2px',
+								cursor: 'col-resize',
+							}}
+							{...needleHeadEvent(setNeedle, props.config)}
+						></div>
+						<div
+							className="yh-timeline-needle"
 							style={{
 								position: 'absolute',
 								transform: `translate(-${scrollx}px, 0px)`,
@@ -407,8 +527,9 @@ export function TimeLine(props: TimeLineProps) {
 								left: needle,
 								transition: 'left linear',
 								willChange: 'left',
+								pointerEvents: 'none',
 							}}
-						></div> */}
+						></div>
 						<div
 							style={{
 								display: 'flex',

packages/dooringx-lib/src/components/timeLine/timelineItem.tsx

@@ -60,7 +60,7 @@ const resizeMouseDown = (
 	left: boolean
 ) => {
 	e.stopPropagation();
-	resizeState.startX = e.screenX;
+	resizeState.startX = e.clientX;
 	resizeState.uid = v.uid;
 	resizeState.isMove = true;
 	resizeState.left = left;
@@ -73,7 +73,7 @@ export const TimeLineItemMouseMove = function (
 ) {
 	if (moveState.isMove) {
 		//修改源属性
-		const diff = e.screenX - moveState.startX;
+		const diff = e.clientX - moveState.startX;
 		animate.forEach((v) => {
 			if (v.uid === moveState.uid) {
 				const f = parseFloat((v.animationDelay + diff / times).toFixed(1));
@@ -81,9 +81,9 @@ export const TimeLineItemMouseMove = function (
 				forceUpdate((p) => p + 1);
 			}
 		});
-		moveState.startX = e.screenX;
+		moveState.startX = e.clientX;
 	} else if (resizeState.isMove) {
-		const diff = e.screenX - resizeState.startX;
+		const diff = e.clientX - resizeState.startX;
 		if (resizeState.left) {
 			animate.forEach((v) => {
 				if (v.uid === resizeState.uid) {
@@ -107,7 +107,7 @@ export const TimeLineItemMouseMove = function (
 				}
 			});
 		}
-		resizeState.startX = e.screenX;
+		resizeState.startX = e.clientX;
 	}
 };
 export const TimeLineItemMouseOver = function () {
@@ -142,7 +142,7 @@ export function TimeLineItem(props: TimeLineItemProps) {
 					<div
 						key={v.uid}
 						onMouseDown={(e) => {
-							moveState.startX = e.screenX;
+							moveState.startX = e.clientX;
 							moveState.uid = v.uid;
 							moveState.isMove = true;
 						}}
@@ -158,12 +158,14 @@ export function TimeLineItem(props: TimeLineItemProps) {
 						}}
 					>
 						<div
+							className="yh-timeline-item-left"
 							style={{ ...commonCss, left: -square }}
 							onMouseDown={(e) => {
 								resizeMouseDown(e, v, true);
 							}}
 						></div>
 						<div
+							className="yh-timeline-item-right"
 							style={{ ...commonCss, right: -square }}
 							onMouseDown={(e) => {
 								resizeMouseDown(e, v, false);

packages/dooringx-lib/src/config/index.tsx

@@ -356,11 +356,15 @@ export class UserConfig {
 		scrollDom: null,
 	};
 	public timelineNeedleConfig: TimeLineNeedleConfigType = {
-		status: 'stop',
+		status: 'start',
 		runFunc: () => {},
 		resetFunc: () => {},
+		pauseFunc: () => {},
+		setNeedle: () => {},
 		current: 0,
+		isRefresh: true,
 	};
+	public blockForceUpdate: Array<Function> = [];
 	public waitAnimate = false;
 	public wrapperMoveState = wrapperMoveState;
 	public iframeWrapperMoveState = iframeWrapperMoveState;

packages/dooringx-lib/src/core/innerDrag/index.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { blockFocus, containerFocusRemove } from '../focusHandler';
 import { marklineConfig } from '../markline/marklineConfig';
 import { resizerMouseMove, resizerMouseUp } from '../resizeHandler';
@@ -14,6 +14,7 @@ import { rotateMouseMove, rotateMouseUp } from '../rotateHandler';
 import { specialCoList } from '../utils/special';
 import { marklineState } from '../markline/state';
 import { itemHeight } from '../../components/timeLine/timelineItem';
+import { needleMoveEvent } from '../../components/timeLine/timeline';
 
 export const innerDrag = function (
 	item: IBlockType,
@@ -150,6 +151,7 @@ export const innerContainerDragUp = function (config: UserConfig) {
 		marklineState.sortRight = null;
 		marklineState.sortBottom = null;
 		iframeWrapperMove(config);
+		needleMoveEvent(config).onMouseUp();
 		wrapperMoveMouseUp(config);
 		selectRangeMouseUp(e, config);
 		if (innerDragState.ref && innerDragState.ref.current) {
@@ -171,5 +173,8 @@ export const innerContainerDragUp = function (config: UserConfig) {
 	};
 	return {
 		onMouseUp,
+		onMouseMove: (e: React.MouseEvent) => {
+			needleMoveEvent(config).onMouseMove(e);
+		},
 	};
 };

packages/dooringx-lib/src/core/utils/animate.ts

@@ -0,0 +1,28 @@
+import { AnimateItem } from '../store/storetype';
+// duration
+// 1s ease 1s 1 forwards paused bounce ,
+export function mergeAnimate(
+	animate: AnimateItem[],
+	config = {
+		delay: 0,
+		isPause: false,
+	}
+) {
+	let configstr = '';
+	let str = '';
+	animate.forEach((v) => {
+		configstr =
+			(configstr === '' ? configstr : configstr + ',') +
+			`${v.animationDuration}s ${v.animationTimingFunction} ${(
+				v.animationDelay - config.delay
+			).toFixed(1)}s ${v.animationIterationCount} forwards ${
+				config.isPause ? 'paused' : 'running'
+			} ${v.animationName}`;
+		str =
+			(str === '' ? str : str + ',') +
+			`${v.animationDuration}s ${v.animationTimingFunction} ${v.animationDelay}s ${
+				v.animationIterationCount
+			} forwards ${'running'} ${v.animationName}`;
+	});
+	return [str, configstr];
+}