editor: hotkeys added

src/components/panels/EditorPanel.jsx

@@ -9,7 +9,7 @@ import { EditorDialog } from '$components/panels/EditorDialog';
 import { LogoPreview } from '$components/logo/LogoPreview';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { setMode, startEditing, stopEditing, setLogo, takeAShot } from '$redux/user/actions';
+import { setMode, startEditing, stopEditing, setLogo, takeAShot, keyPressed } from '$redux/user/actions';
 
 import { UserLocation } from '$components/UserLocation';
 import { PROVIDERS } from '$constants/providers';
@@ -28,10 +28,13 @@ type Props = {
   startEditing: Function,
   stopEditing: Function,
   takeAShot: Function,
+  keyPressed: Function,
 }
 
 class Component extends React.PureComponent<Props, void> {
   componentDidMount() {
+    window.addEventListener('keydown', this.props.keyPressed);
+
     const obj = document.getElementById('control-dialog');
     const { width } = this.panel.getBoundingClientRect();
 
@@ -40,6 +43,10 @@ class Component extends React.PureComponent<Props, void> {
     obj.style.width = width;
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.props.keyPressed);
+  }
+
   startPolyMode = () => this.props.setMode(MODES.POLY);
   startStickerMode = () => this.props.setMode(MODES.STICKERS);
   startRouterMode = () => this.props.setMode(MODES.ROUTER);
@@ -123,7 +130,7 @@ class Component extends React.PureComponent<Props, void> {
               className={classnames({ active: false })}
               onClick={this.props.takeAShot}
             >
-              <Icon icon="icon-shot-2" />
+              <Icon icon="icon-shot-4" />
             </button>
           </div>
 
@@ -208,6 +215,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   startEditing,
   stopEditing,
   takeAShot,
+  keyPressed,
 }, dispatch);
 
 export const EditorPanel = connect(

src/components/renderer/Renderer.jsx

@@ -34,7 +34,7 @@ class Component extends React.Component<Props, State> {
   };
 
   componentWillUnmount() {
-    this.croppr.destroy();
+    if (this.croppr) this.croppr.destroy();
   }
 
   onCropInit = (crop) => {

src/index.html

@@ -4,11 +4,10 @@
   <meta name="viewport" content="initial-scale=1, maximum-scale=0.8">
   <meta name="theme-color" content="#5A3D6D">
 
-  <link rel="icon" href="favicon.png?d" type="image/png" />
   <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&amp;subset=cyrillic" rel="stylesheet">
   <title>@ORCHID</title>
 
-  <link rel="shortcut icon" href="/favicon.png?wd" type="image/png">
+  <link rel="shortcut icon" href="/favicon.png" type="image/png">
   <meta property="og:image" content="/misc/vk_preview.png" />
   <meta content="/misc/vk_preview.png">
   <style>

src/modules/Editor.js

@@ -328,13 +328,6 @@ export class Editor {
     provider: this.provider,
   });
 
-  // setProvider = provider => {
-  //   if (provider === this.provider) return;
-  //
-  //   this.provider = provider;
-  //   this.map.setProvider(provider);
-  // };
-
   setProvider = provider => store.dispatch(setProvider(provider));
 
   get isEmpty() {

src/redux/user/actions.js

@@ -47,3 +47,4 @@ export const locationChanged = location => ({ type: ACTIONS.LOCATION_CHANGED, lo
 export const setReady = ready => ({ type: ACTIONS.SET_READY, ready });
 
 export const gotVkUser = user => ({ type: ACTIONS.GOT_VK_USER, user });
+export const keyPressed = ({ key }) => ({ type: ACTIONS.KEY_PRESSED, key });

src/redux/user/constants.js

@@ -47,4 +47,5 @@ export const ACTIONS = ({
   SET_READY: 'SET_READY',
 
   GOT_VK_USER: 'GOT_VK_USER',
+  KEY_PRESSED: 'KEY_PRESSED',
 }: { [key: String]: String });

src/redux/user/sagas.js

@@ -5,7 +5,7 @@ import { checkUserToken, getGuestToken, getStoredMap, postMap } from '$utils/api
 import {
   hideRenderer,
   setActiveSticker, setAddress,
-  setChanged,
+  setChanged, setDialogActive,
   setEditing,
   setMode, setReady, setRenderer,
   setSaveError,
@@ -297,7 +297,12 @@ function* getRenderData() {
 }
 
 function* takeAShotSaga() {
-  const data = yield call(getRenderData);
+  const { data, cancel } = yield race({
+    data: call(getRenderData),
+    cancel: take(ACTIONS.HIDE_RENDERER),
+  });
+
+  if (cancel || !data) return;
 
   yield put(setRenderer({
     data, renderer_active: true, width: window.innerWidth, height: window.innerHeight
@@ -377,6 +382,18 @@ function* gotVkUserSaga({ user }) {
   yield put(setUser(data));
 }
 
+function* keyPressedSaga({ key }): void {
+  if (key === 'Escape') {
+    const { dialog_active, mode, renderer: { renderer_active } } = yield select(getState);
+
+    if (renderer_active) return yield put(hideRenderer());
+    if (dialog_active) return yield put(setDialogActive(false));
+    if (mode !== MODES.NONE) return yield put(setMode(MODES.NONE));
+  }
+
+  return;
+}
+
 export function* userSaga() {
   yield takeLatest(REHYDRATE, authCheckSaga);
   yield takeEvery(ACTIONS.SET_MODE, setModeSaga);
@@ -406,4 +423,5 @@ export function* userSaga() {
   yield takeLatest(ACTIONS.LOCATION_CHANGED, locationChangeSaga);
 
   yield takeLatest(ACTIONS.GOT_VK_USER, gotVkUserSaga);
+  yield takeLatest(ACTIONS.KEY_PRESSED, keyPressedSaga);
 }

src/sprites/icon.svg

@@ -333,8 +333,18 @@
                 <path stroke="none" fill="black"/>
                 <path xmlns="http://www.w3.org/2000/svg" d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z" fill="white" stroke="white" stroke-width="0" transform="translate(4 4)"/>
             </g>
+
+            <g id="icon-shot-4" stroke="none">
+                <path stroke="none" fill="black"/>
+                <path d="M14.12 4l1.83 2H20v12H4V6h4.05l1.83-2h4.24M15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm-3 7c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z" fill="white" stroke="white" stroke-width="0" transform="translate(4 4)"/>
+            </g>
+
+            <g id="icon-trash-5" stroke="none">
+                <path stroke="none" fill="black"/>
+                <path d="M14.12 10.47L12 12.59l-2.13-2.12-1.41 1.41L10.59 14l-2.12 2.12 1.41 1.41L12 15.41l2.12 2.12 1.41-1.41L13.41 14l2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)"/>
+            </g>
         </svg>
     </defs>
 
-    <use xlink:href="#icon-folder-1" />
+    <use xlink:href="#icon-trash-5" />
 </svg>

src/utils/history.js

@@ -2,7 +2,6 @@ import { history } from '$redux/store';
 
 export const getPath = () => (window.location && window.location.pathname);
 export const pushPath = url => {
-  console.log('PUSHING', url);
   return history.push(url);
 };
 
@@ -10,5 +9,7 @@ export const getUrlData = (url = getPath()) => {
   const [, path, mode] = url.split('/');
   const { host, hash } = window.location;
 
-  return { path, mode, host, hash };
+  return {
+    path, mode, host, hash
+  };
 };