update 0.8.0

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { UserConfig, deepCopy } from 'dooringx-lib';
+import { UserConfig, deepCopy, createUid } from 'dooringx-lib';
 import { Col, Row, Select, InputNumber, Button } from 'antd';
 import { FormMap, FormBaseType } from '../formTypes';
 import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
@@ -114,13 +114,9 @@ const animateCategory: Record<string, string> = {
 	animate__slideOutRight: 'slideOutRight',
 };
 
-const duration = ['0s', '1s', '2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s', '10s'];
-
-const delay = ['0s', '1s', '2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s', '10s'];
-
 const repeat = ['1', '2', '3', '4', '5', 'infinite'];
 
-const timeFunction = {
+const timeFunction: Record<string, string> = {
 	平滑: 'linear',
 	缓入: 'ease in',
 };
@@ -132,11 +128,27 @@ function AnimateControl(props: AnimateControlProps) {
 		<>
 			{animate.map((v, i) => {
 				return (
-					<div key={props.current.id + i}>
+					<div key={v.uid}>
 						<Row style={{ padding: '20px', alignItems: 'center' }}>
-							<Col span={3}>动画:</Col>
-							<Col span={8}>
-								<Select style={{ width: '80%' }}>
+							<Col span={5}>动画名称:</Col>
+							<Col span={7}>
+								<Select
+									value={animate[i].animationName}
+									style={{ width: '100%' }}
+									onChange={(d) => {
+										const cloneData: IStoreData = deepCopy(store.getData());
+										cloneData.block.forEach((w) => {
+											if (w.id === props.current.id) {
+												w.animate.forEach((f) => {
+													if (f.uid === v.uid) {
+														f.animationName = d;
+													}
+												});
+											}
+										});
+										store.setData(cloneData);
+									}}
+								>
 									{Object.keys(animateCategory).map((v, i) => {
 										return (
 											<Select.Option key={i} value={animateCategory[v]}>
@@ -146,35 +158,75 @@ function AnimateControl(props: AnimateControlProps) {
 									})}
 								</Select>
 							</Col>
-							<Col span={5}>持续时间:</Col>
-							<Col span={8}>
-								<Select style={{ width: '100%' }}>
-									{duration.map((v, i) => {
-										return (
-											<Select.Option key={i} value={v}>
-												{v}
-											</Select.Option>
-										);
-									})}
-								</Select>
+							<Col span={5} style={{ paddingLeft: '10px' }}>
+								持续时间:
+							</Col>
+							<Col span={7}>
+								<InputNumber
+									style={{ width: '100%' }}
+									value={animate[i].animationDuration}
+									formatter={(value) => `${value}s`}
+									min={0}
+									onChange={(d) => {
+										const cloneData: IStoreData = deepCopy(store.getData());
+										cloneData.block.forEach((w) => {
+											if (w.id === props.current.id) {
+												w.animate.forEach((f) => {
+													if (f.uid === v.uid) {
+														f.animationDuration = d;
+													}
+												});
+											}
+										});
+										store.setData(cloneData);
+									}}
+								/>
 							</Col>
 						</Row>
 						<Row style={{ padding: '20px', alignItems: 'center' }}>
-							<Col span={3}>延迟:</Col>
-							<Col span={8}>
-								<Select style={{ width: '80%' }}>
-									{delay.map((v, i) => {
-										return (
-											<Select.Option key={i} value={v}>
-												{v}
-											</Select.Option>
-										);
-									})}
-								</Select>
+							<Col span={5}>延迟时间:</Col>
+							<Col span={7}>
+								<InputNumber
+									style={{ width: '100%' }}
+									value={animate[i].animationDelay}
+									formatter={(value) => `${value}s`}
+									min={0}
+									onChange={(d) => {
+										const cloneData: IStoreData = deepCopy(store.getData());
+										cloneData.block.forEach((w) => {
+											if (w.id === props.current.id) {
+												w.animate.forEach((f) => {
+													if (f.uid === v.uid) {
+														f.animationDelay = d;
+													}
+												});
+											}
+										});
+										store.setData(cloneData);
+									}}
+								/>
 							</Col>
-							<Col span={5}>重复次数:</Col>
-							<Col span={8}>
-								<Select style={{ width: '100%' }}>
+							<Col span={5} style={{ paddingLeft: '10px' }}>
+								重复次数:
+							</Col>
+							<Col span={7}>
+								<Select
+									value={animate[i].animationIterationCount}
+									style={{ width: '100%' }}
+									onChange={(d) => {
+										const cloneData: IStoreData = deepCopy(store.getData());
+										cloneData.block.forEach((w) => {
+											if (w.id === props.current.id) {
+												w.animate.forEach((f) => {
+													if (f.uid === v.uid) {
+														f.animationIterationCount = d;
+													}
+												});
+											}
+										});
+										store.setData(cloneData);
+									}}
+								>
 									{repeat.map((v, i) => {
 										return (
 											<Select.Option key={i} value={v}>
@@ -185,20 +237,36 @@ function AnimateControl(props: AnimateControlProps) {
 								</Select>
 							</Col>
 						</Row>
-						<Row style={{ padding: '20px' }}>
-							<Col span={3}>延迟:</Col>
-							<Col span={8}>
-								<Select style={{ width: '80%' }}>
-									{delay.map((v, i) => {
+						<Row style={{ padding: '20px', alignItems: 'center' }}>
+							<Col span={5}>运动函数:</Col>
+							<Col span={7}>
+								<Select
+									value={animate[i].animationTimingFunction}
+									style={{ width: '100%' }}
+									onChange={(d) => {
+										const cloneData: IStoreData = deepCopy(store.getData());
+										cloneData.block.forEach((w) => {
+											if (w.id === props.current.id) {
+												w.animate.forEach((f) => {
+													if (f.uid === v.uid) {
+														f.animationTimingFunction = d;
+													}
+												});
+											}
+										});
+										store.setData(cloneData);
+									}}
+								>
+									{Object.keys(timeFunction).map((v, i) => {
 										return (
-											<Select.Option key={i} value={v}>
+											<Select.Option key={i} value={timeFunction[v]}>
 												{v}
 											</Select.Option>
 										);
 									})}
 								</Select>
 							</Col>
-							<Col span={8} style={{ justifyContent: 'flex-end' }}>
+							<Col style={{ justifyContent: 'flex-end', flex: 1, textAlign: 'end' }}>
 								<Button
 									danger
 									onClick={() => {
@@ -219,18 +287,43 @@ function AnimateControl(props: AnimateControlProps) {
 				);
 			})}
 
-			<Row style={{ padding: '20px', justifyContent: 'center' }}>
+			<Row style={{ padding: '20px', justifyContent: 'space-around' }}>
+				{animate.length > 0 && (
+					<Button
+						onClick={() => {
+							const cacheProps = animate;
+							const data: IStoreData = store.getData();
+							data.block.forEach((v) => {
+								if (v.id === props.current.id) {
+									v.animate = [];
+								}
+							});
+							store.forceUpdate();
+							setTimeout(() => {
+								data.block.forEach((v) => {
+									if (v.id === props.current.id) {
+										v.animate = cacheProps;
+									}
+								});
+								store.forceUpdate();
+							});
+						}}
+					>
+						运行动画
+					</Button>
+				)}
 				<Button
 					onClick={() => {
 						const cloneData: IStoreData = deepCopy(store.getData());
 						const newItem: AnimateItem = {
-							animationName: '',
-							animationDelay: '0s',
-							animationDuration: '1s',
+							uid: createUid(),
+							animationName: 'bounce',
+							animationDelay: 0,
+							animationDuration: 1,
 							animationTimingFunction: 'linear',
-							animationIterationCount: 1,
+							animationIterationCount: '1',
 						};
-						cloneData.block.map((v) => {
+						cloneData.block.forEach((v) => {
 							if (v.id === props.current.id) {
 								v.animate.push(newItem);
 							}

packages/dooringx-lib/package.json

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

packages/dooringx-lib/src/components/blocks.tsx

@@ -95,7 +95,40 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 		props.data.fixed,
 	]);
 
-	console.log(props.data.animate);
+	const animateProps: CSSProperties = useMemo(() => {
+		const select: CSSProperties = {
+			animationName: '',
+			animationDelay: '',
+			animationDuration: '',
+			animationIterationCount: '',
+			animationFillMode: 'forwards',
+			animationTimingFunction: '',
+		};
+		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;
+		});
+		return select;
+	}, [props.data.animate]);
+	console.log(animateProps);
 
 	const render = useMemo(() => {
 		// 如果是编辑模式下，则需要包裹不能选中层，位移层，缩放控制层，平面移动层。
@@ -126,7 +159,9 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 					}}
 				>
 					{/* 绝对定位元素 */}
-					{props.data.position !== 'static' && <div style={{ ...style }}>{state}</div>}
+					{props.data.position !== 'static' && (
+						<div style={{ ...style, ...animateProps }}>{state}</div>
+					)}
 					{/* 静态定位 非行内 这里暂不考虑布局影响 */}
 					{props.data.position === 'static' && props.data.display !== 'inline' && (
 						<div
@@ -134,6 +169,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 								pointerEvents: 'none',
 								width: '100%',
 								height: '100%',
+								...animateProps,
 							}}
 						>
 							{state}
@@ -141,7 +177,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 					)}
 					{/* 静态定位 行内 这里暂不考虑布局影响 */}
 					{props.data.position === 'static' && props.data.display === 'inline' && (
-						<span style={{ pointerEvents: 'none' }}>{state}</span>
+						<span style={{ pointerEvents: 'none', ...animateProps }}>{state}</span>
 					)}
 					<BlockResizer data={props.data} config={props.config} rect={ref}></BlockResizer>
 					<RotateResizer data={props.data} config={props.config} rect={ref}></RotateResizer>
@@ -159,6 +195,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						zIndex: props.data.zIndex,
 						display: props.data.display,
 						transform: `rotate(${props.data.rotate.value}deg)`,
+						...animateProps,
 					}}
 				>
 					{state}
@@ -172,6 +209,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 		props.iframe,
 		props.config,
 		innerDragData,
+		animateProps,
 		previewState.top,
 		previewState.left,
 		previewState.width,

packages/dooringx-lib/src/components/rightConfig.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 05:42:13
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-03 23:17:54
+ * @LastEditTime: 2021-08-09 14:37:24
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\rightConfig.tsx
  */
 import { CreateOptionsRes } from '../core/components/formTypes';
@@ -186,11 +186,10 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 						</Col>
 						<Col span={18}>
 							<InputNumber
-								min={667}
+								min={0}
 								value={props.config.getStore().getData().container.height}
 								onChange={(e) => {
 									const val = e;
-									console.log(val, 'kkkk');
 									const isEdit = props.config.getStoreChanger().isEdit();
 									if (isEdit) {
 										const originData: IStoreData = deepcopy(

packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-09 15:19:36
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-27 10:18:34
+ * @LastEditTime: 2021-08-09 14:37:55
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\containerResizer.ts
  */
 
@@ -14,7 +14,7 @@ export const containerState = {
 	isDrag: false,
 	startY: 0,
 	startIndex: 0,
-	minHeight: 667,
+	minHeight: 0,
 };
 
 export const containerResizer = {

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-06 21:27:19
+ * @LastEditTime: 2021-08-09 11:30:52
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\store\storetype.ts
  */
 
@@ -20,9 +20,10 @@ export interface IStoreData {
 	modalConfig: Record<string, any>;
 }
 export interface AnimateItem {
+	uid: string;
 	animationName: string;
-	animationDuration: string;
-	animationDelay: string;
+	animationDuration: number;
+	animationDelay: number;
 	animationIterationCount: string;
 	animationTimingFunction: string;
 }