[fix] Fixed pan and zoom

openwisp · Jul 23, 2022 · 24a020f · 24a020f
1 parent 7c3fb74
commit 24a020f
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 400 deletions.
diff --git a/dist/netjsongraph.min.js b/dist/netjsongraph.min.js
diff --git a/examples/realtime_update/assets/netjsongraph.min.js b/examples/realtime_update/assets/netjsongraph.min.js
diff --git a/lib/js/echarts-leaflet/LeafletCoordSys.js b/lib/js/echarts-leaflet/LeafletCoordSys.js
@@ -17,7 +17,7 @@ function createLeafletCoordSystem(echarts, L) {
     onAdd(map) {
       const pane = map.getPane(this.options.pane);
       pane.appendChild(this._container);
-      map.zoomControl.setPosition('topright');
+      map.zoomControl.setPosition("topright");
 
       // Calculate initial position of container with
       // `L.Map.latLngToLayerPoint()`, `getPixelOrigin()

diff --git a/lib/js/echarts-leaflet/LeafletView.js b/lib/js/echarts-leaflet/LeafletView.js
@@ -14,106 +14,6 @@ export default function extendLeafletView(echarts, L) {
       const leaflet = leafletModel.getLeaflet();
       const moveContainer = api.getZr().painter.getViewportRoot().parentNode;
       const coordSys = leafletModel.coordinateSystem;
-      const _preMapStatus = {x: 0, y: 0};
-
-      if (this._oldMoveStartHandler) {
-        leaflet.off("movestart", this._oldMoveStartHandler);
-      }
-      if (this._oldMoveHandler) {
-        leaflet.off("move", this._oldMoveHandler);
-      }
-      if (this._oldZoomEndHandler) {
-        leaflet.off("zoomend", this._oldZoomEndHandler);
-      }
-      if (this._oldResizeHandler) {
-        leaflet.off("resize", this._oldResizeHandler);
-      }
-
-      /**
-       * Dom is canvas ?
-       */
-      function isCanvas(dom) {
-        return dom.tagName === "CANVAS";
-      }
-
-      /**
-       * resize the child of parent, canvas specially.
-       */
-      function inheritDomSize(child, parent) {
-        const parentSize = [
-          parseFloat(getComputedStyle(parent).width),
-          parseFloat(getComputedStyle(parent).height),
-        ];
-
-        if (isCanvas(child)) {
-          child.width =
-            (child.width / parseFloat(getComputedStyle(child).width)) *
-            parentSize[0];
-          child.height =
-            (child.height / parseFloat(getComputedStyle(child).height)) *
-            parentSize[1];
-        }
-
-        child.style.width = `${parentSize[0]}px`;
-        child.style.height = `${parentSize[1]}px`;
-      }
-
-      /**
-       * resize dom's all children.
-       */
-      function resizeAllChildren(root) {
-        const children = [...root.childNodes];
-
-        children.forEach((childDom) => {
-          inheritDomSize(childDom, root);
-          if (childDom.childNodes.length) {
-            resizeAllChildren(childDom);
-          }
-        });
-      }
-
-      /**
-       * get leaflet map offset
-       *
-       * @param {object} map leaflet map
-       * @return {object|undefined} { x, y }
-       */
-      function getMapOffset(map) {
-        const pos = L.DomUtil.getPosition(map.getPanes().mapPane);
-        if (!pos) {
-          console.error("Can't get the map offset!");
-          return;
-        }
-
-        // we want to return only if the pos is defined
-        // eslint-disable-next-line consistent-return
-        return pos;
-      }
-
-      /**
-       * set canvas container's offset according to leaflet map offset.
-       * @return {object|undefined} { dx, dy }
-       */
-
-      // We only want to return only if the offset is defined
-      // eslint-disable-next-line consistent-return
-      function setOffset() {
-        const pos = getMapOffset(leaflet);
-        if (pos) {
-          const {x, y} = pos;
-          const dx = x - _preMapStatus.x;
-          const dy = y - _preMapStatus.y;
-
-          Object.assign(_preMapStatus, {x, y});
-
-          L.DomUtil.setPosition(moveContainer, {x: -x, y: -y});
-
-          coordSys.setMapOffset([-x, -y]);
-          leafletModel.__mapOffset = [-x, -y];
-
-          return {dx, dy};
-        }
-      }
 
       const {roam} = leafletModel.get("mapOptions");
       // can move
@@ -133,74 +33,87 @@ export default function extendLeafletView(echarts, L) {
         leaflet.touchZoom.disable();
       }
 
-      /**
-       * init position status at move start.
-       */
-      function setPosition() {
-        if (rendering) {
-          return;
-        }
-
-        const pos = getMapOffset(leaflet);
-        if (pos) {
-          Object.assign(_preMapStatus, {x: pos.x, y: pos.y});
-        }
-      }
-
       /**
        * handler for map move event.
        */
-      function moveHandler() {
+      function moveHandler(e) {
         if (rendering) {
           return;
         }
 
-        const offset = setOffset();
-        if (offset) {
-          const {dx, dy} = offset;
-          api.dispatchAction({
-            type: "leafletMove",
-            dx,
-            dy,
-          });
+        const offsetEl = leaflet._mapPane;
+        let transformStyle = offsetEl.style.transform;
+        let dx = 0;
+        let dy = 0;
+        if (transformStyle) {
+          transformStyle = transformStyle.replace("translate3d(", "");
+          let 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];
+        moveContainer.style.left = `${mapOffset[0]}px`;
+        moveContainer.style.top = `${mapOffset[1]}px`;
+
+        coordSys.setMapOffset(mapOffset);
+        leafletModel.__mapOffset = mapOffset;
+        const actionParams = {
+          type: "leafletRoam",
+          animation: {
+            duration: 0,
+          },
+        };
+        api.dispatchAction(actionParams);
       }
 
       /**
        * handler for map zoom event
        */
-      function zoomHandler() {
+      function zoomEndHandler() {
         if (rendering) {
           return;
         }
-
+        console.log(this);
         api.dispatchAction({
-          type: "leafletZoom",
+          type: "leafletRoam",
         });
       }
 
+      function zoomHandler() {
+        moveHandler();
+      }
+
       /**
        * handler for map resize event
        */
       function resizeHandler() {
-        const _ecDom = api.getDom();
-        inheritDomSize(moveContainer, _ecDom);
-
-        resizeAllChildren(moveContainer);
+        echarts.getInstanceByDom(api.getDom()).resize();
+      }
 
-        api.dispatchAction({
-          type: "leafletZoom",
-        });
+      if (this._oldMoveHandler) {
+        leaflet.off("move", this._oldMoveHandler);
+      }
+      if (this._oldZoomHandler) {
+        leaflet.off("zoom", this._oldZoomHandler);
+      }
+      if (this._oldZoomEndHandler) {
+        leaflet.off("zoomend", this._oldZoomEndHandler);
+      }
+      if (this._oldResizeHandler) {
+        leaflet.off("resize", this._oldResizeHandler);
       }
 
-      leaflet.on("movestart", setPosition);
       leaflet.on("move", moveHandler);
-      leaflet.on("zoomend", zoomHandler);
+      leaflet.on("zoom", zoomHandler);
+      leaflet.on("zoomend", zoomEndHandler);
       leaflet.on("resize", resizeHandler);
 
-      this._oldMoveStartHandler = setPosition;
       this._oldMoveHandler = moveHandler;
-      this._oldZoomEndHandler = zoomHandler;
+      this._oldZoomHandler = zoomHandler;
+      this._oldZoomEndHandler = zoomEndHandler;
       this._oldResizeHandler = resizeHandler;
 
       rendering = false;