diff --git a/src/components/dialogs/StickersDialog.jsx b/src/components/dialogs/StickersDialog.jsx index a59731e..fc4fb03 100644 --- a/src/components/dialogs/StickersDialog.jsx +++ b/src/components/dialogs/StickersDialog.jsx @@ -1,7 +1,7 @@ // @flow import React from 'react'; -import { stickers } from '$constants/stickers'; +import { STICKERS } from '$constants/stickers'; import sprite from '$sprites/stickers.svg'; type Props = { @@ -11,12 +11,17 @@ type Props = { export const StickersDialog = ({ setActiveSticker }: Props) => (
{ - stickers.map(sticker => ( -
- setActiveSticker(sticker)}> - - -
+ Object.keys(STICKERS).map(set => ( + STICKERS[set].layers.map((sticker, i) => ( +
+ )) )) }
diff --git a/src/constants/stickers.js b/src/constants/stickers.js index 262438c..dae2e93 100644 --- a/src/constants/stickers.js +++ b/src/constants/stickers.js @@ -1,45 +1,45 @@ // Стикеры // import L from "leaflet"; -export const stickers = ['green', 'basic', 'green-small']; - -// 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: "Что тут?"} -// ] -// }; +// export const stickers = ['green', 'basic', 'green-small']; +export const STICKERS = { + BASE: { + title: 'Простые', + url: require('$sprites/stickers/stickers-base.svg'), + size: 72, + layers: [ + { off: 5, title: 'Александр 3', title_long: 'Парк Городское Начало' }, + { off: 9, title: 'пл.Калинина', title_long: 'пл.Калинина' }, + { off: 4, title: 'Мост', title_long: 'Мост' }, + { off: 7, title: 'Икея', title_long: 'Парковка ТЦ Мега' }, + { off: 8, title: 'Бугринка', title_long: 'Та самая коса\n(культовое место Усталых Педалек)' }, + { off: 10, title: 'ГПНТБ', title_long: 'ГПНТБ' }, + { off: 18, title: 'Оперный', title_long: 'Оперный театр' }, + { off: 1, title: 'Лес', title_long: 'Берёзовая роща' }, + { off: 2, title: 'Трасса', title_long: 'Дорога' }, + { off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' }, + { off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' }, + { 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: 19, title: 'Пусто', title_long: 'Пока что пусто 1' }, + { off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' }, + { 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/redux/user/sagas.js b/src/redux/user/sagas.js index e79c3df..8f6879e 100644 --- a/src/redux/user/sagas.js +++ b/src/redux/user/sagas.js @@ -240,15 +240,11 @@ function* getRenderData() { const points = getPolyPlacement(); ctx.clearRect(0, 0, canvas.width, canvas.height); - console.log('[RENDER] fetching images'); const images = yield fetchImages(ctx, geometry); - console.log('[RENDER] ...done'); - console.log('[RENDER] composing images'); + yield composeImages({ geometry, images, ctx }); - console.log('[RENDER] ...done'); - console.log('[RENDER] composing poly'); yield composePoly({ points, ctx }); - console.log('[RENDER] ...done'); + return yield canvas.toDataURL('image/jpeg'); } @@ -293,9 +289,9 @@ function* cropAShotSaga(params) { } function setProviderSaga({ provider }) { - return editor.setProvider(provider); + editor.setProvider(provider); - // return put(setMode(MODES.NONE)) + return put(setMode(MODES.NONE)); } export function* userSaga() { diff --git a/src/sprites/stickers/stickers-base.svg b/src/sprites/stickers/stickers-base.svg new file mode 100644 index 0000000..a699b6e --- /dev/null +++ b/src/sprites/stickers/stickers-base.svg @@ -0,0 +1,10733 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles/stickers.less b/src/styles/stickers.less index 2e871f7..9da5d97 100644 --- a/src/styles/stickers.less +++ b/src/styles/stickers.less @@ -114,6 +114,8 @@ } .stickers-helper { + display: grid; + grid-template-columns: repeat( auto-fit , minmax(48px, 1fr) ); } .sticker-preview { @@ -121,8 +123,15 @@ cursor: pointer; transform: scale(1); transition: transform 250ms; + width: 48px; + height: 48px; + background-size: cover; + background-repeat: no-repeat; + background-position: 0 50%; + position: relative; &:hover { - transform: scale(1.2); + transform: scale(1.5); + z-index: 2; } }