smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rotation support (#1099)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

5
src/tests/__snapshots__/dragCreate.test.tsx.snap
View file

@ -4,6 +4,7 @@ exports[`add element to the scene when pointer dragging long enough arrow 1`] =
exports[`add element to the scene when pointer dragging long enough arrow 2`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -38,6 +39,7 @@ exports[`add element to the scene when pointer dragging long enough diamond 1`]
exports[`add element to the scene when pointer dragging long enough diamond 2`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -61,6 +63,7 @@ exports[`add element to the scene when pointer dragging long enough ellipse 1`]
exports[`add element to the scene when pointer dragging long enough ellipse 2`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -82,6 +85,7 @@ Object {
exports[`add element to the scene when pointer dragging long enough line 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -116,6 +120,7 @@ exports[`add element to the scene when pointer dragging long enough rectangle 1`
exports[`add element to the scene when pointer dragging long enough rectangle 2`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,

3
src/tests/__snapshots__/move.test.tsx.snap
View file

@ -2,6 +2,7 @@
exports[`duplicate element on move when ALT is clicked rectangle 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -23,6 +24,7 @@ Object {
exports[`duplicate element on move when ALT is clicked rectangle 2`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -44,6 +46,7 @@ Object {
exports[`move element rectangle 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,

2
src/tests/__snapshots__/multiPointCreate.test.tsx.snap
View file

@ -2,6 +2,7 @@
exports[`multi point mode in linear elements arrow 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 110,
@ -41,6 +42,7 @@ Object {
exports[`multi point mode in linear elements line 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 110,

317
src/tests/__snapshots__/regressionTests.test.tsx.snap
View file

File diff suppressed because it is too large Load diff

2
src/tests/__snapshots__/resize.test.tsx.snap
View file

@ -2,6 +2,7 @@
exports[`resize element rectangle 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -23,6 +24,7 @@ Object {
exports[`resize element with aspect ratio when SHIFT is clicked rectangle 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,

5
src/tests/__snapshots__/selection.test.tsx.snap
View file

@ -2,6 +2,7 @@
exports[`select single element on the scene arrow 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -34,6 +35,7 @@ Object {
exports[`select single element on the scene arrow escape 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -66,6 +68,7 @@ Object {
exports[`select single element on the scene diamond 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -87,6 +90,7 @@ Object {
exports[`select single element on the scene ellipse 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,
@ -108,6 +112,7 @@ Object {
exports[`select single element on the scene rectangle 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"fillStyle": "hachure",
"height": 50,