is_empty flag

src/components/panels/UserPanel.tsx

@@ -15,6 +15,10 @@ import { DIALOGS } from '$constants/dialogs';
 import { IRootState } from "$redux/user/reducer";
 
 interface Props extends IRootState {
+  is_empty: boolean,
+  dialog: string,
+  dialog_active: boolean,
+
   userLogout: typeof userLogout,
   setDialog: typeof setDialog,
   setDialogActive: typeof setDialogActive,
@@ -89,7 +93,7 @@ export class Component extends React.PureComponent<Props, State> {
 
   render() {
     const {
-      props: { user, dialog, dialog_active },
+      props: { user, dialog, dialog_active, is_empty },
       state: { menuOpened },
     } = this;
 
@@ -131,7 +135,9 @@ export class Component extends React.PureComponent<Props, State> {
               <Icon icon="icon-shot-4" />
             </button>
           </div>
-
+          {
+            !is_empty &&
+              <React.Fragment>
                 <div className="control-sep" />
 
                 <div className="control-bar">
@@ -142,6 +148,8 @@ export class Component extends React.PureComponent<Props, State> {
                     <Icon icon="icon-gpx-1" />
                   </button>
                 </div>
+              </React.Fragment>
+          }
         </div>
       </div>
     );
@@ -149,7 +157,7 @@ export class Component extends React.PureComponent<Props, State> {
 }
 
 
-const mapStateToProps = ({ user: { dialog, dialog_active, user } }) => ({ dialog, dialog_active, user });
+const mapStateToProps = ({ user: { dialog, dialog_active, user, is_empty } }) => ({ dialog, dialog_active, user, is_empty });
 const mapDispatchToProps = dispatch => bindActionCreators({
   setUser,
   userLogout,

src/modules/Editor.ts

@@ -13,7 +13,7 @@ import {
   setActiveSticker,
   setAddress,
   setChanged,
-  setDistance,
+  setDistance, setIsEmpty,
   setLogo, setMarkersShown,
   setMode,
   setPublic,
@@ -123,6 +123,7 @@ export class Editor {
   getChanged = () => this.getState().changed;
   getRouterPoints = () => this.getState().routerPoints;
   getDistance = () => this.getState().distance;
+  getIsEmpty = () => this.getState().is_empty;
 
   setLogo: typeof setLogo = logo => store.dispatch(setLogo(logo));
   setMode: typeof setMode = value => store.dispatch(setMode(value));
@@ -131,6 +132,7 @@ export class Editor {
   setTitle: typeof setTitle = value => store.dispatch(setTitle(value));
   setAddress: typeof setAddress = value => store.dispatch(setAddress(value));
   setPublic: typeof setPublic = value => store.dispatch(setPublic(value));
+  setIsEmpty: typeof setIsEmpty = value => store.dispatch(setIsEmpty(value));
 
   setMarkersShown = value => {
     if (this.getState().markers_shown !== value) store.dispatch(setMarkersShown(value));
@@ -156,9 +158,8 @@ export class Editor {
   };
 
   triggerOnChange = () => {
-    if (!this.getEditing() || this.getChanged()) return;
-
-    this.setChanged(true);
+    if (this.isEmpty !== this.getIsEmpty()) this.setIsEmpty(this.isEmpty);
+    if (this.getEditing() && this.getChanged()) this.setChanged(true);
   };
 
   createStickerOnClick = (e) => {
@@ -246,6 +247,8 @@ export class Editor {
     this.poly.clearAll();
     this.router.clearAll();
     this.stickers.clearAll();
+
+    this.setIsEmpty(true);
   };
 
   setData = ({
@@ -360,3 +363,7 @@ export class Editor {
 }
 
 export const editor = new Editor();
+
+declare let window:any;
+
+window.editor = editor;

src/modules/Sticker.js

@@ -81,7 +81,6 @@ export class Sticker {
     this.marker.addEventListener('dragend', this.triggerOnChange);
 
     this.setAngle(this.angle);
-    this.triggerOnChange();
   }
 
   setText = text => {
@@ -89,7 +88,6 @@ export class Sticker {
   };
 
   onDelete = () => {
-    this.triggerOnChange();
     if (!this.isDragging) this.deleteSticker(this);
   };
 

src/modules/Stickers.js

@@ -25,9 +25,12 @@ export class Stickers {
       triggerOnChange: this.triggerOnChange,
       text,
     });
+
     this.stickers.push(marker);
 
     marker.marker.addTo(this.map);
+
+    this.triggerOnChange();
     // marker.marker.enableEdit();
   };
 
@@ -38,6 +41,8 @@ export class Stickers {
 
     this.map.removeLayer(ref.marker);
     this.stickers.splice(index, 1);
+
+    this.triggerOnChange();
   };
 
   clearAll = () => {

src/redux/user/actions.ts

@@ -63,3 +63,4 @@ export const searchPutRoutes = payload => ({ type: ACTIONS.SEARCH_PUT_ROUTES, ..
 
 export const setMarkersShown = markers_shown => ({ type: ACTIONS.SET_MARKERS_SHOWN, markers_shown });
 export const getGPXTrack = () => ({ type: ACTIONS.GET_GPX_TRACK });
+export const setIsEmpty = is_empty => ({ type: ACTIONS.SET_IS_EMPTY, is_empty });

src/redux/user/constants.ts

@@ -70,4 +70,5 @@ export const ACTIONS: IActions = {
   SET_MARKERS_SHOWN: 'SET_MARKERS_SHOWN',
 
   GET_GPX_TRACK: 'GET_GPX_TRACK',
+  SET_IS_EMPTY: 'SET_IS_EMPTY',
 };

src/redux/user/reducer.ts

@@ -1,4 +1,3 @@
-// @flow
 import { createReducer } from 'reduxsauce';
 import { ACTIONS } from '$redux/user/constants';
 import { DEFAULT_USER, IUser } from '$constants/auth';
@@ -34,6 +33,7 @@ interface IRootReducer {
   provider: keyof typeof PROVIDERS,
   is_public: boolean,
   markers_shown: boolean,
+  is_empty: boolean,
 
   save_error: string,
   save_finished: boolean,
@@ -269,6 +269,7 @@ const setSpeed: ActionHandler<typeof ActionCreators.setSpeed> = (state, { speed
 });
 
 const setMarkersShown: ActionHandler<typeof ActionCreators.setMarkersShown> = (state, { markers_shown = true }) => ({ ...state, markers_shown });
+const setIsEmpty: ActionHandler<typeof ActionCreators.setIsEmpty> = (state, { is_empty = true }) => ({ ...state, is_empty });
 
 const HANDLERS = ({
   [ACTIONS.SET_USER]: setUser,
@@ -308,6 +309,7 @@ const HANDLERS = ({
   [ACTIONS.SET_SPEED]: setSpeed,
 
   [ACTIONS.SET_MARKERS_SHOWN]: setMarkersShown,
+  [ACTIONS.SET_IS_EMPTY]: setIsEmpty,
 });
 
 export const INITIAL_STATE: IRootReducer = {
@@ -328,6 +330,7 @@ export const INITIAL_STATE: IRootReducer = {
   provider: DEFAULT_PROVIDER,
   is_public: false,
   markers_shown: true,
+  is_empty: true,
 
   save_error: '',
   save_finished: false,

src/styles/panel.less

@@ -95,6 +95,7 @@
 
     &.disabled {
       color: #999999;
+      pointer-events: none;
 
       svg {
         fill: #999999;