update 0.7.7

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## changelog
 
+
+## 0.7.7
+
+优化画布拖拽逻辑，更平滑移动。
+
 ## 0.7.6
 
 右侧自定义rightGlobalCustom类型变更为函数传入config

README.md

@@ -151,6 +151,8 @@ MIT
 
 ## Todo
 
+动画部分重构
+
 函数部分重构
 
 

packages/dooringx-doc/src/changelog/1.1.md

@@ -4,6 +4,11 @@ order: 1
 ---
 ## changelog
 
+
+## 0.7.7
+
+优化画布拖拽逻辑，更平滑移动。
+
 ## 0.7.6
 
 右侧自定义rightGlobalCustom类型变更为函数传入config

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-07-17 10:12:11
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-20 17:08:37
+ * @LastEditTime: 2021-08-03 14:06:12
  * @FilePath: \dooringx\packages\dooringx-example\src\pages\iframeTest.tsx
  */
 
@@ -34,7 +34,7 @@ export default function IndexPage() {
 	useIframeHook(`${location.origin}/container`, config);
 
 	return (
-		<div {...innerContainerDragUp(config, true)}>
+		<div {...innerContainerDragUp(config)}>
 			<div style={{ height: HeaderHeight }}>
 				head
 				<button

packages/dooringx-lib/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.7.6",
+	"version": "0.7.7",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",

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

@@ -50,8 +50,8 @@ export const innerDrag = function (
 			innerDragState.startX = Math.round(e.clientX);
 			innerDragState.startY = Math.round(e.clientY);
 			innerDragState.item = item;
-			// innerDragState.itemX = item.left; 会导致框选后移动问题
+			innerDragState.itemX = item.left; // 会导致框选后移动问题 进行分类判断 否则体验不是很好
-			// innerDragState.itemY = item.top;
+			innerDragState.itemY = item.top;
 			innerDragState.isDrag = true;
 			innerDragState.ref = ref;
 			innerDragState.current = store.getIndex();
@@ -76,6 +76,8 @@ export const innerContainerDrag = function (config: UserConfig) {
 			if (current?.position === 'static') {
 				return;
 			}
+			const focus = config.getFocusState();
+			const isMulti = focus.blocks.length > 1;
 			let { clientX: moveX, clientY: moveY } = e;
 			const { startX, startY } = innerDragState;
 			const scale = scaleState.value;
@@ -87,24 +89,36 @@ export const innerContainerDrag = function (config: UserConfig) {
 				lastblock = innerDragState.item;
 				newblock = cloneblock.map((v) => {
 					if (v.focus && v.position !== 'static') {
+						if (isMulti) {
 							v.left = Math.round(v.left + durX);
 							v.top = Math.round(v.top + durY);
+						} else {
+							v.left = Math.round(innerDragState.itemX + durX);
+							v.top = Math.round(innerDragState.itemY + durY);
+						}
 					}
 					return v;
 				});
 			} else {
 				newblock = store.getData().block.map((v) => {
 					if (v.focus && v.position !== 'static') {
+						if (isMulti) {
 							v.left = Math.round(v.left + durX);
 							v.top = Math.round(v.top + durY);
+						} else {
+							v.left = Math.round(innerDragState.itemX + durX);
+							v.top = Math.round(innerDragState.itemY + durY);
+						}
 					}
 					return v;
 				});
 			}
 			store.setData({ ...store.getData(), block: newblock });
+			if (isMulti) {
 				innerDragState.startX = moveX;
 				innerDragState.startY = moveY;
 			}
+		}
 		resizerMouseMove(e, config);
 		rotateMouseMove(e, config);
 		if (selectData.selectDiv) {

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 12:09:11
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-29 10:48:29
+ * @LastEditTime: 2021-08-04 11:39:02
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\innerDrag\state.ts
  */
 import { RefObject } from 'react';
@@ -17,8 +17,8 @@ export interface innerDragStateType {
 	ref: RefObject<HTMLDivElement> | null;
 	current: number;
 	lastClick: null | IBlockType;
-	// itemX: number;
+	itemX: number;
-	// itemY: number;
+	itemY: number;
 }
 
 export const innerDragState: innerDragStateType = {
@@ -29,6 +29,6 @@ export const innerDragState: innerDragStateType = {
 	ref: null,
 	current: 0,
 	lastClick: null,
-	// itemX: 0,
+	itemX: 0,
-	// itemY: 0,
+	itemY: 0,
 };