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

@ -55,6 +55,33 @@ export function rotate(
];
}
export function adjustXYWithRotation(
side: "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se",
position: { x: number; y: number },
deltaX: number,
deltaY: number,
angle: number,
) {
let { x, y } = position;
if (side === "e" || side === "ne" || side === "se") {
x -= (deltaX / 2) * (1 - Math.cos(angle));
y -= (deltaX / 2) * -Math.sin(angle);
}
if (side === "s" || side === "sw" || side === "se") {
x -= (deltaY / 2) * Math.sin(angle);
y -= (deltaY / 2) * (1 - Math.cos(angle));
}
if (side === "w" || side === "nw" || side === "sw") {
x += (deltaX / 2) * (1 + Math.cos(angle));
y += (deltaX / 2) * Math.sin(angle);
}
if (side === "n" || side === "nw" || side === "ne") {
x += (deltaY / 2) * -Math.sin(angle);
y += (deltaY / 2) * (1 + Math.cos(angle));
}
return { x, y };
}
export const getPointOnAPath = (point: Point, path: Point[]) => {
const [px, py] = point;
const [start, ...other] = path;