typescripted all the modules

src/modules/Stickers.ts

@@ -0,0 +1,110 @@
+import { LayerGroup, layerGroup, Map } from 'leaflet';
+import { Sticker } from '$modules/Sticker';
+import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
+import { clusterIcon } from '$utils/clusterIcon';
+import { Editor } from "$modules/Editor";
+
+interface IStickers {
+  clusterLayer: MarkerClusterGroup;
+  map: Map;
+  stickers: Array<Sticker>;
+  layer: LayerGroup;
+  triggerOnChange: () => void;
+  editor: Editor;
+  lockMapClicks: (x: boolean) => void;
+}
+
+export class Stickers implements IStickers {
+  constructor({ map, lockMapClicks, triggerOnChange, editor }) {
+    this.map = map;
+    this.triggerOnChange = triggerOnChange;
+    this.editor = editor;
+
+    this.clusterLayer = new MarkerClusterGroup({
+      spiderfyOnMaxZoom: false,
+      showCoverageOnHover: false,
+      zoomToBoundsOnClick: true,
+      animate: false,
+      maxClusterRadius: 80,
+      disableClusteringAtZoom: 13,
+      iconCreateFunction: clusterIcon,
+    }).addTo(map);
+
+    this.clusterLayer.on('animationend', this.onSpiderify);
+
+    this.lockMapClicks = lockMapClicks;
+    this.stickers = [];
+
+    this.layer.addTo(this.map);
+  }
+
+  createSticker = ({
+    latlng, sticker, angle = 2.2, text = '', set
+  }) => {
+    const marker = new Sticker({
+      latlng,
+      angle,
+      deleteSticker: this.deleteStickerByReference,
+      map: this.map,
+      lockMapClicks: this.lockMapClicks,
+      sticker,
+      set,
+      triggerOnChange: this.triggerOnChange,
+      text,
+    });
+
+    this.stickers.push(marker);
+
+    marker.marker.addTo(this.clusterLayer);
+
+    this.triggerOnChange();
+    // marker.marker.enableEdit();
+  };
+
+  deleteStickerByReference = ref => {
+    const index = this.stickers.indexOf(ref);
+
+    if (index < 0) return;
+
+    this.clusterLayer.removeLayer(ref.marker);
+    this.stickers.splice(index, 1);
+
+    this.triggerOnChange();
+  };
+
+  clearAll = () => {
+    const target = [...this.stickers];
+    target.map(sticker => {
+      this.deleteStickerByReference(sticker);
+      return true;
+    });
+  };
+
+  dumpData = () => this.stickers.map(sticker => sticker.dumpData());
+
+  onSpiderify = () => {
+    // todo: it has markers passed as argument. Update only them.
+    if (this.editor.getEditing()) {
+      this.startEditing();
+    } else {
+      this.stopEditing();
+    }
+  };
+
+  startEditing = () => {
+    this.stickers.map(sticker => sticker.startEditing());
+  };
+
+  stopEditing = () => {
+    this.stickers.map(sticker => sticker.stopEditing());
+  };
+
+  clusterLayer;
+  map;
+  stickers;
+  triggerOnChange;
+  editor;
+  lockMapClicks;
+
+  layer = layerGroup();
+}