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:
Daishi Kato 2020-04-02 17:40:26 +09:00 committed by GitHub
parent 3e3ce18755
commit 65be7973be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 664 additions and 108 deletions

View file

@ -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` : "";