Improve the accessibility of our modals (the color picker and the export dialog)
Implement a focus trap so that tapping through the controls inside them don't escape to outer elements, it also allows to close the modals with the "Escape" key.
Right now we're running useEffect block which runs getExportCanvasPreview on every state update, even if the modal is not visible (eg: when moving the mouse around!). This puts the modal code in its own component so that it doesn't trigger useEffect when not visible.
The code isn't very elegant as we're forwarding all the props, there's likely a better way to handle it (if anyone is interested, PR would be appreciated), but at least now it no longer double renders the scene.
Fixes#559
* Do not store cursor position in state
Storing it in state causes a full re-render. The only time we use the cursor position is for pasting. This halves the number of renders on drag.
* remove passive change
* Rename ToolIcon to ToolButton
It makes more semantic sense
* Label and keyboard shortcuts announcement
* Refactor common props for ToolButton
* Better doc outline and form controls
* Adjust color picker
* Styling fixes
Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>
* Add german translation
* Add german language option
* Fix missing german translation
* Alphabetical order for languages
* Sort
Co-authored-by: Lipis <lipiridis@gmail.com>
* add translations in data.ts
* add language list
add spanish version
* fixes pr review
* add more translations
* remove unused label
Co-authored-by: David Luzar <luzar.david@gmail.com>
* Render only visible elements
* Fixed exporting as PNG
* Moved isVisibleElement to module scope
* rerun-ci
Co-authored-by: David Luzar <luzar.david@gmail.com>
* update events for GH actions to include PRs
* fix: cursor on keyboard tool toggle
* fix: change cursor type to constant
* fix: swap condition
Co-authored-by: David Luzar <luzar.david@gmail.com>
* Introduce shape lock
* Format code with prettier
* Do not reset elementLocked on selection change
* Don't set isSelected to true if element is locked
* Don't reset the cursor
* Move reset cursor call to better spot
* Run prettier + lint
* ensure panel props are sync to editing elem
* ensure we don't create empty-text elements (fixes#468)
* remove dead code
Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>
* Render text actions panel on double click
* cleanup wysiwyg on click
* use `state.editingElement` instead of global to determine whether t ext panel is shown
* clarify comment
Co-authored-by: David Luzar <luzar.david@gmail.com>
