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 => (
+
+
+
+ ))
+ }
+
+ );
+ }
+}
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);
+ }
+}