From 253dfe14b3717f8c46071a8fbcdfd3cf56001600 Mon Sep 17 00:00:00 2001
From: hufeixiong <hufeixiong@sto.cn>
Date: Fri, 28 Jan 2022 18:05:29 +0800
Subject: [PATCH 1/3] feat: animate patch1

---
 .../plugin/formComponents/animateControl.tsx  |  10 +-
 .../dooringx-lib/src/components/blocks.tsx    |  75 ++++---
 .../src/components/timeLine/timeline.tsx      | 190 +++++++++---------
 .../src/components/timeLine/timelineItem.tsx  |   2 +
 packages/dooringx-lib/src/config/index.tsx    |   1 +
 .../dooringx-lib/src/core/utils/animate.ts    |  28 +++
 6 files changed, 172 insertions(+), 134 deletions(-)
 create mode 100644 packages/dooringx-lib/src/core/utils/animate.ts

diff --git a/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx b/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx
index aa7be83..617b5e6 100644
--- a/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx
+++ b/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,12 +302,13 @@ 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();
 								const data: IStoreData = deepCopy(store.getData());
+								props.config.waitAnimate = true;
 								data.block.forEach((v) => {
 									if (v.id === props.current.id) {
 										v.animate = [];
@@ -323,10 +324,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();
 								});
 							}
 						}}
diff --git a/packages/dooringx-lib/src/components/blocks.tsx b/packages/dooringx-lib/src/components/blocks.tsx
index 7bde249..5dcbfb7 100644
--- a/packages/dooringx-lib/src/components/blocks.tsx
+++ b/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,36 @@ 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 === 'pause' ? true : false,
+			delay: props.config.timelineNeedleConfig.current,
 		});
-		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 +166,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						<div
 							style={{
 								...style,
-								...animateProps,
+								...animationEdit,
 							}}
 						>
 							{state}
@@ -180,7 +179,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 								pointerEvents: 'none',
 								width: '100%',
 								height: '100%',
-								...animateProps,
+								...animationEdit,
 							}}
 						>
 							{state}
@@ -191,7 +190,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						<span
 							style={{
 								pointerEvents: 'none',
-								...animateProps,
+								...animationEdit,
 							}}
 						>
 							{state}
@@ -214,10 +213,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 +223,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;
 }
diff --git a/packages/dooringx-lib/src/components/timeLine/timeline.tsx b/packages/dooringx-lib/src/components/timeLine/timeline.tsx
index 7c46656..a7f929e 100644
--- a/packages/dooringx-lib/src/components/timeLine/timeline.tsx
+++ b/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,
@@ -165,9 +167,9 @@ 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;
+let timer: number | null = null;
 export function TimeLine(props: TimeLineProps) {
 	const store = props.config.getStore();
 	const data = store.getData().block;
@@ -223,70 +225,89 @@ 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 needlePlay = async () => {
+		if (timer) {
+			window.clearInterval(timer);
+		}
+		//判断如果status不是pause，则要执行reset
+		if (props.config.timelineNeedleConfig.status !== 'pause') {
+			await needleReset();
+		}
+		setTimeout(() => {
+			timer = window.setInterval(() => {
+				if (needle < ruleWidth) {
+					setNeedle((pre) => {
+						props.config.timelineNeedleConfig.current = (pre - initialLeft) / 20;
+						return pre + 2;
+					});
+					props.config.blockForceUpdate.forEach((v) => v());
+				}
+			}, 100);
+		});
+	};
 
-	// const needleReset = () => {
-	// 	if (timer) {
-	// 		window.clearInterval(timer);
-	// 	}
-	// 	props.config.timelineNeedleConfig.status = 'pause';
-	// 	props.config.timelineNeedleConfig.current = 0;
-	// 	resetAnimate();
-	// 	setNeedle(initialLeft);
-	// 	store.cleanLast();
-	// };
+	const needleReset = async () => {
+		if (timer) {
+			window.clearInterval(timer);
+		}
+		props.config.timelineNeedleConfig.status = 'start';
+		await resetAnimate();
+		return new Promise<void>((res) => {
+			setTimeout(() => {
+				props.config.timelineNeedleConfig.status = 'pause';
+				props.config.timelineNeedleConfig.current = 0;
+				setNeedle(initialLeft);
+				const cloneData: IStoreData = deepcopy(store.getData());
+				store.setData(cloneData);
+				store.cleanLast();
+				res();
+			});
+		});
+	};
 
-	// const needlePause = () => {
-	// 	props.config.timelineNeedleConfig.status = 'pause';
-	// 	if (timer) {
-	// 		window.clearInterval(timer);
-	// 	}
-	// 	const cloneData: IStoreData = deepcopy(store.getData());
-	// 	store.setData(cloneData);
-	// 	store.cleanLast();
-	// };
+	const needlePause = () => {
+		props.config.timelineNeedleConfig.status = 'pause';
+		if (timer) {
+			window.clearInterval(timer);
+		}
+		const cloneData: IStoreData = deepcopy(store.getData());
+		store.setData(cloneData);
+		store.cleanLast();
+	};
 
-	// props.config.timelineNeedleConfig.resetFunc = needleReset;
+	props.config.timelineNeedleConfig.resetFunc = needleReset;
 	// props.config.timelineNeedleConfig.runFunc = needleStart;
 
 	return (
@@ -330,14 +351,18 @@ export function TimeLine(props: TimeLineProps) {
 									textAlign: 'right',
 								}}
 							>
-								{/* <span
+								<span
 									style={{
 										display: 'inline-block',
 										cursor: 'pointer',
 										marginRight: '10px',
 									}}
 								>
-									<ReloadOutlined onClick={() => needleReset()} />
+									<ReloadOutlined
+										onClick={() => {
+											needleReset();
+										}}
+									/>
 								</span>
 								<span
 									style={{
@@ -346,8 +371,12 @@ export function TimeLine(props: TimeLineProps) {
 										marginRight: '10px',
 									}}
 								>
-									<PauseCircleOutlined onClick={() => needlePause()} />
-								</span> */}
+									<PauseCircleOutlined
+										onClick={() => {
+											needlePause();
+										}}
+									/>
+								</span>
 								<span
 									title="play"
 									style={{
@@ -356,29 +385,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 +403,7 @@ export function TimeLine(props: TimeLineProps) {
 							position: 'relative',
 						}}
 					>
-						{/* <div
+						<div
 							style={{
 								position: 'absolute',
 								transform: `translate(-${scrollx}px, 0px)`,
@@ -407,8 +414,9 @@ export function TimeLine(props: TimeLineProps) {
 								left: needle,
 								transition: 'left linear',
 								willChange: 'left',
+								pointerEvents: 'none',
 							}}
-						></div> */}
+						></div>
 						<div
 							style={{
 								display: 'flex',
diff --git a/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx b/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx
index 36c631c..a661362 100644
--- a/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx
+++ b/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx
@@ -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);
diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx
index 2e22389..f654c0d 100644
--- a/packages/dooringx-lib/src/config/index.tsx
+++ b/packages/dooringx-lib/src/config/index.tsx
@@ -361,6 +361,7 @@ export class UserConfig {
 		resetFunc: () => {},
 		current: 0,
 	};
+	public blockForceUpdate: Array<Function> = [];
 	public waitAnimate = false;
 	public wrapperMoveState = wrapperMoveState;
 	public iframeWrapperMoveState = iframeWrapperMoveState;
diff --git a/packages/dooringx-lib/src/core/utils/animate.ts b/packages/dooringx-lib/src/core/utils/animate.ts
new file mode 100644
index 0000000..59bee3c
--- /dev/null
+++ b/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];
+}

From bee2716d4962e1dd0ed9bc5e8dac22105be7f7d0 Mon Sep 17 00:00:00 2001
From: hufeixiong <hufeixiong@sto.cn>
Date: Sat, 29 Jan 2022 17:59:59 +0800
Subject: [PATCH 2/3] change animate mode

---
 .github/workflows/main.yml                    |   5 +-
 .../plugin/formComponents/animateControl.tsx  |   3 +-
 .../dooringx-lib/src/components/blocks.tsx    |   5 +-
 .../src/components/timeLine/timeline.tsx      | 123 ++++++++++++++++--
 .../src/components/timeLine/timelineItem.tsx  |  12 +-
 packages/dooringx-lib/src/config/index.tsx    |   1 +
 6 files changed, 126 insertions(+), 23 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 9122d9c..84c630a 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,5 +1,8 @@
 name: build
-on: [push]
+on:
+  push:
+    branches:
+      - main
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
diff --git a/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx b/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx
index 617b5e6..4ecb1b9 100644
--- a/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx
+++ b/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx
@@ -306,7 +306,7 @@ function AnimateControl(props: AnimateControlProps) {
 							if (!isOmit) {
 								isOmit = true;
 								const cacheProps = animate;
-								await props.config.timelineNeedleConfig.resetFunc();
+								await props.config.timelineNeedleConfig.resetFunc(false);
 								const data: IStoreData = deepCopy(store.getData());
 								props.config.waitAnimate = true;
 								data.block.forEach((v) => {
@@ -314,6 +314,7 @@ function AnimateControl(props: AnimateControlProps) {
 										v.animate = [];
 									}
 								});
+								props.config.timelineNeedleConfig.status = 'pause';
 								store.setData(data);
 								setTimeout(() => {
 									const clone: IStoreData = deepCopy(store.getData());
diff --git a/packages/dooringx-lib/src/components/blocks.tsx b/packages/dooringx-lib/src/components/blocks.tsx
index 5dcbfb7..7688b68 100644
--- a/packages/dooringx-lib/src/components/blocks.tsx
+++ b/packages/dooringx-lib/src/components/blocks.tsx
@@ -115,7 +115,10 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 	const [animateProps, animationEdit]: [CSSProperties, CSSProperties] = useMemo(() => {
 		const [normal, editProps] = mergeAnimate(props.data.animate, {
 			isPause: props.config.timelineNeedleConfig.status === 'pause' ? true : false,
-			delay: props.config.timelineNeedleConfig.current,
+			delay:
+				props.config.timelineNeedleConfig.status === 'stop'
+					? props.config.timelineNeedleConfig.current
+					: 0,
 		});
 		return [
 			{
diff --git a/packages/dooringx-lib/src/components/timeLine/timeline.tsx b/packages/dooringx-lib/src/components/timeLine/timeline.tsx
index a7f929e..dcb1af0 100644
--- a/packages/dooringx-lib/src/components/timeLine/timeline.tsx
+++ b/packages/dooringx-lib/src/components/timeLine/timeline.tsx
@@ -45,6 +45,7 @@ export interface TimeLineNeedleConfigType {
 	status: 'stop' | 'start' | 'pause';
 	runFunc: Function;
 	resetFunc: Function;
+	pauseFunc: Function;
 	current: number;
 }
 
@@ -169,7 +170,70 @@ let cacheBlock: IBlockType[] = [];
 
 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: (e: React.MouseEvent) => {
+			console.log('down', setNeedle, config, e.clientX);
+			// 调整为stop模式，
+			e.stopPropagation();
+			setNeedle((p) => {
+				needleState.origin = p;
+				return p;
+			});
+			needleState.isDrag = true;
+			needleState.startX = e.clientX;
+			if (timer) {
+				window.clearInterval(timer);
+			}
+		},
+	};
+};
+const needleMoveEvent = (
+	setNeedle: React.Dispatch<React.SetStateAction<number>>,
+	config: UserConfig
+) => {
+	return {
+		onMouseMove: (e: React.MouseEvent) => {
+			if (needleState.isDrag) {
+				console.log('move', e.clientX, config);
+				const diff = e.clientX - needleState.startX;
+				setNeedle(() => {
+					const shouldMoveX = needleState.origin + diff;
+					if (shouldMoveX < initialLeft) {
+						return initialLeft;
+					} else if (shouldMoveX > ruleWidth) {
+						return ruleWidth;
+					} else {
+						return shouldMoveX;
+					}
+				});
+			}
+		},
+		onMouseUp: () => {
+			console.log('up');
+			needleState.isDrag = false;
+			needleState.startX = 0;
+		},
+		onDoubleClick: (e: React.MouseEvent) => {
+			console.log('dbclick', e.clientX, (e.target as HTMLDivElement).getBoundingClientRect().width);
+		},
+	};
+};
+
 export function TimeLine(props: TimeLineProps) {
 	const store = props.config.getStore();
 	const data = store.getData().block;
@@ -257,6 +321,12 @@ export function TimeLine(props: TimeLineProps) {
 		});
 	};
 
+	const refreshBlock = () => {
+		const cloneData: IStoreData = deepcopy(store.getData());
+		store.setData(cloneData);
+		store.cleanLast();
+	};
+
 	const needlePlay = async () => {
 		if (timer) {
 			window.clearInterval(timer);
@@ -265,33 +335,40 @@ export function TimeLine(props: TimeLineProps) {
 		if (props.config.timelineNeedleConfig.status !== 'pause') {
 			await needleReset();
 		}
+		props.config.timelineNeedleConfig.status = 'start';
+		refreshBlock();
 		setTimeout(() => {
 			timer = window.setInterval(() => {
-				if (needle < ruleWidth) {
-					setNeedle((pre) => {
+				setNeedle((pre) => {
+					if (pre < ruleWidth) {
 						props.config.timelineNeedleConfig.current = (pre - initialLeft) / 20;
 						return pre + 2;
-					});
-					props.config.blockForceUpdate.forEach((v) => v());
-				}
+					} else {
+						if (timer) {
+							window.clearInterval(timer);
+						}
+						return pre;
+					}
+				});
+				//	props.config.blockForceUpdate.forEach((v) => v());
 			}, 100);
 		});
 	};
 
-	const needleReset = async () => {
+	const needleReset = async (needResetAnimate = true) => {
 		if (timer) {
 			window.clearInterval(timer);
 		}
 		props.config.timelineNeedleConfig.status = 'start';
-		await resetAnimate();
+		if (needResetAnimate) {
+			await resetAnimate();
+		}
 		return new Promise<void>((res) => {
 			setTimeout(() => {
 				props.config.timelineNeedleConfig.status = 'pause';
 				props.config.timelineNeedleConfig.current = 0;
 				setNeedle(initialLeft);
-				const cloneData: IStoreData = deepcopy(store.getData());
-				store.setData(cloneData);
-				store.cleanLast();
+				refreshBlock();
 				res();
 			});
 		});
@@ -302,13 +379,12 @@ export function TimeLine(props: TimeLineProps) {
 		if (timer) {
 			window.clearInterval(timer);
 		}
-		const cloneData: IStoreData = deepcopy(store.getData());
-		store.setData(cloneData);
-		store.cleanLast();
+		refreshBlock();
 	};
 
 	props.config.timelineNeedleConfig.resetFunc = needleReset;
-	// props.config.timelineNeedleConfig.runFunc = needleStart;
+	props.config.timelineNeedleConfig.runFunc = needlePlay;
+	props.config.timelineNeedleConfig.pauseFunc = needlePause;
 
 	return (
 		<div
@@ -402,8 +478,27 @@ export function TimeLine(props: TimeLineProps) {
 							overflow: 'hidden',
 							position: 'relative',
 						}}
+						{...needleMoveEvent(setNeedle, props.config)}
 					>
 						<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)`,
diff --git a/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx b/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx
index a661362..2618817 100644
--- a/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx
+++ b/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;
 						}}
diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx
index f654c0d..5610959 100644
--- a/packages/dooringx-lib/src/config/index.tsx
+++ b/packages/dooringx-lib/src/config/index.tsx
@@ -359,6 +359,7 @@ export class UserConfig {
 		status: 'stop',
 		runFunc: () => {},
 		resetFunc: () => {},
+		pauseFunc: () => {},
 		current: 0,
 	};
 	public blockForceUpdate: Array<Function> = [];

From 96161b84ac8905d2faf9fff467d3f1adab84c26b Mon Sep 17 00:00:00 2001
From: hufeixiong <hufeixiong@sto.cn>
Date: Sun, 30 Jan 2022 11:32:12 +0800
Subject: [PATCH 3/3] finish animate

---
 .../dooringx-lib/src/components/blocks.tsx    |  2 +-
 .../src/components/timeLine/timeline.tsx      | 46 +++++++++++++------
 packages/dooringx-lib/src/config/index.tsx    |  4 +-
 .../dooringx-lib/src/core/innerDrag/index.ts  |  7 ++-
 4 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/packages/dooringx-lib/src/components/blocks.tsx b/packages/dooringx-lib/src/components/blocks.tsx
index 7688b68..155979a 100644
--- a/packages/dooringx-lib/src/components/blocks.tsx
+++ b/packages/dooringx-lib/src/components/blocks.tsx
@@ -114,7 +114,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 
 	const [animateProps, animationEdit]: [CSSProperties, CSSProperties] = useMemo(() => {
 		const [normal, editProps] = mergeAnimate(props.data.animate, {
-			isPause: props.config.timelineNeedleConfig.status === 'pause' ? true : false,
+			isPause: props.config.timelineNeedleConfig.status !== 'start' ? true : false,
 			delay:
 				props.config.timelineNeedleConfig.status === 'stop'
 					? props.config.timelineNeedleConfig.current
diff --git a/packages/dooringx-lib/src/components/timeLine/timeline.tsx b/packages/dooringx-lib/src/components/timeLine/timeline.tsx
index dcb1af0..419ae10 100644
--- a/packages/dooringx-lib/src/components/timeLine/timeline.tsx
+++ b/packages/dooringx-lib/src/components/timeLine/timeline.tsx
@@ -47,6 +47,8 @@ export interface TimeLineNeedleConfigType {
 	resetFunc: Function;
 	pauseFunc: Function;
 	current: number;
+	isRefresh: boolean;
+	setNeedle: Function;
 }
 
 const animateTicker = new Array(iter).fill(1).map((_, y) => y);
@@ -186,50 +188,62 @@ const needleHeadEvent = (
 	config: UserConfig
 ) => {
 	return {
-		onMouseDown: (e: React.MouseEvent) => {
-			console.log('down', setNeedle, config, e.clientX);
-			// 调整为stop模式，
+		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);
 			}
 		},
 	};
 };
-const needleMoveEvent = (
-	setNeedle: React.Dispatch<React.SetStateAction<number>>,
-	config: UserConfig
-) => {
+export const needleMoveEvent = (config: UserConfig) => {
+	const setNeedle = config.timelineNeedleConfig.setNeedle;
 	return {
-		onMouseMove: (e: React.MouseEvent) => {
+		onMouseMove: async (e: React.MouseEvent) => {
 			if (needleState.isDrag) {
-				console.log('move', e.clientX, config);
+				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: () => {
-			console.log('up');
 			needleState.isDrag = false;
 			needleState.startX = 0;
 		},
-		onDoubleClick: (e: React.MouseEvent) => {
-			console.log('dbclick', e.clientX, (e.target as HTMLDivElement).getBoundingClientRect().width);
+		onDoubleClick: () => {
+			// 这个暂时搞不定，可以在起始点埋个点位得到坐标值进行计算。
 		},
 	};
 };
@@ -336,6 +350,7 @@ export function TimeLine(props: TimeLineProps) {
 			await needleReset();
 		}
 		props.config.timelineNeedleConfig.status = 'start';
+		props.config.timelineNeedleConfig.isRefresh = false;
 		refreshBlock();
 		setTimeout(() => {
 			timer = window.setInterval(() => {
@@ -367,6 +382,7 @@ export function TimeLine(props: TimeLineProps) {
 			setTimeout(() => {
 				props.config.timelineNeedleConfig.status = 'pause';
 				props.config.timelineNeedleConfig.current = 0;
+				props.config.timelineNeedleConfig.isRefresh = true;
 				setNeedle(initialLeft);
 				refreshBlock();
 				res();
@@ -376,6 +392,7 @@ export function TimeLine(props: TimeLineProps) {
 
 	const needlePause = () => {
 		props.config.timelineNeedleConfig.status = 'pause';
+		props.config.timelineNeedleConfig.isRefresh = false;
 		if (timer) {
 			window.clearInterval(timer);
 		}
@@ -385,7 +402,7 @@ export function TimeLine(props: TimeLineProps) {
 	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`}
@@ -433,6 +450,7 @@ export function TimeLine(props: TimeLineProps) {
 										cursor: 'pointer',
 										marginRight: '10px',
 									}}
+									title="reset"
 								>
 									<ReloadOutlined
 										onClick={() => {
@@ -446,6 +464,7 @@ export function TimeLine(props: TimeLineProps) {
 										cursor: 'pointer',
 										marginRight: '10px',
 									}}
+									title="pause"
 								>
 									<PauseCircleOutlined
 										onClick={() => {
@@ -478,7 +497,6 @@ export function TimeLine(props: TimeLineProps) {
 							overflow: 'hidden',
 							position: 'relative',
 						}}
-						{...needleMoveEvent(setNeedle, props.config)}
 					>
 						<div
 							className="yh-timeline-needle-head"
diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx
index 5610959..e822aa5 100644
--- a/packages/dooringx-lib/src/config/index.tsx
+++ b/packages/dooringx-lib/src/config/index.tsx
@@ -356,11 +356,13 @@ 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;
diff --git a/packages/dooringx-lib/src/core/innerDrag/index.ts b/packages/dooringx-lib/src/core/innerDrag/index.ts
index 72649f2..078d8bd 100644
--- a/packages/dooringx-lib/src/core/innerDrag/index.ts
+++ b/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);
+		},
 	};
 };