fix select

packages/dooringx-doc/src/docs/3.3.md

@@ -81,7 +81,7 @@ config可以拿到所有数据，用来制作事件时使用。
 
 第六个参数resize 是为了判断是否能进行缩放，当为false时，无法进行缩放。
 
-第七个参数needPosition，某些组件移入画布后会默认采取拖拽的落点，该配置项默认为true，为false时将使用组件自身top和left定位来放置。
+第七个参数needPosition，某些组件移入画布后会默认采取拖拽的落点，该配置项默认为true,就是需要拖拽的位置，为false时将使用组件自身top和left定位来放置。
 
 
 

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

@@ -42,6 +42,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.itemY = item.top;
 			innerDragState.isDrag = true;
 			innerDragState.ref = ref;
 			innerDragState.current = store.getIndex();
@@ -77,22 +79,20 @@ export const innerContainerDrag = function (config: UserConfig) {
 				lastblock = innerDragState.item;
 				newblock = cloneblock.map((v) => {
 					if (v.focus && v.position !== 'static') {
-						v.left = Math.round(v.left + durX);
+						v.left = Math.round(innerDragState.itemX + durX);
-						v.top = Math.round(v.top + durY);
+						v.top = Math.round(innerDragState.itemY + durY);
 					}
 					return v;
 				});
 			} else {
 				newblock = store.getData().block.map((v) => {
 					if (v.focus && v.position !== 'static') {
-						v.left = Math.round(v.left + durX);
+						v.left = Math.round(innerDragState.itemX + durX);
-						v.top = Math.round(v.top + durY);
+						v.top = Math.round(innerDragState.itemY + durY);
 					}
 					return v;
 				});
 			}
-			innerDragState.startX = Math.round(moveX);
-			innerDragState.startY = Math.round(moveY);
 			store.setData({ ...store.getData(), block: newblock });
 		}
 		resizerMouseMove(e, config);

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

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

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-26 20:51:41
+ * @LastEditTime: 2021-07-27 11:18:48
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\calcRender.ts
  */
 import { innerDragState } from '../innerDrag/state';
@@ -27,17 +27,15 @@ export function getComponentRotatedStyle(
 	width: number,
 	height: number,
 	left: number,
-	right: number,
+	top: number
-	top: number,
-	bottom: number
 ) {
 	const style = {
 		left,
 		width,
 		height,
-		right,
+		right: left + width,
 		top,
-		bottom,
+		bottom: top + height,
 	};
 	if (rotate !== 0) {
 		const newWidth = style.width * cos(rotate) + style.height * sin(rotate);
@@ -96,38 +94,33 @@ export function marklineCalRender(config: UserConfig): LinesTypes {
 		const rotate = focus.rotate.value;
 		const width = focus.width;
 		const height = focus.height;
-		const realStyle = getComponentRotatedStyle(
+		const realStyle = getComponentRotatedStyle(rotate, width, height, left, top);
-			rotate,
-			width,
-			height,
-			left,
-			left + width,
-			top,
-			top + height
-		);
 
 		if (typeof left !== 'number' || typeof top !== 'number') {
 			return lines; //可能没有这2值
 		}
-
+		const unfocus = marklineConfig.marklineUnfocus;
-		marklineConfig.marklineUnfocus.forEach((v) => {
+		const len = unfocus.length;
-			let l = v?.left;
+		for (let i = 0; i < len; i++) {
-			let t = v?.top;
+			const v = unfocus[i];
-			if (typeof l !== 'number' || typeof t !== 'number') {
+			const l = v?.left;
-				console.warn(`${v} component miss top or left`);
+			const t = v?.top;
-			} else {
+			const w = v?.width;
-				// 如果拿实例可能有性能问题，暂直接计算。
+			const h = v?.height;
-				const w = v.width;
+			if (
-				const h = v.height;
+				typeof l === 'number' &&
-				if (typeof w === 'number' && typeof h === 'number') {
+				typeof t === 'number' &&
+				typeof w === 'number' &&
+				typeof h === 'number'
+			) {
 				const ro = v.rotate.value;
-					const r = l + w;
+				const rstyle = getComponentRotatedStyle(ro, w, h, l, t);
-					const b = t + h;
-					const rstyle = getComponentRotatedStyle(ro, w, h, l, r, t, b);
 				newMarklineDisplay(realStyle, rstyle, lines, focus);
+				if (lines.x.length !== 0 || lines.y.length !== 0) {
+					break;
+				}
 			}
 		}
-		});
 	}
 
 	return lines;

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

@@ -2,6 +2,7 @@ import { IStoreData } from '../store/storetype';
 import { deepCopy } from '../utils';
 import style from '../../index.less';
 import UserConfig from '../../config';
+import { getComponentRotatedStyle } from '../markline/calcRender';
 export interface SelectDataProps {
 	selectDiv: HTMLDivElement | null;
 	posx: number;
@@ -64,11 +65,27 @@ function selectFocus(left: number, top: number, width: number, height: number, c
 	blocks.forEach((v) => {
 		const l = v.left;
 		const t = v.top;
-		if ((l >= left && l <= maxleft) || (t >= top && t <= maxtop)) {
+		const w = v.width;
+		const h = v.height;
+		if (
+			typeof l === 'number' &&
+			typeof t === 'number' &&
+			typeof w === 'number' &&
+			typeof h === 'number' &&
+			v.canDrag === true
+		) {
+			const style = getComponentRotatedStyle(v.rotate.value, w, h, l, t);
+			if (
+				style.left >= left &&
+				style.right <= maxleft &&
+				style.top >= top &&
+				style.bottom <= maxtop
+			) {
 				change = true;
 				v.focus = true;
 				focusState.blocks.push(v);
 			}
+		}
 	});
 	if (change) {
 		store.setData(clonedata);