muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 19:16:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

stickers: fixed sticker dialog listing

Browse source
This commit is contained in:
muerwre 2018-12-03 18:11:23 +07:00
parent 89a64e244d
commit 93e05b7efe
5 changed files with 10801 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/dialogs/StickersDialog.jsx
View file

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { stickers } from '$constants/stickers'; import { STICKERS } from '$constants/stickers';
import sprite from '$sprites/stickers.svg'; import sprite from '$sprites/stickers.svg';
type Props = { type Props = {
@ -11,12 +11,17 @@ type Props = {
export const StickersDialog = ({ setActiveSticker }: Props) => ( export const StickersDialog = ({ setActiveSticker }: Props) => (
<div className="helper stickers-helper"> <div className="helper stickers-helper">
{ {
stickers.map(sticker => ( Object.keys(STICKERS).map(set => (
<div className="sticker-preview" key={sticker}> STICKERS[set].layers.map((sticker, i) => (
<svg width={48} height={48} viewBox="0 0 64 64" onClick={() => setActiveSticker(sticker)}> <div
<use xlinkHref={`${sprite}#sticker-${sticker}`} x="0" y="0" width="64" height="64" /> style={{
</svg> backgroundImage: `url(${STICKERS[set].url})`,
</div> backgroundPosition: `${-sticker.off * 48}px 50%`,
}}
className="sticker-preview"
key={`${set}-${i}`}
/>
))
)) ))
} }
</div> </div>

84
src/constants/stickers.js
View file

@ -1,45 +1,45 @@
// Стикеры // Стикеры
// import L from "leaflet"; // import L from "leaflet";
export const stickers = ['green', 'basic', 'green-small']; // export const stickers = ['green', 'basic', 'green-small'];
export const STICKERS = {
// export const _stickers = { BASE: {
// 'objects': {}, title: 'Простые',
// 'layers': L.layerGroup(), url: require('$sprites/stickers/stickers-base.svg'),
// 'savedata': {}, size: 72,
// 'layer_to_object': {}, layers: [
// 'src': [ { off: 5, title: 'Александр 3', title_long: 'Парк Городское Начало' },
// {off: 5, title: 'Александр 3', title_long: 'Парк Городское Начало', latlng: [55.01275, 82.92368]}, { off: 9, title: 'пл.Калинина', title_long: 'пл.Калинина' },
// {off: 9, title: 'пл.Калинина', title_long: "пл.Калинина", latlng: [55.06019, 82.91316]}, { off: 4, title: 'Мост', title_long: 'Мост' },
// {off: 4, title: 'Мост', title_long: 'Мост', latlng: [55.00511, 82.93073]}, { off: 7, title: 'Икея', title_long: 'Парковка ТЦ Мега' },
// {off: 7, title: 'Икея', title_long: "Парковка ТЦ Мега", latlng: [54.96494, 82.93138]}, { off: 8, title: 'Бугринка', title_long: 'Та самая коса\n(культовое место Усталых Педалек)' },
// {off: 8, title: 'Бугринка', title_long: "Та самая коса\n(культовое место Усталых Педалек)", latlng: [54.97626, 82.95703]}, { off: 10, title: 'ГПНТБ', title_long: 'ГПНТБ' },
// {off: 10, title: 'ГПНТБ', title_long: "ГПНТБ", latlng: [55.01665, 82.94629]}, // второй ряд { off: 18, title: 'Оперный', title_long: 'Оперный театр' },
// {off: 18, title: 'Оперный', title_long: "Оперный театр", latlng: [55.03027, 82.92292]}, { off: 1, title: 'Лес', title_long: 'Берёзовая роща' },
// {off: 1, title: 'Лес', title_long: 'Берёзовая роща', latlng: [55.04572, 82.95]}, // первый ряд { off: 2, title: 'Трасса', title_long: 'Дорога' },
// {off: 19, title: 'Пусто', title_long: "Пока что пусто 1"}, { off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' },
// {off: 20, title: 'Пусто', title_long: "Пока что пусто 2"}, // третий ряд { off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' },
// { off: 3, title: 'Курочка', title_long: 'Курочка' },
// {off: 2, title: 'Трасса', title_long: 'Дорога'}, { off: 6, title: 'Палатка', title_long: 'Палаточный лагерь' },
// {off: 3, title: 'Курочка', title_long: 'Курочка'}, { off: 11, title: 'Фастфуд', title_long: 'Двухколёсное ожирение' },
// {off: 6, title: 'Палатка', title_long: 'Палаточный лагерь'}, { off: 12, title: 'Пивко', title_long: 'В Питере - пить!' },
// {off: 11, title: 'Фастфуд', title_long: "Двухколёсное ожирение"}, { off: 13, title: 'Шаварма', title_long: 'Вкусная шаурма' },
// {off: 12, title: 'Пивко', title_long: "В Питере - пить!"}, { off: 14, title: 'Камни', title_long: 'Кааааммммуушшшки' },
// {off: 13, title: 'Шаварма', title_long: "Вкусная шаурма"}, { off: 15, title: 'Болото', title_long: 'Пошла ты,\nтрясина грёбаная!' },
// {off: 14, title: 'Камни', title_long: "Кааааммммуушшшки"}, { off: 16, title: 'Роджер', title_long: 'Может не надо?' },
// {off: 15, title: 'Болото', title_long: "Пошла ты,\nтрясина грёбаная!"}, { off: 17, title: 'Какашка', title_long: 'Нехорошее место' },
// {off: 16, title: 'Роджер', title_long: "Может не надо?"}, { off: 19, title: 'Пусто', title_long: 'Пока что пусто 1' },
// {off: 17, title: 'Какашка', title_long: "Нехорошее место"}, { off: 19, title: 'Пусто', title_long: 'Пока что пусто 2' },
// { off: 21, title: 'Старт', title_long: 'Старт здесь' },
// {off: 21, title: 'Старт', title_long: "Старт здесь"}, { off: 22, title: '1', title_long: 'Первая точка' },
// {off: 22, title: '1', title_long: "Первая точка"}, { off: 23, title: '2', title_long: 'Вторая точка' },
// {off: 23, title: '2', title_long: "Вторая точка"}, { off: 24, title: '3', title_long: 'Третья точка' },
// {off: 24, title: '3', title_long: "Третья точка"}, { off: 25, title: '4', title_long: 'Четвёртая точка' },
// {off: 25, title: '4', title_long: "Четвёртая точка"}, { off: 26, title: '5', title_long: 'Пятая точка' },
// {off: 26, title: '5', title_long: "Пятая точка"}, { off: 27, title: '7', title_long: 'Шестая точка' },
// {off: 27, title: '7', title_long: "Шестая точка"}, { off: 28, title: 'Финиш', title_long: 'Финиш здесь' },
// {off: 28, title: 'Финиш', title_long: "Финиш здесь"}, { off: 29, title: 'Осторожно!', title_long: 'Осторожно!' },
// {off: 29, title: 'Осторожно!', title_long: "Осторожно!"}, { off: 30, title: 'Вопрос', title_long: 'Что тут?' }
// {off: 30, title: 'Вопрос', title_long: "Что тут?"} ]
// ] }
// }; };

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

@ -240,15 +240,11 @@ function* getRenderData() {
const points = getPolyPlacement(); const points = getPolyPlacement();
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
console.log('[RENDER] fetching images');
const images = yield fetchImages(ctx, geometry); const images = yield fetchImages(ctx, geometry);
console.log('[RENDER] ...done');
console.log('[RENDER] composing images');
yield composeImages({ geometry, images, ctx }); yield composeImages({ geometry, images, ctx });
console.log('[RENDER] ...done');
console.log('[RENDER] composing poly');
yield composePoly({ points, ctx }); yield composePoly({ points, ctx });
console.log('[RENDER] ...done');
return yield canvas.toDataURL('image/jpeg'); return yield canvas.toDataURL('image/jpeg');
} }
@ -293,9 +289,9 @@ function* cropAShotSaga(params) {
} }
function setProviderSaga({ provider }) { function setProviderSaga({ provider }) {
return editor.setProvider(provider); editor.setProvider(provider);
// return put(setMode(MODES.NONE)) return put(setMode(MODES.NONE));
} }
export function* userSaga() { export function* userSaga() {

10733
src/sprites/stickers/stickers-base.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 894 KiB

11
src/styles/stickers.less
View file

@ -114,6 +114,8 @@
} }
.stickers-helper { .stickers-helper {
display: grid;
grid-template-columns: repeat( auto-fit , minmax(48px, 1fr) );
} }
.sticker-preview { .sticker-preview {
@ -121,8 +123,15 @@
cursor: pointer; cursor: pointer;
transform: scale(1); transform: scale(1);
transition: transform 250ms; transition: transform 250ms;
width: 48px;
height: 48px;
background-size: cover;
background-repeat: no-repeat;
background-position: 0 50%;
position: relative;
&:hover { &:hover {
transform: scale(1.2); transform: scale(1.5);
z-index: 2;
} }
} }