From f7e8da1f1f4cdc45665eaf2c995e64d6c6add7b0 Mon Sep 17 00:00:00 2001 From: muerwre Date: Wed, 29 Aug 2018 12:05:09 +0700 Subject: [PATCH 01/22] first import attempts --- src/constants/api.js | 2 ++ src/containers/App.jsx | 9 ++++++++- src/modules/Editor.js | 17 +++++++++++++++++ src/modules/Poly.js | 5 +++++ src/modules/Sticker.js | 6 +++--- src/modules/Stickers.js | 3 ++- src/utils/api.js | 12 +++++++++++- src/utils/history.js | 2 ++ src/utils/import.js | 7 +++++++ 9 files changed, 57 insertions(+), 6 deletions(-) create mode 100644 src/utils/history.js create mode 100644 src/utils/import.js diff --git a/src/constants/api.js b/src/constants/api.js index 346ec1c..08fd49e 100644 --- a/src/constants/api.js +++ b/src/constants/api.js @@ -2,4 +2,6 @@ export const SERVER = 'http://alpha-map.vault48.org'; export const API = { COMPOSE: `${SERVER}/engine/composerOrchid.php`, GET_GUEST: `${SERVER}/engine/auth.php`, + CHECK_TOKEN: `${SERVER}/engine/auth.php`, + GET_MAP: `${SERVER}/engine/auth.php`, }; diff --git a/src/containers/App.jsx b/src/containers/App.jsx index ab5e2f5..ae5ae21 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -6,9 +6,10 @@ 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 } from '$utils/api'; +import { getGuestToken, checkUserToken, getStoredMap } from '$utils/api'; import { storeData, getData } from '$utils/storage'; import { UserPanel } from '$components/panels/UserPanel'; +import { getPath } from '$utils/history'; export class App extends React.Component { state = { @@ -25,8 +26,14 @@ export class App extends React.Component { componentDidMount() { this.authInit(); + this.mapInit(); } + mapInit = () => { + const path = getPath(); + if (path) getStoredMap({ name: path, callback: this.editor.setData }); + }; + setMode = mode => { this.setState({ mode }); }; diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 4203b68..8102341 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -6,6 +6,8 @@ import { Router } from '$modules/Router'; import { Shotter } from '$modules/Shotter'; import { DEFAULT_LOGO } from '$constants/logos'; +import { parseStickerAngle, parseStickerStyle } from '$utils/import'; + export class Editor { constructor({ container, @@ -165,4 +167,19 @@ export class Editor { this.setLogo(logo); this.changeMode(MODES.NONE); } + + setData = ({ route, stickers, format = 'old' }) => { + if (route) { + this.poly.setPoints(route); + } + + if (stickers) { + stickers.map(({ latlng, ang: angle, style }) => this.stickers.createSticker({ + latlng, + angle: parseStickerAngle({ angle, format }), + sticker: parseStickerStyle({ style, format }), + })); + } + this.map.map.fitBounds(this.poly.poly.getBounds()); + } } diff --git a/src/modules/Poly.js b/src/modules/Poly.js index b3e69aa..a55afd3 100644 --- a/src/modules/Poly.js +++ b/src/modules/Poly.js @@ -124,6 +124,11 @@ export class Poly { this.lockMapClicks(true); }; + setPoints = latlngs => { + if (!latlngs || latlngs.length <= 1) return; + this.poly.setLatLngs(latlngs); + }; + pushPoints = latlngs => { const { map } = this; const simplified = simplify({ map, latlngs }); diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js index 123921c..5f5d574 100644 --- a/src/modules/Sticker.js +++ b/src/modules/Sticker.js @@ -7,9 +7,9 @@ import stickers from '$sprites/stickers.svg'; export class Sticker { constructor({ - latlng, deleteSticker, map, lockMapClicks, sticker + latlng, deleteSticker, map, lockMapClicks, sticker, angle = 2.2 }) { - this.angle = 2.2; + this.angle = angle; this.isDragging = false; this.map = map; @@ -39,7 +39,7 @@ export class Sticker { this.sticker = marker(latlng, { icon: mark }); - this.setAngle(this.angle); + this.setAngle(angle); this.stickerImage.addEventListener('mousedown', this.onDragStart); this.stickerImage.addEventListener('mouseup', this.onDragStop); diff --git a/src/modules/Stickers.js b/src/modules/Stickers.js index f7fd935..48d2a9b 100644 --- a/src/modules/Stickers.js +++ b/src/modules/Stickers.js @@ -19,9 +19,10 @@ export class Stickers { // this.createSticker({ latlng }); // }; - createSticker = ({ latlng, sticker }) => { + createSticker = ({ latlng, sticker, angle = 2.2 }) => { const marker = new Sticker({ latlng, + angle, deleteSticker: this.deleteStickerByReference, map: this.map, lockMapClicks: this.lockMapClicks, diff --git a/src/utils/api.js b/src/utils/api.js index 8975171..f2349da 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -7,7 +7,7 @@ const report = console.warn; export const checkUserToken = ({ callback, fallback, id, token }) => ( - axios.get(API.GET_GUEST, { + axios.get(API.CHECK_TOKEN, { params: { action: 'check_token', id, token } }) .then(result => (result && result.data)) @@ -31,3 +31,13 @@ export const getMergedImage = ({ placement, callback }) => ( .then(callback) .catch(report) ); + +export const getStoredMap = ({ name, callback }) => ( + axios.get(API.GET_MAP, { + params: { name, action: 'load' } + }) + .then(result => (result && result.data &&result.data.data)) + .then(data => ({ ...data })) + .then(callback) + .catch(report) +) diff --git a/src/utils/history.js b/src/utils/history.js new file mode 100644 index 0000000..161d2a2 --- /dev/null +++ b/src/utils/history.js @@ -0,0 +1,2 @@ +export const getPath = () => (window.location && window.location.pathname && + window.location.pathname.replace(/^\//, '')); diff --git a/src/utils/import.js b/src/utils/import.js new file mode 100644 index 0000000..a0e2852 --- /dev/null +++ b/src/utils/import.js @@ -0,0 +1,7 @@ +/* + functions to parse old maps data + */ + +export const parseStickerAngle = ({ angle, format }) => parseFloat((format === 'old' ? angle - 3.14 : angle)); + +export const parseStickerStyle = ({ style, format }) => (format === 'old' ? 'green' : style); From b35a063cd7d54769dad9ffbc9fd728295e48416b Mon Sep 17 00:00:00 2001 From: muerwre Date: Wed, 29 Aug 2018 14:11:44 +0700 Subject: [PATCH 02/22] added loader --- src/containers/App.jsx | 16 ++++++++++++---- src/index.html | 16 ++++++++++++++-- src/modules/Poly.js | 2 ++ 3 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index ae5ae21..a8d84ce 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -31,7 +31,17 @@ export class App extends React.Component { mapInit = () => { const path = getPath(); - if (path) getStoredMap({ name: path, callback: this.editor.setData }); + if (path) getStoredMap({ name: path, callback: this.setDataOnLoad }); + }; + + setDataOnLoad = data => { + this.editor.setData(data); + this.hideLoader(); + }; + + hideLoader = () => { + document.getElementById('loader').style.opacity = 0; + document.getElementById('loader').style.pointerEvents = 'none'; }; setMode = mode => { @@ -101,9 +111,7 @@ export class App extends React.Component { storeData('user', this.state.user); }; - getUserData = () => { - return getData('user') || null; - }; + getUserData = () => getData('user') || null; userLogout = () => { this.setState({ diff --git a/src/index.html b/src/index.html index 0db381b..067fea9 100644 --- a/src/index.html +++ b/src/index.html @@ -9,9 +9,21 @@ + - +
-
+
diff --git a/src/modules/Poly.js b/src/modules/Poly.js index a55afd3..888a79e 100644 --- a/src/modules/Poly.js +++ b/src/modules/Poly.js @@ -127,6 +127,8 @@ export class Poly { setPoints = latlngs => { if (!latlngs || latlngs.length <= 1) return; this.poly.setLatLngs(latlngs); + + this.updateMarks(); }; pushPoints = latlngs => { From e3e209ff656136e0c2cbd33f41a03867c380e96e Mon Sep 17 00:00:00 2001 From: muerwre Date: Wed, 29 Aug 2018 14:43:21 +0700 Subject: [PATCH 03/22] enabling / disabling editor from url --- src/containers/App.jsx | 41 ++++++++++++++++++++++++++++-------- src/modules/Editor.js | 8 +++++++ src/utils/api.js | 47 +++++++++++++++++------------------------- src/utils/history.js | 10 +++++++++ webpack.config.js | 2 +- 5 files changed, 70 insertions(+), 38 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index a8d84ce..2a5ee04 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -9,7 +9,7 @@ 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 { getPath } from '$utils/history'; +import { getUrlData, replacePath } from '$utils/history'; export class App extends React.Component { state = { @@ -26,12 +26,34 @@ export class App extends React.Component { componentDidMount() { this.authInit(); - this.mapInit(); } mapInit = () => { - const path = getPath(); - if (path) getStoredMap({ name: path, callback: this.setDataOnLoad }); + const { path, mode } = getUrlData(); + + if (path) { + getStoredMap({ name: path }) + .then(this.setDataOnLoad) + .then(() => { + if (mode && mode === 'edit') { + this.editor.startEditing(); + } else { + this.editor.stopEditing(); + } + }) + .catch(this.hideLoader); + } else { + // this.hideLoader(); + this.startEmptyEditor(); + } + }; + + startEmptyEditor = () => { + const { user } = this.state; + if (!user || !user.random_url) return; + + replacePath(`/${user.random_url}/edit`); + this.hideLoader(); }; setDataOnLoad = data => { @@ -80,17 +102,18 @@ export class App extends React.Component { const user = this.getUserData(); const { id, token } = (user || {}); - const fallback = () => getGuestToken({ callback: this.setUser }); if (id && token) { checkUserToken({ - callback: this.setUser, - fallback, id, token - }); + }) + .then(this.setUser) + .then(this.mapInit); } else { - getGuestToken({ callback: fallback }); + getGuestToken() + .then(this.setUser) + .then(this.mapInit); } }; diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 8102341..bd5d49d 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -181,5 +181,13 @@ export class Editor { })); } this.map.map.fitBounds(this.poly.poly.getBounds()); + }; + + startEditing = () => { + this.poly.poly.enableEdit(); + }; + + stopEditing = () => { + this.poly.poly.disableEdit(); } } diff --git a/src/utils/api.js b/src/utils/api.js index f2349da..76d9786 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -4,25 +4,19 @@ import { API } from '$constants/api'; const report = console.warn; -export const checkUserToken = ({ - callback, fallback, id, token -}) => ( - axios.get(API.CHECK_TOKEN, { - params: { action: 'check_token', id, token } - }) - .then(result => (result && result.data)) - .then(data => ({ ...data, id, token })) - .then(callback) - .catch(fallback) -); -export const getGuestToken = ({ callback }) => ( - axios.get(API.GET_GUEST, { - params: { action: 'gen_guest_token' } - }) - .then(result => (result && result.data)) - .then(callback) - .catch(report) -); +export const checkUserToken = ({ id, token }) => axios.get(API.CHECK_TOKEN, { + params: { + id, + token, + action: 'check_token', + } +}).then(result => (result && result.data && { ...result.data, id, token })) + +export const getGuestToken = () => axios.get(API.GET_GUEST, { + params: { + action: 'gen_guest_token' + } +}).then(result => (result && result.data)); export const getMergedImage = ({ placement, callback }) => ( axios.get(API.COMPOSE, { @@ -32,12 +26,9 @@ export const getMergedImage = ({ placement, callback }) => ( .catch(report) ); -export const getStoredMap = ({ name, callback }) => ( - axios.get(API.GET_MAP, { - params: { name, action: 'load' } - }) - .then(result => (result && result.data &&result.data.data)) - .then(data => ({ ...data })) - .then(callback) - .catch(report) -) +export const getStoredMap = ({ name }) => axios.get(API.GET_MAP, { + params: { + name, + action: 'load' + } +}).then(result => (result && result.data && result.data.data)); diff --git a/src/utils/history.js b/src/utils/history.js index 161d2a2..b18d42b 100644 --- a/src/utils/history.js +++ b/src/utils/history.js @@ -1,2 +1,12 @@ export const getPath = () => (window.location && window.location.pathname && window.location.pathname.replace(/^\//, '')); + +export const replacePath = url => window.history.replaceState(url, 'Редактирование маршрута', url); + +export const getUrlData = () => { + const url = getPath(); + + const [path, mode] = url.split('/'); + + return { path, mode }; +}; diff --git a/webpack.config.js b/webpack.config.js index 1f0a38f..d236671 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -105,10 +105,10 @@ module.exports = () => { resolve, plugins, entry: { - // loader: './src/loader.js', app: './src/index.js', }, output: { + publicPath: '/', filename: '[name].bundle.[githash].js', }, optimization: { From e0f5d0238a33e7dd88eba89f9e4a581afee7c78f Mon Sep 17 00:00:00 2001 From: muerwre Date: Wed, 29 Aug 2018 14:58:38 +0700 Subject: [PATCH 04/22] starting empty editor on map loading error --- src/containers/App.jsx | 9 +++++++-- src/modules/Editor.js | 11 ++++++++--- src/utils/api.js | 2 +- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 2a5ee04..06184a2 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -26,6 +26,7 @@ export class App extends React.Component { componentDidMount() { this.authInit(); + window.editor = this.editor; } mapInit = () => { @@ -41,7 +42,7 @@ export class App extends React.Component { this.editor.stopEditing(); } }) - .catch(this.hideLoader); + .catch(this.startEmptyEditor); } else { // this.hideLoader(); this.startEmptyEditor(); @@ -50,9 +51,13 @@ export class App extends React.Component { startEmptyEditor = () => { const { user } = this.state; - if (!user || !user.random_url) return; + if (!user || !user.random_url || !user.id) return; replacePath(`/${user.random_url}/edit`); + + this.editor.owner = user.id; + this.editor.startEditing(); + this.hideLoader(); }; diff --git a/src/modules/Editor.js b/src/modules/Editor.js index bd5d49d..76b58ab 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -19,7 +19,7 @@ export class Editor { setLogo, }) { this.logo = DEFAULT_LOGO; - + this.owner = null; this.map = new Map({ container }); const { @@ -166,9 +166,9 @@ export class Editor { this.logo = logo; this.setLogo(logo); this.changeMode(MODES.NONE); - } + }; - setData = ({ route, stickers, format = 'old' }) => { + setData = ({ route, stickers, format = 'old', owner }) => { if (route) { this.poly.setPoints(route); } @@ -180,6 +180,11 @@ export class Editor { sticker: parseStickerStyle({ style, format }), })); } + + if (owner) { + this.owner = owner; + } + this.map.map.fitBounds(this.poly.poly.getBounds()); }; diff --git a/src/utils/api.js b/src/utils/api.js index 76d9786..ceefc7a 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -31,4 +31,4 @@ export const getStoredMap = ({ name }) => axios.get(API.GET_MAP, { name, action: 'load' } -}).then(result => (result && result.data && result.data.data)); +}).then(result => (result && result.data && result.data.data && result.data.owner && { ...result.data.data, owner: result.data.owner })); From 47e4f4a97d793ad2ab07314f30fc06d8e66e0ee6 Mon Sep 17 00:00:00 2001 From: muerwre Date: Thu, 30 Aug 2018 17:10:33 +0700 Subject: [PATCH 05/22] finally saving things --- package-lock.json | 10 +++ package.json | 2 + src/components/panels/EditorDialog.jsx | 5 +- src/components/panels/EditorPanel.jsx | 8 ++- src/components/save/SaveDialog.jsx | 77 +++++++++++++++++++++++ src/constants/api.js | 7 ++- src/constants/modes.js | 1 + src/constants/tips.jsx | 3 + src/containers/App.jsx | 7 ++- src/index.js | 2 + src/modules/Editor.js | 24 +++++--- src/modules/Poly.js | 2 + src/modules/Sticker.js | 20 +++--- src/modules/Stickers.js | 11 ++-- src/styles/colors.less | 3 + src/styles/main.less | 3 +- src/styles/save.less | 84 ++++++++++++++++++++++++++ src/utils/api.js | 10 +++ src/utils/format.js | 12 ++++ src/utils/history.js | 5 +- src/utils/import.js | 13 +++- src/utils/time.js | 6 -- 22 files changed, 277 insertions(+), 38 deletions(-) create mode 100644 src/components/save/SaveDialog.jsx create mode 100644 src/constants/tips.jsx create mode 100644 src/styles/save.less create mode 100644 src/utils/format.js delete mode 100644 src/utils/time.js diff --git a/package-lock.json b/package-lock.json index a283bb5..54a5623 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10130,6 +10130,11 @@ "integrity": "sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ==", "optional": true }, + "pt-sans-cyrillic": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/pt-sans-cyrillic/-/pt-sans-cyrillic-0.0.4.tgz", + "integrity": "sha512-QbXgUHp5pbSbxbLdfpe5/MzuYPufqv36UMQUUI7QwceaaCJA8NQilysjlexjHLyK0GFv7NB5kl6ZAcIMBBBRXA==" + }, "public-encrypt": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz", @@ -10209,6 +10214,11 @@ "integrity": "sha512-eTPo5t/4bgaMNZxyjWx6N2a6AuE0mq51KWvpc7nU/MAqixcI6v6KrGUKES0HaomdnolQBBXU/++X6/QQ9KL4tw==", "dev": true }, + "raleway-cyrillic": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/raleway-cyrillic/-/raleway-cyrillic-4.0.2.tgz", + "integrity": "sha1-HcKzrqYwKwhTbs7jGIyS0li4jOE=" + }, "ramda": { "version": "0.24.1", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz", diff --git a/package.json b/package.json index 80e8ae4..d37bb7a 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,8 @@ "leaflet-routing-machine": "muerwre/leaflet-routing-machine#no-osrm-text", "less": "^3.8.1", "lodash": "^4.17.10", + "pt-sans-cyrillic": "0.0.4", + "raleway-cyrillic": "^4.0.2", "react": "^16.3.2", "react-dom": "^16.3.2", "react-hot-loader": "^4.1.1", diff --git a/src/components/panels/EditorDialog.jsx b/src/components/panels/EditorDialog.jsx index e8a4565..a230e5f 100644 --- a/src/components/panels/EditorDialog.jsx +++ b/src/components/panels/EditorDialog.jsx @@ -5,15 +5,17 @@ import { RouterDialog } from '$components/router/RouterDialog'; import { StickersDialog } from '$components/stickers/StickersDialog'; import { TrashDialog } from '$components/trash/TrashDialog'; import { LogoDialog } from '$components/logo/LogoDialog'; +import { SaveDialog } from '$components/save/SaveDialog'; export const EditorDialog = ({ - mode, routerPoints, editor, activeSticker, logo + mode, routerPoints, editor, activeSticker, logo, user, }) => { const showDialog = ( mode === MODES.ROUTER || (mode === MODES.STICKERS && !activeSticker) || mode === MODES.TRASH || mode === MODES.LOGO + || mode === MODES.SAVE ); return ( @@ -23,6 +25,7 @@ export const EditorDialog = ({ { mode === MODES.STICKERS && } { mode === MODES.TRASH && } { mode === MODES.LOGO && } + { mode === MODES.SAVE && }
); }; diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index 97ee003..fab5895 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { MODES } from '$constants/modes'; import classnames from 'classnames'; -import { toHours } from '$utils/time'; +import { toHours } from '$utils/format'; import { Icon } from '$components/panels/Icon'; import { EditorDialog } from '$components/panels/EditorDialog'; @@ -21,9 +21,11 @@ export class EditorPanel extends React.PureComponent { startLogoMode = () => this.props.editor.changeMode(MODES.LOGO); + startSaveMode = () => this.props.editor.changeMode(MODES.SAVE); + render() { const { - mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, + mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user } = this.props; return ( @@ -35,6 +37,7 @@ export class EditorPanel extends React.PureComponent { activeSticker={activeSticker} editor={editor} logo={logo} + user={user} /> @@ -96,6 +99,7 @@ export class EditorPanel extends React.PureComponent { + : + } + + ); diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 51ec5cd..cd9123d 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -14,6 +14,7 @@ import { getUrlData, pushPath } from '$utils/history'; export class App extends React.Component { state = { mode: 'none', + editing: false, logo: DEFAULT_LOGO, routerPoints: 0, totalDistance: 0, @@ -93,6 +94,11 @@ export class App extends React.Component { this.setState({ logo }); }; + setEditing = editing => { + console.log('editing', editing); + this.setState({ editing }); + }; + editor = new Editor({ container: 'map', mode: this.state.mode, @@ -101,6 +107,7 @@ export class App extends React.Component { setTotalDist: this.setTotalDist, setActiveSticker: this.setActiveSticker, setLogo: this.setLogo, + setEditing: this.setEditing, }); authInit = () => { @@ -155,7 +162,7 @@ export class App extends React.Component { const { editor, state: { - mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, user, + mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, user, editing, }, } = this; @@ -167,6 +174,8 @@ export class App extends React.Component { { this.poly.poly.enableEdit(); this.stickers.startEditing(); + this.setEditing(true); }; stopEditing = () => { this.poly.poly.disableEdit(); this.stickers.stopEditing(); + this.setEditing(false); }; dumpData = () => ({ diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js index 066fa51..636881f 100644 --- a/src/modules/Sticker.js +++ b/src/modules/Sticker.js @@ -92,6 +92,7 @@ export class Sticker { }; estimateAngle = e => { + console.log('est'); const { x, y } = this.element.getBoundingClientRect(); const { pageX, pageY } = e; this.angle = Math.atan2((y - pageY), (x - pageX)); diff --git a/src/styles/stickers.less b/src/styles/stickers.less index 6d4129a..5fcf855 100644 --- a/src/styles/stickers.less +++ b/src/styles/stickers.less @@ -2,6 +2,11 @@ outline: none; position: relative; transition: transform 250ms; + cursor: pointer; + + &.leaflet-drag-target { + transition: none !important; + } &:before { content: ' '; From f85911861a465bc3bfeb842e236888a5f59c9f0a Mon Sep 17 00:00:00 2001 From: muerwre Date: Fri, 31 Aug 2018 16:52:31 +0700 Subject: [PATCH 09/22] switching between modes :-) --- src/components/panels/EditorPanel.jsx | 30 +++++++++++++++++++++++++-- src/components/panels/UserPanel.jsx | 22 +------------------- src/containers/App.jsx | 2 +- src/styles/panel.less | 21 +++++++++++++++++++ 4 files changed, 51 insertions(+), 24 deletions(-) diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index fab5895..aa173b0 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -23,9 +23,13 @@ export class EditorPanel extends React.PureComponent { startSaveMode = () => this.props.editor.changeMode(MODES.SAVE); + stopEditing = () => this.props.editor.stopEditing(); + + startEditing = () => this.props.editor.startEditing(); + render() { const { - mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user + mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user, editing, } = this.props; return ( @@ -42,7 +46,7 @@ export class EditorPanel extends React.PureComponent { -
+
{totalDistance} км @@ -96,9 +100,20 @@ export class EditorPanel extends React.PureComponent { > +
+
+ +
+ +
+ +
+
+ +
+
); } diff --git a/src/components/panels/UserPanel.jsx b/src/components/panels/UserPanel.jsx index 3728181..1bb564c 100644 --- a/src/components/panels/UserPanel.jsx +++ b/src/components/panels/UserPanel.jsx @@ -62,7 +62,7 @@ export class UserPanel extends React.PureComponent { return (
-
+
{ !user || user.role === ROLES.guest @@ -74,26 +74,6 @@ export class UserPanel extends React.PureComponent { }
- -
- -
- { - editing - ? - - : - } - -
); diff --git a/src/containers/App.jsx b/src/containers/App.jsx index cd9123d..57e72fa 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -175,7 +175,6 @@ export class App extends React.Component {
); diff --git a/src/styles/panel.less b/src/styles/panel.less index 79a6f5a..bdc8b79 100644 --- a/src/styles/panel.less +++ b/src/styles/panel.less @@ -3,6 +3,8 @@ border-radius: 3px; display: flex; box-shadow: @bar_shadow; + + } .control-dist { @@ -36,6 +38,12 @@ color: white; display: flex; align-items: center; + transform: translateY(100px); + transition: transform 500ms; + + &.active { + transform: translateY(0); + } &.right { left: auto; @@ -66,6 +74,10 @@ margin-left: 8px; } + &:first-child { + border-radius: 4px 0 0 4px; + } + &:last-child { border-radius: 0 4px 4px 0; } @@ -78,10 +90,19 @@ } &.highlighted { + background: #555555; + } + + &.primary { background: linear-gradient(150deg, @blue_primary, @blue_secondary) 50% 50% no-repeat; background-size: 100% 100%; } + &.success { + background: linear-gradient(150deg, @green_primary, @green_secondary) 50% 50% no-repeat; + background-size: 100% 100%; + } + svg { fill: white; stroke: white; From 5c892c796189fa6540499dd51423d94310205874 Mon Sep 17 00:00:00 2001 From: muerwre Date: Fri, 31 Aug 2018 16:55:48 +0700 Subject: [PATCH 10/22] pushing url when changing edit mode --- src/components/panels/EditorPanel.jsx | 2 +- src/modules/Editor.js | 7 +++++++ src/sprites/icons_draft.svg | 24 ++++++++++++++++-------- 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index aa173b0..e84b9a7 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -128,7 +128,7 @@ export class EditorPanel extends React.PureComponent {
diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 11e1694..f386c48 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -7,6 +7,7 @@ import { Shotter } from '$modules/Shotter'; import { DEFAULT_LOGO } from '$constants/logos'; import { parseStickerAngle, parseStickerStyle } from '$utils/import'; +import { getUrlData, pushPath } from '$utils/history'; export class Editor { constructor({ @@ -196,12 +197,18 @@ export class Editor { }; startEditing = () => { + const { path } = getUrlData(); + pushPath(`/${path}/edit`); + this.poly.poly.enableEdit(); this.stickers.startEditing(); this.setEditing(true); }; stopEditing = () => { + const { path } = getUrlData(); + pushPath(`/${path}`); + this.poly.poly.disableEdit(); this.stickers.stopEditing(); this.setEditing(false); diff --git a/src/sprites/icons_draft.svg b/src/sprites/icons_draft.svg index cfa3fd2..c16280c 100644 --- a/src/sprites/icons_draft.svg +++ b/src/sprites/icons_draft.svg @@ -58,7 +58,8 @@ transform="translate(0,-288.53332)" /> + transform="translate(-64)" + style=""> + transform="translate(-32)" + style=""> + transform="translate(-96)" + style=""> + transform="translate(-128)" + style=""> + id="g5817" + style=""> @@ -441,7 +447,8 @@ + transform="translate(-224)" + style=""> + id="g6048" + style=""> Date: Mon, 3 Sep 2018 10:33:51 +0700 Subject: [PATCH 11/22] added changeMode on stopEditing --- src/components/panels/EditorPanel.jsx | 2 +- src/modules/Editor.js | 1 + src/styles/panel.less | 8 +++++--- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index e84b9a7..0a43de8 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -125,7 +125,7 @@ export class EditorPanel extends React.PureComponent {
-
@@ -84,21 +84,21 @@ export class EditorPanel extends React.PureComponent { className={classnames({ active: mode === MODES.SHOTTER })} onClick={this.startShotterMode} > - +
diff --git a/src/sprites/icon.svg b/src/sprites/icon.svg index e1564ae..9f005e2 100644 --- a/src/sprites/icon.svg +++ b/src/sprites/icon.svg @@ -138,6 +138,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sprites/icons_draft.svg b/src/sprites/icons_draft.svg index c16280c..c5e701f 100644 --- a/src/sprites/icons_draft.svg +++ b/src/sprites/icons_draft.svg @@ -25,9 +25,9 @@ borderopacity="1.0" inkscape:pageopacity="0" inkscape:pageshadow="2" - inkscape:zoom="2" - inkscape:cx="-83.901329" - inkscape:cy="9.506994" + inkscape:zoom="4" + inkscape:cx="-158.00628" + inkscape:cy="4.4652866" inkscape:document-units="px" inkscape:current-layer="svg8" showgrid="false" @@ -38,7 +38,7 @@ inkscape:window-maximized="1" units="px" inkscape:showpageshadow="false" - inkscape:snap-global="false" /> + inkscape:snap-global="true" /> @@ -47,7 +47,7 @@ image/svg+xml - + @@ -58,8 +58,7 @@ transform="translate(0,-288.53332)" /> + transform="translate(-192)"> - + style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2.73455501;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="m 10.922683,16.585837 4.189515,4.189516 6.606544,-6.606544" + id="path7854" + inkscape:connector-curvature="0" /> + id="icon-trash-2" + transform="translate(-96)"> + + width="3.1245625" + height="3.0925183" + x="2.6705999" + y="3.7506495" + rx="0.35952863" + ry="0.40317342" /> + width="3.6630149" + height="0.86975819" + x="2.4013736" + y="2.422653" + rx="0.43487909" + ry="0.43487909" /> + width="2.9243309" + height="1.3062081" + x="2.7707155" + y="1.6977544" + rx="0.65310407" + ry="0.65310407" /> - - - + width="1.9327896" + height="0.52264619" + x="3.2664864" + y="2.1137509" + rx="0.26132309" + ry="0.26132309" /> + + + + - - - - - - - - - - - - - - - - - - - - - + id="icon-cycle" + transform="translate(-256)"> + id="icon-arrow" + transform="translate(-96)"> @@ -447,8 +363,7 @@ + transform="translate(-320)"> + id="icon-sticker-2" + transform="translate(-160)"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.34301686;stroke-miterlimit:4;stroke-dasharray:6.6860338, 3.3430169;stroke-dashoffset:0;stroke-opacity:1" + id="rect6617" + width="19.5" + height="13.890411" + x="6.25" + y="9.8327999" + rx="1.0866628" + ry="1.0866628" /> + + + + + + + + + + + diff --git a/src/styles/colors.less b/src/styles/colors.less index bda5f89..4e79d6e 100644 --- a/src/styles/colors.less +++ b/src/styles/colors.less @@ -11,3 +11,6 @@ @green_primary: #abc837; @green_secondary: #009c80; + +@red_primary: #ff8100; +@red_secondary: #ff3344; diff --git a/src/styles/panel.less b/src/styles/panel.less index c68ef29..2b86861 100644 --- a/src/styles/panel.less +++ b/src/styles/panel.less @@ -97,7 +97,7 @@ } &.success { - background: linear-gradient(150deg, @green_primary, @green_secondary) 50% 50% no-repeat; + background: linear-gradient(150deg, @red_primary, @red_secondary) 50% 50% no-repeat; background-size: 100% 100%; } diff --git a/src/styles/stickers.less b/src/styles/stickers.less index 5fcf855..58cab10 100644 --- a/src/styles/stickers.less +++ b/src/styles/stickers.less @@ -10,8 +10,8 @@ &:before { content: ' '; - box-shadow: 0 0 10px 1px #ff3344; - background: #ff334422; + box-shadow: 0 0 10px 1px @red_secondary; + background: @red_secondary; width: 48px; height: 48px; left: -24px; From 2375bc3f57fee666faa82f9f3c7ba01725d5fc7d Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 3 Sep 2018 14:54:43 +0700 Subject: [PATCH 13/22] buttons and icons --- src/components/panels/EditorPanel.jsx | 4 +- src/sprites/favicon.png | Bin 819 -> 707 bytes src/sprites/icon.svg | 20 ++++++--- src/sprites/icons_draft.svg | 59 ++++++++++++++++++++++++-- src/styles/colors.less | 2 +- src/styles/panel.less | 5 +++ 6 files changed, 77 insertions(+), 13 deletions(-) diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index 4f19cb5..c661c67 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -106,7 +106,7 @@ export class EditorPanel extends React.PureComponent {
diff --git a/src/sprites/favicon.png b/src/sprites/favicon.png index f88434cd52aa3a995f900fe354b6f120309883fa..22b09fe8401f92ff22557c403ba187a11913cfe4 100644 GIT binary patch delta 658 zcmV;D0&V@X2Ezp*iBL{Q4GJ0x0000DNk~Le0000G0000G2nGNE03Y-JVUZyk3l78p z01m_fl`9S#kwz$gKuJVFR5*>5lTS#KVI0Rl&->18w!Ld}OKqFrpCTP;QBhgsts*0o zlAuF&6e@_i1s%FXry`<@mkuU$Dd^#@Tz5v812o3pLi=Jvkt^LDVNrYrg$ zpYQYe@cZ%bh)^hW)UvE@AjJPAswhgAs%ct35MJwsr}Zp!h@m)rBnR#>_onyn0)NL9*46Dn7!o}?O1$qT(3NHPp0RMKK}et>@$0+lzwPN7q@uvjaUg z&cgIC;bYezJx_AzNdeY2?jX3e6E!aphDnKVFRfstzL4m@1AwEf8m+vEZ$pnUb7|~a zkWkYZJpOG6Ln0Oo=HtUmkM%4GmM0KtM`ZIPN1suD5jjakT^quX%#A@Cw0($O$SVrx1A)AxqIS zNhU|SNyXn`clfEUIgMD*`8xA*^)mvvJhdn}9brgjC;FHkyN_j=fS_T^C7fy*GMm9L zQfmuYVj~Z6SRV8rF=oae{DK!#VmMHA163CYN`QQ!6Tx6`iX#8vcf76!D&4zDqz8#- s-Y>7FL^vF7l~Q*9OR`3$q?BDh0o>x-2fN5{-2eap07*qoM6N<$f}0d75C8xG delta 771 zcmV+e1N{8M1+xYriBL{Q4GJ0x0000DNk~Le0000O0000O2nGNE0N{5$_>mzR3k8V) z00oHwZD^hPkwz$gut`KgR7i=<)JtqtRTKu`Z=JSjeINn>qak86^^qb73ZR)9CU4WH4j+*1G&lTwAjIYp}ad<=krZYtFGQy|RipY)<0! zcJ(XH;9Jl4EcpGQjK$N^IBB4L3+dr@t1TmHjAIP9G*YLq9b1}c7Yg_%vd2TdJH*d( z((wV6#T5pBXFPMmvij%P(Y|A+a90zqp{oghA3V~hQl)VQlMZfLRv%l3IDA*YT?M>7 zact7TO^{7_>Yhw(qR>@YBnWA?ftTBGZ_3n;jvDOfc-ifLB-vr~6iB(&Gdda45#j{t z(-4=?-{4JRKG^8ro7uZf>I|4N^j1iR3IWUy`_vbTgjD zjfMKTI{giU;X6V;ZIy=?oXw?|LRM=CozJDEjB#|APbnSV>Ag2HxYN5cc)y%T;`ROV8*qO!FK1wv$`^m*6@O7kkCyeHOA8@Ai+v5ly}`v` zv9;d4&A9BdyQ-x7-!iekm`^;0a|Le8*vbrkED>5xTv5W6=xxO@-PRy3U%g^%Dan;- z{Mn=HqqYX5uiA(u%(Pkmtk= - + @@ -148,7 +148,7 @@ - + @@ -161,7 +161,7 @@ - + @@ -171,7 +171,7 @@ - + @@ -179,7 +179,7 @@ - + @@ -187,7 +187,7 @@ - + @@ -197,6 +197,14 @@ + + + + + + + + diff --git a/src/sprites/icons_draft.svg b/src/sprites/icons_draft.svg index c5e701f..221768d 100644 --- a/src/sprites/icons_draft.svg +++ b/src/sprites/icons_draft.svg @@ -7,6 +7,7 @@ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="600" @@ -17,7 +18,29 @@ inkscape:version="0.92.2 5c3e80d, 2017-08-06" sodipodi:docname="icons_draft.svg"> + id="defs2"> + + + + + + + + + + + + + diff --git a/src/styles/colors.less b/src/styles/colors.less index 4e79d6e..0759894 100644 --- a/src/styles/colors.less +++ b/src/styles/colors.less @@ -12,5 +12,5 @@ @green_primary: #abc837; @green_secondary: #009c80; -@red_primary: #ff8100; +@red_primary: #ff7034; @red_secondary: #ff3344; diff --git a/src/styles/panel.less b/src/styles/panel.less index 2b86861..e4cd94f 100644 --- a/src/styles/panel.less +++ b/src/styles/panel.less @@ -60,6 +60,7 @@ transition: background-color 500ms; height: 48px; box-sizing: border-box; + user-select: none; &:hover { background: rgba(100, 100, 100, 0.2); @@ -91,6 +92,10 @@ background: #555555; } + &.cancel { + background: linear-gradient(270deg, #0f5871, #444444 60%); + } + &.primary { background: linear-gradient(150deg, @blue_primary, @blue_secondary) 50% 50% no-repeat; background-size: 100% 100%; From 13c5ae08d9091e3c90df05c513585156d774cb64 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 3 Sep 2018 15:09:38 +0700 Subject: [PATCH 14/22] icons and toolbars --- src/components/panels/EditorPanel.jsx | 20 ++++++++++---------- src/modules/Editor.js | 3 ++- src/styles/map.less | 8 ++++++-- src/styles/panel.less | 10 +++++++--- 4 files changed, 25 insertions(+), 16 deletions(-) diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index c661c67..7ee1002 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -46,15 +46,15 @@ export class EditorPanel extends React.PureComponent { -
-
- {totalDistance} км - - { - {toHours(estimateTime)} - } -
+
+ {totalDistance} км + + { + {toHours(estimateTime)} + } +
+
); }; diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index 7ee1002..c1651de 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -29,7 +29,7 @@ export class EditorPanel extends React.PureComponent { render() { const { - mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user, editing, + mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address, } = this.props; return ( @@ -42,6 +42,8 @@ export class EditorPanel extends React.PureComponent { editor={editor} logo={logo} user={user} + title={title} + address={address} /> diff --git a/src/components/save/SaveDialog.jsx b/src/components/save/SaveDialog.jsx index 3975870..894ec58 100644 --- a/src/components/save/SaveDialog.jsx +++ b/src/components/save/SaveDialog.jsx @@ -8,14 +8,18 @@ import { postMap } from '$utils/api'; import classnames from 'classnames'; export class SaveDialog extends React.Component { - state = { - address: '', - title: '', - error: '', - sending: false, - finished: false, - overwriting: false, - }; + constructor(props) { + super(props); + + this.state = { + address: props.address || '', + title: props.title || '', + error: '', + sending: false, + finished: false, + overwriting: false, + }; + } getAddress = () => { const { path } = getUrlData(); diff --git a/src/constants/auth.js b/src/constants/auth.js index 81054ca..913d249 100644 --- a/src/constants/auth.js +++ b/src/constants/auth.js @@ -10,6 +10,8 @@ export const DEFAULT_USER = { role: ROLES.guest, routes: [], success: false, + id: null, + token: null, userdata: { name: '', agent: '', diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 57e72fa..3848f8e 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -23,6 +23,8 @@ export class App extends React.Component { user: { ...DEFAULT_USER, }, + title: '', + address: '', }; componentDidMount() { @@ -50,7 +52,6 @@ export class App extends React.Component { }; startEmptyEditor = () => { - console.log('starting empty'); const { user } = this.state; if (!user || !user.random_url || !user.id) return; @@ -62,6 +63,9 @@ export class App extends React.Component { this.hideLoader(); }; + setTitle = title => this.setState({ title }); + setAddress = address => this.setState({ address }); + setDataOnLoad = data => { this.editor.setData(data); this.hideLoader(); @@ -99,6 +103,8 @@ export class App extends React.Component { this.setState({ editing }); }; + getUser = () => this.state.user; + editor = new Editor({ container: 'map', mode: this.state.mode, @@ -108,6 +114,9 @@ export class App extends React.Component { setActiveSticker: this.setActiveSticker, setLogo: this.setLogo, setEditing: this.setEditing, + setTitle: this.setTitle, + setAddress: this.setAddress, + getUser: this.getUser, }); authInit = () => { @@ -132,6 +141,10 @@ export class App extends React.Component { setUser = user => { if (!user.token || !user.id) return; + if (this.state.user.id === this.editor.owner) { + this.editor.owner = user.id; + } + this.setState({ user: { ...DEFAULT_USER, @@ -149,6 +162,10 @@ export class App extends React.Component { getUserData = () => getData('user') || null; userLogout = () => { + if (this.state.user.id === this.editor.owner) { + this.editor.owner = null; + } + this.setState({ user: { ...DEFAULT_USER, @@ -162,7 +179,7 @@ export class App extends React.Component { const { editor, state: { - mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, user, editing, + mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address }, } = this; @@ -190,6 +207,8 @@ export class App extends React.Component { logo={logo} user={user} editing={editing} + title={title} + address={address} />
); diff --git a/src/modules/Editor.js b/src/modules/Editor.js index ff69d70..f6f5159 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -19,6 +19,9 @@ export class Editor { setActiveSticker, setLogo, setEditing, + setTitle, + setAddress, + getUser, }) { this.logo = DEFAULT_LOGO; this.owner = null; @@ -66,6 +69,9 @@ export class Editor { this.setLogo = setLogo; this.setMode = setMode; this.setEditing = setEditing; + this.setTitle = setTitle; + this.setAddress = setAddress; + this.getUser = getUser; this.mode = mode; map.addEventListener('mouseup', this.onClick); @@ -171,8 +177,12 @@ export class Editor { this.changeMode(MODES.NONE); }; - setData = ({ route, stickers, version = 1, owner }) => { - console.log('setting?', stickers); + setData = ({ route, stickers, version = 1, owner, title, address }) => { + this.setTitle(title || ''); + this.setAddress(address || ''); + + console.log('setting address', address); + if (route) { this.poly.setPoints(route); } @@ -198,7 +208,14 @@ export class Editor { startEditing = () => { const { path } = getUrlData(); - pushPath(`/${path}/edit`); + const { random_url, id } = this.getUser(); + + // console.log('ID', id, this.owner); + + const url = (this.owner && this.owner === id) ? path : random_url; + + this.setAddress(url); + pushPath(`/${url}/edit`); if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.enableEdit(); diff --git a/src/utils/api.js b/src/utils/api.js index b9e21e7..a00036a 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -31,7 +31,11 @@ export const getStoredMap = ({ name }) => axios.get(API.GET_MAP, { name, action: 'load' } -}).then(result => (result && result.data && result.data.data && { ...result.data.data, owner: (result.data.owner || null) })); +}).then(result => (result && result.data && result.data.data && { + ...result.data.data, + owner: (result.data.owner || null), + address: (result.data.name || name), +})); export const postMap = ({ title, address, route, stickers, id, token, force, From 24186c044762e6e5fe01fcc68369b68485e85632 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 3 Sep 2018 16:41:24 +0700 Subject: [PATCH 16/22] fixed logout --- src/containers/App.jsx | 9 +++------ src/modules/Editor.js | 2 -- src/modules/Stickers.js | 1 - src/utils/import.js | 1 - 4 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 3848f8e..acd8da3 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -99,7 +99,6 @@ export class App extends React.Component { }; setEditing = editing => { - console.log('editing', editing); this.setState({ editing }); }; @@ -165,14 +164,12 @@ export class App extends React.Component { if (this.state.user.id === this.editor.owner) { this.editor.owner = null; } - + // this.setState({ - user: { - ...DEFAULT_USER, - } + user: DEFAULT_USER, }); - this.storeUserData(); + setTimeout(this.storeUserData, 0); }; render() { diff --git a/src/modules/Editor.js b/src/modules/Editor.js index f6f5159..c3c0c9e 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -181,8 +181,6 @@ export class Editor { this.setTitle(title || ''); this.setAddress(address || ''); - console.log('setting address', address); - if (route) { this.poly.setPoints(route); } diff --git a/src/modules/Stickers.js b/src/modules/Stickers.js index e180b08..cb8a5ec 100644 --- a/src/modules/Stickers.js +++ b/src/modules/Stickers.js @@ -20,7 +20,6 @@ export class Stickers { // }; createSticker = ({ latlng, sticker, angle = 2.2 }) => { - console.log('creating', latlng, sticker, angle); const marker = new Sticker({ latlng, angle, diff --git a/src/utils/import.js b/src/utils/import.js index e7cb1f0..d5a47e0 100644 --- a/src/utils/import.js +++ b/src/utils/import.js @@ -3,7 +3,6 @@ */ export const parseStickerAngle = ({ sticker, version }) => { - console.log('stick', sticker, version); return sticker && version && parseInt(version, 10) === 2 ? parseFloat(sticker.angle) : parseFloat(sticker.ang - 3.14); From 2dab345fe8cf5e637c8f2b0bc8a9f09fb3918296 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 3 Sep 2018 16:44:32 +0700 Subject: [PATCH 17/22] fixed sticker saving after drag --- src/modules/Sticker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js index 636881f..ee49885 100644 --- a/src/modules/Sticker.js +++ b/src/modules/Sticker.js @@ -128,7 +128,7 @@ export class Sticker { dumpData = () => ({ angle: this.angle, - latlng: this.latlng, + latlng: { ...this.marker.getLatLng() }, sticker: this.sticker, }); From 1ca2691a1584dc926bb991e55329b98c0a81a7d3 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 3 Sep 2018 17:09:00 +0700 Subject: [PATCH 18/22] triggering on-something-changed --- src/components/panels/EditorPanel.jsx | 3 ++- src/containers/App.jsx | 14 +++++++++++++- src/modules/Editor.js | 5 +++-- src/modules/Poly.js | 7 ++++++- src/modules/Sticker.js | 9 ++++++++- src/modules/Stickers.js | 4 +++- 6 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index c1651de..96dfff0 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -29,7 +29,7 @@ export class EditorPanel extends React.PureComponent { render() { const { - mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address, + mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address, changed, } = this.props; return ( @@ -49,6 +49,7 @@ export class EditorPanel extends React.PureComponent {
+ {changed && '(ch) '} {totalDistance} км { diff --git a/src/containers/App.jsx b/src/containers/App.jsx index acd8da3..eb4d00d 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -25,6 +25,7 @@ export class App extends React.Component { }, title: '', address: '', + changed: false, }; componentDidMount() { @@ -61,12 +62,15 @@ export class App extends React.Component { this.editor.startEditing(); this.hideLoader(); + + this.setState({ changed: false }); }; setTitle = title => this.setState({ title }); setAddress = address => this.setState({ address }); setDataOnLoad = data => { + this.setState({ changed: false }); this.editor.setData(data); this.hideLoader(); }; @@ -104,6 +108,12 @@ export class App extends React.Component { getUser = () => this.state.user; + triggerOnChange = () => { + if (!this.state.editing) return; + console.log('CHANGED!'); + this.setState({ changed: true }); + }; + editor = new Editor({ container: 'map', mode: this.state.mode, @@ -116,6 +126,7 @@ export class App extends React.Component { setTitle: this.setTitle, setAddress: this.setAddress, getUser: this.getUser, + triggerOnChange: this.triggerOnChange, }); authInit = () => { @@ -176,7 +187,7 @@ export class App extends React.Component { const { editor, state: { - mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address + mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address, changed, }, } = this; @@ -206,6 +217,7 @@ export class App extends React.Component { editing={editing} title={title} address={address} + changed={changed} />
); diff --git a/src/modules/Editor.js b/src/modules/Editor.js index c3c0c9e..4874bcb 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -22,6 +22,7 @@ export class Editor { setTitle, setAddress, getUser, + triggerOnChange, }) { this.logo = DEFAULT_LOGO; this.owner = null; @@ -32,9 +33,9 @@ export class Editor { } = this; this.poly = new Poly({ - map, routerMoveStart, lockMapClicks, setTotalDist + map, routerMoveStart, lockMapClicks, setTotalDist, triggerOnChange }); - this.stickers = new Stickers({ map, lockMapClicks }); + this.stickers = new Stickers({ map, lockMapClicks, triggerOnChange }); this.router = new Router({ map, lockMapClicks, setRouterPoints, changeMode, pushPolyPoints }); diff --git a/src/modules/Poly.js b/src/modules/Poly.js index 955d1f6..bec868e 100644 --- a/src/modules/Poly.js +++ b/src/modules/Poly.js @@ -12,7 +12,7 @@ const polyStyle = { export class Poly { constructor({ - map, routerMoveStart, lockMapClicks, setTotalDist + map, routerMoveStart, lockMapClicks, setTotalDist, triggerOnChange, }) { this.poly = L.polyline([], polyStyle); @@ -23,6 +23,7 @@ export class Poly { this.routerMoveStart = routerMoveStart; this.setTotalDist = setTotalDist; + this.triggerOnChange = triggerOnChange; this.lockMapClicks = lockMapClicks; this.bindEvents(); @@ -63,7 +64,10 @@ export class Poly { this.setTotalDist(kilometers); this.routerMoveStart(); + this.drawArrows(); + + if (coords.length > 1) this.triggerOnChange(); }; bindEvents = () => { @@ -148,6 +152,7 @@ export class Poly { clearAll = () => { this.poly.setLatLngs([]); this.poly.disableEdit(); + this.updateMarks(); }; diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js index ee49885..0d93a2f 100644 --- a/src/modules/Sticker.js +++ b/src/modules/Sticker.js @@ -7,7 +7,7 @@ import stickers from '$sprites/stickers.svg'; export class Sticker { constructor({ - latlng, deleteSticker, map, lockMapClicks, sticker, angle = 2.2 + latlng, deleteSticker, map, lockMapClicks, sticker, triggerOnChange, angle = 2.2 }) { this.latlng = latlng; this.angle = angle; @@ -15,6 +15,7 @@ export class Sticker { this.map = map; this.sticker = sticker; this.editable = true; + this.triggerOnChange = triggerOnChange; this.deleteSticker = deleteSticker; this.lockMapClicks = lockMapClicks; @@ -49,9 +50,14 @@ export class Sticker { this.element.addEventListener('mouseup', this.preventPropagations); this.stickerDelete.addEventListener('click', this.onDelete); + + this.marker.addEventListener('dragend', this.triggerOnChange); + + this.triggerOnChange(); } onDelete = () => { + this.triggerOnChange(); if (!this.isDragging) this.deleteSticker(this); }; @@ -77,6 +83,7 @@ export class Sticker { onDragStop = e => { this.preventPropagations(e); + this.triggerOnChange(); this.isDragging = false; this.marker.enableEdit(); diff --git a/src/modules/Stickers.js b/src/modules/Stickers.js index cb8a5ec..49142cc 100644 --- a/src/modules/Stickers.js +++ b/src/modules/Stickers.js @@ -2,9 +2,10 @@ import { layerGroup } from 'leaflet'; import { Sticker } from '$modules/Sticker'; export class Stickers { - constructor({ map, lockMapClicks }) { + constructor({ map, lockMapClicks, triggerOnChange }) { this.map = map; this.layer = layerGroup(); + this.triggerOnChange = triggerOnChange; this.lockMapClicks = lockMapClicks; this.stickers = []; @@ -27,6 +28,7 @@ export class Stickers { map: this.map, lockMapClicks: this.lockMapClicks, sticker, + triggerOnChange: this.triggerOnChange, }); this.stickers.push(marker); From 3363708c1f8f1e6bcf5c7aaaaba0818783c9e17e Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 3 Sep 2018 17:23:14 +0700 Subject: [PATCH 19/22] unsaved changes cancel confirmation --- src/components/panels/EditorDialog.jsx | 3 ++ src/components/panels/EditorPanel.jsx | 8 +++++- src/components/save/CancelDialog.jsx | 39 ++++++++++++++++++++++++++ src/constants/modes.js | 1 + 4 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 src/components/save/CancelDialog.jsx diff --git a/src/components/panels/EditorDialog.jsx b/src/components/panels/EditorDialog.jsx index fa87e9e..60a54ce 100644 --- a/src/components/panels/EditorDialog.jsx +++ b/src/components/panels/EditorDialog.jsx @@ -6,6 +6,7 @@ import { StickersDialog } from '$components/stickers/StickersDialog'; import { TrashDialog } from '$components/trash/TrashDialog'; import { LogoDialog } from '$components/logo/LogoDialog'; import { SaveDialog } from '$components/save/SaveDialog'; +import { CancelDialog } from '$components/save/CancelDialog'; export const EditorDialog = ({ mode, routerPoints, editor, activeSticker, logo, user, title, address, @@ -16,6 +17,7 @@ export const EditorDialog = ({ || mode === MODES.TRASH || mode === MODES.LOGO || mode === MODES.SAVE + || mode === MODES.CONFIRM_CANCEL ); return ( @@ -26,6 +28,7 @@ export const EditorDialog = ({ { mode === MODES.TRASH && } { mode === MODES.LOGO && } { mode === MODES.SAVE && } + { mode === MODES.CONFIRM_CANCEL && }
); }; diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index 96dfff0..389b25e 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -23,7 +23,13 @@ export class EditorPanel extends React.PureComponent { startSaveMode = () => this.props.editor.changeMode(MODES.SAVE); - stopEditing = () => this.props.editor.stopEditing(); + stopEditing = () => { + if (!this.props.changed){ + this.props.editor.stopEditing(); + } else { + this.props.editor.changeMode(MODES.CONFIRM_CANCEL); + } + }; startEditing = () => this.props.editor.startEditing(); diff --git a/src/components/save/CancelDialog.jsx b/src/components/save/CancelDialog.jsx new file mode 100644 index 0000000..22e79a0 --- /dev/null +++ b/src/components/save/CancelDialog.jsx @@ -0,0 +1,39 @@ +import React from 'react'; + +import { MODES } from '$constants/modes'; + +export class CancelDialog extends React.Component { + cancel = () => { + this.props.editor.stopEditing(); + }; + + proceed = () => { + this.props.editor.changeMode(MODES.NONE); + }; + + save = () => { + this.props.editor.changeMode(MODES.SAVE); + }; + + render() { + return ( +
+
+
Изменения не сохранены!
+
Закрыть редактор?
+
+
+
+ Закрыть +
+
+ Продолжить +
+
+ Сохранить +
+
+
+ ); + } +} diff --git a/src/constants/modes.js b/src/constants/modes.js index a90de73..5813132 100644 --- a/src/constants/modes.js +++ b/src/constants/modes.js @@ -7,4 +7,5 @@ export const MODES = { NONE: 'NONE', LOGO: 'LOGO', SAVE: 'SAVE', + CONFIRM_CANCEL: 'CONFIRM_CANCEL' }; From bed9ea694871ae6b53886edbfbead4979c4dd9b5 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 3 Sep 2018 17:35:31 +0700 Subject: [PATCH 20/22] clearing changed on cleared all --- src/containers/App.jsx | 10 ++++++++-- src/modules/Editor.js | 7 +++++++ src/styles/stickers.less | 5 ++--- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index eb4d00d..ffd0335 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -63,14 +63,14 @@ export class App extends React.Component { this.hideLoader(); - this.setState({ changed: false }); + this.clearChanged(); }; setTitle = title => this.setState({ title }); setAddress = address => this.setState({ address }); setDataOnLoad = data => { - this.setState({ changed: false }); + this.clearChanged(); this.editor.setData(data); this.hideLoader(); }; @@ -114,6 +114,11 @@ export class App extends React.Component { this.setState({ changed: true }); }; + clearChanged = () => { + console.log('clearing'); + this.setState({ changed: false }); + }; + editor = new Editor({ container: 'map', mode: this.state.mode, @@ -127,6 +132,7 @@ export class App extends React.Component { setAddress: this.setAddress, getUser: this.getUser, triggerOnChange: this.triggerOnChange, + clearChanged: this.clearChanged, }); authInit = () => { diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 4874bcb..700be4f 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -23,6 +23,7 @@ export class Editor { setAddress, getUser, triggerOnChange, + clearChanged, }) { this.logo = DEFAULT_LOGO; this.owner = null; @@ -57,6 +58,9 @@ export class Editor { }, [MODES.TRASH]: { toggle: this.clearAll, + }, + [MODES.CONFIRM_CANCEL]: { + toggle: this.stopEditing, } }; @@ -66,6 +70,7 @@ export class Editor { }; this.activeSticker = null; + this.clearChanged = clearChanged; this.setActiveSticker = setActiveSticker; this.setLogo = setLogo; this.setMode = setMode; @@ -170,6 +175,8 @@ export class Editor { this.setSticker(null); this.changeMode(MODES.NONE); + + this.clearChanged(); }; changeLogo = logo => { diff --git a/src/styles/stickers.less b/src/styles/stickers.less index 58cab10..2e871f7 100644 --- a/src/styles/stickers.less +++ b/src/styles/stickers.less @@ -10,7 +10,6 @@ &:before { content: ' '; - box-shadow: 0 0 10px 1px @red_secondary; background: @red_secondary; width: 48px; height: 48px; @@ -19,8 +18,8 @@ position: absolute; border-radius: 40px; opacity: 0; + transform: scale(0.5); transition: opacity 250ms, transform 500ms; - transform: scale(0); } &:hover, &:active { @@ -30,7 +29,7 @@ } &:before { - opacity: 1; + opacity: 0.3; transform: scale(1); } } From fce88cac29e28d6ebcce84214bc51819eedb6e98 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 3 Sep 2018 18:03:09 +0700 Subject: [PATCH 21/22] editor cancels to initial state --- src/components/panels/EditorPanel.jsx | 2 +- src/containers/App.jsx | 3 ++ src/modules/Editor.js | 49 +++++++++++++++++++++++++-- 3 files changed, 50 insertions(+), 4 deletions(-) diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index 389b25e..381fc6e 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -25,7 +25,7 @@ export class EditorPanel extends React.PureComponent { stopEditing = () => { if (!this.props.changed){ - this.props.editor.stopEditing(); + this.props.editor.cancelEditing(); } else { this.props.editor.changeMode(MODES.CONFIRM_CANCEL); } diff --git a/src/containers/App.jsx b/src/containers/App.jsx index ffd0335..e82ede8 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -69,6 +69,8 @@ export class App extends React.Component { setTitle = title => this.setState({ title }); setAddress = address => this.setState({ address }); + getTitle = () => this.state.title; + setDataOnLoad = data => { this.clearChanged(); this.editor.setData(data); @@ -133,6 +135,7 @@ export class App extends React.Component { getUser: this.getUser, triggerOnChange: this.triggerOnChange, clearChanged: this.clearChanged, + getTitle: this.getTitle, }); authInit = () => { diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 700be4f..31826c6 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -24,10 +24,12 @@ export class Editor { getUser, triggerOnChange, clearChanged, + getTitle, }) { this.logo = DEFAULT_LOGO; this.owner = null; this.map = new Map({ container }); + this.initialData = {}; const { lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map } @@ -60,7 +62,7 @@ export class Editor { toggle: this.clearAll, }, [MODES.CONFIRM_CANCEL]: { - toggle: this.stopEditing, + toggle: this.cancelEditing, } }; @@ -79,6 +81,7 @@ export class Editor { this.setAddress = setAddress; this.getUser = getUser; this.mode = mode; + this.getTitle = getTitle; map.addEventListener('mouseup', this.onClick); map.addEventListener('dragstart', () => lockMapClicks(true)); @@ -220,18 +223,31 @@ export class Editor { const url = (this.owner && this.owner === id) ? path : random_url; - this.setAddress(url); pushPath(`/${url}/edit`); if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.enableEdit(); this.stickers.startEditing(); this.setEditing(true); + + const { route, stickers } = this.dumpData(); + + this.initialData = { + version: 2, + title: this.getTitle(), + owner: this.owner, + address: this.owner === id ? path : null, + path: path, + route, + stickers, + }; + + console.log(this.initialData); }; stopEditing = () => { const { path } = getUrlData(); - pushPath(`/${path}`); + pushPath(`/${(this.initialData && this.initialData.path) || path}`); this.changeMode(MODES.NONE); this.poly.poly.disableEdit(); @@ -239,8 +255,35 @@ export class Editor { this.setEditing(false); }; + cancelEditing = () => { + this.stopEditing(); + + console.log('trying to set initial data'); + + if (this.hasEmptyHistory()) { + this.clearAll(); + this.startEditing(); + } else { + this.setData(this.initialData); + } + + this.clearChanged(); + }; + dumpData = () => ({ route: this.poly.dumpData(), stickers: this.stickers.dumpData(), }); + + isEmpty = () => { + const { route, stickers } = this.dumpData(); + + return (route.length > 1 && stickers.length > 0); + }; + + hasEmptyHistory = () => { + const { route, stickers } = this.initialData; + + return !(route && route.length >= 1 && stickers && stickers.length > 0); + } } From 25d9b1d2dfbd619cdf72ee3737c66ffcd4224cff Mon Sep 17 00:00:00 2001 From: muerwre Date: Tue, 4 Sep 2018 10:45:33 +0700 Subject: [PATCH 22/22] possibly fixed editor initialData --- src/components/save/SaveDialog.jsx | 6 +++++ src/containers/App.jsx | 5 +++- src/modules/Editor.js | 38 +++++++++++++++++------------- 3 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/components/save/SaveDialog.jsx b/src/components/save/SaveDialog.jsx index 894ec58..6c94c4f 100644 --- a/src/components/save/SaveDialog.jsx +++ b/src/components/save/SaveDialog.jsx @@ -60,6 +60,12 @@ export class SaveDialog extends React.Component { setSuccess = ({ address, description }) => { pushPath(`/${address}/edit`); + console.log('addr?', address); + this.props.editor.setAddress(address); + this.props.editor.owner = this.props.user.id; + + this.props.editor.setInitialData(); + this.setState({ error: description, finished: true, sending: true, overwriting: false }); diff --git a/src/containers/App.jsx b/src/containers/App.jsx index e82ede8..4fae52b 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -67,7 +67,10 @@ export class App extends React.Component { }; setTitle = title => this.setState({ title }); - setAddress = address => this.setState({ address }); + setAddress = address => { + console.log('SAT', address); + this.setState({ address }); + }; getTitle = () => this.state.title; diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 31826c6..3c4d00b 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -190,7 +190,9 @@ export class Editor { setData = ({ route, stickers, version = 1, owner, title, address }) => { this.setTitle(title || ''); - this.setAddress(address || ''); + const { id } = this.getUser(); + + if (address && id && owner && id === owner) this.setAddress(address); if (route) { this.poly.setPoints(route); @@ -215,21 +217,9 @@ export class Editor { if (Object.values(bounds)) this.map.map.fitBounds(bounds); }; - startEditing = () => { + setInitialData = () => { const { path } = getUrlData(); - const { random_url, id } = this.getUser(); - - // console.log('ID', id, this.owner); - - const url = (this.owner && this.owner === id) ? path : random_url; - - pushPath(`/${url}/edit`); - - if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.enableEdit(); - - this.stickers.startEditing(); - this.setEditing(true); - + const { id } = this.getUser(); const { route, stickers } = this.dumpData(); this.initialData = { @@ -241,6 +231,22 @@ export class Editor { route, stickers, }; + }; + + startEditing = () => { + const { path } = getUrlData(); + const { random_url, id } = this.getUser(); + + this.setInitialData(); + + const url = (this.owner && this.owner === id) ? path : random_url; + + pushPath(`/${url}/edit`); + + if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.enableEdit(); + + this.stickers.startEditing(); + this.setEditing(true); console.log(this.initialData); }; @@ -284,6 +290,6 @@ export class Editor { hasEmptyHistory = () => { const { route, stickers } = this.initialData; - return !(route && route.length >= 1 && stickers && stickers.length > 0); + return (!route || route.length < 1) && (!stickers || stickers.length <= 0); } }