diff --git a/backend/tools/import.js b/backend/tools/import.js index f446829..0481cc3 100755 --- a/backend/tools/import.js +++ b/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] } diff --git a/src/index.js b/src/index.js index 6a7ec03..09c9257 100644 --- a/src/index.js +++ b/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 diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js index 6529ecc..5746de6 100644 --- a/src/modules/Sticker.js +++ b/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; }} />
{ this.stickerImage = el; }} > @@ -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; diff --git a/src/utils/geom.js b/src/utils/geom.js index 9fb48b6..09bf17f 100644 --- a/src/utils/geom.js +++ b/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');