stickers and sticker deleting

src/modules/Editor.js

@@ -27,7 +27,7 @@ export class Editor {
       [MODES.STICKERS]: this.stickers.createOnClick
     };
 
-    this.map.map.on('click', this.onClick);
+    this.map.map.addEventListener('mousedown', this.onClick);
   }
 
   changeMode = mode => {

src/modules/Map.js

@@ -8,7 +8,7 @@ export class Map {
   constructor({ container }) {
     this.map = L.map(container, { editable: true }).setView([55.0153275, 82.9071235], 13);
 
-    this.tileLayer = L.tileLayer(providers.default, {
+    this.tileLayer = L.tileLayer(providers.dgis, {
       attribution: 'Независимое Велосообщество',
       maxNativeZoom: 18,
       maxZoom: 18,

src/modules/Poly.js

@@ -51,7 +51,6 @@ export class Poly {
   continue = () => {
     if (this.latlngs && this.latlngs.length) {
       this.poly.enableEdit().continueForward();
-      this.poly.editor.options.skipMiddleMarkers = true;
       this.poly.editor.reset();
     } else {
       this.poly = this.map.editTools.startPolyline();

src/modules/Sticker.js

@@ -4,31 +4,45 @@ import 'leaflet-editable';
 import { DomMarker } from '$utils/leafletDomMarkers';
 
 export class Sticker {
-  constructor({ latlng, deleteSticker }) {
+  constructor({
+    latlng, deleteSticker, map
+  }) {
+    this.angle = 2.2;
     this.isDragging = false;
+    this.map = map;
 
     this.deleteSticker = deleteSticker;
+
     this.element = document.createElement('div');
+    this.stickerImage = document.createElement('div');
+    this.stickerArrow = document.createElement('div');
+    this.stickerDelete = document.createElement('div');
 
-    const stickerImage = document.createElement('div');
-    stickerImage.innerHTML = '<div class="sticker-label" />';
+    this.element.className = 'sticker-container';
+    this.stickerImage.className = 'sticker-label';
+    this.stickerArrow.className = 'sticker-arrow';
+    this.stickerDelete.className = 'sticker-delete';
 
-    const stickerArrow = document.createElement('div');
-    stickerArrow.innerHTML = '<div class="sticker-arrow" />';
-
-    this.element.appendChild(stickerArrow);
-    this.element.appendChild(stickerImage);
+    this.element.appendChild(this.stickerArrow);
+    this.element.appendChild(this.stickerImage);
+    this.element.appendChild(this.stickerDelete);
 
     const marker = new DomMarker({
       element: this.element,
+      className: 'sticker-container',
     });
 
     this.sticker = L.marker(latlng, { icon: marker });
 
-    stickerImage.addEventListener('mousedown', this.onDragStart);
-    stickerImage.addEventListener('mouseup', this.onDragStop);
-    //
-    // this.sticker.addEventListener('click', this.onDelete);
+    this.stickerImage.addEventListener('mousedown', this.onDragStart);
+    this.stickerImage.addEventListener('mouseup', this.onDragStop);
+    this.stickerImage.addEventListener('click', this.preventPropagations);
+
+    this.element.addEventListener('mousedown', this.preventPropagations);
+
+    this.setAngle(this.angle);
+
+    this.stickerDelete.addEventListener('click', this.onDelete);
   }
 
   onDelete = () => {
@@ -36,14 +50,63 @@ export class Sticker {
   };
 
   onDragStart = e => {
+    this.preventPropagations(e);
+
     this.isDragging = true;
     this.sticker.disableEdit();
-    console.log('dragStart');
+
+    window.addEventListener('mousemove', this.onDrag);
+    window.addEventListener('mouseup', this.onDragStop);
+  };
+
+  preventPropagations = e => {
+    if (!e || !e.stopPropagation) return;
+
+    e.stopPropagation();
+    e.preventDefault();
   };
 
   onDragStop = e => {
+    this.preventPropagations(e);
+
     this.isDragging = false;
     this.sticker.enableEdit();
-    console.log('dragStop');
+
+    window.removeEventListener('mousemove', this.onDrag);
+    window.removeEventListener('mouseup', this.onDragStop);
+  };
+
+  onDrag = e => {
+    this.preventPropagations(e);
+    this.estimateAngle(e);
+  };
+
+  estimateAngle = e => {
+    console.log('est');
+    const { x, y } = this.element.getBoundingClientRect();
+    const { pageX, pageY } = e;
+    this.angle = Math.atan2((y - pageY), (x - pageX));
+
+    this.setAngle(this.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')));
+    //
+    const rad = 30;
+    const mrad = 48;
+    const x = ((Math.cos(angle + 3.14) * rad) - 30);
+    const y = ((Math.sin(angle + 3.14) * rad) - 30);
+
+    const ax = ((Math.cos(angle + 3.4) * mrad) - 12);
+    const ay = ((Math.sin(angle + 3.4) * mrad) - 12);
+
+    this.stickerImage.style.left = 6 + x;
+    this.stickerImage.style.top = 6 + y;
+
+    this.stickerDelete.style.left = ax;
+    this.stickerDelete.style.top = ay;
+
+    this.stickerArrow.style.transform = `rotate(${angle + 3.14}rad)`;
   }
 }

src/modules/Stickers.js

@@ -22,6 +22,7 @@ export class Stickers {
     const sticker = new Sticker({
       latlng,
       deleteSticker: this.deleteStickerByReference,
+      map: this.map,
     });
     this.stickers.push(sticker);