muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

redux: editor working

Browse source
This commit is contained in:
muerwre 2018-11-26 13:15:18 +07:00
parent df6202c32d
commit dde6cf83e9
7 changed files with 76 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/containers/App.jsx
View file

@ -1,16 +1,15 @@
// @flow
import React from 'react';
import { Editor, editor } from '$modules/Editor';
import { editor } from '$modules/Editor';
import { EditorPanel } from '$components/panels/EditorPanel';
import { Fills } from '$components/Fills';
import { DEFAULT_LOGO } from '$constants/logos';
import { UserLocation } from '$components/UserLocation';
import { DEFAULT_USER } from '$constants/auth';
import { getGuestToken, checkUserToken, getStoredMap } from '$utils/api';
import { storeData, getData } from '$utils/storage';
import { UserPanel } from '$components/panels/UserPanel';
import { getUrlData, pushPath } from '$utils/history';
import { pushPath } from '$utils/history';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
@ -19,6 +18,14 @@ import type { UserType } from '$constants/types';
type Props = {
user: UserType,
editing: false,
mode: String,
// not implemented
title: String,
address: String,
changed: Boolean,
totalDistance: Number,
}
type State = {
@ -26,7 +33,6 @@ type State = {
editing: Boolean,
logo: String,
routerPoints: Number,
totalDistance: Number,
estimateTime: Number,
activeSticker: String,
title: String,
@ -36,19 +42,19 @@ type State = {
class Component extends React.Component<Props, State> {
state = {
mode: 'none',
editing: false,
// mode: 'none',
// editing: false,
logo: DEFAULT_LOGO,
routerPoints: 0,
totalDistance: 0,
estimateTime: 0,
activeSticker: null,
user: {
...DEFAULT_USER,
},
title: '',
address: '',
changed: false,
// user: {
// ...DEFAULT_USER,
// },
// title: '',
// address: '',
// changed: false,
};
componentDidMount() {
@ -134,12 +140,12 @@ class Component extends React.Component<Props, State> {
};
getUser = () => this.state.user;
triggerOnChange = () => {
if (!this.state.editing) return;
this.setState({ changed: true });
};
//
// triggerOnChange = () => {
// if (!this.state.editing) return;
//
// this.setState({ changed: true });
// };
clearChanged = () => {
this.setState({ changed: false });
@ -219,10 +225,10 @@ class Component extends React.Component<Props, State> {
render() {
const {
state: {
mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, editing, title, address, changed,
mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, title, address, changed,
},
props: {
user,
user, editing,
}
} = this;
@ -260,11 +266,15 @@ class Component extends React.Component<Props, State> {
function mapStateToProps(state) {
const {
user,
user: {
user,
editing,
},
} = state;
return {
user
user,
editing,
};
}

2
src/index.html
View file

@ -23,7 +23,7 @@
</style>
</head>
<body>
<section id="map" style="position: absolute; width: 100%; height: 100%;"></section>
<section id="loader"></section>
<section id="index"></section>
<section id="map"></section>
</body>

31
src/modules/Editor.js
View file

@ -9,21 +9,21 @@ import { DEFAULT_LOGO } from '$constants/logos';
import { parseStickerAngle, parseStickerStyle } from '$utils/import';
import { getUrlData, pushPath } from '$utils/history';
import { store } from '$redux/store';
import { setEditing } from '$redux/user/actions';
import { setChanged, setDistance, setEditing, setMode } from '$redux/user/actions';
export class Editor {
constructor({
// container,
// mode,
setMode,
// setMode,
setRouterPoints,
setTotalDist,
// setTotalDist,
setActiveSticker,
setLogo,
// setEditing,
setTitle,
setAddress,
triggerOnChange,
// triggerOnChange,
clearChanged,
// getTitle,
}) {
@ -33,11 +33,11 @@ export class Editor {
this.initialData = {};
const {
lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map }
triggerOnChange, lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map }
} = this;
this.poly = new Poly({
map, routerMoveStart, lockMapClicks, setTotalDist, triggerOnChange
map, routerMoveStart, lockMapClicks, setTotalDist: this.setDistance, triggerOnChange
});
this.stickers = new Stickers({ map, lockMapClicks, triggerOnChange });
this.router = new Router({
@ -76,12 +76,12 @@ export class Editor {
this.clearChanged = clearChanged;
this.setActiveSticker = setActiveSticker;
this.setLogo = setLogo;
this.setMode = setMode;
// this.setMode = setMode;
// this.setEditing = setEditing;
this.setTitle = setTitle;
this.setAddress = setAddress;
// this.getUser = getUser;
this.mode = 'none';
this.mode = MODES.NONE;
// this.getTitle = getTitle;
map.addEventListener('mouseup', this.onClick);
@ -89,9 +89,20 @@ export class Editor {
map.addEventListener('dragstop', () => lockMapClicks(false));
}
getUser = () => store.getState().user;
getUser = () => store.getState().user.user;
getTitle = () => store.getState().title;
getEditing = () => store.getState().editing;
setEditing = editing => store.dispatch(setEditing(editing));
setMode = mode => store.dispatch(setMode(mode));
setDistance = distance => store.dispatch(setDistance(distance));
setChanged = changed => store.dispatch(setChanged(changed));
triggerOnChange = () => {
if (!this.getEditing()) return;
this.setChanged(true);
};
createStickerOnClick = (e) => {
if (!e || !e.latlng || !this.activeSticker) return;
@ -300,8 +311,6 @@ export class Editor {
}
export const editor = new Editor({
container: 'map',
mode: 'none',
// setMode: this.setMode,
// setRouterPoints: this.setRouterPoints,
// setTotalDist: this.setTotalDist,

3
src/redux/user/actions.js
View file

@ -2,3 +2,6 @@ import { ACTIONS } from '$redux/user/constants';
export const setUser = user => ({ type: ACTIONS.SET_USER, user });
export const setEditing = editing => ({ type: ACTIONS.SET_EDITING, editing });
export const setMode = mode => ({ type: ACTIONS.SET_MODE, mode });
export const setDistance = distance => ({ type: ACTIONS.SET_DISTANCE, distance });
export const setChanged = changed => ({ type: ACTIONS.SET_CHANGED, changed });

4
src/redux/user/constants.js
View file

@ -1,4 +1,8 @@
export const ACTIONS = {
SET_USER: 'SET_USER',
SET_EDITING: 'SET_EDITING',
SET_MODE: 'SET_MODE',
SET_DISTANCE: 'SET_DISTANCE',
SET_CHANGED: 'SET_CHANGED',
};

23
src/redux/user/reducer.js
View file

@ -1,25 +1,32 @@
import { createReducer } from 'reduxsauce';
import { ACTIONS, EMPTY_USER } from '$redux/user/constants';
import { ACTIONS } from '$redux/user/constants';
import { DEFAULT_USER } from '$constants/auth';
import { MODES } from '$constants/modes';
const setUser = (state, { user }) => ({
...state,
...user,
});
const setEditing = (state, { editing }) => ({
...state,
editing,
user: {
...state.user,
...user,
},
});
const setEditing = (state, { editing }) => ({ ...state, editing });
const setMode = (state, { mode }) => ({ ...state, mode });
const setDistance = (state, { distance }) => ({ ...state, distance });
const HANDLERS = {
[ACTIONS.SET_USER]: setUser,
[ACTIONS.SET_EDITING]: setEditing,
[ACTIONS.SET_MODE]: setMode,
[ACTIONS.SET_DISTANCE]: setDistance,
};
export const INITIAL_STATE = {
...DEFAULT_USER
user: { ...DEFAULT_USER },
editing: false,
mode: MODES.NONE,
distance: 0,
};
export const userReducer = createReducer(INITIAL_STATE, HANDLERS);

2
src/redux/user/sagas.js
View file

@ -5,7 +5,7 @@ import { setUser } from '$redux/user/actions';
import { getUrlData, pushPath } from '$utils/history';
import { editor } from '$modules/Editor';
const getUser = state => (state.user);
const getUser = state => (state.user.user);
const hideLoader = () => {
document.getElementById('loader').style.opacity = 0;
document.getElementById('loader').style.pointerEvents = 'none';