Moved to handling keyboard shortcuts on the document body

Also removed shortcut text input checking to map interaction component
This commit is contained in:
Mitchell McCaffrey 2020-07-18 11:06:02 +10:00
parent 17043745de
commit 44e6a34aba
3 changed files with 82 additions and 57 deletions

View File

@ -29,11 +29,6 @@ function StyledModal({
},
}}
{...props}
>
{/* Stop keyboard events when modal is open to prevent shortcuts from triggering */}
<div
onKeyDown={(e) => e.stopPropagation()}
onKeyUp={(e) => e.stopPropagation()}
>
{children}
{allowClose && (
@ -43,7 +38,6 @@ function StyledModal({
onClick={onRequestClose}
/>
)}
</div>
</Modal>
);
}

View File

@ -197,6 +197,36 @@ function MapInteraction({
stageHeightRef.current = height;
}
// Added key events to interaction emitter
useEffect(() => {
function handleKeyDown(event) {
// Ignore text input
if (event.target instanceof HTMLInputElement) {
return;
}
interactionEmitter.emit("keyDown", event);
}
function handleKeyUp(event) {
// Ignore text input
if (event.target instanceof HTMLInputElement) {
return;
}
interactionEmitter.emit("keyUp", event);
}
document.body.addEventListener("keydown", handleKeyDown);
document.body.addEventListener("keyup", handleKeyUp);
document.body.tabIndex = 1;
return () => {
document.body.removeEventListener("keydown", handleKeyDown);
document.body.removeEventListener("keyup", handleKeyUp);
document.body.tabIndex = 0;
};
}, [interactionEmitter]);
// Create default keyboard shortcuts
useEffect(() => {
function handleKeyDown(event) {
// Change to pan tool when pressing space
if (event.key === " " && selectedToolId === "pan") {
@ -226,17 +256,27 @@ function MapInteraction({
if (event.key === "m" && !disabledControls.includes("measure")) {
onSelectedToolChange("measure");
}
interactionEmitter.emit("keyDown", event);
}
function handleKeyUp(event) {
if (event.key === " " && selectedToolId === "pan") {
onSelectedToolChange(previousSelectedToolRef.current);
}
interactionEmitter.emit("keyUp", event);
}
interactionEmitter.on("keyDown", handleKeyDown);
interactionEmitter.on("keyUp", handleKeyUp);
return () => {
interactionEmitter.off("keyDown", handleKeyDown);
interactionEmitter.off("keyUp", handleKeyUp);
};
}, [
interactionEmitter,
onSelectedToolChange,
disabledControls,
selectedToolId,
]);
function getCursorForTool(tool) {
switch (tool) {
case "pan":
@ -284,9 +324,6 @@ function MapInteraction({
ref={containerRef}
{...bind()}
className="map"
tabIndex={1}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
>
<ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
<Stage

View File

@ -78,14 +78,8 @@ function MapMenu({
},
}}
contentRef={handleModalContent}
>
{/* Stop keyboard events when modal is open to prevent shortcuts from triggering */}
<div
onKeyDown={(e) => e.stopPropagation()}
onKeyUp={(e) => e.stopPropagation()}
>
{children}
</div>
</Modal>
);
}