feat: add view mode in Excalidraw

[ad1992]

Fixes #2830 Fixes #2841

This is an initial version of how view mode would look like 👇 Please share your views.

For package 👇
You can check it here

Version 1 (this PR)

• Add the action to the context menu: Read-only (just like Zen mode)
• Hide the shapes toolbar
• Hide the properties toolbar
• Only show save, save as, and export options in the top left toolbar
• Disallow modifying / deleting elements.
• Disallow pasting elements or styles.
• Make the context menu contextual and only show minimal options applicable for read-only mode
  • Copy to clipboard as png
  • Copy to clipboard as SVG
  • show stats for Nerds
  • Read-only mode
• Update mobile view
• Add a shortcut alt+r for view mode
• Allow zooming, panning and touch gestures on canvas.
• Add viewModeEnabled prop so the host can also use it. We don't render view mode in context menu when this prop is true so host can control it.
• show collaborators.
• zooming is not working in mobile, fix it
• testing
• Update readme and changelog

Version 2 (next PR)

• Allow selection of individual elements.
• Make keyboard shortcuts contextual.

what else?

cc @dwelle

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/excalidraw/excalidraw/h4sbatay9
✅ Preview: https://excalidraw-git-aakansha-ronly.excalidraw.vercel.app

[dwelle]

Looks promising. We'll need to factor out logic relating to canvas movements (panning, zoom...) and such.

Dunno what's our stance on exporting.

Ad help dialog: maybe. Or we can leave it for later PR.

[dwelle]

• panning doesn't work on desktop
• rn you can right-click an element to select it (which you then cannot deselect)

I have only now read #2841 so I'll discuss some more points over there

[dwelle]

I think the cursor in view mode should act as a drag tool, as does in Figma/Miro etc. and we shouldn't deviate from that standard.

I know we're still not splitting the modes into presentation & read at this point, but this I think should be in both modes.

In terms of how selection will work in that mode: I like what Miro does, which is dragging always drags, and single-clicking on an element selects (plus changes cursor from hand to normal arrow). If we want to leave this part for a next PR, that's fine, but I'd at least start with dragging tool across the board.

[dwelle]

Also, if we're gonna persist the view mode into LS across refreshed, I'd add the exit view mode button otherwise people will get locked out over time (or if someone new accesses the workstation where someone left view mode on).

[ad1992]

Also, if we're gonna persist the view mode into LS across refreshed, I'd add the exit view mode button otherwise people will get locked out over time (or if someone new accesses the workstation where someone left view mode on).

I think we shouldn't store it in local storage as this doesn't seem like a mode which users would want to persist. For example, if you check in google docs (change to view mode & it is lost on refresh) and when we use this mode in a collaboration that time mode will always be persisted if the view-only link is shared.

Thoughts?

[lipis]

🐑 it

[ad1992]

I think the cursor in view mode should act as a drag tool, as does in Figma/Miro etc. and we shouldn't deviate from that standard.

I know we're still not splitting the modes into presentation & read at this point, but this I think should be in both modes.

In terms of how selection will work in that mode: I like what Miro does, which is dragging always drags, and single-clicking on an element selects (plus changes cursor from hand to normal arrow). If we want to leave this part for the next PR, that's fine, but I'd at least start with dragging the tool across the board.

Do you mean we should show a hand cursor instead of the disabled cursor in view mode? And by dragging tool you mean something like below 👇 But wouldn't this mean we are allowing the user to update the whole drawing position in view mode ?

[dwelle]

but wouldn't this mean we are allowing the user to update the whole drawing position in view mode ?

I'm talking about panning. That modifies local client's scroll position. Same as what is shown in your Miro GIF above.

[ad1992]

@dwelle @lipis I have allowed panning when no elements selected. If this looks fine, let's ship this and we can improve it in the next PR?

[lipis]

I'm down.. with follow up improvements..!

[dwelle]

Let's at least fix this: the panning only works every 2nd drag you do :)

[ad1992]

My approach of checking selectedElementIds might not be right when allowing selection over panning. I am looking into it but might need some more time to debug this. The selection also requires a double click sometimes.

Do we want to disable selection and allow only panning for first version? Then resetting the selectedElementIds will be needed when changing to view mode.

[lipis]

There is no wrong way for the first iterration.. anything we don't like or want to improve can file as issues..

[dwelle]

Do we want to disable selection and allow only panning for first version? Then resetting the selectedElementIds will be needed when changing to view mode.

I think this is a good idea. Better than to ship it in a half broken state. (Also, selecting is an edge case. Panning is more important in view mode.)

[ad1992]

There is no wrong way for the first iterration.. anything we don't like or want to improve can file as issues..

Sure sounds good 👍 . If this bug is not a blocker let's ship it 🚀 .

@dwelle what do you say?

[ad1992]

Do we want to disable selection and allow only panning for first version? Then resetting the selectedElementIds will be needed when changing to view mode.

I think this is a good idea. Better than to ship it in a half broken state. (Also, selecting is an edge case. Panning is more important in view mode.)

Do we want to disable selection and allow only panning for first version? Then resetting the selectedElementIds will be needed when changing to view mode.

I think this is a good idea. Better than to ship it in a half broken state. (Also, selecting is an edge case. Panning is more important in view mode.)

missed this comment. should be fine now 👍

[dwelle]

Thanks. Shipping! 🎉