update 0.8.2

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## changelog
 
+## 0.8.2
+
+增加左侧面板配置。
+
+修复timeline闪烁问题。
+
 ## 0.8.1
 
 新增动画组件timeline。可以更好预览所有动画。

packages/dooringx-doc/src/changelog/1.1.md

@@ -4,6 +4,12 @@ order: 1
 ---
 ## changelog
 
+## 0.8.2
+
+增加左侧面板配置。
+
+修复timeline闪烁问题。
+
 ## 0.8.1
 
 新增动画组件timeline。可以更好预览所有动画。

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

@@ -126,9 +126,8 @@ let isOmit = false;
 
 function AnimateControl(props: AnimateControlProps) {
 	const store = props.config.getStore();
-
 	const animate = useMemo(() => {
-		if (isOmit) {
+		if (isOmit || props.config.waitAnimate) {
 			return lastAnimate;
 		}
 		lastAnimate = props.current.animate;
@@ -305,24 +304,27 @@ function AnimateControl(props: AnimateControlProps) {
 						onClick={() => {
 							if (!isOmit) {
 								isOmit = true;
+								props.config.waitAnimate = true;
 								const cacheProps = animate;
-								const data: IStoreData = store.getData();
+								const data: IStoreData = deepCopy(store.getData());
 								data.block.forEach((v) => {
 									if (v.id === props.current.id) {
 										v.animate = [];
 									}
 								});
-								store.emit();
+								store.setData(data);
-								store.forceUpdate();
 								setTimeout(() => {
-									data.block.forEach((v) => {
+									const clone: IStoreData = deepCopy(store.getData());
+									clone.block.forEach((v) => {
 										if (v.id === props.current.id) {
 											v.animate = cacheProps;
 										}
 									});
-									store.emit();
-									store.forceUpdate();
 									isOmit = false;
+									props.config.waitAnimate = false;
+									store.cleanLast();
+									store.setData(clone);
+									store.cleanLast();
 								});
 							}
 						}}

packages/dooringx-lib/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.8.1",
+	"version": "0.8.2",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",

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

@@ -2,11 +2,11 @@
  * @Author: yehuozhili
  * @Date: 2021-08-09 15:15:25
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-11 17:03:54
+ * @LastEditTime: 2021-08-16 11:20:59
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\timeLine\timeline.tsx
  */
 import deepcopy from 'deepcopy';
-import React, { CSSProperties, useState } from 'react';
+import React, { CSSProperties, useMemo, useState } from 'react';
 import { SortableContainer, SortableElement, SortableHandle, SortEnd } from 'react-sortable-hoc';
 import UserConfig from '../../config';
 import { IBlockType, IStoreData } from '../../core/store/storetype';
@@ -82,6 +82,8 @@ const SortableList = SortableContainer(
 	}
 );
 
+let cacheBlock: IBlockType[] = [];
+
 export function TimeLine(props: TimeLineProps) {
 	const store = props.config.getStore();
 	const data = store.getData().block;
@@ -122,6 +124,14 @@ export function TimeLine(props: TimeLineProps) {
 		</div>
 	);
 
+	const renderData = useMemo(() => {
+		if (props.config.waitAnimate) {
+			return cacheBlock;
+		}
+		cacheBlock = data;
+		return cacheBlock;
+	}, [data, props.config.waitAnimate]);
+
 	return (
 		<div
 			className={props.classes}
@@ -168,6 +178,7 @@ export function TimeLine(props: TimeLineProps) {
 									//缓存所有animate后执行
 									if (!WAIT) {
 										WAIT = true;
+										props.config.waitAnimate = true;
 										const cache = data.map((v) => {
 											return v.animate;
 										});
@@ -182,6 +193,7 @@ export function TimeLine(props: TimeLineProps) {
 												v.animate = cache[i];
 											});
 											WAIT = false;
+											props.config.waitAnimate = false;
 											store.setData(cloneData);
 										});
 									}
@@ -256,7 +268,7 @@ export function TimeLine(props: TimeLineProps) {
 							}}
 							style={{ overflow: 'auto', height: `calc(100% - ${itemHeight}px)` }}
 						>
-							{data.map((v) => {
+							{renderData.map((v) => {
 								return (
 									<div
 										key={v.id}

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-25 21:16:58
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-11 16:16:09
+ * @LastEditTime: 2021-08-16 10:17:55
  * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
  */
 import React from 'react';
@@ -345,6 +345,7 @@ export class UserConfig {
 	public collapsed = false;
 	public ticker = true;
 	public timeline = false;
+	public waitAnimate = false;
 	public wrapperMoveState = wrapperMoveState;
 	public iframeWrapperMoveState = iframeWrapperMoveState;
 	public refreshIframe = () => {};

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-13 14:58:30
+ * @LastEditTime: 2021-08-16 11:18:41
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\store\index.ts
  */
 import { IStoreData } from './storetype';
@@ -130,6 +130,15 @@ class Store {
 		this.emit();
 	}
 
+	cleanLast() {
+		if (this.current <= 1) {
+			return;
+		}
+		const removeIndex = this.current - 1;
+		this.storeDataList.splice(removeIndex, 1);
+		this.current = this.current - 1;
+	}
+
 	emit() {
 		this.listeners.forEach((fn) => {
 			fn(this.getData());