From bee2716d4962e1dd0ed9bc5e8dac22105be7f7d0 Mon Sep 17 00:00:00 2001 From: hufeixiong Date: Sat, 29 Jan 2022 17:59:59 +0800 Subject: [PATCH] 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) { 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>, + 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>, + 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((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 (
+
{ 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) {
{ - 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 = [];