From 9b6ed74300a5cd4dee3a0a9364f028388c99989a Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 18 Feb 2019 15:44:06 +0700 Subject: [PATCH] is_empty flag --- src/components/panels/UserPanel.tsx | 32 ++++++++++++++++++----------- src/modules/Editor.ts | 15 ++++++++++---- src/modules/Sticker.js | 2 -- src/modules/Stickers.js | 5 +++++ src/redux/user/actions.ts | 1 + src/redux/user/constants.ts | 1 + src/redux/user/reducer.ts | 5 ++++- src/styles/panel.less | 1 + 8 files changed, 43 insertions(+), 19 deletions(-) diff --git a/src/components/panels/UserPanel.tsx b/src/components/panels/UserPanel.tsx index 11bb0cb..364a62a 100644 --- a/src/components/panels/UserPanel.tsx +++ b/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 { render() { const { - props: { user, dialog, dialog_active }, + props: { user, dialog, dialog_active, is_empty }, state: { menuOpened }, } = this; @@ -131,17 +135,21 @@ export class Component extends React.PureComponent { + { + !is_empty && + +
-
- -
- -
+
+ +
+ + }
); @@ -149,7 +157,7 @@ export class Component extends React.PureComponent { } -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, diff --git a/src/modules/Editor.ts b/src/modules/Editor.ts index 04f2c59..b315069 100644 --- a/src/modules/Editor.ts +++ b/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; diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js index 37d6f42..6d459a9 100644 --- a/src/modules/Sticker.js +++ b/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); }; diff --git a/src/modules/Stickers.js b/src/modules/Stickers.js index 297514b..62e96af 100644 --- a/src/modules/Stickers.js +++ b/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 = () => { diff --git a/src/redux/user/actions.ts b/src/redux/user/actions.ts index 935914e..73cdbe2 100644 --- a/src/redux/user/actions.ts +++ b/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 }); diff --git a/src/redux/user/constants.ts b/src/redux/user/constants.ts index 16122ea..9500f93 100644 --- a/src/redux/user/constants.ts +++ b/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', }; diff --git a/src/redux/user/reducer.ts b/src/redux/user/reducer.ts index 50b8a7d..0e0fa97 100644 --- a/src/redux/user/reducer.ts +++ b/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 = (state, { speed }); const setMarkersShown: ActionHandler = (state, { markers_shown = true }) => ({ ...state, markers_shown }); +const setIsEmpty: ActionHandler = (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, diff --git a/src/styles/panel.less b/src/styles/panel.less index 2b7fa58..fc50a3a 100644 --- a/src/styles/panel.less +++ b/src/styles/panel.less @@ -95,6 +95,7 @@ &.disabled { color: #999999; + pointer-events: none; svg { fill: #999999;