diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index 389b25e..381fc6e 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -25,7 +25,7 @@ export class EditorPanel extends React.PureComponent { stopEditing = () => { if (!this.props.changed){ - this.props.editor.stopEditing(); + this.props.editor.cancelEditing(); } else { this.props.editor.changeMode(MODES.CONFIRM_CANCEL); } diff --git a/src/containers/App.jsx b/src/containers/App.jsx index ffd0335..e82ede8 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -69,6 +69,8 @@ export class App extends React.Component { setTitle = title => this.setState({ title }); setAddress = address => this.setState({ address }); + getTitle = () => this.state.title; + setDataOnLoad = data => { this.clearChanged(); this.editor.setData(data); @@ -133,6 +135,7 @@ export class App extends React.Component { getUser: this.getUser, triggerOnChange: this.triggerOnChange, clearChanged: this.clearChanged, + getTitle: this.getTitle, }); authInit = () => { diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 700be4f..31826c6 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -24,10 +24,12 @@ export class Editor { getUser, triggerOnChange, clearChanged, + getTitle, }) { this.logo = DEFAULT_LOGO; this.owner = null; this.map = new Map({ container }); + this.initialData = {}; const { lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map } @@ -60,7 +62,7 @@ export class Editor { toggle: this.clearAll, }, [MODES.CONFIRM_CANCEL]: { - toggle: this.stopEditing, + toggle: this.cancelEditing, } }; @@ -79,6 +81,7 @@ export class Editor { this.setAddress = setAddress; this.getUser = getUser; this.mode = mode; + this.getTitle = getTitle; map.addEventListener('mouseup', this.onClick); map.addEventListener('dragstart', () => lockMapClicks(true)); @@ -220,18 +223,31 @@ export class Editor { const url = (this.owner && this.owner === id) ? path : random_url; - this.setAddress(url); pushPath(`/${url}/edit`); if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.enableEdit(); this.stickers.startEditing(); this.setEditing(true); + + const { route, stickers } = this.dumpData(); + + this.initialData = { + version: 2, + title: this.getTitle(), + owner: this.owner, + address: this.owner === id ? path : null, + path: path, + route, + stickers, + }; + + console.log(this.initialData); }; stopEditing = () => { const { path } = getUrlData(); - pushPath(`/${path}`); + pushPath(`/${(this.initialData && this.initialData.path) || path}`); this.changeMode(MODES.NONE); this.poly.poly.disableEdit(); @@ -239,8 +255,35 @@ export class Editor { this.setEditing(false); }; + cancelEditing = () => { + this.stopEditing(); + + console.log('trying to set initial data'); + + if (this.hasEmptyHistory()) { + this.clearAll(); + this.startEditing(); + } else { + this.setData(this.initialData); + } + + this.clearChanged(); + }; + dumpData = () => ({ route: this.poly.dumpData(), stickers: this.stickers.dumpData(), }); + + isEmpty = () => { + const { route, stickers } = this.dumpData(); + + return (route.length > 1 && stickers.length > 0); + }; + + hasEmptyHistory = () => { + const { route, stickers } = this.initialData; + + return !(route && route.length >= 1 && stickers && stickers.length > 0); + } }