complete custom animate

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

@@ -1,6 +1,18 @@
 import React, { useMemo, useState } from 'react';
 import { UserConfig, deepCopy, createUid } from 'dooringx-lib';
-import { Col, Row, Select, InputNumber, Button, Modal, Form, Space, Input } from 'antd';
+import {
+	Col,
+	Row,
+	Select,
+	InputNumber,
+	Button,
+	Modal,
+	Form,
+	Space,
+	Input,
+	Table,
+	Popconfirm,
+} from 'antd';
 import { FormMap, FormBaseType } from '../formTypes';
 import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
 import { AnimateItem, IBlockType, IStoreData } from 'dooringx-lib/dist/core/store/storetype';
@@ -138,7 +150,46 @@ function AnimateControl(props: AnimateControlProps) {
 
 	const [customModal, setCustomModal] = useState(false);
 	const [form] = Form.useForm();
-	const [positionEnable, setPositionEnable] = useState<boolean[]>([]);
+
+	const [deletModal, setDeletModal] = useState(false);
+	const customAnimate = props.config.animateFactory.getCustomAnimateName();
+
+	const columns = [
+		{
+			title: '动画名称',
+			dataIndex: 'animateName',
+			width: 150,
+		},
+		{
+			title: '显示名称',
+			dataIndex: 'displayName',
+			width: 150,
+		},
+		{
+			title: '动画详情',
+			dataIndex: 'keyframe',
+		},
+		{
+			title: '操作',
+			width: 120,
+			render: (_: any, record: any) => (
+				<Space size="middle">
+					<Popconfirm
+						onConfirm={() => {
+							const name = record.animateName;
+							props.config.animateFactory.deleteCustomAnimate(name);
+							props.config.animateFactory.deleteKeyFrameAnimate(name);
+							props.config.animateFactory.syncToStore(props.config);
+						}}
+						title="确定删除吗？"
+					>
+						<a>删除</a>
+					</Popconfirm>
+				</Space>
+			),
+		},
+	];
+
 	return (
 		<>
 			<Space
@@ -154,7 +205,7 @@ function AnimateControl(props: AnimateControlProps) {
 				</Button>
 				<Button
 					onClick={() => {
-						setCustomModal(true);
+						setDeletModal(true);
 					}}
 				>
 					删除自定义动画
@@ -192,6 +243,13 @@ function AnimateControl(props: AnimateControlProps) {
 													</Select.Option>
 												);
 											})}
+											{customAnimate.map((v) => {
+												return (
+													<Select.Option key={v.animateName} value={v.animateName}>
+														{v.displayName}
+													</Select.Option>
+												);
+											})}
 										</Select>
 									</Col>
 									<Col span={5} style={{ paddingLeft: '10px' }}>
@@ -393,27 +451,14 @@ function AnimateControl(props: AnimateControlProps) {
 				onOk={() => {
 					form.validateFields().then((res) => {
 						const values = { ...res };
-						// 根据禁用情况去除xy
-						const result = values.keyframes.map((v: any, i: number) => {
-							if (!positionEnable[i]) {
-								// 做删除处理
-								return {
-									...v,
-									positionX: null,
-									positionY: null,
-								};
-							}
-							return v;
-						});
-						values.keyframes = result;
 						props.config.animateFactory.addUserInputIntoCustom(values, props.config);
-						setPositionEnable([]);
 						setCustomModal(false);
+						form.resetFields();
 					});
 				}}
 				onCancel={() => {
-					form.resetFields();
 					setCustomModal(false);
+					form.resetFields();
 				}}
 			>
 				<Form labelCol={{ span: 11 }} form={form}>
@@ -452,28 +497,26 @@ function AnimateControl(props: AnimateControlProps) {
 										>
 											<InputNumber min={0} max={100} formatter={(value) => `${value}%`} />
 										</Form.Item>
-										{positionEnable[key] && (
-											<>
-												<Form.Item
-													style={{ width: 180 }}
-													label="坐标x"
-													{...restField}
-													name={[name, 'positionX']}
-													initialValue={0}
-												>
-													<InputNumber min={0} />
-												</Form.Item>
-												<Form.Item
-													style={{ width: 180 }}
-													label="坐标y"
-													{...restField}
-													name={[name, 'positionY']}
-													initialValue={0}
-												>
-													<InputNumber min={0} />
-												</Form.Item>
-											</>
-										)}
+										<>
+											<Form.Item
+												style={{ width: 180 }}
+												label="坐标偏移X"
+												{...restField}
+												name={[name, 'positionX']}
+												initialValue={0}
+											>
+												<InputNumber />
+											</Form.Item>
+											<Form.Item
+												style={{ width: 180 }}
+												label="坐标偏移Y"
+												{...restField}
+												name={[name, 'positionY']}
+												initialValue={0}
+											>
+												<InputNumber />
+											</Form.Item>
+										</>
 
 										<Form.Item
 											style={{ width: 180 }}
@@ -502,23 +545,9 @@ function AnimateControl(props: AnimateControlProps) {
 										>
 											<InputNumber formatter={(value) => `${value}%`} />
 										</Form.Item>
-										<Button
-											onClick={() => {
-												setPositionEnable((pre) => {
-													pre[key] = !pre[key];
-													return [...pre];
-												});
-											}}
-										>
-											切换坐标修改
-										</Button>
 										<Button
 											danger
 											onClick={() => {
-												setPositionEnable((pre) => {
-													pre.splice(key, 1);
-													return [...pre];
-												});
 												remove(name);
 											}}
 										>
@@ -530,7 +559,6 @@ function AnimateControl(props: AnimateControlProps) {
 									<Button
 										type="dashed"
 										onClick={() => {
-											setPositionEnable((pre) => [...pre, true]);
 											add();
 										}}
 										block
@@ -544,6 +572,21 @@ function AnimateControl(props: AnimateControlProps) {
 					</Form.List>
 				</Form>
 			</Modal>
+			<Modal
+				width={800}
+				title={'删除自定义动画'}
+				forceRender
+				visible={deletModal}
+				footer={null}
+				onOk={() => {
+					setDeletModal(false);
+				}}
+				onCancel={() => {
+					setDeletModal(false);
+				}}
+			>
+				<Table columns={columns} dataSource={customAnimate}></Table>
+			</Modal>
 		</>
 	);
 }

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 05:40:37
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-10-10 00:54:55
+ * @LastEditTime: 2022-04-01 14:29:39
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\preview.tsx
  */
 import Container from './container';
@@ -62,10 +62,17 @@ function Preview(props: PreviewProps): ReactElement {
 					.syncEventMap(props.config.getStore().getData(), props.config.getStoreChanger());
 
 				// 设置全局
-				const bodyColor = props.config.getStore().getData().globalState?.bodyColor;
+				const global = props.config.getStore().getData().globalState;
+				const bodyColor = global?.bodyColor;
 				if (bodyColor) {
 					document.body.style.backgroundColor = bodyColor;
 				}
+				const customAnimate = global?.customAnimate;
+				if (customAnimate && Array.isArray(customAnimate)) {
+					// 插入自定义动画
+					props.config.animateFactory.fromArrInsertKeyFrame(customAnimate);
+				}
+
 				if (props.completeFn) {
 					props.completeFn();
 				}

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-08-09 15:15:25
  * @LastEditors: yehuozhili
- * @LastEditTime: 2022-01-12 17:44:22
+ * @LastEditTime: 2022-04-01 13:41:34
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\timeLine\timeline.tsx
  */
 import deepcopy from 'deepcopy';
@@ -457,7 +457,13 @@ export function TimeLine(props: TimeLineProps) {
 			}}
 			onMouseDown={(e) => {
 				const dom = e.target as HTMLDivElement;
-				if (!(dom.className && dom.className.indexOf('yh-timeline-item-mainblock') > -1)) {
+				if (
+					!(
+						dom.className &&
+						dom.className.indexOf &&
+						dom.className.indexOf('yh-timeline-item-mainblock') > -1
+					)
+				) {
 					resetCurrentMoveItemId();
 				}
 			}}

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

@@ -16,8 +16,8 @@ import { deepCopy } from '../utils';
 export interface TransformItemObj {
 	opacity: number;
 	percent: number;
-	positionX: number | null;
-	positionY: number | null;
+	positionX: number;
+	positionY: number;
 	rotate: number;
 	scale: number;
 }
@@ -48,35 +48,62 @@ export class AnimateFactory {
 	 *
 	 * 插入动画
 	 * @param {string} ruleText
-	 * @param {string} keyframeName 动画名称
 	 * @memberof AnimateFactory
 	 */
-	inserKeyframeAnimate(ruleText: string, keyframeName: string) {
+	inserKeyframeAnimate(ruleText: string) {
 		const sheets = this.getStyleSheets();
 		if (sheets.length === 0) {
 			let style = document.createElement('style');
 			style.appendChild(document.createTextNode(''));
 			document.head.appendChild(style);
 		}
-		const len = sheets.length;
-		let ss: number | null = null;
-		let st: number | null = null;
+		// const len = sheets.length;
+		// let ss: number | null = null;
+		// let st: number | null = null;
+		// for (let i = 0; i < len; i++) {
+		// 	for (let k = 0; k < sheets[i].cssRules.length; k++) {
+		// 		const rule = sheets[i].cssRules[k] as CSSKeyframesRule;
+		// 		const name = rule?.name;
+		// 		if (name && name === keyframeName) {
+		// 			// 删除该keyframe
+		// 			ss = i;
+		// 			st = k;
+		// 		}
+		// 	}
+		// }
+		// if (ss !== null && st !== null) {
+		// 	sheets[ss].deleteRule(st);
+		// }
+		// let sheet = sheets[ss ? ss : sheets.length - 1] as CSSStyleSheet;
+		let sheet = sheets[0] as CSSStyleSheet; // 末尾的经常存在重复覆盖的问题
+		sheet.insertRule(ruleText, sheet.cssRules.length);
+	}
+
+	/**
+	 *
+	 * 删除keyframe
+	 * @param {string} animateName
+	 * @returns
+	 * @memberof AnimateFactory
+	 */
+	deleteKeyFrameAnimate(animateName: string) {
+		const sheets = this.getStyleSheets();
+		if (sheets.length === 0) {
+			return;
+		}
+		const sheet = sheets[0] as CSSStyleSheet;
+		const len = sheet.cssRules.length;
+		let ss = null;
 		for (let i = 0; i < len; i++) {
-			for (let k = 0; k < sheets[i].cssRules.length; k++) {
-				const rule = sheets[i].cssRules[k] as CSSKeyframesRule;
-				const name = rule?.name;
-				if (name && name === keyframeName) {
-					// 删除该keyframe
-					ss = i;
-					st = k;
-				}
+			const rule = sheet.cssRules[i] as CSSKeyframesRule;
+			const name = rule?.name;
+			if (name && name === animateName) {
+				ss = i;
 			}
 		}
-		if (ss !== null && st !== null) {
-			sheets[ss].deleteRule(st);
+		if (ss !== null) {
+			sheet.deleteRule(ss);
 		}
-		let sheet = sheets[ss ? ss : sheets.length - 1] as CSSStyleSheet;
-		sheet.insertRule(ruleText, sheet.rules ? sheet.rules.length : sheet.cssRules.length);
 	}
 
 	/**
@@ -106,7 +133,7 @@ export class AnimateFactory {
 	 */
 	fromArrInsertKeyFrame(customAnimateName: Array<CustomAnimateObj> = this.customAnimateName) {
 		customAnimateName.forEach((v) => {
-			this.inserKeyframeAnimate(v.keyframe, v.animateName);
+			this.inserKeyframeAnimate(v.keyframe);
 		});
 	}
 
@@ -145,18 +172,11 @@ export class AnimateFactory {
 	addUserInputIntoCustom(item: TransformItem, config: UserConfig) {
 		// 先转换keyframe
 		const keyframeItem = item.keyframes.map((v) => {
-			if (v.positionX !== null && v.positionY !== null) {
-				// 带入xy 否则不计算xy
-				return `${v.percent}% {
+			return `${v.percent}% {
             transform:translate(${v.positionX}px, ${v.positionY}px) scale(${(v.scale / 100).toFixed(
-					2
-				)}) rotate(${v.rotate}deg);
+				2
+			)}) rotate(${v.rotate}deg);
          }`;
-			} else {
-				return `${v.percent}% {
-          transform: scale(${(v.scale / 100).toFixed(2)}) rotate(${v.rotate}deg);
-       }`;
-			}
 		});
 		const keyframe = `@keyframes ${item.animateName} {
       ${keyframeItem.join(' ')}
@@ -171,7 +191,7 @@ export class AnimateFactory {
 		// 添加内置
 		this.addCustomAnimate(customAnimateNameArr);
 		// 插入动画
-		this.inserKeyframeAnimate(keyframe, item.animateName);
+		this.inserKeyframeAnimate(keyframe);
 		// 写入store
 		this.syncToStore(config);
 	}