route reverse

src/components/dialogs/PolylineDialog.tsx

@@ -0,0 +1,59 @@
+import React, { FC, useCallback } from 'react';
+import { Icon } from '~/components/panels/Icon';
+import { connect } from 'react-redux';
+import * as EDITOR_ACTIONS from '~/redux/editor/actions';
+import * as MAP_ACTIONS from '~/redux/map/actions';
+import { IState } from '~/redux/store';
+import { selectMapRoute } from '~/redux/map/selectors';
+
+const mapStateToProps = (state: IState) => ({
+  route: selectMapRoute(state),
+});
+
+const mapDispatchToProps = {
+  mapSetRoute: MAP_ACTIONS.mapSetRoute,
+};
+
+type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const PolylineDialogUnconnected: FC<Props> = ({ route, mapSetRoute }) => {
+  const reverseRoute = useCallback(() => {
+    mapSetRoute([...route].reverse());
+  }, [mapSetRoute, route]);
+  
+  const curRouteStart = useCallback(() => {
+    mapSetRoute(route.slice(1, route.length));
+  }, [mapSetRoute, route]);
+  
+  const curRouteEnd = useCallback(() => {
+    mapSetRoute(route.slice(0, route.length - 1));
+  }, [mapSetRoute, route]);
+
+  return (
+    <div className="control-dialog control-dialog__medium">
+      <div className="helper">
+        <div className="helper__text">
+          <button className="helper__icon_button" onClick={reverseRoute}>
+            <Icon icon="icon-reverse" />
+          </button>
+
+          <button className="helper__icon_button" onClick={curRouteStart}>
+            <Icon icon="icon-pin-1" />
+          </button>
+
+          <button className="helper__icon_button" onClick={curRouteEnd}>
+            <Icon icon="icon-pin-1" />
+          </button>
+
+          <div className="flex_1" />
+
+          <div className="big white upper">Ручной режим</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const PolylineDialog = connect(mapStateToProps, mapDispatchToProps)(PolylineDialogUnconnected);
+
+export { PolylineDialog };

src/components/dialogs/RouterDialog.tsx

@@ -18,6 +18,7 @@ const noPoints = ({
         <div className="big white upper">Укажите первую точку на карте</div>
       </div>
     </div>
+    
     <div className="helper router-helper">
       <div className="flex_1" />
 

src/components/dialogs/TrashDialog.tsx

@@ -34,9 +34,11 @@ const TrashDialogUnconnected: FC<Props> = ({
           <div className="button router-helper__button" onClick={editorClearPoly}>
             Маршрут
           </div>
+          
           <div className="button router-helper__button" onClick={editorClearStickers}>
             Стикеры
           </div>
+
           <div className="button router-helper__button" onClick={editorClearAll}>
             ВСЕ
           </div>

src/components/panels/EditorDialog.tsx

@@ -2,6 +2,7 @@ import React, { createElement } from 'react';
 import { MODES } from '~/constants/modes';
 
 import { RouterDialog } from '~/components/dialogs/RouterDialog';
+import { PolylineDialog } from '~/components/dialogs/PolylineDialog';
 import { StickersDialog } from '~/components/dialogs/StickersDialog';
 import { TrashDialog } from '~/components/dialogs/TrashDialog';
 import { LogoDialog } from '~/components/dialogs/LogoDialog';
@@ -29,6 +30,7 @@ const DIALOG_CONTENTS: { [x: string]: any } = {
   [MODES.CONFIRM_CANCEL]: CancelDialog,
   [MODES.PROVIDER]: ProviderDialog,
   [MODES.SHOT_PREFETCH]: ShotPrefetchDialog,
+  [MODES.POLY]: PolylineDialog,
 };
 
 const EditorDialogUnconnected = (props: Props) =>