Merge pull request #20216 from KDSBrowne/bbb-20200

fix(whiteboard): Disable Duplication Shortcut Key While Drawing
This commit is contained in:
Anton Georgiev 2024-05-15 12:53:00 -04:00 committed by GitHub
commit d3e78e7d1e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -94,6 +94,7 @@ export default function Whiteboard(props) {
const [zoom, setZoom] = React.useState(HUNDRED_PERCENT); const [zoom, setZoom] = React.useState(HUNDRED_PERCENT);
const [tldrawZoom, setTldrawZoom] = React.useState(1); const [tldrawZoom, setTldrawZoom] = React.useState(1);
const zoomValueRef = React.useRef(zoomValue); const zoomValueRef = React.useRef(zoomValue);
const isMouseDownRef = React.useRef(false);
const [isMounting, setIsMounting] = React.useState(true); const [isMounting, setIsMounting] = React.useState(true);
const prevShapes = usePrevious(shapes); const prevShapes = usePrevious(shapes);
const prevSlidePosition = usePrevious(slidePosition); const prevSlidePosition = usePrevious(slidePosition);
@ -221,6 +222,7 @@ export default function Whiteboard(props) {
tldrawAPI?.completeSession?.(); tldrawAPI?.completeSession?.();
} }
} }
isMouseDownRef.current = false;
}; };
const checkVisibility = () => { const checkVisibility = () => {
@ -259,12 +261,18 @@ export default function Whiteboard(props) {
window.dispatchEvent(new Event('resize')); window.dispatchEvent(new Event('resize'));
} }
const setIsMouseDown = () => {
isMouseDownRef.current = true;
}
React.useEffect(() => { React.useEffect(() => {
document.addEventListener('mouseup', checkClientBounds); document.addEventListener('mouseup', checkClientBounds);
document.addEventListener('visibilitychange', checkVisibility); document.addEventListener('visibilitychange', checkVisibility);
document.addEventListener('mousedown', setIsMouseDown);
return () => { return () => {
document.removeEventListener('mouseup', checkClientBounds); document.removeEventListener('mouseup', checkClientBounds);
document.removeEventListener('mousedown', setIsMouseDown);
document.removeEventListener('visibilitychange', checkVisibility); document.removeEventListener('visibilitychange', checkVisibility);
const canvas = document.getElementById('canvas'); const canvas = document.getElementById('canvas');
if (canvas) { if (canvas) {
@ -638,6 +646,12 @@ export default function Whiteboard(props) {
const handleOnKeyDown = (event) => { const handleOnKeyDown = (event) => {
const { which, ctrlKey } = event; const { which, ctrlKey } = event;
if (isMouseDownRef.current) {
event.preventDefault();
event.stopPropagation();
return;
}
switch (which) { switch (which) {
case KEY_CODES.ARROW_LEFT: case KEY_CODES.ARROW_LEFT:
case KEY_CODES.PAGE_UP: case KEY_CODES.PAGE_UP: