triggering on-something-changed

src/components/panels/EditorPanel.jsx

@@ -29,7 +29,7 @@ export class EditorPanel extends React.PureComponent {
 
   render() {
     const {
-      mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address,
+      mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address, changed,
     } = this.props;
 
     return (
@@ -49,6 +49,7 @@ export class EditorPanel extends React.PureComponent {
         <LogoPreview logo={logo} />
 
         <div className="control-dist">
+          {changed && '(ch) '}
           {totalDistance} км
           <Icon icon="icon-cycle" size={32} />
           {

src/containers/App.jsx

@@ -25,6 +25,7 @@ export class App extends React.Component {
     },
     title: '',
     address: '',
+    changed: false,
   };
 
   componentDidMount() {
@@ -61,12 +62,15 @@ export class App extends React.Component {
     this.editor.startEditing();
 
     this.hideLoader();
+
+    this.setState({ changed: false });
   };
 
   setTitle = title => this.setState({ title });
   setAddress = address => this.setState({ address });
 
   setDataOnLoad = data => {
+    this.setState({ changed: false });
     this.editor.setData(data);
     this.hideLoader();
   };
@@ -104,6 +108,12 @@ export class App extends React.Component {
 
   getUser = () => this.state.user;
 
+  triggerOnChange = () => {
+    if (!this.state.editing) return;
+    console.log('CHANGED!');
+    this.setState({ changed: true });
+  };
+
   editor = new Editor({
     container: 'map',
     mode: this.state.mode,
@@ -116,6 +126,7 @@ export class App extends React.Component {
     setTitle: this.setTitle,
     setAddress: this.setAddress,
     getUser: this.getUser,
+    triggerOnChange: this.triggerOnChange,
   });
 
   authInit = () => {
@@ -176,7 +187,7 @@ export class App extends React.Component {
     const {
       editor,
       state: {
-        mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address
+        mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address, changed,
       },
     } = this;
 
@@ -206,6 +217,7 @@ export class App extends React.Component {
           editing={editing}
           title={title}
           address={address}
+          changed={changed}
         />
       </div>
     );

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);