fix(tldrawv2): disable hover, double click and background brush

Disables any interaction the user could do in whiteboard.
Currently, it's still possible to do some interactions and even crash whe whiteboard when double clicking it.

Author: germanocaumo

src/components/tldraw_v2/index.js

@@ -16,8 +16,10 @@ import {
 import { ID } from 'utils/constants';
 import storage from 'utils/data/storage';
 import './index.scss';
-import { getTldrawData, getViewBox, createTldrawImageAsset,
-         createTldrawBackgroundShape, createTldrawCursorShape } from 'utils/tldraw';
+import {
+  getTldrawData, getViewBox, createTldrawImageAsset,
+  createTldrawBackgroundShape, createTldrawCursorShape
+} from 'utils/tldraw';
 import { buildFileURL } from 'utils/data';
 import { isEmpty } from 'utils/data/validators';
 import getCursor from './cursor';
@@ -58,7 +60,7 @@ const SlideData = (tldrawAPI) => {
 
   const curPageId = tldrawAPI?.getCurrentPageId();
   const assetId = AssetRecordType.createId(curPageId);
-  
+
   assets[`slide-background-asset-${id}`] = createTldrawImageAsset(assetId, buildFileURL(src), scaledWidth, scaledHeight)
   shapes["slide-background-shape"] = createTldrawBackgroundShape(assetId, curPageId, scaledWidth, scaledHeight)
 
@@ -125,16 +127,17 @@ const TldrawPresentationV2 = ({ size }) => {
         svgHeight / viewboxHeight
       );
 
-    tldrawAPI?.setCamera({x, y, z: zoom});
+    tldrawAPI?.setCamera({ x, y, z: zoom });
 
   }, [svgWidth, svgHeight, viewboxWidth, viewboxHeight, x, y, currentSlideIndex, tldrawAPI, size, result]);
 
   React.useEffect(() => {
+    tldrawAPI?.updateInstanceState({ isReadonly: false });
     // Remove all current shapes
     const currentShapesSet = tldrawAPI?.getCurrentPageShapeIds() || (new Set());
     const curentShapes = Array.from(currentShapesSet);
     if (curentShapes.length > 0) { tldrawAPI?.deleteShapes(curentShapes); }
-  
+
     // Remove unnecessary properties from shapes to prevent Tldraw's validation from failing
     const validatedShapes = Object.values(shapes).map((shape) => {
       if ('isModerator' in shape) {
@@ -145,6 +148,7 @@ const TldrawPresentationV2 = ({ size }) => {
 
     tldrawAPI?.createAssets(Object.values(assets));
     tldrawAPI?.createShapes(validatedShapes);
+    tldrawAPI?.updateInstanceState({ isReadonly: true });
   }, [tldrawAPI, shapes, assets]);
 
   return (
@@ -168,12 +172,27 @@ const TldrawPresentationV2 = ({ size }) => {
             app.setSelectedIds = () => { };
             app.setHoveredId = () => { };
             app.setSelectedShapes = () => { };
-            app.setHoveredShapes = () => { };
+            app.setHoveredShape = () => { };
             app.onRightClick = () => { };
             app.onDoubleClick = () => { };
             app.onTripleClick = () => { };
             app.onQuadrupleClick = () => { };
             app.onWheel = () => { };
+            app.store.listen(
+              (entry) => {
+                const { changes } = entry;
+                const { updated } = changes;
+                const { 'instance:instance': instances } = updated;
+
+                if (instances && instances.length > 0) {
+                  const newInstance = instances[1];
+                  if (newInstance && newInstance.brush) {
+                    app.updateInstanceState({ brush: null });
+                  }
+                }
+              },
+              { source: 'user' },
+            );
             setTLDrawAPI(app);
           }}
         />