feat: support hiding UI and disabling interactivity

src/components/App.tsx

@@ -1211,6 +1211,7 @@ class App extends React.Component<AppProps, AppState> {
                           }
                           app={this}
                           isCollaborating={this.props.isCollaborating}
+                          uiDisabled={this.props.ui === false}
                         >
                           {this.props.children}
                         </LayerUI>
@@ -1237,14 +1238,16 @@ class App extends React.Component<AppProps, AppState> {
                             closable={this.state.toast.closable}
                           />
                         )}
-                        {this.state.contextMenu && (
-                          <ContextMenu
-                            items={this.state.contextMenu.items}
-                            top={this.state.contextMenu.top}
-                            left={this.state.contextMenu.left}
-                            actionManager={this.actionManager}
-                          />
-                        )}
+                        {this.state.contextMenu &&
+                          this.props.interactive !== false &&
+                          this.props.ui !== false && (
+                            <ContextMenu
+                              items={this.state.contextMenu.items}
+                              top={this.state.contextMenu.top}
+                              left={this.state.contextMenu.left}
+                              actionManager={this.actionManager}
+                            />
+                          )}
                         <StaticCanvas
                           canvas={this.canvas}
                           rc={this.rc}
@@ -2108,6 +2111,10 @@ class App extends React.Component<AppProps, AppState> {
       event.preventDefault();
     }
 
+    if (this.props.interactive === false) {
+      return;
+    }
+
     if (!didTapTwice) {
       didTapTwice = true;
       clearTimeout(tappedTwiceTimer);
@@ -2142,6 +2149,10 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private onTouchEnd = (event: TouchEvent) => {
+    if (this.props.interactive === false) {
+      return;
+    }
+
     this.resetContextMenuTimer();
     if (event.touches.length > 0) {
       this.setState({
@@ -2158,6 +2169,10 @@ class App extends React.Component<AppProps, AppState> {
 
   public pasteFromClipboard = withBatchedUpdates(
     async (event: ClipboardEvent | null) => {
+      if (this.props.interactive === false) {
+        return;
+      }
+
       const isPlainPaste = !!(IS_PLAIN_PASTE && event);
 
       // #686
@@ -3200,6 +3215,10 @@ class App extends React.Component<AppProps, AppState> {
   private onGestureStart = withBatchedUpdates((event: GestureEvent) => {
     event.preventDefault();
 
+    if (this.props.interactive === false) {
+      return false;
+    }
+
     // we only want to deselect on touch screens because user may have selected
     // elements by mistake while zooming
     if (this.isTouchScreenMultiTouchGesture()) {
@@ -3215,6 +3234,10 @@ class App extends React.Component<AppProps, AppState> {
   private onGestureChange = withBatchedUpdates((event: GestureEvent) => {
     event.preventDefault();
 
+    if (this.props.interactive === false) {
+      return false;
+    }
+
     // onGestureChange only has zoom factor but not the center.
     // If we're on iPad or iPhone, then we recognize multi-touch and will
     // zoom in at the right location in the touchmove handler
@@ -3246,6 +3269,11 @@ class App extends React.Component<AppProps, AppState> {
   // fires only on Safari
   private onGestureEnd = withBatchedUpdates((event: GestureEvent) => {
     event.preventDefault();
+
+    if (this.props.interactive === false) {
+      return false;
+    }
+
     // reselect elements only on touch screens (see onGestureStart)
     if (this.isTouchScreenMultiTouchGesture()) {
       this.setState({
@@ -3827,6 +3855,10 @@ class App extends React.Component<AppProps, AppState> {
   private handleCanvasPointerMove = (
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {
+    if (this.props.interactive === false) {
+      return false;
+    }
+
     this.savePointer(event.clientX, event.clientY, this.state.cursorButton);
 
     if (gesture.pointers.has(event.pointerId)) {
@@ -4479,8 +4511,10 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
-      return;
+    if (this.props.interactive !== false) {
+      if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
+        return;
+      }
     }
 
     this.lastPointerDownEvent = event;
@@ -4512,14 +4546,20 @@ class App extends React.Component<AppProps, AppState> {
       selectedElementsAreBeingDragged: false,
     });
 
-    if (this.handleDraggingScrollBar(event, pointerDownState)) {
+    if (
+      this.props.interactive !== false &&
+      this.handleDraggingScrollBar(event, pointerDownState)
+    ) {
       return;
     }
 
     this.clearSelectionIfNotUsingSelection();
     this.updateBindingEnabledOnPointerMove(event);
 
-    if (this.handleSelectionOnPointerDown(event, pointerDownState)) {
+    if (
+      this.props.interactive !== false &&
+      this.handleSelectionOnPointerDown(event, pointerDownState)
+    ) {
       return;
     }
 
@@ -4601,15 +4641,15 @@ class App extends React.Component<AppProps, AppState> {
     const onPointerMove =
       this.onPointerMoveFromPointerDownHandler(pointerDownState);
 
-    const onPointerUp =
-      this.onPointerUpFromPointerDownHandler(pointerDownState);
-
-    const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
-    const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
-
-    lastPointerUp = onPointerUp;
-
     if (!this.state.viewModeEnabled || this.state.activeTool.type === "laser") {
+      const onPointerUp =
+        this.onPointerUpFromPointerDownHandler(pointerDownState);
+
+      const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
+      const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
+
+      lastPointerUp = onPointerUp;
+
       window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
       window.addEventListener(EVENT.POINTER_UP, onPointerUp);
       window.addEventListener(EVENT.KEYDOWN, onKeyDown);
@@ -7804,6 +7844,10 @@ class App extends React.Component<AppProps, AppState> {
   ) => {
     event.preventDefault();
 
+    if (this.props.interactive === false) {
+      return;
+    }
+
     if (
       (("pointerType" in event.nativeEvent &&
         event.nativeEvent.pointerType === "touch") ||
@@ -8215,7 +8259,7 @@ class App extends React.Component<AppProps, AppState> {
       event: WheelEvent | React.WheelEvent<HTMLDivElement | HTMLCanvasElement>,
     ) => {
       event.preventDefault();
-      if (isPanning) {
+      if (isPanning || this.props.interactive === false) {
         return;
       }
 

src/components/LayerUI.tsx

@@ -79,6 +79,7 @@ interface LayerUIProps {
   children?: React.ReactNode;
   app: AppClassProperties;
   isCollaborating: boolean;
+  uiDisabled: boolean;
 }
 
 const DefaultMainMenu: React.FC<{
@@ -137,6 +138,7 @@ const LayerUI = ({
   children,
   app,
   isCollaborating,
+  uiDisabled,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -354,6 +356,10 @@ const LayerUI = ({
 
   const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
 
+  if (uiDisabled) {
+    return null;
+  }
+
   const layerUIJSX = (
     <>
       {/* ------------------------- tunneled UI ---------------------------- */}

src/packages/excalidraw/index.tsx

@@ -44,6 +44,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     children,
     validateEmbeddable,
     renderEmbeddable,
+    ui,
+    interactive,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -100,7 +102,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onPointerUpdate={onPointerUpdate}
           renderTopRightUI={renderTopRightUI}
           langCode={langCode}
-          viewModeEnabled={viewModeEnabled}
+          viewModeEnabled={interactive === false ? true : viewModeEnabled}
           zenModeEnabled={zenModeEnabled}
           gridModeEnabled={gridModeEnabled}
           libraryReturnUrl={libraryReturnUrl}
@@ -119,6 +121,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onScrollChange={onScrollChange}
           validateEmbeddable={validateEmbeddable}
           renderEmbeddable={renderEmbeddable}
+          ui={ui}
+          interactive={interactive}
         >
           {children}
         </App>

src/packages/utils/yarn.lock

@@ -1980,10 +1980,10 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+nanoid@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
+  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
 
 neo-async@^2.6.2:
   version "2.6.2"
@@ -2117,11 +2117,11 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss@^8.4.7:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  version "8.4.8"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.8.tgz#dad963a76e82c081a0657d3a2f3602ce10c2e032"
+  integrity sha512-2tXEqGxrjvAO6U+CJzDL2Fk2kPHTv1jQsYkSoMeOis2SsYaXRO2COxTdQp99cYvif9JTXaAk9lYGc3VhJt7JPQ==
   dependencies:
-    nanoid "^3.3.6"
+    nanoid "^3.3.1"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 

src/types.ts

@@ -445,6 +445,8 @@ export interface ExcalidrawProps {
     element: NonDeleted<ExcalidrawEmbeddableElement>,
     appState: AppState,
   ) => JSX.Element | null;
+  interactive?: boolean;
+  ui?: boolean;
 }
 
 export type SceneData = {