triggering on-something-changed

src/modules/Editor.js

@@ -22,6 +22,7 @@ export class Editor {
     setTitle,
     setAddress,
     getUser,
+    triggerOnChange,
   }) {
     this.logo = DEFAULT_LOGO;
     this.owner = null;
@@ -32,9 +33,9 @@ export class Editor {
     } = this;
 
     this.poly = new Poly({
-      map, routerMoveStart, lockMapClicks, setTotalDist
+      map, routerMoveStart, lockMapClicks, setTotalDist, triggerOnChange
     });
-    this.stickers = new Stickers({ map, lockMapClicks });
+    this.stickers = new Stickers({ map, lockMapClicks, triggerOnChange });
     this.router = new Router({
       map, lockMapClicks, setRouterPoints, changeMode, pushPolyPoints
     });

src/modules/Poly.js

@@ -12,7 +12,7 @@ const polyStyle = {
 
 export class Poly {
   constructor({
-    map, routerMoveStart, lockMapClicks, setTotalDist
+    map, routerMoveStart, lockMapClicks, setTotalDist, triggerOnChange,
   }) {
     this.poly = L.polyline([], polyStyle);
 
@@ -23,6 +23,7 @@ export class Poly {
 
     this.routerMoveStart = routerMoveStart;
     this.setTotalDist = setTotalDist;
+    this.triggerOnChange = triggerOnChange;
     this.lockMapClicks = lockMapClicks;
     this.bindEvents();
 
@@ -63,7 +64,10 @@ export class Poly {
 
     this.setTotalDist(kilometers);
     this.routerMoveStart();
+
     this.drawArrows();
+
+    if (coords.length > 1) this.triggerOnChange();
   };
 
   bindEvents = () => {
@@ -148,6 +152,7 @@ export class Poly {
   clearAll = () => {
     this.poly.setLatLngs([]);
     this.poly.disableEdit();
+
     this.updateMarks();
   };
 

src/modules/Sticker.js

@@ -7,7 +7,7 @@ import stickers from '$sprites/stickers.svg';
 
 export class Sticker {
   constructor({
-    latlng, deleteSticker, map, lockMapClicks, sticker, angle = 2.2
+    latlng, deleteSticker, map, lockMapClicks, sticker, triggerOnChange, angle = 2.2
   }) {
     this.latlng = latlng;
     this.angle = angle;
@@ -15,6 +15,7 @@ export class Sticker {
     this.map = map;
     this.sticker = sticker;
     this.editable = true;
+    this.triggerOnChange = triggerOnChange;
 
     this.deleteSticker = deleteSticker;
     this.lockMapClicks = lockMapClicks;
@@ -49,9 +50,14 @@ export class Sticker {
 
     this.element.addEventListener('mouseup', this.preventPropagations);
     this.stickerDelete.addEventListener('click', this.onDelete);
+
+    this.marker.addEventListener('dragend', this.triggerOnChange);
+
+    this.triggerOnChange();
   }
 
   onDelete = () => {
+    this.triggerOnChange();
     if (!this.isDragging) this.deleteSticker(this);
   };
 
@@ -77,6 +83,7 @@ export class Sticker {
   onDragStop = e => {
     this.preventPropagations(e);
 
+    this.triggerOnChange();
     this.isDragging = false;
     this.marker.enableEdit();
 

src/modules/Stickers.js

@@ -2,9 +2,10 @@ import { layerGroup } from 'leaflet';
 import { Sticker } from '$modules/Sticker';
 
 export class Stickers {
-  constructor({ map, lockMapClicks }) {
+  constructor({ map, lockMapClicks, triggerOnChange }) {
     this.map = map;
     this.layer = layerGroup();
+    this.triggerOnChange = triggerOnChange;
 
     this.lockMapClicks = lockMapClicks;
     this.stickers = [];
@@ -27,6 +28,7 @@ export class Stickers {
       map: this.map,
       lockMapClicks: this.lockMapClicks,
       sticker,
+      triggerOnChange: this.triggerOnChange,
     });
     this.stickers.push(marker);