Make zoom-to padding configurable per route
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good

This commit is contained in:
Willem Dantuma 2021-07-21 11:17:15 +02:00
parent 8d3c098f4e
commit 519e5c9032
3 changed files with 45 additions and 32 deletions

54
package-lock.json generated
View File

@ -1657,9 +1657,9 @@
"dev": true "dev": true
}, },
"postcss": { "postcss": {
"version": "7.0.35", "version": "7.0.36",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
"integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true, "dev": true,
"requires": { "requires": {
"chalk": "^2.4.2", "chalk": "^2.4.2",
@ -4079,25 +4079,25 @@
"dev": true "dev": true
}, },
"@farmmaps/common": { "@farmmaps/common": {
"version": "1.0.1", "version": "1.1.1-prerelease.2020",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-1.0.1.tgz", "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-1.1.1-prerelease.2020.tgz",
"integrity": "sha512-ZVj+/0dVSNT1TtU+ExBFyak/Hfl8hKl5RnBWux6+v7GyHJYyaYDotbSPhszoNm6Mrz7Lt0pifCja1vUKL8w5sQ==", "integrity": "sha512-CTY27FyQoA49VJAja3PIpdRkWo2oLSxoFbVdGU3Oz3dPA3KqyMqplsiAfobrqWwsZ4SjA2r25O+92wuqA8aehA==",
"requires": { "requires": {
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
}, },
"@farmmaps/common-map": { "@farmmaps/common-map": {
"version": "1.0.1", "version": "1.1.1-prerelease.2020",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-1.0.1.tgz", "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-1.1.1-prerelease.2020.tgz",
"integrity": "sha512-yWBM/F0RLvb6hG0QEREBamYOeaPUjIYUw2tazlQoXzVtGeNm/8S0p+3l6Uw6U3z35Zk7/Ptaeb7nXsK6dOGgWg==", "integrity": "sha512-X2HBpdd4BrYFxo2pkGSK2xFIwSgBVaEzZLAmaoQ44k2loAhCIhp2aWHw88WNGxzVHeUQFToM+1aKza/zTx0VVw==",
"requires": { "requires": {
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
}, },
"@farmmaps/common-map3d": { "@farmmaps/common-map3d": {
"version": "1.0.1", "version": "1.1.1-prerelease.2020",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-1.0.1.tgz", "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-1.1.1-prerelease.2020.tgz",
"integrity": "sha512-7aD/d1s35l8QwUPn4Z4LwxoRE4qhW+1KBAxcXEorIoc4pFTR04Mx+WoYJgTYXaOjAayPjTUM7K+bpR6d0uCqMA==", "integrity": "sha512-sFw1aHFFlVjuJD6Fddo3PMMyoNXal8n0aDRDQaWXkv+CvM5HME9Fo3QnfjvKhd96fbek93C20gTCUPzUhHBK4g==",
"requires": { "requires": {
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
@ -9897,9 +9897,9 @@
} }
}, },
"lodash": { "lodash": {
"version": "4.17.20", "version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true "dev": true
}, },
"lodash.memoize": { "lodash.memoize": {
@ -11633,9 +11633,9 @@
"dev": true "dev": true
}, },
"postcss": { "postcss": {
"version": "7.0.32", "version": "7.0.36",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
"integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==", "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true, "dev": true,
"requires": { "requires": {
"chalk": "^2.4.2", "chalk": "^2.4.2",
@ -14717,9 +14717,9 @@
} }
}, },
"url-parse": { "url-parse": {
"version": "1.4.7", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz", "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
"integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==", "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
"requires": { "requires": {
"querystringify": "^2.1.1", "querystringify": "^2.1.1",
"requires-port": "^1.0.0" "requires-port": "^1.0.0"
@ -15303,9 +15303,9 @@
"dev": true "dev": true
}, },
"ws": { "ws": {
"version": "6.2.1", "version": "6.2.2",
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
"requires": { "requires": {
"async-limiter": "~1.0.0" "async-limiter": "~1.0.0"
} }
@ -15342,9 +15342,9 @@
} }
}, },
"y18n": { "y18n": {
"version": "4.0.0", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
"integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
"dev": true "dev": true
}, },
"yallist": { "yallist": {

View File

@ -19,9 +19,9 @@
"@angular/platform-browser": "~11.2.14", "@angular/platform-browser": "~11.2.14",
"@angular/platform-browser-dynamic": "~11.2.14", "@angular/platform-browser-dynamic": "~11.2.14",
"@angular/router": "~11.2.14", "@angular/router": "~11.2.14",
"@farmmaps/common": "~1.0", "@farmmaps/common": "1.1.1-prerelease.2020",
"@farmmaps/common-map": "~1.0", "@farmmaps/common-map": "1.1.1-prerelease.2020",
"@farmmaps/common-map3d": "~1.0", "@farmmaps/common-map3d": "1.1.1-prerelease.2020",
"@microsoft/signalr": "^3.1.16", "@microsoft/signalr": "^3.1.16",
"@ng-bootstrap/ng-bootstrap": "^9.0", "@ng-bootstrap/ng-bootstrap": "^9.0",
"@ngrx/effects": "^11.0", "@ngrx/effects": "^11.0",

View File

@ -1,4 +1,5 @@
import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core'; import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ViewComponent, MapComponent } from 'ngx-openlayers'; import { ViewComponent, MapComponent } from 'ngx-openlayers';
@ -9,12 +10,24 @@ import { ViewComponent, MapComponent } from 'ngx-openlayers';
export class ZoomToExtentComponent implements OnChanges { export class ZoomToExtentComponent implements OnChanges {
view: ViewComponent; view: ViewComponent;
map: MapComponent; map: MapComponent;
paddingTop: number = 0;
paddingLeft: number = 0;
paddingBottom: number = 0;
paddingRight: number = 0;
@Input() extent: number[]; @Input() extent: number[];
@Input() animate: boolean = false; @Input() animate: boolean = false;
constructor(@Host() view: ViewComponent, @Host() map: MapComponent) { constructor(@Host() view: ViewComponent, @Host() map: MapComponent,route: ActivatedRoute ) {
this.view = view; this.view = view;
this.map = map; this.map = map;
if(route && route.snapshot && route.snapshot.data && route.snapshot.data["fm-map-zoom-to-extent"]) {
let params = route.snapshot.data["fm-map-zoom-to-extent"];
this.paddingTop = params["padding-top"] ? params["padding-top"] : 0;
this.paddingBottom = params["padding-bottom"] ? params["padding-bottom"] : 0;
this.paddingLeft = params["padding-left"] ? params["padding-left"] : 0;
this.paddingRight = params["padding-right"] ? params["padding-right"] : 0;
}
} }
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
@ -31,7 +44,7 @@ export class ZoomToExtentComponent implements OnChanges {
bottom = 5 * rem; bottom = 5 * rem;
left = 23 * rem; left = 23 * rem;
} }
options.padding = [top, right, bottom, left]; options.padding = [top + (this.paddingTop*rem), right+ (this.paddingRight*rem), bottom + (this.paddingBottom*rem), left+ (this.paddingLeft*rem)];
if (this.animate) options["duration"] = 1000; if (this.animate) options["duration"] = 1000;
this.view.instance.fit(this.extent, options); this.view.instance.fit(this.extent, options);
} }