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

providers: initial

Browse source
This commit is contained in:
muerwre 2018-11-29 12:23:49 +07:00
parent b85141046d
commit 552e3effb8
16 changed files with 133 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/panels/EditorPanel.jsx
View file

@ -103,6 +103,13 @@ class Component extends React.PureComponent<Props, void> {
<Icon icon="icon-trash-4" />
</button>
<button
className={classnames({ active: mode === MODES.TRASH })}
onClick={this.props.takeAShot}
>
<Icon icon="icon-shot-3" />
</button>
<button
className={classnames('disabled', { active: mode === MODES.LOGO })}
>

19
src/components/panels/RendererPanel.jsx
View file

@ -2,20 +2,15 @@ import React from 'react';
import { Icon } from '$components/panels/Icon';
type Props = {
onCancel: Function,
onSubmit: Function,
};
export const RendererPanel = ({ onCancel, onSubmit }): Props => (
export const RendererPanel = ({ onCancel, onSubmit }: Props) => (
<div
className="panel active center"
style={{ zIndex: 1000 }}
>
<div className="control-bar control-bar-padded">
<button>
<Icon icon="icon-logo-3" />
</button>
</div>
<div className="control-sep" />
<div className="control-bar">
@ -37,3 +32,11 @@ export const RendererPanel = ({ onCancel, onSubmit }): Props => (
</div>
</div>
);
/*
<div className="control-bar control-bar-padded">
<button>
<Icon icon="icon-logo-3" />
</button>
</div>
*/

4
src/config.js
View file

@ -1,4 +1,4 @@
import { providers } from '$constants/providers';
import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
export const CONFIG = {
OSRM_URL: 'http://vault48.org:5000/route/v1',
@ -9,4 +9,4 @@ export const COLORS = {
PATH_COLOR: ['#ff7700', '#ff3344'],
};
export const PROVIDER = providers.blank;
export const PROVIDER = PROVIDERS[DEFAULT_PROVIDER];

3
src/constants/modes.js
View file

@ -7,5 +7,6 @@ export const MODES = {
NONE: 'NONE',
LOGO: 'LOGO',
SAVE: 'SAVE',
CONFIRM_CANCEL: 'CONFIRM_CANCEL'
CONFIRM_CANCEL: 'CONFIRM_CANCEL',
PROVIDER: 'PROVIDER',
};

64
src/constants/providers.js
View file

@ -1,12 +1,56 @@
// Стили карт
export const providers = {
'watercolor': 'http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
'darq': 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
'dgis': 'https://tile1.maps.2gis.com/tiles?x={x}&y={y}&z={z}&v=1',
'default': 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
'hot': 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
'blank': 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
'sat': 'http://mt0.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
'ymap': 'https://vec03.maps.yandex.net/tiles?l=map&v=17.04.16-0&x={x}&y={y}&z={z}&scale=1&lang=ru_RU',
'ysat': 'https://sat02.maps.yandex.net/tiles?l=sat&v=3.330.0&x={x}&y={y}&z={z}&lang=ru_RU'
const TILEMAPS = {
WATERCOLOR: {
name: 'Watercolor',
url: 'http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
range: [1, 4],
},
DGIS: {
name: '2gis',
url: 'https://tile1.maps.2gis.com/tiles?x={x}&y={y}&z={z}&v=1',
range: [1, 3],
},
DEFAULT: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
range: [1, 4],
},
DARQ: {
name: 'Darq',
url: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
range: [1, 4],
},
BLANK: {
name: 'Blanque',
url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
range: [1, 4],
},
HOT: {
name: 'Hot',
url: 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
range: [1, 4],
},
SAY: {
name: 'Google?',
url: 'http://mt{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
range: [0, 3],
},
YMAP: {
name: 'Yandex',
url: 'https://vec0{s}.maps.yandex.net/tiles?l=map&v=17.04.16-0&x={x}&y={y}&z={z}&scale=1&lang=ru_RU',
range: [1, 4],
},
YSAT: {
name: 'YandexSat',
url: 'https://sat0{s}.maps.yandex.net/tiles?l=sat&v=3.330.0&x={x}&y={y}&z={z}&lang=ru_RU',
range: [1, 4],
},
};
const ENABLED = ['BLANK', 'DEFAULT', 'DGIS'];
export const DEFAULT_PROVIDER = ENABLED[0];
export const PROVIDERS = ENABLED.reduce((obj, provider) => ({
...obj,
[provider]: TILEMAPS[provider],
}), {});

5
src/containers/App.jsx
View file

@ -23,10 +23,7 @@ const Component = (props: Props) => (
<UserLocation />
<UserPanel />
<EditorPanel />
{
props.renderer_active &&
<Renderer onClick={props.hideRenderer} />
}
{ props.renderer_active && <Renderer onClick={props.hideRenderer} /> }
</div>
);

21
src/modules/Editor.js
View file

@ -18,6 +18,7 @@ import {
setRouterPoints,
setTitle,
} from '$redux/user/actions';
import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
export class Editor {
constructor() {
@ -27,6 +28,7 @@ export class Editor {
this.initialData = {};
this.activeSticker = null;
this.mode = MODES.NONE;
this.provider = PROVIDERS[DEFAULT_PROVIDER];
const {
triggerOnChange, lockMapClicks, routerMoveStart, changeMode, pushPolyPoints,
@ -241,7 +243,7 @@ export class Editor {
};
fitDrawing = () => {
if (this.poly.isEmpty()) return;
if (this.poly.isEmpty) return;
const bounds = this.poly.poly.getBounds();
if (bounds && Object.values(bounds)) this.map.map.fitBounds(bounds);
@ -289,7 +291,7 @@ export class Editor {
};
cancelEditing = () => {
if (this.hasEmptyHistory()) {
if (this.hasEmptyHistory) {
this.clearAll();
this.startEditing();
} else {
@ -307,19 +309,18 @@ export class Editor {
stickers: this.stickers.dumpData(),
});
// isEmpty = () => {
// const { route, stickers } = this.dumpData();
//
// return (route.length > 1 && stickers.length > 0);
// };
setProvider = provider => {
this.provider = provider;
this.map.setProvider(provider);
};
isEmpty = () => {
get isEmpty() {
const { route, stickers } = this.dumpData();
return (!route || route.length < 1) && (!stickers || stickers.length <= 0);
};
}
hasEmptyHistory = () => {
get hasEmptyHistory() {
const { route, stickers } = this.initialData;
return (!route || route.length < 1) && (!stickers || stickers.length <= 0);

12
src/modules/Map.js
View file

@ -1,16 +1,14 @@
import { map, tileLayer } from 'leaflet';
// import { Map as map } from 'leaflet/src/map/Map';
// import { TileLayer as tileLayer } from 'leaflet/src/layer/tile/TileLayer';
import 'leaflet/dist/leaflet.css';
import 'leaflet-editable';
import { PROVIDER } from '$config';
import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
export class Map {
constructor({ container }) {
this.map = map(container, { editable: true }).setView([55.0153275, 82.9071235], 13);
this.tileLayer = tileLayer(PROVIDER, {
this.tileLayer = tileLayer(PROVIDER.url, {
attribution: 'Независимое Велосообщество',
maxNativeZoom: 18,
maxZoom: 18,
@ -18,4 +16,10 @@ export class Map {
this.tileLayer.addTo(this.map);
}
setProvider = provider => {
const { url } = (provider && PROVIDERS[provider] && PROVIDERS[provider]) || PROVIDERS[DEFAULT_PROVIDER];
this.tileLayer.setUrl(url);
}
}

4
src/modules/Poly.js
View file

@ -161,5 +161,7 @@ export class Poly {
dumpData = () => this.latlngs;
isEmpty = () => !this.latlngs || Object.values(this.latlngs).length < 0;
get isEmpty() {
return (!this.latlngs || Object.values(this.latlngs).length <= 0);
}
}

2
src/redux/store.js
View file

@ -9,7 +9,7 @@ import { userSaga } from '$redux/user/sagas';
const userPersistConfig = {
key: 'user',
whitelist: ['user', 'logo'],
whitelist: ['user', 'logo', 'provider'],
storage,
};

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

@ -38,3 +38,4 @@ export const setRenderer = payload => ({ type: ACTIONS.SET_RENDERER, payload });
export const takeAShot = () => ({ type: ACTIONS.TAKE_A_SHOT });
export const cropAShot = payload => ({ type: ACTIONS.CROP_A_SHOT, ...payload });
export const setProvider = provider => ({ type: ACTIONS.SET_PROVIDER, provider });

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

@ -36,4 +36,6 @@ export const ACTIONS = {
SET_RENDERER: 'SET_RENDERER',
TAKE_A_SHOT: 'TAKE_A_SHOT',
CROP_A_SHOT: 'CROP_A_SHOT',
SET_PROVIDER: 'SET_PROVIDER',
};

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

@ -4,6 +4,7 @@ import { DEFAULT_USER } from '$constants/auth';
import { MODES } from '$constants/modes';
import { DEFAULT_LOGO } from '$constants/logos';
import { TIPS } from '$constants/tips';
import { DEFAULT_PROVIDER } from '$constants/providers';
const getEstimated = distance => {
const time = (distance && (distance / 15)) || 0;
@ -70,6 +71,8 @@ const setRenderer = (state, { payload }) => ({
renderer: { ...state.renderer, ...payload }
});
const setProvider = (state, { provider }) => ({ ...state, provider });
const HANDLERS = {
[ACTIONS.SET_USER]: setUser,
[ACTIONS.SET_EDITING]: setEditing,
@ -91,6 +94,8 @@ const HANDLERS = {
[ACTIONS.SHOW_RENDERER]: showRenderer,
[ACTIONS.HIDE_RENDERER]: hideRenderer,
[ACTIONS.SET_RENDERER]: setRenderer,
[ACTIONS.SET_PROVIDER]: setProvider,
};
export const INITIAL_STATE = {
@ -105,6 +110,7 @@ export const INITIAL_STATE = {
title: '',
address: '',
changed: false,
provider: DEFAULT_PROVIDER,
save_error: '',
save_finished: false,

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

@ -27,6 +27,7 @@ import {
imageFetcher
} from '$utils/renderer';
import { LOGOS } from '$constants/logos';
import { DEFAULT_PROVIDER } from '$constants/providers';
const getUser = state => (state.user.user);
const getState = state => (state.user);
@ -46,11 +47,12 @@ function* generateGuestSaga() {
}
function* startEmptyEditorSaga() {
const { id, random_url } = yield select(getUser);
const { id, random_url, provider = DEFAULT_PROVIDER } = yield select(getUser);
pushPath(`/${random_url}/edit`);
editor.owner = id;
editor.setProvider(provider);
editor.startEditing();
yield put(setChanged(false));
@ -78,7 +80,7 @@ function* stopEditingSaga() {
yield put(setChanged(false));
yield put(setEditing(editor.hasEmptyHistory())); // don't close editor if no previous map
yield put(setEditing(editor.hasEmptyHistory)); // don't close editor if no previous map
}
function* mapInitSaga() {
@ -193,9 +195,7 @@ function* clearSaga({ type }) {
}
function* sendSaveRequestSaga({ title, address, force }) {
if (editor.isEmpty()) {
return yield put(setSaveError(TIPS.SAVE_EMPTY));
}
if (editor.isEmpty) return yield put(setSaveError(TIPS.SAVE_EMPTY));
const { route, stickers } = editor.dumpData();
const { id, token } = yield select(getUser);
@ -239,6 +239,7 @@ function* getRenderData() {
const images = yield fetchImages(ctx, geometry);
yield composeImages({ geometry, images, ctx });
yield composePoly({ points, ctx });
return yield canvas.toDataURL('image/jpeg');
@ -254,7 +255,6 @@ function* takeAShotSaga() {
return true;
}
function* getCropData({
x, y, width, height
}) {
@ -285,6 +285,10 @@ function* cropAShotSaga(params) {
return yield put(hideRenderer());
}
function setProviderSaga({ provider }) {
editor.setProvider(provider);
}
export function* userSaga() {
// ASYNCHRONOUS!!! :-)
@ -311,4 +315,6 @@ export function* userSaga() {
yield takeLatest(ACTIONS.SET_SAVE_SUCCESS, setSaveSuccessSaga);
yield takeLatest(ACTIONS.TAKE_A_SHOT, takeAShotSaga);
yield takeLatest(ACTIONS.CROP_A_SHOT, cropAShotSaga);
yield takeEvery(ACTIONS.SET_PROVIDER, setProviderSaga);
}

2
src/styles/panel.less
View file

@ -135,7 +135,7 @@
}
&.single {
border-radius: 3px;
border-radius: @panel_radius;
}
svg {

12
src/utils/renderer.js
View file

@ -1,6 +1,7 @@
import { editor } from '$modules/Editor';
import { COLORS, CONFIG } from '$config';
import saveAs from 'file-saver';
import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
const latLngToTile = latlng => {
const { map } = editor.map;
@ -64,7 +65,14 @@ export const getPolyPlacement = () => (
: editor.poly.poly.getLatLngs().map((latlng) => ({ ...editor.map.map.latLngToContainerPoint(latlng) }))
);
const getImageSource = ({ x, y, zoom }) => (`http://b.basemaps.cartocdn.com/light_all/${zoom}/${x}/${y}.png`);
const replaceProviderUrl = (provider, { x, y, zoom }) => {
const { url, range } = (PROVIDERS[editor.provider] || PROVIDERS[DEFAULT_PROVIDER]);
const random = (range && range.length >= 2) ? Math.round((Math.random() * (range[1] - range[0])) + range[0]) : 1;
return url.replace('{x}', x).replace('{y}', y).replace('{z}', zoom).replace('{s}', random);
};
const getImageSource = coords => replaceProviderUrl(editor.provider, coords);
export const imageFetcher = source => new Promise((resolve, reject) => {
const img = new Image();
@ -108,6 +116,8 @@ export const composeImages = ({ images, geometry, ctx }) => {
};
export const composePoly = ({ points, ctx }) => {
if (editor.poly.isEmpty) return;
let minX = points[0].x;
let maxX = points[0].x;
let minY = points[0].y;