Allow multiple point selection with shift key (#1175)

* remove duplicate createSelect logic * add multiSelect state to onav component * prevent empty plot window
DFO-Ocean-Navigator · Jan 9, 2025 · 1c21fe3 · 1c21fe3
1 parent ac6ad69
commit 1c21fe3
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 58 deletions.
diff --git a/oceannavigator/frontend/src/components/OceanNavigator.jsx b/oceannavigator/frontend/src/components/OceanNavigator.jsx
@@ -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");
@@ -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":
@@ -213,6 +225,10 @@ function OceanNavigator(props) {
           break;
         case "names":
           setNames(value[i]);
+          break;
+        case "multiSelect":
+          setMultiSelect(value[i]);
+          break;
       }
     }
   };
@@ -454,6 +470,7 @@ function OceanNavigator(props) {
       modalTitle = __("Info/Help");
       break;
   }
+
   return (
     <div className="OceanNavigator">
       <ScaleViewer
@@ -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)}

diff --git a/oceannavigator/frontend/src/components/map/Map.jsx b/oceannavigator/frontend/src/components/map/Map.jsx
@@ -157,48 +157,7 @@ const Map = forwardRef((props, ref) => {
       mapRef0
     );
 
-    const newSelect = new olinteraction.Select({
-      style: function (feat, res) {
-        if (feat.get("type") != "area") {
-          return new Style({
-            stroke: new Stroke({
-              color: "#0099ff",
-              width: 4,
-            }),
-            image: new Circle({
-              radius: 4,
-              fill: new Fill({
-                color: "#0099ff",
-              }),
-              stroke: new Stroke({
-                color: "#ffffff",
-                width: 1,
-              }),
-            }),
-          });
-        }
-      },
-    });
-
-    newSelect.on("select", function (e) {
-      let selectedFeatures = this.getFeatures();
-      if (
-        e.selected.length > 0 &&
-        (e.selected[0].line || e.selected[0].drifter)
-      ) {
-        selectedFeatures.clear();
-        selectedFeatures.push(e.selected[0]);
-      }
-      if (e.selected.length == 0) {
-        props.updateState("plotEnabled", true);
-        props.action("point", props.vectorCoordinates);
-      }
-      pushSelection(selectedFeatures);
-
-      if (e.selected[0].get("type") == "area") {
-        selectedFeatures.clear();
-      }
-    });
+    const newSelect = createSelect();
     newMap.addInteraction(newSelect);
 
     newMap.on("moveend", function () {
@@ -456,6 +415,14 @@ const Map = forwardRef((props, ref) => {
 
     newSelect.on("select", function (e) {
       let selectedFeatures = this.getFeatures();
+      if (selectedFeatures.getLength() === 0) {
+        return;
+      }
+
+      let shiftHeld = e.mapBrowserEvent.originalEvent.shiftKey;
+      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)
@@ -464,9 +431,9 @@ const Map = forwardRef((props, ref) => {
         selectedFeatures.push(e.selected[0]);
       }
       if (e.selected.length == 0) {
-        props.updateState("plotEnabled", true);
         props.action("point", props.vectorCoordinates);
       }
+
       pushSelection(selectedFeatures);
 
       if (e.selected[0].get("type") == "area") {
@@ -773,7 +740,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) => {