From 8c079e20ba93e8372ea8dec3fb51e2f1972f265c Mon Sep 17 00:00:00 2001 From: hufeixiong Date: Thu, 27 Jan 2022 16:34:07 +0800 Subject: [PATCH] feat: before update animate --- CHANGELOG.md | 10 + README.md | 5 +- .../plugin/formComponents/animateControl.tsx | 1 - packages/dooringx-lib/package.json | 2 +- .../dooringx-lib/src/components/blocks.tsx | 29 +-- .../dooringx-lib/src/components/container.tsx | 8 +- .../src/components/control/settings.tsx | 18 +- .../src/components/timeLine/timeline.tsx | 188 ++++++++++++------ packages/dooringx-lib/src/config/index.tsx | 3 + .../src/core/components/createBlock.ts | 1 - .../dooringx-lib/src/core/store/storetype.ts | 1 - .../src/core/storeChanger/index.ts | 1 - packages/dooringx-lib/src/locale/en.ts | 1 + packages/dooringx-lib/src/locale/zh-CN.ts | 1 + 14 files changed, 183 insertions(+), 86 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2eccc84..0170881 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +## 0.11.11 + +修复动画导致旋转预览不生效。 + +新增容器overflow配置。 + +timeline部分样式调整。 + +example部分样式调整。 + ## 0.11.10 新增对markline颜色样式设置 diff --git a/README.md b/README.md index 06a34ff..fbcf908 100644 --- a/README.md +++ b/README.md @@ -155,8 +155,5 @@ MIT ## Todo -文档更新 +重构动画 -脚手架 - -基础组件库 diff --git a/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx b/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx index 6b47390..aa7be83 100644 --- a/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx +++ b/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx @@ -351,7 +351,6 @@ function AnimateControl(props: AnimateControlProps) { } }); store.setData(cloneData); - props.config.timelineNeedleConfig.resetFunc(); }} > 添加动画 diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json index 91acc61..315d307 100644 --- a/packages/dooringx-lib/package.json +++ b/packages/dooringx-lib/package.json @@ -1,5 +1,5 @@ { - "version": "0.11.10", + "version": "0.11.11", "license": "MIT", "main": "dist/index.js", "module": "dist/dooringx-lib.esm.js", diff --git a/packages/dooringx-lib/src/components/blocks.tsx b/packages/dooringx-lib/src/components/blocks.tsx index 001c9c8..7bde249 100644 --- a/packages/dooringx-lib/src/components/blocks.tsx +++ b/packages/dooringx-lib/src/components/blocks.tsx @@ -101,7 +101,7 @@ function Blocks(props: PropsWithChildren) { animationDelay: '', animationDuration: '', animationIterationCount: '', - animationFillMode: 'forwards', + // animationFillMode: 'forwards',// 这个属性和transform冲突 animationTimingFunction: '', }; props.data.animate.forEach((v) => { @@ -129,12 +129,6 @@ function Blocks(props: PropsWithChildren) { return select; }, [props.data.animate]); - const animationPlayState: CSSProperties = useMemo(() => { - return { - animationPlayState: props.data.animatePlayState || '', - }; - }, [props.data.animatePlayState]); - const render = useMemo(() => { // 如果是编辑模式下，则需要包裹不能选中层，位移层，缩放控制层，平面移动层。 if (state && props.context === 'edit') { @@ -170,7 +164,14 @@ function Blocks(props: PropsWithChildren) { > {/* 绝对定位元素 */} {props.data.position !== 'static' && ( -
{state}
+
+ {state} +
)} {/* 静态定位 非行内 这里暂不考虑布局影响 */} {props.data.position === 'static' && props.data.display !== 'inline' && ( @@ -180,7 +181,6 @@ function Blocks(props: PropsWithChildren) { width: '100%', height: '100%', ...animateProps, - ...animationPlayState, }} > {state} @@ -188,7 +188,12 @@ function Blocks(props: PropsWithChildren) { )} {/* 静态定位 行内 这里暂不考虑布局影响 */} {props.data.position === 'static' && props.data.display === 'inline' && ( - + {state} )} @@ -210,7 +215,6 @@ function Blocks(props: PropsWithChildren) { display: props.data.display, transform: `rotate(${props.data.rotate.value}deg)`, ...animateProps, - ...animationPlayState, }} > {state} @@ -221,11 +225,10 @@ function Blocks(props: PropsWithChildren) { state, props.context, props.data, - props.iframe, props.config, + props.iframe, innerDragData, animateProps, - animationPlayState, previewState.top, previewState.left, previewState.width, diff --git a/packages/dooringx-lib/src/components/container.tsx b/packages/dooringx-lib/src/components/container.tsx index 65a82e5..088809e 100644 --- a/packages/dooringx-lib/src/components/container.tsx +++ b/packages/dooringx-lib/src/components/container.tsx @@ -4,7 +4,7 @@ import { innerContainerDrag } from '../core/innerDrag'; import { NormalMarkLineRender } from '../core/markline'; import { IStoreData } from '../core/store/storetype'; import { wrapperMoveState } from './wrapperMove/event'; -import { CSSProperties, PropsWithChildren, useMemo } from 'react'; +import { CSSProperties, PropsWithChildren, useMemo, useState } from 'react'; import Blocks from './blocks'; import { containerResizer } from '../core/resizeHandler/containerResizer'; import React from 'react'; @@ -37,6 +37,10 @@ function Container(props: PropsWithChildren) { return props.state.globalState.containerColor; } }; + const forceUpdate = useState(0)[1]; + props.config.containerForceUpdate = () => { + forceUpdate((p) => p + 1); + }; return ( <> @@ -59,7 +63,7 @@ function Container(props: PropsWithChildren) { width: `${props.state.container.width}px`, backgroundColor: bgColor(), position: 'relative', - overflow: 'hidden', + overflow: props.config.containerOverFlow ? 'hidden' : 'visible', cursor: 'default', ...editContainerStyle, }} diff --git a/packages/dooringx-lib/src/components/control/settings.tsx b/packages/dooringx-lib/src/components/control/settings.tsx index be80499..2e93341 100644 --- a/packages/dooringx-lib/src/components/control/settings.tsx +++ b/packages/dooringx-lib/src/components/control/settings.tsx @@ -45,7 +45,7 @@ function SettingsModal(props: SettingsModalPropsType) { onCancel={() => props.onCancel()} onOk={() => { const res = form.getFieldsValue(); - const { min, max, borderStyle } = res; + const { min, max, borderStyle, containerOverFlow } = res; if (max < min) { props.message.error(replaceLocale('error.minmax', zhCN['error.minmax'], props.config)); return; @@ -57,7 +57,9 @@ function SettingsModal(props: SettingsModalPropsType) { } props.config.marklineConfig.borderColor = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`; props.config.marklineConfig.borderStyle = borderStyle; + props.config.containerOverFlow = containerOverFlow; props.onOk(res); + props.config.containerForceUpdate(); return; }} > @@ -70,6 +72,7 @@ function SettingsModal(props: SettingsModalPropsType) { max: props.config.scaleState.maxValue, autofocus: props.config.timelineConfig.autoFocus, borderStyle: props.config.marklineConfig.borderStyle, + containerOverFlow: props.config.containerOverFlow, }} form={form} > @@ -142,6 +145,19 @@ function SettingsModal(props: SettingsModalPropsType) { {replaceLocale('off', zhCN['off'], props.config)} + + + {replaceLocale('on', zhCN['on'], props.config)} + {replaceLocale('off', zhCN['off'], props.config)} + + ); diff --git a/packages/dooringx-lib/src/components/timeLine/timeline.tsx b/packages/dooringx-lib/src/components/timeLine/timeline.tsx index af3105b..7c46656 100644 --- a/packages/dooringx-lib/src/components/timeLine/timeline.tsx +++ b/packages/dooringx-lib/src/components/timeLine/timeline.tsx @@ -40,9 +40,10 @@ export interface TimeLineConfigType { scrollDom: null | HTMLDivElement; } export interface TimeLineNeedleConfigType { - status: 'stop' | 'start'; + status: 'stop' | 'start' | 'pause'; runFunc: Function; resetFunc: Function; + current: number; } const animateTicker = new Array(iter).fill(1).map((_, y) => y); @@ -164,9 +165,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; @@ -222,32 +223,71 @@ export function TimeLine(props: TimeLineProps) { } }, [props.config]); - const [needle, setNeedle] = useState(initialLeft); + // const [needle, setNeedle] = useState(initialLeft); - const needleStart = () => { - setNeedle(initialLeft); - //每过0.1秒移动2 - if (timer) { - window.clearInterval(timer); - } - props.config.timelineNeedleConfig.status = 'start'; - timer = window.setInterval(() => { - if (needle < ruleWidth) { - setNeedle((pre) => pre + 2); - } - }, 100); - }; + //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 needleReset = () => { - if (timer) { - window.clearInterval(timer); - } - setNeedle(initialLeft); - props.config.timelineNeedleConfig.status = 'stop'; - }; + // 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); + // }); + // }; - props.config.timelineNeedleConfig.resetFunc = needleReset; - props.config.timelineNeedleConfig.runFunc = needleStart; + // const needleReset = () => { + // if (timer) { + // window.clearInterval(timer); + // } + // props.config.timelineNeedleConfig.status = 'pause'; + // props.config.timelineNeedleConfig.current = 0; + // resetAnimate(); + // setNeedle(initialLeft); + // 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.runFunc = needleStart; return (
{replaceLocale('timeline.name', '组件名称', props.config)} - { - //缓存所有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); - needleStart(); - }); - } + flex: 1, + textAlign: 'right', }} > - - + {/* + needleReset()} /> + + + needlePause()} /> + */} + { + //缓存所有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(); + }); + } + }} + > + + +
{content} @@ -330,7 +396,7 @@ export function TimeLine(props: TimeLineProps) { position: 'relative', }} > -
+ > */}
{}; public timeline = false; public timelineConfig: TimeLineConfigType = { autoFocus: true, @@ -357,6 +359,7 @@ export class UserConfig { status: 'stop', runFunc: () => {}, resetFunc: () => {}, + current: 0, }; public waitAnimate = false; public wrapperMoveState = wrapperMoveState; diff --git a/packages/dooringx-lib/src/core/components/createBlock.ts b/packages/dooringx-lib/src/core/components/createBlock.ts index a7ce693..52e4c66 100644 --- a/packages/dooringx-lib/src/core/components/createBlock.ts +++ b/packages/dooringx-lib/src/core/components/createBlock.ts @@ -43,6 +43,5 @@ export function createBlock( value: 0, canRotate: true, }, - animatePlayState: ComponentItem.initData.animatePlayState || '', }; } diff --git a/packages/dooringx-lib/src/core/store/storetype.ts b/packages/dooringx-lib/src/core/store/storetype.ts index 246331e..1f676c6 100644 --- a/packages/dooringx-lib/src/core/store/storetype.ts +++ b/packages/dooringx-lib/src/core/store/storetype.ts @@ -51,6 +51,5 @@ export interface IBlockType { canRotate: boolean; }; animate: AnimateItem[]; - animatePlayState: string; fixed: boolean; // 用于制作fixed组件 } diff --git a/packages/dooringx-lib/src/core/storeChanger/index.ts b/packages/dooringx-lib/src/core/storeChanger/index.ts index e2a5426..ea09d8e 100644 --- a/packages/dooringx-lib/src/core/storeChanger/index.ts +++ b/packages/dooringx-lib/src/core/storeChanger/index.ts @@ -46,7 +46,6 @@ function createDefaultModalBlock(): IStoreData['block'] { value: 0, canRotate: false, }, - animatePlayState: '', }, ]; } diff --git a/packages/dooringx-lib/src/locale/en.ts b/packages/dooringx-lib/src/locale/en.ts index 5fc0ecd..9041e92 100644 --- a/packages/dooringx-lib/src/locale/en.ts +++ b/packages/dooringx-lib/src/locale/en.ts @@ -49,4 +49,5 @@ export const en: typeof zhCN = { 'error.minmax': 'The maximum value should be greater than or equal to the minimum value', 'settings.marklineColor': 'Markline color', 'settings.marklineStyle': 'Markline style', + 'settings.containerOverflow': 'Container Overflow', }; diff --git a/packages/dooringx-lib/src/locale/zh-CN.ts b/packages/dooringx-lib/src/locale/zh-CN.ts index 5185cbb..a39d707 100644 --- a/packages/dooringx-lib/src/locale/zh-CN.ts +++ b/packages/dooringx-lib/src/locale/zh-CN.ts @@ -46,4 +46,5 @@ export const zhCN = { 'error.minmax': '最大值应大于等于最小值', 'settings.marklineColor': '辅助线颜色', 'settings.marklineStyle': '辅助线样式', + 'settings.containerOverflow': '容器边界外不显示元素', };