* Don't reset cache while zooming using a gesture
This reuses the cached canvas while the gesture is happening. Once it has stop updating, then recompute the cache with the proper zoom.
This should massively improve performance when panning on big scenes on mobile
Fixes#1056
* update snapshot tests
* [WIP] Add names next to pointers
This implements the rendering and messaging across. Still need to do the UI to set the name.
Also, not really sure what's the best place to send the name and store it.
* Add randomized names
Co-authored-by: Christopher Chedeau <vjeux@fb.com>
My original hack to put the scale when we create the canvas element doesn't make much sense. It should be done when we are rendering the scene. I moved it there in this PR.
The rest was all about forwarding the scale to where it's needed.
* Stop using getTransform
Fixes#861
The original motivation behind this is to make it work with Firefox. But it also helped make the code more intentional.
Test Plan:
- Create one square, select it, zoom in repeatedly, make sure that it zooms centered in the screen and everything looks good
- Scroll at various zoom levels, things look good
- Export a small scene at 1x and 3x, make sure the background is properly set and look good
* fix selection element
I'm using the client id as a random number to index on the color array. So far it's been working better than using a sequential increment as the colors in the array are sorted by proximity. Also, it has the advantage that everyone in the room will see the same color for the same person.
* Enable collaborative syncing for elements
* Don't fall back to local storage if using a room, as that is confusing
* Use remote socket server
* Send updates to new users when they join
* ~
* add mouse tracking
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* Add Live button and app state to support tracking collaborator counts
* Enable collaborative syncing for elements
* add mouse tracking
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* fix syncing bugs and add a button to start syncing mid session
* Add Live button and app state to support tracking collaborator counts
* prettier
* Fix bug with remote pointers not changing on scroll
* Enable collaborative syncing for elements
* add mouse tracking
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* Add Live button and app state to support tracking collaborator counts
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* fix syncing bugs and add a button to start syncing mid session
* Fix bug with remote pointers not changing on scroll
* remove UI for collaboration
* remove link
* clean up lingering unused UI
* set random IV passed per encrypted message, reduce room id length, refactored socket broadcasting API, rename room_id to room, removed throttling of pointer movement
* fix package.json conflict
* Get rid of isSelected, canvas, canvasZoom, canvasOffsetX and canvasOffsetY on ExcalidrawElement.
* Fix most unit tests. Fix cmd a. Fix alt drag
* Focus on paste
* shift select should include previously selected items
* Fix last test
* Move this.shape out of ExcalidrawElement and into a WeakMap
* fix scrollbar detection on high devicePixelRatio devices
* don't create a new element on pointerdown over a scrollbar
* Return scrollbars from renderScene and use it in isOverScrollBars
* remove unneeded setState
* show default cursor when hovering or dragging a scrollbar
* disable scrollbars when in multielement mode
Co-authored-by: David Luzar <luzar.david@gmail.com>
* Zoom icons.
* Actions.
* Min zoom of 0 does not make sense.
* Zoom logic.
* Modify how zoom affects selection rendering.
* More precise scrollbar dimensions.
* Adjust elements visibility and scrollbars.
* Normalized canvas width and height.
* Apply zoom to resize test.
* [WIP] Zoom using canvas center as an origin.
* Undo zoom on `getScrollBars`.
* WIP: center zoom origin via scroll
* This was wrong for sure.
* Finish scaling using center as origin.
* Almost there.
* Scroll offset should be not part of zoom transforms.
* Better naming.
* Wheel movement should be the same no matter the zoom level.
* Panning movement should be the same no matter the zoom level.
* Fix elements pasting.
* Fix text WYSIWGT.
* Fix scrollbars and visibility.
* Separate UI from Canvas
* Explicitly define history recording
* ActionManager: Set syncActionState during construction instead of in every call
* Add commit to history flag to necessary actions
* Disable undoing during multiElement
* Write custom equality function for UI component to render it only when specific props and elements change
* Remove stale comments about history skipping
* Stop undo/redoing when in resizing element mode
* wip
* correctly reset resizingElement & add undo check
* Separate selection element from the rest of the array and stop redrawing the UI when dragging the selection
* Remove selectionElement from local storage
* Remove unnecessary readonly type casting in actionFinalize
* Fix undo / redo for multi points
* Fix an issue that did not update history when elements were locked
* Disable committing to history for noops
- deleteSelected without deleting anything
- Basic selection
* Use generateEntry only inside history and pass elements and appstate to history
* Update component after every history resume
* Remove last item from the history only if in multi mode
* Resume recording when element type is not selection
* ensure we prevent hotkeys only on writable elements
* Remove selection clearing from history
* Remove one point arrows as they are invisibly small
* Remove shape of elements from local storage
* Fix removing invisible element from the array
* add missing history resuming cases & simplify slice
* fix lint
* don't regenerate elements if no elements deselected
* regenerate elements array on selection
* reset state.selectionElement unconditionally
* Use getter instead of passing appState and scene data through functions to actions
* fix import
Co-authored-by: David Luzar <luzar.david@gmail.com>
* Enable multi points in lines
* Stop retrieving arrow points for lines
* Migrate lines to new spec during load
* Clean up and refactor some code
- Normalize shape dimensions during load
- Rename getArrowAbsoluteBounds
* Fix linter issues
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>
* 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.
* Render only visible elements
* Fixed exporting as PNG
* Moved isVisibleElement to module scope
* rerun-ci
Co-authored-by: David Luzar <luzar.david@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
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)
* 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>
* Snap to element center
* Fixed typo
* Added comment
* Reduced threshold to 30
* Skip snapping if alt key is pressed
* Fixed creating text with shape tool
* 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
