cursor: hint for stickers

src/components/Cursor.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import { Icon } from '$components/panels/Icon';
 import { MODES } from '$constants/modes';
+import { STICKERS } from '$constants/stickers';
+import { StickerIcon } from '$components/StickerIcon';
 
 type Props = {
   mode: String,
+  sticker: String,
+  set: String,
 }
 
 export class Cursor extends React.PureComponent<Props, void> {
@@ -20,12 +24,14 @@ export class Cursor extends React.PureComponent<Props, void> {
   };
 
   render() {
-    const { mode } = this.props;
+    const { mode, set, sticker } = this.props;
+    const activeSticker = (sticker && set && STICKERS[set] && STICKERS[set].layers[sticker]);
 
     return (
       <div className="cursor-tooltip" ref={el => { this.cursor = el; }}>
         { mode === MODES.ROUTER && <Icon icon="icon-router" />}
         { mode === MODES.POLY && <Icon icon="icon-poly" />}
+        { mode === MODES.STICKERS && activeSticker && <StickerIcon sticker={sticker} set={set} /> }
       </div>
     );
   }

src/components/StickerIcon.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { STICKERS } from '$constants/stickers';
+
+type Props = {
+  set: String,
+  sticker: String,
+};
+
+export const StickerIcon = ({ set, sticker }: Props) => (
+  <div
+    className="cursor-icon-sticker"
+    style={{
+      backgroundImage: `url(${STICKERS[set].url}`,
+      backgroundPosition: `-${STICKERS[set].layers[sticker].off * 100}% 50%`,
+    }}
+  />
+);
+
+//

src/components/panels/EditorDialog.jsx

@@ -41,7 +41,7 @@ export const Component = (props: Props) => {
 
   const showDialog = (
     mode === MODES.ROUTER
-    || (mode === MODES.STICKERS && !activeSticker)
+    || (mode === MODES.STICKERS && !activeSticker.set)
     || mode === MODES.TRASH
     || mode === MODES.LOGO
     || mode === MODES.SAVE

src/containers/App.jsx

@@ -19,6 +19,8 @@ type Props = {
   mode: String,
   dialog: String,
   dialog_active: Boolean,
+  sticker: String,
+  set: String,
 }
 
 const Component = (props: Props) => (
@@ -26,7 +28,7 @@ const Component = (props: Props) => (
     <Fills />
     <UserPanel />
     <EditorPanel />
-    <Cursor mode={props.mode} />
+    <Cursor mode={props.mode} sticker={props.sticker} set={props.set} />
     <LeftDialog dialog={props.dialog} dialog_active={props.dialog_active} />
 
     { props.renderer_active &&
@@ -35,11 +37,17 @@ const Component = (props: Props) => (
   </div>
 );
 
-const mapStateToProps = ({ user: { mode, dialog, dialog_active, renderer } }) => ({
+const mapStateToProps = ({
+  user: {
+    mode, dialog, dialog_active, renderer, activeSticker: { sticker = null, set = null },
+  }
+}) => ({
   renderer_active: renderer.renderer_active,
   mode,
   dialog,
   dialog_active,
+  sticker,
+  set,
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({ hideRenderer }, dispatch);

src/index.js

@@ -1,14 +1,29 @@
 /*
-  todo shot mechanism (50%)
+  done shot mechanism (100%)
     done client-side shot mechanism
-    todo croppr.js
-    todo shot stickers
+    done croppr.js
+    done shot stickers
+    todo progress
 
   todo hotkeys via sagas
   todo map catalogue
+    todo public maps
+    todo map search
+    todo map lazy loading
+
   todo map preview on save
   todo tooltips
 
+  todo better poly editor https://github.com/SupriyaSudhindra/leaflet-editable-polyline
+  todo network operations notify
+    todo delayed notify (delay(2000).then(showLoadingMsg))
+    todo network error notifications
+    todo check canvas support at startup
+    todo check osrm is up
+
+  todo better loader screen
+    todo network errors handling on startup
+
  */
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -16,11 +31,7 @@ import ReactDOM from 'react-dom';
 import { App } from '$containers/App';
 import '$styles/main.less';
 
-// import 'raleway-cyrillic/raleway.css';
-// import 'typeface-pt-sans';
-
 import { Provider } from 'react-redux';
-// import { ConnectedRouter } from 'react-router-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { configureStore } from '$redux/store';
 
@@ -35,5 +46,3 @@ export const Index = () => (
 );
 
 ReactDOM.render(<Index />, document.getElementById('index'));
-
-// <PersistGate loading={null} persistor={persistor}>

src/modules/Editor.js

@@ -3,7 +3,7 @@ import { Poly } from '$modules/Poly';
 import { MODES } from '$constants/modes';
 import { Stickers } from '$modules/Stickers';
 import { Router } from '$modules/Router';
-import { DEFAULT_LOGO } from '$constants/logos';
+import { DEFAULT_LOGO, LOGOS } from '$constants/logos';
 
 import { parseStickerAngle, parseStickerStyle } from '$utils/import';
 import { getUrlData } from '$utils/history';
@@ -12,7 +12,7 @@ import {
   resetSaveDialog,
   setActiveSticker, setAddress,
   setChanged,
-  setDistance,
+  setDistance, setLogo,
   setMode,
   setRouterPoints,
   setTitle,
@@ -83,7 +83,6 @@ export class Editor {
 
     // this.clearChanged = clearChanged;
     // this.setActiveSticker = setActiveSticker;
-    // this.setLogo = setLogo;
     // this.setMode = setMode;
     // this.setEditing = setEditing;
     // this.setTitle = setTitle;
@@ -103,6 +102,7 @@ export class Editor {
   getRouterPoints = () => store.getState().user.routerPoints;
   getDistance = () => store.getState().user.distance;
 
+  setLogo = logo => store.dispatch(setLogo(logo));
   setMode = value => store.dispatch(setMode(value));
   setRouterPoints = value => store.dispatch(setRouterPoints(value));
   setActiveSticker = value => store.dispatch(setActiveSticker(value));
@@ -221,7 +221,7 @@ export class Editor {
   };
 
   setData = ({
-    route, stickers, version = 1, owner, title, address
+    route = [], stickers = [], owner, title, address, provider = DEFAULT_PROVIDER, logo = DEFAULT_LOGO,
   }) => {
     this.setTitle(title || '');
     const { id } = this.getUser();
@@ -248,6 +248,8 @@ export class Editor {
       );
     }
 
+    this.setLogo((logo && LOGOS[DEFAULT_LOGO] && logo) || DEFAULT_LOGO);
+    this.setProvider((provider && PROVIDERS[provider] && provider) || DEFAULT_PROVIDER);
     if (owner) this.owner = owner;
   };
 

src/redux/user/reducer.js

@@ -32,7 +32,10 @@ const setDistance = (state, { distance }) => ({
 
 const setRouterPoints = (state, { routerPoints }) => ({ ...state, routerPoints });
 
-const setActiveSticker = (state, { activeSticker }) => ({ ...state, activeSticker });
+const setActiveSticker = (state, { activeSticker }) => ({
+  ...state,
+  activeSticker: activeSticker || { set: null, sticker: null }
+});
 const setLogo = (state, { logo }) => ({ ...state, logo });
 const setTitle = (state, { title }) => ({ ...state, title });
 const setAddress = (state, { address }) => ({ ...state, address });
@@ -123,7 +126,7 @@ export const INITIAL_STATE = {
   routerPoints: 0,
   distance: 0,
   estimated: 0,
-  activeSticker: null,
+  activeSticker: { set: null, sticker: null },
   title: '',
   address: '',
   changed: false,

src/styles/main.less

@@ -57,19 +57,28 @@ body {
   position: fixed;
   top: 4px;
   left: 4px;
-  width: 20px;
-  height: 20px;
-  z-index: 10;
+  width: 10px;
+  height: 10px;
+  z-index: 1;
   pointer-events: none;
 
   svg {
     width: 20px;
     height: 20px;
     stroke-width: 4;
-    fill: @blue_secondary;
+    fill: black;
   }
 }
 
+.cursor-icon-sticker {
+  width: 20px;
+  height: 20px;
+  background-size: cover;
+  background-position: 0 50%;
+  position: absolute;
+  top: -30px;
+}
+
 .track-vertical {
   position: absolute;
   right: 0;