undo and redo functionality

src/components/dialogs/StickersDialog.tsx

@@ -15,7 +15,7 @@ type Props = ReturnType<typeof mapStateToProps> &
   };
 
 const StickersDialogUnconnected = ({ editorSetActiveSticker, width }: Props) => (
-  <div className="control-dialog control-dialog-big bottom right" style={{ width }}>
+  <div className="control-dialog control-dialog__medium" style={{ width }}>
     <div className="helper stickers-helper">
       {Object.keys(STICKERS).map(set => (
         <div key={set}>

src/components/panels/EditorPanel.tsx

@@ -11,6 +11,8 @@ import {
   editorStopEditing,
   editorTakeAShot,
   editorKeyPressed,
+  editorUndo,
+  editorRedo,
 } from '~/redux/editor/actions';
 import { Tooltip } from '~/components/panels/Tooltip';
 import { IState } from '~/redux/store';
@@ -18,7 +20,7 @@ import { selectEditor } from '~/redux/editor/selectors';
 import pick from 'ramda/es/pick';
 
 const mapStateToProps = (state: IState) =>
-  pick(['mode', 'changed', 'editing', 'features'], selectEditor(state));
+  pick(['mode', 'changed', 'editing', 'features', 'history'], selectEditor(state));
 
 const mapDispatchToProps = {
   editorChangeMode,
@@ -26,6 +28,8 @@ const mapDispatchToProps = {
   editorStopEditing,
   editorTakeAShot,
   editorKeyPressed,
+  editorUndo,
+  editorRedo,
 };
 
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
@@ -68,6 +72,7 @@ class EditorPanelUnconnected extends PureComponent<Props, void> {
       changed,
       editing,
       features: { routing },
+      history: { records, position },
     } = this.props;
 
     return (
@@ -78,6 +83,26 @@ class EditorPanelUnconnected extends PureComponent<Props, void> {
             this.panel = el;
           }}
         >
+          <div className="secondary-bar">
+            <button
+              className={classnames({ inactive: records.length === 0 || position === 0 })}
+              onClick={this.props.editorUndo}
+            >
+              <Tooltip>Отмена</Tooltip>
+              <Icon icon="icon-undo" size={24} />
+            </button>
+
+            <button
+              className={classnames({
+                inactive: !records.length || records.length - 1 <= position,
+              })}
+              onClick={this.props.editorRedo}
+            >
+              <Tooltip>Вернуть</Tooltip>
+              <Icon icon="icon-redo" size={24} />
+            </button>
+          </div>
+
           <div className="control-bar control-bar-padded">
             {routing && (
               <button

src/redux/editor/actions.ts

@@ -123,9 +123,26 @@ export const editorSetRouter = (router: Partial<IEditorState['router']>) => ({
 export const editorSetNominatim = (nominatim: Partial<IEditorState['nominatim']>) => ({
   type: EDITOR_ACTIONS.SET_NOMINATIM,
   nominatim,
-})
+});
 
 export const editorSearchNominatim = (search: IEditorState['nominatim']['search']) => ({
   type: EDITOR_ACTIONS.SEARCH_NOMINATIM,
   search,
-})
+});
+
+export const editorSetHistory = (history: Partial<IEditorState['history']>) => ({
+  type: EDITOR_ACTIONS.SET_HISTORY,
+  history,
+});
+
+export const editorUndo = () => ({
+  type: EDITOR_ACTIONS.UNDO,
+});
+
+export const editorRedo = () => ({
+  type: EDITOR_ACTIONS.REDO,
+});
+
+export const editorCaptureHistory = () => ({
+  type: EDITOR_ACTIONS.CAPTURE_HIPSTORY,
+});

src/redux/editor/constants.ts

@@ -1,5 +1,7 @@
 const P = 'EDITOR';
 
+export const EDITOR_HISTORY_LENGTH = 100;
+
 export const EDITOR_ACTIONS = {
   SET_EDITING: `${P}-SET_EDITING`,
   CHANGE_MODE: `${P}-CHANGE_MODE`,
@@ -47,4 +49,9 @@ export const EDITOR_ACTIONS = {
   SET_ROUTER: `${P}-SET_ROUTER`,
   SET_NOMINATIM: `${P}-SET_NOMINATIM`,
   SEARCH_NOMINATIM: `${P}-SEARCH_NOMINATIM`,
+
+  SET_HISTORY: `${P}-SET_HISTORY`,
+  UNDO: `${P}-UNDO`,
+  REDO: `${P}-REDO`,
+  CAPTURE_HIPSTORY: `${P}-CAPTURE_HIPSTORY`,
 };

src/redux/editor/handlers.ts

@@ -168,6 +168,17 @@ const setNominatim = (
   },
 });
 
+const setHistory = (
+  state,
+  { history }: ReturnType<typeof ACTIONS.editorSetHistory>
+): IEditorState => ({
+  ...state,
+  history: {
+    ...state.history,
+    ...history,
+  },
+});
+
 export const EDITOR_HANDLERS = {
   [EDITOR_ACTIONS.SET_EDITING]: setEditing,
   [EDITOR_ACTIONS.SET_CHANGED]: setChanged,
@@ -196,4 +207,6 @@ export const EDITOR_HANDLERS = {
   [EDITOR_ACTIONS.SET_IS_ROUTING]: setIsRouting,
   [EDITOR_ACTIONS.SET_ROUTER]: setRouter,
   [EDITOR_ACTIONS.SET_NOMINATIM]: setNominatim,
+
+  [EDITOR_ACTIONS.SET_HISTORY]: setHistory,
 };

src/redux/editor/index.ts

@@ -4,6 +4,12 @@ import { MODES } from '~/constants/modes';
 import { EDITOR_HANDLERS } from './handlers';
 import { ILatLng } from '../map/types';
 import { INominatimResult } from '~/redux/types';
+import { IMapReducer } from '../map';
+
+export interface IEditorHistoryItem {
+  route: IMapReducer['route'];
+  stickers: IMapReducer['stickers'];
+}
 
 export interface IEditorState {
   changed: boolean;
@@ -57,6 +63,10 @@ export interface IEditorState {
     processing: boolean;
     loading: boolean;
   };
+  history: {
+    records: IEditorHistoryItem[];
+    position: number;
+  };
 }
 
 export const EDITOR_INITIAL_STATE = {
@@ -109,6 +119,11 @@ export const EDITOR_INITIAL_STATE = {
     processing: false,
     loading: false,
   },
+
+  history: {
+    records: [{ route: [], stickers: [] }],
+    position: 0,
+  },
 };
 
 export const editor = createReducer(EDITOR_INITIAL_STATE, EDITOR_HANDLERS);

src/redux/editor/sagas.ts

@@ -27,6 +27,9 @@ import {
   editorSetNominatim,
   editorSetMode,
   editorSetRouter,
+  editorSetHistory,
+  editorUndo,
+  editorRedo,
 } from '~/redux/editor/actions';
 import { getUrlData, pushPath } from '~/utils/history';
 import { MODES } from '~/constants/modes';
@@ -34,7 +37,7 @@ import { checkOSRMService, checkNominatimService, searchNominatim } from '~/util
 import { LatLng } from 'leaflet';
 import { searchSetTab } from '../user/actions';
 import { TABS, DIALOGS } from '~/constants/dialogs';
-import { EDITOR_ACTIONS } from './constants';
+import { EDITOR_ACTIONS, EDITOR_HISTORY_LENGTH } from './constants';
 import { getGPXString, downloadGPXTrack } from '~/utils/gpx';
 import {
   getTilePlacement,
@@ -53,7 +56,7 @@ import { selectMap, selectMapRoute } from '../map/selectors';
 import { selectUser } from '../user/selectors';
 import { LOGOS } from '~/constants/logos';
 import { loadMapFromPath } from '../map/sagas';
-import { mapClicked, mapSetRoute } from '../map/actions';
+import { mapClicked, mapSetRoute, mapSet } from '../map/actions';
 import { MAP_ACTIONS } from '../map/constants';
 import { OsrmRouter } from '~/utils/map/OsrmRouter';
 import path from 'ramda/es/path';
@@ -236,6 +239,10 @@ function* keyPressedSaga({ key, target }: ReturnType<typeof editorKeyPressed>) {
     } else {
       yield put(editorChangeMode(MODES.TRASH));
     }
+  } else if (key === 'z') {
+    yield put(editorUndo())
+  } else if (key === 'u') {
+    yield put(editorRedo())
   }
 }
 
@@ -316,6 +323,51 @@ function* changeMode({ mode }: ReturnType<typeof editorChangeMode>) {
   }
 }
 
+function* changeHistory() {
+  const { history }: ReturnType<typeof selectEditor> = yield select(selectEditor);
+  const { route, stickers }: ReturnType<typeof selectMap> = yield select(selectMap);
+
+  const current =
+    history.records.length - 1 > history.position
+      ? history.records.slice(0, history.position + 1)
+      : history.records;
+
+  const records = [...current, { route, stickers }];
+  const min = Math.max(0, records.length - EDITOR_HISTORY_LENGTH - 1);
+  const max = Math.min(records.length, EDITOR_HISTORY_LENGTH + 2);
+
+  yield put(
+    editorSetHistory({
+      records: records.slice(min, max),
+      position: records.slice(min, max).length - 1,
+    })
+  );
+}
+
+function* undoHistory() {
+  const { history }: ReturnType<typeof selectEditor> = yield select(selectEditor);
+
+  if (history.position === 0 || history.records.length <= 1) return;
+
+  const route = history.records[history.position - 1].route;
+  const stickers = history.records[history.position - 1].stickers;
+
+  yield put(mapSet({ route, stickers }));
+  yield put(editorSetHistory({ position: history.position - 1 }));
+}
+
+function* redoHistory() {
+  const { history }: ReturnType<typeof selectEditor> = yield select(selectEditor);
+
+  if (history.position >= history.records.length - 1) return;
+
+  const route = history.records[history.position + 1].route;
+  const stickers = history.records[history.position + 1].stickers;
+
+  yield put(mapSet({ route, stickers }));
+  yield put(editorSetHistory({ position: history.position + 1 }));
+}
+
 export function* editorSaga() {
   yield takeEvery(EDITOR_ACTIONS.LOCATION_CHANGED, locationChangeSaga);
 
@@ -330,4 +382,19 @@ export function* editorSaga() {
   yield takeLatest(EDITOR_ACTIONS.CANCEL_SAVE, cancelSave);
   yield takeLeading(EDITOR_ACTIONS.SEARCH_NOMINATIM, searchNominatimSaga);
   yield takeLeading(EDITOR_ACTIONS.CHANGE_MODE, changeMode);
+
+  yield takeEvery(
+    [
+      MAP_ACTIONS.ADD_STICKER,
+      MAP_ACTIONS.DROP_STICKER,
+      MAP_ACTIONS.SET_STICKERS,
+      MAP_ACTIONS.SET_STICKER,
+      MAP_ACTIONS.SET_ROUTE,
+      EDITOR_ACTIONS.CAPTURE_HIPSTORY,
+    ],
+    changeHistory
+  );
+
+  yield takeEvery(EDITOR_ACTIONS.UNDO, undoHistory);
+  yield takeEvery(EDITOR_ACTIONS.REDO, redoHistory);
 }

src/redux/map/sagas.ts

@@ -31,6 +31,8 @@ import {
   editorSendSaveRequest,
   editorSetSave,
   editorClearAll,
+  editorSetHistory,
+  editorCaptureHistory,
 } from '~/redux/editor/actions';
 import { pushLoaderState, getUrlData, pushPath } from '~/utils/history';
 import { getStoredMap, postMap } from '~/utils/api';
@@ -86,6 +88,7 @@ export function* loadMapSaga(path) {
       })
     );
 
+    yield put(editorSetHistory({ records: [{ route: route.route, stickers: route.stickers }] }));
     return { route, random_url };
   }
 
@@ -113,6 +116,7 @@ export function* startEmptyEditorSaga() {
 
 export function* loadMapFromPath() {
   const { path, mode } = getUrlData();
+  yield put(editorSetHistory({ records: [{ route: [], stickers: [] }], position: 0 }));
 
   if (path) {
     const map = yield call(loadMapSaga, path);
@@ -133,9 +137,6 @@ export function* mapInitSaga() {
   pushLoaderState(90);
 
   const { hash } = getUrlData();
-  const {
-    user: { id },
-  }: ReturnType<typeof selectUser> = yield select(selectUser);
   const provider: ReturnType<typeof selectMapProvider> = yield select(selectMapProvider);
 
   yield put(mapSetProvider(provider));
@@ -190,8 +191,8 @@ function* clearAllSaga() {
   if (!stickers.length && !route.length) return;
 
   yield put(editorSetChanged(false));
-  yield put(mapSetRoute([]));
+  yield put(mapSet({ route: [], stickers: [] }));
-  yield put(mapSetStickers([]));
+  yield put(editorCaptureHistory());
 }
 
 function* clearSaga({ type }) {

src/redux/user/sagas.ts

@@ -342,13 +342,8 @@ export function* updateUserRoutes() {
   yield put(searchSetTab(TABS.MY));
 }
 
-// function* getUserLocation() {
-  // yield call(watchLocation, ActionCreators.setUserLocation);
-// }
-
 export function* userSaga() {
   yield takeLatest(REHYDRATE, authCheckSaga);
-  // yield takeLatest(REHYDRATE, getUserLocation);
 
   yield takeEvery(USER_ACTIONS.USER_LOGOUT, userLogoutSaga);
   yield takeLatest(USER_ACTIONS.GOT_VK_USER, gotVkUserSaga);

src/sprites/icon.svg

@@ -380,6 +380,16 @@
 					<path d="M0 3.093h11.548l2.026 1.681-2.026 1.888H0zM15.955 0l-2.182 2.182 2.695 2.695-2.695 2.695 2.182 2.183 2.695-2.696 2.696 2.696 2.182-2.183-2.696-2.695 2.696-2.695L21.346 0 18.65 2.695z" fill="#fff" />
 				</g>
 			</g>
+			<g id="icon-undo" stroke="none">
+				<g transform="translate(8 8)" fill="white">
+					<path d="M5.912 1.278c-.967 0-2.84.42-2.84.42L2.257 0 0 4.855 5.094 6.19l-.777-1.938s1.101-.113 1.595-.115a6.974 6.974 0 016.972 6.973 6.97 6.97 0 01-.921 3.457l2.07 2.07a9.833 9.833 0 001.71-5.527c0-5.43-4.401-9.832-9.831-9.832z" fill="#fff"/>
+				</g>
+			</g>
+			<g id="icon-redo" stroke="none">
+				<g transform="translate(8 8)" fill="white">
+					<path d="M9.832 1.278c.967 0 2.84.42 2.84.42L13.486 0l2.257 4.855L10.65 6.19l.777-1.938s-1.101-.113-1.595-.115a6.974 6.974 0 00-6.973 6.973 6.97 6.97 0 00.922 3.457l-2.07 2.07A9.833 9.833 0 010 11.11c0-5.43 4.402-9.832 9.832-9.832z" fill="#fff"/>
+				</g>
+			</g>
 		</svg>
 	</defs>
 	<use xlink:href="#icon-trash-6" />

src/styles/panel.less

@@ -27,6 +27,20 @@
   }
 }
 
+.secondary-bar {
+  background: #222222;
+  margin: 0 -1px;
+
+  &:first-child {
+    border-radius: @panel_radius 0 0 @panel_radius;
+  }
+
+  .panel & button {
+    height: 40px;
+    padding: 4px;
+  }
+}
+
 .panel {
   position: fixed;
   left: 10px;
@@ -264,41 +278,41 @@
     left: 10px;
   }
 
-  &.control-dialog-big {
+  // &.control-dialog-big {
-    min-width: 555px;
+  //   min-width: 555px;
 
-    @media (max-width: @mobile_breakpoint) {
+  //   @media (max-width: @mobile_breakpoint) {
-      min-width: 100%;
+  //     min-width: 100%;
-      max-width: 100%;
+  //     max-width: 100%;
-      width: 100% !important;
+  //     width: 100% !important;
-      left: 0;
+  //     left: 0;
-      padding: 0 10px;
+  //     padding: 0 10px;
-    }
+  //   }
-  }
+  // }
 
-  &.control-dialog-medium {
+  // &.control-dialog-medium {
-    min-width: 460px;
+  //   min-width: 460px;
 
-    @media (max-width: @mobile_breakpoint) {
+  //   @media (max-width: @mobile_breakpoint) {
-      min-width: 100%;
+  //     min-width: 100%;
-      max-width: 100%;
+  //     max-width: 100%;
-      width: 100% !important;
+  //     width: 100% !important;
-      left: 0;
+  //     left: 0;
-      padding: 0 10px;
+  //     padding: 0 10px;
-    }
+  //   }
-  }
+  // }
 
-  &.control-dialog-small {
+  // &.control-dialog-small {
-    min-width: 270px;
+  //   min-width: 270px;
 
-    @media (max-width: @mobile_breakpoint) {
+  //   @media (max-width: @mobile_breakpoint) {
-      min-width: 100%;
+  //     min-width: 100%;
-      max-width: 100%;
+  //     max-width: 100%;
-      width: 100% !important;
+  //     width: 100% !important;
-      left: 0;
+  //     left: 0;
-      padding: 0 10px;
+  //     padding: 0 10px;
-    }
+  //   }
-  }
+  // }
 
   .helper:first-child {
     border-radius: @panel_radius @panel_radius 0 0;
@@ -312,8 +326,13 @@
     border-radius: @panel_radius;
   }
 
+  &__big {
+    width: calc(100% - 20px);
+    max-width: 620px;
+  }
+
   &__medium {
-    width: 100%;
+    width: calc(100% - 20px);
     max-width: 417px;
   }
 }