diff --git a/backend/tools/import.js b/backend/tools/import.js index 7fb4baa..3eae5a7 100755 --- a/backend/tools/import.js +++ b/backend/tools/import.js @@ -137,7 +137,7 @@ const run = async () => { ...stickersParser(stickers), ...pointParser(points) ], - logo, + logo: logo === 'default' ? 'nvs' : logo, title: '', version: 1, distance: calcPolyDistance(route), diff --git a/src/components/Cursor.jsx b/src/components/Cursor.jsx index d3312fb..ab3a0e0 100644 --- a/src/components/Cursor.jsx +++ b/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 { @@ -20,12 +24,14 @@ export class Cursor extends React.PureComponent { }; render() { - const { mode } = this.props; + const { mode, set, sticker } = this.props; + const activeSticker = (sticker && set && STICKERS[set] && STICKERS[set].layers[sticker]); return (
{ this.cursor = el; }}> { mode === MODES.ROUTER && } { mode === MODES.POLY && } + { mode === MODES.STICKERS && activeSticker && }
); } diff --git a/src/components/StickerIcon.jsx b/src/components/StickerIcon.jsx new file mode 100644 index 0000000..17ef492 --- /dev/null +++ b/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) => ( +
+); + +// diff --git a/src/components/panels/EditorDialog.jsx b/src/components/panels/EditorDialog.jsx index 88cdc8b..07d94ac 100644 --- a/src/components/panels/EditorDialog.jsx +++ b/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 diff --git a/src/containers/App.jsx b/src/containers/App.jsx index b23bf1d..36deed5 100644 --- a/src/containers/App.jsx +++ b/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) => ( - + { props.renderer_active && @@ -35,11 +37,17 @@ const Component = (props: Props) => (
); -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); diff --git a/src/index.js b/src/index.js index 94f5cec..d8a6635 100644 --- a/src/index.js +++ b/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(, document.getElementById('index')); - -// diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 7663494..a7a8680 100644 --- a/src/modules/Editor.js +++ b/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; }; diff --git a/src/redux/user/reducer.js b/src/redux/user/reducer.js index 86081bf..6e85774 100644 --- a/src/redux/user/reducer.js +++ b/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, diff --git a/src/styles/main.less b/src/styles/main.less index 34509a7..9235436 100644 --- a/src/styles/main.less +++ b/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;