fix loaded stickers has wrong text placement for right-sided captions

backend/tools/import.js

@@ -57,7 +57,7 @@ const calcPolyDistance = route => {
   return parseFloat(Number(summ).toFixed(2));
 };
 
-const stickerAngleParser = angle => parseFloat((Number(angle) - Math.PI).toFixed(2));
+const stickerAngleParser = angle => parseFloat(((Number(angle) % Math.PI) + Math.PI).toFixed(2));
 
 const stickerStyleParser = style => (REPLACEMENT[style]
   ? { ...REPLACEMENT[style] }

src/index.js

@@ -1,6 +1,5 @@
 /*
 
-  todo fix loaded stickers has wrong text placement for right-sided captions
   todo save spinner
   todo cancelling editing someone's else map return back to it's original address /razminochnyj/
 
@@ -30,6 +29,7 @@
 
   OBLIVION STARTS HERE:
 
+  done fix loaded stickers has wrong text placement for right-sided captions
   done fix save button should not react to clicks
   done stickers with empty text should not have blackbox at view mode
   done add ability to copy-paste address after saving

src/modules/Sticker.js

@@ -1,5 +1,4 @@
 import { marker } from 'leaflet';
-// import 'leaflet-editable';
 import React from 'react';
 import { DomMarker } from '$utils/DomMarker';
 
@@ -7,6 +6,7 @@ import { STICKERS } from '$constants/stickers';
 import ReactDOM from 'react-dom';
 import { StickerDesc } from '$components/StickerDesc';
 import classnames from 'classnames';
+import { getLabelDirection } from '$utils/geom';
 
 export class Sticker {
   constructor({
@@ -14,14 +14,14 @@ export class Sticker {
   }) {
     this.text = text;
     this.latlng = latlng;
-    this.angle = angle;
+    this.angle = parseFloat(((angle && (angle % Math.PI)) || 2.2).toFixed(2));
     this.isDragging = false;
     this.map = map;
     this.sticker = sticker;
     this.set = set;
     this.editable = true;
     this.triggerOnChange = triggerOnChange;
-    this.direction = 'right';
+    this.direction = getLabelDirection(this.angle);
     this.deleteSticker = deleteSticker;
     this.lockMapClicks = lockMapClicks;
 
@@ -33,7 +33,7 @@ export class Sticker {
           ref={el => { this.stickerArrow = el; }}
         />
         <div
-          className={classnames('sticker-label', {})}
+          className={classnames(`sticker-label ${this.direction}`, {})}
           ref={el => { this.stickerImage = el; }}
         >
           <StickerDesc value={this.text} onChange={this.setText} />
@@ -66,7 +66,7 @@ export class Sticker {
     this.element.addEventListener('mouseup', this.preventPropagations);
     this.marker.addEventListener('dragend', this.triggerOnChange);
 
-    this.setAngle(angle);
+    this.setAngle(this.angle);
     this.triggerOnChange();
   }
 
@@ -123,13 +123,13 @@ export class Sticker {
   estimateAngle = e => {
     const { x, y } = this.element.getBoundingClientRect();
     const { pageX, pageY } = e;
-    this.angle = Math.atan2((y - pageY), (x - pageX));
+    this.angle = parseFloat(Math.atan2((y - pageY), (x - pageX)).toFixed(2));
 
     this.setAngle(this.angle);
   };
 
   setAngle = angle => {
-    const direction = (angle > -(Math.PI / 2) && angle < (Math.PI / 2)) ? 'left' : 'right';
+    const direction = getLabelDirection(angle);
 
     if (direction !== this.direction) {
       this.direction = direction;

src/utils/geom.js

@@ -3,7 +3,10 @@ export const middleCoord = (l1, l2) => ({
   lng: (l2.lng + ((l1.lng - l2.lng) / 2))
 });
 
-export const deg2rad = deg => deg * Math.PI / 180;
+export const deg2rad = deg => ((deg * Math.PI) / 180);
+export const rad2deg = rad => ((rad / Math.PI) * 180);
+
+window.rad2deg = rad2deg;
 
 export const findDistance = (t1, n1, t2, n2) => {
   // convert coordinates to radians
@@ -27,3 +30,5 @@ export const findDistance = (t1, n1, t2, n2) => {
   // const mi = round(dm);
   return (Math.round(dk * 1000) / 1000);
 };
+
+export const getLabelDirection = angle => (((angle % Math.PI) >= -(Math.PI / 2) && (angle % Math.PI) <= (Math.PI / 2)) ? 'left' : 'right');