mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Rotation support (#1099)
* rotate rectanble with fixed angle * rotate dashed rectangle with fixed angle * fix rotate handler rect * fix canvas size with rotation * angle in element base * fix bug in calculating canvas size * trial only for rectangle * hitTest for rectangle rotation * properly resize rotated rectangle * fix canvas size calculation * giving up... workaround for now * **experimental** handler to rotate rectangle * remove rotation on copy for debugging * update snapshots * better rotation handler with atan2 * rotate when drawImage * add rotation handler * hitTest for any shapes * fix hitTest for curved lines * rotate text element * rotation locking * hint messaage for rotating * show proper handlers on mobile (a workaround, there should be a better way) * refactor hitTest * support exporting png * support exporting svg * fix rotating curved line * refactor drawElementFromCanvas with getElementAbsoluteCoords * fix export png and svg * adjust resize positions for lines (N, E, S, W) * do not make handlers big on mobile * Update src/locales/en.json Alright! Co-Authored-By: Lipis <lipiridis@gmail.com> * do not show rotation/resizing hints on mobile * proper calculation for N and W positions * simplify calculation * use "rotation" as property name for clarification (may increase bundle size) * update snapshots excluding rotation handle * refactor with adjustPositionWithRotation * refactor with adjustXYWithRotation * forgot to rename rotation * rename internal function * initialize element angle on restore * rotate wysiwyg editor * fix shift-rotate around 270deg * improve rotation locking * refactor adjustXYWithRotation * avoid rotation degree becomes >=360 * refactor with generateHandler Co-authored-by: Lipis <lipiridis@gmail.com> Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
parent
3e3ce18755
commit
65be7973be
23 changed files with 664 additions and 108 deletions
|
@ -6,6 +6,19 @@ import { isLinearElement } from "./typeChecks";
|
|||
|
||||
type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>;
|
||||
|
||||
function isInHandlerRect(
|
||||
handler: [number, number, number, number],
|
||||
x: number,
|
||||
y: number,
|
||||
) {
|
||||
return (
|
||||
x >= handler[0] &&
|
||||
x <= handler[0] + handler[2] &&
|
||||
y >= handler[1] &&
|
||||
y <= handler[1] + handler[3]
|
||||
);
|
||||
}
|
||||
|
||||
export function resizeTest(
|
||||
element: ExcalidrawElement,
|
||||
appState: AppState,
|
||||
|
@ -14,24 +27,31 @@ export function resizeTest(
|
|||
zoom: number,
|
||||
pointerType: PointerType,
|
||||
): HandlerRectanglesRet | false {
|
||||
if (!appState.selectedElementIds[element.id] || element.type === "text") {
|
||||
if (!appState.selectedElementIds[element.id]) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const handlers = handlerRectangles(element, zoom, pointerType);
|
||||
const { rotation: rotationHandler, ...handlers } = handlerRectangles(
|
||||
element,
|
||||
zoom,
|
||||
pointerType,
|
||||
);
|
||||
|
||||
if (rotationHandler && isInHandlerRect(rotationHandler, x, y)) {
|
||||
return "rotation" as HandlerRectanglesRet;
|
||||
}
|
||||
|
||||
if (element.type === "text") {
|
||||
// can't resize text elements
|
||||
return false;
|
||||
}
|
||||
|
||||
const filter = Object.keys(handlers).filter((key) => {
|
||||
const handler = handlers[key as HandlerRectanglesRet]!;
|
||||
const handler = handlers[key as Exclude<HandlerRectanglesRet, "rotation">]!;
|
||||
if (!handler) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
x >= handler[0] &&
|
||||
x <= handler[0] + handler[2] &&
|
||||
y >= handler[1] &&
|
||||
y <= handler[1] + handler[3]
|
||||
);
|
||||
return isInHandlerRect(handler, x, y);
|
||||
});
|
||||
|
||||
if (filter.length > 0) {
|
||||
|
@ -94,6 +114,9 @@ export function getCursorForResizingElement(resizingElement: {
|
|||
cursor = "nesw";
|
||||
}
|
||||
break;
|
||||
case "rotation":
|
||||
cursor = "ew";
|
||||
break;
|
||||
}
|
||||
|
||||
return cursor ? `${cursor}-resize` : "";
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue