diff --git a/packages/core/src/lib/cursor-image.ts b/packages/core/src/lib/cursor-image.ts index 936ff31..81a4993 100644 --- a/packages/core/src/lib/cursor-image.ts +++ b/packages/core/src/lib/cursor-image.ts @@ -6,3 +6,5 @@ export const CURSOR_RESIZE = export const CURSOR_DRAG_DEFAULT = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAApCAYAAABHomvIAAAEvUlEQVRYhc2Y20/cVRDHP8v+uKzAWkpDCtZq8BYhJkq8PBoJxgj7I2m0ryaSyFN9IT74pI8+8WJiggRj/APApFkSTGRJ+qKGUiyxbGPEWsUSuVhYC12Wy8+HmeMeYPe3d3WSye/k/M7le+bMzJkZ+J9ToEJreGVYN+vihcytstjQocUlAw0WCSoIVCv3Ae8CXwIt+u8XHVeOG8qLqgAHqAFCQCNwGugCthBJGd7S/tM6LqTzHI5KuqzgaoAHgEvAtwrkG2AG8FzXvep5nue67lX9N6P/PR1/SefXlBtkFXKNDUA/RyX1D9uUbYzOb9D1ygbSQU7eDMxhSSsSiVz3AxiJRK57nuf19/fPad8coqONFCBJPyUOIKc1OvcbgiY9ICDT8+0DHge2gR0gBeyTtviM5HeKAGlrrfMZVwhdAVaAr4F3KNF4gkA9cBbowOc68+3LwDn1Mhdy4/OcYk54nPr6+m54nofruvPa9SFQ6wfQTweNgTwInAGuQWk6mEUvHwb+Au4Dexx7ffK9+0q+CHWIBIOZ9skHYKWfK9tQ8gZoLDjIyWCg3ORY+2T8aYOyg4EaRIFrkCs4QU1NTSvabC20zyIDzuyfkYzEahHX8jHwE/LwXwHeJ4P7KIVIu5ouxFDC+HgLAy4MfEF2v1UpgOezATSiNVf6EvAWsD01NXVtdnb2bk9Pz81sp/q3KIi8t83Ae4DX0tJy0z7t8PDwD4FAYIX/WILVwKMAzc3Nu/agoaGhzmg0ugcsV0hIvlSNoH8IuIiebHJycrls4sotwaxGYvueAPAjEg3jum79yMjIr5WUjFLOxMpBIopWoBN4GfhOJ+4NDg4ulVt6i4uLm7r+BvAscA4fCXrAAfJQJ5Fg8gPgMuCMjo62d3V1LW1sbKRKlpXSxMTEmjZ/5qQrOwHwUAGmkIjiHhJdfKrM/Pz8Y+3t7RvT09Ob5QAYi8X2tbmke2cEZwAaCdoAt5QvIzEbiUSitbe3tyoej++UCnBhYSGkzdu6d1aQxkgOkfwgieQMCeCu8iwSnpNKpcIdHR3BZDJ5UCy4SCSyvL6+/giiSou67wE+eYmhAKKkIaAJUdynkdflNcQF3dFTpooxjmg0aozDAz4DXkB8bxPy1OYM7QzIOuAU0AY8pQu9CrwJ3AK8UCj0RyHgZmZmli1w3wOvAM/oHo1kiZiygbSDh7PAE8DzQA/wBqKnnuM4a2NjY7dygbtw4cICRy31deBFJA09o7eWsU7kJ1KTLJmyRyOSn5zS70fAkwBtbW2/DwwMHHR3d9d3dnY2rK6u7o2Pj2/GYrH9eDzurK2tndM1vwI+QXT7T2BTD5skQz6SCyAcLRoZkGEFGQbeRqpbubK+BPA5MI14h00L3I6Cy2h4+eQbJsKuRa6iQcGFFfB5oBt4DpFsI+Ky7iDBxW3gBhBH/GtC+R7i1lKk3UxRAG2QpvxWr0AbtB3SA5jkx36djH/dVlDbyibN3M8GDvJPyI2PSulixm/u6kZ1OQCaJ/S+tndJX6tvsFBIxcCUdA3vW5ubxMrObc0hDMhd/Rqp5QQHxeW8dubnHGM7tzVv/IECMlxQ/bpcRfRMqaNRheNcUGG9XFWDACfzWs/6Fl3t/xtO//8gpbCORQAAAABJRU5ErkJggg==`; export const CURSOR_DRAG_ACTIVE = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAER0lEQVRYhe2YT2hjRRjAf8lL22xsNsm6EWKrSKvuIkIh+O9QRFxEW18KUsoe7FHoRaWCN1FPetOrIHgVKS0q9P5OxaJbodkalgVrtVZjS7Ntd02z6abPw3yzmaT585q+elj2g2HmvZn35jffN/PNNwP35R6XgM/fuif4n+dO2klQvgsaZRc4NJJvoJbHdhrIAkJAN2ADHwFfAw9J3ZoB/b9I0AA6A0SBc0Aa2EVpSqddeZ+QdmfkO+u0gIPSQQR4HfhRQH4AHMDNZDJXXNd1M5nMFalzdB3wJTAOPAD0yEB9066G6wXepVZTd5MpTdporZ6jVqsatmMJoTR3HvgJQ1u2bS+3ArRte9l1XXdsbGyJo1pdBN6Wf3d3ChlAmSQO9LeC8fquQRpDWaerHWSjSr1iu4BkJyOsF9u2s67rkslkluTVxygltAVsJBZqdCngEj5osIlW+4EYytRNF04jeu3vulCT+7QkLH20dEOhumft97pQI4s3+iiRSPwtxVSbd39J8eEGvzFXc1NAs8KSFAZeBt4AHgNeBFDWObkEAne7HAK2gT2gCFQatdca1GbtBj4E3veFprVYVLXXcg4GqM6588BbAMlkcm1qamqzr6/v6ikBet5RgiizJoDPAXdgYGDZXHkzMzPrrk9CdRWngUeAsxxdCzVwpgZ/BigWiz1mo4mJif7jqMajeJrU5hywgGvAej6fvzA0NLThN1Eul9uT4g5VTbYFNKUIfAbsZ7PZvuHh4Wt+As7Ozu5IcY2j219TQB0NV4A7qODgO4CFhYWLg4ODOb8AHccpG4A68m6pRQ1YAQ6A28A+8BXwBcDq6upTqVTquh+AuVyuW4q/opRRaQdZD1gCbgE3ge+BT4HdfD7/ZDwe/z2bzRY6hRsfH1/e3Nx8FDX/sgbgoZfvg6jo4ixqW7oIPA+8CrwHrAJuJBLJd+JaHMf5k6qmPgGeQe1SCenXk0/U21xcIC8AzwGvAJPAEuAmEon1xcXFba9w8/Pz5oqdB14CnpY+oij35km0qwmjwqAU8ISM9hIwBeQA17KsG9PT07+1gxsZGdmgdqW+BjwLDAAPoo4ALU+W9arVwWoIpXp9kouKZpPAO8AwQCwW+2d0dLQ0OTkZSafT0UKhUJ6bm9t2HKeysrIS3tra0g7+KvABUJC0g5rrJdRcbLpImtleRzYashc1P2OSXwbebDVykX3gW+Ab1AHqhuQ3pe6AJlFMO0CoPROHDcio5I8DL1A9C8dQbmod+APYAK4DvwjQnsDdErgyVTfTEaCG1GFYGHXG7TVSo2OkdvhlAflXoHSuNdfStFqaRhEi2kfdprrj6M5LAt0I8EDaaMdflPal48CB95hMr3Bt8h4jD0kyL5E0pN6dysZzW7N2AqjbmhdIZjJvufTOpE19x3g+9s1XJ/ck5tVbfdhu+rxDfLiSO+lFToCjZwrXyH2/0Lwv95z8B1jAqXmDnj4YAAAAAElFTkSuQmCC`; + +export const CURSOR_RESIZE_ROTATE = `data:image/png;base64,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`; diff --git a/packages/core/src/lib/cursor.ts b/packages/core/src/lib/cursor.ts index 73beb91..62ec6db 100644 --- a/packages/core/src/lib/cursor.ts +++ b/packages/core/src/lib/cursor.ts @@ -1,6 +1,6 @@ import type { UtilEventEmitter, CoreEvent } from '@idraw/types'; import { limitAngle, loadImage, parseAngleToRadian } from '@idraw/util'; -import { CURSOR, CURSOR_RESIZE, CURSOR_DRAG_DEFAULT, CURSOR_DRAG_ACTIVE } from './cursor-image'; +import { CURSOR, CURSOR_RESIZE, CURSOR_DRAG_DEFAULT, CURSOR_DRAG_ACTIVE, CURSOR_RESIZE_ROTATE } from './cursor-image'; export class Cursor { #eventHub: UtilEventEmitter; @@ -11,7 +11,8 @@ export class Cursor { auto: CURSOR, 'drag-default': CURSOR_DRAG_DEFAULT, 'drag-active': CURSOR_DRAG_ACTIVE, - 'rotate-0': CURSOR_RESIZE + 'rotate-0': CURSOR_RESIZE, + rotate: CURSOR_RESIZE_ROTATE }; constructor( container: HTMLDivElement, @@ -31,6 +32,8 @@ export class Cursor { eventHub.on('cursor', (e) => { if (e.type === 'over-element' || !e.type) { this.#resetCursor('auto'); + } else if (e.type === 'resize-rotate') { + this.#resetCursor('rotate'); } else if (typeof e.type === 'string' && e.type?.startsWith('resize-')) { this.#setCursorResize(e); } else if (e.type === 'drag-default') { @@ -64,6 +67,9 @@ export class Cursor { if (cursorKey.startsWith('rotate-') && this.#cursorImageMap[this.#cursorType]) { offsetX = 10; offsetY = 10; + } else if (cursorKey === 'rotate') { + offsetX = 10; + offsetY = 10; } if (cursorKey === 'default') { this.#container.style.cursor = 'default'; diff --git a/packages/core/src/middleware/selector/config.ts b/packages/core/src/middleware/selector/config.ts index 4dd30c9..5deceb2 100644 --- a/packages/core/src/middleware/selector/config.ts +++ b/packages/core/src/middleware/selector/config.ts @@ -26,4 +26,6 @@ export const areaBorderWidth = 1; export const wrapperColor = '#1973ba'; export const lockColor = '#5b5959b5'; + +export const controllerSize = 10; // export const wrapperColor = '#1890ff'; diff --git a/packages/core/src/middleware/selector/draw-wrapper.ts b/packages/core/src/middleware/selector/draw-wrapper.ts index 8176264..7fde75c 100644 --- a/packages/core/src/middleware/selector/draw-wrapper.ts +++ b/packages/core/src/middleware/selector/draw-wrapper.ts @@ -9,10 +9,10 @@ import type { ViewSizeInfo, ElementSizeController } from '@idraw/types'; -import { rotateElementVertexes, calcViewVertexes } from '@idraw/util'; +import { rotateElementVertexes, calcViewPointSize, calcViewVertexes } from '@idraw/util'; import type { AreaSize } from './types'; -import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth, lockColor } from './config'; +import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth, lockColor, controllerSize } from './config'; function drawVertexes( ctx: ViewContext2D, @@ -36,6 +36,69 @@ function drawVertexes( ctx.fill(); } +function drawLine(ctx: ViewContext2D, start: PointSize, end: PointSize, opts: { borderColor: string; borderWidth: number; lineDash: number[] }) { + const { borderColor, borderWidth, lineDash } = opts; + ctx.setLineDash([]); + ctx.lineWidth = borderWidth; + ctx.strokeStyle = borderColor; + ctx.setLineDash(lineDash); + ctx.beginPath(); + ctx.moveTo(start.x, start.y); + ctx.lineTo(end.x, end.y); + ctx.closePath(); + ctx.stroke(); +} + +function drawCircleController( + ctx: ViewContext2D, + circleCenter: PointSize, + opts: { borderColor: string; borderWidth: number; background: string; lineDash: number[]; size: number } +) { + const { size, borderColor, borderWidth, background } = opts; + const center = circleCenter; + const r = size / 2; + + const a = r; + const b = r; + // 'content-box' + + if (a >= 0 && b >= 0) { + // draw border + if (typeof borderWidth === 'number' && borderWidth > 0) { + const ba = borderWidth / 2 + a; + const bb = borderWidth / 2 + b; + ctx.beginPath(); + ctx.strokeStyle = borderColor; + ctx.lineWidth = borderWidth; + ctx.circle(center.x, center.y, ba, bb, 0, 0, 2 * Math.PI); + ctx.closePath(); + ctx.stroke(); + } + + // draw content + ctx.beginPath(); + ctx.fillStyle = background; + ctx.circle(center.x, center.y, a, b, 0, 0, 2 * Math.PI); + ctx.closePath(); + ctx.fill(); + } + + // ctx.setLineDash([]); + // ctx.lineWidth = borderWidth; + // ctx.strokeStyle = borderColor; + // ctx.fillStyle = background; + // ctx.setLineDash(lineDash); + // ctx.beginPath(); + // ctx.moveTo(vertexes[0].x, vertexes[0].y); + // ctx.lineTo(vertexes[1].x, vertexes[1].y); + // ctx.lineTo(vertexes[2].x, vertexes[2].y); + // ctx.lineTo(vertexes[3].x, vertexes[3].y); + // ctx.lineTo(vertexes[0].x, vertexes[0].y); + // ctx.closePath(); + // ctx.stroke(); + // ctx.fill(); +} + export function drawHoverVertexesWrapper( ctx: ViewContext2D, vertexes: ViewRectVertexes | null, @@ -114,10 +177,11 @@ export function drawSelectedElementControllersVertexes( if (!controller) { return; } - const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight } = controller; + const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller; const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] }; const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' }; + drawLine(ctx, calcViewPointSize(top.center, opts), calcViewPointSize(rotate.center, opts), { ...ctrlOpts, borderWidth: 2 }); drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts); // drawVertexes(ctx, calcViewVertexes(left.vertexes, opts), ctrlOpts); // drawVertexes(ctx, calcViewVertexes(right.vertexes, opts), ctrlOpts); @@ -127,6 +191,7 @@ export function drawSelectedElementControllersVertexes( drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts); drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts); drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts); + drawCircleController(ctx, calcViewPointSize(rotate.center, opts), { ...ctrlOpts, size: controllerSize, borderWidth: 2 }); } export function drawElementListShadows(ctx: ViewContext2D, elements: Element[], opts?: Omit) { diff --git a/packages/core/src/middleware/selector/index.ts b/packages/core/src/middleware/selector/index.ts index 2a37703..1924499 100644 --- a/packages/core/src/middleware/selector/index.ts +++ b/packages/core/src/middleware/selector/index.ts @@ -3,13 +3,14 @@ import { calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, + calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, deepResizeGroupElement } from '@idraw/util'; -import type { ViewRectVertexes, CoreEvent, ElementPosition } from '@idraw/types'; +import type { ViewRectVertexes, CoreEvent, ElementPosition, ViewScaleInfo, ViewSizeInfo, ElementSizeController } from '@idraw/types'; import type { Point, PointSize, @@ -33,6 +34,7 @@ import { import { getPointTarget, resizeElement, + rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, @@ -50,7 +52,8 @@ import { keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, - keySelectedElementController + keySelectedElementController, + controllerSize // keyDebugElemCenter, // keyDebugEnd0, // keyDebugEndHorizontal, @@ -112,7 +115,7 @@ export const MiddlewareSelector: BoardMiddleware); }); + let resizeStart: PointSize = start; let resizeEnd: PointSize = end; + if (groupQueue.length > 0) { resizeStart = rotatePointInGroup(start, pointGroupQueue); resizeEnd = rotatePointInGroup(end, pointGroupQueue); } - const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer }); - elems[0].x = resizedElemSize.x; - elems[0].y = resizedElemSize.y; - if (elems[0].type === 'group' && elems[0].operations?.deepResize === true) { - // TODO - // elems[0].w = resizedElemSize.w; - // elems[0].h = resizedElemSize.h; - deepResizeGroupElement(elems[0] as Element<'group'>, { - w: resizedElemSize.w, - h: resizedElemSize.h + if (resizeType === 'resize-rotate') { + const controller: ElementSizeController = sharer.getSharedStorage(keySelectedElementController) as ElementSizeController; + const viewVertexes: ViewRectVertexes = [ + controller.topLeft.center, + controller.topRight.center, + controller.bottomLeft.center, + controller.bottomRight.center + ]; + + const viewCenter: PointSize = calcElementCenterFromVertexes(viewVertexes); + const resizedElemSize = rotateElement(elems[0], { + center: viewCenter, + viewScaleInfo, + viewSizeInfo, + start, + end, + resizeType, + sharer }); + + elems[0].angle = resizedElemSize.angle; } else { - elems[0].w = resizedElemSize.w; - elems[0].h = resizedElemSize.h; + const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer }); + elems[0].x = resizedElemSize.x; + elems[0].y = resizedElemSize.y; + if (elems[0].type === 'group' && elems[0].operations?.deepResize === true) { + // TODO + // elems[0].w = resizedElemSize.w; + // elems[0].h = resizedElemSize.h; + deepResizeGroupElement(elems[0] as Element<'group'>, { + w: resizedElemSize.w, + h: resizedElemSize.h + }); + } else { + elems[0].w = resizedElemSize.w; + elems[0].h = resizedElemSize.h; + } } updateSelectedElementList([elems[0]]); diff --git a/packages/core/src/middleware/selector/types.ts b/packages/core/src/middleware/selector/types.ts index 109b1d7..b7daca9 100644 --- a/packages/core/src/middleware/selector/types.ts +++ b/packages/core/src/middleware/selector/types.ts @@ -66,7 +66,8 @@ export type ResizeType = | 'resize-top-left' | 'resize-top-right' | 'resize-bottom-left' - | 'resize-bottom-right'; + | 'resize-bottom-right' + | 'resize-rotate'; export type PointTargetType = null | ResizeType | 'list-area' | 'over-element'; diff --git a/packages/core/src/middleware/selector/util.ts b/packages/core/src/middleware/selector/util.ts index 82d2b75..80b6a69 100644 --- a/packages/core/src/middleware/selector/util.ts +++ b/packages/core/src/middleware/selector/util.ts @@ -7,9 +7,11 @@ import { rotatePointInGroup, rotatePoint, parseAngleToRadian, - limitAngle + parseRadianToAngle, + limitAngle, + calcRadian } from '@idraw/util'; -import type { ViewRectVertexes, ElementSizeController, StoreSharer } from '@idraw/types'; +import type { ViewRectVertexes, ElementSizeController, StoreSharer, ViewScaleInfo, ViewSizeInfo } from '@idraw/types'; import type { Data, Element, @@ -18,13 +20,11 @@ import type { PointSize, PointTarget, PointTargetType, - ViewScaleInfo, ViewCalculator, ElementType, ElementSize, ResizeType, - AreaSize, - ViewSizeInfo + AreaSize } from './types'; // import { keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config'; @@ -104,8 +104,8 @@ export function getPointTarget( // resize if (selectedElementController) { - const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight } = selectedElementController; - const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight]; + const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate } = selectedElementController; + const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate]; for (let i = 0; i < ctrls.length; i++) { const ctrl = ctrls[i]; if (isPointInViewActiveVertexes(p, { ctx, vertexes: ctrl.vertexes, viewSizeInfo, viewScaleInfo })) { @@ -819,6 +819,37 @@ export function resizeElement( return { x, y, w, h, angle: elem.angle }; } +export function rotateElement( + elem: Element, + opts: { + center: PointSize; + start: PointSize; + end: PointSize; + resizeType: ResizeType; + viewScaleInfo: ViewScaleInfo; + viewSizeInfo: ViewSizeInfo; + sharer: StoreSharer; // TODO + } +): ElementSize { + const { x, y, w, h, angle = 0 } = elem; + const { center, start, end, viewScaleInfo, viewSizeInfo } = opts; + const elemCenter = calcViewPointSize(center, { + viewScaleInfo, + viewSizeInfo + }); + const startAngle = limitAngle(angle); + const changedRadian = calcRadian(elemCenter, start, end); + const endAngle = startAngle + parseRadianToAngle(changedRadian); + + return { + x, + y, + w, + h, + angle: endAngle + }; +} + export function getSelectedListArea( data: Data, opts: { diff --git a/packages/types/src/lib/controller.ts b/packages/types/src/lib/controller.ts index 438b525..fdb5fd2 100644 --- a/packages/types/src/lib/controller.ts +++ b/packages/types/src/lib/controller.ts @@ -13,7 +13,8 @@ export type ElementSizeControllerType = | 'left-middle' | 'right-middle' | 'top-middle' - | 'bottom-middle'; + | 'bottom-middle' + | 'rotate'; export interface ElementSizeControllerItem { type: ElementSizeControllerType; @@ -31,9 +32,9 @@ export interface ElementSizeController { topRight: ElementSizeControllerItem; bottomLeft: ElementSizeControllerItem; bottomRight: ElementSizeControllerItem; - topMiddle: ElementSizeControllerItem; bottomMiddle: ElementSizeControllerItem; leftMiddle: ElementSizeControllerItem; rightMiddle: ElementSizeControllerItem; + rotate: ElementSizeControllerItem; } diff --git a/packages/util/src/index.ts b/packages/util/src/index.ts index 9a73752..7fa1e8c 100644 --- a/packages/util/src/index.ts +++ b/packages/util/src/index.ts @@ -22,7 +22,8 @@ export { calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, - limitAngle + limitAngle, + calcRadian } from './lib/rotate'; export { getSelectedElementUUIDs, diff --git a/packages/util/src/lib/controller.ts b/packages/util/src/lib/controller.ts index 3fa4738..9a1c07b 100644 --- a/packages/util/src/lib/controller.ts +++ b/packages/util/src/lib/controller.ts @@ -27,6 +27,7 @@ export function calcElementSizeController( const ctrlSize = (controllerSize && controllerSize > 0 ? controllerSize : 8) / viewScaleInfo.scale; const { x, y, w, h, angle = 0 } = elemSize; + const ctrlGroupQueue = [ ...[ { @@ -48,6 +49,17 @@ export function calcElementSizeController( }); const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue }) as ViewRectVertexes; + const rotateElemVertexes = calcElementVertexesInGroup( + { + x: x - ctrlSize * 2, + y: y - ctrlSize * 2, + h: h + ctrlSize * 4, + w: w + ctrlSize * 4, + angle + }, + { groupQueue: [...groupQueue] } + ) as ViewRectVertexes; + const topCenter = getCenterFromTwoPoints(vertexes[0], vertexes[1]); const rightCenter = getCenterFromTwoPoints(vertexes[1], vertexes[2]); const bottomCenter = getCenterFromTwoPoints(vertexes[2], vertexes[3]); @@ -83,6 +95,26 @@ export function calcElementSizeController( const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize); const leftMiddleVertexes = calcElementVertexes(leftMiddleSize); + // const originRotateCenter: PointSize = { + // x: x + w / 2, + // y: y - ctrlSize * 4 + // }; + + // const rotateCenter = topCenter; + const rotateCenter = getCenterFromTwoPoints(rotateElemVertexes[0], rotateElemVertexes[1]); + const rotateSize = createControllerElementSizeFromCenter(rotateCenter, { size: ctrlSize, angle: totalAngle }); + const rotateVertexes = calcElementVertexes(rotateSize); + + // const rotateCtrlElem: ElementSize = { + // x: originRotateCenter.x - ctrlSize / 2, + // y: originRotateCenter.x - ctrlSize / 2, + // w: ctrlSize, + // h: ctrlSize, + // angle + // }; + // const rotateVertexes = calcElementVertexesInGroup(rotateCtrlElem, { groupQueue }) as ViewRectVertexes; + // const rotateCenter = getCenterFromTwoPoints(rotateVertexes[0], rotateVertexes[2]); + const sizeController: ElementSizeController = { elementWrapper: vertexes, left: { @@ -144,6 +176,11 @@ export function calcElementSizeController( type: 'bottom-middle', vertexes: bottomMiddleVertexes, center: bottomCenter + }, + rotate: { + type: 'rotate', + vertexes: rotateVertexes, + center: rotateCenter } }; return sizeController;