Add SVG cursors for all cursor types (#1416)

Fixes #1410 

This PR adds custom SVGs for all cursor types.
This will unblock some upcoming collaboration features!

It also adds some basic debugging for custom cursors.

![2023-05-19 at 11 02 57 - Coffee
Shrimp](https://github.com/tldraw/tldraw/assets/15892272/dbc84d04-604f-43e5-acd2-69df956e5784)

It uses custom cursors for any shape-related UI, like links.

![2023-05-19 at 11 07 04 - Amaranth
Aphid](https://github.com/tldraw/tldraw/assets/15892272/7eb25f6a-0552-47bd-b2b9-f6c3dc2fca70)

But it sticks with the default browser cursors for the non-canvas UI.

![2023-05-23 at 15 06 29 - Apricot
Bovid](https://github.com/tldraw/tldraw/assets/15892272/2fe35afb-095a-4454-a6c3-aa8337b71506)

### Change Type

- [x] `minor`

### Test Plan

1. Enable debug mode.
2. From the debug menu, enable "Debug cursors".
3. Hover the cursor over the shapes that appear.
4. Check that the cursor appears correctly over each one.
5. (Don't forget to turn off "Debug cursors" after use).

### Release Notes

- Added consistent custom cursors.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Lu Wilson 2023-05-23 07:12:11 -07:00 committed by GitHub
parent abe9237c6e
commit ab0df9118e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 145 additions and 21 deletions

View file

@ -23,6 +23,7 @@ export const debugFlags = {
peopleMenu: createDebugValue('tldrawPeopleMenu', false),
logMessages: createDebugValue('tldrawUiLog', []),
resetConnectionEveryPing: createDebugValue('tldrawResetConnectionEveryPing', false),
debugCursors: createDebugValue('tldrawDebugCursors', false),
}
declare global {