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.
* 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>
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)
* 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>
* 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.
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.
* 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>
Previously the type used for the data URI when saving was text/plain.
On iPad, this caused the file to automatically have a .txt extension
added (so files ended up with names like "drawing-xyz.json.txt"). This
meant that the files couldn't be loaded by the tool, which expects only
files with a .json extension.
Now, the type used is application/json, which means that the files get
saved with the correct extension and can be successfully loaded on iPad.
* Add Native File System API saving/exporting
* Add Native File System API opening
* Add origin trial token placeholder
* Reuse an opened file handle for better saving experience
* Fix file handle reuse to only kick in for Excalidraw files
* Remove reference
* 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
* Regenerate roughjs shape only when the item is updated
* Remove shape object during export and history undo/redo
* Remove shape element during copying
* Fix shape generation during creation
* Make scene functions return array instead of mutate array
- Not all functions were changes; so the given argument was a new array to some
* Make data restoration functions immutable
- Make mutations in App component
* Make history actions immutable
* Fix an issue in change property that was causing elements to be removed
* mark elements params as readonly & remove unnecessary copying
* Make `clearSelection` return a new array
* Perform Id comparisons instead of reference comparisons in onDoubleClick
* Allow deselecting items with SHIFT key
- Refactor hit detection code
* Fix a bug in element selection and revert drag functionality
Co-authored-by: David Luzar <luzar.david@gmail.com>
* Add IDs to elements
- Move round rect function within the renderer
* Generate IDs using nanoid
* If element ID does not exist, add the ID during restoration
* Remove `generatedraw` from element object
- Create a function that renders a single element
- Refactor rendering selected elements
* Replace getElementAbsoluteXY with getElementAbsoluteCoords
