[fix] Reduce size due to leaflet

Signed-off-by: Sankalp <[email protected]>

Author: codesankalp

.prettierrc

@@ -2,6 +2,5 @@
   "trailingComma": "all",
   "bracketSpacing": false,
   "tabWidth": 2,
-  "printWidth": 88,
-  "insertFinalNewLine": true
-}
+  "printWidth": 88
+}

lib/js/echarts-leaflet/LeafletCoordSys.js renamed to src/js/echarts-leaflet/LeafletCoordSys.js

@@ -1,15 +1,23 @@
-import { util, graphic, matrix } from "echarts/core";
+import {util, graphic, matrix} from "echarts/core";
+import {
+  Layer,
+  DomUtil,
+  Projection,
+  LatLng,
+  map as lMap,
+  control,
+  tileLayer as lTileLayer,
+} from "leaflet";
 
 /* eslint-disable no-underscore-dangle */
 // Underscore dangling allowed to identify internal methods and variable
 /**
  * generate leaflet coord system
- * @param {object}   L       leaflet
  *
  * @return {function} LeafletCoordSys
  */
-function createLeafletCoordSystem(L) {
-  const CustomOverlay = L.Layer.extend({
+function createLeafletCoordSystem() {
+  const CustomOverlay = Layer.extend({
     initialize(container) {
       this._container = container;
     },
@@ -31,7 +39,7 @@ function createLeafletCoordSystem(L) {
     },
 
     onRemove() {
-      L.DomUtil.remove(this._container);
+      DomUtil.remove(this._container);
       // map.off('zoomend viewreset', this._update, this);
     },
 
@@ -52,7 +60,7 @@ function createLeafletCoordSystem(L) {
     this.dimensions = ["lng", "lat"];
     this._mapOffset = [0, 0];
     this._api = api;
-    this._projection = L.Projection.Mercator;
+    this._projection = Projection.Mercator;
   }
 
   function doConvert(methodName, ecModel, finder, value) {
@@ -62,10 +70,9 @@ function createLeafletCoordSystem(L) {
     const coordSys = leafletModel
       ? leafletModel.coordinateSystem
       : seriesModel
-      ? seriesModel.coordinateSystem || // For map.
-        (seriesModel.getReferringComponents("leaflet")[0] || {})
-          .coordinateSystem
-      : null;
+        ? seriesModel.coordinateSystem || // For map.
+          (seriesModel.getReferringComponents("leaflet")[0] || {}).coordinateSystem
+        : null;
     return coordSys === this ? coordSys[methodName](value) : null;
     /* eslint-enable */
   }
@@ -75,38 +82,46 @@ function createLeafletCoordSystem(L) {
   LeafletCoordSys.dimensions = ["lng", "lat"];
   LeafletCoordSys.prototype.dimensions = ["lng", "lat"];
 
+  // eslint-disable-next-line func-names
   LeafletCoordSys.prototype.setZoom = function (zoom) {
     this._zoom = zoom;
   };
 
+  // eslint-disable-next-line func-names
   LeafletCoordSys.prototype.setCenter = function (center) {
-    this._center = this._projection.project(new L.LatLng(center[1], center[0]));
+    this._center = this._projection.project(new LatLng(center[1], center[0]));
   };
 
+  // eslint-disable-next-line func-names
   LeafletCoordSys.prototype.setMapOffset = function (mapOffset) {
     this._mapOffset = mapOffset;
   };
 
+  // eslint-disable-next-line func-names
   LeafletCoordSys.prototype.getLeaflet = function () {
     return this._map;
   };
 
+  // eslint-disable-next-line func-names
   LeafletCoordSys.prototype.getViewRect = function () {
     const api = this._api;
     return new graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight());
   };
 
+  // eslint-disable-next-line func-names
   LeafletCoordSys.prototype.getRoamTransform = function () {
     return matrix.create();
   };
 
+  // eslint-disable-next-line func-names
   LeafletCoordSys.prototype.dataToPoint = function (data) {
-    const point = new L.LatLng(data[1], data[0]);
+    const point = new LatLng(data[1], data[0]);
     const px = this._map.latLngToLayerPoint(point);
     const mapOffset = this._mapOffset;
     return [px.x - mapOffset[0], px.y - mapOffset[1]];
   };
 
+  // eslint-disable-next-line func-names
   LeafletCoordSys.prototype.pointToData = function (pt) {
     const mapOffset = this._mapOffset;
     const coord = this._map.layerPointToLatLng({
@@ -116,16 +131,11 @@ function createLeafletCoordSystem(L) {
     return [coord.lng, coord.lat];
   };
 
-  LeafletCoordSys.prototype.convertToPixel = util.curry(
-    doConvert,
-    "dataToPoint",
-  );
+  LeafletCoordSys.prototype.convertToPixel = util.curry(doConvert, "dataToPoint");
 
-  LeafletCoordSys.prototype.convertFromPixel = util.curry(
-    doConvert,
-    "pointToData",
-  );
+  LeafletCoordSys.prototype.convertFromPixel = util.curry(doConvert, "pointToData");
 
+  // eslint-disable-next-line func-names
   LeafletCoordSys.create = function (ecModel, api) {
     let leafletCoordSys;
     const leafletList = [];
@@ -156,13 +166,13 @@ function createLeafletCoordSystem(L) {
         mapRoot.classList.add("ec-extension-leaflet");
         root.appendChild(mapRoot);
 
-        leafletModel.__map = L.map(mapRoot, leafletModel.get("mapOptions"));
+        leafletModel.__map = lMap(mapRoot, leafletModel.get("mapOptions"));
         const map = leafletModel.__map;
         const tiles = leafletModel.get("tiles");
         const baseLayers = {};
         let baseLayerAdded = false;
         tiles.forEach((tile) => {
-          const tileLayer = L.tileLayer(tile.urlTemplate, tile.options);
+          const tileLayer = lTileLayer(tile.urlTemplate, tile.options);
           if (tile.label) {
             // only add one baseLayer
             if (!baseLayerAdded) {
@@ -178,7 +188,7 @@ function createLeafletCoordSystem(L) {
         // add layer control when there are more than two layers
         if (tiles.length > 1) {
           const layerControlOpts = leafletModel.get("layerControl");
-          L.control.layers(baseLayers, {}, layerControlOpts).addTo(map);
+          control.layers(baseLayers, {}, layerControlOpts).addTo(map);
         }
 
         /*

lib/js/echarts-leaflet/LeafletModel.js renamed to src/js/echarts-leaflet/LeafletModel.js

@@ -2,9 +2,8 @@ import {extendComponentView, getInstanceByDom} from "echarts/core";
 /* eslint-disable no-underscore-dangle */
 /**
  * extend echarts view
- * @param {object} L
  */
-export default function extendLeafletView(L) {
+export default function extendLeafletView() {
   extendComponentView({
     type: "leaflet",
 
@@ -36,6 +35,7 @@ export default function extendLeafletView(L) {
       /**
        * handler for map move event.
        */
+      // eslint-disable-next-line no-unused-vars
       function moveHandler(e) {
         if (rendering) {
           return;
@@ -47,14 +47,14 @@ export default function extendLeafletView(L) {
         let dy = 0;
         if (transformStyle) {
           transformStyle = transformStyle.replace("translate3d(", "");
-          let parts = transformStyle.split(",");
+          const parts = transformStyle.split(",");
           dx = -parseInt(parts[0], 10);
           dy = -parseInt(parts[1], 10);
         } else {
           dx = -parseInt(offsetEl.style.left, 10);
           dy = -parseInt(offsetEl.style.top, 10);
         }
-        let mapOffset = [dx, dy];
+        const mapOffset = [dx, dy];
         moveContainer.style.left = `${mapOffset[0]}px`;
         moveContainer.style.top = `${mapOffset[1]}px`;
 

lib/js/echarts-leaflet/LeafletView.js renamed to src/js/echarts-leaflet/LeafletView.js

@@ -1,25 +1,16 @@
+import {registerCoordinateSystem, registerAction} from "echarts/core";
 import createLeafletCoordSystem from "./LeafletCoordSys";
 import extendLeafletModel from "./LeafletModel";
 import extendLeafletView from "./LeafletView";
-import {registerCoordinateSystem, registerAction} from "echarts/core";
 
 /**
  * echarts register leaflet coord system
- * @param {object} L
- * @param {object} API {
- *   colorTool: "zrender/lib/tool/color",
- *   { each }: "zrender/lib/core/util",
- *   env: "zrender/lib/core/env",
- * }
  */
-function registerLeafletSystem(L, API) {
+export function registerLeafletSystem() {
   extendLeafletModel();
-  extendLeafletView(L);
+  extendLeafletView();
 
-  registerCoordinateSystem(
-    "leaflet",
-    createLeafletCoordSystem(L),
-  );
+  registerCoordinateSystem("leaflet", createLeafletCoordSystem());
 
   registerAction(
     {
@@ -31,10 +22,7 @@ function registerLeafletSystem(L, API) {
       ecModel.eachComponent("leaflet", (leafletModel) => {
         const leaflet = leafletModel.getLeaflet();
         const center = leaflet.getCenter();
-        leafletModel.setCenterAndZoom(
-          [center.lng, center.lat],
-          leaflet.getZoom(),
-        );
+        leafletModel.setCenterAndZoom([center.lng, center.lat], leaflet.getZoom());
       });
     },
   );

lib/js/echarts-leaflet/index.js renamed to src/js/echarts-leaflet/index.js

@@ -1,4 +1,4 @@
-import L from "./leaflet-loader";
+import {CRS} from "leaflet";
 
 /**
  * Default options
@@ -43,7 +43,7 @@ const NetJSONGraphDefaultConfig = {
   clusterSeparation: 20,
   showMetaOnNarrowScreens: false,
   showLabelsAtZoomLevel: 13,
-  crs: L ? L.CRS.EPSG3857 : null,
+  crs: CRS.EPSG3857,
   echartsOption: {
     aria: {
       show: true,

src/js/leaflet-loader.js

@@ -1,9 +1,8 @@
+import {geoJSON} from "leaflet";
 /*
  * Dedicated GeoJSON utilities for netjsongraph.js.
  */
 
-import L from "./leaflet-loader";
-
 /**
  * Convert a GeoJSON FeatureCollection into a NetJSON-style object
  * (nodes / links arrays) so that the rest of the rendering pipeline can work
@@ -155,7 +154,7 @@ export function addPolygonOverlays(self) {
     fillOpacity: 0.6,
   };
 
-  const polygonLayer = L.geoJSON(
+  const polygonLayer = geoJSON(
     {type: "FeatureCollection", features: polygonFeatures},
     {
       pane: "njg-polygons",

src/js/netjsongraph.config.js

@@ -1,14 +1,10 @@
 /* eslint-disable no-undef */
 import {init} from "echarts/core";
 import NetJSONGraphCore from "./netjsongraph.core";
-import {NetJSONGraphRender} from "./netjsongraph.render";
+import NetJSONGraphRender from "./netjsongraph.render";
 import NetJSONGraphGUI from "./netjsongraph.gui";
 import attachClientsOverlay from "./netjsongraph.clients";
-import L from "./leaflet-loader";
-
-const colorTool = require("zrender/lib/tool/color");
-const {each} = require("zrender/lib/core/util");
-const env = require("zrender/lib/core/env");
+import {registerLeafletSystem} from "./echarts-leaflet";
 
 /**
  * @class
@@ -41,7 +37,7 @@ class NetJSONGraph {
     return {
       ...config,
       render:
-        config.render === "map" && L
+        config.render === "map"
           ? NetJSONGraphRender.prototype.mapRender
           : NetJSONGraphRender.prototype.graphRender,
       onInit: this.onInit,
@@ -124,7 +120,7 @@ class NetJSONGraph {
     } else {
       this.gui.nodeLinkInfoContainer = this.gui.createNodeLinkInfoContainer();
     }
-    if (this.config.switchMode && this.utils.isNetJSON(this.data) && L) {
+    if (this.config.switchMode && this.utils.isNetJSON(this.data)) {
       this.gui.renderModeSelector.onclick = () => {
         // Switch from map to graph mode, first clear canvasContainer and then render
         if (this.config.render === this.utils.mapRender) {
@@ -162,16 +158,6 @@ class NetJSONGraph {
   }
 }
 
-if (L) {
-  // eslint-disable-next-line import/no-dynamic-require,global-require
-  const leafletModule = require("../../lib/js/echarts-leaflet/index");
-  leafletModule.default(L, {
-    colorTool,
-    each,
-    env,
-  });
-  window.L = L;
-}
+registerLeafletSystem();
 
 window.NetJSONGraph = NetJSONGraph;
-window.L = L;

src/js/netjsongraph.geojson.js

@@ -1,4 +1,5 @@
 import {use} from "echarts/core";
+import {circleMarker, latLngBounds} from "leaflet";
 import {install as LinesChart} from "echarts/lib/chart/lines/install";
 import {install as GraphChart} from "echarts/lib/chart/graph/install";
 import {install as ScatterChart} from "echarts/lib/chart/scatter/install";
@@ -10,7 +11,6 @@ import {install as GraphicComponent} from "echarts/lib/component/graphic/install
 import {install as SVGRenderer} from "echarts/lib/renderer/installSVGRenderer";
 import {install as CanvasRenderer} from "echarts/lib/renderer/installCanvasRenderer";
 import {addPolygonOverlays} from "./netjsongraph.geojson";
-import L from "./leaflet-loader";
 
 use([
   GraphChart,
@@ -412,7 +412,7 @@ class NetJSONGraphRender {
     self.config.geoOptions = self.utils.deepMergeObj(
       {
         pointToLayer: (feature, latlng) =>
-          L.circleMarker(latlng, self.config.geoOptions.style),
+          circleMarker(latlng, self.config.geoOptions.style),
         onEachFeature: (feature, layer) => {
           layer.on("click", () => {
             const properties = {
@@ -451,7 +451,7 @@ class NetJSONGraphRender {
         if (bounds) {
           latlngs.forEach((ll) => bounds.extend(ll));
         } else {
-          bounds = L.latLngBounds(latlngs);
+          bounds = latLngBounds(latlngs);
         }
       }
 
@@ -729,4 +729,4 @@ class NetJSONGraphRender {
   }
 }
 
-export {NetJSONGraphRender, L};
+export default NetJSONGraphRender;