Make zoom-to padding configurable per route
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details

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

View File

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

View File

@ -1,4 +1,5 @@
import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ViewComponent, MapComponent } from 'ngx-openlayers';
@ -9,12 +10,24 @@ import { ViewComponent, MapComponent } from 'ngx-openlayers';
export class ZoomToExtentComponent implements OnChanges {
view: ViewComponent;
map: MapComponent;
paddingTop: number = 0;
paddingLeft: number = 0;
paddingBottom: number = 0;
paddingRight: number = 0;
@Input() extent: number[];
@Input() animate: boolean = false;
constructor(@Host() view: ViewComponent, @Host() map: MapComponent) {
constructor(@Host() view: ViewComponent, @Host() map: MapComponent,route: ActivatedRoute ) {
this.view = view;
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) {
@ -31,7 +44,7 @@ export class ZoomToExtentComponent implements OnChanges {
bottom = 5 * 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;
this.view.instance.fit(this.extent, options);
}