diff --git a/packages/core/src/middleware/info/index.ts b/packages/core/src/middleware/info/index.ts index 17c58b3f..57fe640f 100644 --- a/packages/core/src/middleware/info/index.ts +++ b/packages/core/src/middleware/info/index.ts @@ -1,6 +1,6 @@ import type { BoardMiddleware, ViewRectInfo, Element, MiddlewareInfoConfig } from '@idraw/types'; import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util'; -import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector'; +import { keySelectedElementList, keyHoverElement, keyActionType, keyGroupQueue } from '../selector'; import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info'; import type { DeepInfoSharedStorage } from './types'; import { defaltStyle } from './config'; @@ -28,12 +28,11 @@ export const MiddlewareInfo: BoardMiddleware; +export type DeepInfoSharedStorage = Pick< + DeepSelectorSharedStorage, + typeof keySelectedElementList | typeof keyHoverElement | typeof keyActionType | typeof keyGroupQueue +>; diff --git a/packages/core/src/middleware/selector/draw-wrapper.ts b/packages/core/src/middleware/selector/draw-wrapper.ts index ff6d6f15..2ce3794b 100644 --- a/packages/core/src/middleware/selector/draw-wrapper.ts +++ b/packages/core/src/middleware/selector/draw-wrapper.ts @@ -8,10 +8,11 @@ import type { ViewScaleInfo, ViewSizeInfo, ElementSizeController, - ViewCalculator + ViewCalculator, + MiddlewareSelectorStyle } from '@idraw/types'; import { rotateElementVertexes, calcViewPointSize, calcViewVertexes, calcViewElementSize } from '@idraw/util'; -import type { AreaSize, MiddlewareSelectorStyle } from './types'; +import type { AreaSize } from './types'; import { resizeControllerBorderWidth, areaBorderWidth, selectWrapperBorderWidth, controllerSize } from './config'; import { drawVertexes, drawLine, drawCircleController, drawCrossVertexes } from './draw-base'; // import { drawAuxiliaryExperimentBox } from './draw-auxiliary'; @@ -34,7 +35,7 @@ export function drawHoverVertexesWrapper( drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts); } -export function drawLockVertexesWrapper( +export function drawLockedVertexesWrapper( ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: { diff --git a/packages/core/src/middleware/selector/index.ts b/packages/core/src/middleware/selector/index.ts index 922f1026..87010134 100644 --- a/packages/core/src/middleware/selector/index.ts +++ b/packages/core/src/middleware/selector/index.ts @@ -10,7 +10,8 @@ import { findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, - deepResizeGroupElement + deepResizeGroupElement, + getElementSize } from '@idraw/util'; import type { Data, @@ -20,7 +21,8 @@ import type { ViewScaleInfo, ViewSizeInfo, ElementSizeController, - MiddlewareSelectorConfig + MiddlewareSelectorConfig, + ElementSize } from '@idraw/types'; import type { Point, @@ -36,7 +38,7 @@ import type { } from './types'; import { drawHoverVertexesWrapper, - drawLockVertexesWrapper, + drawLockedVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, @@ -102,6 +104,8 @@ export const MiddlewareSelector: BoardMiddleware { prevPoint = e.point; + moveOriginalStartPoint = e.point; - // updateHoverElement(null); const groupQueue = sharer.getSharedStorage(keyGroupQueue); if (groupQueue?.length > 0) { @@ -383,12 +388,16 @@ export const MiddlewareSelector: BoardMiddleware 1) { + if (data && originalStart && start && end && elems?.length > 1) { const moveX = (end.x - start.x) / scale; const moveY = (end.y - start.y) / scale; elems.forEach((elem: Element) => { - if (elem && elem?.operations?.lock !== true) { + if (elem && elem?.operations?.locked !== true) { elem.x = calculator.toGridNum(elem.x + moveX); elem.y = calculator.toGridNum(elem.y + moveY); @@ -536,7 +551,7 @@ export const MiddlewareSelector: BoardMiddleware[] = []; groupQueue.forEach((group) => { @@ -550,11 +565,11 @@ export const MiddlewareSelector: BoardMiddleware); }); - let resizeStart: PointSize = start; + let resizeStart: PointSize = originalStart; let resizeEnd: PointSize = end; if (groupQueue.length > 0) { - resizeStart = rotatePointInGroup(start, pointGroupQueue); + resizeStart = rotatePointInGroup(originalStart, pointGroupQueue); resizeEnd = rotatePointInGroup(end, pointGroupQueue); } if (resizeType === 'resize-rotate') { @@ -567,11 +582,11 @@ export const MiddlewareSelector: BoardMiddleware 0) { // in group drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts); if (hoverElement && actionType !== 'drag') { - if (isLock) { - drawLockVertexesWrapper(overlayContext, hoverElementVertexes, { + if (isLocked) { + drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, { ...drawBaseOpts, controller: calcElementSizeController(hoverElement, { groupQueue, @@ -789,7 +804,7 @@ export const MiddlewareSelector: BoardMiddleware, + elem: ElementSize, opts: { start: PointSize; end: PointSize; @@ -821,7 +821,7 @@ export function resizeElement( } export function rotateElement( - elem: Element, + elem: ElementSize, opts: { center: PointSize; start: PointSize; @@ -875,10 +875,10 @@ export function getSelectedListArea( for (let idx = 0; idx < data.elements.length; idx++) { const elem = data.elements[idx]; - if (elem?.operations?.lock === true) { + if (elem?.operations?.locked === true) { continue; } - const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }); + const elemSize = calcViewElementSize(elem, { viewScaleInfo }); const center = calcElementCenter(elemSize); if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) { @@ -914,7 +914,7 @@ export function calcSelectedElementsArea( return null; } const area: AreaSize = { x: 0, y: 0, w: 0, h: 0 }; - const { viewScaleInfo, viewSizeInfo } = opts; + const { viewScaleInfo } = opts; let prevElemSize: ElementSize | null = null; for (let i = 0; i < elements.length; i++) { @@ -922,7 +922,7 @@ export function calcSelectedElementsArea( if (elem?.operations?.invisible) { continue; } - const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }); + const elemSize = calcViewElementSize(elem, { viewScaleInfo }); if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) { const ves = rotateElementVertexes(elemSize); diff --git a/packages/idraw/src/idraw.ts b/packages/idraw/src/idraw.ts index ad15abf7..7c5e4d16 100644 --- a/packages/idraw/src/idraw.ts +++ b/packages/idraw/src/idraw.ts @@ -182,7 +182,7 @@ export class iDraw { } cancelElements() { - this.trigger(eventKeys.select, { uuids: [] }); + this.trigger(eventKeys.clearSelect, { uuids: [] }); } createElement( diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts index 17fe033a..a93255a9 100644 --- a/packages/types/src/lib/element.ts +++ b/packages/types/src/lib/element.ts @@ -7,6 +7,7 @@ export interface ElementSize { w: number; h: number; angle?: number; + operations?: ElementOperations; } export type ElementClipPath = Pick; @@ -169,7 +170,7 @@ export interface ElementDetailMap { export type ElementType = keyof ElementDetailMap; export interface ElementOperations { - lock?: boolean; + locked?: boolean; invisible?: boolean; disableScale?: boolean; disableRotate?: boolean;