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

simple test stickers and sticker tip restyling

Browse source
This commit is contained in:
muerwre 2018-08-23 15:24:22 +07:00
parent 130e62455d
commit 102328a1b2
2 changed files with 37 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/modules/Sticker.js
View file

@ -3,6 +3,8 @@ import 'leaflet-editable';
import { DomMarker } from '$utils/DomMarker';
import stickers from '$sprites/stickers.svg';
export class Sticker {
constructor({
latlng, deleteSticker, map, lockMapClicks
@ -24,6 +26,8 @@ export class Sticker {
this.stickerArrow.className = 'sticker-arrow';
this.stickerDelete.className = 'sticker-delete';
this.stickerImage.innerHTML = this.generateStickerSVG('green-sm');
this.element.appendChild(this.stickerArrow);
this.element.appendChild(this.stickerImage);
this.element.appendChild(this.stickerDelete);
@ -95,8 +99,8 @@ export class Sticker {
setAngle = angle => {
// $(active_sticker.container).css('left',6+x-parseInt(active_sticker.ctrl.css('left'))).css('top',6+y-parseInt(active_sticker.ctrl.css('top')));
//
const rad = 30;
const mrad = 48;
const rad = 44;
const mrad = 76;
const x = ((Math.cos(angle + 3.14) * rad) - 30);
const y = ((Math.sin(angle + 3.14) * rad) - 30);
@ -111,4 +115,12 @@ export class Sticker {
this.stickerArrow.style.transform = `rotate(${angle + 3.14}rad)`;
}
generateStickerSVG = sticker => (
`
<svg width="64" height="64">
<use xlink:href="${stickers}#sticker-${sticker}" x="0" y="0" width="64" height="64" />
</svg>
`
)
}

40
src/styles/stickers.less
View file

@ -34,38 +34,44 @@
width: 48px;
height: 48px;
position: absolute;
background: white;
border-radius: 32px;
//background: white;
//border-radius: 32px;
left: 0;
top: 0;
outline: none;
&:after {
content: ' ';
box-shadow: 0 0 0 1px #ff3344;
width: 80px;
height: 80px;
left: -16px;
top: -16px;
position: absolute;
border-radius: 40px;
pointer-events: none;
opacity: 0;
//&:after {
// content: ' ';
// box-shadow: 0 0 0 1px #ff3344;
// width: 80px;
// height: 80px;
// left: -16px;
// top: -16px;
// position: absolute;
// border-radius: 40px;
// pointer-events: none;
// opacity: 0;
//}
svg {
left: -8px;
top: -8px;
position: relative;
z-index: 0;
}
}
.sticker-arrow {
position: absolute;
background: red;
transform-origin: 0 0;
left: 0;
top: 0;
&:after {
content: ' ';
background: #ff3344;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 38,20 38,38 20,38' style='fill:%23ff4433;' /%3E%3C/svg%3E") no-repeat;
width: 50px;
height: 50px;
transform-origin: 0 0;
transform: rotate(-45deg);
left: 0;