* 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>
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.
* support undo/redo for azerty keyboards
* migrate to event.key
* remove unnecessary shiftKey check
Co-authored-by: David Luzar <luzar.david@gmail.com>
* Add keybindings for color picker
This adds the ability to navigate using left/right/bottom/up keys and shows key bindings for all the different colors. This is only optimized for the qwerty keyboard layout, but unfortunately it's not possible to detect other keyboard layouts :(
* add aria-keyshortcuts and keybinding in title
* make focus select color, confirm on enter
Co-authored-by: David Luzar <luzar.david@gmail.com>
* Revert "Revert "Feature: Multi Point Arrows (#338)" (#634)"
This reverts commit 3d2e59bfed.
* 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>
Turns out the root cause was the outline. For some reason, doing "transparent" doesn't work but doing "1px solid transparent" does. Don't know why but I'll take it!
There's a bug where the carret doesn't show up when the text is first focused on Chrome with the previous combination of CSS. I tweaked it and now it seems to work (don't ask me why!).
Unfortunately on Safari, ever since we moved to contentEditable on #274, the carret disappeared the first time. I unsuccessfully tried to repro in a smaller codebase ( https://jsfiddle.net/u2mjs90y/1/ ) but it does work in Safari...
I'm not exactly sure what's going on, there are bunch of issues opened against this bug when googling against all the browsers...
We did some hackery to prevent copy pasting when we didn't support multilines. But we do now so we can remove it.
Interestingly, newlines are actually <br /> elements. So we need to tweak the isInputLike logic a bit
Thanks to this stack overflow answer ( https://stackoverflow.com/a/41678350/232122 ) I was able to fix the font preloading!
If we put fonts.css in the public/folder and include it with normal html, we can avoid going through the build pipeline!
By using position: fixed like the rest of the UI components, it will no longer make the body change size and have bad side effects like scrolling.
Fixes#365
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
The test that was added is not a good test. If we want to test things, we should be testing logic that is error prone such as all the mouse handling logic and state management. Adding a test for something trivial as displaying a list of data is just going to be annoying when we eventually change the UI and the test breaks.
Since this is the only test using enzyme, I also removed enzyme. We can add it back if we want to test a component using it.
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)
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.
* 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>
* 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>
* 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.
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.
Some PR made the settings UI show up even though nothing is selected. However, you couldn't actually change any of those settings except for the colors. This PR pipes through the rest of the properties so everything works now!
Faustino Kialungila