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: rewritten it with JSX

Browse source
This commit is contained in:
muerwre 2018-12-05 14:43:19 +07:00
parent 0d9bad9095
commit fa9bff5756
2 changed files with 59 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/modules/Sticker.js
View file

@ -1,9 +1,10 @@
import { marker } from 'leaflet';
import 'leaflet-editable';
import React from 'react';
import { DomMarker } from '$utils/DomMarker';
import { STICKERS } from '$constants/stickers';
import ReactDOM from 'react-dom';
export class Sticker {
constructor({
@ -21,20 +22,43 @@ export class Sticker {
this.lockMapClicks = lockMapClicks;
this.element = document.createElement('div');
this.stickerImage = document.createElement('div');
this.stickerArrow = document.createElement('div');
this.stickerDelete = document.createElement('div');
ReactDOM.render(
<React.Fragment>
<div
className="sticker-arrow"
ref={el => { this.stickerArrow = el; }}
/>
<div
className="sticker-label"
ref={el => { this.stickerImage = el; }}
onMouseDown={this.onDragStart}
onMouseUp={this.onDragStop}
>
{this.generateStickerSVG(sticker)}
<div
className="sticker-delete"
onMouseDown={this.onDelete}
/>
</div>
</React.Fragment>,
this.element
);
this.element.className = 'sticker-container';
this.stickerImage.className = 'sticker-label';
this.stickerArrow.className = 'sticker-arrow';
this.stickerDelete.className = 'sticker-delete';
// this.stickerImage = document.createElement('div');
// this.stickerArrow = document.createElement('div');
// this.stickerDelete = document.createElement('div');
this.stickerImage.innerHTML = this.generateStickerSVG(sticker);
// this.element.className = 'sticker-container';
this.element.appendChild(this.stickerArrow);
this.element.appendChild(this.stickerImage);
this.stickerArrow.appendChild(this.stickerDelete);
// this.stickerImage.className = 'sticker-label';
// this.stickerArrow.className = 'sticker-arrow';
// this.stickerDelete.className = 'sticker-delete';
// this.stickerImage.innerHTML = this.generateStickerSVG(sticker);
// this.element.appendChild(this.stickerArrow);
// this.element.appendChild(this.stickerImage);
// this.stickerImage.appendChild(this.stickerDelete);
const mark = new DomMarker({
element: this.element,
@ -43,16 +67,16 @@ export class Sticker {
this.marker = marker(latlng, { icon: mark });
this.setAngle(angle);
this.stickerImage.addEventListener('mousedown', this.onDragStart);
this.stickerImage.addEventListener('mouseup', this.onDragStop);
//
// this.stickerImage.addEventListener('mousedown', this.onDragStart);
// this.stickerImage.addEventListener('mouseup', this.onDragStop);
this.element.addEventListener('mouseup', this.onDragStop);
this.element.addEventListener('mouseup', this.preventPropagations);
this.stickerDelete.addEventListener('mousedown', this.onDelete);
// this.stickerDelete.addEventListener('mousedown', this.onDelete);
this.marker.addEventListener('dragend', this.triggerOnChange);
this.setAngle(angle);
this.triggerOnChange();
}
@ -62,6 +86,7 @@ export class Sticker {
};
onDragStart = e => {
console.log('drag start');
this.preventPropagations(e);
this.isDragging = true;
@ -107,7 +132,7 @@ export class Sticker {
};
setAngle = angle => {
const rad = 44;
const rad = 56;
const mrad = 76;
const x = ((Math.cos(angle + 3.14) * rad) - 30);
const y = ((Math.sin(angle + 3.14) * rad) - 30);
@ -125,17 +150,13 @@ export class Sticker {
};
generateStickerSVG = ({ set, sticker }) => (
// `
// <svg width="64" height="64">
// <use xlink:href="${stickers}#sticker-${sticker}" x="0" y="0" width="64" height="64" />
// </svg>
// `
`
<div
class="sticker-image"
style="background-image: url('${STICKERS[set].url}');background-position: ${-STICKERS[set].layers[sticker].off * 72} 50%">
</div>
`
<div
className="sticker-image"
style={{
backgroundImage: `url('${STICKERS[set].url}`,
backgroundPosition: `${-STICKERS[set].layers[sticker].off * 72} 50%`,
}}
/>
);
dumpData = () => ({

15
src/styles/stickers.less
View file

@ -1,7 +1,7 @@
.sticker-container {
outline: none;
position: relative;
// transition: transform 250ms;
transition: transform 250ms;
cursor: pointer;
z-index: 10;
@ -18,8 +18,8 @@
top: -24px;
position: absolute;
border-radius: 40px;
opacity: 0;
transform: scale(0.5);
opacity: 0.25;
transform: scale(0.6);
transition: opacity 250ms, transform 500ms;
}
@ -69,8 +69,8 @@
//}
svg {
left: -8px;
top: -8px;
left: -12px;
top: -12px;
position: relative;
z-index: 0;
}
@ -91,6 +91,7 @@
transform-origin: 0 0;
left: 0;
top: 0;
pointer-events: none;
&:after {
content: ' ';
@ -115,8 +116,8 @@
transform: scale(1);
opacity: 1;
pointer-events: all;
left: 70px;
top: 12px;
left: 42px;
top: 0;
z-index: 20;
&:hover {