Merge pull request #301 from germanocaumo/fix-readonly

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

Author: antobinary

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);
           }}
         />