From 213b776886d222d9bf27f491846b94577cb309cc Mon Sep 17 00:00:00 2001
From: hufeixiong <673632758@qq.com>
Date: Tue, 13 Jul 2021 20:15:38 +0800
Subject: [PATCH] update doc

---
 packages/dooringx-doc/src/docs/3.7.md         |  8 +-
 .../dooringx-example/src/layouts/index.tsx    | 11 ++-
 packages/dooringx-lib/package.json            |  6 +-
 .../src/core/contextMenu/index.tsx            |  2 +-
 .../src/core/resizeHandler/index.tsx          | 99 +++++--------------
 yarn.lock                                     |  2 +-
 6 files changed, 44 insertions(+), 84 deletions(-)

diff --git a/packages/dooringx-doc/src/docs/3.7.md b/packages/dooringx-doc/src/docs/3.7.md
index 63ac56a..6c4e6a1 100644
--- a/packages/dooringx-doc/src/docs/3.7.md
+++ b/packages/dooringx-doc/src/docs/3.7.md
@@ -15,6 +15,10 @@ const ContextMenu = () => {
 	const handleclick = () => {
 		unmountContextMenu();
 	};
+	const forceUpdate = useState(0)[1];
+	contextMenuState.forceUpdate = () => {
+		forceUpdate((pre) => pre + 1);
+	};
 	return (
 		<div
 			style={{
@@ -42,4 +46,6 @@ contextMenuState.contextMenu = <ContextMenu></ContextMenu>;
 
 所以在点击后需要调用关闭。
 
-同时上面的left和top是右键的位置。
\ No newline at end of file
+同时上面的left和top是右键的位置。
+
+另外，你还需要在组件内增加个强刷赋值给forceUpdate，用于在组件移动时进行跟随。
\ No newline at end of file
diff --git a/packages/dooringx-example/src/layouts/index.tsx b/packages/dooringx-example/src/layouts/index.tsx
index 9fd68e9..2d4694d 100644
--- a/packages/dooringx-example/src/layouts/index.tsx
+++ b/packages/dooringx-example/src/layouts/index.tsx
@@ -2,17 +2,16 @@
  * @Author: yehuozhili
  * @Date: 2021-07-07 14:51:17
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-10 19:07:10
+ * @LastEditTime: 2021-07-13 19:55:15
  * @FilePath: \dooringx\packages\dooringx-example\src\layouts\index.tsx
  */
 import { Button } from 'antd';
-import { UserConfig } from 'dooringx-lib/dist';
+import { UserConfig } from 'dooringx-lib';
 import 'dooringx-lib/dist/dooringx-lib.esm.css';
-import { createContext } from 'react';
+import { createContext, useState } from 'react';
 import { IRouteComponentProps } from 'umi';
 import plugin from '../plugin';
 import 'antd/dist/antd.css';
-import 'dooringx-lib/dist/dooringx-lib.esm';
 import '../global.less';
 import 'animate.css';
 
@@ -26,6 +25,10 @@ const ContextMenu = () => {
 	const handleclick = () => {
 		unmountContextMenu();
 	};
+	const forceUpdate = useState(0)[1];
+	contextMenuState.forceUpdate = () => {
+		forceUpdate((pre) => pre + 1);
+	};
 	return (
 		<div
 			style={{
diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json
index a503636..1b1bff6 100644
--- a/packages/dooringx-lib/package.json
+++ b/packages/dooringx-lib/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",
@@ -44,10 +44,10 @@
 		"tsdx": "^0.14.1"
 	},
 	"dependencies": {
+		"classnames": "^2.3.1",
 		"deepcopy": "^2.1.0",
 		"nanoid": "^3.1.23",
 		"react-color": "^2.19.3",
-		"react-sortable-hoc": "^2.0.0",
-		"uuid": "^8.3.2"
+		"react-sortable-hoc": "^2.0.0"
 	}
 }
diff --git a/packages/dooringx-lib/src/core/contextMenu/index.tsx b/packages/dooringx-lib/src/core/contextMenu/index.tsx
index 0cfb023..e60aef9 100644
--- a/packages/dooringx-lib/src/core/contextMenu/index.tsx
+++ b/packages/dooringx-lib/src/core/contextMenu/index.tsx
@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-12 20:31:47
+ * @LastEditTime: 2021-07-13 19:57:45
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\contextMenu\index.tsx
  */
 import { Button } from 'antd';
diff --git a/packages/dooringx-lib/src/core/resizeHandler/index.tsx b/packages/dooringx-lib/src/core/resizeHandler/index.tsx
index 447dd8b..4415338 100644
--- a/packages/dooringx-lib/src/core/resizeHandler/index.tsx
+++ b/packages/dooringx-lib/src/core/resizeHandler/index.tsx
@@ -145,90 +145,41 @@ export const resizerMouseMove = (e: React.MouseEvent, config: UserConfig) => {
 	}
 };
 
+const directionArr: directionType[] = [
+	'top',
+	'topleft',
+	'left',
+	'topright',
+	'bottomleft',
+	'bottom',
+	'right',
+	'bottomright',
+];
+
 export function BlockResizer(props: BlockResizerProps) {
 	const render = useMemo(() => {
 		if (props.data.focus && props.data.resize) {
 			return (
 				<>
-					<div
-						className={classnames(styles.resizepoint, styles.top)}
-						onMouseDown={(e) => {
-							onMouseDown(e, 'top', props.data, props.rect, props.config);
-						}}
-						onMouseUp={() => {
-							resizerMouseUp(props.config);
-						}}
-					></div>
-					<div
-						className={classnames(styles.resizepoint, styles.topleft)}
-						onMouseDown={(e) => {
-							onMouseDown(e, 'topleft', props.data, props.rect, props.config);
-						}}
-						onMouseUp={() => {
-							resizerMouseUp(props.config);
-						}}
-					></div>
-					<div
-						className={classnames(styles.resizepoint, styles.left)}
-						onMouseDown={(e) => {
-							onMouseDown(e, 'left', props.data, props.rect, props.config);
-						}}
-						onMouseUp={() => {
-							resizerMouseUp(props.config);
-						}}
-					></div>
-					<div
-						className={classnames(styles.resizepoint, styles.topright)}
-						onMouseDown={(e) => {
-							onMouseDown(e, 'topright', props.data, props.rect, props.config);
-						}}
-						onMouseUp={() => {
-							resizerMouseUp(props.config);
-						}}
-					></div>
-					<div
-						className={classnames(styles.resizepoint, styles.bottomleft)}
-						onMouseDown={(e) => {
-							onMouseDown(e, 'bottomleft', props.data, props.rect, props.config);
-						}}
-						onMouseUp={() => {
-							resizerMouseUp(props.config);
-						}}
-					></div>
-					<div
-						className={classnames(styles.resizepoint, styles.bottom)}
-						onMouseDown={(e) => {
-							onMouseDown(e, 'bottom', props.data, props.rect, props.config);
-						}}
-						onMouseUp={() => {
-							resizerMouseUp(props.config);
-						}}
-					></div>
-					<div
-						className={classnames(styles.resizepoint, styles.right)}
-						onMouseDown={(e) => {
-							onMouseDown(e, 'right', props.data, props.rect, props.config);
-						}}
-						onMouseUp={() => {
-							resizerMouseUp(props.config);
-						}}
-					></div>
-					<div
-						className={classnames(styles.resizepoint, styles.bottomright)}
-						onMouseDown={(e) => {
-							onMouseDown(e, 'bottomright', props.data, props.rect, props.config);
-						}}
-						onMouseUp={() => {
-							resizerMouseUp(props.config);
-						}}
-					></div>
+					{directionArr.map((v) => {
+						return (
+							<div
+								className={classnames(styles.resizepoint, styles[v])}
+								onMouseDown={(e) => {
+									onMouseDown(e, v, props.data, props.rect, props.config);
+								}}
+								onMouseUp={() => {
+									resizerMouseUp(props.config);
+								}}
+							></div>
+						);
+					})}
 				</>
 			);
 		} else {
 			return null;
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [props.data.focus, props.data.resize]);
+	}, [props.config, props.data, props.rect]);
 
 	return <>{render}</>;
 }
diff --git a/yarn.lock b/yarn.lock
index 590c4a2..48a74fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4692,7 +4692,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.x, classnames@^2.2.0, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.4, classnames@^2.2.5, classnames@^2.2.6:
+classnames@2.x, classnames@^2.2.0, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.4, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==