add timeline resize

packages/dooringx-lib/.eslintrc.js

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 05:00:20
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-09 01:34:14
+ * @LastEditTime: 2021-08-16 17:06:51
  * @FilePath: \dooringx\packages\dooringx-lib\.eslintrc.js
  */
 module.exports = {

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

@@ -94,6 +94,18 @@ const SortableList = SortableContainer(
 	}
 );
 
+const moveState = {
+	startX: 0,
+	startY: 0,
+	isMove: false,
+};
+
+const mouseUp = () => {
+	if (moveState.isMove) {
+		moveState.isMove = false;
+	}
+};
+
 export function Control(props: PropsWithChildren<ControlProps>) {
 	const { style } = props;
 	const [visible, setVisible] = useState(false);
@@ -136,16 +148,33 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 				></SortableList>
 			</div>
 		);
-
+	const [xy, setXy] = useState({ x: 0, y: 0 });
 	return (
 		<>
 			<div
 				className="ant-menu"
+				onMouseDown={(e) => {
+					moveState.startX = e.clientX;
+					moveState.startY = e.clientY;
+					moveState.isMove = true;
+				}}
+				onMouseMove={(e) => {
+					if (moveState.isMove) {
+						const diffx = e.clientX - moveState.startX;
+						const diffy = e.clientY - moveState.startY;
+						setXy((pre) => ({ x: pre.x + diffx, y: pre.y + diffy }));
+						moveState.startX = e.clientX;
+						moveState.startY = e.clientY;
+					}
+				}}
+				onMouseUp={mouseUp}
+				onMouseLeave={mouseUp}
 				style={{
 					display: 'flex',
 					flexDirection: 'column',
 					justifyContent: 'center',
 					alignItems: 'center',
+					transform: `translate(${xy.x}px,${xy.y}px)`,
 					...style,
 				}}
 			>

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-04 10:32:45
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-12 15:50:48
+ * @LastEditTime: 2021-08-16 20:32:23
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx
  */
 import React, { ReactNode, useEffect, useMemo, useState } from 'react';
@@ -158,8 +158,8 @@ function LeftConfig(props: LeftConfigProps) {
 					style={{ flex: 1 }}
 					defaultSelectedKeys={[menuSelect]}
 					mode="vertical"
-					inlineCollapsed={props.showName ? false : true}
-					className={`${styles.menuWidth} ${styles.menus}`}
+					inlineCollapsed={props.showName ? undefined : true}
+					className={`${styles.menuWidth} ${styles.menus} yh-menu`}
 				>
 					{leftMapRenderListCategory.map((v, i) => {
 						return (
@@ -167,14 +167,18 @@ function LeftConfig(props: LeftConfigProps) {
 								key={i}
 								onClick={() => setMenuSelect(i + '')}
 								icon={v.icon}
-								className={props.mode === 'vertical' ? `${styles.menuStyle} ${styles.menus}` : ''}
+								className={
+									props.mode === 'vertical'
+										? `${styles.menuStyle} ${styles.menus} yh-menuitem`
+										: 'yh-menuitem'
+								}
 							>
 								{props.showName && v.displayName}
 							</Menu.Item>
 						);
 					})}
 				</Menu>
-				<div className={`${styles.menu_footer}`}>{props.footerConfig}</div>
+				<div className={`${styles.menu_footer} yh-menufooter`}>{props.footerConfig}</div>
 				<Menu selectedKeys={[]}>
 					<Menu.Item
 						key="1"

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' }}>

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
+							style={{ ...commonCss, left: -square }}
+							onMouseDown={(e) => {
+								resizeMouseDown(e, v, true);
 							}}
 						></div>
+						<div
+							style={{ ...commonCss, right: -square }}
+							onMouseDown={(e) => {
+								resizeMouseDown(e, v, false);
+							}}
+						></div>
+					</div>
 				);
 			})}
 		</>