echarts-extension-gmap - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

dist/echarts-extension-gmap.cjs.js

 /*!
  * echarts-extension-gmap 
- * @version 1.5.0
+ * @version 1.6.0
  * @author plainheart
@@ -31,4 +31,2 @@ *
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var echarts = require('echarts/lib/echarts');
@@ -311,9 +309,7 @@
     var coordSys = gmapModel.coordinateSystem;
+    var renderOnMoving = gmapModel.get('renderOnMoving');
     var offsetEl = gmap.getDiv();
-    var renderOnMoving = gmapModel.get('renderOnMoving');
-    var oldWidth = offsetEl.clientWidth;
-    var oldHeight = offsetEl.clientHeight;
-    gmap.setOptions({
-      gestureHandling: gmapModel.get('roam') ? 'auto' : 'none'
-    });
+    var mapEl = offsetEl.firstChild;
+    var oldWidth = mapEl.clientWidth;
+    var oldHeight = mapEl.clientHeight;
     var renderHandler = function renderHandler() {
@@ -324,7 +320,5 @@ if (rendering) {
 
-      // need resize?
-      var width = offsetEl.clientWidth;
-      var height = offsetEl.clientHeight;
-      if (width !== oldWidth || height !== oldHeight) {
-        return resizeHandler.call(this);
+      // reduce unnecessary resize
+      if (mapEl.clientWidth !== oldWidth || mapEl.clientHeight !== oldHeight) {
+        return resizeHandler();
       }
@@ -347,16 +341,24 @@ var mapOffset = [-parseInt(offsetEl.style.left, 10) || 0, -parseInt(offsetEl.style.top, 10) || 0];
     var resizeHandler = function resizeHandler() {
-      echarts.getInstanceByDom(api.getDom()).resize();
+      // fix chart can't get resized correctly after the google map enters fullscreen
+      // See also #14
+      echarts.getInstanceByDom(api.getDom()).resize({
+        width: mapEl.clientWidth,
+        height: mapEl.clientHeight
+      });
     };
-    this._oldRenderHandler && this._oldRenderHandler.remove();
+    this._renderHandler && this._renderHandler.remove();
     if (!renderOnMoving) {
-      // TODO hide layer when moving
+      // PENDING hide layer when rendering
       renderHandler = echarts.throttle(renderHandler, 100, true);
       resizeHandler = echarts.throttle(resizeHandler, 100, true);
     }
-    this._oldRenderHandler = google.maps.event.addListener(gmap, 'gmaprender', renderHandler);
+    this._renderHandler = google.maps.event.addListener(gmap, renderOnMoving ? 'gmaprender' : 'idle', renderHandler);
+    gmap.setOptions({
+      gestureHandling: gmapModel.get('roam') ? 'auto' : 'none'
+    });
     rendering = false;
   },
   dispose: function dispose() {
-    this._oldRenderHandler && this._oldRenderHandler.remove();
-    this._oldRenderHandler = null;
+    this._renderHandler && this._renderHandler.remove();
+    delete this._renderHandler;
     var component = this.__model;
@@ -389,3 +391,3 @@ if (!component) {
 var name = "echarts-extension-gmap";
-var version = "1.5.0";
+var version = "1.6.0";
 
@@ -392,0 +394,0 @@ /**

dist/echarts-extension-gmap.esm.js

 /*!
  * echarts-extension-gmap 
- * @version 1.5.0
+ * @version 1.6.0
  * @author plainheart
@@ -307,9 +307,7 @@ *
     var coordSys = gmapModel.coordinateSystem;
+    var renderOnMoving = gmapModel.get('renderOnMoving');
     var offsetEl = gmap.getDiv();
-    var renderOnMoving = gmapModel.get('renderOnMoving');
-    var oldWidth = offsetEl.clientWidth;
-    var oldHeight = offsetEl.clientHeight;
-    gmap.setOptions({
-      gestureHandling: gmapModel.get('roam') ? 'auto' : 'none'
-    });
+    var mapEl = offsetEl.firstChild;
+    var oldWidth = mapEl.clientWidth;
+    var oldHeight = mapEl.clientHeight;
     var renderHandler = function renderHandler() {
@@ -320,7 +318,5 @@ if (rendering) {
 
-      // need resize?
-      var width = offsetEl.clientWidth;
-      var height = offsetEl.clientHeight;
-      if (width !== oldWidth || height !== oldHeight) {
-        return resizeHandler.call(this);
+      // reduce unnecessary resize
+      if (mapEl.clientWidth !== oldWidth || mapEl.clientHeight !== oldHeight) {
+        return resizeHandler();
       }
@@ -343,16 +339,24 @@ var mapOffset = [-parseInt(offsetEl.style.left, 10) || 0, -parseInt(offsetEl.style.top, 10) || 0];
     var resizeHandler = function resizeHandler() {
-      getInstanceByDom(api.getDom()).resize();
+      // fix chart can't get resized correctly after the google map enters fullscreen
+      // See also #14
+      getInstanceByDom(api.getDom()).resize({
+        width: mapEl.clientWidth,
+        height: mapEl.clientHeight
+      });
     };
-    this._oldRenderHandler && this._oldRenderHandler.remove();
+    this._renderHandler && this._renderHandler.remove();
     if (!renderOnMoving) {
-      // TODO hide layer when moving
+      // PENDING hide layer when rendering
       renderHandler = throttle(renderHandler, 100, true);
       resizeHandler = throttle(resizeHandler, 100, true);
     }
-    this._oldRenderHandler = google.maps.event.addListener(gmap, 'gmaprender', renderHandler);
+    this._renderHandler = google.maps.event.addListener(gmap, renderOnMoving ? 'gmaprender' : 'idle', renderHandler);
+    gmap.setOptions({
+      gestureHandling: gmapModel.get('roam') ? 'auto' : 'none'
+    });
     rendering = false;
   },
   dispose: function dispose() {
-    this._oldRenderHandler && this._oldRenderHandler.remove();
-    this._oldRenderHandler = null;
+    this._renderHandler && this._renderHandler.remove();
+    delete this._renderHandler;
     var component = this.__model;
@@ -385,3 +389,3 @@ if (!component) {
 var name = "echarts-extension-gmap";
-var version = "1.5.0";
+var version = "1.6.0";
 
@@ -388,0 +392,0 @@ /**

dist/echarts-extension-gmap.js

 /*!
  * echarts-extension-gmap 
- * @version 1.5.0
+ * @version 1.6.0
  * @author plainheart
@@ -310,9 +310,7 @@ *
       var coordSys = gmapModel.coordinateSystem;
+      var renderOnMoving = gmapModel.get('renderOnMoving');
       var offsetEl = gmap.getDiv();
-      var renderOnMoving = gmapModel.get('renderOnMoving');
-      var oldWidth = offsetEl.clientWidth;
-      var oldHeight = offsetEl.clientHeight;
-      gmap.setOptions({
-        gestureHandling: gmapModel.get('roam') ? 'auto' : 'none'
-      });
+      var mapEl = offsetEl.firstChild;
+      var oldWidth = mapEl.clientWidth;
+      var oldHeight = mapEl.clientHeight;
       var renderHandler = function renderHandler() {
@@ -323,7 +321,5 @@ if (rendering) {
 
-        // need resize?
-        var width = offsetEl.clientWidth;
-        var height = offsetEl.clientHeight;
-        if (width !== oldWidth || height !== oldHeight) {
-          return resizeHandler.call(this);
+        // reduce unnecessary resize
+        if (mapEl.clientWidth !== oldWidth || mapEl.clientHeight !== oldHeight) {
+          return resizeHandler();
         }
@@ -346,16 +342,24 @@ var mapOffset = [-parseInt(offsetEl.style.left, 10) || 0, -parseInt(offsetEl.style.top, 10) || 0];
       var resizeHandler = function resizeHandler() {
-        echarts.getInstanceByDom(api.getDom()).resize();
+        // fix chart can't get resized correctly after the google map enters fullscreen
+        // See also #14
+        echarts.getInstanceByDom(api.getDom()).resize({
+          width: mapEl.clientWidth,
+          height: mapEl.clientHeight
+        });
       };
-      this._oldRenderHandler && this._oldRenderHandler.remove();
+      this._renderHandler && this._renderHandler.remove();
       if (!renderOnMoving) {
-        // TODO hide layer when moving
+        // PENDING hide layer when rendering
         renderHandler = echarts.throttle(renderHandler, 100, true);
         resizeHandler = echarts.throttle(resizeHandler, 100, true);
       }
-      this._oldRenderHandler = google.maps.event.addListener(gmap, 'gmaprender', renderHandler);
+      this._renderHandler = google.maps.event.addListener(gmap, renderOnMoving ? 'gmaprender' : 'idle', renderHandler);
+      gmap.setOptions({
+        gestureHandling: gmapModel.get('roam') ? 'auto' : 'none'
+      });
       rendering = false;
     },
     dispose: function dispose() {
-      this._oldRenderHandler && this._oldRenderHandler.remove();
-      this._oldRenderHandler = null;
+      this._renderHandler && this._renderHandler.remove();
+      delete this._renderHandler;
       var component = this.__model;
@@ -388,3 +392,3 @@ if (!component) {
   var name = "echarts-extension-gmap";
-  var version = "1.5.0";
+  var version = "1.6.0";
 
@@ -450,5 +454,3 @@ /**
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));
 //# sourceMappingURL=echarts-extension-gmap.js.map

dist/echarts-extension-gmap.min.js

 /*!
  * echarts-extension-gmap 
- * @version 1.5.0
+ * @version 1.6.0
  * @author plainheart
@@ -29,3 +29,3 @@ *
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("echarts/lib/echarts")):"function"==typeof define&&define.amd?define(["exports","echarts"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).echarts=e.echarts||{},e.echarts.gmap={}),e.echarts)}(this,(function(e,t){"use strict";var o=t.version.split("."),n=o[0]>4,r="gmap";function i(e,o){return o=o||[0,0],t.util.map([0,1],(function(t){var n=o[t],r=e[t]/2,i=[],a=[];return i[t]=n-r,a[t]=n+r,i[1-t]=a[1-t]=o[1-t],Math.abs(this.dataToPoint(i)[t]-this.dataToPoint(a)[t])}),this)}function a(e,t){this._gmap=e,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=t}var s,l=a.prototype,p=["echartsLayerZIndex","renderOnMoving"];function g(e,t){var o=t.__overlayProjection;return o?o.fromLatLngToContainerPixel(e):new google.maps.Point(-1/0,-1/0)}l.setZoom=function(e){this._zoom=e},l.setCenter=function(e){var t=new google.maps.LatLng(e[1],e[0]);this._center=g(t,this._gmap)},l.setMapOffset=function(e){this._mapOffset=e},l.setGoogleMap=function(e){this._gmap=e},l.getGoogleMap=function(){return this._gmap},l.dataToPoint=function(e){var t=g(new google.maps.LatLng(e[1],e[0]),this._gmap),o=this._mapOffset;return[t.x-o[0],t.y-o[1]]},l.pointToData=function(e){var t=this._mapOffset,o=function(e,t){var o=t.__overlayProjection;if(!o)return new google.maps.Point(-1/0,-1/0);return o.fromContainerPixelToLatLng(e)}(new google.maps.Point(e[0]+t[0],e[1]+t[1]),this._gmap);return[o.lng(),o.lat()]},l.getViewRect=function(){var e=this._api;return new t.graphic.BoundingRect(0,0,e.getWidth(),e.getHeight())},l.getRoamTransform=function(){return t.matrix.create()},l.prepareCustoms=function(){var e=this.getViewRect();return{coordSys:{type:r,x:e.x,y:e.y,width:e.width,height:e.height},api:{coord:t.util.bind(this.dataToPoint,this),size:t.util.bind(i,this)}}},l.convertToPixel=function(e,t,o){return this.dataToPoint(o)},l.convertFromPixel=function(e,t,o){return this.pointToData(o)},a.create=function(e,o){var n,i=o.getDom();return e.eachComponent(r,(function(e){var r=o.getZr().painter,l=r.getViewportRoot();if("undefined"==typeof google||!google.maps||!google.maps.Map)throw new Error("Google Map API is not loaded");if(s=s||function(){function e(e,t){this._root=e,this.setMap(t)}return e.prototype=new google.maps.OverlayView,e.prototype.onAdd=function(){var e=this.getMap();e.__overlayProjection=this.getProjection(),e.getDiv().querySelector(".gm-style > div").appendChild(this._root)},e.prototype.draw=function(){google.maps.event.trigger(this.getMap(),"gmaprender")},e.prototype.onRemove=function(){this._root.parentNode.removeChild(this._root),this._root=null},e.prototype.setZIndex=function(e){this._root.style.zIndex=e},e.prototype.getZIndex=function(){return this._root.style.zIndex},e}(),n)throw new Error("Only one google map component is allowed");var g=e.getGoogleMap();if(!g){var c="ec-extension-google-map",d=i.querySelector("."+c);d&&(l.style.left="0",l.style.top="0",i.removeChild(d)),(d=document.createElement("div")).className=c,d.style.cssText="position:absolute;top:0;left:0;right:0;bottom:0",i.appendChild(d);var u=t.util.clone(e.get()),h=u.echartsLayerZIndex;t.util.each(p,(function(e){delete u[e]}));var m=u.center;t.util.isArray(m)&&(u.center={lng:m[0],lat:m[1]}),g=new google.maps.Map(d,u),e.setGoogleMap(g),e.__projectionChangeListener&&e.__projectionChangeListener.remove(),e.__projectionChangeListener=google.maps.event.addListener(g,"projection_changed",(function(){var t=e.getEChartsLayer();t&&t.setMap(null);var o=new s(l,g);o.setZIndex(h),e.setEChartsLayer(o)})),r.getViewportRootOffset=function(){return{offsetLeft:0,offsetTop:0}}}var f=e.get("center"),y=[null!=f.lng?f.lng:f[0],null!=f.lat?f.lat:f[1]],v=e.get("zoom");if(f&&v){var _=g.getCenter(),C=g.getZoom();if(e.centerOrZoomChanged([_.lng(),_.lat()],C)){var L=new google.maps.LatLng(y[1],y[0]);g.setOptions({center:L,zoom:v})}}(n=new a(g,o)).setMapOffset(e.__mapOffset||[0,0]),n.setZoom(v),n.setCenter(y),e.coordinateSystem=n})),e.eachSeries((function(e){e.get("coordinateSystem")===r&&(e.coordinateSystem=n)})),n&&[n]},l.dimensions=a.dimensions=["lng","lat"],l.type=r;var c={type:r,setGoogleMap:function(e){this.__gmap=e},getGoogleMap:function(){return this.__gmap},setEChartsLayer:function(e){this.__echartsLayer=e},getEChartsLayer:function(){return this.__echartsLayer},setCenterAndZoom:function(e,t){this.option.center=e,this.option.zoom=t},centerOrZoomChanged:function(e,t){var o,n,r=this.option;return n=r.center,!((o=e)&&n&&o[0]===n[0]&&o[1]===n[1]&&t===r.zoom)},defaultOption:{center:{lat:39.90923,lng:116.397428},zoom:5,roam:!0,echartsLayerZIndex:2e3,renderOnMoving:!0}},d=n?t.ComponentModel.extend(c):c,u={type:r,render:function(e,o,n){var r=!0,i=e.getGoogleMap(),a=n.getZr().painter.getViewportRoot(),s=e.coordinateSystem,l=i.getDiv(),p=e.get("renderOnMoving"),g=l.clientWidth,c=l.clientHeight;i.setOptions({gestureHandling:e.get("roam")?"auto":"none"});var d=function(){if(!r){if(l.clientWidth!==g||l.clientHeight!==c)return u.call(this);var t=[-parseInt(l.style.left,10)||0,-parseInt(l.style.top,10)||0];a.style.left=t[0]+"px",a.style.top=t[1]+"px",s.setMapOffset(t),e.__mapOffset=t,n.dispatchAction({type:"gmapRoam",animation:{duration:0}})}},u=function(){t.getInstanceByDom(n.getDom()).resize()};this._oldRenderHandler&&this._oldRenderHandler.remove(),p||(d=t.throttle(d,100,!0),u=t.throttle(u,100,!0)),this._oldRenderHandler=google.maps.event.addListener(i,"gmaprender",d),r=!1},dispose:function(){this._oldRenderHandler&&this._oldRenderHandler.remove(),this._oldRenderHandler=null;var e=this.__model;if(e){var t=e.getGoogleMap();if(t){delete t.__overlayProjection,google.maps.event.clearInstanceListeners(t);var o=t.getDiv();o.parentNode&&o.parentNode.removeChild(o)}e.setGoogleMap(null),e.setEChartsLayer(null),e.coordinateSystem&&(e.coordinateSystem.setGoogleMap(null),e.coordinateSystem=null)}}},h=n?t.ComponentView.extend(u):u;function m(e){(!n||5==o[0]&&o[1]<4)&&e.registerLayout((function(e){e.eachSeriesByType("pie",(function(e){var t=e.coordinateSystem,o=e.getData(),n=o.mapDimension("value");if(t&&t.type===r){var i=e.get("center"),a=t.dataToPoint(i),s=a[0],l=a[1];o.each(n,(function(e,t){var n=o.getItemLayout(t);n.cx=s,n.cy=l}))}}))})),n?e.registerComponentModel(d):e.extendComponentModel(d),n?e.registerComponentView(h):e.extendComponentView(h),e.registerCoordinateSystem(r,a),e.registerAction({type:"gmapRoam",event:"gmapRoam",update:"updateLayout"},(function(e,t){t.eachComponent(r,(function(e){var t=e.getGoogleMap(),o=t.getCenter();e.setCenterAndZoom([o.lng(),o.lat()],t.getZoom())}))}))}n?t.use(m):m(t),e.name="echarts-extension-gmap",e.version="1.5.0",Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("echarts/lib/echarts")):"function"==typeof define&&define.amd?define(["exports","echarts"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).echarts=e.echarts||{},e.echarts.gmap={}),e.echarts)}(this,(function(e,t){"use strict";var o=t.version.split("."),n=o[0]>4,r="gmap";function i(e,o){return o=o||[0,0],t.util.map([0,1],(function(t){var n=o[t],r=e[t]/2,i=[],a=[];return i[t]=n-r,a[t]=n+r,i[1-t]=a[1-t]=o[1-t],Math.abs(this.dataToPoint(i)[t]-this.dataToPoint(a)[t])}),this)}function a(e,t){this._gmap=e,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=t}var s,g=a.prototype,l=["echartsLayerZIndex","renderOnMoving"];function p(e,t){var o=t.__overlayProjection;return o?o.fromLatLngToContainerPixel(e):new google.maps.Point(-1/0,-1/0)}g.setZoom=function(e){this._zoom=e},g.setCenter=function(e){var t=new google.maps.LatLng(e[1],e[0]);this._center=p(t,this._gmap)},g.setMapOffset=function(e){this._mapOffset=e},g.setGoogleMap=function(e){this._gmap=e},g.getGoogleMap=function(){return this._gmap},g.dataToPoint=function(e){var t=p(new google.maps.LatLng(e[1],e[0]),this._gmap),o=this._mapOffset;return[t.x-o[0],t.y-o[1]]},g.pointToData=function(e){var t=this._mapOffset,o=function(e,t){var o=t.__overlayProjection;if(!o)return new google.maps.Point(-1/0,-1/0);return o.fromContainerPixelToLatLng(e)}(new google.maps.Point(e[0]+t[0],e[1]+t[1]),this._gmap);return[o.lng(),o.lat()]},g.getViewRect=function(){var e=this._api;return new t.graphic.BoundingRect(0,0,e.getWidth(),e.getHeight())},g.getRoamTransform=function(){return t.matrix.create()},g.prepareCustoms=function(){var e=this.getViewRect();return{coordSys:{type:r,x:e.x,y:e.y,width:e.width,height:e.height},api:{coord:t.util.bind(this.dataToPoint,this),size:t.util.bind(i,this)}}},g.convertToPixel=function(e,t,o){return this.dataToPoint(o)},g.convertFromPixel=function(e,t,o){return this.pointToData(o)},a.create=function(e,o){var n,i=o.getDom();return e.eachComponent(r,(function(e){var r=o.getZr().painter,g=r.getViewportRoot();if("undefined"==typeof google||!google.maps||!google.maps.Map)throw new Error("Google Map API is not loaded");if(s=s||function(){function e(e,t){this._root=e,this.setMap(t)}return e.prototype=new google.maps.OverlayView,e.prototype.onAdd=function(){var e=this.getMap();e.__overlayProjection=this.getProjection(),e.getDiv().querySelector(".gm-style > div").appendChild(this._root)},e.prototype.draw=function(){google.maps.event.trigger(this.getMap(),"gmaprender")},e.prototype.onRemove=function(){this._root.parentNode.removeChild(this._root),this._root=null},e.prototype.setZIndex=function(e){this._root.style.zIndex=e},e.prototype.getZIndex=function(){return this._root.style.zIndex},e}(),n)throw new Error("Only one google map component is allowed");var p=e.getGoogleMap();if(!p){var c="ec-extension-google-map",d=i.querySelector("."+c);d&&(g.style.left="0",g.style.top="0",i.removeChild(d)),(d=document.createElement("div")).className=c,d.style.cssText="position:absolute;top:0;left:0;right:0;bottom:0",i.appendChild(d);var h=t.util.clone(e.get()),u=h.echartsLayerZIndex;t.util.each(l,(function(e){delete h[e]}));var f=h.center;t.util.isArray(f)&&(h.center={lng:f[0],lat:f[1]}),p=new google.maps.Map(d,h),e.setGoogleMap(p),e.__projectionChangeListener&&e.__projectionChangeListener.remove(),e.__projectionChangeListener=google.maps.event.addListener(p,"projection_changed",(function(){var t=e.getEChartsLayer();t&&t.setMap(null);var o=new s(g,p);o.setZIndex(u),e.setEChartsLayer(o)})),r.getViewportRootOffset=function(){return{offsetLeft:0,offsetTop:0}}}var m=e.get("center"),y=[null!=m.lng?m.lng:m[0],null!=m.lat?m.lat:m[1]],v=e.get("zoom");if(m&&v){var _=p.getCenter(),C=p.getZoom();if(e.centerOrZoomChanged([_.lng(),_.lat()],C)){var L=new google.maps.LatLng(y[1],y[0]);p.setOptions({center:L,zoom:v})}}(n=new a(p,o)).setMapOffset(e.__mapOffset||[0,0]),n.setZoom(v),n.setCenter(y),e.coordinateSystem=n})),e.eachSeries((function(e){e.get("coordinateSystem")===r&&(e.coordinateSystem=n)})),n&&[n]},g.dimensions=a.dimensions=["lng","lat"],g.type=r;var c={type:r,setGoogleMap:function(e){this.__gmap=e},getGoogleMap:function(){return this.__gmap},setEChartsLayer:function(e){this.__echartsLayer=e},getEChartsLayer:function(){return this.__echartsLayer},setCenterAndZoom:function(e,t){this.option.center=e,this.option.zoom=t},centerOrZoomChanged:function(e,t){var o,n,r=this.option;return n=r.center,!((o=e)&&n&&o[0]===n[0]&&o[1]===n[1]&&t===r.zoom)},defaultOption:{center:{lat:39.90923,lng:116.397428},zoom:5,roam:!0,echartsLayerZIndex:2e3,renderOnMoving:!0}},d=n?t.ComponentModel.extend(c):c,h={type:r,render:function(e,o,n){var i=!0,a=e.getGoogleMap(),s=n.getZr().painter.getViewportRoot(),g=e.coordinateSystem,l=e.get("renderOnMoving"),p=a.getDiv(),c=p.firstChild,d=c.clientWidth,h=c.clientHeight,u=function(){if(!i){if(c.clientWidth!==d||c.clientHeight!==h)return f();var t=[-parseInt(p.style.left,10)||0,-parseInt(p.style.top,10)||0];s.style.left=t[0]+"px",s.style.top=t[1]+"px",g.setMapOffset(t),e.__mapOffset=t,n.dispatchAction({type:r+"Roam",animation:{duration:0}})}},f=function(){t.getInstanceByDom(n.getDom()).resize({width:c.clientWidth,height:c.clientHeight})};this._renderHandler&&this._renderHandler.remove(),l||(u=t.throttle(u,100,!0),f=t.throttle(f,100,!0)),this._renderHandler=google.maps.event.addListener(a,l?"gmaprender":"idle",u),a.setOptions({gestureHandling:e.get("roam")?"auto":"none"}),i=!1},dispose:function(){this._renderHandler&&this._renderHandler.remove(),delete this._renderHandler;var e=this.__model;if(e){var t=e.getGoogleMap();if(t){delete t.__overlayProjection,google.maps.event.clearInstanceListeners(t);var o=t.getDiv();o.parentNode&&o.parentNode.removeChild(o)}e.setGoogleMap(null),e.setEChartsLayer(null),e.coordinateSystem&&(e.coordinateSystem.setGoogleMap(null),e.coordinateSystem=null)}}},u=n?t.ComponentView.extend(h):h;function f(e){(!n||5==o[0]&&o[1]<4)&&e.registerLayout((function(e){e.eachSeriesByType("pie",(function(e){var t=e.coordinateSystem,o=e.getData(),n=o.mapDimension("value");if(t&&t.type===r){var i=e.get("center"),a=t.dataToPoint(i),s=a[0],g=a[1];o.each(n,(function(e,t){var n=o.getItemLayout(t);n.cx=s,n.cy=g}))}}))})),n?e.registerComponentModel(d):e.extendComponentModel(d),n?e.registerComponentView(u):e.extendComponentView(u),e.registerCoordinateSystem(r,a),e.registerAction({type:r+"Roam",event:r+"Roam",update:"updateLayout"},(function(e,t){t.eachComponent(r,(function(e){var t=e.getGoogleMap(),o=t.getCenter();e.setCenterAndZoom([o.lng(),o.lat()],t.getZoom())}))}))}n?t.use(f):f(t),e.name="echarts-extension-gmap",e.version="1.6.0"}));
 //# sourceMappingURL=echarts-extension-gmap.min.js.map

package.json

 {
   "name": "echarts-extension-gmap",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A Google Map(https://www.google.com/maps) extension for Apache ECharts (https://github.com/apache/echarts)",
@@ -19,4 +19,4 @@ "main": "dist/echarts-extension-gmap.min.js",
   "scripts": {
-    "dev": "rollup -wc --environment NODE_ENV:development",
-    "build": "rollup -c --environment NODE_ENV:production",
+    "dev": "rollup -wc --environment NODE_ENV:development --bundleConfigAsCjs",
+    "build": "rollup -c --environment NODE_ENV:production --bundleConfigAsCjs",
     "postbuild": "node build/post-build.js",
@@ -50,13 +50,13 @@ "release": "npm run build && npm run generate:example",
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^14.1.0",
-    "echarts": "^5.4.0",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.1",
     "chalk": "^4.1.2",
-    "rollup": "^2.79.1",
-    "rollup-plugin-terser": "^7.0.2"
+    "echarts": "^5.4.2",
+    "rollup": "^3.20.2"
   }
 }

README.md

@@ -46,7 +46,13 @@ [![NPM version](https://img.shields.io/npm/v/echarts-extension-gmap.svg?style=flat)](https://www.npmjs.org/package/echarts-extension-gmap)
 
-You can also import this extension by `require` or `import` if you are using `webpack`.
+You can also import this extension by `require` or `import` if you are using webpack or any other bundler.
 
+
 ```js
+// use require
 require('echarts');
 require('echarts-extension-gmap');
+
+// use import
+import * as echarts from 'echarts';
+import 'echarts-extension-gmap';
 ```
@@ -53,0 +59,0 @@

README.zh-CN.md

@@ -46,7 +46,12 @@ [![NPM version](https://img.shields.io/npm/v/echarts-extension-gmap.svg?style=flat)](https://www.npmjs.org/package/echarts-extension-gmap)
 
-如果是 `webpack` 打包，也可以 `require` 或者 `import` 引入
+如果 `webpack` 等工具打包，也可以通过 `require` 或者 `import` 引入
 
 ```js
+// 使用 require
 require('echarts');
 require('echarts-extension-gmap');
+
+// 使用 import
+import * as echarts from 'echarts';
+import 'echarts-extension-gmap';
 ```
@@ -53,0 +58,0 @@

src/GMapView.js

@@ -15,11 +15,8 @@ /* global google */
     const coordSys = gmapModel.coordinateSystem
+    const renderOnMoving = gmapModel.get('renderOnMoving')
     const offsetEl = gmap.getDiv()
-    const renderOnMoving = gmapModel.get('renderOnMoving')
-    const oldWidth = offsetEl.clientWidth
-    const oldHeight = offsetEl.clientHeight
+    const mapEl = offsetEl.firstChild
+    const oldWidth = mapEl.clientWidth
+    const oldHeight = mapEl.clientHeight
 
-    gmap.setOptions({
-      gestureHandling: gmapModel.get('roam') ? 'auto' : 'none'
-    })
-
     let renderHandler = function() {
@@ -30,7 +27,5 @@ if (rendering) {
 
-      // need resize?
-      const width = offsetEl.clientWidth
-      const height = offsetEl.clientHeight
-      if (width !== oldWidth || height !== oldHeight) {
-        return resizeHandler.call(this)
+      // reduce unnecessary resize
+      if (mapEl.clientWidth !== oldWidth || mapEl.clientHeight !== oldHeight) {
+        return resizeHandler()
       }
@@ -60,14 +55,26 @@
     let resizeHandler = function() {
-      getInstanceByDom(api.getDom()).resize()
+      // fix chart can't get resized correctly after the google map enters fullscreen
+      // See also #14
+      getInstanceByDom(api.getDom()).resize({
+        width: mapEl.clientWidth,
+        height: mapEl.clientHeight
+      })
     }
 
-    this._oldRenderHandler && this._oldRenderHandler.remove()
+    this._renderHandler && this._renderHandler.remove()
 
     if (!renderOnMoving) {
-      // TODO hide layer when moving
+      // PENDING hide layer when rendering
       renderHandler = throttle(renderHandler, 100, true)
       resizeHandler = throttle(resizeHandler, 100, true)
     }
+    this._renderHandler = google.maps.event.addListener(
+      gmap,
+      renderOnMoving ? 'gmaprender' : 'idle',
+      renderHandler
+    )
 
-    this._oldRenderHandler = google.maps.event.addListener(gmap, 'gmaprender', renderHandler)
+    gmap.setOptions({
+      gestureHandling: gmapModel.get('roam') ? 'auto' : 'none'
+    })
 
@@ -78,4 +85,4 @@ rendering = false
   dispose() {
-    this._oldRenderHandler && this._oldRenderHandler.remove()
-    this._oldRenderHandler = null
+    this._renderHandler && this._renderHandler.remove()
+    delete this._renderHandler
 
@@ -82,0 +89,0 @@ const component = this.__model

types.d.ts

 declare const name = 'echarts-extension-gmap'
-declare const version = '1.5.0'
+declare const version = '1.6.0'
 
@@ -4,0 +4,0 @@ interface InnerGoogleMapComponentOption {

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

200540

increased by0.71%

Lines of code

1835

increased by0.99%

Number of lines in readme file

132

increased by4.76%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes