From 96161b84ac8905d2faf9fff467d3f1adab84c26b Mon Sep 17 00:00:00 2001 From: hufeixiong Date: Sun, 30 Jan 2022 11:32:12 +0800 Subject: [PATCH] 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) { 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>, - 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 (
{ @@ -446,6 +464,7 @@ export function TimeLine(props: TimeLineProps) { cursor: 'pointer', marginRight: '10px', }} + title="pause" > { @@ -478,7 +497,6 @@ export function TimeLine(props: TimeLineProps) { overflow: 'hidden', position: 'relative', }} - {...needleMoveEvent(setNeedle, props.config)} >
{}, resetFunc: () => {}, pauseFunc: () => {}, + setNeedle: () => {}, current: 0, + isRefresh: true, }; public blockForceUpdate: Array = []; 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); + }, }; };