diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx
index c1651de..96dfff0 100644
--- a/src/components/panels/EditorPanel.jsx
+++ b/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 {
+ {changed && '(ch) '}
{totalDistance} ΠΊΠΌ
{
diff --git a/src/containers/App.jsx b/src/containers/App.jsx
index acd8da3..eb4d00d 100644
--- a/src/containers/App.jsx
+++ b/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}
/>
);
diff --git a/src/modules/Editor.js b/src/modules/Editor.js
index c3c0c9e..4874bcb 100644
--- a/src/modules/Editor.js
+++ b/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
});
diff --git a/src/modules/Poly.js b/src/modules/Poly.js
index 955d1f6..bec868e 100644
--- a/src/modules/Poly.js
+++ b/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();
};
diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js
index ee49885..0d93a2f 100644
--- a/src/modules/Sticker.js
+++ b/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();
diff --git a/src/modules/Stickers.js b/src/modules/Stickers.js
index cb8a5ec..49142cc 100644
--- a/src/modules/Stickers.js
+++ b/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);