add timeline resize

2021-08-16 21:06:23 +08:00
parent 8d23f9477c
commit 085a49b8fc
5 changed files with 140 additions and 23 deletions
--- a/packages/dooringx-lib/src/components/timeLine/timeline.tsx
+++ b/packages/dooringx-lib/src/components/timeLine/timeline.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-08-09 15:15:25
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-16 11:20:59
+ * @LastEditTime: 2021-08-16 20:30:03
 * @FilePath: \dooringx\packages\dooringx-lib\src\components\timeLine\timeline.tsx
 */
 import deepcopy from 'deepcopy';
@@ -18,7 +18,9 @@ import {
 	TimeLineItemMouseMove,
 	TimeLineItemMouseOver,
 	interval,
+	iter,
 } from './timelineItem';
+import { specialCoList } from '../../core/utils/special';

 export interface TimeLineProps {
 	style?: CSSProperties;
@@ -26,7 +28,6 @@ export interface TimeLineProps {
 	config: UserConfig;
 }

-const iter = 500;
 const animateTicker = new Array(iter).fill(1).map((_, y) => y);

 const DragHandle = SortableHandle(() => <MenuOutlined />);
@@ -50,6 +51,18 @@ const SortableItem = SortableElement(
 			}}
 		>
 			<div
+				onClick={() => {
+					const store = value.config.getStore();
+					const clone = deepcopy(store.getData());
+					clone.block.forEach((v) => {
+						if (v.id === value.value.id && !specialCoList.includes(value.value.name)) {
+							v.focus = true;
+						} else {
+							v.focus = false;
+						}
+					});
+					store.setData(clone);
+				}}
 				style={{
 					display: 'flex',
 					alignItems: 'center',
@@ -58,6 +71,8 @@ const SortableItem = SortableElement(
 					minWidth: leftWidth,
 					borderRight: borderColor,
 					borderBottom: borderColor,
+					backgroundColor: value.value.focus ? '#eeeeee' : 'initial',
+					cursor: 'pointer',
 				}}
 			>
 				<div style={{ width: 30, cursor: 'move' }}>
--- a/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx
+++ b/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx
@@ -2,14 +2,19 @@
 * @Author: yehuozhili
 * @Date: 2021-08-10 20:26:44
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-11 15:34:46
+ * @LastEditTime: 2021-08-16 20:29:58
 * @FilePath: \dooringx\packages\dooringx-lib\src\components\timeLine\timelineItem.tsx
 */
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { AnimateItem } from '../../core/store/storetype';

+export const iter = 500;
 export const itemHeight = 25;
+export const interval = 19;
 const diff = 6;
+const square = 2.5;
+const times = interval + 1;
+
 // 需要根据animate属性渲染div

 export interface TimeLineItemProps {
@@ -32,18 +37,34 @@ interface MoveStateTypes {
 	startX: number;
 	isMove: boolean;
 	uid: string;
-	dom: null | HTMLDivElement;
 }

 const moveState: MoveStateTypes = {
 	startX: 0,
 	isMove: false,
 	uid: '',
-	dom: null,
 };
+interface resizeStateTypes extends MoveStateTypes {
+	left: boolean;
+}

-export const interval = 19;
-const times = interval + 1;
+const resizeState: resizeStateTypes = {
+	startX: 0,
+	isMove: false,
+	uid: '',
+	left: true,
+};
+const resizeMouseDown = (
+	e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+	v: AnimateItem,
+	left: boolean
+) => {
+	e.stopPropagation();
+	resizeState.startX = e.screenX;
+	resizeState.uid = v.uid;
+	resizeState.isMove = true;
+	resizeState.left = left;
+};

 export const TimeLineItemMouseMove = function (
 	e: React.MouseEvent<HTMLDivElement, MouseEvent>,
@@ -61,15 +82,51 @@ export const TimeLineItemMouseMove = function (
 			}
 		});
 		moveState.startX = e.screenX;
+	} else if (resizeState.isMove) {
+		const diff = e.screenX - resizeState.startX;
+		if (resizeState.left) {
+			animate.forEach((v) => {
+				if (v.uid === resizeState.uid) {
+					const count =
+						v.animationIterationCount === 'infinite' ? 500 : parseInt(v.animationIterationCount);
+					const f2 = parseFloat((v.animationDelay + diff / times).toFixed(1));
+					const f = parseFloat((v.animationDuration - (f2 - v.animationDelay) / count).toFixed(1));
+					v.animationDuration = f2 < 0 ? v.animationDuration : f < 0 ? 0 : f;
+					v.animationDelay = f2 < 0 ? 0 : f2;
+					forceUpdate((p) => p + 1);
+				}
+			});
+		} else {
+			animate.forEach((v) => {
+				if (v.uid === resizeState.uid) {
+					const count =
+						v.animationIterationCount === 'infinite' ? 500 : parseInt(v.animationIterationCount);
+					const f = parseFloat((v.animationDuration + diff / count / times).toFixed(1));
+					v.animationDuration = f < 0 ? 0 : f;
+					forceUpdate((p) => p + 1);
+				}
+			});
+		}
+		resizeState.startX = e.screenX;
 	}
 };
 export const TimeLineItemMouseOver = function () {
 	moveState.isMove = false;
 	moveState.startX = 0;
 	moveState.uid = '';
-	if (moveState.dom) {
-		moveState.dom.style.cursor = 'default';
-	}
+	resizeState.isMove = false;
+	resizeState.startX = 0;
+	resizeState.uid = '';
+};
+
+const commonCss: CSSProperties = {
+	transform: `rotate(45deg)`,
+	height: square * 2,
+	width: square * 2,
+	position: 'absolute',
+	background: '#000000',
+	top: (itemHeight - diff) / 2 - square,
+	cursor: 'e-resize',
 };

 export function TimeLineItem(props: TimeLineItemProps) {
@@ -78,7 +135,7 @@ export function TimeLineItem(props: TimeLineItemProps) {
 			{props.animate.map((v) => {
 				const left = v.animationDelay * times + interval;
 				const repeat =
-					v.animationIterationCount === 'infinite' ? 500 : parseInt(v.animationIterationCount);
+					v.animationIterationCount === 'infinite' ? iter : parseInt(v.animationIterationCount);
 				const width = v.animationDuration * times * repeat;
 				const index = v.uid.charCodeAt(0) % 10;
 				return (
@@ -88,9 +145,6 @@ export function TimeLineItem(props: TimeLineItemProps) {
 							moveState.startX = e.screenX;
 							moveState.uid = v.uid;
 							moveState.isMove = true;
-							const dom = e.target as HTMLDivElement;
-							dom.style.cursor = 'move';
-							moveState.dom = dom;
 						}}
 						style={{
 							position: 'absolute',
@@ -99,8 +153,23 @@ export function TimeLineItem(props: TimeLineItemProps) {
 							width: width,
 							height: itemHeight - diff,
 							background: bgColor[index],
+							zIndex: 1,
+							cursor: 'move',
 						}}
-					></div>
+					>
+						<div
+							style={{ ...commonCss, left: -square }}
+							onMouseDown={(e) => {
+								resizeMouseDown(e, v, true);
+							}}
+						></div>
+						<div
+							style={{ ...commonCss, right: -square }}
+							onMouseDown={(e) => {
+								resizeMouseDown(e, v, false);
+							}}
+						></div>
+					</div>
 				);
 			})}
 		</>