disable duplication shortcut key while drawing

This commit is contained in:
KDSBrowne 2024-05-10 11:35:04 +00:00
parent 4a1c81fa76
commit 2b6d313c80

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) {
@ -617,6 +625,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: