From 7c931f4f6dfae45a6e600f7703f97b09dc97f2c1 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 22 Jan 2020 13:03:52 +0700
Subject: [PATCH] clearing route on new position

---
 src/components/panels/EditorPanel.tsx | 53 ++++++++++++++++-----------
 src/redux/editor/sagas.ts             |  2 +-
 src/styles/panel.less                 |  4 ++
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/components/panels/EditorPanel.tsx b/src/components/panels/EditorPanel.tsx
index 18a1683..e01bb5e 100644
--- a/src/components/panels/EditorPanel.tsx
+++ b/src/components/panels/EditorPanel.tsx
@@ -17,10 +17,15 @@ import {
 import { Tooltip } from '~/components/panels/Tooltip';
 import { IState } from '~/redux/store';
 import { selectEditor } from '~/redux/editor/selectors';
-import pick from 'ramda/es/pick';
+import { selectMap } from '~/redux/map/selectors';
 
-const mapStateToProps = (state: IState) =>
-  pick(['mode', 'changed', 'editing', 'features', 'history'], selectEditor(state));
+const mapStateToProps = (state: IState) => {
+  const { mode, changed, editing, features, history } = selectEditor(state);
+  const { route, stickers } = selectMap(state);
+  return {
+    mode, changed, editing, features, history, route, stickers,
+  }    
+}
 
 const mapDispatchToProps = {
   editorChangeMode,
@@ -73,8 +78,13 @@ class EditorPanelUnconnected extends PureComponent<Props, void> {
       editing,
       features: { routing },
       history: { records, position },
+      route, stickers,
     } = this.props;
 
+    const can_undo = records.length > 0 && position > 0;
+    const can_redo = records.length && records.length - 1 > position;
+    const can_clear = route.length > 0 || stickers.length > 0;
+
     return (
       <div>
         <div
@@ -83,24 +93,35 @@ class EditorPanelUnconnected extends PureComponent<Props, void> {
             this.panel = el;
           }}
         >
-          <div className="secondary-bar desktop-only">
-            <button
-              className={classnames({ inactive: records.length === 0 || position === 0 })}
-              onClick={this.props.editorUndo}
-            >
+          <div
+            className={classnames('secondary-bar desktop-only secondary-bar__undo', {
+              active: can_undo || can_redo || can_clear,
+            })}
+          >
+            <button className={classnames({ inactive: !can_undo })} onClick={this.props.editorUndo}>
               <Tooltip>Отмена (z)</Tooltip>
               <Icon icon="icon-undo" size={24} />
             </button>
 
             <button
               className={classnames({
-                inactive: !records.length || records.length - 1 <= position,
+                inactive: !can_redo,
               })}
               onClick={this.props.editorRedo}
             >
-              <Tooltip>Вернуть (u)</Tooltip>
+              <Tooltip>Вернуть (x)</Tooltip>
               <Icon icon="icon-redo" size={24} />
             </button>
+
+            <button
+              className={classnames({
+                inactive: !can_clear,
+              })}
+              onClick={this.startTrashMode}
+            >
+              <Tooltip>Очистить</Tooltip>
+              <Icon icon="icon-trash-4" size={24} />
+            </button>
           </div>
 
           <div className="control-bar control-bar-padded">
@@ -135,18 +156,6 @@ class EditorPanelUnconnected extends PureComponent<Props, void> {
 
           <div className="control-sep" />
 
-          <div className="control-bar control-bar-padded">
-            <button
-              className={classnames({ active: mode === MODES.TRASH })}
-              onClick={this.startTrashMode}
-            >
-              <Tooltip>Удаление элементов</Tooltip>
-              <Icon icon="icon-trash-6" />
-            </button>
-          </div>
-
-          <div className="control-sep" />
-
           <div className="control-bar">
             <button className="highlighted cancel" onClick={this.props.editorStopEditing}>
               <Icon icon="icon-cancel-1" />
diff --git a/src/redux/editor/sagas.ts b/src/redux/editor/sagas.ts
index 91d48f2..cefd963 100644
--- a/src/redux/editor/sagas.ts
+++ b/src/redux/editor/sagas.ts
@@ -241,7 +241,7 @@ function* keyPressedSaga({ key, target }: ReturnType<typeof editorKeyPressed>) {
     }
   } else if (key === 'z') {
     yield put(editorUndo())
-  } else if (key === 'u') {
+  } else if (key === 'x') {
     yield put(editorRedo())
   }
 }
diff --git a/src/styles/panel.less b/src/styles/panel.less
index 9370593..21b2126 100644
--- a/src/styles/panel.less
+++ b/src/styles/panel.less
@@ -30,6 +30,7 @@
 .secondary-bar {
   background: #222222;
   margin: 0 -1px;
+  padding: 0 1px;
 
   &:first-child {
     border-radius: @panel_radius 0 0 @panel_radius;
@@ -39,6 +40,9 @@
     height: 40px;
     padding: 4px;
   }
+
+  &__undo {
+  }
 }
 
 .panel {