forwards and backwards drawing

src/components/dialogs/PolylineDialog.tsx

@@ -5,18 +5,28 @@ import * as MAP_ACTIONS from '~/redux/map/actions';
 import { IState } from '~/redux/store';
 import { selectMapRoute } from '~/redux/map/selectors';
 import classNames from 'classnames';
+import { selectEditorDirection } from '~/redux/editor/selectors';
+import * as EDITOR_ACTIONS from '~/redux/editor/actions';
+import { DRAWING_DIRECTIONS } from '~/redux/editor/constants';
 
 const mapStateToProps = (state: IState) => ({
   route: selectMapRoute(state),
+  direction: selectEditorDirection(state),
 });
 
 const mapDispatchToProps = {
   mapSetRoute: MAP_ACTIONS.mapSetRoute,
+  editorSetDirection: EDITOR_ACTIONS.editorSetDirection,
 };
 
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const PolylineDialogUnconnected: FC<Props> = ({ route, mapSetRoute }) => {
+const PolylineDialogUnconnected: FC<Props> = ({
+  route,
+  direction,
+  editorSetDirection,
+  mapSetRoute,
+}) => {
   const reverseRoute = useCallback(() => {
     if (route.length < 2) return;
     mapSetRoute([...route].reverse());
@@ -34,6 +44,14 @@ const PolylineDialogUnconnected: FC<Props> = ({ route, mapSetRoute }) => {
     mapSetRoute(route.slice(0, route.length - 1));
   }, [mapSetRoute, route]);
 
+  const continueBackward = useCallback(() => {
+    editorSetDirection(DRAWING_DIRECTIONS.BACKWARDS);
+  }, [editorSetDirection]);
+
+  const continueForward = useCallback(() => {
+    editorSetDirection(DRAWING_DIRECTIONS.FORWARDS);
+  }, [editorSetDirection]);
+
   return (
     <div className="control-dialog control-dialog__medium">
       <div className="helper">
@@ -59,6 +77,24 @@ const PolylineDialogUnconnected: FC<Props> = ({ route, mapSetRoute }) => {
             <Icon icon="icon-drop-end" />
           </button>
 
+          <button
+            className={classNames('helper__icon_button', {
+              active: direction === DRAWING_DIRECTIONS.BACKWARDS,
+            })}
+            onClick={continueBackward}
+          >
+            <Icon icon="icon-draw-backward" />
+          </button>
+
+          <button
+            className={classNames('helper__icon_button', {
+              active: direction === DRAWING_DIRECTIONS.FORWARDS,
+            })}
+            onClick={continueForward}
+          >
+            <Icon icon="icon-draw-forward" />
+          </button>
+
           <div className="flex_1" />
 
           <div className="big white upper">Ручной режим</div>

src/components/dialogs/RouterDialog.tsx

@@ -3,8 +3,9 @@ import { Icon } from '~/components/panels/Icon';
 import * as EDITOR_ACTIONS from '~/redux/editor/actions';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
-import { selectEditor } from '~/redux/editor/selectors';
+import { selectEditor, selectEditorRouter, selectEditorDirection } from '~/redux/editor/selectors';
 import pick from 'ramda/es/pick';
+import { IState } from '~/redux/store';
 
 const noPoints = ({
   editorRouterCancel,
@@ -84,8 +85,8 @@ const draggablePoints = ({
   </React.Fragment>
 );
 
-const mapStateToProps = state => ({
-  editor: pick(['router'], selectEditor(state)),
+const mapStateToProps = (state: IState) => ({
+  router: selectEditorRouter(state),
 });
 
 const mapDispatchToProps = {
@@ -96,9 +97,7 @@ const mapDispatchToProps = {
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const RouterDialogUnconnected: FC<Props> = ({
-  editor: {
-    router: { waypoints },
-  },
+  router: { waypoints },
   editorRouterCancel,
   editorRouterSubmit,
 }) => (