update 0.12.4

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

@@ -4,7 +4,7 @@ import { innerContainerDrag } from '../core/innerDrag';
 import { NormalMarkLineRender } from '../core/markline';
 import { IStoreData } from '../core/store/storetype';
 import { wrapperMoveState } from './wrapperMove/event';
-import { CSSProperties, PropsWithChildren, useMemo, useState } from 'react';
+import { CSSProperties, PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import Blocks from './blocks';
 import { containerResizer } from '../core/resizeHandler/containerResizer';
 import React from 'react';
@@ -42,6 +42,19 @@ function Container(props: PropsWithChildren<ContainerProps>) {
 		forceUpdate((p) => p + 1);
 	};
 
+	useEffect(() => {
+		if (props.context === 'preview') {
+			props.config.onMounted();
+			props.config.onMountedFn.forEach((v) => v());
+		}
+		return () => {
+			if (props.context === 'preview') {
+				props.config.destroyed();
+				props.config.destroyedFn.forEach((v) => v());
+			}
+		};
+	}, [props.config, props.context]);
+
 	return (
 		<>
 			{props.context === 'edit' && (

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

@@ -49,6 +49,8 @@ function Preview(props: PreviewProps): ReactElement {
 
 	useEffect(() => {
 		const finalFn = () => {
+			props.config.created();
+			props.config.createdFn.forEach((v) => v());
 			setTimeout(() => {
 				// 链接数据
 				props.config
@@ -67,6 +69,8 @@ function Preview(props: PreviewProps): ReactElement {
 				if (props.completeFn) {
 					props.completeFn();
 				}
+				props.config.beforeOnMounted();
+				props.config.beforeOnMountedFn.forEach((v) => v());
 				if (props.loadingState === undefined) {
 					setLoading(false);
 				}

packages/dooringx-lib/src/components/timeLine/timeline.tsx

@@ -27,6 +27,7 @@ import {
 	TimeLineItemMouseOver,
 	interval,
 	iter,
+	resetCurrentMoveItemId,
 } from './timelineItem';
 import { specialCoList } from '../../core/utils/special';
 import { replaceLocale } from '../../locale';
@@ -454,6 +455,12 @@ export function TimeLine(props: TimeLineProps) {
 				flexDirection: 'column',
 				...props.style,
 			}}
+			onMouseDown={(e) => {
+				const dom = e.target as HTMLDivElement;
+				if (!(dom.className && dom.className.indexOf('yh-timeline-item-mainblock') > -1)) {
+					resetCurrentMoveItemId();
+				}
+			}}
 		>
 			<>
 				<div

packages/dooringx-lib/src/components/timeLine/timelineItem.tsx

@@ -7,6 +7,7 @@
  */
 import React, { CSSProperties } from 'react';
 import { AnimateItem } from '../../core/store/storetype';
+import { randomColor } from '../../core/utils';
 
 export const iter = 500;
 export const itemHeight = 25;
@@ -20,19 +21,6 @@ const times = interval + 1;
 export interface TimeLineItemProps {
 	animate: AnimateItem[];
 }
-const bgColor = [
-	'#4af',
-	'rgb(93, 128, 158)',
-	'rgb(158, 130, 93)',
-	'rgb(219, 72, 34)',
-	'rgb(255, 68, 168)',
-	'#4af',
-	'rgb(93, 128, 158)',
-	'rgb(158, 130, 93)',
-	'rgb(219, 72, 34)',
-	'rgb(255, 68, 168)',
-];
-
 interface MoveStateTypes {
 	startX: number;
 	isMove: boolean;
@@ -47,6 +35,7 @@ const moveState: MoveStateTypes = {
 interface resizeStateTypes extends MoveStateTypes {
 	left: boolean;
 }
+let currentMoveItemId = '';
 
 const resizeState: resizeStateTypes = {
 	startX: 0,
@@ -118,6 +107,9 @@ export const TimeLineItemMouseOver = function () {
 	resizeState.startX = 0;
 	resizeState.uid = '';
 };
+export const resetCurrentMoveItemId = () => {
+	currentMoveItemId = '';
+};
 
 const commonCss: CSSProperties = {
 	transform: `rotate(45deg)`,
@@ -129,6 +121,8 @@ const commonCss: CSSProperties = {
 	cursor: 'e-resize',
 };
 
+const bgColorCache: Record<string, string> = {};
+
 export function TimeLineItem(props: TimeLineItemProps) {
 	return (
 		<>
@@ -137,7 +131,10 @@ export function TimeLineItem(props: TimeLineItemProps) {
 				const repeat =
 					v.animationIterationCount === 'infinite' ? iter : parseInt(v.animationIterationCount);
 				const width = v.animationDuration * times * repeat;
-				const index = v.uid.charCodeAt(0) % 10;
+
+				if (!bgColorCache[v.uid]) {
+					bgColorCache[v.uid] = randomColor();
+				}
 				return (
 					<div
 						key={v.uid}
@@ -145,32 +142,40 @@ export function TimeLineItem(props: TimeLineItemProps) {
 							moveState.startX = e.clientX;
 							moveState.uid = v.uid;
 							moveState.isMove = true;
+							currentMoveItemId = v.uid;
 						}}
+						className="yh-timeline-item-mainblock"
 						style={{
 							position: 'absolute',
 							top: diff / 2,
 							left: left,
 							width: width,
 							height: itemHeight - diff,
-							background: bgColor[index],
+							background: bgColorCache[v.uid],
 							zIndex: 1,
 							cursor: 'move',
+							borderRadius: '4px',
+							opacity: v.uid === currentMoveItemId ? 1 : 0.7,
 						}}
 					>
-						<div
-							className="yh-timeline-item-left"
-							style={{ ...commonCss, left: -square }}
-							onMouseDown={(e) => {
-								resizeMouseDown(e, v, true);
-							}}
-						></div>
-						<div
-							className="yh-timeline-item-right"
-							style={{ ...commonCss, right: -square }}
-							onMouseDown={(e) => {
-								resizeMouseDown(e, v, false);
-							}}
-						></div>
+						{v.uid === currentMoveItemId && (
+							<>
+								<div
+									className="yh-timeline-item-left"
+									style={{ ...commonCss, left: -square }}
+									onMouseDown={(e) => {
+										resizeMouseDown(e, v, true);
+									}}
+								></div>
+								<div
+									className="yh-timeline-item-right"
+									style={{ ...commonCss, right: -square }}
+									onMouseDown={(e) => {
+										resizeMouseDown(e, v, false);
+									}}
+								></div>
+							</>
+						)}
 					</div>
 				);
 			})}

packages/dooringx-lib/src/config/index.tsx

@@ -364,6 +364,14 @@ export class UserConfig {
 		current: 0,
 		isRefresh: true,
 	};
+	public createdFn: Function[] = [];
+	public created: Function = () => {};
+	public beforeOnMountedFn: Function[] = [];
+	public beforeOnMounted: Function = () => {};
+	public onMountedFn: Function[] = [];
+	public onMounted: Function = () => {};
+	public destroyedFn: Function[] = [];
+	public destroyed: Function = () => {};
 	public blockForceUpdate: Array<Function> = [];
 	public waitAnimate = false;
 	public wrapperMoveState = wrapperMoveState;

packages/dooringx-lib/src/core/utils/index.ts

@@ -17,6 +17,10 @@ export function swap(indexa: number, indexb: number, arr: Array<any>) {
 	return arr;
 }
 
+export function randomColor() {
+	return '#' + ('00000' + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6);
+}
+
 // 将rgba字符串对象转化为rgba对象
 export function rgba2Obj(rgba = '') {
 	let reg = /rgba\(\s*?(\d+)\s*?,\s*?(\d+)\s*?,\s*?(\d+)\s*?,\s*?(\d+)\s*?\)/g;