refacotor style and feature cache handling

src/app/map/map.component.ts

@@ -55,14 +55,35 @@ export class MapComponent implements OnInit {
   public currentFeatureInfo: any;
 
   /**
-   * A simple cache to save styles
+   * A simple cache that holds different Features and styles
    */
-  private styleCache: { [key: string]: Style } = {};
+  private cache : { [key: string]: Feature | Style } = {
+    /**
+     * Contains the feature that is currently selected
+     */
+    selectedFeature: null,
 
     /**
-   * A simple feature cache
+     * The feature that was highlighted at least
      */
-  private featureCache: { [key: string]: Feature } = {};
+    lastHighlightedFeature: null,
+
+    /**
+     * The style of the last highlighted feature before it was highlighted
+     */
+    lastHighlightedStyle: null,
+
+    /**
+     * Default style for selected feature
+     */
+    defaultSelectedStyle : null,
+
+    /**
+     * Default style for a highlighted feauture
+     */
+    defaultHighlightStyle:null
+  };
+
 
   constructor(public dialog: MatDialog) {
   }
@@ -129,7 +150,7 @@ export class MapComponent implements OnInit {
 
     // add event to get feature infos
     this.map.on('pointermove', (evt) => {
-      if (evt.dragging || this.featureCache['selectedFeature']) {
+      if (evt.dragging || this.cache.selectedFeature) {
         return;
       }
       const pixel = this.map.getEventPixel(evt.originalEvent);
@@ -141,12 +162,12 @@ export class MapComponent implements OnInit {
       } else {
         this.map.getTargetElement().style.cursor = '';
         // reapply original style to last highlighted feature
-        if (this.featureCache['lastHighlighted']) {
+        if (this.cache.lastHighlightedFeature) {
-          this.featureCache['lastHighlighted'].setStyle(this.styleCache['lastHighlightedStyle']);
+          this.cache.lastHighlightedFeature.setStyle(this.cache.lastHighlightedStyle);
         }
         // reset cache for feature and style
-        this.featureCache['lastHighlighted'] = null;
+        this.cache.lastHighlightedFeature = null;
-        this.styleCache['lastHighlightedStyle'] = null;
+        this.cache.lastHighlightedStyle = null;
         this.currentFeatureInfo = null;
       }
     });
@@ -156,17 +177,17 @@ export class MapComponent implements OnInit {
       const pixel = this.map.getEventPixel(evt.originalEvent);
       const features = this.map.getFeaturesAtPixel(pixel);
 
-        if (this.featureCache['selectedFeature']) {
+        if (this.cache.selectedFeature) {
           // use lastHighlightedStyle because the original style is saved there
-          this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']);
+          this.cache.selectedFeature.setStyle(this.cache.lastHighlightedStyle);
           // this.styleCache['lastHighlightedStyle'] = null;
-          this.featureCache['selectedFeature'] = null;
+          this.cache.selectedFeature = null;
         } else if (features && features.length > 0) {
           this.map.getTargetElement().style.cursor = '';
           this.displayFeatureInfo(features[0]);
-          this.featureCache['selectedFeature'] = features[0];
+          this.cache.selectedFeature = features[0];
-          this.featureCache['lastHighlighted'] = null;
+          this.cache.lastHighlightedFeature = null;
-          features[0].setStyle(this.styleCache['defaultSelected']);
+          features[0].setStyle(this.cache.defaultSelectedStyle);
         }
     });
   }
@@ -187,15 +208,15 @@ export class MapComponent implements OnInit {
    */
   private highlightFeature(feature: Feature) {
     // reapply saved feature and style
-    if (this.featureCache['lastHighlighted']) {
+    if (this.cache.lastHighlightedFeature) {
-      this.featureCache['lastHighlighted'].setStyle(this.styleCache['lastHighlightedStyle']);
+      this.cache.lastHighlightedFeature.setStyle(this.cache.lastHighlightedStyle);
     }
     // save current feature and style
-    this.featureCache['lastHighlighted'] = feature;
+    this.cache.lastHighlightedFeature = feature;
-    this.styleCache['lastHighlightedStyle'] = feature.getStyle();
+    this.cache.lastHighlightedStyle = feature.getStyle();
 
     // set new feature style
-    feature.setStyle(this.styleCache['defaultHighlight']);
+    feature.setStyle(this.cache.defaultHighlightStyle);
   }
 
   /**
@@ -282,7 +303,7 @@ export class MapComponent implements OnInit {
    * Support function that inits cache values
    */
   private initCache() {
-    this.styleCache['defaultSelected'] = new Style({
+    this.cache.defaultSelectedStyle = new Style({
       stroke: new Stroke({
         color: 'rgb(245, 64, 41)',
         width: 3
@@ -292,7 +313,7 @@ export class MapComponent implements OnInit {
       })
     })
 
-    this.styleCache['defaultHighlight'] = new Style({
+    this.cache.defaultHighlightStyle = new Style({
       stroke: new Stroke({
         color: 'rgb(245, 64, 41)',
         width: 2