guoshujing/dooring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 0.8.0

Browse Source
This commit is contained in:
hufeixiong
2021-08-09 14:39:49 +08:00
parent d744c9a80f
commit 28992dcff2
7 changed files with 197 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@@ -1,5 +1,11 @@
## changelog ## changelog
## 0.8.0
动画部分重构，可支持多动画同时配置。
画布拖动最小值变更为0。
## 0.7.7 ## 0.7.7

189
packages/dooringx-example/src/plugin/formComponents/animateControl.tsx
View File

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

2
packages/dooringx-lib/package.json
View File

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

44
packages/dooringx-lib/src/components/blocks.tsx
View File

@@ -95,7 +95,40 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
props.data.fixed, 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(() => { 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' && ( {props.data.position === 'static' && props.data.display !== 'inline' && (
<div <div
@@ -134,6 +169,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
pointerEvents: 'none', pointerEvents: 'none',
width: '100%', width: '100%',
height: '100%', height: '100%',
...animateProps,
}} }}
> >
{state} {state}
@@ -141,7 +177,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
)} )}
{/* 静态定位 行内 这里暂不考虑布局影响 */} {/* 静态定位 行内 这里暂不考虑布局影响 */}
{props.data.position === 'static' && props.data.display === 'inline' && ( {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> <BlockResizer data={props.data} config={props.config} rect={ref}></BlockResizer>
<RotateResizer data={props.data} config={props.config} rect={ref}></RotateResizer> <RotateResizer data={props.data} config={props.config} rect={ref}></RotateResizer>
@@ -159,6 +195,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
zIndex: props.data.zIndex, zIndex: props.data.zIndex,
display: props.data.display, display: props.data.display,
transform: `rotate(${props.data.rotate.value}deg)`, transform: `rotate(${props.data.rotate.value}deg)`,
...animateProps,
}} }}
> >
{state} {state}
@@ -172,6 +209,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
props.iframe, props.iframe,
props.config, props.config,
innerDragData, innerDragData,
animateProps,
previewState.top, previewState.top,
previewState.left, previewState.left,
previewState.width, previewState.width,

5
packages/dooringx-lib/src/components/rightConfig.tsx
View File

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

4
packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-03-09 15:19:36 * @Date: 2021-03-09 15:19:36
* @LastEditors: yehuozhili * @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 * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\containerResizer.ts
*/ */
@@ -14,7 +14,7 @@ export const containerState = {
isDrag: false, isDrag: false,
startY: 0, startY: 0,
startIndex: 0, startIndex: 0,
minHeight: 667, minHeight: 0,
}; };
export const containerResizer = { export const containerResizer = {

7
packages/dooringx-lib/src/core/store/storetype.ts
View File

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