From cfe3b5ec8cb076afe7cb07ab953cc5399415d7eb Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Mon, 3 Dec 2018 18:41:29 +0700
Subject: [PATCH] stickers: fixed blur on stickers

---
 src/modules/Sticker.js   | 11 +++++------
 src/styles/stickers.less | 19 ++++++++++++-------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js
index 9ebfeab..31f3ccf 100644
--- a/src/modules/Sticker.js
+++ b/src/modules/Sticker.js
@@ -3,7 +3,6 @@ import 'leaflet-editable';
 
 import { DomMarker } from '$utils/DomMarker';
 
-import stickers from '$sprites/stickers.svg';
 import { STICKERS } from '$constants/stickers';
 
 export class Sticker {
@@ -35,7 +34,7 @@ export class Sticker {
 
     this.element.appendChild(this.stickerArrow);
     this.element.appendChild(this.stickerImage);
-    this.element.appendChild(this.stickerDelete);
+    this.stickerArrow.appendChild(this.stickerDelete);
 
     const mark = new DomMarker({
       element: this.element,
@@ -50,7 +49,7 @@ export class Sticker {
     this.stickerImage.addEventListener('mouseup', this.onDragStop);
 
     this.element.addEventListener('mouseup', this.preventPropagations);
-    this.stickerDelete.addEventListener('click', this.onDelete);
+    this.stickerDelete.addEventListener('mousedown', this.onDelete);
 
     this.marker.addEventListener('dragend', this.triggerOnChange);
 
@@ -119,8 +118,8 @@ export class Sticker {
     this.stickerImage.style.left = 6 + x;
     this.stickerImage.style.top = 6 + y;
 
-    this.stickerDelete.style.left = ax;
-    this.stickerDelete.style.top = ay;
+    // this.stickerDelete.style.left = ax;
+    // this.stickerDelete.style.top = ay;
 
     this.stickerArrow.style.transform = `rotate(${angle + 3.14}rad)`;
   };
@@ -134,7 +133,7 @@ export class Sticker {
     `
       <div 
         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>
     `
   );
diff --git a/src/styles/stickers.less b/src/styles/stickers.less
index d73e527..44b2270 100644
--- a/src/styles/stickers.less
+++ b/src/styles/stickers.less
@@ -1,8 +1,9 @@
 .sticker-container {
   outline: none;
   position: relative;
-  transition: transform 250ms;
+  // transition: transform 250ms;
   cursor: pointer;
+  z-index: 10;
 
   &.leaflet-drag-target {
     transition: none !important;
@@ -22,12 +23,13 @@
     transition: opacity 250ms, transform 500ms;
   }
 
-  &:hover, &:active {
+  &:active {
     .sticker-delete {
-      transform: scale(1);
-      pointer-events: all;
+      pointer-events: none;
     }
+  }
 
+  &:hover, &:active {
     &:before {
       opacity: 0.3;
       transform: scale(1);
@@ -74,8 +76,8 @@
   }
 
   .sticker-image {
-    width: 64px;
-    height: 64px;
+    width: 72px;
+    height: 72px;
     left: -8px;
     top: -8px;
     position: relative;
@@ -112,7 +114,10 @@
   transition: transform 500ms;
   transform: scale(1);
   opacity: 1;
-  pointer-events: none;
+  pointer-events: all;
+  left: 70px;
+  top: 12px;
+  z-index: 20;
 
   &:hover {
     transform: scale(1.2) !important;