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
* 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 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>
* 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>
* feat: add line shape
* fix: align line tool
* fix: hitbox bug sw to ne
* fix: add stroke width n sloppiness for line
* fix: center line inside a panel box
* fix: use color as a unique key
* Redisign idea
* Code cleanup
* Fixed to right container
* Reoredered layout
* Reordering panels
* Export dialog
* Removed redunant code
* Fixed not removing temp canvas
* Fixed preview not using only selected elements
* Returned file name on export
* Toggle export selected/all elements
* Hide copy to clipboard button if no support of clipboard
* Added border to swatches
* Fixed modal flickering
Unfortunately, react-color has a bug where transparent color doesn't trigger onChange. I've been annoyed by the huge dependency anyway so decided to take the generated html (which is awesome) and reimplement a specific component for it.
I also made sure that we don't actually render anything when the background is transparent on rough (I looked at the generated path and made sure it didn't have the commands for the background)
- Move the context menu right next to the mouse so it's not so far away. But 1px out so that nothing is selected until you move your mouse
- Change the colors to be closer to the macos one. Unfortunately, macos has a 0.5px border that I'm not able to reproduce without some annoying hacks, 1px it'll be.
* Add Action System
- Add keyboard test
- Add context menu label
- Add PanelComponent
* Show context menu items based on actions
* Add render action feature
- Replace bringForward etc buttons with action manager render functions
* Move all property changes and canvas into actions
* Remove unnecessary functions and add forgotten force update when elements array change
* Extract export operations into actions
* Add elements and app state as arguments to `keyTest` function
* Add key priorities
- Sort actions by key priority when handling key presses
* Extract copy/paste styles
* Add Context Menu Item order
- Sort context menu items based on menu item order parameter
* Remove unnecessary functions from App component
* Make panels collapsible
- Add Panel component with collapse logic
- Use the component in all the necessary panel groups
* Remove unnecessary container from PanelCanvas
* Add "hide property" to Pane component to hide Panel contents using a prop
- Instead of doing conditional rendering, pass the condition to Panel as props
* Change collapse icon rotation for closed
- Use one icon and use CSS transforms to rotate it
* Remove unnecessary imports from PanelSelection
* Allow user to set file name
* Add EditableText component
Added editable text component and use component for project name edit.
* rebased branch
* Updated EditableText component
* Set default project name
* Move project name field away from the top section.
