update doc

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={{
@@ -43,3 +47,5 @@ contextMenuState.contextMenu = <ContextMenu></ContextMenu>;
 所以在点击后需要调用关闭。
 
 同时上面的left和top是右键的位置。
+
+另外，你还需要在组件内增加个强刷赋值给forceUpdate，用于在组件移动时进行跟随。

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={{

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",
+		"react-sortable-hoc": "^2.0.0"
-		"uuid": "^8.3.2"
 	}
 }

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

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
+					{directionArr.map((v) => {
-						className={classnames(styles.resizepoint, styles.top)}
+						return (
-						onMouseDown={(e) => {
+							<div
-							onMouseDown(e, 'top', props.data, props.rect, props.config);
+								className={classnames(styles.resizepoint, styles[v])}
-						}}
+								onMouseDown={(e) => {
-						onMouseUp={() => {
+									onMouseDown(e, v, props.data, props.rect, props.config);
-							resizerMouseUp(props.config);
+								}}
-						}}
+								onMouseUp={() => {
-					></div>
+									resizerMouseUp(props.config);
-					<div
+								}}
-						className={classnames(styles.resizepoint, styles.topleft)}
+							></div>
-						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>
 				</>
 			);
 		} else {
 			return null;
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [props.config, props.data, props.rect]);
-	}, [props.data.focus, props.data.resize]);
 
 	return <>{render}</>;
 }

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==