introduce feature management

src/app/map/map.component.html

@@ -16,21 +16,13 @@
     </div>
   </div>
   <!--  layer property area-->
-  <div class="layer-property-area">
+  <div>
     <mat-card>
       <mat-card-header>
         <mat-card-title>Layer Properties</mat-card-title>
       </mat-card-header>
       <mat-card-content>
-        <div *ngFor="let item of currentFeatureInfo | keyvalue" class="entry">
-          {{item.key}}
-          <br>
-          {{item.value}}
-          <div class="controls">
-            <i class="material-icons">edit</i>
-            <i class="material-icons">delete</i>
-          </div>
-        </div>
+       <lm-feature-manager [curFeature]="cache.selectedFeature"></lm-feature-manager>
       </mat-card-content>
     </mat-card>
   </div>

src/app/map/map.component.scss

@@ -71,25 +71,6 @@
       transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
     }
   }
-
-  .layer-property-area {
-
-    .mat-card-content {
-
-      .entry {
-        display: flex;
-        height: 3rem;
-        align-items: center;
-        margin: 0 0 .125rem 0;
-        border: 1px black solid;
-        padding: .5rem;
-
-        .controls {
-          margin-left: auto;
-        }
-      }
-    }
-  }
 }
 
 .cdk-drag-preview {

src/app/map/map.component.ts

@@ -17,6 +17,7 @@ import {Feature} from 'ol/Feature';
 import Style from 'ol/style/Style';
 import Stroke from 'ol/style/Stroke';
 import Fill from 'ol/style/Fill';
+import {FeatureManagerComponent} from "../feature-management/feature-manager/feature-manager.component";
 
 /**
  * TODO: add description
@@ -29,6 +30,7 @@ import Fill from 'ol/style/Fill';
 export class MapComponent implements OnInit {
 
   @ViewChild('mapContainer') mapContainer: ElementRef<HTMLDivElement>;
+  @ViewChild(FeatureManagerComponent) featureManager: FeatureManagerComponent;
   public map: Map;
   public baseLayer: TileLayer;
 
@@ -49,15 +51,10 @@ export class MapComponent implements OnInit {
    */
   public cursorCoordinates: string;
 
-  /**
-   * The properties of the current feature. The current layer is the layer beneath the cursor.
-   */
-  public currentFeatureInfo: any;
-
   /**
    * A simple cache that holds different Features and styles
    */
-  private cache : { [key: string]: Feature | Style } = {
+  private cache: { [key: string]: Feature | Style } = {
     /**
      * Contains the feature that is currently selected
      */
@@ -76,12 +73,12 @@ export class MapComponent implements OnInit {
     /**
      * Default style for selected feature
      */
-    defaultSelectedStyle : null,
+    defaultSelectedStyle: null,
 
     /**
      * Default style for a highlighted feauture
      */
-    defaultHighlightStyle:null
+    defaultHighlightStyle: null
   };
 
 
@@ -157,7 +154,7 @@ export class MapComponent implements OnInit {
       const features = this.map.getFeaturesAtPixel(pixel);
       if (features && features.length > 0) {
         this.map.getTargetElement().style.cursor = 'pointer';
-        this.displayFeatureInfo(features[0]);
+        this.featureManager.curFeature = features[0];
         this.highlightFeature(features[0]);
       } else {
         this.map.getTargetElement().style.cursor = '';
@@ -168,7 +165,7 @@ export class MapComponent implements OnInit {
         // reset cache for feature and style
         this.cache.lastHighlightedFeature = null;
         this.cache.lastHighlightedStyle = null;
-        this.currentFeatureInfo = null;
+        this.featureManager.curFeature = null;
       }
     });
 
@@ -177,31 +174,21 @@ export class MapComponent implements OnInit {
       const pixel = this.map.getEventPixel(evt.originalEvent);
       const features = this.map.getFeaturesAtPixel(pixel);
 
-        if (this.cache.selectedFeature) {
-          // use lastHighlightedStyle because the original style is saved there
-          this.cache.selectedFeature.setStyle(this.cache.lastHighlightedStyle);
-          // this.styleCache['lastHighlightedStyle'] = null;
-          this.cache.selectedFeature = null;
-        } else if (features && features.length > 0) {
-          this.map.getTargetElement().style.cursor = '';
-          this.displayFeatureInfo(features[0]);
-          this.cache.selectedFeature = features[0];
-          this.cache.lastHighlightedFeature = null;
-          features[0].setStyle(this.cache.defaultSelectedStyle);
-        }
+      if (this.cache.selectedFeature) {
+        // use lastHighlightedStyle because the original style is saved there
+        this.cache.selectedFeature.setStyle(this.cache.lastHighlightedStyle);
+        // this.styleCache['lastHighlightedStyle'] = null;
+        this.cache.selectedFeature = null;
+      } else if (features && features.length > 0) {
+        this.map.getTargetElement().style.cursor = '';
+        this.featureManager.curFeature = features[0];
+        this.cache.selectedFeature = features[0];
+        this.cache.lastHighlightedFeature = null;
+        features[0].setStyle(this.cache.defaultSelectedStyle);
+      }
     });
   }
 
-  /**
-   * Prepared feature properties and shows them
-   * @param features
-   */
-  private displayFeatureInfo(feature: Feature) {
-    const properties = feature.getProperties();
-    delete properties.geometry;
-    this.currentFeatureInfo = properties;
-  };
-
   /**
    * Highlights a Features
    * @param feature
@@ -416,7 +403,7 @@ export class MapComponent implements OnInit {
       ]
     };
     const rawLayer = new RawLayer('Mock Data Layer', JSON.stringify(data));
-    rawLayer.saveDefaultColor([125,125,125])
+    rawLayer.saveDefaultColor([125, 125, 125])
     const customLayer = RawLayer.toVectorLayer(rawLayer);
     this.centerLayerOnMap(customLayer);
     this.customLayerCollection.push(customLayer);