221 Commits

Author SHA1 Message Date
Christopher Chedeau
5256096d76
Fast & Furious (#655)
* [WIP] Fast & Furious

* ensure we translate before scaling

* implement canvas caching for rest of elements

* remove unnecessary ts-ignore

* fix for devicePixelRatio

* initialize missing element props on restore

* factor out canvas padding

* remove unnecessary filtering

* simplify renderElement

* regenerate canvas on prop changes

* revert swapping shape resetting with canvas

* fix blurry rendering

* apply devicePixelRatio when clearing canvas

* improve blurriness; fix arrow canvas offset

* revert canvas clearing changes in anticipation of merge

* normalize scrollX/Y on update

* fix getDerivedStateFromProps

* swap derivedState for type brands

* tweak types

* remove renderScene offsets

* move selection element translations to renderElement

* dry out canvas zoom transformations

* fix padding offset

* Render cached canvas based on the zoom level

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: Preet <833927+pshihn@users.noreply.github.com>
2020-02-19 17:25:01 +01:00
Enzo Ferey
6ebd41734f
Resize handler detection should not be active when moving multip… (#767)
* Fix bug.

* Implement `getSelectedElements`.

* Explicit condition.

* Respect variable naming.

* Keep state consistent.

* Use `isSomeElementSelected` abstraction.

* Missing ones.
2020-02-16 22:54:50 +01:00
Timur Khazamov
ad72946131
Shortcuts to zoom in/out and to reset zoom (#770)
* Shortcuts to zoom in/out and to reset zoom

* add support for numerical keys

* Fixed Firefox compatibility

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-02-16 17:00:45 +01:00
David Luzar
2d22ffda49
fix wheel zoom step (#771) 2020-02-16 16:23:56 +01:00
Timur Khazamov
eee961d65f
Use meta key + wheel to zoom in/out (#769) 2020-02-16 14:38:53 +01:00
Enzo Ferey
c7ff4c2ed6
Canvas zooming (#716)
* Zoom icons.

* Actions.

* Min zoom of 0 does not make sense.

* Zoom logic.

* Modify how zoom affects selection rendering.

* More precise scrollbar dimensions.

* Adjust elements visibility and scrollbars.

* Normalized canvas width and height.

* Apply zoom to resize test.

* [WIP] Zoom using canvas center as an origin.

* Undo zoom on `getScrollBars`.

* WIP: center zoom origin via scroll

* This was wrong for sure.

* Finish scaling using center as origin.

* Almost there.

* Scroll offset should be not part of zoom transforms.

* Better naming.

* Wheel movement should be the same no matter the zoom level.

* Panning movement should be the same no matter the zoom level.

* Fix elements pasting.

* Fix text WYSIWGT.

* Fix scrollbars and visibility.
2020-02-15 21:03:32 +01:00
Gasim Gasimzada
7183234895
Write integration tests (#719)
* Scaffold a simple test case for debugging

* Set up Jest environment that works with React

- Install and set up react-testing-library
- "Unignore" roughjs and browser-nativejs transformations
- Separate App component from ReactDOM

* Write first passing test

- Mock canvas
- Remove App file and mount/unmount ReactDOM on import

* Add tests for drag create behavior

* Fix comments in dragCreate

* Pin jest-mock-canvas dependency

* Remove dependency range for testing library

* Add tests for multi point mode and selection element

* Fix all tests due to decrease in updates to canvas when changing tools

* Disable state updates if component is unmounted

- Remove all event listeners
- Disable storing scene in state if component is unmounted

* Add tests for move and element selection

* Merge branch 'master' into add-integration-tests

* Add tests for resizing rectangle

* move unmounted check to syncActionResult method

* Use a custom test renderer instead of default testing-library functions

* Add custom query for selecting tools

* move files around

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-02-11 23:19:43 +01:00
lissitz
fa12125db0
fix some element types reset to selection when the lock is active (#746)
* keep arrows and lines selected if locked

* keep element type selected if locked after inserting text

* ensure clicking outside doesn't create new text

* esc should switch to selection even if locked

* reset cursor when creating text via doubleClick

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-02-10 15:09:50 +01:00
wboucher
471ea4a747
Add zindex to panel (#736)
* Add z-index options back to panel

* Add formatting for z-index panel buttons

* make z-index buttons all the same width

* make z-index button spacing even

* use svg icons & translations

* add ui legend

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-02-09 15:07:34 +01:00
Christopher Chedeau
c2a3b67ccc
Fix scrollbar (#735)
The computation was not correct. I'm not really sure how it used to work but it was not taking into account the dimensions of the scene so it was wrong.

The new algorithm is computing the scrollbar such that it's the position of the viewport in relationship to the bounding box of the viewport and all the elements.

Fixes #680
2020-02-08 16:20:14 -08:00
Christopher Chedeau
935a7f58a7
Remove previously loaded scenes (#734)
As mentioned in #724, the current implementation is suboptimal. Let's remove it until we come back with a better design.

Fixes #724
2020-02-08 15:05:38 -08:00
David Luzar
d79293de06
move footer into layerUI & refactor ActionManager (#729) 2020-02-07 23:46:19 +01:00
David Luzar
88eacc9da7
Improve pasting (#723)
* switch to selection tool on paste

* align pasting via contextMenu with pasting from event

* ensure only plaintext can be pasted

* fix findShapeByKey regression

* simplify wysiwyg pasting

* improve wysiwyg blurriness
2020-02-07 18:42:24 +01:00
BM
a7dc067dfe
Fix language selection (#726) 2020-02-07 10:43:30 +00:00
Gasim Gasimzada
33016bf6bf
Fix issues related to history (#701)
* Separate UI from Canvas

* Explicitly define history recording

* ActionManager: Set syncActionState during construction instead of in every call

* Add commit to history flag to necessary actions

* Disable undoing during multiElement

* Write custom equality function for UI component to render it only when specific props and elements change

* Remove stale comments about history skipping

* Stop undo/redoing when in resizing element mode

* wip

* correctly reset resizingElement & add undo check

* Separate selection element from the rest of the array and stop redrawing the UI when dragging the selection

* Remove selectionElement from local storage

* Remove unnecessary readonly type casting in actionFinalize

* Fix undo / redo for multi points

* Fix an issue that did not update history when elements were locked

* Disable committing to history for noops

- deleteSelected without deleting anything
- Basic selection

* Use generateEntry only inside history and pass elements and appstate to history

* Update component after every history resume

* Remove last item from the history only if in multi mode

* Resume recording when element type is not selection

* ensure we prevent hotkeys only on writable elements

* Remove selection clearing from history

* Remove one point arrows as they are invisibly small

* Remove shape of elements from local storage

* Fix removing invisible element from the array

* add missing history resuming cases & simplify slice

* fix lint

* don't regenerate elements if no elements deselected

* regenerate elements array on selection

* reset state.selectionElement unconditionally

* Use getter instead of passing appState and scene data through functions to actions

* fix import

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-02-05 19:47:10 +01:00
David Luzar
972d69da6c
fix hotkeys not working when non-writable input focused (#717) 2020-02-05 19:07:53 +01:00
David Luzar
82eb97462b
fix restoring from localStorage (#715) 2020-02-05 17:57:08 +01:00
Christopher Chedeau
2dd1796351
Add encryption (#642)
* Add encryption

In order to avoid the server being able to read the content of the scene, this PR implements local encryption and decryption. This implements the algorithm described in #610.

Right now the server doesn't support uploading binary files. I mocked the server with comments. @lipis, could you add support on the server and update this PR? I added a bunch of TODO: that tell you where to comment/uncomment in order to get the server flow going.

To test locally right now:
- Import: Open http://localhost:3000/#json=1234,5oYVOnGpWYPPTz19-PMYYw and see a square
- Export: Click the export link and see the right url with the private key + the encrypted binary in the console

Fixes #610

* backend_v2

* v2
2020-02-05 07:35:51 -08:00
Gasim Gasimzada
08d80fb4fe
Add points to multi arrows in real time (#697)
* Add points to multi arrows in real time

* Fix linter issues

* Clear unecessary values from local storage
2020-02-04 14:39:08 +01:00
David Luzar
954d805cb3
rewrite clipboard handling (#689) 2020-02-04 11:50:18 +01:00
Gasim Gasimzada
dab35c9033
Multi Point Lines (based on Multi Point Arrows) (#660)
* Enable multi points in lines

* Stop retrieving arrow points for lines

* Migrate lines to new spec during load

* Clean up and refactor some code

- Normalize shape dimensions during load
- Rename getArrowAbsoluteBounds

* Fix linter issues
2020-02-04 13:45:22 +04:00
Gasim Gasimzada
f70bd0081c
Feature: Hint viewer (#666)
* Add Hint viewer

- Add hints for arrows and lines
- Add hints for resizing elements

* Swap priority of multi mode and resize mode in Hint Viewer

* Remove dangling locales from public

* Add shortcut to hide hints

* Change hint texts and show resize hint ONLY during resizing

* Remove hints toggling
2020-02-03 09:52:21 -08:00
lissitz
92a0f100b8
Drag and drop JSON exports to canvas loads the scene (#676)
* Drag and drop JSON exports to canvas loads the scene

* remove unneeded onDragOver
2020-02-02 21:02:13 +00:00
Lipis
53994e71e5
Add more ESLint rules and change the formatting scripts (#626)
* Add curly rule in ESLint for consistency

* Fix rules

* More rules

* REturn

* Push

* no else return

* prefer const

* destructing
2020-02-02 18:04:35 +00:00
Christopher Chedeau
f8a41cee16
Add keybindings for shapes (#648)
* Add keybindings for shapes

I'm not 100% sure about this one. I feel like it's going to help people be a lot more productive to display the key bindings at all time. But it also clutters the UI...

* increase font-size

* fix shape keybindings for non-qwerty keyboards

* tweak position and color

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-02-01 18:31:28 +01:00
Christopher Chedeau
be97bd980e
Add button when scrolled outside of visible area (#643)
With the infinite scroll behavior, it's easy to scroll super far away from where the content is and have a hard time getting back. This PR adds a button to refocus on the center of the scene when no elements are visible anymore.
2020-02-01 17:52:10 +01:00
Faustino Kialungila
7c9e6dd3f1
support undo/redo for azerty keyboards (#630)
* support undo/redo for azerty keyboards

* migrate to event.key

* remove unnecessary shiftKey check

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-02-01 17:37:22 +01:00
Gasim Gasimzada
1e4ce77612
Reintroduce multi-point arrows and add migration for it (#635)
* Revert "Revert "Feature: Multi Point Arrows (#338)" (#634)"

This reverts commit 3d2e59bfed4fa41a0cae49ee567a6f95ca26e7bf.

* Convert old arrow spec to new one

* Remove unnecessary failchecks and fix context transform issue in retina displays

* Remove old points failcheck from getArrowAbsoluteBounds

* Remove all failchecks for old arrow

* remove the rest of unnecessary checks

* Set default values for the arrow during import

* Add translations

* fix restore using unmigrated elements for state computation

* don't use width/height when migrating from new arrow spec

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>
2020-02-01 15:49:18 +04:00
Christopher Chedeau
47f6328ae1
Fix ability to use arrow keys to navigate between shapes (#646)
This is the only way to navigate using the keyboard and was prevented by #596. Now it works fine.

Test Plan:
- Click on selection icon
- Use left/right arrow keys to move between tool icons, that works.

- Click on a shape, cmd+c
- Click on the selection icon
- Cmd+v, it pastes correctly
2020-02-01 02:58:16 +00:00
Christopher Chedeau
29f1465b81
Fix wrong cursor for selection keyboard shortcut (#645)
Pressing 1 would change the cursor to a + instead of normal cursor
2020-02-01 02:57:44 +00:00
Christopher Chedeau
e4919e2e6c
Replace i18n by a custom implementation (#638)
There are two problems with the current localization strategy:
- We download the translations on-demand, which means that it does a serial roundtrip for nothing.
- withTranslation helper actually renders the app 3 times on startup, instead of once (I haven't tried to debug it)
2020-01-31 21:06:06 +00:00
Christopher Chedeau
637276301a
Different call of resumeRecording() (#636)
Instead of finding all the places where we want to resume recording, we should do it after every componentDidUpdate(). The idea is that we just want to disable the history for certain setState, for which we call directly before skipHistory.
2020-01-31 21:09:42 +01:00
David Luzar
3d2e59bfed
Revert "Feature: Multi Point Arrows (#338)" (#634)
This reverts commit 16263e942b7b690bb3e97340383009016129d489.
2020-01-31 18:56:55 +01:00
Gasim Gasimzada
16263e942b
Feature: Multi Point Arrows (#338)
* Add points to arrow on double click

* Use line generator instead of path to generate line segments

* Switch color of the circle when it is on an existing point in the segment

* Check point against both ends of the line segment to find collinearity

* Keep drawing the arrow based on mouse position until shape is changed

* Always select the arrow when in multi element mode

* Use curves instead of lines when drawing arrow points

* Add basic collision detection with some debug points

* Use roughjs shape when performing hit testing

* Draw proper handler rectangles for arrows

* Add argument to renderScene in export

* Globally resize all points on the arrow when bounds are resized

* Hide handler rectangles if an arrow has no size

- Allow continuing adding arrows when selected element is deleted

* Add dragging functionality to arrows

* Add SHIFT functionality to two point arrows

- Fix arrow positions when scrolling
- Revert the element back to selection when not in multi select mode

* Clean app state for export (JSON)

* Set curve options manually instead of using global options

- For some reason, this fixed the flickering issue in all shapes when arrows are rendered

* Set proper options for the arrow

* Increaase accuracy of hit testing arrows

- Additionally, skip testing if point is outside the domain of arrow and each curve

* Calculate bounding box of arrow based on roughjs curves

- Remove domain check per curve

* Change bounding box threshold to 10 and remove unnecessary code

* Fix handler rectangles for 2 and multi point arrows

- Fix margins of handler rectangles when using arrows
- Show handler rectangles in endpoints of 2-point arrows

* Remove unnecessary values from app state for export

* Use `resetTransform` instead of "retranslating" canvas space after each element rendering

* Allow resizing 2-point arrows

- Fix position of one of the handler rectangles

* refactor variable initialization

* Refactored to extract out mult-point generation to the abstracted function

* prevent dragging on arrow creation if under threshold

* Finalize selection during multi element mode when ENTER or ESC is clicked

* Set dragging element to null when finalizing

* Remove pathSegmentCircle from code

* Check if element is any "non-value" instead of NULL

* Show two points on any two point arrow and fix visibility of arrows during scroll

* Resume recording when done with drawing

- When deleting a multi select element, revert back to selection element type

* Resize arrow starting points perfectly

* Fix direction of arrow resize based for NW

* Resume recording history when there is more than one arrow

* Set dragging element to NULL when element is not locked

* Blur active element when finalizing

* Disable undo/redo for multielement, editingelement, and resizing element

- Allow undoing parts of the arrow

* Disable element visibility for arrow

* Use points array for arrow bounds when bezier curve shape is not available

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: Preet <833927+pshihn@users.noreply.github.com>
2020-01-31 18:16:33 +01:00
David Luzar
6886dfdea7
ensure we reset draggingElement when tool locked (#627) 2020-01-30 22:14:40 +01:00
Guillermo Peralta Scura
35750d8d09
Panning with space key (#579)
* Panning with space key

* prevent panning when selecting/dragging & add more checks

* Fix changing current tool via shortcut while panning

* Fix order of statements

* teardown on blur event

* Refactor cursor setting

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-01-30 17:08:59 -03:00
Robinson Marquez
4ad38e317e
485: Ability to switch to previously loaded ids in UI (#583) 2020-01-30 21:39:37 +02:00
David Luzar
bd1c00014b
fix not resuming recording (#614) 2020-01-30 15:39:17 +01:00
Preet
97b11b0f53
SVG export (#598)
* first draft of export to SVG. WIP

* enabled text rendeing - which is not quite right atm

* placeholder svg icon

* size the canvas based on the bounding box of elements

* Do not add opacity attributes if default

* render background rect

* Ensure arrows are in the same SVG group

* parse font-size from font

* export web fonts

* use fixed locations for fonts

* Rename export functions

* renamed export file

* oops broke the icon.
2020-01-28 12:25:13 -08:00
lissitz
845484aecc Fix: refreshing the page while selecting saves the selection ele… (#601)
* Fix: refreshing the page while selecting saves the selection element

Fixes #591.

* fix lint

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-01-28 16:44:34 +01:00
David Luzar
26048ee469
improve clipboard handling (#596)
* improve clipboard handling

* fix regression of not defocusing tool icons
2020-01-27 22:14:35 +01:00
David Luzar
187cfbe2d8
temp hack fix for state updates (#593)
* temp hack fix state updates

* switch setTimeout for state mutation
2020-01-27 19:24:11 +01:00
Guillermo Peralta Scura
67eca2bda1
Add landmarks (#564)
Use HTML semantic elements to set the landmarks of the page.

This is helpful for assistive technologies to determine the different regions of content. In our case it's useful for jumping between the different islands that we use to group the form controls.
2020-01-26 17:14:31 -03:00
Lipis
81d169e90c Add tool tip for shape lock (#551)
* Add tool tip for shape lock

* tweak label & fix master rebase

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-01-26 21:00:00 +01:00
David Luzar
7b842fc330 simplify distance helper and factor out common bounds helper (#581)
* simplify distance helper

* factor out common bounds helper
2020-01-26 19:15:08 +00:00
Christopher Chedeau
8ab176b9a5
Disable UI rendering when history is skipped (#574)
When we are scrolling, resizing, or moving elements, we already disable the history. Since those actions do not change the state of the UI, we can also avoid re-drawing it and save ~10ms per frame.

I had to change all the forceUpdate() to setState({}), otherwise it would bypass shouldComponentUpdate.
2020-01-26 19:08:46 +00:00
Christopher Chedeau
263fef4eaa
Add a gap between shapes and lock (#569)
* Add a gap between shapes and lock

The lock is a different type as the rest of the shapes, so we should visually separate it.

* redesign lock icon

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-01-26 19:01:56 +00:00
Christopher Chedeau
141b7409a2 Only show correct settings (#565)
* Only show correct settings

The logic to display which settings when nothing was selected was incorrect. This PR ensures that they are in sync.

I also removed all the <hr /> which after the redesigned just looked like weird empty spaces

* fix handling editing/text elements

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-01-26 15:19:43 +01:00
Christopher Chedeau
2a87c7381b Set selection when unlocking (#567)
A common workflow I have is to enable the lock, draw a bunch of things, unlock to be able to select stuff. However, after I unlock, the last shape is still enabled, so I end up drawing yet another of the same shape :(

This PR resets to selection instead!
2020-01-26 14:24:50 +01:00
Christopher Chedeau
e1ed40be65 Fix exported size when drawing to the left (#575)
If you scroll and draw to the left of the origin, when you export the scene, there's a weird whitespace on the right. This is because we do the min() computation starting at 0 and not -Infinity

This also fixes pasted elements and scrollbars.
2020-01-26 12:28:15 +01:00