From c9fac05aa66dbbda10a92f08f0c7f4d251a8fee0 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Sat, 20 Mar 2021 12:00:04 +0100 Subject: [PATCH] Refactor to fm-map-feature-thumbnail --- package-lock.json | 21 +++---- package.json | 6 +- .../src/fm-map/common-map.module.ts | 4 +- ...ture-list-feature-cropfield.component.html | 16 ++--- ...eature-list-feature-cropfield.component.ts | 46 +------------- .../feature-thumbnail.component.html | 4 ++ .../feature-thumbnail.component.scss | 5 ++ .../feature-thumbnail.component.spec.ts | 25 ++++++++ .../feature-thumbnail.component.ts | 60 +++++++++++++++++++ 9 files changed, 122 insertions(+), 65 deletions(-) create mode 100644 projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.html create mode 100644 projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.scss create mode 100644 projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.spec.ts create mode 100644 projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.ts diff --git a/package-lock.json b/package-lock.json index 71f4df4..fdd5f57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1865,25 +1865,25 @@ } }, "@farmmaps/common": { - "version": "0.0.1-prerelease.573", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.573.tgz", - "integrity": "sha512-fWw9UvNBqk1joN17u4ALQQs5jAAhX7858ThSmDZsuk2Md9KTbtiJVTZ0Y/FWmD8e90NvMLOLaTJd4p2/CvxZOA==", + "version": "0.0.1-prerelease.575", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.575.tgz", + "integrity": "sha512-Q0mpZG5u3cllQOONJuFfp4djkCsSmh2mOHPnePcn60vrxTkr02nyobmLbq7FG7aGJkT4g4dyYMU7xxLS2fLnrA==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map": { - "version": "0.0.1-prerelease.573", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.573.tgz", - "integrity": "sha512-txt8hxAwpifH3TVUqF6eFUWHlMn6Sp3pUCbcIzs+6PUwrRgiAUFyeVZEQxGpUeW2j46CtUKBvkkQAIr9JBnqAQ==", + "version": "0.0.1-prerelease.575", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.575.tgz", + "integrity": "sha512-Mfc4A6BpRuHbtM3RlEUvZya1UHTfNhRpul3hFzEZ/zoo3pnO/iGDaUb0gi4TFsKEUDONezspKK3Gpy7KuaMsbA==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map3d": { - "version": "0.0.1-prerelease.573", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.573.tgz", - "integrity": "sha512-MDk05xeXdxlrNFXoxWA+5esG8MoDrIglrzyGz313agwYVyE8jPVELq8YMZmNTfvWof4W7KXiPYpvJAG2goJVUw==", + "version": "0.0.1-prerelease.575", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.575.tgz", + "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": { diff --git a/package.json b/package.json index 4a7a512..b0bede8 100644 --- a/package.json +++ b/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-map": ">=0.0.1-prerelease.573 <0.0.1", - "@farmmaps/common-map3d": ">=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.575 <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", diff --git a/projects/common-map/src/fm-map/common-map.module.ts b/projects/common-map/src/fm-map/common-map.module.ts index cf86c72..d045795 100644 --- a/projects/common-map/src/fm-map/common-map.module.ts +++ b/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): ActionReducer { const r = function(state, action) { @@ -209,7 +210,8 @@ export { StatisticsDetailsComponent, ifZoomToShowDirective, ZoomToShowAlert, - LayerValuesComponent + LayerValuesComponent, + GeometryThumbnailComponent ], entryComponents: [ FeatureListComponent, diff --git a/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.html b/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.html index f4f6829..ff5a3ae 100644 --- a/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.html +++ b/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.html @@ -1,12 +1,14 @@ -
+
-
- -
+
+ +

{{feature.get('name')}}

-
{{areaInHa(feature)| number:'1.2-2'}} ha {{feature.get('cropTypeName')}}
-
{{feature.get('datadate')|date}} - {{feature.get('dataenddate')|date}}
+
{{areaInHa(feature)| number:'1.2-2'}} + ha {{feature.get('cropTypeName')}}
+
{{feature.get('datadate')|date}} - + {{feature.get('dataenddate')|date}}
-
+
\ No newline at end of file diff --git a/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts b/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts index 5607324..b6c4e38 100644 --- a/projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts +++ b/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, 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); - } } diff --git a/projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.html b/projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.html new file mode 100644 index 0000000..1777296 --- /dev/null +++ b/projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.html @@ -0,0 +1,4 @@ +
+ +
+ diff --git a/projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.scss b/projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.scss new file mode 100644 index 0000000..c0b4973 --- /dev/null +++ b/projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.scss @@ -0,0 +1,5 @@ +.container { + padding: 0; + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.spec.ts b/projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.spec.ts new file mode 100644 index 0000000..86b51fd --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GeometryThumbnailComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GeometryThumbnailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.ts b/projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.ts new file mode 100644 index 0000000..ec01356 --- /dev/null +++ b/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()); + } +}