clearing route on new position

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" />

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())
   }
 }

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 {