feat: update to mapbox-gl 1.12.0 (#253)

Wykks · Dec 8, 2020 · eddbda7 · eddbda7
1 parent e49ae6e
commit eddbda7
Show file tree

Hide file tree

Showing 18 changed files with 694 additions and 429 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@ Include the following components:
 - [mgl-geojson-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-geojson-source-mapbox-gl-style-spec)
 - [mgl-canvas-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-canvas-source-mapbox-gl-style-spec)
 - [mgl-image-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-image-source-mapbox-gl-style-spec)
+- [mgl-raster-dem-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-raster-dem-source-mapbox-gl-style-spec)
 - [mgl-raster-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-raster-source-mapbox-gl-style-spec)
 - [mgl-vector-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-vector-source-mapbox-gl-style-spec)
 - [mgl-video-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-video-source-mapbox-gl-style-spec)

diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "@ngrx/store-devtools": "^9.2.0",
     "@stackblitz/sdk": "^1.3.0",
     "lodash-es": "^4.17.11",
-    "mapbox-gl": "^1.1.0",
+    "mapbox-gl": "^1.12.0",
     "ngx-md": "^8.0.0",
     "rxjs": "^6.5.2",
     "scroll-into-view-if-needed": "^2.2.20",
@@ -69,7 +69,7 @@
     "@types/jasmine": "^3.3.13",
     "@types/jasminewd2": "^2.0.6",
     "@types/lodash-es": "^4.17.3",
-    "@types/mapbox-gl": "^1.5.2",
+    "@types/mapbox-gl": "^1.12.5",
     "angular-cli-ghpages": "^0.6.0",
     "codelyzer": "^6.0.0",
     "commitizen": "^4.0.3",

diff --git a/projects/ngx-mapbox-gl/package.json b/projects/ngx-mapbox-gl/package.json
@@ -22,7 +22,7 @@
   "peerDependencies": {
     "@angular/common": ">= 8.0.0 < 11.0.0",
     "@angular/core": ">= 8.0.0 < 11.0.0",
-    "mapbox-gl": "^1.1.0",
+    "mapbox-gl": "^1.12.0",
     "rxjs": "^6.5.0"
   },
   "dependencies": {

diff --git a/projects/ngx-mapbox-gl/src/lib/layer/layer.component.ts b/projects/ngx-mapbox-gl/src/lib/layer/layer.component.ts
@@ -1,70 +1,43 @@
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
-import {
-  BackgroundLayout,
-  BackgroundPaint,
-  CircleLayout,
-  CirclePaint,
-  FillExtrusionLayout,
-  FillExtrusionPaint,
-  FillLayout,
-  FillPaint,
-  GeoJSONSource,
-  GeoJSONSourceRaw,
-  ImageSource,
-  Layer,
-  LineLayout,
-  LinePaint,
-  RasterLayout,
-  RasterPaint,
-  RasterSource,
-  SymbolLayout,
-  SymbolPaint,
-  VectorSource,
-  VideoSource,
-  MapLayerMouseEvent,
-} from 'mapbox-gl';
+import { EventData, Layer, MapLayerMouseEvent, MapLayerTouchEvent } from 'mapbox-gl';
 import { fromEvent, Subscription } from 'rxjs';
 import { filter, mapTo, switchMap, startWith } from 'rxjs/operators';
-import { MapService } from '../map/map.service';
+import { MapService, SetupLayer } from '../map/map.service';
+import { LayerEvents } from '../map/map.types';
 
 @Component({
   selector: 'mgl-layer',
   template: '',
 })
-export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
+export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer, LayerEvents {
   /* Init inputs */
-  @Input() id: string;
-  @Input() source?: string | VectorSource | RasterSource | GeoJSONSource | ImageSource | VideoSource | GeoJSONSourceRaw;
-  @Input() type: 'symbol' | 'fill' | 'line' | 'circle' | 'fill-extrusion' | 'raster' | 'background';
-  @Input() metadata?: any;
-  @Input() sourceLayer?: string;
+  @Input() id: Layer['id'];
+  @Input() source?: Layer['source'];
+  @Input() type: Layer['type'];
+  @Input() metadata?: Layer['metadata'];
+  @Input() sourceLayer?: Layer['source-layer'];
 
   /* Dynamic inputs */
-  @Input() filter?: any[];
-  @Input() layout?:
-    | BackgroundLayout
-    | FillLayout
-    | FillExtrusionLayout
-    | LineLayout
-    | SymbolLayout
-    | RasterLayout
-    | CircleLayout;
-  @Input() paint?:
-    | BackgroundPaint
-    | FillPaint
-    | FillExtrusionPaint
-    | LinePaint
-    | SymbolPaint
-    | RasterPaint
-    | CirclePaint;
+  @Input() filter?: Layer['filter'];
+  @Input() layout?: Layer['layout'];
+  @Input() paint?: Layer['paint'];
   @Input() before?: string;
-  @Input() minzoom?: number;
-  @Input() maxzoom?: number;
+  @Input() minzoom?: Layer['minzoom'];
+  @Input() maxzoom?: Layer['maxzoom'];
 
-  @Output() click = new EventEmitter<MapLayerMouseEvent>();
-  @Output() mouseEnter = new EventEmitter<MapLayerMouseEvent>();
-  @Output() mouseLeave = new EventEmitter<MapLayerMouseEvent>();
-  @Output() mouseMove = new EventEmitter<MapLayerMouseEvent>();
+  @Output() click = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() dblClick = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseDown = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseUp = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseEnter = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseLeave = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseMove = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseOver = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseOut = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() contextMenu = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() touchStart = new EventEmitter<MapLayerTouchEvent & EventData>();
+  @Output() touchEnd = new EventEmitter<MapLayerTouchEvent & EventData>();
+  @Output() touchCancel = new EventEmitter<MapLayerTouchEvent & EventData>();
 
   private layerAdded = false;
   private sub: Subscription;
@@ -119,7 +92,7 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
   }
 
   private init(bindEvents: boolean) {
-    const layer = {
+    const layer: SetupLayer = {
       layerOptions: {
         id: this.id,
         type: this.type,
@@ -134,9 +107,18 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
       },
       layerEvents: {
         click: this.click,
+        dblClick: this.dblClick,
+        mouseDown: this.mouseDown,
+        mouseUp: this.mouseUp,
         mouseEnter: this.mouseEnter,
         mouseLeave: this.mouseLeave,
         mouseMove: this.mouseMove,
+        mouseOver: this.mouseOver,
+        mouseOut: this.mouseOut,
+        contextMenu: this.contextMenu,
+        touchStart: this.touchStart,
+        touchEnd: this.touchEnd,
+        touchCancel: this.touchCancel,
       },
     };
     this.MapService.addLayer(layer, bindEvents, this.before);

diff --git a/projects/ngx-mapbox-gl/src/lib/map/map.component.spec.ts b/projects/ngx-mapbox-gl/src/lib/map/map.component.spec.ts
@@ -8,6 +8,8 @@ describe('MapComponent', () => {
   class MapServiceSpy {
     setup = jasmine.createSpy('setup');
     updateMinZoom = jasmine.createSpy('updateMinZoom');
+    updateMaxPitch = jasmine.createSpy('updateMaxPitch');
+    updateMinPitch = jasmine.createSpy('updateMinPitch');
     destroyMap = jasmine.createSpy('destroyMap');
     mapCreated$ = new ReplaySubject(1);
   }
@@ -62,5 +64,25 @@ describe('MapComponent', () => {
       flushMicrotasks();
       expect(msSpy.updateMinZoom).toHaveBeenCalledWith(6);
     }));
+
+    it('should update minpitch', fakeAsync(() => {
+      msSpy.mapCreated$.complete();
+      component.minPitch = 15;
+      component.ngOnChanges({
+        minPitch: new SimpleChange(null, component.minPitch, false),
+      });
+      flushMicrotasks();
+      expect(msSpy.updateMinPitch).toHaveBeenCalledWith(15);
+    }));
+
+    it('should update maxpitch', fakeAsync(() => {
+      msSpy.mapCreated$.complete();
+      component.maxPitch = 25;
+      component.ngOnChanges({
+        maxPitch: new SimpleChange(null, component.maxPitch, false),
+      });
+      flushMicrotasks();
+      expect(msSpy.updateMaxPitch).toHaveBeenCalledWith(25);
+    }));
   });
 });