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

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,

6
packages/dooringx-lib/src/components/preview.tsx
View File

@@ -33,13 +33,13 @@ export interface PreviewProps {
* @memberof PreviewProps
*/
completeFn?: Function;
/**
/**
*
* 预览样式
* @type {CSSProperties}
* @memberof PreviewProps
*/
previewContainerStyle?: CSSProperties;
previewContainerStyle?: CSSProperties;
}
function Preview(props: PreviewProps): ReactElement {
@@ -128,7 +128,7 @@ function Preview(props: PreviewProps): ReactElement {
config={props.config}
context="preview"
state={props.config.getStore().getData()}
previewContainerStyle={props.previewContainerStyle}
previewContainerStyle={props.previewContainerStyle}
></Container>
</>
);

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: '',
},
];
}