update 0.11.8

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

@@ -2,11 +2,11 @@
  * @Author: yehuozhili
  * @Date: 2021-08-09 15:15:25
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-09-27 21:41:20
+ * @LastEditTime: 2022-01-12 17:44:22
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\timeLine\timeline.tsx
  */
 import deepcopy from 'deepcopy';
-import React, { CSSProperties, useMemo, useState } from 'react';
+import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
 import { SortableContainer, SortableElement, SortableHandle, SortEnd } from 'react-sortable-hoc';
 import UserConfig from '../../config';
 import { IBlockType, IStoreData } from '../../core/store/storetype';
@@ -35,6 +35,10 @@ export interface TimeLineProps {
 	classes?: string;
 	config: UserConfig;
 }
+export interface TimeLineConfigType {
+	autoFocus: boolean;
+	scrollDom: null | HTMLDivElement;
+}
 
 const animateTicker = new Array(iter).fill(1).map((_, y) => y);
 
@@ -42,13 +46,19 @@ const DragHandle = SortableHandle(() => <MenuOutlined />);
 
 const leftWidth = 200;
 let WAIT = false;
-
 const widthInterval = interval * 10 + 9;
 const ruleWidth = (widthInterval * iter) / 10 + 10;
 const borderColor = '1px solid rgb(204, 204, 204)';
 
 const SortableItem = SortableElement(
-	({ value }: { value: { value: IBlockType; config: UserConfig } }) => (
+	({
+		value,
+	}: {
+		value: {
+			value: IBlockType;
+			config: UserConfig;
+		};
+	}) => (
 		<div
 			style={{
 				userSelect: 'none',
@@ -129,7 +139,14 @@ const SortableItem = SortableElement(
 );
 
 const SortableList = SortableContainer(
-	({ items }: { items: { data: IBlockType[]; config: UserConfig } }) => {
+	({
+		items,
+	}: {
+		items: {
+			data: IBlockType[];
+			config: UserConfig;
+		};
+	}) => {
 		return (
 			<div>
 				{items.data.map((value, index: number) => (
@@ -190,6 +207,13 @@ export function TimeLine(props: TimeLineProps) {
 		return cacheBlock;
 	}, [data, props.config.waitAnimate]);
 
+	const ref = useRef<HTMLDivElement>(null);
+	useEffect(() => {
+		if (ref.current) {
+			props.config.timelineConfig.scrollDom = ref.current;
+		}
+	}, [props.config]);
+
 	return (
 		<div
 			className={`${props.classes} ant-menu yh-timeline-wrap`}
@@ -323,6 +347,7 @@ export function TimeLine(props: TimeLineProps) {
 								setState(target.scrollTop);
 								setScrollx(target.scrollLeft);
 							}}
+							ref={ref}
 							style={{ overflow: 'auto', height: `calc(100% - ${itemHeight}px)` }}
 						>
 							{renderData.map((v) => {

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-25 21:16:58
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-09-28 22:05:04
+ * @LastEditTime: 2022-01-12 17:26:07
  * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
  */
 import React from 'react';
@@ -33,6 +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';
 // 组件部分
 
 /**
@@ -348,6 +349,10 @@ export class UserConfig {
 	public collapsed = false;
 	public ticker = true;
 	public timeline = false;
+	public timelineConfig: TimeLineConfigType = {
+		autoFocus: true,
+		scrollDom: null,
+	};
 	public waitAnimate = false;
 	public wrapperMoveState = wrapperMoveState;
 	public iframeWrapperMoveState = iframeWrapperMoveState;

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

@@ -13,6 +13,7 @@ import UserConfig from '../../config';
 import { rotateMouseMove, rotateMouseUp } from '../rotateHandler';
 import { specialCoList } from '../utils/special';
 import { marklineState } from '../markline/state';
+import { itemHeight } from '../../components/timeLine/timelineItem';
 
 export const innerDrag = function (
 	item: IBlockType,
@@ -35,6 +36,15 @@ export const innerDrag = function (
 			}
 			//candrag给选中，不给拖
 			blockFocus(e, item, config);
+			// 计算scrollTop值，更新dom
+			if (config.timelineConfig.autoFocus && config.timelineConfig.scrollDom) {
+				// 根据其为第几个block计算滚动高度
+				const index = store.getData().block.findIndex((v) => v.id === item.id);
+				if (index >= 0) {
+					config.timelineConfig.scrollDom.scrollTop = itemHeight * index;
+				}
+			}
+
 			if (!item.canDrag) {
 				//containerFocusRemove(config).onMouseDown(e);
 				return;