feature: new multiselectionstyle for features in active layer (#1846)

* New multiselectionstyle, inActiveLayer New multiselectionstyle, inActiveLayer * Update infowindow.js * Update infowindow.js * Merge from master * Skip state property * Fix for listlayout * Update infowindow_expandableList.js * Update selectionmanager.js * Update selectionmanager.js
origo-map · Oct 31, 2023 · e06b796 · e06b796
1 parent 65fdb72
commit e06b796
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 26 deletions.
diff --git a/src/featurelayer.js b/src/featurelayer.js
@@ -11,7 +11,7 @@ export default function featurelayer(features, map) {
   const featureLayer = new VectorLayer({
     source: featureLayerStore,
     map,
-    zIndex: 1
+    zIndex: 9
   });
   return {
     addFeature: function addFeature(feature) {

diff --git a/src/infowindow.js b/src/infowindow.js
@@ -40,6 +40,10 @@ function showInfowindow() {
   mainContainer.classList.remove('hidden');
 }
 
+function getActiveSelectionGroup() {
+  return activeSelectionGroup;
+}
+
 function makeElementDraggable(elm) {
   const elmnt = elm;
   let pos1 = 0;
@@ -155,6 +159,22 @@ function render(viewerId) {
   makeElementDraggable(mainContainer);
 }
 
+function highlightListElement(featureId) {
+  sublists.forEach((sublist) => {
+    const elements = sublist.getElementsByClassName('listelement');
+    for (let index = 0; index < elements.length; index += 1) {
+      const element = elements[index];
+      if (element.id === featureId) {
+        setTimeout(() => {
+          element.classList.add('highlighted');
+        }, 100);
+      } else {
+        element.classList.remove('highlighted');
+      }
+    }
+  });
+}
+
 function showSelectedList(selectionGroup) {
   if (activeSelectionGroup === selectionGroup) {
     return;
@@ -179,14 +199,16 @@ function showSelectedList(selectionGroup) {
   }
   const subexportToAppend = subexports.get(selectionGroup);
   exportContainer.appendChild(subexportToAppend);
-
+  selectionManager.clearHighlightedFeatures();
+  selectionManager.refreshAllLayers();
   urvalElements.forEach((value, key) => {
     if (key === selectionGroup) {
       value.classList.add('selectedurvalelement');
     } else {
       value.classList.remove('selectedurvalelement');
     }
   });
+  highlightListElement();
 }
 
 /**
@@ -216,22 +238,6 @@ function createUrvalElement(selectionGroup, selectionGroupTitle) {
   subexports.set(selectionGroup, subexportComponent);
 }
 
-function highlightListElement(featureId) {
-  sublists.forEach((sublist) => {
-    const elements = sublist.getElementsByClassName('listelement');
-    for (let index = 0; index < elements.length; index += 1) {
-      const element = elements[index];
-      if (element.id === featureId) {
-        setTimeout(() => {
-          element.classList.add('highlighted');
-        }, 100);
-      } else {
-        element.classList.remove('highlighted');
-      }
-    }
-  });
-}
-
 function createExpandableContent(listElementContentContainer, content, elementId) {
   const items = content.querySelectorAll('ul > li');
   const foldedItems = [];
@@ -424,6 +430,7 @@ function init(options) {
   render(options.viewer.getId());
 
   return {
+    getActiveSelectionGroup,
     createListElement,
     removeListElement,
     expandListElement,

diff --git a/src/infowindow_expandableList.js b/src/infowindow_expandableList.js
@@ -66,6 +66,10 @@ function showInfowindow() {
   mainContainer.classList.remove('hidden');
 }
 
+function getActiveSelectionGroup() {
+  return activeSelectionGroup;
+}
+
 function makeElementDraggable(elm) {
   const elmnt = elm;
   let pos1 = 0;
@@ -166,12 +170,13 @@ function render(viewerId) {
   makeElementDraggable(mainContainer);
 }
 
+// This function actually does nothing but is kept for the selectionmanager, hopefully the infowindow_expandableList.js will soon be merged with infowindow.js
 function showSelectedList(selectionGroup) {
   if (activeSelectionGroup === selectionGroup) {
     return;
   }
 
-  activeSelectionGroup = selectionGroup;
+  activeSelectionGroup = null;
 }
 
 function createUrvalElement(selectionGroup, selectionGroupTitle) {
@@ -426,6 +431,7 @@ function init(options) {
   render(options.viewer.getId());
 
   return {
+    getActiveSelectionGroup,
     createListElement,
     removeListElement,
     expandListElement,

diff --git a/src/selectionmanager.js b/src/selectionmanager.js
@@ -94,6 +94,13 @@ const Selectionmanager = function Selectionmanager(options = {}) {
     });
   }
 
+  /**
+   * Clears highlighted features
+   */
+  function clearHighlightedFeatures() {
+    highlightedFeatures = [];
+  }
+
   /**
    * Highlights the feature with fid id.
    * All other items are un-highlighted
@@ -159,19 +166,24 @@ const Selectionmanager = function Selectionmanager(options = {}) {
   }
 
   /**
-   * Callback function that styles a feature when it is drawn.
-   * @param {any} feature
+   * Returns a style function to be used when a feature is drawn.
+   * @param {any} selectionGroup
    */
-  function featureStyler(feature) {
-    if (highlightedFeatures.includes(feature)) {
-      return Style.createStyleRule(multiselectStyleOptions.highlighted);
+  function getFeatureStyler(selectionGroup) {
+    function featureStyler(feature) {
+      if (highlightedFeatures.includes(feature)) {
+        return Style.createStyleRule(multiselectStyleOptions.highlighted);
+      } else if (selectionGroup === infowindow.getActiveSelectionGroup()) {
+        return Style.createStyleRule(multiselectStyleOptions.inActiveLayer ? multiselectStyleOptions.inActiveLayer : multiselectStyleOptions.selected);
+      }
+      return Style.createStyleRule(multiselectStyleOptions.selected);
     }
-    return Style.createStyleRule(multiselectStyleOptions.selected);
+    return featureStyler;
   }
 
   function createSelectionGroup(selectionGroup, selectionGroupTitle) {
     const urvalLayer = featurelayer(null, map);
-    urvalLayer.setStyle(featureStyler);
+    urvalLayer.setStyle(getFeatureStyler(selectionGroup));
     urval.set(selectionGroup, urvalLayer);
     infowindow.createUrvalElement(selectionGroup, selectionGroupTitle);
   }
@@ -350,13 +362,15 @@ const Selectionmanager = function Selectionmanager(options = {}) {
     addOrHighlightItem,
     removeItemById,
     clearSelection,
+    clearHighlightedFeatures,
     createSelectionGroup,
     highlightFeature,
     highlightFeatureById,
     getNumberOfSelectedItems,
     getSelectedItems,
     getSelectedItemsForASelectionGroup,
     getUrval,
+    refreshAllLayers,
     onInit() {
       selectedItems = new Collection([], { unique: true });
       urval = new Map();