stickers: rewritten it with JSX

src/modules/Sticker.js

@@ -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');
+    ReactDOM.render(
-    this.stickerArrow = document.createElement('div');
+      <React.Fragment>
-    this.stickerDelete = document.createElement('div');
+        <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 = document.createElement('div');
-    this.stickerImage.className = 'sticker-label';
+    // this.stickerArrow = document.createElement('div');
-    this.stickerArrow.className = 'sticker-arrow';
+    // this.stickerDelete = document.createElement('div');
-    this.stickerDelete.className = 'sticker-delete';
 
-    this.stickerImage.innerHTML = this.generateStickerSVG(sticker);
+    // this.element.className = 'sticker-container';
 
-    this.element.appendChild(this.stickerArrow);
+    // this.stickerImage.className = 'sticker-label';
-    this.element.appendChild(this.stickerImage);
+    // this.stickerArrow.className = 'sticker-arrow';
-    this.stickerArrow.appendChild(this.stickerDelete);
+    // 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 }) => (
-    // `
+    <div
-    //   <svg width="64" height="64">
+      className="sticker-image"
-    //      <use xlink:href="${stickers}#sticker-${sticker}" x="0" y="0" width="64" height="64" />
+      style={{
-    //   </svg>
+          backgroundImage: `url('${STICKERS[set].url}`,
-    // `
+          backgroundPosition: `${-STICKERS[set].layers[sticker].off * 72} 50%`,
-    `
+        }}
-      <div 
+    />
-        class="sticker-image" 
-        style="background-image: url('${STICKERS[set].url}');background-position: ${-STICKERS[set].layers[sticker].off * 72} 50%">
-      </div>
-    `
   );
 
   dumpData = () => ({

src/styles/stickers.less

@@ -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;
+    opacity: 0.25;
-    transform: scale(0.5);
+    transform: scale(0.6);
     transition: opacity 250ms, transform 500ms;
   }
 
@@ -69,8 +69,8 @@
   //}
 
   svg {
-    left: -8px;
+    left: -12px;
-    top: -8px;
+    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;
+  left: 42px;
-  top: 12px;
+  top: 0;
   z-index: 20;
 
   &:hover {