mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
refactor: rename bgColor to background for core and add eventHub
This commit is contained in:
chenshenhai
parent
e271133567
commit
725d83c514
6 changed files with 377 additions and 315 deletions
|
|
@ -58,26 +58,32 @@ export class Core {
|
|||
this._board.scale(opts);
|
||||
}
|
||||
|
||||
// scroll(num: number) {
|
||||
// this._board.scroll(num);
|
||||
// }
|
||||
|
||||
resize(newViewSize: Partial<ViewSizeInfo>) {
|
||||
const { _board: board } = this;
|
||||
const sharer = board.getSharer();
|
||||
const viewSizeInfo = sharer.getActiveViewSizeInfo();
|
||||
// const sharer = this._board.getSharer();
|
||||
// const viewScaleInfo = sharer.getActiveViewScaleInfo();
|
||||
board.resize({
|
||||
...viewSizeInfo,
|
||||
...newViewSize
|
||||
});
|
||||
// this._board.scale(viewScaleInfo.scale);
|
||||
// this._board.scrollX(viewScaleInfo.offsetLeft);
|
||||
// this._board.scrollY(viewScaleInfo.offsetTop);
|
||||
}
|
||||
|
||||
clear() {
|
||||
this._board.clear();
|
||||
}
|
||||
|
||||
on<T extends keyof CoreEvent>(name: T, callback: (e: CoreEvent[T]) => void) {
|
||||
const eventHub = this._board.getEventHub();
|
||||
eventHub.on(name, callback);
|
||||
}
|
||||
|
||||
off<T extends keyof CoreEvent>(name: T, callback: (e: CoreEvent[T]) => void) {
|
||||
const eventHub = this._board.getEventHub();
|
||||
eventHub.off(name, callback);
|
||||
}
|
||||
|
||||
trigger<T extends keyof CoreEvent>(name: T, e: CoreEvent[T]) {
|
||||
const eventHub = this._board.getEventHub();
|
||||
eventHub.trigger(name, e);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,5 +13,12 @@ export const keySelectedElementController = Symbol(`${key}_selectedElementContro
|
|||
export const keyGroupQueue = Symbol(`${key}_groupQueue`); // Array<Element<'group'>> | []
|
||||
export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`); // Array<ViewRectVertexes> | []
|
||||
|
||||
export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
|
||||
export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
|
||||
export const keyDebugEndVertical = Symbol(`${key}_debug_endVertical`);
|
||||
export const keyDebugStartHorizontal = Symbol(`${key}_debug_startHorizontal`);
|
||||
export const keyDebugEndHorizontal = Symbol(`${key}_debug_endHorizontal`);
|
||||
export const keyDebugEnd0 = Symbol(`${key}_debug_end0`);
|
||||
|
||||
export const resizeControllerBorderWidth = 2;
|
||||
export const wrapperColor = '#1973ba';
|
||||
|
|
|
|||
|
|
@ -14,12 +14,16 @@ import type { AreaSize } from './types';
|
|||
|
||||
import { resizeControllerBorderWidth, wrapperColor } from './config';
|
||||
|
||||
function drawVertexes(ctx: ViewContext2D, vertexes: ViewRectVertexes, opts: { borderColor: string; borderWidth: number; bgColor: string; lineDash: number[] }) {
|
||||
const { borderColor, borderWidth, bgColor, lineDash } = opts;
|
||||
function drawVertexes(
|
||||
ctx: ViewContext2D,
|
||||
vertexes: ViewRectVertexes,
|
||||
opts: { borderColor: string; borderWidth: number; background: string; lineDash: number[] }
|
||||
) {
|
||||
const { borderColor, borderWidth, background, lineDash } = opts;
|
||||
ctx.setLineDash([]);
|
||||
ctx.lineWidth = borderWidth;
|
||||
ctx.strokeStyle = borderColor;
|
||||
ctx.fillStyle = bgColor;
|
||||
ctx.fillStyle = background;
|
||||
ctx.setLineDash(lineDash);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(vertexes[0].x, vertexes[0].y);
|
||||
|
|
@ -43,7 +47,7 @@ export function drawHoverVertexesWrapper(
|
|||
if (!vertexes) {
|
||||
return;
|
||||
}
|
||||
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, bgColor: 'transparent', lineDash: [] };
|
||||
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
|
||||
drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
|
||||
}
|
||||
|
||||
|
|
@ -57,8 +61,8 @@ export function drawSelectedElementControllersVertexes(
|
|||
}
|
||||
const { elementWrapper, left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight } = controller;
|
||||
// const wrapperColor = 'red'; // TODO
|
||||
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, bgColor: 'transparent', lineDash: [] };
|
||||
const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, bgColor: '#FFFFFF' };
|
||||
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
|
||||
const ctrlOpts = { ...wrapperOpts, borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' };
|
||||
|
||||
drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
|
||||
drawVertexes(ctx, calcViewVertexes(left.vertexes, opts), ctrlOpts);
|
||||
|
|
@ -145,7 +149,7 @@ export function drawGroupQueueVertexesWrappers(
|
|||
) {
|
||||
for (let i = 0; i < vertexesList.length; i++) {
|
||||
const vertexes = vertexesList[i];
|
||||
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 2, bgColor: 'transparent', lineDash: [4, 4] };
|
||||
const wrapperOpts = { borderColor: wrapperColor, borderWidth: 2, background: 'transparent', lineDash: [4, 4] };
|
||||
drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@ import {
|
|||
calcElementVertexesInGroup,
|
||||
calcElementQueueVertexesQueueInGroup,
|
||||
calcElementSizeController,
|
||||
rotatePointInGroup
|
||||
rotatePointInGroup,
|
||||
getGroupQueueFromList,
|
||||
findElementsFromList
|
||||
} from '@idraw/util';
|
||||
import type { ViewRectVertexes, CoreEvent } from '@idraw/types';
|
||||
import type {
|
||||
|
|
@ -42,6 +44,12 @@ import {
|
|||
keySelectedElementList,
|
||||
keySelectedElementListVertexes,
|
||||
keySelectedElementController
|
||||
// keyDebugElemCenter,
|
||||
// keyDebugEnd0,
|
||||
// keyDebugEndHorizontal,
|
||||
// keyDebugEndVertical,
|
||||
// keyDebugStartHorizontal,
|
||||
// keyDebugStartVertical
|
||||
} from './config';
|
||||
|
||||
export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEvent> = (opts) => {
|
||||
|
|
@ -50,6 +58,28 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
let prevPoint: Point | null = null;
|
||||
let inBusyMode: 'resize' | 'drag' | 'drag-list' | 'area' | null = null;
|
||||
|
||||
eventHub.on('select', ({ uuids }) => {
|
||||
const actionType = sharer.getSharedStorage(keyActionType);
|
||||
const data = sharer.getActiveStorage('data');
|
||||
const elements = findElementsFromList(uuids, data?.elements || []);
|
||||
let needRefresh = false;
|
||||
if (!actionType && elements.length === 1) {
|
||||
// TODO
|
||||
sharer.setSharedStorage(keyActionType, 'select');
|
||||
needRefresh = true;
|
||||
} else if (actionType === 'select' && elements.length === 1) {
|
||||
// TODO
|
||||
needRefresh = true;
|
||||
}
|
||||
if (needRefresh) {
|
||||
const elem = elements[0];
|
||||
const groupQueue = getGroupQueueFromList(elem.uuid, data?.elements || []);
|
||||
sharer.setSharedStorage(keyGroupQueue, groupQueue);
|
||||
updateSelectedElementList(elements);
|
||||
viewer.drawFrame();
|
||||
}
|
||||
});
|
||||
|
||||
sharer.setSharedStorage(keyActionType, null);
|
||||
|
||||
const getActiveElements = () => {
|
||||
|
|
@ -87,7 +117,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
|
||||
};
|
||||
|
||||
const updateSelectedElementList = (list: Element<ElementType>[]) => {
|
||||
const updateSelectedElementList = (list: Element<ElementType>[], opts?: { triggerEvent?: boolean }) => {
|
||||
sharer.setSharedStorage(keySelectedElementList, list);
|
||||
if (list.length === 1) {
|
||||
const controller = calcElementSizeController(list[0], {
|
||||
|
|
@ -99,6 +129,10 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
} else {
|
||||
sharer.setSharedStorage(keySelectedElementController, null);
|
||||
}
|
||||
|
||||
if (opts?.triggerEvent === true) {
|
||||
eventHub.trigger('select', { uuids: list.map((elem) => elem.uuid) });
|
||||
}
|
||||
};
|
||||
|
||||
const pointTargetBaseOptions = () => {
|
||||
|
|
@ -236,13 +270,13 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
const target = getPointTarget(e.point, pointTargetBaseOptions());
|
||||
updateHoverElement(null);
|
||||
if (target.type === 'over-element' && target?.elements?.length === 1) {
|
||||
updateSelectedElementList([target.elements[0]]);
|
||||
updateSelectedElementList([target.elements[0]], { triggerEvent: true });
|
||||
sharer.setSharedStorage(keyActionType, 'drag');
|
||||
} else if (target.type?.startsWith('resize-')) {
|
||||
sharer.setSharedStorage(keyResizeType, target.type as ResizeType);
|
||||
sharer.setSharedStorage(keyActionType, 'resize');
|
||||
} else {
|
||||
updateSelectedElementList([]);
|
||||
updateSelectedElementList([], { triggerEvent: true });
|
||||
}
|
||||
} else {
|
||||
// TODO
|
||||
|
|
@ -267,7 +301,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
if (target.type === 'list-area') {
|
||||
sharer.setSharedStorage(keyActionType, 'drag-list');
|
||||
} else if (target.type === 'over-element' && target?.elements?.length === 1) {
|
||||
updateSelectedElementList([target.elements[0]]);
|
||||
updateSelectedElementList([target.elements[0]], { triggerEvent: true });
|
||||
sharer.setSharedStorage(keyActionType, 'drag');
|
||||
} else if (target.type?.startsWith('resize-')) {
|
||||
sharer.setSharedStorage(keyResizeType, target.type as ResizeType);
|
||||
|
|
@ -276,7 +310,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
clear();
|
||||
sharer.setSharedStorage(keyActionType, 'area');
|
||||
sharer.setSharedStorage(keyAreaStart, e.point);
|
||||
updateSelectedElementList([]);
|
||||
updateSelectedElementList([], { triggerEvent: true });
|
||||
}
|
||||
// if (target.type) {
|
||||
// prevPoint = e.point;
|
||||
|
|
@ -354,6 +388,10 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
viewer.drawFrame();
|
||||
}
|
||||
prevPoint = e.point;
|
||||
|
||||
// if (data && (['drag', 'drag-list', 'drag-list-end', 'resize'] as ActionType[]).includes(actionType)) {
|
||||
// eventHub.trigger('change', { data });
|
||||
// }
|
||||
},
|
||||
|
||||
pointEnd(e: PointWatcherEvent) {
|
||||
|
|
@ -368,6 +406,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
prevPoint = null;
|
||||
if (actionType === 'resize' && resizeType) {
|
||||
sharer.setSharedStorage(keyResizeType, null);
|
||||
needDrawFrame = true;
|
||||
} else if (actionType === 'area') {
|
||||
sharer.setSharedStorage(keyActionType, null);
|
||||
if (data) {
|
||||
|
|
@ -384,7 +423,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
|
||||
if (elements.length > 0) {
|
||||
sharer.setSharedStorage(keyActionType, 'drag-list');
|
||||
updateSelectedElementList(elements);
|
||||
updateSelectedElementList(elements, { triggerEvent: true });
|
||||
needDrawFrame = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -418,9 +457,10 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
const viewInfo = calcElementsViewInfo(data.elements, viewSizeInfo, { extend: true });
|
||||
sharer.setActiveStorage('contextHeight', viewInfo.contextSize.contextHeight);
|
||||
sharer.setActiveStorage('contextWidth', viewInfo.contextSize.contextWidth);
|
||||
// TODO
|
||||
// viewer.scrollX(offsetLeft + viewInfo.changeContextLeft);
|
||||
// viewer.scrollY(offsetTop + viewInfo.changeContextTop);
|
||||
}
|
||||
|
||||
if (data && (['drag', 'drag-list', 'drag-list-end', 'resize'] as ActionType[]).includes(actionType)) {
|
||||
eventHub.trigger('change', { data });
|
||||
}
|
||||
viewer.drawFrame();
|
||||
};
|
||||
|
|
@ -452,6 +492,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
const { activeStore, sharedStore } = snapshot;
|
||||
const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
|
||||
|
||||
const sharer = opts.sharer;
|
||||
const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
|
||||
const viewSizeInfo = { width, height, contextHeight, contextWidth, devicePixelRatio };
|
||||
const selectedElements = sharedStore[keySelectedElementList];
|
||||
|
|
@ -464,8 +505,15 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
const groupQueue: Element<'group'>[] = sharedStore[keyGroupQueue];
|
||||
const groupQueueVertexesList: ViewRectVertexes[] = sharedStore[keyGroupQueueVertexesList];
|
||||
const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
|
||||
const selectedElementController = sharedStore[keySelectedElementController];
|
||||
// const selectedElementController = sharedStore[keySelectedElementController];
|
||||
// const resizeType: ResizeType | null = sharedStore[keyResizeType];
|
||||
const selectedElementController = elem
|
||||
? calcElementSizeController(elem, {
|
||||
groupQueue,
|
||||
controllerSize: 10,
|
||||
viewScaleInfo
|
||||
})
|
||||
: null;
|
||||
|
||||
if (groupQueue?.length > 0) {
|
||||
// in group
|
||||
|
|
@ -498,13 +546,12 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
|
|||
}
|
||||
|
||||
// // TODO mock data
|
||||
// const sharer = opts.sharer;
|
||||
// const elemCenter: any = sharer.getSharedStorage('TODO_elemCenter');
|
||||
// const startVertical = sharer.getSharedStorage('TODO_startVertical');
|
||||
// const endVertical: any = sharer.getSharedStorage('TODO_endVertical');
|
||||
// const startHorizontal = sharer.getSharedStorage('TODO_startHorizontal');
|
||||
// const endHorizontal: any = sharer.getSharedStorage('TODO_endHorizontal');
|
||||
// const end0: any = sharer.getSharedStorage('TODO_end0');
|
||||
// const elemCenter: any = sharer.getSharedStorage(keyDebugElemCenter);
|
||||
// const startVertical = sharer.getSharedStorage(keyDebugStartVertical);
|
||||
// const endVertical: any = sharer.getSharedStorage(keyDebugEndVertical);
|
||||
// const startHorizontal = sharer.getSharedStorage(keyDebugStartHorizontal);
|
||||
// const endHorizontal: any = sharer.getSharedStorage(keyDebugEndHorizontal);
|
||||
// const end0: any = sharer.getSharedStorage(keyDebugEnd0);
|
||||
// if (elemCenter && end0) {
|
||||
// helperContext.beginPath();
|
||||
// helperContext.moveTo(elemCenter.x, elemCenter.y);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,13 @@ import {
|
|||
keyHoverElementVertexes,
|
||||
keySelectedElementList,
|
||||
keySelectedElementListVertexes,
|
||||
keySelectedElementController
|
||||
keySelectedElementController,
|
||||
keyDebugElemCenter,
|
||||
keyDebugEnd0,
|
||||
keyDebugEndHorizontal,
|
||||
keyDebugEndVertical,
|
||||
keyDebugStartHorizontal,
|
||||
keyDebugStartVertical
|
||||
} from './config';
|
||||
|
||||
import {
|
||||
|
|
@ -47,7 +53,7 @@ export {
|
|||
export type ControllerStyle = ElementSize & {
|
||||
borderWidth: number;
|
||||
borderColor: string;
|
||||
bgColor: string;
|
||||
background: string;
|
||||
};
|
||||
|
||||
export type SelectedElementSizeController = Record<string, ControllerStyle>;
|
||||
|
|
@ -88,4 +94,11 @@ export type DeepSelectorSharedStorage = {
|
|||
[keySelectedElementList]: Array<Element<ElementType>>;
|
||||
[keySelectedElementListVertexes]: ViewRectVertexes | null;
|
||||
[keySelectedElementController]: ElementSizeController | null;
|
||||
|
||||
[keyDebugElemCenter]: PointSize | null;
|
||||
[keyDebugEnd0]: PointSize | null;
|
||||
[keyDebugEndHorizontal]: PointSize | null;
|
||||
[keyDebugEndVertical]: PointSize | null;
|
||||
[keyDebugStartHorizontal]: PointSize | null;
|
||||
[keyDebugStartVertical]: PointSize | null;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import type {
|
|||
AreaSize,
|
||||
ViewSizeInfo
|
||||
} from './types';
|
||||
import { keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
|
||||
|
||||
function parseRadian(angle: number) {
|
||||
return (angle * Math.PI) / 180;
|
||||
|
|
@ -186,6 +187,7 @@ export function resizeElement(
|
|||
|
||||
angle = limitAngle(angle);
|
||||
const radian = parseAngleToRadian(angle);
|
||||
const limitRatio = !!elem?.operations?.limitRatio;
|
||||
const { start, end, resizeType, scale } = opts;
|
||||
|
||||
let start0: PointSize = { ...start };
|
||||
|
|
@ -239,10 +241,79 @@ export function resizeElement(
|
|||
let moveX = (end.x - start.x) / scale;
|
||||
let moveY = (end.y - start.y) / scale;
|
||||
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
const maxDist = Math.max(Math.abs(moveX), Math.abs(moveY));
|
||||
moveX = (moveX >= 0 ? 1 : -1) * maxDist;
|
||||
moveY = (((moveY >= 0 ? 1 : -1) * maxDist) / elem.w) * elem.h;
|
||||
if (limitRatio === true) {
|
||||
// TODO
|
||||
if (['resize-top', 'resize-bottom', 'resize-left', 'resize-right'].includes(resizeType)) {
|
||||
const maxDist = Math.max(Math.abs(moveX), Math.abs(moveY));
|
||||
moveX = (moveX >= 0 ? 1 : -1) * maxDist;
|
||||
moveY = (((moveY >= 0 ? 1 : -1) * maxDist) / elem.w) * elem.h;
|
||||
|
||||
const maxVerticalDist = Math.max(Math.abs(moveVerticalX), Math.abs(moveVerticalY));
|
||||
moveVerticalX = (moveVerticalX >= 0 ? 1 : -1) * maxVerticalDist;
|
||||
moveVerticalY = (((moveVerticalY >= 0 ? 1 : -1) * maxVerticalDist) / elem.w) * elem.h;
|
||||
|
||||
const maxHorizontalDist = Math.max(Math.abs(moveHorizontalX), Math.abs(moveHorizontalY));
|
||||
moveHorizontalX = (moveHorizontalX >= 0 ? 1 : -1) * maxHorizontalDist;
|
||||
moveHorizontalY = (((moveHorizontalY >= 0 ? 1 : -1) * maxHorizontalDist) / elem.w) * elem.h;
|
||||
} else if (['resize-top-left', 'resize-top-right', 'resize-bottom-left', 'resize-bottom-right'].includes(resizeType)) {
|
||||
{
|
||||
// const maxDist = Math.max(Math.abs(moveX), Math.abs(moveY));
|
||||
const maxDist = Math.abs(moveX);
|
||||
moveX = (moveX >= 0 ? 1 : -1) * maxDist;
|
||||
const moveYLeng = (maxDist / elem.w) * elem.h;
|
||||
if (resizeType === 'resize-top-left' || resizeType === 'resize-bottom-right') {
|
||||
moveY = moveX > 0 ? moveYLeng : -moveYLeng;
|
||||
} else if (resizeType === 'resize-top-right' || resizeType === 'resize-bottom-left') {
|
||||
moveY = moveX > 0 ? -moveYLeng : moveYLeng;
|
||||
}
|
||||
}
|
||||
|
||||
{
|
||||
moveHorizontalDist = Math.abs(moveHorizontalDist);
|
||||
moveVerticalDist = (moveHorizontalDist / elem.w) * elem.h;
|
||||
|
||||
// // const maxDist = Math.max(Math.abs(moveHorizontalDist), Math.abs(moveVerticalDist));
|
||||
// const maxDist = Math.abs(moveHorizontalDist);
|
||||
// moveHorizontalDist = (moveHorizontalX >= 0 ? 1 : -1) * maxDist;
|
||||
// const moveVerticalDistLeng = (maxDist / elem.w) * elem.h;
|
||||
// if (resizeType === 'resize-top-left') {
|
||||
// moveVerticalDist = moveHorizontalDist > 0 ? moveVerticalDistLeng : -moveVerticalDistLeng;
|
||||
// }
|
||||
|
||||
// console.log('moveHorizontalDist, moveHorizontalDist ====== ', moveHorizontalDist, moveHorizontalDist);
|
||||
// if (resizeType === 'resize-top-left' || resizeType === 'resize-bottom-right') {
|
||||
// moveVerticalDist = moveHorizontalDist > 0 ? moveVerticalDistLeng : -moveVerticalDistLeng;
|
||||
// } else if (resizeType === 'resize-top-right' || resizeType === 'resize-bottom-left') {
|
||||
// moveVerticalDist = moveHorizontalDist > 0 ? -moveVerticalDistLeng : moveVerticalDistLeng;
|
||||
// }
|
||||
}
|
||||
|
||||
// const maxVerticalDist = Math.max(Math.abs(moveVerticalX), Math.abs(moveVerticalY));
|
||||
// moveVerticalX = (moveVerticalX >= 0 ? 1 : -1) * maxVerticalDist;
|
||||
// const moveVerticalYDist = (maxVerticalDist / elem.w) * elem.h;
|
||||
// if (resizeType === 'resize-top-left' || resizeType === 'resize-bottom-right') {
|
||||
// moveVerticalY = moveVerticalX > 0 ? moveVerticalYDist : -moveVerticalYDist;
|
||||
// } else if (resizeType === 'resize-top-right' || resizeType === 'resize-bottom-left') {
|
||||
// moveVerticalY = moveVerticalX > 0 ? -moveVerticalYDist : moveVerticalYDist;
|
||||
// }
|
||||
|
||||
// const maxHorizontalDist = Math.max(Math.abs(moveHorizontalX), Math.abs(moveHorizontalY));
|
||||
// moveHorizontalX = (moveHorizontalX >= 0 ? 1 : -1) * maxHorizontalDist;
|
||||
// const moveHorizontalYDist = (maxHorizontalDist / elem.w) * elem.h;
|
||||
// if (resizeType === 'resize-top-left' || resizeType === 'resize-bottom-right') {
|
||||
// moveHorizontalY = moveHorizontalX > 0 ? moveHorizontalYDist : -moveHorizontalYDist;
|
||||
// } else if (resizeType === 'resize-top-right' || resizeType === 'resize-bottom-left') {
|
||||
// moveHorizontalY = moveHorizontalX > 0 ? -moveHorizontalYDist : moveHorizontalYDist;
|
||||
// }
|
||||
|
||||
// const maxVerticalDist = Math.abs(moveVerticalX);
|
||||
// moveVerticalX = (moveVerticalX >= 0 ? 1 : -1) * maxVerticalDist;
|
||||
// moveVerticalY = (((moveVerticalY >= 0 ? 1 : -1) * maxVerticalDist) / elem.w) * elem.h;
|
||||
|
||||
// const maxHorizontalDist = Math.abs(moveHorizontalX);
|
||||
// moveHorizontalX = (moveHorizontalX >= 0 ? 1 : -1) * maxHorizontalDist;
|
||||
// moveHorizontalY = (((moveHorizontalY >= 0 ? 1 : -1) * maxHorizontalDist) / elem.w) * elem.h;
|
||||
}
|
||||
}
|
||||
|
||||
switch (resizeType) {
|
||||
|
|
@ -443,7 +514,7 @@ export function resizeElement(
|
|||
}
|
||||
case 'resize-top-left': {
|
||||
if (angle === 0) {
|
||||
if (elem.w - moveX > 0) {
|
||||
if (w - moveX > 0) {
|
||||
x += moveX;
|
||||
w -= moveX;
|
||||
}
|
||||
|
|
@ -451,83 +522,62 @@ export function resizeElement(
|
|||
y += moveY;
|
||||
h -= moveY;
|
||||
}
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
// TODO
|
||||
}
|
||||
} else if (angle > 0 || angle < 0) {
|
||||
let centerX = elemCenter.x;
|
||||
let centerY = elemCenter.y;
|
||||
|
||||
if (angle < 90) {
|
||||
{
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
const radian = parseRadian(angle);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, moveHorizontalX);
|
||||
const radian = parseRadian(angle);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveHorizontalDist * Math.sin(radian);
|
||||
}
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveHorizontalDist * Math.sin(radian);
|
||||
} else if (angle < 180) {
|
||||
{
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
const radian = parseRadian(angle - 90);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.sin(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveHorizontalX);
|
||||
const radian = parseRadian(angle - 90);
|
||||
const centerMoveDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveDist * Math.cos(radian);
|
||||
}
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalX);
|
||||
const radian = parseRadian(angle - 90);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.sin(radian);
|
||||
|
||||
const centerMoveDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveDist * Math.cos(radian);
|
||||
} else if (angle < 270) {
|
||||
{
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
const radian = parseRadian(angle - 180);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.cos(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveHorizontalY);
|
||||
const radian = parseRadian(angle - 180);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.sin(radian);
|
||||
}
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
|
||||
const radian = parseRadian(angle - 180);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.cos(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.sin(radian);
|
||||
} else if (angle < 360) {
|
||||
{
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
const radian = parseRadian(angle - 270);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.sin(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveHorizontalY);
|
||||
const radian = parseRadian(angle - 270);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
|
||||
}
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
|
||||
const radian = parseRadian(angle - 270);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.sin(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
|
||||
}
|
||||
if (h + moveVerticalDist > 0) {
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
w = w + (moveVerticalDist / elem.h) * elem.w;
|
||||
}
|
||||
h = h + moveVerticalDist;
|
||||
}
|
||||
if (w + moveHorizontalDist > 0) {
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
h = h + (moveHorizontalDist / elem.w) * elem.h;
|
||||
}
|
||||
w = w + moveHorizontalDist;
|
||||
}
|
||||
x = centerX - w / 2;
|
||||
|
|
@ -537,91 +587,68 @@ export function resizeElement(
|
|||
}
|
||||
case 'resize-top-right': {
|
||||
if (angle === 0) {
|
||||
if (elem.w + moveX > 0) {
|
||||
if (w + moveX > 0) {
|
||||
w += moveX;
|
||||
}
|
||||
if (h - moveY > 0) {
|
||||
y += moveY;
|
||||
h -= moveY;
|
||||
}
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
// TODO
|
||||
}
|
||||
} else if (angle > 0 || angle < 0) {
|
||||
let centerX = elemCenter.x;
|
||||
let centerY = elemCenter.y;
|
||||
if (angle < 90) {
|
||||
{
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
const radian = parseRadian(angle);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveHorizontalY);
|
||||
const radian = parseRadian(angle);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.sin(radian);
|
||||
}
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
|
||||
const radian = parseRadian(angle);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.sin(radian);
|
||||
} else if (angle < 180) {
|
||||
{
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
const radian = parseRadian(angle - 90);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.sin(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveY);
|
||||
const radian = parseRadian(angle - 90);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
|
||||
}
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
|
||||
const radian = parseRadian(angle - 90);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.sin(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
|
||||
} else if (angle < 270) {
|
||||
{
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
const radian = parseRadian(angle - 180);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.cos(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveY);
|
||||
const radian = parseRadian(angle - 180);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.sin(radian);
|
||||
moveHorizontalDist = 0 - moveHorizontalDist;
|
||||
}
|
||||
const radian = parseRadian(angle - 180);
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : 0 - moveHorizontalX);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.cos(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveHorizontalDist * Math.sin(radian);
|
||||
} else if (angle < 360) {
|
||||
{
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
const radian = parseRadian(angle - 270);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.sin(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveX);
|
||||
const radian = parseRadian(angle - 270);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveHorizontalDist * Math.cos(radian);
|
||||
}
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalX);
|
||||
const radian = parseRadian(angle - 270);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.sin(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveHorizontalDist * Math.cos(radian);
|
||||
}
|
||||
if (h + moveVerticalDist > 0) {
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
w = w + (moveVerticalDist / elem.h) * elem.w;
|
||||
}
|
||||
h = h + moveVerticalDist;
|
||||
}
|
||||
if (w + moveHorizontalDist > 0) {
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
h = h + (moveHorizontalDist / elem.w) * elem.h;
|
||||
}
|
||||
w = w + moveHorizontalDist;
|
||||
}
|
||||
x = centerX - w / 2;
|
||||
|
|
@ -638,84 +665,61 @@ export function resizeElement(
|
|||
x += moveX;
|
||||
w -= moveX;
|
||||
}
|
||||
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
// TODO
|
||||
}
|
||||
} else if (angle > 0 || angle < 0) {
|
||||
let centerX = elemCenter.x;
|
||||
let centerY = elemCenter.y;
|
||||
if (angle < 90) {
|
||||
{
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
const radian = parseRadian(angle);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.cos(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, moveHorizontalX);
|
||||
const radian = parseRadian(angle);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveHorizontalDist * Math.sin(radian);
|
||||
}
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
|
||||
const radian = parseRadian(angle);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.cos(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveHorizontalDist * Math.sin(radian);
|
||||
} else if (angle < 180) {
|
||||
{
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
const radian = parseRadian(angle - 90);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.sin(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveHorizontalX);
|
||||
const radian = parseRadian(angle - 90);
|
||||
const centerMoveDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveDist * Math.cos(radian);
|
||||
}
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalX);
|
||||
const radian = parseRadian(angle - 90);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.sin(radian);
|
||||
|
||||
const centerMoveDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveDist * Math.cos(radian);
|
||||
} else if (angle < 270) {
|
||||
{
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
const radian = parseRadian(angle - 180);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveHorizontalY);
|
||||
const radian = parseRadian(angle - 180);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.sin(radian);
|
||||
}
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
|
||||
const radian = parseRadian(angle - 180);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.sin(radian);
|
||||
} else if (angle < 360) {
|
||||
{
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
const radian = parseRadian(angle - 270);
|
||||
const centerMoveDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveDist * Math.sin(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveHorizontalY);
|
||||
const radian = parseRadian(angle - 270);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
|
||||
}
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
|
||||
const radian = parseRadian(angle - 270);
|
||||
const centerMoveDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveDist * Math.sin(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
|
||||
}
|
||||
if (h + moveVerticalDist > 0) {
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
// TODO
|
||||
}
|
||||
h = h + moveVerticalDist;
|
||||
}
|
||||
if (w + moveHorizontalDist > 0) {
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
// TODO
|
||||
}
|
||||
w = w + moveHorizontalDist;
|
||||
}
|
||||
x = centerX - w / 2;
|
||||
|
|
@ -731,84 +735,62 @@ export function resizeElement(
|
|||
if (elem.w + moveX > 0) {
|
||||
w += moveX;
|
||||
}
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
// TODO
|
||||
}
|
||||
} else if (angle > 0 || angle < 0) {
|
||||
let centerX = elemCenter.x;
|
||||
let centerY = elemCenter.y;
|
||||
if (angle < 90) {
|
||||
{
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
const radian = parseRadian(angle);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.cos(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveHorizontalY);
|
||||
const radian = parseRadian(angle);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.sin(radian);
|
||||
}
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
|
||||
const radian = parseRadian(angle);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveVerticalDist * Math.cos(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.sin(radian);
|
||||
} else if (angle < 180) {
|
||||
{
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
const radian = parseRadian(angle - 90);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.sin(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveY);
|
||||
const radian = parseRadian(angle - 90);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
|
||||
}
|
||||
moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveY);
|
||||
const radian = parseRadian(angle - 90);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX - centerMoveVerticalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.sin(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
|
||||
} else if (angle < 270) {
|
||||
{
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
const radian = parseRadian(angle - 180);
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveY);
|
||||
const radian = parseRadian(angle - 180);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveHorizontalDist * Math.sin(radian);
|
||||
moveHorizontalDist = 0 - moveHorizontalDist;
|
||||
}
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : 0 - moveHorizontalY);
|
||||
const radian = parseRadian(angle - 180);
|
||||
|
||||
const centerMoveVerticalDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX - centerMoveHorizontalDist * Math.cos(radian);
|
||||
centerY = centerY - centerMoveHorizontalDist * Math.sin(radian);
|
||||
} else if (angle < 360) {
|
||||
{
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
const radian = parseRadian(angle - 270);
|
||||
const centerMoveDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveDist * Math.sin(radian);
|
||||
}
|
||||
{
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveX);
|
||||
const radian = parseRadian(angle - 270);
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveHorizontalDist * Math.cos(radian);
|
||||
}
|
||||
moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalX);
|
||||
moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalX);
|
||||
const radian = parseRadian(angle - 270);
|
||||
|
||||
const centerMoveDist = moveVerticalDist / 2;
|
||||
centerX = centerX + centerMoveDist * Math.cos(radian);
|
||||
centerY = centerY + centerMoveDist * Math.sin(radian);
|
||||
|
||||
const centerMoveHorizontalDist = moveHorizontalDist / 2;
|
||||
centerX = centerX + centerMoveHorizontalDist * Math.sin(radian);
|
||||
centerY = centerY - centerMoveHorizontalDist * Math.cos(radian);
|
||||
}
|
||||
if (h + moveVerticalDist > 0) {
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
// TODO
|
||||
}
|
||||
h = h + moveVerticalDist;
|
||||
}
|
||||
if (w + moveHorizontalDist > 0) {
|
||||
if (elem.operations?.limitRatio === true) {
|
||||
// TODO
|
||||
}
|
||||
w = w + moveHorizontalDist;
|
||||
}
|
||||
|
||||
|
|
@ -824,13 +806,13 @@ export function resizeElement(
|
|||
|
||||
// // TODO mock data
|
||||
// const sharer = opts.sharer;
|
||||
// sharer.setSharedStorage('TODO_elemCenter', elemCenter);
|
||||
// sharer.setSharedStorage('TODO_startVertical', startVertical);
|
||||
// sharer.setSharedStorage('TODO_endVertical', endVertical);
|
||||
// sharer.setSharedStorage('TODO_startHorizontal', startHorizontal);
|
||||
// sharer.setSharedStorage('TODO_endHorizontal', endHorizontal);
|
||||
// sharer.setSharedStorage('TODO_start0', startHorizontal);
|
||||
// sharer.setSharedStorage('TODO_end0', end);
|
||||
// sharer.setSharedStorage(keyDebugElemCenter, elemCenter);
|
||||
// sharer.setSharedStorage(keyDebugStartVertical, startVertical);
|
||||
// sharer.setSharedStorage(keyDebugEndVertical, endVertical);
|
||||
// sharer.setSharedStorage(keyDebugStartHorizontal, startHorizontal);
|
||||
// sharer.setSharedStorage(keyDebugEndHorizontal, endHorizontal);
|
||||
// sharer.setSharedStorage(keyDebugStartHorizontal, startHorizontal);
|
||||
// sharer.setSharedStorage(keyDebugEnd0, end);
|
||||
|
||||
return { x, y, w, h, angle: elem.angle };
|
||||
}
|
||||
|
|
@ -897,12 +879,15 @@ export function calcSelectedElementsArea(
|
|||
const { calculator, viewScaleInfo, viewSizeInfo } = opts;
|
||||
let prevElemSize: ElementSize | null = null;
|
||||
|
||||
elements.forEach((elem) => {
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
const elem = elements[i];
|
||||
if (elem?.operations?.invisible) {
|
||||
continue;
|
||||
}
|
||||
const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
|
||||
|
||||
if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
|
||||
const ves = rotateElementVertexes(elemSize);
|
||||
|
||||
if (ves.length === 4) {
|
||||
const xList = [ves[0].x, ves[1].x, ves[2].x, ves[3].x];
|
||||
const yList = [ves[0].y, ves[1].y, ves[2].y, ves[3].y];
|
||||
|
|
@ -930,7 +915,7 @@ export function calcSelectedElementsArea(
|
|||
area.h = elemSize.h;
|
||||
}
|
||||
prevElemSize = elemSize;
|
||||
});
|
||||
}
|
||||
return area;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue