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