Skip to content

Commit

Permalink
add multiSelect state to onav component
Browse files Browse the repository at this point in the history
  • Loading branch information
JustinElms committed Jan 9, 2025
1 parent 0cecc7d commit 9b181f5
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 16 deletions.
51 changes: 37 additions & 14 deletions oceannavigator/frontend/src/components/OceanNavigator.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ function OceanNavigator(props) {
const [observationArea, setObservationArea] = useState([]);
const [subquery, setSubquery] = useState();
const [showPermalink, setShowPermalink] = useState(false);
const [multiSelect, setMultiSelect] = useState(false);

useEffect(() => {
ReactGA.ga("send", "pageview");
Expand Down Expand Up @@ -103,8 +104,19 @@ function OceanNavigator(props) {
console.error(err);
}
}

window.addEventListener("keyup", upHandler);
return () => {
window.removeEventListener("keyup", upHandler);
};
}, []);

const upHandler = (e) => {
if (e.key === "Shift") {
setMultiSelect(false);
}
};

const action = (name, arg, arg2, arg3) => {
switch (name) {
case "startDrawing":
Expand Down Expand Up @@ -213,6 +225,10 @@ function OceanNavigator(props) {
break;
case "names":
setNames(value[i]);
break;
case "multiSelect":
setMultiSelect(value[i]);
break;
}
}
};
Expand Down Expand Up @@ -454,6 +470,7 @@ function OceanNavigator(props) {
modalTitle = __("Info/Help");
break;
}

return (
<div className="OceanNavigator">
<ScaleViewer
Expand Down Expand Up @@ -505,20 +522,26 @@ function OceanNavigator(props) {
<ToggleLanguage />
<LinkButton action={action} />
<MapTools uiSettings={uiSettings} updateUI={updateUI} action={action} />
<Modal
show={uiSettings.showModal}
onHide={closeModal}
dialogClassName="full-screen-modal"
size={modalSize}
>
<Modal.Header closeButton closeVariant="white" closeLabel={__("Close")}>
<Modal.Title>{modalTitle}</Modal.Title>
</Modal.Header>
<Modal.Body>{modalBodyContent}</Modal.Body>
<Modal.Footer>
<Button onClick={closeModal}>{__("Close")}</Button>
</Modal.Footer>
</Modal>
{multiSelect ? null : (
<Modal
show={uiSettings.showModal}
onHide={closeModal}
dialogClassName="full-screen-modal"
size={modalSize}
>
<Modal.Header
closeButton
closeVariant="white"
closeLabel={__("Close")}
>
<Modal.Title>{modalTitle}</Modal.Title>
</Modal.Header>
<Modal.Body>{modalBodyContent}</Modal.Body>
<Modal.Footer>
<Button onClick={closeModal}>{__("Close")}</Button>
</Modal.Footer>
</Modal>
)}
<Modal
show={showPermalink}
onHide={() => setShowPermalink(false)}
Expand Down
8 changes: 6 additions & 2 deletions oceannavigator/frontend/src/components/map/Map.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ const Map = forwardRef((props, ref) => {
mapRef0
);

const newSelect = createSelect()
const newSelect = createSelect();
newMap.addInteraction(newSelect);

newMap.on("moveend", function () {
Expand Down Expand Up @@ -414,7 +414,11 @@ const Map = forwardRef((props, ref) => {
});

newSelect.on("select", function (e) {
let shiftHeld = e.mapBrowserEvent.originalEvent.shiftKey;
let selectedFeatures = this.getFeatures();
if (shiftHeld && e.selected[0].get("type") == "point") {
props.updateState(["multiSelect"], true);
}
if (
e.selected.length > 0 &&
(e.selected[0].line || e.selected[0].drifter)
Expand Down Expand Up @@ -731,7 +735,7 @@ const Map = forwardRef((props, ref) => {

props.action(actionType, content);
props.updateUI({ modalType: t, showModal: true });
props.updateState("names", names);
props.updateState(["names"], [names]);
};

const updateSelectFilter = (select) => {
Expand Down

0 comments on commit 9b181f5

Please sign in to comment.