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: fixed blur on stickers

Browse source
This commit is contained in:
muerwre 2018-12-03 18:41:29 +07:00
parent 4ea56aa43c
commit cfe3b5ec8c
2 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/modules/Sticker.js
View file

@ -3,7 +3,6 @@ import 'leaflet-editable';
import { DomMarker } from '$utils/DomMarker'; import { DomMarker } from '$utils/DomMarker';
import stickers from '$sprites/stickers.svg';
import { STICKERS } from '$constants/stickers'; import { STICKERS } from '$constants/stickers';
export class Sticker { export class Sticker {
@ -35,7 +34,7 @@ export class Sticker {
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.stickerArrow.appendChild(this.stickerDelete);
const mark = new DomMarker({ const mark = new DomMarker({
element: this.element, element: this.element,
@ -50,7 +49,7 @@ export class Sticker {
this.stickerImage.addEventListener('mouseup', this.onDragStop); this.stickerImage.addEventListener('mouseup', this.onDragStop);
this.element.addEventListener('mouseup', this.preventPropagations); this.element.addEventListener('mouseup', this.preventPropagations);
this.stickerDelete.addEventListener('click', this.onDelete); this.stickerDelete.addEventListener('mousedown', this.onDelete);
this.marker.addEventListener('dragend', this.triggerOnChange); this.marker.addEventListener('dragend', this.triggerOnChange);
@ -119,8 +118,8 @@ export class Sticker {
this.stickerImage.style.left = 6 + x; this.stickerImage.style.left = 6 + x;
this.stickerImage.style.top = 6 + y; this.stickerImage.style.top = 6 + y;
this.stickerDelete.style.left = ax; // this.stickerDelete.style.left = ax;
this.stickerDelete.style.top = ay; // this.stickerDelete.style.top = ay;
this.stickerArrow.style.transform = `rotate(${angle + 3.14}rad)`; this.stickerArrow.style.transform = `rotate(${angle + 3.14}rad)`;
}; };
@ -134,7 +133,7 @@ export class Sticker {
` `
<div <div
class="sticker-image" class="sticker-image"
style="background-image: url('${STICKERS[set].url}');background-position: ${-STICKERS[set].layers[sticker].off * 64} 50%"> style="background-image: url('${STICKERS[set].url}');background-position: ${-STICKERS[set].layers[sticker].off * 72} 50%">
</div> </div>
` `
); );

19
src/styles/stickers.less
View file

@ -1,8 +1,9 @@
.sticker-container { .sticker-container {
outline: none; outline: none;
position: relative; position: relative;
transition: transform 250ms; // transition: transform 250ms;
cursor: pointer; cursor: pointer;
z-index: 10;
&.leaflet-drag-target { &.leaflet-drag-target {
transition: none !important; transition: none !important;
@ -22,12 +23,13 @@
transition: opacity 250ms, transform 500ms; transition: opacity 250ms, transform 500ms;
} }
&:hover, &:active { &:active {
.sticker-delete { .sticker-delete {
transform: scale(1); pointer-events: none;
pointer-events: all; }
} }
&:hover, &:active {
&:before { &:before {
opacity: 0.3; opacity: 0.3;
transform: scale(1); transform: scale(1);
@ -74,8 +76,8 @@
} }
.sticker-image { .sticker-image {
width: 64px; width: 72px;
height: 64px; height: 72px;
left: -8px; left: -8px;
top: -8px; top: -8px;
position: relative; position: relative;
@ -112,7 +114,10 @@
transition: transform 500ms; transition: transform 500ms;
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
pointer-events: none; pointer-events: all;
left: 70px;
top: 12px;
z-index: 20;
&:hover { &:hover {
transform: scale(1.2) !important; transform: scale(1.2) !important;