ZoomToLayer fix (#635)

* ZoomToLayer fix

* Remove duplicate code

* Replace flyTo with setView, removing animation

Author: ahmadayubi

src/layer.js

@@ -321,34 +321,39 @@ export class MapLayer extends HTMLElement {
       bR = this.extent.bottomRight.pcrs,
       layerBounds = L.bounds(L.point(tL.horizontal, tL.vertical), L.point(bR.horizontal, bR.vertical)),
       center = map.options.crs.unproject(layerBounds.getCenter(true)),
-      currentZoom = map.getZoom();
+      newZoom = map.getZoom();
 
-    map.setView(center, currentZoom, {animate:false});
-    let mapBounds = M.pixelToPCRSBounds(
-      map.getPixelBounds(),
-      map.getZoom(),
-      map.options.projection);
+    let maxZoom = this.extent.zoom.maxZoom, minZoom = this.extent.zoom.minZoom;
 
-    //fits the bounds to the map view
-    if(mapBounds.contains(layerBounds)){
-      while(mapBounds.contains(layerBounds) && (currentZoom + 1) <= this.extent.zoom.maxZoom){
-        currentZoom++;
-        map.setView(center, currentZoom, {animate:false});
-        mapBounds = M.pixelToPCRSBounds(
-          map.getPixelBounds(),
-          map.getZoom(),
-          map.options.projection);
-      }
-      if(currentZoom - 1 >= 0) map.flyTo(center, (currentZoom - 1));
-    } else {
-      while(!(mapBounds.contains(layerBounds)) && (currentZoom - 1) >= this.extent.zoom.minZoom){
-        currentZoom--;
-        map.setView(center, currentZoom, {animate:false});
-        mapBounds = M.pixelToPCRSBounds(
-          map.getPixelBounds(),
-          map.getZoom(),
-          map.options.projection);
-      }
+    let scale = map.options.crs.scale(newZoom),
+      mapCenterTCRS = map.options.crs.transformation.transform(layerBounds.getCenter(true), scale);
+
+    let mapHalf = map.getSize().divideBy(2),
+      mapTlNew = mapCenterTCRS.subtract(mapHalf).round(),
+      mapBrNew = mapCenterTCRS.add(mapHalf).round();
+
+    let mapTlPCRSNew = M.pixelToPCRSPoint(mapTlNew, newZoom, map.options.projection),
+      mapBrPCRSNew = M.pixelToPCRSPoint(mapBrNew, newZoom, map.options.projection);
+
+    let mapPCRS = L.bounds(mapTlPCRSNew, mapBrPCRSNew);
+
+    let zOffset = mapPCRS.contains(layerBounds) ? 1 : -1;
+
+    while((zOffset === -1 && !(mapPCRS.contains(layerBounds)) && (newZoom - 1) >= minZoom)  ||
+          (zOffset === 1 && mapPCRS.contains(layerBounds) && (newZoom + 1) <= maxZoom)) {
+      newZoom += zOffset;
+
+      scale = map.options.crs.scale(newZoom);
+      mapCenterTCRS = map.options.crs.transformation.transform(layerBounds.getCenter(true), scale);
+
+      mapTlNew = mapCenterTCRS.subtract(mapHalf).round();
+      mapBrNew = mapCenterTCRS.add(mapHalf).round();
+      mapTlPCRSNew = M.pixelToPCRSPoint(mapTlNew, newZoom, map.options.projection);
+      mapBrPCRSNew = M.pixelToPCRSPoint(mapBrNew, newZoom, map.options.projection);
+
+      mapPCRS = L.bounds(mapTlPCRSNew, mapBrPCRSNew);
     }
+    if(zOffset === 1 && newZoom - 1 >= 0) newZoom--;
+    map.setView(center, newZoom, {animate: false});
   }
 }