diff --git a/src/components/logo/LogoDialog.jsx b/src/components/logo/LogoDialog.jsx index d54c3f4..177a0a1 100644 --- a/src/components/logo/LogoDialog.jsx +++ b/src/components/logo/LogoDialog.jsx @@ -8,7 +8,7 @@ type Props = { setLogo: Function, } -export const LogoDialog = ({ logo, setLogo }: Props) => ( +export const LogoDialog = ({ logo, setLogo }: Props) => (
diff --git a/src/components/panels/EditorDialog.jsx b/src/components/panels/EditorDialog.jsx index 2bcea1b..820a64f 100644 --- a/src/components/panels/EditorDialog.jsx +++ b/src/components/panels/EditorDialog.jsx @@ -7,12 +7,13 @@ import { TrashDialog } from '$components/trash/TrashDialog'; import { LogoDialog } from '$components/logo/LogoDialog'; import { SaveDialog } from '$components/save/SaveDialog'; import { CancelDialog } from '$components/save/CancelDialog'; -import type { UserType } from '$constants/types'; + import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { editor } from '$modules/Editor'; + import { + setMode, setLogo, routerCancel, routerSubmit, @@ -21,31 +22,18 @@ import { clearPoly, clearAll, clearCancel, + stopEditing, + setEditing, } from '$redux/user/actions'; type Props = { mode: String, - routerPoints: Number, - editor: Object, activeSticker: String, - logo: String, - user: UserType, - title: String, - address: String, - - setLogo: Function, - routerSubmit: Function, - routerCancel: Function, - setActiveSticker: Function, - clearStickers: Function, - clearPoly: Function, - clearAll: Function, - clearCancel: Function, } export const Component = (props: Props) => { const { - mode, activeSticker, logo, user, title, address + mode, activeSticker, } = props; const showDialog = ( @@ -63,31 +51,14 @@ export const Component = (props: Props) => { { mode === MODES.ROUTER && } { mode === MODES.STICKERS && } { mode === MODES.TRASH && } - { mode === MODES.LOGO && } - { mode === MODES.SAVE && } - { mode === MODES.CONFIRM_CANCEL && } + { mode === MODES.LOGO && } + { mode === MODES.SAVE && } + { mode === MODES.CONFIRM_CANCEL && }
); }; -function mapStateToProps(state) { - const { - user: { - mode, routerPoints, activeSticker, logo, user, title, address, - }, - } = state; - - return { - mode, - routerPoints, - activeSticker, - logo, - user, - title, - address, - editor, - }; -} +const mapStateToProps = ({ user }) => ({ ...user }); const mapDispatchToProps = dispatch => bindActionCreators({ routerCancel, @@ -98,6 +69,9 @@ const mapDispatchToProps = dispatch => bindActionCreators({ clearPoly, clearAll, clearCancel, + stopEditing, + setEditing, + setMode, }, dispatch); export const EditorDialog = connect( diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index 3664ff2..7da8738 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -82,7 +82,6 @@ class Component extends React.PureComponent {
- {changed && '(ch) '} {distance} км { diff --git a/src/components/save/CancelDialog.jsx b/src/components/save/CancelDialog.jsx index 22e79a0..1f54151 100644 --- a/src/components/save/CancelDialog.jsx +++ b/src/components/save/CancelDialog.jsx @@ -1,18 +1,24 @@ import React from 'react'; import { MODES } from '$constants/modes'; +import { editor } from '$modules/Editor'; -export class CancelDialog extends React.Component { +type Props = { + stopEditing: Function, + setMode: Function, + setEditing: Function, +}; + +export class CancelDialog extends React.Component { cancel = () => { - this.props.editor.stopEditing(); + editor.cancelEditing(); + // this.props.stopEditing(); + this.props.setEditing(false); + this.props.setMode(MODES.NONE); }; proceed = () => { - this.props.editor.changeMode(MODES.NONE); - }; - - save = () => { - this.props.editor.changeMode(MODES.SAVE); + this.props.setMode(MODES.NONE); }; render() { @@ -24,13 +30,10 @@ export class CancelDialog extends React.Component {
- Закрыть + Удалить все
-
- Продолжить -
-
- Сохранить +
+ Вернуться
diff --git a/src/modules/Editor.js b/src/modules/Editor.js index d6616f0..34e0b7b 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -89,7 +89,6 @@ export class Editor { getEditing = () => store.getState().user.editing; getChanged = () => store.getState().user.changed; - setEditing = value => store.dispatch(setEditing(value)); setMode = value => store.dispatch(setMode(value)); setDistance = value => store.dispatch(setDistance(value)); setChanged = value => store.dispatch(setChanged(value)); @@ -102,7 +101,7 @@ export class Editor { clearChanged = () => store.dispatch(setChanged(false)); triggerOnChange = () => { - if (!this.getEditing() && this.getChanged()) return; + if (!this.getEditing() || this.getChanged()) return; this.setChanged(true); }; @@ -194,18 +193,11 @@ export class Editor { this.router.clearAll(); this.stickers.clearAll(); - this.setActiveSticker(null); - this.setMode(MODES.NONE); - - this.clearChanged(); + // this.setActiveSticker(null); + // this.setMode(MODES.NONE); + // this.clearChanged(); }; - changeLogo = logo => { - // todo: move to sagas - this.logo = logo; - this.setLogo(logo); - this.changeMode(MODES.NONE); - }; setData = ({ route, stickers, version = 1, owner, title, address @@ -217,6 +209,7 @@ export class Editor { if (route) this.poly.setPoints(route); + this.stickers.clearAll(); if (stickers) { stickers.map(sticker => this.stickers.createSticker({ latlng: sticker.latlng, @@ -231,7 +224,7 @@ export class Editor { const bounds = this.poly.poly.getBounds(); - if (Object.values(bounds)) this.map.map.fitBounds(bounds); + if (route && bounds && Object.values(bounds)) this.map.map.fitBounds(bounds); }; setInitialData = () => { @@ -251,6 +244,7 @@ export class Editor { }; startEditing = () => { + console.log('ED START'); const { path } = getUrlData(); const { random_url, id } = this.getUser(); @@ -269,6 +263,7 @@ export class Editor { }; stopEditing = () => { + console.log('ED STOP'); const { path } = getUrlData(); pushPath(`/${(this.initialData && this.initialData.path) || path}`); @@ -284,13 +279,18 @@ export class Editor { console.log('trying to set initial data'); if (this.hasEmptyHistory()) { + console.log('empty history'); this.clearAll(); this.startEditing(); } else { + console.log('setting initial'); this.setData(this.initialData); + console.log('setting initial - done'); } this.clearChanged(); + + return true; }; dumpData = () => ({ diff --git a/src/modules/Router.js b/src/modules/Router.js index 55e2c15..b2de803 100644 --- a/src/modules/Router.js +++ b/src/modules/Router.js @@ -122,6 +122,7 @@ export class Router { }; submitDrawing = () => { + console.log('ROUT', this.router); const [route] = this.router._routes; if (!route) return; diff --git a/src/redux/user/sagas.js b/src/redux/user/sagas.js index 5d95587..5d7a15a 100644 --- a/src/redux/user/sagas.js +++ b/src/redux/user/sagas.js @@ -1,7 +1,7 @@ import { REHYDRATE } from 'redux-persist'; import { takeLatest, select, call, put, takeEvery } from 'redux-saga/effects'; import { checkUserToken, getGuestToken, getStoredMap } from '$utils/api'; -import { setEditing, setMode, setUser } from '$redux/user/actions'; +import { setActiveSticker, setChanged, setEditing, setMode, setUser } from '$redux/user/actions'; import { getUrlData, pushPath } from '$utils/history'; import { editor } from '$modules/Editor'; import { ACTIONS } from '$redux/user/constants'; @@ -39,6 +39,27 @@ function* startEmptyEditorSaga() { // todo: this.clearChanged(); } +function* startEditingSaga() { + yield editor.startEditing(); + yield put(setEditing(true)); +} + +function* stopEditingSaga() { + const { changed, editing, mode } = yield select(getState); + + if (!editing) return; + + if (!changed) { + yield editor.cancelEditing(); + yield put(setEditing(false)); + yield put(setMode(MODES.NONE)); + } else { + // editor.changeMode(MODES.CONFIRM_CANCEL); + // this.props.setMode(MODES.CONFIRM_CANCEL); + yield put(setMode(MODES.CONFIRM_CANCEL)); + } +} + function* mapInitSaga() { const { path, mode } = getUrlData(); @@ -46,13 +67,20 @@ function* mapInitSaga() { const map = yield call(getStoredMap, { name: path }); if (map) { - // todo: this.clearChanged(); - editor.setData(map); + console.log('setting!', map, mode); + + yield editor.setData(map); + yield put(setChanged(false)); if (mode && mode === 'edit') { - editor.startEditing(); + yield call(startEditingSaga); + // yield put(setEditing(true)); + // editor.startEditing(); } else { - editor.stopEditing(); + console.log('stopping edit'); + yield put(setEditing(false)); + // yield call(stopEditingSaga); + // editor.stopEditing(); } return hideLoader(); @@ -83,25 +111,6 @@ function* setModeSaga({ mode }) { // console.log('change', mode); } -function* startEditingSaga() { - yield editor.startEditing(); - yield put(setEditing(true)); -} - -function* stopEditingSaga() { - const { changed } = yield select(getState); - - if (!changed) { - yield editor.cancelEditing(); - yield put(setEditing(false)); - yield put(setMode(MODES.NONE)); - } else { - // editor.changeMode(MODES.CONFIRM_CANCEL); - // this.props.setMode(MODES.CONFIRM_CANCEL); - yield put(setMode(MODES.CONFIRM_CANCEL)); - } -} - function* userLogoutSaga() { const { id } = yield select(getUser); @@ -141,24 +150,26 @@ function* routerSubmitSaga() { return true; } -function* clearSaga({ type }){ +function* clearSaga({ type }) { switch (type) { case ACTIONS.CLEAR_POLY: - editor.poly.clearAll(); - editor.router.clearAll(); + yield editor.poly.clearAll(); + yield editor.router.clearAll(); break; case ACTIONS.CLEAR_STICKERS: - editor.stickers.clearAll(); + yield editor.stickers.clearAll(); break; case ACTIONS.CLEAR_ALL: - editor.clearAll(); + yield editor.clearAll(); + yield put(setChanged(false)); break; default: break; } + yield put(setActiveSticker(null)); yield put(setMode(MODES.NONE)); } diff --git a/src/styles/router.less b/src/styles/router.less index 78a7d7a..1f16eee 100644 --- a/src/styles/router.less +++ b/src/styles/router.less @@ -35,3 +35,7 @@ .router-helper { } + +.router-helper__button { + white-space: nowrap; +}