Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 01:58:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: implement rotation of element

Browse source
This commit is contained in:
chenshenhai 2024-02-08 08:28:15 +08:00
parent 516292a136
commit ca3f83668d
10 changed files with 207 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/core/src/lib/cursor-image.ts
View file

@ -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,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAIiklEQVRYhe2YW2yUxxmGn7W96zXGNnZsr2FJHQyYBHNIU1ttAqVUVjlJUAtxQyUXhKgQktUDdSUkuEDtBVJ9UQXRC0RJRblrq/SCIARpFImWQ8VBIZQinJpQYozNyWaxiw/rfXsx3+z+6xNOe9tPGv2nOTzzffPPvDMhSXwJC1nKAXIDV/9ellLAqF1T9o5A2Ry7J5A/Fbh3mUMh8qYJ5kHCQATID6QIkBcAHAVGgKFAStq33EB53/ao5Rm064i9g0CmqcDyrNICYCZQBJTYdaa9j1jelDUwCAwAz4F+ex61DhZauXzr1CDwDHhq1wFg2Do1KWAo0NsCAyoDKoGYXcuBWdZY1PKnzAsDQB/wBOg1yKTVN8vqmoHz6nOgC7gHdFrbCasrNRFgyMCj5qVXgDlANfAaMA/4ir2rMI+MtSHgEdAN9BjsiNVZYR0sNq8+AtqB69Z2MuDBcYA+pAXW0yoDWgTUWXrd8k1l+cBcSxjIIBlPB63G8uUB/8Z57znwAkgGAX1YC4BSK7QIWA7UWwoDJJNJzp49y4ULF2hvb6e7u5tEIkFhYSGVlZXMmzePhoYGNmzYQElJCVZv2tPt7e3s2bOHvr4+9u3bx/r16+PWjg/zQ9x4BEk+5UkqklQt6ZuSdkn6jaRbMhsYGFBbW5uWLVvmp5MpU3V1tVpbW9XV1aWgbdy4MZ2npqbGvx6W9DtJ35e0RFJREDBX0gxJcUnfkPQDScck3fGlz549q7q6ummBjU2xWEzvvfdeGvCtt95Kf6uoqAiyfyBpt6SvSZrlAUOSIpLKJS2X9D1Jv5Z025d69913FQqFJmy8rKxMS5YsUUNDg5YvX67Zs2dPCrpjxw6NjIxoxYoV6XdVVVVBwI8l/UTS1yWVesBcC+18SRsk/ULS33yJtra2CRtramrSiRMn1NXVpWQyKUlKpVJ6+vSpTp48qZ07dyo/P39cua1bt6q+vn4ywL9IapX0tqQyDxiRFDPq3ZL+JCklSadOnRrXwMKFC3X69GlNx65du6aVK1eOqyMYjTGAf50IsNC8t1FSm6TPJOn+/fuKxWJZFb/zzjvjBvx0bO/evQqHwxNG4mUe9MtYMZk5bwHA4cOH6enpSc9BixYt4uTJk5SVlflXfcBN4DFuapoHLPQfz58/z9WrVwmFQsTjceLxOHfv3uUlNlZcpFeMEtzsXg2QSCQ4duxYulQoFOLQoUNBuE7gvAE+x82b/VZHyblz52hsbCSZTL4MCGWrqUECq0gQsBi3ts4B+PDDD3n48GG61OrVq1mzZo1/fGZw54HbVmGV1bMAWPbRRx9NC24CwD7cajLiAXNwIS7ELW3lAGfOnMmqZPv27cHHvwM3gH8AnwH/wnn0C+AuwLZt25g/f/5L4cLhMNu2bfOPnbh1+xkZ9UMebvmKGmQEoLOzM11JQUEBK1eu9I/JAFAPTqnk4hTNY9xS1V5TU1N7+fJlOjo6SKXS+jPLJFFUVMTixYsxmJtW/inOi2nAXDI/C0BWeMvKyojFYv6xz1LCKhnCRSEBPMCFfBaQKi0tfb2+vn5qFzp7AnwCXAM+t45mAUJGfgMwOpoWtIRCWZ/89BB8TuJ+lG5cNEatkXYgjtN+BYG2ktaxBE4U3AP+iRsud3EeHCTwk6Ss0IhvtaKiIk3Q19dHb28vhYWF4H6mYtxwiBrQIE4aPTHgIVzoO3E/TzlOV4YD3/stj9eMPj2xzg4HAYMSPQnkxePxNGB/fz+XLl1iy5Yt4HTeq+aZTtyA9h18Yb33G6aRQBqyDiUNLihmH1q54LAZ9ZHKISPRn1loaGxsJGjHjx8PPi6xtAgnNufgVHcRmf1J2DpTiJsjvYout3c5gQ49Ns89s3fpOdB70I+Hx7iBXrV27VqKi4tJJBKAm3auXLmCDfpy4G3rZSHur/aSPg83BCpx24MFuNUlbnkHcGMubEDdxpG0lBn8AcBBsgfsVysqKti6dStHjhwBYGRkhJaWFs6dO0ckEgGYj9v0xIA71rkha7jUgBYCb5hHGRoaIj8/f4Z5s8jafUpmN/diLBwAkmZKWiipSdKvJN2VpI6ODhUVFWUt7Js2bdLAwMBYLdAt6VNJlyV9IumLsRkOHjyo2tparVixQrdvp2Xmn00YrJI0R05VBRV+GjAiqcoUxA8lnfI1HD16dJz6WLVqla5fvz4tFdPZ2anm5uas8s3Nzf7zp5J+LmmNpFcl5U8GmCupWFKtpO9K+qWkG76W3bt3j4OMRqNqaWnRhQsXNDQ0lAWVTCZ169YtHThwQFVVVePKtrS0+Kw3pgsYso+Vkuol7ZD0W0ldvsHW1tZJZXxtba0aGxvV1NSkdevWaenSpYpGoxPmXb9+vXp6ejzgx5J+ZiGeLSk8GaD34ky5Hd23JP1I0h8kPQmGu7y8/L/aNEUiEe3fv1/Dw8Pp6Es6KqlZ0puSXpHbVU4KiPVglqQFkr4j6aeSfi/pvq/13r172rVrlyorK6cFFo1GtXnzZl25ciU4Ch5J+qOkH0v6tqTXzDk5EwGGlNFjOWQOd8px4vUN4E3cpn2pz/jgwQPef/99Ll68yJ07d+jt7WVwcJBIJEJJSQlz586loaGBTZs2UVdXF5w0OoDLwFWcbPsct6r04+bRLHEYCoWyAD1kBDfHleHmsxrccccS3NFHNV/eenBy6iZwCycMOnHz5wBuDh2nyyY6H0zhFmoF7vtxk+l9q3ieQfrDo8msF7cy3cN56g7ZWnKcep7IxnrQmz+wHKu2K3EKJWbPpWSUTQ4ZtRJc23sC6ZGB9ZM52JwcboIQjzUvZvNxYfeHlyVkZFcBbux6wKA6ShjoM5yM8uH0Xpuy8ekAQuZc2W8P8nEei9p9mMmPgAfJHO0O27e0lHppw9MEDJo//A4eoE91iB48SJ80lFMB/t/+V/sPGZfTmtMFR4EAAAAASUVORK5CYII=`;

10
packages/core/src/lib/cursor.ts
View file

@ -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<CoreEvent>;
@ -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';

2
packages/core/src/middleware/selector/config.ts
View file

@ -26,4 +26,6 @@ export const areaBorderWidth = 1;
export const wrapperColor = '#1973ba';
export const lockColor = '#5b5959b5';
export const controllerSize = 10;
// export const wrapperColor = '#1890ff';

71
packages/core/src/middleware/selector/draw-wrapper.ts
View file

@ -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<ElementType>[], opts?: Omit<RendererDrawElementOptions, 'loader'>) {

60
packages/core/src/middleware/selector/index.ts
View file

@ -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<DeepSelectorSharedStorage, Core
if (list.length === 1) {
const controller = calcElementSizeController(list[0], {
groupQueue: sharer.getSharedStorage(keyGroupQueue),
controllerSize: 10,
controllerSize,
viewScaleInfo: sharer.getActiveViewScaleInfo()
});
sharer.setSharedStorage(keySelectedElementController, controller);
@ -389,6 +392,8 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
const data = sharer.getActiveStorage('data');
const elems = getActiveElements();
const scale = sharer.getActiveStorage('scale') || 1;
const viewScaleInfo: ViewScaleInfo = sharer.getActiveViewScaleInfo() as unknown as ViewScaleInfo;
const viewSizeInfo: ViewSizeInfo = sharer.getActiveViewSizeInfo() as unknown as ViewSizeInfo;
const start = prevPoint;
const end = e.point;
const resizeType = sharer.getSharedStorage(keyResizeType);
@ -432,26 +437,51 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
angle: 0 - angle
} as Element<'group'>);
});
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]]);

3
packages/core/src/middleware/selector/types.ts
View file

@ -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';

45
packages/core/src/middleware/selector/util.ts
View file

@ -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<ElementType>,
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: {

5
packages/types/src/lib/controller.ts
View file

@ -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;
}

3
packages/util/src/index.ts
View file

@ -22,7 +22,8 @@ export {
calcElementCenter,
calcElementCenterFromVertexes,
rotatePointInGroup,
limitAngle
limitAngle,
calcRadian
} from './lib/rotate';
export {
getSelectedElementUUIDs,

37
packages/util/src/lib/controller.ts
View file

@ -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;