86 Commits

Author SHA1 Message Date
Lipis
26fd2fe165
Better name for app state (#1300)
* Better name for app state

* Snapshot
2020-04-07 15:31:28 -07:00
Kostas Bariotis
67805bc7a7
Add collaborators names (#1223)
* add random usernames

* add username state

* add username input

* ability to set names

* fix tests

* set username oon mobile

* remove auto generated names

* remove commented code

* always string

* updaate snapshots

* maintain username when clearing canvas

* Update src/renderer/renderScene.ts

Co-Authored-By: Lipis <lipiridis@gmail.com>

* add border

* fix styles

Co-authored-by: Pete Hunt <petehunt@users.noreply.github.com>
Co-authored-by: Faustino Kialungila <faustino.kialungila@gmail.com>
Co-authored-by: Lipis <lipiridis@gmail.com>
2020-04-07 14:02:42 +01:00
Shriram Balaji
290244660b
Restore selectedElements on undelete (#1242)
* Restore selectedElements on undelete

* Update regressionTest snapshots
2020-04-05 21:19:54 +02:00
Lipis
9a0889c698
Show shortcuts dialog when pressing ? (#1224) 2020-04-05 15:58:00 +03:00
Kostas Bariotis
b97520400a
Broadcast mouse activity (#1175)
* broadcast mouse activity

* move to same MOUSE_LOCATION event

* remove key up handler

* update tests

* Fix border

* refactor

* rename activity to button

Co-authored-by: Panayiotis Lipiridis <lipiridis@gmail.com>
2020-04-04 17:12:19 +02:00
Kostas Bariotis
0c9459e9e5
Warn on invalid JSON file (#1159)
* add error dialog

* show error modal on file dnd

* add locales

* Update src/locales/en.json

Co-Authored-By: Lipis <lipiridis@gmail.com>

* Update src/data/blob.ts

* Update src/data/blob.ts

* fix titles, update snapshots

* make modal smaller

* fix dnd wrong file type

* reset errorMessage

Co-authored-by: Faustino Kialungila <faustino.kialungila@gmail.com>
Co-authored-by: Lipis <lipiridis@gmail.com>
2020-04-03 13:50:51 +02:00
Daishi Kato
65be7973be
Rotation support (#1099)
* rotate rectanble with fixed angle

* rotate dashed rectangle with fixed angle

* fix rotate handler rect

* fix canvas size with rotation

* angle in element base

* fix bug in calculating canvas size

* trial only for rectangle

* hitTest for rectangle rotation

* properly resize rotated rectangle

* fix canvas size calculation

* giving up... workaround for now

* **experimental** handler to rotate rectangle

* remove rotation on copy for debugging

* update snapshots

* better rotation handler with atan2

* rotate when drawImage

* add rotation handler

* hitTest for any shapes

* fix hitTest for curved lines

* rotate text element

* rotation locking

* hint messaage for rotating

* show proper handlers on mobile (a workaround, there should be a better way)

* refactor hitTest

* support exporting png

* support exporting svg

* fix rotating curved line

* refactor drawElementFromCanvas with getElementAbsoluteCoords

* fix export png and svg

* adjust resize positions for lines (N, E, S, W)

* do not make handlers big on mobile

* Update src/locales/en.json

Alright!

Co-Authored-By: Lipis <lipiridis@gmail.com>

* do not show rotation/resizing hints on mobile

* proper calculation for N and W positions

* simplify calculation

* use "rotation" as property name for clarification (may increase bundle size)

* update snapshots excluding rotation handle

* refactor with adjustPositionWithRotation

* refactor with adjustXYWithRotation

* forgot to rename rotation

* rename internal function

* initialize element angle on restore

* rotate wysiwyg editor

* fix shift-rotate around 270deg

* improve rotation locking

* refactor adjustXYWithRotation

* avoid rotation degree becomes >=360

* refactor with generateHandler

Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
2020-04-02 10:40:26 +02:00
Christopher Chedeau
24fa657093
Don't reset cache while zooming using a gesture (#1103)
* 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
2020-03-28 16:59:36 -07:00
David Luzar
cac2dda5ac
Add loading state (#1027)
* add loading state

* update snapshots

* add border radius

* fix comment breaking build jsx
2020-03-26 18:28:26 +01:00
Pete Hunt
bd7856adf3
Much more thorough tests! (#1053) 2020-03-23 16:38:41 -07:00
Pete Hunt
3f8144ef85
Fix many syncing issues (#952) 2020-03-14 20:46:57 -07:00
David Luzar
b9c75b5bc4
use deletedIds map to sync deletions (#936)
* use deletedIds map for sync deletions

* refactor how we create data for syncing

* fix comments

* streamline broadcast API

* split broadcast methods
2020-03-14 21:25:07 +01:00
dwelle
5706dd7ae2 consolidate & align collaboration socket eventing with server 2020-03-12 12:19:56 +01:00
David Luzar
b82b0754ac
Room dialog (#905)
* support ToolIcon className and fix label padding

* factor some ExportDialog classes out to Modal

* initial RoomDialog prototype

* change label for another-session button

* remove unused css

* add color comments

* Move the collaboration button to the main menu, add support for mobile

* remove button for creating another session

* add locks

* Fix alignment issue

* Reorder button

* reuse current scene for collab session

* keep collaboration state on restore

Co-authored-by: Jed Fox <git@twopointzero.us>
2020-03-11 19:42:18 +01:00
Edwin Lin
0e5c29b3f3
basic Socket.io implementation of collaborative editing (#879)
* 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
2020-03-09 08:48:25 -07:00
Pete Hunt
ccbbdb75a6
Refactor ExcalidrawElement (#874)
* 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
2020-03-08 10:20:55 -07:00
Jed Fox
8e0206cc1e
Undo/Redo buttons, refactor menu toggles (#793)
* Make Undo & Redo and the menu buttons into actions; add undo/redo buttons

* Create variables for the ToolIcon colors

* Darken the menu buttons when they’re active

* Put the more intensive test in `perform`

* Fix & restyle hint viewer

* Add pinch zoom for macOS Safari

* Chrome/Firefox trackpad pinch zoom

* openedMenu → openMenu

* needsShapeEditor.ts → showSelectedShapeActions.ts

* Call showSelectedShapeActions
2020-03-01 20:39:03 +01:00
Faustino Kialungila
1355e0201c
use a const for default font value (#834) 2020-02-24 16:29:54 +01:00
Jed Fox
0fd3fb4b5b
More mobile tweaks (#790)
* Disable text selection

* Set content-editable=plaintext-only to disable Touch Bar formatting buttons

* Enlarge resize handle tap targets for pen/touch

* Make the lock button a button in mobile mode

* Use icons instead of Unicode characters; add an alternate toolbar for creating multipoint lines

* Allow buttons to hide themselves

* Fix heuristic for showing shape actions

* Refactor icons

* Fix label for edit button

* Switch edit button icon

* Remove lock button on mobile

* Add language selector on mobile

* Fix showing edit button on mobile

* Fix showing edit button on mobile, part 2

* Fix handle touch regions

* Fix scroll-back button position

* Allow using the text tool on a text object to start editing it

* Fix deletion of last point in line
2020-02-21 11:34:18 -08:00
Jed Fox
7a7a73b78d
Initial support for mobile devices (#787)
* Initial support for mobile devices

No editing yet, but UI looks nice and you can open the canvas menu

* Add support for editing shape color, etc

* Allow the mobile menus to cover the shape selector

* Hopefully fix test error

* Fix touch on canvas

* Fix safe area handling & remove unused Island
2020-02-20 15:44:38 -08:00
Christopher Chedeau
5256096d76
Fast & Furious (#655)
* [WIP] Fast & Furious

* ensure we translate before scaling

* implement canvas caching for rest of elements

* remove unnecessary ts-ignore

* fix for devicePixelRatio

* initialize missing element props on restore

* factor out canvas padding

* remove unnecessary filtering

* simplify renderElement

* regenerate canvas on prop changes

* revert swapping shape resetting with canvas

* fix blurry rendering

* apply devicePixelRatio when clearing canvas

* improve blurriness; fix arrow canvas offset

* revert canvas clearing changes in anticipation of merge

* normalize scrollX/Y on update

* fix getDerivedStateFromProps

* swap derivedState for type brands

* tweak types

* remove renderScene offsets

* move selection element translations to renderElement

* dry out canvas zoom transformations

* fix padding offset

* Render cached canvas based on the zoom level

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: Preet <833927+pshihn@users.noreply.github.com>
2020-02-19 17:25:01 +01:00
Enzo Ferey
c7ff4c2ed6
Canvas zooming (#716)
* 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.
2020-02-15 21:03:32 +01:00
David Luzar
d79293de06
move footer into layerUI & refactor ActionManager (#729) 2020-02-07 23:46:19 +01:00
BM
a7dc067dfe
Fix language selection (#726) 2020-02-07 10:43:30 +00:00
Gasim Gasimzada
33016bf6bf
Fix issues related to history (#701)
* 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>
2020-02-05 19:47:10 +01:00
Gasim Gasimzada
08d80fb4fe
Add points to multi arrows in real time (#697)
* Add points to multi arrows in real time

* Fix linter issues

* Clear unecessary values from local storage
2020-02-04 14:39:08 +01:00
Gasim Gasimzada
f70bd0081c
Feature: Hint viewer (#666)
* Add Hint viewer

- Add hints for arrows and lines
- Add hints for resizing elements

* Swap priority of multi mode and resize mode in Hint Viewer

* Remove dangling locales from public

* Add shortcut to hide hints

* Change hint texts and show resize hint ONLY during resizing

* Remove hints toggling
2020-02-03 09:52:21 -08:00
Christopher Chedeau
be97bd980e
Add button when scrolled outside of visible area (#643)
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.
2020-02-01 17:52:10 +01:00
Gasim Gasimzada
1e4ce77612
Reintroduce multi-point arrows and add migration for it (#635)
* 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>
2020-02-01 15:49:18 +04:00
David Luzar
3d2e59bfed
Revert "Feature: Multi Point Arrows (#338)" (#634)
This reverts commit 16263e942b7b690bb3e97340383009016129d489.
2020-01-31 18:56:55 +01:00
Gasim Gasimzada
16263e942b
Feature: Multi Point Arrows (#338)
* 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>
2020-01-31 18:16:33 +01:00
lissitz
1bae203a78 changing new shape property sets it as default (#520)
* changing new shape property sets it as default

* set correct opacity while editing new test

Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>
2020-01-25 09:58:57 -08:00
Lipis
ee68af0fd3
Set Trailing Cmma to (#525) 2020-01-24 12:04:54 +02:00
Jilles Soeters
a72a143c84 Introduce Shapelock (#480)
* 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
2020-01-20 15:52:19 -08:00
Faustino Kialungila
61be0f7b61
Render text actions panel on double click (#450)
* Render text actions panel on double click

* cleanup wysiwyg on click

* use `state.editingElement` instead of global to determine whether t ext panel is shown

* clarify comment

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-01-19 23:32:24 +01:00
Christopher Chedeau
d45f48e60f
Set shape background to be transparent by default (#330)
Also makes "Clear canvas" reset the entire app state
2020-01-11 20:34:21 -08:00