From 8512fdf4dcd5557dbd2736393ef9c4ddaecaa025 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sat, 17 Aug 2024 21:05:34 +0800 Subject: [PATCH 1/2] feat: add method for moving elements by point and refactor rotatable operation --- packages/core/src/middleware/info/index.ts | 26 +++++++------- .../src/middleware/selector/draw-wrapper.ts | 34 ++++++++++--------- .../core/src/middleware/selector/index.ts | 23 ++++++++++--- packages/core/src/middleware/selector/util.ts | 34 +++---------------- packages/idraw/src/index.ts | 3 +- packages/types/src/lib/controller.ts | 5 ++- packages/types/src/lib/element.ts | 5 ++- packages/util/src/index.ts | 4 ++- packages/util/src/lib/controller.ts | 2 ++ packages/util/src/lib/element.ts | 8 ++++- packages/util/src/lib/point-move-element.ts | 30 ++++++++++++++++ 11 files changed, 104 insertions(+), 70 deletions(-) create mode 100644 packages/util/src/lib/point-move-element.ts diff --git a/packages/core/src/middleware/info/index.ts b/packages/core/src/middleware/info/index.ts index bc7786a1..1459d626 100644 --- a/packages/core/src/middleware/info/index.ts +++ b/packages/core/src/middleware/info/index.ts @@ -146,18 +146,20 @@ export const MiddlewareInfo: BoardMiddleware< }); if (showAngleInfo) { - drawAngleInfoText(overlayContext, { - point: { - x: rectInfo.top.x + infoFontSize + 4, - y: rectInfo.top.y - infoFontSize * 2 - 18 - }, - rotateCenter: rectInfo.center, - angle: totalAngle, - text: angleText, - fontSize: infoFontSize, - lineHeight: infoLineHeight, - style - }); + if (elem.operations?.rotatable !== false) { + drawAngleInfoText(overlayContext, { + point: { + x: rectInfo.top.x + infoFontSize + 4, + y: rectInfo.top.y - infoFontSize * 2 - 18 + }, + rotateCenter: rectInfo.center, + angle: totalAngle, + text: angleText, + fontSize: infoFontSize, + lineHeight: infoLineHeight, + style + }); + } } } } diff --git a/packages/core/src/middleware/selector/draw-wrapper.ts b/packages/core/src/middleware/selector/draw-wrapper.ts index 10d67677..78aaf84e 100644 --- a/packages/core/src/middleware/selector/draw-wrapper.ts +++ b/packages/core/src/middleware/selector/draw-wrapper.ts @@ -91,8 +91,9 @@ export function drawSelectedElementControllersVertexes( hideControllers, style, rotateControllerPattern, - viewSizeInfo - // calculator, element, viewScaleInfo, viewSizeInfo + viewSizeInfo, + element + // calculator, viewScaleInfo, viewSizeInfo } = opts; const { devicePixelRatio = 1 } = viewSizeInfo; @@ -113,20 +114,21 @@ export function drawSelectedElementControllersVertexes( drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts); drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts); - // TODO - drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: rotate.size, borderWidth: 0 }); - const rotateCenter = calcViewPointSize(rotate.center, opts); - ctx.drawImage( - rotateControllerPattern.canvas, - 0, - 0, - rotateControllerPattern.canvas.width / devicePixelRatio, - rotateControllerPattern.canvas.height / devicePixelRatio, - rotateCenter.x - rotate.size / 2, - rotateCenter.y - rotate.size / 2, - rotate.size, - rotate.size - ); + if (element?.operations?.rotatable !== false) { + drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: rotate.size, borderWidth: 0 }); + const rotateCenter = calcViewPointSize(rotate.center, opts); + ctx.drawImage( + rotateControllerPattern.canvas, + 0, + 0, + rotateControllerPattern.canvas.width / devicePixelRatio, + rotateControllerPattern.canvas.height / devicePixelRatio, + rotateCenter.x - rotate.size / 2, + rotateCenter.y - rotate.size / 2, + rotate.size, + rotate.size + ); + } } // drawAuxiliaryExperimentBox(ctx, { diff --git a/packages/core/src/middleware/selector/index.ts b/packages/core/src/middleware/selector/index.ts index 4bf10a0d..aa668c60 100644 --- a/packages/core/src/middleware/selector/index.ts +++ b/packages/core/src/middleware/selector/index.ts @@ -12,7 +12,9 @@ import { getElementPositionFromList, getElementPositionMapFromList, deepResizeGroupElement, - getElementSize + getElementSize, + calcPointMoveElementInGroup, + isSameElementSize } from '@idraw/util'; import type { Data, @@ -52,8 +54,7 @@ import { getSelectedListArea, calcSelectedElementsArea, isElementInGroup, - isPointInViewActiveGroup, - calcMoveInGroup + isPointInViewActiveGroup } from './util'; import { keyActionType, @@ -513,7 +514,7 @@ export const MiddlewareSelector: BoardMiddleware< eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: false }); if (data && elems?.length === 1 && moveOriginalStartElementSize && originalStart && end && elems[0]?.operations?.locked !== true) { - const { moveX, moveY } = calcMoveInGroup(originalStart, end, groupQueue); + const { moveX, moveY } = calcPointMoveElementInGroup(originalStart, end, groupQueue); let totalMoveX = calculator.toGridNum(moveX / scale); let totalMoveY = calculator.toGridNum(moveY / scale); @@ -871,7 +872,19 @@ export const MiddlewareSelector: BoardMiddleware< const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style }; - const selectedElementController = sharedStore[keySelectedElementController]; + let selectedElementController = sharedStore[keySelectedElementController]; + if (selectedElementController && selectedElements.length === 1 && elem) { + if (!isSameElementSize(elem, selectedElementController.originalElementSize)) { + selectedElementController = calcElementSizeController(elem, { + groupQueue: groupQueue || [], + controllerSize, + viewScaleInfo, + rotateControllerPosition, + rotateControllerSize + }); + sharer.setSharedStorage(keySelectedElementController, selectedElementController); + } + } const isHoverLocked: boolean = !!hoverElement?.operations?.locked; diff --git a/packages/core/src/middleware/selector/util.ts b/packages/core/src/middleware/selector/util.ts index cb576243..04091345 100644 --- a/packages/core/src/middleware/selector/util.ts +++ b/packages/core/src/middleware/selector/util.ts @@ -5,7 +5,6 @@ import { calcElementQueueVertexesQueueInGroup, calcViewPointSize, calcViewElementSize, - rotatePointInGroup, rotatePoint, parseAngleToRadian, parseRadianToAngle, @@ -106,7 +105,10 @@ export function getPointTarget( // resize if (selectedElementController) { const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate } = selectedElementController; - const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate]; + const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight]; + if (selectedElements?.length === 1 && selectedElements?.[0]?.operations?.rotatable !== false) { + ctrls.push(rotate); + } for (let i = 0; i < ctrls.length; i++) { const ctrl = ctrls[i]; if (isPointInViewActiveVertexes(p, { ctx, vertexes: ctrl.vertexes, viewSizeInfo, viewScaleInfo })) { @@ -968,31 +970,3 @@ export function isElementInGroup(elem: Element, group: Element<'gro } return false; } - -export function calcMoveInGroup(start: PointSize, end: PointSize, groupQueue: Element<'group'>[]): { moveX: number; moveY: number } { - let moveX = end.x - start.x; - let moveY = end.y - start.y; - const pointGroupQueue: Element<'group'>[] = []; - groupQueue.forEach((group) => { - const { x, y, w, h, angle = 0 } = group; - pointGroupQueue.push({ - x, - y, - w, - h, - angle: 0 - angle - } as Element<'group'>); - }); - - if (groupQueue?.length > 0) { - const startInGroup = rotatePointInGroup(start, pointGroupQueue); - const endInGroup = rotatePointInGroup(end, pointGroupQueue); - moveX = endInGroup.x - startInGroup.x; - moveY = endInGroup.y - startInGroup.y; - } - - return { - moveX, - moveY - }; -} diff --git a/packages/idraw/src/index.ts b/packages/idraw/src/index.ts index 6cc394d6..975fc418 100644 --- a/packages/idraw/src/index.ts +++ b/packages/idraw/src/index.ts @@ -113,7 +113,8 @@ export { calcElementOriginRectInfo, calcElementViewRectInfoMap, sortElementsViewVisiableInfoMap, - flatElementList + flatElementList, + calcPointMoveElementInGroup } from '@idraw/util'; export { iDraw } from './idraw'; export { eventKeys } from './event'; diff --git a/packages/types/src/lib/controller.ts b/packages/types/src/lib/controller.ts index dad49a10..6191f554 100644 --- a/packages/types/src/lib/controller.ts +++ b/packages/types/src/lib/controller.ts @@ -1,5 +1,6 @@ import { ViewRectVertexes } from './view'; import { PointSize } from './point'; +import { ElementSize } from './element'; export type ElementSizeControllerType = | 'left' @@ -24,6 +25,8 @@ export interface ElementSizeControllerItem { } export interface ElementSizeController { + originalElementCenter: PointSize; + originalElementSize: ElementSize; elementWrapper: ViewRectVertexes; top: ElementSizeControllerItem; bottom: ElementSizeControllerItem; @@ -40,4 +43,4 @@ export interface ElementSizeController { rotate: ElementSizeControllerItem; } -export type LayoutSizeController = Omit; +export type LayoutSizeController = Omit; diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts index a93255a9..4e606e07 100644 --- a/packages/types/src/lib/element.ts +++ b/packages/types/src/lib/element.ts @@ -172,11 +172,10 @@ export type ElementType = keyof ElementDetailMap; export interface ElementOperations { locked?: boolean; invisible?: boolean; - disableScale?: boolean; - disableRotate?: boolean; + rotatable?: boolean; limitRatio?: boolean; - lastModified?: number; deepResize?: boolean; + lastModified?: number; } export interface ElementGlobalDetail { diff --git a/packages/util/src/index.ts b/packages/util/src/index.ts index dc3b766f..931b5844 100644 --- a/packages/util/src/index.ts +++ b/packages/util/src/index.ts @@ -44,7 +44,8 @@ export { isResourceElement, getElementPositionFromList, getElementPositionMapFromList, - calcElementListSize + calcElementListSize, + isSameElementSize } from './lib/element'; export { checkRectIntersect } from './lib/rect'; export { @@ -91,3 +92,4 @@ export { modifyElement, getModifiedElement } from './lib/modify'; export { enhanceFontFamliy } from './lib/text'; export { flatElementList } from './lib/flat'; export { groupElementsByPosition, ungroupElementsByPosition } from './lib/group'; +export { calcPointMoveElementInGroup } from './lib/point-move-element'; diff --git a/packages/util/src/lib/controller.ts b/packages/util/src/lib/controller.ts index 262633fd..f4a08d56 100644 --- a/packages/util/src/lib/controller.ts +++ b/packages/util/src/lib/controller.ts @@ -112,6 +112,8 @@ export function calcElementSizeController( const rotateVertexes = calcElementVertexes(rotateSize); const sizeController: ElementSizeController = { + originalElementCenter: calcElementCenter(elemSize), + originalElementSize: { ...elemSize }, elementWrapper: vertexes, left: { type: 'left', diff --git a/packages/util/src/lib/element.ts b/packages/util/src/lib/element.ts index 3c03e142..41895d5b 100644 --- a/packages/util/src/lib/element.ts +++ b/packages/util/src/lib/element.ts @@ -11,7 +11,7 @@ import type { LoadElementType, ElementPosition } from '@idraw/types'; -import { rotateElementVertexes } from './rotate'; +import { limitAngle, rotateElementVertexes } from './rotate'; import { isAssetId, createAssetId } from './uuid'; function getGroupUUIDs(elements: Array>, index: string): string[] { @@ -504,3 +504,9 @@ export function getElementPositionMapFromList( _loop(elements); return positionMap; } + +export function isSameElementSize(elem1: ElementSize, elem2: ElementSize) { + return ( + elem1.x === elem2.x && elem1.y === elem2.y && elem1.h === elem2.h && elem1.w === elem2.w && limitAngle(elem1.angle || 0) === limitAngle(elem2.angle || 0) + ); +} diff --git a/packages/util/src/lib/point-move-element.ts b/packages/util/src/lib/point-move-element.ts new file mode 100644 index 00000000..90a8c9c1 --- /dev/null +++ b/packages/util/src/lib/point-move-element.ts @@ -0,0 +1,30 @@ +import type { PointSize, Element } from '@idraw/types'; +import { rotatePointInGroup } from './rotate'; + +export function calcPointMoveElementInGroup(start: PointSize, end: PointSize, groupQueue: Element<'group'>[]): { moveX: number; moveY: number } { + let moveX = end.x - start.x; + let moveY = end.y - start.y; + const pointGroupQueue: Element<'group'>[] = []; + groupQueue.forEach((group) => { + const { x, y, w, h, angle = 0 } = group; + pointGroupQueue.push({ + x, + y, + w, + h, + angle: 0 - angle + } as Element<'group'>); + }); + + if (groupQueue?.length > 0) { + const startInGroup = rotatePointInGroup(start, pointGroupQueue); + const endInGroup = rotatePointInGroup(end, pointGroupQueue); + moveX = endInGroup.x - startInGroup.x; + moveY = endInGroup.y - startInGroup.y; + } + + return { + moveX, + moveY + }; +} From a68ccc45f84b87f8ac3efa9ec8da7b28638cff31 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sat, 17 Aug 2024 21:35:30 +0800 Subject: [PATCH 2/2] chore: update github action script --- .github/workflows/coverage.yml | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml index 7ee3cbc0..d832bb62 100644 --- a/.github/workflows/coverage.yml +++ b/.github/workflows/coverage.yml @@ -30,13 +30,12 @@ jobs: - run: pnpm i - run: npm run beforetest - run: npm run cover - - name: Upload coverage to Codecov - uses: codecov/codecov-action@v2 - with: - token: ${{ secrets.CODECOV_TOKEN }} # not required for public repos - files: /home/runner/work/idraw/idraw/reports/clover.xml # optional - flags: unittests # optional - name: codecov-umbrella # optional - fail_ci_if_error: true # optional (default = false) - verbose: true # optional (default = false) - + # - name: Upload coverage to Codecov + # uses: codecov/codecov-action@v2 + # with: + # token: ${{ secrets.CODECOV_TOKEN }} # not required for public repos + # files: /home/runner/work/idraw/idraw/reports/clover.xml # optional + # flags: unittests # optional + # name: codecov-umbrella # optional + # fail_ci_if_error: true # optional (default = false) + # verbose: true # optional (default = false)