feat: Allow clicking links in non-interactive mode. (#719)

* Allow clicking links in non-interactive mode.

* better embed ux when interactivity=false

---------

Co-authored-by: dwelle <[email protected]>

Author: barnabasmolnar

examples/with-script-in-browser/components/ExampleApp.tsx

@@ -105,6 +105,7 @@ export default function ExampleApp({
   const [zenModeEnabled, setZenModeEnabled] = useState(false);
   const [gridModeEnabled, setGridModeEnabled] = useState(false);
   const [renderScrollbars, setRenderScrollbars] = useState(false);
+  const [interactive, setInteractive] = useState(false);
   const [blobUrl, setBlobUrl] = useState<string>("");
   const [canvasUrl, setCanvasUrl] = useState<string>("");
   const [exportWithDarkMode, setExportWithDarkMode] = useState(false);
@@ -194,6 +195,7 @@ export default function ExampleApp({
         viewModeEnabled,
         zenModeEnabled,
         renderScrollbars,
+        interactive,
         gridModeEnabled,
         theme,
         name: "Custom name of drawing",
@@ -722,6 +724,14 @@ export default function ExampleApp({
             />
             Render scrollbars
           </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={interactive}
+              onChange={() => setInteractive(!interactive)}
+            />
+            interactive
+          </label>
           <label>
             <input
               type="checkbox"

excalidraw-app/App.tsx

@@ -962,6 +962,7 @@ const ExcalidrawWrapper = () => {
             },
           },
         }}
+        interactive={true}
         langCode={langCode}
         renderCustomStats={renderCustomStats}
         detectScroll={false}

packages/excalidraw/components/App.tsx

@@ -6466,6 +6466,42 @@ class App extends React.Component<AppProps, AppState> {
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {
     if (this.props.interactive === false) {
+      // Handle link detection for non-interactive mode
+      const scenePointer = viewportCoordsToSceneCoords(event, this.state);
+
+      const hitElement = this.getElementAtPosition(
+        scenePointer.x,
+        scenePointer.y,
+        { preferSelected: true, includeLockedElements: true },
+      );
+
+      this.hitLinkElement = this.getElementLinkAtPosition(
+        scenePointer,
+        hitElement,
+      );
+
+      if (this.hitLinkElement) {
+        setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
+        if (
+          !isEmbeddableElement(this.hitLinkElement) ||
+          isPointHittingLinkIcon(
+            this.hitLinkElement,
+            this.scene.getNonDeletedElementsMap(),
+            this.state,
+            pointFrom(scenePointer.x, scenePointer.y),
+          )
+        ) {
+          showHyperlinkTooltip(
+            this.hitLinkElement,
+            this.state,
+            this.scene.getNonDeletedElementsMap(),
+          );
+        }
+      } else {
+        hideHyperlinkToolip();
+        setCursor(this.interactiveCanvas, CURSOR_TYPE.AUTO);
+      }
+
       return false;
     }
 

packages/excalidraw/renderer/interactiveScene.ts

@@ -1277,7 +1277,8 @@ const _renderInteractiveScene = ({
   if (
     !appState.multiElement &&
     !appState.newElement &&
-    !appState.selectedLinearElement?.isEditing
+    !appState.selectedLinearElement?.isEditing &&
+    app.props.interactive !== false
   ) {
     const showBoundingBox = hasBoundingBox(
       selectedElements,