Merge pull request #24 from origo-map/addToSelectionButton

Adds addToSelection option and button
origo-map · Sep 20, 2023 · dea2440 · dea2440
2 parents a79249f + bc4bb7e
commit dea2440
Showing 1 changed file with 66 additions and 31 deletions.
diff --git a/src/multiselect.js b/src/multiselect.js
@@ -64,6 +64,8 @@ const Multiselect = function Multiselect(options = {}) {
   const useWMSFeatureInfo = options.WMSHandling && options.WMSHandling.source === 'WMS';
   const alternativeLayerConfiguration = options.alternativeLayers || [];
   const showClearButton = options.showClearButton === true;
+  const showAddToSelectionButton = options.showAddToSelectionButton === true;
+  let addToSelection = options.addToSelection !== false;
 
   function setActive(state) {
     isActive = state;
@@ -423,6 +425,37 @@ const Multiselect = function Multiselect(options = {}) {
     return selectedItems;
   }
 
+  /**
+   * Displays the circe radius when selecting by circle.
+   * */
+  function createRadiusLengthTooltip() {
+    if (radiusLengthTooltipElement) {
+      radiusLengthTooltipElement.parentNode.removeChild(radiusLengthTooltipElement);
+    }
+
+    radiusLengthTooltipElement = document.createElement('div');
+    radiusLengthTooltipElement.className = 'o-tooltip o-tooltip-measure';
+
+    radiusLengthTooltip = new Origo.ol.Overlay({
+      element: radiusLengthTooltipElement,
+      offset: [0, 0],
+      positioning: 'bottom-center',
+      stopEvent: false
+    });
+
+    map.addOverlay(radiusLengthTooltip);
+  }
+
+  function removeRadiusLengthTooltip() {
+    map.removeOverlay(radiusLengthTooltip);
+  }
+
+  function clearSelection() {
+    removeRadiusLengthTooltip();
+    temporaryLayer.clear();
+    selectionManager.clearSelection();
+  }
+
   /**
    * General function that returns all features intersecting a geometry
    * @param {any} items
@@ -467,6 +500,9 @@ const Multiselect = function Multiselect(options = {}) {
    * @param {any} remove true if selection should be removed insread of added
    */
   async function updateSelectionManager(geometry, remove) {
+    if (!addToSelection) {
+      clearSelection();
+    }
     const promises = [];
     let layers;
     const extent = geometry.getExtent();
@@ -583,31 +619,6 @@ const Multiselect = function Multiselect(options = {}) {
     });
   }
 
-  /**
-   * Displays the circe radius when selecting by circle.
-   * */
-  function createRadiusLengthTooltip() {
-    if (radiusLengthTooltipElement) {
-      radiusLengthTooltipElement.parentNode.removeChild(radiusLengthTooltipElement);
-    }
-
-    radiusLengthTooltipElement = document.createElement('div');
-    radiusLengthTooltipElement.className = 'o-tooltip o-tooltip-measure';
-
-    radiusLengthTooltip = new Origo.ol.Overlay({
-      element: radiusLengthTooltipElement,
-      offset: [0, 0],
-      positioning: 'bottom-center',
-      stopEvent: false
-    });
-
-    map.addOverlay(radiusLengthTooltip);
-  }
-
-  function removeRadiusLengthTooltip() {
-    map.removeOverlay(radiusLengthTooltip);
-  }
-
   /**
    * Event handler that updates the radius when slecting by circle
    * @param {any} e
@@ -650,6 +661,16 @@ const Multiselect = function Multiselect(options = {}) {
     createRadiusModal();
   }
 
+  function toggleAddToSelection(button) {
+    if (addToSelection) {
+      addToSelection = false;
+      button.setState('initial');
+    } else {
+      addToSelection = true;
+      button.setState('active');
+    }
+  }
+
   function toggleType(button) {
     if (activeButton) {
       document.getElementById(activeButton.getId()).classList.remove('active');
@@ -706,6 +727,9 @@ const Multiselect = function Multiselect(options = {}) {
         const geometry = createBufferedFeature(point, resolution * pointBufferFactor).getGeometry();
         updateSelectionManager(geometry, isCtrlKeyPressed);
       } else {
+        if (!addToSelection) {
+          clearSelection();
+        }
         // For backwards compability use featureInfo style when not using specific layer conf.
         // The featureInfo style will honour the alternative featureInfo layer and radius configuration in the core
         // also it unwinds clustering.
@@ -922,14 +946,13 @@ const Multiselect = function Multiselect(options = {}) {
     document.getElementById(multiselectButton.getId()).classList.add('tooltip');
 
     removeInteractions();
-    removeRadiusLengthTooltip();
-    temporaryLayer.clear();
-    selectionManager.clearSelection();
+    clearSelection();
     setActive(false);
   }
 
   return Origo.ui.Component({
     name: 'multiselection',
+    clearSelection,
     onInit() {
       if (clickSelection || boxSelection || circleSelection || polygonSelection || bufferSelection) {
         multiselectElement = Origo.ui.Element({
@@ -1048,13 +1071,25 @@ const Multiselect = function Multiselect(options = {}) {
           buttons.push(configSelectionButton);
         }
 
+        if (showAddToSelectionButton) {
+          const addToSelectionButton = Origo.ui.Button({
+            cls: 'o-multiselect-add padding-small margin-bottom-smaller icon-smaller round light box-shadow hidden',
+            click() {
+              toggleAddToSelection(this);
+            },
+            state: addToSelection ? 'active' : 'initial',
+            icon: '#ic_add_box_24px',
+            tooltipText: 'Lägg till i urval',
+            tooltipPlacement: 'east'
+          });
+          buttons.push(addToSelectionButton);
+        }
+
         if (showClearButton) {
           const clearButton = Origo.ui.Button({
             cls: 'o-multiselect-clear padding-small margin-bottom-smaller icon-smaller round light box-shadow hidden',
             click() {
-              removeRadiusLengthTooltip();
-              temporaryLayer.clear();
-              selectionManager.clearSelection();
+              clearSelection();
             },
             icon: '#ic_delete_24px',
             tooltipText: 'Rensa',