Merge pull request #20136 from KDSBrowne/v30.19985

fix(whiteboard): Deactivate Drawing Tool On Access Change
This commit is contained in:
Ramón Souza 2024-05-02 16:36:14 -03:00 committed by GitHub
commit 24b90070b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 9 deletions

View File

@ -25,6 +25,8 @@ import {
import { useMouseEvents, useCursor } from "./hooks";
import { notifyShapeNumberExceeded } from "./service";
import NoopTool from './custom-tools/noop-tool/component';
// Helper functions
const deleteLocalStorageItemsWithPrefix = (prefix) => {
const keysToRemove = Object.keys(localStorage).filter((key) =>
@ -166,21 +168,17 @@ const Whiteboard = React.memo(function Whiteboard(props) {
hasWBAccessRef.current = hasWBAccess;
if (!hasWBAccess && !isPresenter) {
tlEditorRef?.current?.setCurrentTool("select");
tlEditorRef?.current?.setCurrentTool("noop");
}
}, [hasWBAccess]);
React.useEffect(() => {
if (!isEqual(isPresenterRef.current, isPresenter)) {
isPresenterRef.current = isPresenter;
}
}, [isPresenter]);
React.useEffect(() => {
if (!isEqual(hasWBAccessRef.current, hasWBAccess)) {
hasWBAccessRef.current = hasWBAccess;
}
}, [hasWBAccess]);
if (!hasWBAccessRef.current && !isPresenter) {
tlEditorRef?.current?.setCurrentTool("noop");
}
}, [isPresenter]);
React.useEffect(() => {
if (!isEqual(prevShapesRef.current, shapes)) {
@ -1147,6 +1145,8 @@ const Whiteboard = React.memo(function Whiteboard(props) {
presentationAreaHeight,
]);
const customTools = [NoopTool];
return (
<div
ref={whiteboardRef}
@ -1158,6 +1158,7 @@ const Whiteboard = React.memo(function Whiteboard(props) {
forceMobile={true}
hideUi={hasWBAccessRef.current || isPresenter ? false : true}
onMount={handleTldrawMount}
tools={customTools}
/>
<Styled.TldrawV2GlobalStyle
{...{

View File

@ -0,0 +1,15 @@
/* eslint-disable lines-between-class-members */
import { StateNode } from '@tldraw/tldraw';
export default class NoopTool extends StateNode {
static override id = 'noop';
static override initial = 'idle';
override onEnter = () => {
this.editor.setCursor({ type: 'default', rotation: 0 });
}
override onExit = () => {
this.editor.setCursor({ type: 'default', rotation: 0 });
}
}