diff --git a/packages/dooringx-doc/src/docs/3.3.md b/packages/dooringx-doc/src/docs/3.3.md index 3d32053..69bbea9 100644 --- a/packages/dooringx-doc/src/docs/3.3.md +++ b/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定位来放置。 diff --git a/packages/dooringx-lib/src/core/innerDrag/index.ts b/packages/dooringx-lib/src/core/innerDrag/index.ts index 7a3bd05..fadc83e 100644 --- a/packages/dooringx-lib/src/core/innerDrag/index.ts +++ b/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.top = Math.round(v.top + durY); + 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') { - v.left = Math.round(v.left + durX); - v.top = Math.round(v.top + durY); + v.left = Math.round(innerDragState.itemX + durX); + 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); diff --git a/packages/dooringx-lib/src/core/innerDrag/state.ts b/packages/dooringx-lib/src/core/innerDrag/state.ts index aa5e53e..d7cb034 100644 --- a/packages/dooringx-lib/src/core/innerDrag/state.ts +++ b/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 - * @FilePath: \dooring-v2\src\core\innerDrag\state.ts + * @LastEditTime: 2021-07-27 11:40:39 + * @FilePath: \dooringx\packages\dooringx-lib\src\core\innerDrag\state.ts */ import { RefObject } from 'react'; @@ -17,6 +17,8 @@ export interface innerDragStateType { ref: RefObject | 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, }; diff --git a/packages/dooringx-lib/src/core/markline/calcRender.ts b/packages/dooringx-lib/src/core/markline/calcRender.ts index 7e0bd82..2ef11af 100644 --- a/packages/dooringx-lib/src/core/markline/calcRender.ts +++ b/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, - bottom: number + top: 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( - rotate, - width, - height, - left, - left + width, - top, - top + height - ); + const realStyle = getComponentRotatedStyle(rotate, width, height, left, top); if (typeof left !== 'number' || typeof top !== 'number') { return lines; //可能没有这2值 } - - marklineConfig.marklineUnfocus.forEach((v) => { - let l = v?.left; - let t = v?.top; - if (typeof l !== 'number' || typeof t !== 'number') { - console.warn(`${v} component miss top or left`); - } else { - // 如果拿实例可能有性能问题,暂直接计算。 - const w = v.width; - const h = v.height; - if (typeof w === 'number' && typeof h === 'number') { - const ro = v.rotate.value; - const r = l + w; - const b = t + h; - const rstyle = getComponentRotatedStyle(ro, w, h, l, r, t, b); - newMarklineDisplay(realStyle, rstyle, lines, focus); + const unfocus = marklineConfig.marklineUnfocus; + const len = unfocus.length; + for (let i = 0; i < len; i++) { + const v = unfocus[i]; + const l = v?.left; + const t = v?.top; + const w = v?.width; + const h = v?.height; + if ( + typeof l === 'number' && + typeof t === 'number' && + typeof w === 'number' && + typeof h === 'number' + ) { + const ro = v.rotate.value; + const rstyle = getComponentRotatedStyle(ro, w, h, l, t); + newMarklineDisplay(realStyle, rstyle, lines, focus); + if (lines.x.length !== 0 || lines.y.length !== 0) { + break; } } - }); + } } return lines; diff --git a/packages/dooringx-lib/src/core/selectRange/index.ts b/packages/dooringx-lib/src/core/selectRange/index.ts index f3d6c6a..54af175 100644 --- a/packages/dooringx-lib/src/core/selectRange/index.ts +++ b/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,10 +65,26 @@ 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)) { - change = true; - v.focus = true; - focusState.blocks.push(v); + 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) {