mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 11:06:40 +07:00
cursor: hint for stickers
This commit is contained in:
parent
45fd758c1d
commit
d248b679ed
9 changed files with 80 additions and 24 deletions
|
@ -1,9 +1,13 @@
|
|||
import React from 'react';
|
||||
import { Icon } from '$components/panels/Icon';
|
||||
import { MODES } from '$constants/modes';
|
||||
import { STICKERS } from '$constants/stickers';
|
||||
import { StickerIcon } from '$components/StickerIcon';
|
||||
|
||||
type Props = {
|
||||
mode: String,
|
||||
sticker: String,
|
||||
set: String,
|
||||
}
|
||||
|
||||
export class Cursor extends React.PureComponent<Props, void> {
|
||||
|
@ -20,12 +24,14 @@ export class Cursor extends React.PureComponent<Props, void> {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { mode } = this.props;
|
||||
const { mode, set, sticker } = this.props;
|
||||
const activeSticker = (sticker && set && STICKERS[set] && STICKERS[set].layers[sticker]);
|
||||
|
||||
return (
|
||||
<div className="cursor-tooltip" ref={el => { this.cursor = el; }}>
|
||||
{ mode === MODES.ROUTER && <Icon icon="icon-router" />}
|
||||
{ mode === MODES.POLY && <Icon icon="icon-poly" />}
|
||||
{ mode === MODES.STICKERS && activeSticker && <StickerIcon sticker={sticker} set={set} /> }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
19
src/components/StickerIcon.jsx
Normal file
19
src/components/StickerIcon.jsx
Normal file
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
import { STICKERS } from '$constants/stickers';
|
||||
|
||||
type Props = {
|
||||
set: String,
|
||||
sticker: String,
|
||||
};
|
||||
|
||||
export const StickerIcon = ({ set, sticker }: Props) => (
|
||||
<div
|
||||
className="cursor-icon-sticker"
|
||||
style={{
|
||||
backgroundImage: `url(${STICKERS[set].url}`,
|
||||
backgroundPosition: `-${STICKERS[set].layers[sticker].off * 100}% 50%`,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
//
|
|
@ -41,7 +41,7 @@ export const Component = (props: Props) => {
|
|||
|
||||
const showDialog = (
|
||||
mode === MODES.ROUTER
|
||||
|| (mode === MODES.STICKERS && !activeSticker)
|
||||
|| (mode === MODES.STICKERS && !activeSticker.set)
|
||||
|| mode === MODES.TRASH
|
||||
|| mode === MODES.LOGO
|
||||
|| mode === MODES.SAVE
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue