* 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!
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.
* 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>
* 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>
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!
If you have two elements selected that have a different value (eg: a green line and a red line), the value of the color picker should be undefined, not the default value.
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.
This updates the way fonts are handled to not have to download the font from the internet.
If you do `./public/font.ttf` in the .scss file, unfortunately the bundle packages them somewhere that's different from the public folder that is used by the index.html to preload them.
The fix I used is to use absolute path `/font.ttf` so that both work. Unfortunately, this means that the website will only work if at the root of the domain. That's the case so far so it's okay but still annoying if we want to embed it somewhere.
Problem:
- Select arrow
- Mouse down somewhere
- Mouse move somewhere to create an arrow
- Press escape
- Now you're in a weird situation where the shape is now "selection" but you're still dragging the arrow. If you mouse up, the arrow disappears
In order to solve this problem, we can avoid making escape do anything if you're currently dragging an element
Sorry my OCD is kicking in... It's super weird that the base of the lock moves when we check / unckeck it. Instead, just the semi-circle shape should move (what this PR implements).
It turns out the only thing we need to save in the appState is the background color. All the rest is transient data.
I added `"type": "excalidraw"` at the beginning to explain where it was.
I removed `"source": "http://localhost:3000/"`. I don't think we want to leak on which webpage it was saved from.
I removed `isSelected` from the json
I added indentation so it's easier to read the content. I'm not 100% sure on this one, but I figure filesize doesn't matter too much those days. And if we want to shrink it, there are more effective ways than json.
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>
