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

wip reset animate

Browse Source
This commit is contained in:
hufeixiong
2022-01-26 18:04:46 +08:00
parent 83ec24ff7e
commit 5629f2755d
15 changed files with 105 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dooringx-example/src/pages/index.tsx
View File

@@ -15,7 +15,7 @@ import {
Control,
} from 'dooringx-lib';
import { InsertRowBelowOutlined, UploadOutlined } from '@ant-design/icons';
import { useContext, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import { configContext, LocaleContext } from '@/layouts';
import { useCallback } from 'react';
import { PREVIEWSTATE } from '@/constant';

8
packages/dooringx-example/src/plugin/formComponents/actionButton.tsx
View File

@@ -243,20 +243,22 @@ function ActionButton(props: ActionButtonProps) {
<div>
<Row
style={{
padding: 20,
padding: 10,
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Col span={8}>标识ID</Col>
<Col span={16}>{props.current.id}</Col>
<Col span={16} style={{ textAlign: 'right' }}>
{props.current.id}
</Col>
</Row>
{currentOption.map((j, i) => {
return (
<Row
key={i}
style={{
padding: 20,
padding: 10,
justifyContent: 'space-between',
alignItems: 'center',
}}

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

@@ -123,6 +123,7 @@ const timeFunction: Record<string, string> = {
let lastAnimate: AnimateItem[] = [];
let isOmit = false;
const padding = 10;
function AnimateControl(props: AnimateControlProps) {
const store = props.config.getStore();
@@ -137,8 +138,8 @@ function AnimateControl(props: AnimateControlProps) {
<>
{animate.map((v, i) => {
return (
<div key={v.uid}>
<Row style={{ padding: '20px', alignItems: 'center' }}>
<div key={v.uid} style={{ borderBottom: '1px dotted #9e9e9e' }}>
<Row style={{ padding: padding, alignItems: 'center' }}>
<Col span={5}>动画名称:</Col>
<Col span={7}>
<Select
@@ -193,7 +194,7 @@ function AnimateControl(props: AnimateControlProps) {
/>
</Col>
</Row>
<Row style={{ padding: '20px', alignItems: 'center' }}>
<Row style={{ padding: padding, alignItems: 'center' }}>
<Col span={5}>延迟时间:</Col>
<Col span={7}>
<InputNumber
@@ -248,7 +249,7 @@ function AnimateControl(props: AnimateControlProps) {
</Select>
</Col>
</Row>
<Row style={{ padding: '20px', alignItems: 'center' }}>
<Row style={{ padding: padding, alignItems: 'center' }}>
<Col span={5}>运动函数:</Col>
<Col span={7}>
<Select
@@ -298,7 +299,7 @@ function AnimateControl(props: AnimateControlProps) {
);
})}
<Row style={{ padding: '20px', justifyContent: 'space-around' }}>
<Row style={{ padding: padding, justifyContent: 'space-around' }}>
{animate.length > 0 && (
<Button
onClick={() => {
@@ -325,6 +326,7 @@ function AnimateControl(props: AnimateControlProps) {
store.cleanLast();
store.setData(clone);
store.cleanLast();
props.config.timelineNeedleConfig.resetFunc();
});
}
}}
@@ -349,6 +351,7 @@ function AnimateControl(props: AnimateControlProps) {
}
});
store.setData(cloneData);
props.config.timelineNeedleConfig.resetFunc();
}}
>
添加动画

2
packages/dooringx-example/src/plugin/formComponents/input.tsx
View File

@@ -25,7 +25,7 @@ function MInput(props: MInputProps) {
}, [props.data]);
const store = props.config.getStore();
return (
<Row style={{ padding: '10px 20px' }}>
<Row style={{ padding: '10px' }}>
<Col span={6} style={{ lineHeight: '30px' }}>
{option.label || '文字'}：
</Col>

4
packages/dooringx-example/src/plugin/formComponents/switch.tsx
View File

@@ -24,11 +24,11 @@ const MSwitch = (props: MSwitchProps) => {
}, [props.data]);
const store = props.config.getStore();
return (
<Row style={{ padding: '10px 20px' }}>
<Row style={{ padding: '10px' }}>
<Col span={8} style={{ lineHeight: '30px' }}>
{(option as any)?.label || '文字'}：
</Col>
<Col span={16}>
<Col span={16} style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<Switch
checked={props.current.props[(option as any).receive] || ''}
onChange={(checked) => {

10
packages/dooringx-example/src/plugin/index.tsx
View File

@@ -26,7 +26,7 @@ const LeftRegistMap: LeftRegistComponentMapItem[] = [
{
type: 'basic',
component: 'input',
img: 'icon-anniu',
img: 'https://img.guguzhu.com/d/file/android/ico/2021/09/08/rytzi2w34tm.png',
displayName: '输入框',
},
];
@@ -59,7 +59,7 @@ export const defaultConfig: Partial<InitConfig> = {
{
type: 'style',
icon: (
<div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}>
外观
</div>
),
@@ -67,7 +67,7 @@ export const defaultConfig: Partial<InitConfig> = {
{
type: 'animate',
icon: (
<div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}>
动画
</div>
),
@@ -75,7 +75,7 @@ export const defaultConfig: Partial<InitConfig> = {
{
type: 'fn',
icon: (
<div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}>
函数
</div>
),
@@ -83,7 +83,7 @@ export const defaultConfig: Partial<InitConfig> = {
{
type: 'actions',
icon: (
<div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}>
事件
</div>
),

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

@@ -129,6 +129,12 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
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') {
@@ -164,7 +170,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
>
{/* 绝对定位元素 */}
{props.data.position !== 'static' && (
<div style={{ ...style, ...animateProps }}>{state}</div>
<div style={{ ...style, ...animateProps, ...animationPlayState }}>{state}</div>
)}
{/* 静态定位 非行内 这里暂不考虑布局影响 */}
{props.data.position === 'static' && props.data.display !== 'inline' && (
@@ -174,6 +180,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
width: '100%',
height: '100%',
...animateProps,
...animationPlayState,
}}
>
{state}
@@ -181,7 +188,9 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
)}
{/* 静态定位 行内 这里暂不考虑布局影响 */}
{props.data.position === 'static' && props.data.display === 'inline' && (
<span style={{ pointerEvents: 'none', ...animateProps }}>{state}</span>
<span style={{ pointerEvents: 'none', ...animateProps, ...animationPlayState }}>
{state}
</span>
)}
<BlockResizer data={props.data} config={props.config} rect={ref}></BlockResizer>
<RotateResizer data={props.data} config={props.config} rect={ref}></RotateResizer>
@@ -201,6 +210,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
display: props.data.display,
transform: `rotate(${props.data.rotate.value}deg)`,
...animateProps,
...animationPlayState,
}}
>
{state}
@@ -215,6 +225,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
props.config,
innerDragData,
animateProps,
animationPlayState,
previewState.top,
previewState.left,
previewState.width,

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

@@ -115,7 +115,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
const originData = props.config.getStoreChanger().getOrigin()?.now;
return (
<div
className="ant-menu"
className="ant-menu right-pannel-wrap"
style={{
height: '100%',
width: '400px',
@@ -136,10 +136,12 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
return (
<Tabs.TabPane tab={v.icon} key={i + ''}>
<div
className="scrollbar"
className="scrollbar right-pannel-tabdiv"
style={{
height: 'calc(100vh - 110px)',
overflow: 'auto',
position: 'fixed',
width: 380,
}}
>
{v.custom && v.customRender && v.customRender(v.type, current)}
@@ -151,7 +153,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
</Tabs>
)}
{!current && !isEdit && !customGlobal && (
<div style={{ padding: '20px' }}>
<div style={{ padding: '10px' }}>
<Row style={{ padding: '10px 0 20px 0', fontWeight: 'bold', userSelect: 'none' }}>
{replaceLocale('right.global', '全局设置', props.config)}
</Row>
@@ -259,8 +261,8 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
)}
{!current && !isEdit && customGlobal && customGlobal(props.config)}
{!current && isEdit && (
<div style={{ padding: '20px' }} className="yh-tcsz">
<Row style={{ padding: '10 0 20px 0', fontWeight: 'bold' }}>
<div style={{ padding: '10px' }} className="yh-tcsz">
<Row style={{ padding: '10px 0 20px 0', fontWeight: 'bold' }}>
{replaceLocale('modal.control', '弹窗配置', props.config)}
</Row>
<Row style={{ padding: '10px 0' }}>

50
packages/dooringx-lib/src/components/timeLine/timeline.tsx
View File

@@ -39,6 +39,11 @@ export interface TimeLineConfigType {
autoFocus: boolean;
scrollDom: null | HTMLDivElement;
}
export interface TimeLineNeedleConfigType {
status: 'stop' | 'start';
runFunc: Function;
resetFunc: Function;
}
const animateTicker = new Array(iter).fill(1).map((_, y) => y);
@@ -159,6 +164,9 @@ const SortableList = SortableContainer(
let cacheBlock: IBlockType[] = [];
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;
@@ -214,6 +222,33 @@ export function TimeLine(props: TimeLineProps) {
}
}, [props.config]);
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 needleReset = () => {
if (timer) {
window.clearInterval(timer);
}
setNeedle(initialLeft);
props.config.timelineNeedleConfig.status = 'stop';
};
props.config.timelineNeedleConfig.resetFunc = needleReset;
props.config.timelineNeedleConfig.runFunc = needleStart;
return (
<div
className={`${props.classes} ant-menu yh-timeline-wrap`}
@@ -276,6 +311,7 @@ export function TimeLine(props: TimeLineProps) {
WAIT = false;
props.config.waitAnimate = false;
store.setData(cloneData);
needleStart();
});
}
}}
@@ -291,8 +327,22 @@ export function TimeLine(props: TimeLineProps) {
width: `calc(100% - ${leftWidth}px)`,
borderBottom: '1px solid #dadada',
overflow: 'hidden',
position: 'relative',
}}
>
<div
style={{
position: 'absolute',
transform: `translate(-${scrollx}px, 0px)`,
width: needleWidth,
height: '100%',
backgroundColor: 'red',
zIndex: 2,
left: needle,
transition: 'left linear',
willChange: 'left',
}}
></div>
<div
style={{
display: 'flex',

2
packages/dooringx-lib/src/components/timeLine/timelineItem.tsx
View File

@@ -124,7 +124,7 @@ const commonCss: CSSProperties = {
height: square * 2,
width: square * 2,
position: 'absolute',
background: '#000000',
background: 'rgba(0, 0, 0, 0.85)',
top: (itemHeight - diff) / 2 - square,
cursor: 'e-resize',
};

7
packages/dooringx-lib/src/config/index.tsx
View File

@@ -33,7 +33,7 @@ import Store from '../core/store';
import { VerticalAlignMiddleOutlined } from '@ant-design/icons';
import { wrapperMoveState } from '../components/wrapperMove/event';
import { wrapperMoveState as iframeWrapperMoveState } from '../components/IframeWrapperMove/event';
import { TimeLineConfigType } from '../components/timeLine/timeline';
import { TimeLineConfigType, TimeLineNeedleConfigType } from '../components/timeLine/timeline';
// 组件部分
/**
@@ -353,6 +353,11 @@ export class UserConfig {
autoFocus: true,
scrollDom: null,
};
public timelineNeedleConfig: TimeLineNeedleConfigType = {
status: 'stop',
runFunc: () => {},
resetFunc: () => {},
};
public waitAnimate = false;
public wrapperMoveState = wrapperMoveState;
public iframeWrapperMoveState = iframeWrapperMoveState;

1
packages/dooringx-lib/src/core/components/createBlock.ts
View File

@@ -43,5 +43,6 @@ export function createBlock(
value: 0,
canRotate: true,
},
animatePlayState: ComponentItem.initData.animatePlayState || '',
};
}

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

@@ -51,5 +51,6 @@ export interface IBlockType {
canRotate: boolean;
};
animate: AnimateItem[];
animatePlayState: string;
fixed: boolean; // 用于制作fixed组件
}

1
packages/dooringx-lib/src/core/storeChanger/index.ts
View File

@@ -46,6 +46,7 @@ function createDefaultModalBlock(): IStoreData['block'] {
value: 0,
canRotate: false,
},
animatePlayState: '',
},
];
}