feat: support hiding UI and disabling interactivity

src/actions/actionCanvas.tsx

@@ -18,7 +18,6 @@ import {
   getDefaultAppState,
   isEraserActive,
   isHandToolActive,
-  isLaserPointerActive,
 } from "../appState";
 import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
 import { Bounds } from "../element/bounds";
@@ -440,44 +439,3 @@ export const actionToggleHandTool = register({
   },
   keyTest: (event) => event.key === KEYS.H,
 });
-
-export const actionToggleLaserPointer = register({
-  name: "toggleLaserPointerTool",
-  viewMode: true,
-  trackEvent: { category: "menu" },
-  perform(elements, appState, _, app) {
-    let activeTool: AppState["activeTool"];
-
-    if (isLaserPointerActive(appState)) {
-      activeTool = updateActiveTool(appState, {
-        ...(appState.activeTool.lastActiveTool || {
-          type: appState.viewModeEnabled ? "hand" : "selection",
-        }),
-        lastActiveToolBeforeEraser: null,
-      });
-      setCursor(
-        app.interactiveCanvas,
-        appState.viewModeEnabled ? CURSOR_TYPE.GRAB : CURSOR_TYPE.POINTER,
-      );
-    } else {
-      activeTool = updateActiveTool(appState, {
-        type: "laser",
-        lastActiveToolBeforeEraser: appState.activeTool,
-      });
-      setCursor(app.interactiveCanvas, CURSOR_TYPE.CROSSHAIR);
-    }
-
-    return {
-      appState: {
-        ...appState,
-        selectedElementIds: {},
-        selectedGroupIds: {},
-        activeEmbeddable: null,
-        activeTool,
-      },
-      commitToHistory: true,
-    };
-  },
-  checked: (appState) => appState.activeTool.type === "laser",
-  contextItemLabel: "labels.laser",
-});

src/actions/shortcuts.ts

@@ -36,7 +36,6 @@ export type ShortcutName =
       | "flipVertical"
       | "hyperlink"
       | "toggleElementLock"
-      | "toggleLaserPointerTool"
     >
   | "saveScene"
   | "imageExport";
@@ -84,7 +83,6 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   viewMode: [getShortcutKey("Alt+R")],
   hyperlink: [getShortcutKey("CtrlOrCmd+K")],
   toggleElementLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
-  toggleLaserPointerTool: [getShortcutKey("K")],
 };
 
 export const getShortcutFromShortcutName = (name: ShortcutName) => {

src/actions/types.ts

@@ -124,8 +124,7 @@ export type ActionName =
   | "setFrameAsActiveTool"
   | "setEmbeddableAsActiveTool"
   | "createContainerFromText"
-  | "wrapTextInContainer"
-  | "toggleLaserPointerTool";
+  | "wrapTextInContainer";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

src/appState.ts

@@ -266,11 +266,3 @@ export const isHandToolActive = ({
 }) => {
   return activeTool.type === "hand";
 };
-
-export const isLaserPointerActive = ({
-  activeTool,
-}: {
-  activeTool: AppState["activeTool"];
-}) => {
-  return activeTool.type === "laser";
-};

src/components/App.tsx

@@ -46,7 +46,6 @@ import {
   getDefaultAppState,
   isEraserActive,
   isHandToolActive,
-  isLaserPointerActive,
 } from "../appState";
 import { parseClipboard } from "../clipboard";
 import {
@@ -344,11 +343,7 @@ import {
   actionRemoveAllElementsFromFrame,
   actionSelectAllElementsInFrame,
 } from "../actions/actionFrame";
-import {
-  actionToggleHandTool,
-  zoomToFit,
-  actionToggleLaserPointer,
-} from "../actions/actionCanvas";
+import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
 import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import {
@@ -1216,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>
@@ -1242,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}
@@ -2113,6 +2111,10 @@ class App extends React.Component<AppProps, AppState> {
       event.preventDefault();
     }
 
+    if (this.props.interactive === false) {
+      return;
+    }
+
     if (!didTapTwice) {
       didTapTwice = true;
       clearTimeout(tappedTwiceTimer);
@@ -2147,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({
@@ -2163,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
@@ -2915,22 +2925,7 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
 
-      if (event.key === KEYS.K && !event.altKey && !event[KEYS.CTRL_OR_CMD]) {
-        if (isLaserPointerActive(this.state)) {
-          this.setActiveTool({
-            type: "selection",
-          });
-        } else {
-          this.setActiveTool({ type: "laser" });
-        }
-        return;
-      }
-
       if (this.state.viewModeEnabled) {
-        //revert to hand in case a key is pressed (K is handled above)
-        if (event.key !== KEYS.K) {
-          this.setActiveTool({ type: "selection" });
-        }
         return;
       }
 
@@ -3080,6 +3075,15 @@ class App extends React.Component<AppProps, AppState> {
         }
       }
 
+      if (event.key === KEYS.K && !event.altKey && !event[KEYS.CTRL_OR_CMD]) {
+        if (this.state.activeTool.type === "laser") {
+          this.setActiveTool({ type: "selection" });
+        } else {
+          this.setActiveTool({ type: "laser" });
+        }
+        return;
+      }
+
       if (
         event[KEYS.CTRL_OR_CMD] &&
         (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE)
@@ -3211,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()) {
@@ -3226,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
@@ -3257,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({
@@ -3623,18 +3640,6 @@ class App extends React.Component<AppProps, AppState> {
     if (this.state.multiElement) {
       return;
     }
-
-    if (this.state.viewModeEnabled) {
-      if (this.state.activeTool.type === "laser") {
-        this.setActiveTool({ type: "selection" });
-        setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
-      } else {
-        this.setActiveTool({ type: "laser" });
-        setCursor(this.interactiveCanvas, CURSOR_TYPE.CROSSHAIR);
-      }
-      return;
-    }
-
     // we should only be able to double click when mode is selection
     if (this.state.activeTool.type !== "selection") {
       return;
@@ -3850,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)) {
@@ -4502,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;
@@ -4535,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;
     }
 
@@ -4624,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);
@@ -4762,7 +4779,7 @@ class App extends React.Component<AppProps, AppState> {
         (event.button === POINTER_BUTTON.WHEEL ||
           (event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
           isHandToolActive(this.state) ||
-          (this.state.viewModeEnabled && !isLaserPointerActive(this.state)))
+          this.state.viewModeEnabled)
       ) ||
       isTextElement(this.state.editingElement)
     ) {
@@ -7827,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") ||
@@ -8166,7 +8187,6 @@ class App extends React.Component<AppProps, AppState> {
           actionToggleZenMode,
           actionToggleViewMode,
           actionToggleStats,
-          actionToggleLaserPointer,
         ];
       }
 
@@ -8239,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/LaserTool/LaserPathManager.ts

@@ -91,7 +91,7 @@ export class LaserPathManager {
   private collaboratorsState: Map<string, CollabolatorState> = new Map();
 
   private rafId: number | undefined;
-  private isDrawing = false;
+  private lastUpdate = 0;
   private container: SVGSVGElement | undefined;
 
   constructor(private app: App) {
@@ -100,7 +100,7 @@ export class LaserPathManager {
 
   destroy() {
     this.stop();
-    this.isDrawing = false;
+    this.lastUpdate = 0;
     this.ownState = instantiateCollabolatorState();
     this.collaboratorsState = new Map();
   }
@@ -127,7 +127,7 @@ export class LaserPathManager {
   }
 
   private updatePath(state: CollabolatorState) {
-    this.isDrawing = true;
+    this.lastUpdate = performance.now();
 
     if (!this.isRunning) {
       this.start();
@@ -160,7 +160,7 @@ export class LaserPathManager {
 
     this.updateCollabolatorsState();
 
-    if (this.isDrawing) {
+    if (performance.now() - this.lastUpdate < DECAY_TIME * 2) {
       this.update();
     } else {
       this.isRunning = false;
@@ -250,8 +250,6 @@ export class LaserPathManager {
       return;
     }
 
-    let somePathsExist = false;
-
     for (const [key, state] of this.collaboratorsState.entries()) {
       if (!this.app.state.collaborators.has(key)) {
         state.svg.remove();
@@ -271,10 +269,6 @@ export class LaserPathManager {
         paths += ` ${this.draw(state.currentPath)}`;
       }
 
-      if (paths.trim()) {
-        somePathsExist = true;
-      }
-
       state.svg.setAttribute("d", paths);
       state.svg.setAttribute("fill", getClientColor(key));
     }
@@ -293,17 +287,7 @@ export class LaserPathManager {
       paths += ` ${this.draw(this.ownState.currentPath)}`;
     }
 
-    paths = paths.trim();
-
-    if (paths) {
-      somePathsExist = true;
-    }
-
     this.ownState.svg.setAttribute("d", paths);
     this.ownState.svg.setAttribute("fill", "red");
-
-    if (!somePathsExist) {
-      this.isDrawing = false;
-    }
   }
 }

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/components/canvases/InteractiveCanvas.tsx

@@ -155,7 +155,9 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
       onPointerCancel={props.onPointerCancel}
       onTouchMove={props.onTouchMove}
       onPointerDown={props.onPointerDown}
-      onDoubleClick={props.onDoubleClick}
+      onDoubleClick={
+        props.appState.viewModeEnabled ? undefined : props.onDoubleClick
+      }
     >
       {t("labels.drawingCanvas")}
     </canvas>

src/locales/en.json

@@ -1,6 +1,5 @@
 {
   "labels": {
-    "laser": "Toggle laser pointer",
     "paste": "Paste",
     "pasteAsPlaintext": "Paste as plaintext",
     "pasteCharts": "Paste charts",

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/types.ts

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