fix GraticuleLayer UT; review by qiw

Author: hechangqun

src/common/overlay/graticule/GraticuleLayerRenderer.js

@@ -76,6 +76,7 @@ export class GraticuleLayerRenderer {
         this.getMapStateByKey = callbackOptions.getMapStateByKey;
         this.getDefaultExtent = callbackOptions.getDefaultExtent;
         this.setVisibility = callbackOptions.setVisibility;
+        this._updateGraticuleLayer = callbackOptions._updateGraticuleLayer;
         this.init();
     }
 

src/mapboxgl/overlay/GraticuleLayer.js

@@ -104,6 +104,7 @@ export class GraticuleLayer {
     this.renderer = new GraticuleLayerRenderer(this.map, this.options, {
       getMapStateByKey: this.getMapStateByKey,
       getDefaultExtent: this.getDefaultExtent,
+      updateGraticuleLayer: this._updateGraticuleLayer.bind(this),
       setVisibility: this.setVisibility.bind(this)
     }, {
       mapCanvas: this.map.getCanvas(),
@@ -132,7 +133,7 @@ export class GraticuleLayer {
   }
 
   onRemove() {
-    this.mapContainer.removeChild(this.canvas);
+    this.renderer.onRemove();
     this._unbindEvent();
   }
 
@@ -152,7 +153,7 @@ export class GraticuleLayer {
       this.renderer.visible = this.visible;
     }
     if (this.map.getLayer(this.sourceId)) {
-      this.map.setLayoutProperty(this.sourceId, 'visibility', this.renderer.visible ? 'visible' : 'none');
+      this.map.setLayoutProperty(this.sourceId, 'visibility', this.visible ? 'visible' : 'none');
     }
     this.renderer && this.renderer._drawLabel();
   }
@@ -193,7 +194,7 @@ export class GraticuleLayer {
    * @param {mapboxgl.LngLatBounds} extent - 经纬网渲染的边界范围。
    */
   setExtent(extent) {
-    this.options.extent = this._getDefaultExtent(extent, this.map);
+    this.options.extent = this.getDefaultExtent(extent, this.map);
     // this.features = this._getGraticuleFeatures();
     this._updateGraticuleLayer();
     this.renderer._drawLabel();
@@ -249,6 +250,10 @@ export class GraticuleLayer {
     }
   }
 
+  _getLatPoints(lngRange, firstLng, lastLng, features) {
+     return this.renderer._getLatPoints(lngRange, firstLng, lastLng, features);
+  }
+
   _bindEvent() {
     this.map.on('styledata', this.styleDataEevent);
     this.map.on('resize', this.resizeEvent);

src/maplibregl/overlay/GraticuleLayer.js

@@ -104,6 +104,7 @@ export class GraticuleLayer {
     this.renderer = new GraticuleLayerRenderer(this.map, this.options, {
       getMapStateByKey: this.getMapStateByKey,
       getDefaultExtent: this.getDefaultExtent,
+      _updateGraticuleLayer: this._updateGraticuleLayer.bind(this),
       setVisibility: this.setVisibility.bind(this)
     }, {
       mapCanvas: this.map.getCanvas(),
@@ -132,7 +133,7 @@ export class GraticuleLayer {
   }
 
   onRemove() {
-    this.mapContainer.removeChild(this.canvas);
+    this.renderer.onRemove();
     this._unbindEvent();
   }
 
@@ -152,7 +153,7 @@ export class GraticuleLayer {
       this.renderer.visible = this.visible;
     }
     if (this.map.getLayer(this.sourceId)) {
-      this.map.setLayoutProperty(this.sourceId, 'visibility', this.renderer.visible ? 'visible' : 'none');
+      this.map.setLayoutProperty(this.sourceId, 'visibility', this.visible ? 'visible' : 'none');
     }
     this.renderer && this.renderer._drawLabel();
   }
@@ -193,7 +194,7 @@ export class GraticuleLayer {
    * @param {maplibregl.LngLatBounds} extent - 经纬网渲染的边界范围。
    */
   setExtent(extent) {
-    this.options.extent = this._getDefaultExtent(extent, this.map);
+    this.options.extent = this.getDefaultExtent(extent, this.map);
     // this.features = this._getGraticuleFeatures();
     this._updateGraticuleLayer();
     this.renderer._drawLabel();
@@ -279,6 +280,10 @@ export class GraticuleLayer {
     }
   }
 
+  _getLatPoints(lngRange, firstLng, lastLng, features) {
+     return this.renderer._getLatPoints(lngRange, firstLng, lastLng, features);
+  }
+
   getDefaultExtent(extent, map = this.map) {
     const crs = (map.getCRS && map.getCRS()) || {};
     let { extent: crsExtent } = crs;

test/mapboxgl/overlay/GraticuleLayerSpec.js

@@ -64,7 +64,7 @@ describe('mapboxgl_GraticuleLayer', () => {
     it('_initialize', done => {
         setTimeout(() => {
             expect(graticuleLayer).not.toBeNull();
-            expect(graticuleLayer.canvas).not.toBeNull();
+            expect(graticuleLayer.renderer.canvas).not.toBeNull();
             expect(graticuleLayer.map).not.toBeNull();
             expect(graticuleLayer.mapContainer).not.toBeNull();
             expect(graticuleLayer.features).not.toBeNull();
@@ -123,16 +123,16 @@ describe('mapboxgl_GraticuleLayer', () => {
 
     it('setIntervals', () => {
         graticuleLayer.setIntervals(5);
-        expect(graticuleLayer.options.interval).toEqual(5);
+        expect(graticuleLayer.renderer.options.interval).toEqual(5);
     });
 
     it('_calcInterval', () => {
         const interval = map.getZoom();
         const calcInterval = map => {
             return map.getZoom();
         };
-        graticuleLayer._calcInterval(calcInterval);
-        expect(graticuleLayer._currLngInterval).toBe(interval);
+        graticuleLayer.renderer._calcInterval(calcInterval);
+        expect(graticuleLayer.renderer._currLngInterval).toBe(interval);
     });
 
     it('_getLatPoints', () => {
@@ -153,8 +153,8 @@ describe('mapboxgl_GraticuleLayer', () => {
         expect(points[0][1]).toEqual(80);
     });
 
-    it('removeFromMap', () => {
-        graticuleLayer.removeFromMap();
-        expect(graticuleLayer.canvas).toBeNull();
+    it('onRemove', () => {
+        graticuleLayer.onRemove();
+        expect(graticuleLayer.renderer.canvas).toBeNull();
     });
 });

test/maplibregl/overlay/GraticuleLayerSpec.js

@@ -64,7 +64,7 @@ describe('maplibregl_GraticuleLayer', () => {
     it('_initialize', done => {
         setTimeout(() => {
             expect(graticuleLayer).not.toBeNull();
-            expect(graticuleLayer.canvas).not.toBeNull();
+            expect(graticuleLayer.renderer.canvas).not.toBeNull();
             expect(graticuleLayer.map).not.toBeNull();
             expect(graticuleLayer.mapContainer).not.toBeNull();
             expect(graticuleLayer.features).not.toBeNull();
@@ -108,7 +108,7 @@ describe('maplibregl_GraticuleLayer', () => {
 
     it('setStrokeStyle', () => {
         graticuleLayer.setStrokeStyle({ lineWidth: 3 });
-        expect(graticuleLayer.renderer.options.strokeStyle.lineWidth).toEqual(3);
+        expect(graticuleLayer.options.strokeStyle.lineWidth).toEqual(3);
     });
 
     it('setLngLabelStyle', () => {
@@ -131,7 +131,7 @@ describe('maplibregl_GraticuleLayer', () => {
         const calcInterval = map => {
             return map.getZoom();
         };
-        graticuleLayer._calcInterval(calcInterval);
+        graticuleLayer.renderer._calcInterval(calcInterval);
         expect(graticuleLayer.renderer._currLngInterval).toBe(interval);
     });
 
@@ -153,8 +153,8 @@ describe('maplibregl_GraticuleLayer', () => {
         expect(points[0][1]).toEqual(80);
     });
 
-    it('removeFromMap', () => {
-        graticuleLayer.removeFromMap();
+    it('onRemove', () => {
+        graticuleLayer.onRemove();
         expect(graticuleLayer.renderer.canvas).toBeNull();
     });
 });