diff --git a/src/components/panels/EditorDialog.jsx b/src/components/panels/EditorDialog.jsx index b660ee9..16726be 100644 --- a/src/components/panels/EditorDialog.jsx +++ b/src/components/panels/EditorDialog.jsx @@ -2,14 +2,19 @@ import React from 'react'; import { MODES } from '$constants/modes'; import { RouterHelper } from '$components/router/RouterHelper'; +import { StickersHelper } from '$components/stickers/StickersHelper'; -export const EditorDialog = ({ mode, routerPoints, editor }) => { - const showDialog = (mode === MODES.ROUTER); +export const EditorDialog = ({ mode, routerPoints, editor, activeSticker }) => { + const showDialog = ( + mode === MODES.ROUTER + || (mode === MODES.STICKERS && !activeSticker) + ); return ( showDialog &&
{ mode === MODES.ROUTER && } + { mode === MODES.STICKERS && }
); }; diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index 2581bd0..ff53a95 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -18,7 +18,7 @@ export class EditorPanel extends React.PureComponent { render() { const { - mode, routerPoints, editor, totalDistance, estimateTime + mode, routerPoints, editor, totalDistance, estimateTime, activeSticker } = this.props; return ( @@ -27,6 +27,7 @@ export class EditorPanel extends React.PureComponent { @@ -44,14 +45,14 @@ export class EditorPanel extends React.PureComponent {
{(totalDistance > 0) ? - - {totalDistance} км - - { - (estimateTime > 0) && (estimateTime > 0) && {toHours(estimateTime)} - } - - :
editor.changeMode(MODES.ROUTER)}>Начнать рисовать
+ + {totalDistance} км + + { + (estimateTime > 0) && (estimateTime > 0) && {toHours(estimateTime)} + } + + :
editor.changeMode(MODES.ROUTER)}>Начать рисовать
}
diff --git a/src/components/stickers/StickersHelper.jsx b/src/components/stickers/StickersHelper.jsx new file mode 100644 index 0000000..e6be5d7 --- /dev/null +++ b/src/components/stickers/StickersHelper.jsx @@ -0,0 +1,22 @@ +import React from 'react'; + +import { stickers } from '$constants/stickers'; +import sprite from '$sprites/stickers.svg'; + +export class StickersHelper extends React.Component { + render() { + return ( +
+ { + stickers.map(sticker => ( +
+ this.props.editor.setSticker(sticker)}> + + +
+ )) + } +
+ ); + } +} diff --git a/src/constants/stickers.js b/src/constants/stickers.js index 385d040..262438c 100644 --- a/src/constants/stickers.js +++ b/src/constants/stickers.js @@ -1,43 +1,45 @@ // Стикеры -import L from "leaflet"; +// import L from "leaflet"; -export const stickers = { - 'objects': {}, - 'layers': L.layerGroup(), - 'savedata': {}, - 'layer_to_object': {}, - 'src': [ - {off: 5, title: 'Александр 3', title_long: 'Парк Городское Начало', latlng: [55.01275, 82.92368]}, - {off: 9, title: 'пл.Калинина', title_long: "пл.Калинина", latlng: [55.06019, 82.91316]}, - {off: 4, title: 'Мост', title_long: 'Мост', latlng: [55.00511, 82.93073]}, - {off: 7, title: 'Икея', title_long: "Парковка ТЦ Мега", latlng: [54.96494, 82.93138]}, - {off: 8, title: 'Бугринка', title_long: "Та самая коса\n(культовое место Усталых Педалек)", latlng: [54.97626, 82.95703]}, - {off: 10, title: 'ГПНТБ', title_long: "ГПНТБ", latlng: [55.01665, 82.94629]}, // второй ряд - {off: 18, title: 'Оперный', title_long: "Оперный театр", latlng: [55.03027, 82.92292]}, - {off: 1, title: 'Лес', title_long: 'Берёзовая роща', latlng: [55.04572, 82.95]}, // первый ряд - {off: 19, title: 'Пусто', title_long: "Пока что пусто 1"}, - {off: 20, title: 'Пусто', title_long: "Пока что пусто 2"}, // третий ряд +export const stickers = ['green', 'basic', 'green-small']; - {off: 2, title: 'Трасса', title_long: 'Дорога'}, - {off: 3, title: 'Курочка', title_long: 'Курочка'}, - {off: 6, title: 'Палатка', title_long: 'Палаточный лагерь'}, - {off: 11, title: 'Фастфуд', title_long: "Двухколёсное ожирение"}, - {off: 12, title: 'Пивко', title_long: "В Питере - пить!"}, - {off: 13, title: 'Шаварма', title_long: "Вкусная шаурма"}, - {off: 14, title: 'Камни', title_long: "Кааааммммуушшшки"}, - {off: 15, title: 'Болото', title_long: "Пошла ты,\nтрясина грёбаная!"}, - {off: 16, title: 'Роджер', title_long: "Может не надо?"}, - {off: 17, title: 'Какашка', title_long: "Нехорошее место"}, - - {off: 21, title: 'Старт', title_long: "Старт здесь"}, - {off: 22, title: '1', title_long: "Первая точка"}, - {off: 23, title: '2', title_long: "Вторая точка"}, - {off: 24, title: '3', title_long: "Третья точка"}, - {off: 25, title: '4', title_long: "Четвёртая точка"}, - {off: 26, title: '5', title_long: "Пятая точка"}, - {off: 27, title: '7', title_long: "Шестая точка"}, - {off: 28, title: 'Финиш', title_long: "Финиш здесь"}, - {off: 29, title: 'Осторожно!', title_long: "Осторожно!"}, - {off: 30, title: 'Вопрос', title_long: "Что тут?"} - ] -}; +// export const _stickers = { +// 'objects': {}, +// 'layers': L.layerGroup(), +// 'savedata': {}, +// 'layer_to_object': {}, +// 'src': [ +// {off: 5, title: 'Александр 3', title_long: 'Парк Городское Начало', latlng: [55.01275, 82.92368]}, +// {off: 9, title: 'пл.Калинина', title_long: "пл.Калинина", latlng: [55.06019, 82.91316]}, +// {off: 4, title: 'Мост', title_long: 'Мост', latlng: [55.00511, 82.93073]}, +// {off: 7, title: 'Икея', title_long: "Парковка ТЦ Мега", latlng: [54.96494, 82.93138]}, +// {off: 8, title: 'Бугринка', title_long: "Та самая коса\n(культовое место Усталых Педалек)", latlng: [54.97626, 82.95703]}, +// {off: 10, title: 'ГПНТБ', title_long: "ГПНТБ", latlng: [55.01665, 82.94629]}, // второй ряд +// {off: 18, title: 'Оперный', title_long: "Оперный театр", latlng: [55.03027, 82.92292]}, +// {off: 1, title: 'Лес', title_long: 'Берёзовая роща', latlng: [55.04572, 82.95]}, // первый ряд +// {off: 19, title: 'Пусто', title_long: "Пока что пусто 1"}, +// {off: 20, title: 'Пусто', title_long: "Пока что пусто 2"}, // третий ряд +// +// {off: 2, title: 'Трасса', title_long: 'Дорога'}, +// {off: 3, title: 'Курочка', title_long: 'Курочка'}, +// {off: 6, title: 'Палатка', title_long: 'Палаточный лагерь'}, +// {off: 11, title: 'Фастфуд', title_long: "Двухколёсное ожирение"}, +// {off: 12, title: 'Пивко', title_long: "В Питере - пить!"}, +// {off: 13, title: 'Шаварма', title_long: "Вкусная шаурма"}, +// {off: 14, title: 'Камни', title_long: "Кааааммммуушшшки"}, +// {off: 15, title: 'Болото', title_long: "Пошла ты,\nтрясина грёбаная!"}, +// {off: 16, title: 'Роджер', title_long: "Может не надо?"}, +// {off: 17, title: 'Какашка', title_long: "Нехорошее место"}, +// +// {off: 21, title: 'Старт', title_long: "Старт здесь"}, +// {off: 22, title: '1', title_long: "Первая точка"}, +// {off: 23, title: '2', title_long: "Вторая точка"}, +// {off: 24, title: '3', title_long: "Третья точка"}, +// {off: 25, title: '4', title_long: "Четвёртая точка"}, +// {off: 26, title: '5', title_long: "Пятая точка"}, +// {off: 27, title: '7', title_long: "Шестая точка"}, +// {off: 28, title: 'Финиш', title_long: "Финиш здесь"}, +// {off: 29, title: 'Осторожно!', title_long: "Осторожно!"}, +// {off: 30, title: 'Вопрос', title_long: "Что тут?"} +// ] +// }; diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 866bf18..6da5939 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -10,6 +10,7 @@ export class App extends React.Component { routerPoints: 0, totalDistance: 0, estimateTime: 0, + activeSticker: null, }; setMode = mode => { @@ -26,18 +27,25 @@ export class App extends React.Component { this.setState({ totalDistance, estimateTime }); }; + setActiveSticker = activeSticker => { + this.setState({ activeSticker }); + }; + editor = new Editor({ container: 'map', mode: this.state.mode, setMode: this.setMode, setRouterPoints: this.setRouterPoints, setTotalDist: this.setTotalDist, + setActiveSticker: this.setActiveSticker, }); render() { const { editor, - state: { mode, routerPoints, totalDistance, estimateTime }, + state: { + mode, routerPoints, totalDistance, estimateTime, activeSticker + }, } = this; @@ -50,6 +58,7 @@ export class App extends React.Component { routerPoints={routerPoints} totalDistance={totalDistance} estimateTime={estimateTime} + activeSticker={activeSticker} /> ); diff --git a/src/modules/Editor.js b/src/modules/Editor.js index f504986..7a827b3 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -12,6 +12,7 @@ export class Editor { setMode, setRouterPoints, setTotalDist, + setActiveSticker, }) { this.map = new Map({ container }); @@ -19,7 +20,9 @@ export class Editor { lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map } } = this; - this.poly = new Poly({ map, routerMoveStart, lockMapClicks, setTotalDist }); + this.poly = new Poly({ + map, routerMoveStart, lockMapClicks, setTotalDist + }); this.stickers = new Stickers({ map, lockMapClicks }); this.router = new Router({ map, lockMapClicks, setRouterPoints, changeMode, pushPolyPoints @@ -43,15 +46,26 @@ export class Editor { }; this.clickHandlers = { - [MODES.STICKERS]: this.stickers.createOnClick, + [MODES.STICKERS]: this.createStickerOnClick, [MODES.ROUTER]: this.router.pushWaypointOnClick, }; + this.activeSticker = null; + this.setActiveSticker = setActiveSticker; + map.addEventListener('mouseup', this.onClick); map.addEventListener('dragstart', () => lockMapClicks(true)); map.addEventListener('dragstop', () => lockMapClicks(false)); } + createStickerOnClick = (e) => { + if (!e || !e.latlng || !this.activeSticker) return; + const { latlng } = e; + + this.stickers.createSticker({ latlng, sticker: this.activeSticker }); + this.setSticker(null); + }; + changeMode = mode => { if (this.mode === mode) { this.disableMode(mode); @@ -108,5 +122,10 @@ export class Editor { pushPolyPoints = latlngs => { this.poly.pushPoints(latlngs); - } + }; + + setSticker = sticker => { + this.activeSticker = sticker; + this.setActiveSticker(sticker); + }; } diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js index 539695f..123921c 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 + latlng, deleteSticker, map, lockMapClicks, sticker }) { this.angle = 2.2; this.isDragging = false; @@ -26,7 +26,7 @@ export class Sticker { this.stickerArrow.className = 'sticker-arrow'; this.stickerDelete.className = 'sticker-delete'; - this.stickerImage.innerHTML = this.generateStickerSVG('green-sm'); + this.stickerImage.innerHTML = this.generateStickerSVG(sticker); this.element.appendChild(this.stickerArrow); this.element.appendChild(this.stickerImage); diff --git a/src/modules/Stickers.js b/src/modules/Stickers.js index 94e5f7a..71c45c7 100644 --- a/src/modules/Stickers.js +++ b/src/modules/Stickers.js @@ -19,17 +19,18 @@ export class Stickers { this.createSticker({ latlng }); }; - createSticker = ({ latlng }) => { - const sticker = new Sticker({ + createSticker = ({ latlng, sticker }) => { + const marker = new Sticker({ latlng, deleteSticker: this.deleteStickerByReference, map: this.map, lockMapClicks: this.lockMapClicks, + sticker, }); - this.stickers.push(sticker); + this.stickers.push(marker); - sticker.sticker.addTo(this.map); - sticker.sticker.enableEdit(); + marker.sticker.addTo(this.map); + marker.sticker.enableEdit(); }; deleteStickerByReference = ref => { diff --git a/src/styles/panel.less b/src/styles/panel.less index 5f416f4..10ae681 100644 --- a/src/styles/panel.less +++ b/src/styles/panel.less @@ -15,6 +15,7 @@ font-weight: 200; color: #cccccc; user-select: none; + box-shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px; svg { fill: #cccccc; @@ -104,11 +105,11 @@ background: #222222; position: absolute; right: 10px; - bottom: 10px; + bottom: 12px; border-radius: 3px; z-index: 2; color: white; box-sizing: border-box; padding-bottom: 48px; - box-shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px; + box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px; } diff --git a/src/styles/stickers.less b/src/styles/stickers.less index 8fb9caf..5b11554 100644 --- a/src/styles/stickers.less +++ b/src/styles/stickers.less @@ -99,3 +99,19 @@ .leaflet-control-container .leaflet-routing-container-hide { display: none; } + +.stickers-helper { + width: 500px; + padding: 10px; +} + +.sticker-preview { + float: left; + cursor: pointer; + transform: scale(1); + transition: transform 250ms; + + &:hover { + transform: scale(1.2); + } +}