fixed bound fitting

src/modules/Editor.ts

@@ -357,10 +357,25 @@ export class Editor {
   };
 
   fitDrawing = (): void => {
-    if (this.poly.isEmpty) return;
+    if (!this.poly.isEmpty) {
+      const poly_bounds = this.poly.poly.getBounds();
 
-    const bounds = this.poly.poly.getBounds();
-    if (bounds && Object.values(bounds)) this.map.map.fitBounds(bounds);
+      if (poly_bounds && Object.values(poly_bounds).length) {
+        this.map.map.fitBounds(poly_bounds);
+        return;
+      }
+    }
+
+    if (!this.stickers.isEmpty) {
+      const stickers_bounds = this.stickers.layer.getBounds();
+
+      if (stickers_bounds && Object.values(stickers_bounds).length) {
+        this.map.map.fitBounds(stickers_bounds);
+        return;
+      }
+    }
+
+    // no bounds to fit. better do something later
   };
 
   setInitialData = (): void => {

src/modules/Stickers.ts

@@ -1,4 +1,4 @@
-import { LayerGroup, layerGroup, Map } from 'leaflet';
+import {FeatureGroup, LayerGroup, layerGroup, Map} from 'leaflet';
 import { IStickerDump, Sticker } from '$modules/Sticker';
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
 import { clusterIcon } from '$utils/clusterIcon';
@@ -24,8 +24,7 @@ export class Stickers {
     this.triggerOnChange = triggerOnChange;
     this.editor = editor;
 
-    this.clusterLayer.addTo(map);
-
+    // this.clusterLayer.addTo(map);
     // this.clusterLayer.on('animationend', this.onSpiderify);
 
     this.lockMapClicks = lockMapClicks;
@@ -55,7 +54,7 @@ export class Stickers {
 
     this.stickers.push(marker);
 
-    marker.marker.addTo(this.clusterLayer);
+    marker.marker.addTo(this.layer);
 
     this.triggerOnChange();
   };
@@ -65,7 +64,8 @@ export class Stickers {
 
     if (index < 0) return;
 
-    this.clusterLayer.removeLayer(ref.marker);
+    // this.clusterLayer.removeLayer(ref.marker);
+    this.layer.removeLayer(ref.marker);
     this.stickers.splice(index, 1);
 
     this.triggerOnChange();
@@ -89,7 +89,10 @@ export class Stickers {
     this.stickers.map(sticker => sticker.stopEditing());
   };
 
-  clusterLayer: LayerGroup = new LayerGroup();
+  get isEmpty(): boolean {
+    return !this.stickers || this.stickers.length === 0
+  };
+  // clusterLayer: LayerGroup = new LayerGroup();
 
   // uncomment to enable clustering
 
@@ -106,9 +109,8 @@ export class Stickers {
   editor: Props['editor'];
   map: Props['map'];
 
-
   stickers: Array<Sticker> = [];
-  layer: LayerGroup = layerGroup();
+  layer: FeatureGroup = new FeatureGroup();
 
   triggerOnChange: Props['triggerOnChange'];
   lockMapClicks: Props['lockMapClicks'];

src/styles/colors.less

@@ -14,8 +14,8 @@
 @red_primary: #ff7034;
 @red_secondary: #ff3344;
 
-@panel_radius: 2px;
-@button_radius: 2px;
+@panel_radius: 6px;
+@button_radius: 6px;
 
 @color_primary: #4597d0;
 @color_success: #7cd766;

src/styles/panel.less

@@ -14,14 +14,14 @@
 }
 
 .control-sep {
-  height: 44px;
+  height: 36px;
   background: #222222;
-  width: 3px;
+  width: 6px;
 
   @media (max-width: @mobile_breakpoint) {
     margin-left: -1px;
     margin-right: -1px;
-    width: 4px;
+    width: 6px;
   }
 }