Cleaned up state attrib POC

src/selectionmanager.js

@@ -28,7 +28,7 @@ const Selectionmanager = function Selectionmanager(options = {}) {
   /** The selectionmanager component itself */
   let component;
 
-  // TODO: Maybe use items instead to avoid comparing featureId directly or a property on SelectedItem?
+  /** Keeps track of highlighted features. Stores pointers to the actual features. */
   let highlightedFeatures = [];
 
   const multiselectStyleOptions = options.multiSelectionStyles || styleTypes.getStyle('multiselection');
@@ -87,6 +87,13 @@ const Selectionmanager = function Selectionmanager(options = {}) {
     });
   }
 
+  /** Helper that refreshes all urvallayers. Typically called after highlightning or symbology has changed */
+  function refreshAllLayers() {
+    urval.forEach((value) => {
+      value.getFeatureStore().changed();
+    });
+  }
+
   /**
    * Highlights the feature with fid id.
    * All other items are un-highlighted
@@ -100,19 +107,10 @@ const Selectionmanager = function Selectionmanager(options = {}) {
         highlightedFeatures = [feature];
         component.dispatch('highlight', item);
       }
-      //  feature.set('state', 'selected');
-      //  component.dispatch('highlight', item);
-      // } else {
-      //  // FIXME: Second argument should be a bool. Change to true to intentionally supress event, or remove second arg to emit the event. May affect the all other layers refresh below
-      //  feature.unset('state', 'selected');
-      // }
     });
 
-    // we need to manually refresh other layers, otherwise unselecting does not take effect until the next layer refresh.
-    // TODO: break out to a refresh all internal, or just refresh the newly highlighted and all unhighlighted layers
-    urval.forEach((value) => {
-      value.getFeatureStore().changed();
-    });
+    // We need to manually refresh all layers, otherwise selecting and unselecting does not take effect until the next layer refresh.
+    refreshAllLayers();
   }
 
   function highlightAndExpandItem(item) {
@@ -155,14 +153,17 @@ const Selectionmanager = function Selectionmanager(options = {}) {
   }
 
   function clearSelection() {
-    highlightedFeatures = [];
+    // This will trigger onItemremove for each feature and refresh layers etc
     selectedItems.clear();
     component.dispatch('cleared', null);
   }
 
+  /**
+   * Callback function that styles a feature when it is drawn.
+   * @param {any} feature
+   */
   function featureStyler(feature) {
     if (highlightedFeatures.includes(feature)) {
-      // if (feature.get('state') === 'selected') {
       return Style.createStyleRule(multiselectStyleOptions.highlighted);
     }
     return Style.createStyleRule(multiselectStyleOptions.selected);
@@ -266,6 +267,10 @@ const Selectionmanager = function Selectionmanager(options = {}) {
     return retval.join('<br>');
   }
 
+  /**
+   * Callback function called when a SelectedItem is added to selectedItems
+   * @param {any} event
+   */
   function onItemAdded(event) {
     const item = event.element;
 
@@ -289,15 +294,18 @@ const Selectionmanager = function Selectionmanager(options = {}) {
     infowindow.updateSelectionGroupFooter(selectionGroup, aggregationstring);
   }
 
+  /**
+   * Callback function called when a SelectedItem is removed from selectedItems
+   * @param {any} event
+   */
   function onItemRemoved(event) {
     const item = event.element;
 
     const selectionGroup = event.element.getSelectionGroup();
     const selectionGroupTitle = event.element.getSelectionGroupTitle();
 
     const feature = item.getFeature();
-    // FIXME: second argument should be a bool. True supresses event. 'selected' will be treated as true. Maybe correct, but not obvious.
-    // feature.unset('state', 'selected');
+    // Remove from highlighted as feature does not exist in the layer anymore
     highlightedFeatures = highlightedFeatures.filter(f => f !== feature);
 
     urval.get(selectionGroup).removeFeature(feature);
@@ -322,12 +330,8 @@ const Selectionmanager = function Selectionmanager(options = {}) {
    * @param {any} feature The feature to highlight
    */
   function highlightFeature(feature) {
-    // feature.set('state', 'selected');
-    // TODO: break out to a refresh all internal, or just refresh this layer. We only affected one layer.
     highlightedFeatures.push(feature);
-    urval.forEach((value) => {
-      value.getFeatureStore().changed();
-    });
+    refreshAllLayers();
   }
 
   function getNumberOfSelectedItems() {