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

2
src/index.html
View file

@ -23,7 +23,7 @@
</style> </style>
</head> </head>
<body> <body>
<section id="map" style="position: absolute; width: 100%; height: 100%;"></section>
<section id="loader"></section> <section id="loader"></section>
<section id="index"></section> <section id="index"></section>
<section id="map"></section>
</body> </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 { parseStickerAngle, parseStickerStyle } from '$utils/import';
import { getUrlData, pushPath } from '$utils/history'; import { getUrlData, pushPath } from '$utils/history';
import { store } from '$redux/store'; import { store } from '$redux/store';
import { setEditing } from '$redux/user/actions'; import { setChanged, setDistance, setEditing, setMode } from '$redux/user/actions';
export class Editor { export class Editor {
constructor({ constructor({
// container, // container,
// mode, // mode,
setMode, // setMode,
setRouterPoints, setRouterPoints,
setTotalDist, // setTotalDist,
setActiveSticker, setActiveSticker,
setLogo, setLogo,
// setEditing, // setEditing,
setTitle, setTitle,
setAddress, setAddress,
triggerOnChange, // triggerOnChange,
clearChanged, clearChanged,
// getTitle, // getTitle,
}) { }) {
@ -33,11 +33,11 @@ export class Editor {
this.initialData = {}; this.initialData = {};
const { const {
lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map } triggerOnChange, lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map }
} = this; } = this;
this.poly = new Poly({ this.poly = new Poly({
map, routerMoveStart, lockMapClicks, setTotalDist, triggerOnChange map, routerMoveStart, lockMapClicks, setTotalDist: this.setDistance, triggerOnChange
}); });
this.stickers = new Stickers({ map, lockMapClicks, triggerOnChange }); this.stickers = new Stickers({ map, lockMapClicks, triggerOnChange });
this.router = new Router({ this.router = new Router({
@ -76,12 +76,12 @@ export class Editor {
this.clearChanged = clearChanged; this.clearChanged = clearChanged;
this.setActiveSticker = setActiveSticker; this.setActiveSticker = setActiveSticker;
this.setLogo = setLogo; this.setLogo = setLogo;
this.setMode = setMode; // this.setMode = setMode;
// this.setEditing = setEditing; // this.setEditing = setEditing;
this.setTitle = setTitle; this.setTitle = setTitle;
this.setAddress = setAddress; this.setAddress = setAddress;
// this.getUser = getUser; // this.getUser = getUser;
this.mode = 'none'; this.mode = MODES.NONE;
// this.getTitle = getTitle; // this.getTitle = getTitle;
map.addEventListener('mouseup', this.onClick); map.addEventListener('mouseup', this.onClick);
@ -89,9 +89,20 @@ export class Editor {
map.addEventListener('dragstop', () => lockMapClicks(false)); map.addEventListener('dragstop', () => lockMapClicks(false));
} }
getUser = () => store.getState().user; getUser = () => store.getState().user.user;
getTitle = () => store.getState().title; getTitle = () => store.getState().title;
getEditing = () => store.getState().editing;
setEditing = editing => store.dispatch(setEditing(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) => { createStickerOnClick = (e) => {
if (!e || !e.latlng || !this.activeSticker) return; if (!e || !e.latlng || !this.activeSticker) return;
@ -300,8 +311,6 @@ export class Editor {
} }
export const editor = new Editor({ export const editor = new Editor({
container: 'map',
mode: 'none',
// setMode: this.setMode, // setMode: this.setMode,
// setRouterPoints: this.setRouterPoints, // setRouterPoints: this.setRouterPoints,
// setTotalDist: this.setTotalDist, // 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 setUser = user => ({ type: ACTIONS.SET_USER, user });
export const setEditing = editing => ({ type: ACTIONS.SET_EDITING, editing }); 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 = { export const ACTIONS = {
SET_USER: 'SET_USER', SET_USER: 'SET_USER',
SET_EDITING: 'SET_EDITING', 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 { createReducer } from 'reduxsauce';
import { ACTIONS, EMPTY_USER } from '$redux/user/constants'; import { ACTIONS } from '$redux/user/constants';
import { DEFAULT_USER } from '$constants/auth'; import { DEFAULT_USER } from '$constants/auth';
import { MODES } from '$constants/modes';
const setUser = (state, { user }) => ({ const setUser = (state, { user }) => ({
...state, ...state,
...user, user: {
}); ...state.user,
...user,
const setEditing = (state, { editing }) => ({ },
...state,
editing,
}); });
const setEditing = (state, { editing }) => ({ ...state, editing });
const setMode = (state, { mode }) => ({ ...state, mode });
const setDistance = (state, { distance }) => ({ ...state, distance });
const HANDLERS = { const HANDLERS = {
[ACTIONS.SET_USER]: setUser, [ACTIONS.SET_USER]: setUser,
[ACTIONS.SET_EDITING]: setEditing, [ACTIONS.SET_EDITING]: setEditing,
[ACTIONS.SET_MODE]: setMode,
[ACTIONS.SET_DISTANCE]: setDistance,
}; };
export const INITIAL_STATE = { export const INITIAL_STATE = {
...DEFAULT_USER user: { ...DEFAULT_USER },
editing: false,
mode: MODES.NONE,
distance: 0,
}; };
export const userReducer = createReducer(INITIAL_STATE, HANDLERS); 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 { getUrlData, pushPath } from '$utils/history';
import { editor } from '$modules/Editor'; import { editor } from '$modules/Editor';
const getUser = state => (state.user); const getUser = state => (state.user.user);
const hideLoader = () => { const hideLoader = () => {
document.getElementById('loader').style.opacity = 0; document.getElementById('loader').style.opacity = 0;
document.getElementById('loader').style.pointerEvents = 'none'; document.getElementById('loader').style.pointerEvents = 'none';