mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 11:06:40 +07:00
stickers: fixed sticker dialog listing
This commit is contained in:
muerwre
parent
89a64e244d
commit
93e05b7efe
5 changed files with 10801 additions and 58 deletions
|
|
@ -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) => (
|
||||
<div className="helper stickers-helper">
|
||||
{
|
||||
stickers.map(sticker => (
|
||||
<div className="sticker-preview" key={sticker}>
|
||||
<svg width={48} height={48} viewBox="0 0 64 64" onClick={() => setActiveSticker(sticker)}>
|
||||
<use xlinkHref={`${sprite}#sticker-${sticker}`} x="0" y="0" width="64" height="64" />
|
||||
</svg>
|
||||
</div>
|
||||
Object.keys(STICKERS).map(set => (
|
||||
STICKERS[set].layers.map((sticker, i) => (
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(${STICKERS[set].url})`,
|
||||
backgroundPosition: `${-sticker.off * 48}px 50%`,
|
||||
}}
|
||||
className="sticker-preview"
|
||||
key={`${set}-${i}`}
|
||||
/>
|
||||
))
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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: 'Что тут?' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
10733
src/sprites/stickers/stickers-base.svg
Normal file
10733
src/sprites/stickers/stickers-base.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 894 KiB |
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue