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 { DomMarker } from '$utils/DomMarker';
import stickers from '$sprites/stickers.svg';
export class Sticker { export class Sticker {
constructor({ constructor({
latlng, deleteSticker, map, lockMapClicks latlng, deleteSticker, map, lockMapClicks
@ -24,6 +26,8 @@ export class Sticker {
this.stickerArrow.className = 'sticker-arrow'; this.stickerArrow.className = 'sticker-arrow';
this.stickerDelete.className = 'sticker-delete'; this.stickerDelete.className = 'sticker-delete';
this.stickerImage.innerHTML = this.generateStickerSVG('green-sm');
this.element.appendChild(this.stickerArrow); this.element.appendChild(this.stickerArrow);
this.element.appendChild(this.stickerImage); this.element.appendChild(this.stickerImage);
this.element.appendChild(this.stickerDelete); this.element.appendChild(this.stickerDelete);
@ -95,8 +99,8 @@ export class Sticker {
setAngle = angle => { 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'))); // $(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 rad = 44;
const mrad = 48; const mrad = 76;
const x = ((Math.cos(angle + 3.14) * rad) - 30); const x = ((Math.cos(angle + 3.14) * rad) - 30);
const y = ((Math.sin(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)`; 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; width: 48px;
height: 48px; height: 48px;
position: absolute; position: absolute;
background: white; //background: white;
border-radius: 32px; //border-radius: 32px;
left: 0; left: 0;
top: 0; top: 0;
outline: none; outline: none;
&:after { //&:after {
content: ' '; // content: ' ';
box-shadow: 0 0 0 1px #ff3344; // box-shadow: 0 0 0 1px #ff3344;
width: 80px; // width: 80px;
height: 80px; // height: 80px;
left: -16px; // left: -16px;
top: -16px; // top: -16px;
position: absolute; // position: absolute;
border-radius: 40px; // border-radius: 40px;
pointer-events: none; // pointer-events: none;
opacity: 0; // opacity: 0;
//}
svg {
left: -8px;
top: -8px;
position: relative;
z-index: 0;
} }
} }
.sticker-arrow { .sticker-arrow {
position: absolute; position: absolute;
background: red;
transform-origin: 0 0; transform-origin: 0 0;
left: 0; left: 0;
top: 0; top: 0;
&:after { &:after {
content: ' '; content: ' ';
background: #ff3344; 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: 24px; width: 50px;
height: 24px; height: 50px;
transform-origin: 0 0; transform-origin: 0 0;
transform: rotate(-45deg); transform: rotate(-45deg);
left: 0; left: 0;