Refactor to fm-map-feature-thumbnail

package-lock.json

@@ -1865,25 +1865,25 @@
       }
     },
     "@farmmaps/common": {
-      "version": "0.0.1-prerelease.573",
+      "version": "0.0.1-prerelease.575",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.573.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.575.tgz",
-      "integrity": "sha512-fWw9UvNBqk1joN17u4ALQQs5jAAhX7858ThSmDZsuk2Md9KTbtiJVTZ0Y/FWmD8e90NvMLOLaTJd4p2/CvxZOA==",
+      "integrity": "sha512-Q0mpZG5u3cllQOONJuFfp4djkCsSmh2mOHPnePcn60vrxTkr02nyobmLbq7FG7aGJkT4g4dyYMU7xxLS2fLnrA==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@farmmaps/common-map": {
-      "version": "0.0.1-prerelease.573",
+      "version": "0.0.1-prerelease.575",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.573.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.575.tgz",
-      "integrity": "sha512-txt8hxAwpifH3TVUqF6eFUWHlMn6Sp3pUCbcIzs+6PUwrRgiAUFyeVZEQxGpUeW2j46CtUKBvkkQAIr9JBnqAQ==",
+      "integrity": "sha512-Mfc4A6BpRuHbtM3RlEUvZya1UHTfNhRpul3hFzEZ/zoo3pnO/iGDaUb0gi4TFsKEUDONezspKK3Gpy7KuaMsbA==",
       "requires": {
         "tslib": "^2.0.0"
       }
     },
     "@farmmaps/common-map3d": {
-      "version": "0.0.1-prerelease.573",
+      "version": "0.0.1-prerelease.575",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.573.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.575.tgz",
-      "integrity": "sha512-MDk05xeXdxlrNFXoxWA+5esG8MoDrIglrzyGz313agwYVyE8jPVELq8YMZmNTfvWof4W7KXiPYpvJAG2goJVUw==",
+      "integrity": "sha512-4Tg+DVqrvxj5oKXtxDmlva7pnR4mgdTB2QYB/aPn1gaOpjPKRN7UnBX512k4GYYuKCOwuIH9ve3WeH2DIrGW3g==",
       "requires": {
         "tslib": "^2.0.0"
       }
@@ -6639,7 +6639,8 @@
     },
     "ini": {
       "version": "1.3.5",
-      "resolved": "",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
       "dev": true
     },
     "injection-js": {

package.json

@@ -19,9 +19,9 @@
     "@angular/platform-browser": "~10.2.4",
     "@angular/platform-browser-dynamic": "~10.2.4",
     "@angular/router": "~10.2.4",
-    "@farmmaps/common": ">=0.0.1-prerelease.573 <0.0.1",
+    "@farmmaps/common": ">=0.0.1-prerelease.575 <0.0.1",
-    "@farmmaps/common-map": ">=0.0.1-prerelease.573 <0.0.1",
+    "@farmmaps/common-map": ">=0.0.1-prerelease.575 <0.0.1",
-    "@farmmaps/common-map3d": ">=0.0.1-prerelease.573 <0.0.1",
+    "@farmmaps/common-map3d": ">=0.0.1-prerelease.575 <0.0.1",
     "@microsoft/signalr": "^3.1.3",
     "@ng-bootstrap/ng-bootstrap": "^7.0",
     "@ngrx/effects": "^10.0",

projects/common-map/src/fm-map/common-map.module.ts

@@ -71,6 +71,7 @@ import {StatisticsDetailsComponent} from './components/legend/statistics-details
 import { ifZoomToShowDirective} from './components/if-zoom-to-show/if-zoom-to-show.directive';
 import { ZoomToShowAlert} from './components/zoom-to-show-alert/zoom-to-show-alert.component';
 import { LayerValuesComponent } from './components/aol/layer-values/layer-values.component';
+import { GeometryThumbnailComponent } from './components/feature-thumbnail/feature-thumbnail.component';
 
 export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
   const r = function(state, action) {
@@ -209,7 +210,8 @@ export {
     StatisticsDetailsComponent,
     ifZoomToShowDirective,
     ZoomToShowAlert,
-    LayerValuesComponent
+    LayerValuesComponent,
+    GeometryThumbnailComponent
   ],
   entryComponents: [
     FeatureListComponent,

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.html

@@ -1,12 +1,14 @@
-<div *ngIf="feature;let feature" class="d-flex m-0">  
+<div *ngIf="feature;let feature" class="d-flex m-0">
   <div class="p-2">
-    <div #container class="thumbnail">
+    <div class="thumbnail">
-      <canvas  #canvas ></canvas>
+      <fm-map-feature-thumbnail [feature]="feature"></fm-map-feature-thumbnail>
-  </div>
+    </div>
   </div>
   <div class="flex-grow p-2 overflow-hidden">
     <h1 class="card-title" title="{{feature.get('name')}}">{{feature.get('name')}}</h1>
-    <div class="card-text"><span>{{areaInHa(feature)| number:'1.2-2'}} ha</span>&nbsp;<span>{{feature.get('cropTypeName')}}</span> </div>
+    <div class="card-text"><span>{{areaInHa(feature)| number:'1.2-2'}}
-    <div class="card-text"><span>{{feature.get('datadate')|date}}</span> - <span>{{feature.get('dataenddate')|date}}</span> </div>
+        ha</span>&nbsp;<span>{{feature.get('cropTypeName')}}</span> </div>
+    <div class="card-text"><span>{{feature.get('datadate')|date}}</span> -
+      <span>{{feature.get('dataenddate')|date}}</span> </div>
   </div>
-</div>
+</div>

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts

@@ -1,14 +1,12 @@
 import { Component, Injectable,ViewChild,AfterViewInit} from '@angular/core';
 import { Feature } from 'ol';
-import * as extent from 'ol/extent';
-import * as render from 'ol/render';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
 import { commonReducers,ItemTypeService,AppConfig } from '@farmmaps/common';
 import { AbstractFeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import {getArea} from 'ol/sphere';
-import * as style from 'ol/style';
+
 
 
 @ForItemType("vnd.farmmaps.itemtype.cropfield")
@@ -18,10 +16,8 @@ import * as style from 'ol/style';
   templateUrl: './feature-list-feature-cropfield.component.html',
   styleUrls: ['./feature-list-feature-cropfield.component.scss']
 })
-export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFeatureComponent implements AfterViewInit {
+export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFeatureComponent {
 
-  @ViewChild('canvas') canvas;
-  @ViewChild('container') container;
 
   constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService,config:AppConfig) {
     super(store, itemTypeService,config);
@@ -34,42 +30,4 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
     if(a) return a;
     return  getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
   }
-
-
-  render(canvas,width,height,feature:Feature) {  
-    let renderContext = render.toContext(canvas.getContext( '2d'),{ size: [width, height] });  
-   
-    let strokeStyle  = new style.Style({
-      stroke: new style.Stroke({ color: 'black',width:1.5 })
-    });
-
-    let geom   = feature.getGeometry().clone(),
-        line   = geom.getCoordinates()[0],
-        e = extent.boundingExtent( line );
-
-    let dxy = extent.getCenter(e),
-        sxy = [ 
-            (width - 2 ) / extent.getWidth(e),
-            (height - 2 ) / extent.getHeight(e)
-        ];
-
-    let dx = dxy[0], 
-        dy = dxy[1],
-        sx = sxy[0],
-        sy = sxy[1];
-
-    geom.translate( -dx, -dy );
-    geom.scale( Math.min(sx, sy), -Math.min(sx, sy));
-    geom.translate( width / 2, height / 2 );
-
-    renderContext.setStyle( strokeStyle );  
-    renderContext.drawGeometry( geom );
-  }
-
-  ngAfterViewInit() {
-    this.render(this.canvas.nativeElement,
-      this.container.nativeElement.offsetWidth, 
-      this.container.nativeElement.offsetHeight,
-      this.feature);
-  }  
 }

projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.html

@@ -0,0 +1,4 @@
+<div #container class="container">
+    <canvas  #canvas ></canvas>
+</div>
+

projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.scss

@@ -0,0 +1,5 @@
+.container {
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}

projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeometryThumbnailComponent } from './feature-thumbnail.component';
+
+describe('GeometryThumbnailComponent', () => {
+  let component: GeometryThumbnailComponent;
+  let fixture: ComponentFixture<GeometryThumbnailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GeometryThumbnailComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeometryThumbnailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, OnInit,ViewChild } from '@angular/core';
+import { Feature} from 'ol';
+import { Geometry } from 'ol/geom';
+import * as extent from 'ol/extent';
+import * as render from 'ol/render';
+import * as style from 'ol/style';
+
+@Component({
+  selector: 'fm-map-feature-thumbnail',
+  templateUrl: './feature-thumbnail.component.html',
+  styleUrls: ['./feature-thumbnail.component.scss']
+})
+export class GeometryThumbnailComponent implements OnInit {
+
+  constructor() { }
+
+  @ViewChild('canvas') canvas;
+  @ViewChild('container') container;
+  @Input('feature') feature:Feature;
+
+  ngOnInit(): void {
+  }
+
+  render(canvas,width,height,geometry:Geometry) {  
+    let renderContext = render.toContext(canvas.getContext( '2d'),{ size: [width, height] });  
+   
+    let strokeStyle  = new style.Style({
+      stroke: new style.Stroke({ color: 'black',width:1.5 })
+    });
+
+    let geom   = geometry.clone(),
+        line   = geom.getCoordinates()[0],
+        e = extent.boundingExtent( line );
+
+    let dxy = extent.getCenter(e),
+        sxy = [ 
+            (width - 2 ) / extent.getWidth(e),
+            (height - 2 ) / extent.getHeight(e)
+        ];
+
+    let dx = dxy[0], 
+        dy = dxy[1],
+        sx = sxy[0],
+        sy = sxy[1];
+
+    geom.translate( -dx, -dy );
+    geom.scale( Math.min(sx, sy), -Math.min(sx, sy));
+    geom.translate( width / 2, height / 2 );
+
+    renderContext.setStyle( strokeStyle );  
+    renderContext.drawGeometry( geom );
+  }
+
+  ngAfterViewInit() {
+    this.render(this.canvas.nativeElement,
+      this.container.nativeElement.offsetWidth, 
+      this.container.nativeElement.offsetHeight,
+      this.feature.getGeometry());
+  }  
+}