diff --git a/src/modules/Editor.ts b/src/modules/Editor.ts index c71d480..82d4c8e 100644 --- a/src/modules/Editor.ts +++ b/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 => { diff --git a/src/modules/Stickers.ts b/src/modules/Stickers.ts index bd49557..595332e 100644 --- a/src/modules/Stickers.ts +++ b/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 = []; - layer: LayerGroup = layerGroup(); + layer: FeatureGroup = new FeatureGroup(); triggerOnChange: Props['triggerOnChange']; lockMapClicks: Props['lockMapClicks']; diff --git a/src/styles/colors.less b/src/styles/colors.less index 371e1d4..5e25d6a 100644 --- a/src/styles/colors.less +++ b/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; diff --git a/src/styles/panel.less b/src/styles/panel.less index b223025..2983280 100644 --- a/src/styles/panel.less +++ b/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; } }