update 0.3.0

packages/dooringx-example/src/pages/index.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-05-15 12:49:28
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-10 19:08:25
+ * @LastEditTime: 2021-07-12 20:19:38
  * @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
  */
 import {
@@ -33,7 +33,7 @@ export default function IndexPage() {
 	const [state] = useStoreState(config, subscribeFn, everyFn);
 
 	return (
-		<div {...innerContainerDragUp()}>
+		<div {...innerContainerDragUp(config)}>
 			<div style={{ height: HeaderHeight }}>
 				head
 				<button
@@ -64,11 +64,11 @@ export default function IndexPage() {
 					<LeftConfig config={config}></LeftConfig>
 				</div>
 
-				<ContainerWrapper>
+				<ContainerWrapper config={config}>
 					<>
 						<Control
 							config={config}
-							style={{ position: 'fixed', bottom: '60px', right: '450px' }}
+							style={{ position: 'fixed', bottom: '60px', right: '450px', zIndex: 100 }}
 						></Control>
 						<Container state={state} config={config} context="edit"></Container>
 					</>

packages/dooringx-lib/README.md

@@ -2,13 +2,18 @@
  * @Author: yehuozhili
  * @Date: 2021-01-31 20:44:16
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-12 15:22:17
+ * @LastEditTime: 2021-07-12 21:00:48
  * @FilePath: \dooringx\packages\dooringx-lib\README.md
 -->
 
 ## Dooringx-lib 
 ## changelog
 
+- 0.3.0 
+1、增加标尺，ContainerWrapper需要传递config才可使用。
+2、修改容器最小拖动667。修复画布缩放下拖拽时与鼠标距离不一致。
+3、innerContainerDragUp需要传递config。
+
 - 0.2.0 commander的传递进行修改，可以获得config了，commander不再从index中导出 ，需要使用时从config中获取。增加左侧类名，方便自定义。
 - 0.1.10 修改eslint依赖推荐
 - 0.1.9 增加全局body设置

packages/dooringx-lib/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",

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

@@ -61,8 +61,8 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 
 	const ref = useRef<HTMLDivElement>(null);
 	const innerDragData = useMemo(() => {
-		return { ...innerDrag(props.data, ref) };
+		return { ...innerDrag(props.data, ref, props.config) };
-	}, [props.data]);
+	}, [props.data, props.config]);
 
 	useEffect(() => {
 		const fn = () => {
@@ -133,7 +133,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 					{...innerDragData}
 					onContextMenu={(e) => {
 						if (props.data.name !== 'modalMask') {
-							contextMenuEvent(e, ref);
+							contextMenuEvent(e, ref, props.config);
 						}
 					}}
 				>

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

@@ -2,7 +2,6 @@ import { containerDragResolve } from '../core/crossDrag';
 import { containerFocusRemove } from '../core/focusHandler';
 import { innerContainerDrag } from '../core/innerDrag';
 import { NormalMarkLineRender } from '../core/markline';
-import { scaleState } from '../core/scale/state';
 import { IStoreData } from '../core/store/storetype';
 import { wrapperMoveState } from './wrapperMove/event';
 import { CSSProperties, PropsWithChildren, useMemo } from 'react';
@@ -22,14 +21,14 @@ interface ContainerProps {
 }
 function Container(props: PropsWithChildren<ContainerProps>) {
 	const { editContainerStyle, previewContainerStyle } = props;
-
+	const scaleState = props.config.getScaleState();
 	const transform = useMemo(() => {
 		if (props.context === 'edit') {
 			return `scale(${scaleState.value}) translate(${wrapperMoveState.needX}px, ${wrapperMoveState.needY}px)`;
 		} else {
 			return undefined;
 		}
-	}, [props.context]);
+	}, [props.context, scaleState]);
 
 	const bgColor = () => {
 		const isEdit = props.config.getStoreChanger().isEdit();
@@ -63,11 +62,13 @@ function Container(props: PropsWithChildren<ContainerProps>) {
 									overflow: 'hidden',
 									...editContainerStyle,
 								}}
-								{...(props.context === 'edit' ? containerDragResolve : null)}
+								{...(props.context === 'edit' ? containerDragResolve(props.config) : null)}
-								{...(props.context === 'edit' ? innerContainerDrag() : null)}
+								{...(props.context === 'edit' ? innerContainerDrag(props.config) : null)}
-								{...(props.context === 'edit' ? containerFocusRemove() : null)}
+								{...(props.context === 'edit' ? containerFocusRemove(props.config) : null)}
 							>
-								{props.context === 'edit' && <NormalMarkLineRender></NormalMarkLineRender>}
+								{props.context === 'edit' && (
+									<NormalMarkLineRender config={props.config}></NormalMarkLineRender>
+								)}
 								{props.state.block.map((v) => {
 									return (
 										<Blocks

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-04 10:32:45
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-12 15:21:27
+ * @LastEditTime: 2021-07-12 17:12:35
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx
  */
 import React, { ReactNode, useEffect, useMemo, useState } from 'react';
@@ -144,8 +144,8 @@ function LeftConfig(props: LeftConfigProps) {
 		}
 	}, [menuSelect, props.config, leftMapRenderListCategory, search]);
 
-	const [isCollapse, setCollapse] = useState(false);
+	const [isCollapse, setCollapse] = useState(props.config.getCollapse());
-	const [renderCollapse, setRenderCollaspe] = useState(false);
+	const [renderCollapse, setRenderCollaspe] = useState(props.config.getCollapse());
 
 	return (
 		<div style={{ display: 'flex', height: '100%' }}>
@@ -164,11 +164,15 @@ function LeftConfig(props: LeftConfigProps) {
 							setCollapse((pre) => {
 								if (pre) {
 									setTimeout(() => {
+										props.config.collapsed = false;
 										setRenderCollaspe(false);
+										props.config.getStore().forceUpdate();
 									}, 300);
 									return !pre;
 								} else {
+									props.config.collapsed = true;
 									setRenderCollaspe(true);
+									props.config.getStore().forceUpdate();
 									return !pre;
 								}
 							})

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

@@ -2,12 +2,11 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 05:42:13
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-10 16:06:33
+ * @LastEditTime: 2021-07-12 20:36:30
- * @FilePath: \DooringV2\packages\dooringx-lib\src\components\rightConfig.tsx
+ * @FilePath: \dooringx\packages\dooringx-lib\src\components\rightConfig.tsx
  */
 import { CreateOptionsRes } from '../core/components/formTypes';
 import { IBlockType, IStoreData } from '../core/store/storetype';
-import { store } from '../runtime/store';
 import { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import React from 'react';
 import { Tabs, Input, Row, Col, Checkbox } from 'antd';
@@ -33,6 +32,9 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 	const rightMapRenderListCategory = useMemo(() => {
 		return props.config.getConfig().rightRenderListCategory;
 	}, [props.config]);
+
+	const store = props.config.getStore();
+
 	useEffect(() => {
 		const fn = () => {
 			let item: IBlockType | undefined;
@@ -52,7 +54,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 		return () => {
 			unregist();
 		};
-	}, []);
+	}, [store]);
 	const render = useMemo(() => {
 		return (type: string, current: IBlockType) => {
 			const fn = () => props.config.getComponentRegister().getComp(current.name);

packages/dooringx-lib/src/components/wrapperMove/event.ts

@@ -2,13 +2,13 @@
  * @Author: yehuozhili
  * @Date: 2021-02-21 22:17:29
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-04-05 18:24:27
+ * @LastEditTime: 2021-07-12 20:33:14
- * @FilePath: \dooringv2\src\components\wrapperMove\event.ts
+ * @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\event.ts
  */
-import { store } from '../../runtime/store';
 import { RefObject } from 'react';
 import { containerResizer } from '../../core/resizeHandler/containerResizer';
 import { contextMenuState } from '../../core/contextMenu';
+import UserConfig from '../../config';
 
 export interface WrapperMoveStateProps {
 	isDrag: boolean;
@@ -28,7 +28,9 @@ export const wrapperMoveState: WrapperMoveStateProps = {
 	ref: null,
 };
 
-export const wrapperEvent = (ref: RefObject<HTMLDivElement>) => {
+export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig) => {
+	const scale = config.getScaleState().value;
+	const store = config.getStore();
 	return {
 		onMouseDown: (e: React.MouseEvent) => {
 			// e.preventDefault();// 不能使用preventDefault 否则弹窗输入框焦点无法触发
@@ -49,10 +51,11 @@ export const wrapperEvent = (ref: RefObject<HTMLDivElement>) => {
 			if (wrapperMoveState.isDrag) {
 				const diffX = e.clientX - wrapperMoveState.startX;
 				const diffY = e.clientY - wrapperMoveState.startY;
-				wrapperMoveState.needX = wrapperMoveState.needX + diffX;
+				wrapperMoveState.needX = wrapperMoveState.needX + diffX / scale;
-				wrapperMoveState.needY = wrapperMoveState.needY + diffY;
+				wrapperMoveState.needY = wrapperMoveState.needY + diffY / scale;
 				wrapperMoveState.startX = e.clientX;
 				wrapperMoveState.startY = e.clientY;
+
 				store.forceUpdate();
 			}
 			containerResizer.onMouseMove(e);

packages/dooringx-lib/src/components/wrapperMove/index.tsx

@@ -2,15 +2,18 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-12 15:24:29
+ * @LastEditTime: 2021-07-12 19:47:39
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\index.tsx
  */
 import { AllHTMLAttributes, CSSProperties, PropsWithChildren, useRef } from 'react';
 import { wrapperEvent } from './event';
 import { onWheelEvent } from '../../core/scale';
 import React from 'react';
+import Ticker from './ticker';
+import UserConfig from '../../config';
 
 export interface ContainerWrapperProps extends AllHTMLAttributes<HTMLDivElement> {
+	config: UserConfig;
 	classNames?: string;
 	style?: CSSProperties;
 }
@@ -33,11 +36,12 @@ function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
 				overflow: 'hidden',
 				...style,
 			}}
-			{...wrapperEvent(ref)}
+			{...wrapperEvent(ref, props.config)}
-			{...onWheelEvent}
+			{...onWheelEvent(props.config)}
 			{...rest}
 		>
 			{children}
+			<Ticker config={props.config}></Ticker>
 		</div>
 	);
 }

packages/dooringx-lib/src/components/wrapperMove/ticker.tsx

@@ -0,0 +1,147 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-12 15:54:35
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-12 19:21:35
+ * @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\ticker.tsx
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import UserConfig from '../../config';
+
+const width = '20px';
+const indent = 50;
+
+function Ticker(props: { config: UserConfig }) {
+	const topRef = useRef<HTMLDivElement>(null);
+	const leftRef = useRef<HTMLDivElement>(null);
+	const [topRender, setTopRender] = useState(0);
+	const [leftRender, setLeftRender] = useState(0);
+
+	const scale = props.config.getScaleState().value;
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			if (topRef.current) {
+				const width = topRef.current.getBoundingClientRect().width;
+				const renderWidth = Math.ceil(width / 10 / scale);
+				setTopRender(renderWidth);
+			}
+			// left可以不用放，但为了更新统一
+			if (leftRef.current) {
+				const height = leftRef.current.getBoundingClientRect().height;
+				const renderHeight = Math.ceil(height / 10 / scale);
+				setLeftRender(renderHeight);
+			}
+		}, 300);
+
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [props.config, props.config.collapsed, scale]);
+
+	return (
+		<>
+			<div
+				ref={topRef}
+				style={{
+					position: 'absolute',
+					top: 0,
+					left: indent,
+					width: '100%',
+					height: width,
+					display: 'flex',
+					justifyContent: 'space-between',
+				}}
+			>
+				{Array(topRender)
+					.fill(1)
+					.map((_, i) => {
+						if (i % 10 === 0) {
+							return (
+								<div
+									key={i}
+									style={{
+										background: 'rgb(204, 204, 204)',
+										width: '1px',
+										height: '12px',
+										position: 'relative',
+									}}
+								>
+									<div
+										style={{
+											position: 'absolute',
+											top: '20px',
+											fontSize: '10px',
+											left: '-2px',
+											userSelect: 'none',
+										}}
+									>
+										{i}
+									</div>
+								</div>
+							);
+						} else {
+							return (
+								<div
+									key={i}
+									style={{ background: 'rgb(204, 204, 204)', width: '1px', height: '6px' }}
+								></div>
+							);
+						}
+					})}
+			</div>
+			<div
+				ref={leftRef}
+				style={{
+					position: 'absolute',
+					top: indent,
+					left: 0,
+					width: width,
+					height: '100%',
+					display: 'flex',
+					justifyContent: 'space-between',
+					flexDirection: 'column',
+				}}
+			>
+				{Array(leftRender)
+					.fill(1)
+					.map((_, i) => {
+						if (i % 10 === 0) {
+							return (
+								<div
+									key={i}
+									style={{
+										background: 'rgb(204, 204, 204)',
+										width: '12px',
+										height: '1px',
+										position: 'relative',
+									}}
+								>
+									<div
+										style={{
+											position: 'absolute',
+											left: '20px',
+											fontSize: '10px',
+											top: '-2px',
+											userSelect: 'none',
+										}}
+									>
+										{i}
+									</div>
+								</div>
+							);
+						} else {
+							return (
+								<div
+									key={i}
+									style={{ background: 'rgb(204, 204, 204)', width: '6px', height: '1px' }}
+								></div>
+							);
+						}
+					})}
+			</div>
+		</>
+	);
+}
+
+export default Ticker;

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-25 21:16:58
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-12 14:49:32
+ * @LastEditTime: 2021-07-12 16:49:46
  * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
  */
 import { IBlockType, IStoreData } from '../core/store/storetype';
@@ -321,6 +321,7 @@ export class UserConfig {
 	public eventCenter: EventCenter;
 	public dataCenter: DataCenter;
 	public scaleState = scaleState;
+	public collapsed = false;
 	constructor(initConfig?: Partial<InitConfig>) {
 		const mergeConfig = userConfigMerge(defaultConfig, initConfig);
 		this.initConfig = mergeConfig;
@@ -370,6 +371,10 @@ export class UserConfig {
 		this.toRegist();
 	}
 
+	getCollapse() {
+		return this.collapsed;
+	}
+
 	getStoreJSON() {
 		return JSON.stringify(this.store.getData());
 	}

packages/dooringx-lib/src/core/contextMenu/index.tsx

@@ -2,14 +2,14 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-05 22:46:15
+ * @LastEditTime: 2021-07-12 20:31:47
- * @FilePath: \DooringV2\packages\dooring-v2-lib\src\core\contextMenu\index.tsx
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\contextMenu\index.tsx
  */
 import { Button } from 'antd';
 import React, { RefObject, useState } from 'react';
 import { ReactElement } from 'react';
 import ReactDOM, { unmountComponentAtNode } from 'react-dom';
-import { scaleState } from '../scale/state';
+import UserConfig from '../../config';
 import { isMac } from '../utils';
 
 const ContextMenu = () => {
@@ -68,9 +68,11 @@ export const contextMenuState: ContextMenuStateProps = {
 
 export function contextMenuEvent(
 	e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-	ref: RefObject<HTMLDivElement>
+	ref: RefObject<HTMLDivElement>,
+	userConfig: UserConfig
 ) {
 	e.preventDefault();
+	const scaleState = userConfig.getScaleState();
 	contextMenuState.unmountContextMenu();
 	const config: MutationObserverInit = {
 		attributes: true,

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

@@ -2,15 +2,14 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-10 18:34:40
+ * @LastEditTime: 2021-07-12 20:11:56
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\crossDrag\index.ts
  */
-import { store } from '../../runtime/store';
-import { componentRegister } from '../../runtime';
 import { DragEvent, ReactNode } from 'react';
 import { createBlock } from '../components/createBlock';
 import { IBlockType } from '../store/storetype';
 import { deepCopy } from '../utils';
+import UserConfig from '../../config';
 
 /**
  *
@@ -43,42 +42,46 @@ export const dragEventResolve = function (item: LeftRegistComponentMapItem) {
 	};
 };
 
-export const containerDragResolve = {
+export const containerDragResolve = (config: UserConfig) => {
-	onDragStart: () => {},
+	const store = config.getStore();
-	onDragOver: (e: DragEvent<HTMLDivElement>) => {
+	const componentRegister = config.getComponentRegister();
-		e.preventDefault();
+	return {
-	},
+		onDragStart: () => {},
-	onDrop: (e: DragEvent<HTMLDivElement>) => {
+		onDragOver: (e: DragEvent<HTMLDivElement>) => {
-		const offsetX = e.nativeEvent.offsetX;
+			e.preventDefault();
-		const offestY = e.nativeEvent.offsetY;
+		},
-		//drop后修改store，
+		onDrop: (e: DragEvent<HTMLDivElement>) => {
-		if (currentDrag) {
+			const offsetX = e.nativeEvent.offsetX;
-			// 还需要拿到注册的组件状态
+			const offestY = e.nativeEvent.offsetY;
-			const origin = componentRegister.getComp(currentDrag.component);
+			//drop后修改store，
-			if (!origin) {
+			if (currentDrag) {
-				console.log(currentDrag.component, 'wait the chunk pull compeletely and retry');
+				// 还需要拿到注册的组件状态
-				return;
+				const origin = componentRegister.getComp(currentDrag.component);
-			}
+				if (!origin) {
-			const target = e.target as HTMLElement;
+					console.log(currentDrag.component, 'wait the chunk pull compeletely and retry');
-			let newblock: IBlockType;
+					return;
-			if (!origin.needPosition) {
-				newblock = createBlock(
-					origin.initData.top ?? offestY,
-					origin.initData.left ?? offsetX,
-					origin
-				);
-			} else {
-				if (target.id !== 'yh-container') {
-					newblock = createBlock(offestY + target.offsetTop, offsetX + target.offsetLeft, origin);
-				} else {
-					newblock = createBlock(offestY, offsetX, origin);
 				}
+				const target = e.target as HTMLElement;
+				let newblock: IBlockType;
+				if (!origin.needPosition) {
+					newblock = createBlock(
+						origin.initData.top ?? offestY,
+						origin.initData.left ?? offsetX,
+						origin
+					);
+				} else {
+					if (target.id !== 'yh-container') {
+						newblock = createBlock(offestY + target.offsetTop, offsetX + target.offsetLeft, origin);
+					} else {
+						newblock = createBlock(offestY, offsetX, origin);
+					}
+				}
+				const data = deepCopy(store.getData());
+				data.block.push(newblock);
+				store.setData({ ...data });
 			}
-			const data = deepCopy(store.getData());
+			currentDrag = null;
-			data.block.push(newblock);
+		},
-			store.setData({ ...data });
+		onDragEnd: () => {},
-		}
+	};
-		currentDrag = null;
-	},
-	onDragEnd: () => {},
 };

packages/dooringx-lib/src/core/focusHandler/index.tsx

@@ -2,18 +2,19 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-03-14 12:10:16
+ * @LastEditTime: 2021-07-12 20:48:04
- * @FilePath: \dooring-v2\src\core\focusHandler\index.tsx
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx
  */
-import { store } from '../../runtime/store';
 import { innerDragState } from '../innerDrag/state';
 import { IBlockType } from '../store/storetype';
 import { deepCopy } from '../utils';
 import { selectRangeMouseDown } from '../selectRange';
 import { unmountContextMenu } from '../contextMenu';
 import { focusState } from './state';
+import UserConfig from '../../config';
 
-export function containerFocusRemove() {
+export function containerFocusRemove(config: UserConfig) {
+	const store = config.getStore();
 	const onMouseDown = (e: React.MouseEvent) => {
 		const clonedata = deepCopy(store.getData());
 		const newBlock = clonedata.block.map((v: IBlockType) => {
@@ -23,7 +24,7 @@ export function containerFocusRemove() {
 		focusState.blocks = [];
 		store.setData({ ...clonedata, block: newBlock });
 		if (!innerDragState.item) {
-			selectRangeMouseDown(e);
+			selectRangeMouseDown(e, config);
 		}
 		unmountContextMenu();
 	};
@@ -32,7 +33,8 @@ export function containerFocusRemove() {
 	};
 }
 
-export function blockFocus(e: React.MouseEvent, item: IBlockType) {
+export function blockFocus(e: React.MouseEvent, item: IBlockType, config: UserConfig) {
+	const store = config.getStore();
 	const clonedata = deepCopy(store.getData());
 	if (e.shiftKey) {
 		const newBlock = clonedata.block.map((v: IBlockType) => {

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

@@ -1,26 +1,30 @@
-import { store } from '../../runtime/store';
 import { RefObject } from 'react';
 import { blockFocus, containerFocusRemove } from '../focusHandler';
 import { marklineConfig } from '../markline/marklineConfig';
 import { resizerMouseMove, resizerMouseUp } from '../resizeHandler';
-import { scaleState } from '../scale/state';
 import { selectRangeMouseMove, selectData, selectRangeMouseUp } from '../selectRange';
 import { IBlockType } from '../store/storetype';
 import { deepCopy, isMac } from '../utils';
 import { wrapperMoveMouseUp } from '../../components/wrapperMove/event';
 import { contextMenuState } from '../contextMenu';
 import { innerDragState } from './state';
+import UserConfig from '../../config';
 
-export const innerDrag = function (item: IBlockType, ref: RefObject<HTMLDivElement>) {
+export const innerDrag = function (
+	item: IBlockType,
+	ref: RefObject<HTMLDivElement>,
+	config: UserConfig
+) {
+	const store = config.getStore();
 	return {
 		onMouseDown: (e: React.MouseEvent) => {
 			e.preventDefault();
 			e.stopPropagation();
 			if (!item.canDrag) {
-				containerFocusRemove().onMouseDown(e);
+				containerFocusRemove(config).onMouseDown(e);
 				return;
 			}
-			blockFocus(e, item);
+			blockFocus(e, item, config);
 			if (item.id && innerDragState.lastClick && item.id !== innerDragState.lastClick.id) {
 				contextMenuState.unmountContextMenu();
 			}
@@ -43,8 +47,10 @@ export const innerDrag = function (item: IBlockType, ref: RefObject<HTMLDivEleme
 	};
 };
 
-export const innerContainerDrag = function () {
+export const innerContainerDrag = function (config: UserConfig) {
 	let lastblock: null | IBlockType;
+	const store = config.getStore();
+	const scaleState = config.getScaleState();
 	const onMouseMove = (e: React.MouseEvent) => {
 		e.preventDefault();
 		if (isMac() && contextMenuState.state) {
@@ -96,7 +102,8 @@ export const innerContainerDrag = function () {
 		onMouseMove,
 	};
 };
-export const innerContainerDragUp = function () {
+export const innerContainerDragUp = function (config: UserConfig) {
+	const store = config.getStore();
 	const onMouseUp = (e: React.MouseEvent) => {
 		e.preventDefault();
 		wrapperMoveMouseUp();

packages/dooringx-lib/src/core/markline/calcRender.ts

@@ -2,22 +2,23 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-03-14 11:49:50
+ * @LastEditTime: 2021-07-12 20:56:02
- * @FilePath: \dooring-v2\src\core\markline\calcRender.ts
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\calcRender.ts
  */
-import { store } from '../../runtime/store';
 import { innerDragState } from '../innerDrag/state';
-import { scaleState } from '../scale/state';
 import { grideModeRender, gridModeDisplay } from './gridMode';
 import { switchMarklineDisplay } from './normalMode';
 import { resizeCurrentCalculate } from './resizeMarkline';
 import { marklineConfig } from './marklineConfig';
+import UserConfig from '../../config';
 export interface LinesTypes {
 	x: number[];
 	y: number[];
 }
 
-export function marklineCalRender() {
+export function marklineCalRender(config: UserConfig) {
+	const store = config.getStore();
+	const scaleState = config.getScaleState();
 	//focus可能好几个，做对比的是拖拽那个
 	const lines: LinesTypes = { x: [], y: [] };
 	if (innerDragState.item?.position === 'static' || innerDragState.item?.position === 'relative') {
@@ -65,15 +66,15 @@ export function marklineCalRender() {
 			}
 		});
 		if (marklineConfig.mode === 'grid' && marklineConfig.isAbsorb) {
-			gridModeDisplay(left, top, focus);
+			gridModeDisplay(left, top, focus, config);
 		}
 	}
 
 	if (marklineConfig.mode === 'grid') {
-		grideModeRender(lines);
+		grideModeRender(lines, config);
 	}
 
-	resizeCurrentCalculate(lines);
+	resizeCurrentCalculate(lines, config);
 
 	return lines;
 }

packages/dooringx-lib/src/core/markline/gridMode.ts

@@ -2,17 +2,18 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-03-14 11:49:43
+ * @LastEditTime: 2021-07-12 20:56:19
- * @FilePath: \dooring-v2\src\core\markline\gridMode.ts
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\gridMode.ts
  */
-import { store } from '../../runtime/store';
+import UserConfig from '../../config';
 import { IBlockType } from '../store/storetype';
 import { deepCopy } from '../utils';
 import { LinesTypes } from './calcRender';
 import { marklineConfig } from './marklineConfig';
-export function gridModeDisplay(left: number, top: number, focus: IBlockType) {
+export function gridModeDisplay(left: number, top: number, focus: IBlockType, config: UserConfig) {
 	// 有吸附走吸附，只吸top和left，宽高不需要
 	// 无吸附拖拽时显示所有网格。
+	const store = config.getStore();
 	const container = store.getData().container;
 	const containerWidth = container.width;
 	const containerHeight = container.height;
@@ -55,7 +56,8 @@ export const lastGridStatus: lastGridStatusProps = {
 	lastLine: { x: [], y: [] },
 };
 
-export function grideModeRender(lines: LinesTypes) {
+export function grideModeRender(lines: LinesTypes, config: UserConfig) {
+	const store = config.getStore();
 	const container = store.getData().container;
 	const containerWidth = container.width;
 	const containerHeight = container.height;

packages/dooringx-lib/src/core/markline/index.tsx

@@ -2,11 +2,12 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-03-14 11:45:22
+ * @LastEditTime: 2021-07-12 20:59:27
- * @FilePath: \dooring-v2\src\core\markline\index.tsx
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\index.tsx
  */
 import React from 'react';
 import { useMemo } from 'react';
+import UserConfig from '../../config';
 import { IBlockType } from '../store/storetype';
 import { marklineCalRender } from './calcRender';
 
@@ -62,8 +63,8 @@ export function MarklineY(props: any) {
 	);
 }
 
-export function NormalMarkLineRender() {
+export function NormalMarkLineRender(props: { config: UserConfig }) {
-	const lines = marklineCalRender();
+	const lines = marklineCalRender(props.config);
 	const render = useMemo(() => {
 		return (
 			<>

packages/dooringx-lib/src/core/markline/resizeMarkline.ts

@@ -2,21 +2,22 @@
  * @Author: yehuozhili
  * @Date: 2021-02-18 11:52:38
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-03-14 11:49:58
+ * @LastEditTime: 2021-07-12 20:54:50
- * @FilePath: \dooring-v2\src\core\markline\resizeMarkline.ts
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\resizeMarkline.ts
  */
 
-import { store } from '../../runtime/store';
 import { resizeState } from '../resizeHandler';
-import { scaleState } from '../scale/state';
 import { LinesTypes } from './calcRender';
 import { switchMarklineResizeDisplay } from './normalMode';
 import { marklineConfig } from './marklineConfig';
+import UserConfig from '../../config';
 
-export function resizeCurrentCalculate(lines: LinesTypes) {
+export function resizeCurrentCalculate(lines: LinesTypes, config: UserConfig) {
 	const id = resizeState.item?.id;
 
 	if (resizeState.ref?.current && id) {
+		const store = config.getStore();
+		const scaleState = config.getScaleState();
 		const newblock = store.getData().block;
 		const unfocus = newblock.filter((v) => v.id !== id);
 		const { width, height } = resizeState.ref.current.getBoundingClientRect();

packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts

@@ -2,8 +2,8 @@
  * @Author: yehuozhili
  * @Date: 2021-03-09 15:19:36
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-03-14 04:52:57
+ * @LastEditTime: 2021-07-12 19:25:09
- * @FilePath: \dooring-v2\src\core\resizeHandler\containerResizer.ts
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\containerResizer.ts
  */
 
 import { store } from '../../runtime/store';
@@ -15,6 +15,7 @@ export const containerState = {
 	isDrag: false,
 	startY: 0,
 	startIndex: 0,
+	minHeight: 667,
 };
 
 export const containerResizer = {
@@ -29,7 +30,8 @@ export const containerResizer = {
 			const diff = ((e.clientY - containerState.startY) / scale) * 2;
 			const clonedata: IStoreData = deepCopy(store.getData());
 			const height = clonedata.container.height;
-			let tmpHeight = height + diff < 600 ? 600 : height + diff;
+			let tmpHeight =
+				height + diff < containerState.minHeight ? containerState.minHeight : height + diff;
 			clonedata.container.height = tmpHeight;
 			store.setData(clonedata);
 			containerState.startY = e.clientY;

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

@@ -2,40 +2,44 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-04-05 22:18:43
+ * @LastEditTime: 2021-07-12 20:04:17
- * @FilePath: \dooringv2\src\core\scale\index.ts
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\scale\index.ts
  */
-import { store } from '../../runtime/store';
+import UserConfig from '../../config';
-import Store from '../store';
 import { scaleCancelFn } from './cancel';
-import { scaleState } from './state';
 
-export const onWheelEvent = {
+export const onWheelEvent = (config: UserConfig) => {
-	onWheel: (e: React.WheelEvent<HTMLDivElement>) => {
+	const store = config.getStore();
-		const dom = document.querySelector('.ant-modal-mask');
+	const scale = config.getScaleState();
-		if (dom) {
+	return {
-			//出现弹窗禁止滚动
+		onWheel: (e: React.WheelEvent<HTMLDivElement>) => {
-			return;
+			const dom = document.querySelector('.ant-modal-mask');
-		}
+			if (dom) {
-		if (e.deltaY > 0) {
+				//出现弹窗禁止滚动
-			scaleCancelFn();
+				return;
-			if (scaleState.value < scaleState.maxValue) {
-				scaleState.value = scaleState.value + 0.1;
-				store.forceUpdate();
 			}
-		} else {
+			if (e.deltaY > 0) {
-			scaleCancelFn();
+				scaleCancelFn();
-			//往上滚缩小
+				if (scale.value < scale.maxValue) {
-			if (scaleState.value > scaleState.minValue) {
+					scale.value = scale.value + 0.1;
-				scaleState.value = scaleState.value - 0.1;
+					store.forceUpdate();
-				store.forceUpdate();
+				}
+			} else {
+				scaleCancelFn();
+				//往上滚缩小
+				if (scale.value > scale.minValue) {
+					scale.value = scale.value - 0.1;
+					store.forceUpdate();
+				}
 			}
-		}
+		},
-	},
+	};
 };
 
 export const scaleFn = {
-	increase(number: number = 0.1, store: Store) {
+	increase(number: number = 0.1, config: UserConfig) {
+		const store = config.getStore();
+		const scaleState = config.getScaleState();
 		if (scaleState.value < scaleState.maxValue) {
 			scaleCancelFn();
 			scaleState.value = scaleState.value + number;
@@ -43,7 +47,9 @@ export const scaleFn = {
 		}
 		return scaleState.value;
 	},
-	decrease(number: number = 0.1, store: Store) {
+	decrease(number: number = 0.1, config: UserConfig) {
+		const store = config.getStore();
+		const scaleState = config.getScaleState();
 		scaleCancelFn();
 		if (scaleState.value > scaleState.minValue) {
 			scaleState.value = scaleState.value - number;

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

@@ -1,9 +1,8 @@
-import { store } from '../../runtime/store';
 import { IStoreData } from '../store/storetype';
 import { deepCopy } from '../utils';
 import { focusState } from '../focusHandler/state';
-import { scaleState } from '../scale/state';
 import style from '../../index.less';
+import UserConfig from '../../config';
 export interface SelectDataProps {
 	selectDiv: HTMLDivElement | null;
 	posx: number;
@@ -20,7 +19,7 @@ export const selectData: SelectDataProps = {
 	startY: 0,
 };
 
-export function selectRangeMouseDown(e: React.MouseEvent) {
+export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig) {
 	if (!selectData.selectDiv) {
 		selectData.selectDiv = document.createElement('div');
 	}
@@ -34,7 +33,7 @@ export function selectRangeMouseDown(e: React.MouseEvent) {
 		selectData.selectDiv.style.top = e.clientY + 'px';
 		selectData.selectDiv.style.position = 'fixed';
 		document.body.appendChild(selectData.selectDiv);
-		selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e);
+		selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e, config);
 		selectData.selectDiv.onmousemove = (e) => selectRangeMouseMove(e);
 	}
 }
@@ -52,10 +51,11 @@ function typeGuard(e: React.MouseEvent | MouseEvent): e is React.MouseEvent {
 	return !(e instanceof Event);
 }
 
-function selectFocus(left: number, top: number, width: number, height: number) {
+function selectFocus(left: number, top: number, width: number, height: number, config: UserConfig) {
 	if (width === 0 || height === 0) {
 		return;
 	}
+	const store = config.getStore();
 	const clonedata: IStoreData = deepCopy(store.getData());
 	const blocks = clonedata.block;
 	let change = false;
@@ -75,13 +75,14 @@ function selectFocus(left: number, top: number, width: number, height: number) {
 	}
 }
 
-export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent) {
+export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent, config: UserConfig) {
 	if (selectData.selectDiv) {
 		// 这里需要判定区域
 		// 如果是react触发 ，left和top就是起始值和终止值的最小值
 		// 如果是原生触发，left和top是起始点减去其宽高
 		let left = 0;
 		let top = 0;
+		const scaleState = config.getScaleState();
 		const { width, height } = selectData.selectDiv.getBoundingClientRect();
 		const scale = scaleState.value;
 		const wwidth = width / scale;
@@ -93,7 +94,7 @@ export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent) {
 			left = selectData.startX - wwidth;
 			top = selectData.startY - wheight;
 		}
-		selectFocus(left, top, wwidth, wheight);
+		selectFocus(left, top, wwidth, wheight, config);
 		selectData.selectDiv.parentNode!.removeChild(selectData.selectDiv);
 		selectData.selectDiv = null;
 	}

packages/dooringx-lib/src/hooks/index.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 05:35:15
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-12 14:48:38
+ * @LastEditTime: 2021-07-12 15:52:06
  * @FilePath: \dooringx\packages\dooringx-lib\src\hooks\index.ts
  */
 import { useEffect, useMemo, useState } from 'react';
@@ -94,6 +94,6 @@ export function useDynamicAddEventCenter(
 				eventCenter.manualUpdateMap(eventName, displayName);
 			}
 		}
-	}, [eventCenter, props.data.eventMap, props.data.id, props.store]);
+	}, [displayName, eventCenter, eventName, props.data.eventMap, props.data.id, props.store]);
 	return;
 }