muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 19:16:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed sticker touches

Browse source
This commit is contained in:
muerwre 2019-02-13 12:16:36 +07:00
parent 3b85579645
commit fca781fe42
1 changed files with 19 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/modules/Sticker.js
View file

@ -8,6 +8,12 @@ import { StickerDesc } from '$components/StickerDesc';
import classnames from 'classnames'; import classnames from 'classnames';
import { getLabelDirection } from '$utils/geom'; import { getLabelDirection } from '$utils/geom';
const getX = e => (
e.touches && e.touches.length > 0
? { pageX: e.touches[0].pageX, pageY: e.touches[0].pageY }
: { pageX: e.pageX, pageY: e.pageY }
);
export class Sticker { export class Sticker {
constructor({ constructor({
latlng, deleteSticker, map, lockMapClicks, sticker, set, triggerOnChange, angle = 2.2, text = '', latlng, deleteSticker, map, lockMapClicks, sticker, set, triggerOnChange, angle = 2.2, text = '',
@ -46,6 +52,8 @@ export class Sticker {
}} }}
onMouseDown={this.onDragStart} onMouseDown={this.onDragStart}
onMouseUp={this.onDragStop} onMouseUp={this.onDragStop}
onTouchStart={this.onDragStart}
onTouchEnd={this.onDragStop}
/> />
<div <div
className="sticker-delete" className="sticker-delete"
@ -66,6 +74,10 @@ export class Sticker {
this.element.addEventListener('mouseup', this.onDragStop); this.element.addEventListener('mouseup', this.onDragStop);
this.element.addEventListener('mouseup', this.preventPropagations); this.element.addEventListener('mouseup', this.preventPropagations);
this.element.addEventListener('touchend', this.onDragStop);
this.element.addEventListener('touchend', this.preventPropagations);
this.marker.addEventListener('dragend', this.triggerOnChange); this.marker.addEventListener('dragend', this.triggerOnChange);
this.setAngle(this.angle); this.setAngle(this.angle);
@ -82,6 +94,7 @@ export class Sticker {
}; };
onDragStart = e => { onDragStart = e => {
console.log('drag started');
this.preventPropagations(e); this.preventPropagations(e);
this.marker.dragging.disable(); this.marker.dragging.disable();
@ -91,6 +104,8 @@ export class Sticker {
window.addEventListener('mousemove', this.onDrag); window.addEventListener('mousemove', this.onDrag);
window.addEventListener('mouseup', this.onDragStop); window.addEventListener('mouseup', this.onDragStop);
window.addEventListener('touchmove', this.onDrag);
window.addEventListener('touchend', this.onDragStop);
// this.marker.disableEdit(); // this.marker.disableEdit();
}; };
@ -112,6 +127,9 @@ export class Sticker {
window.removeEventListener('mousemove', this.onDrag); window.removeEventListener('mousemove', this.onDrag);
window.removeEventListener('mouseup', this.onDragStop); window.removeEventListener('mouseup', this.onDragStop);
window.removeEventListener('touchmove', this.onDrag);
window.removeEventListener('touchend', this.onDragStop);
this.lockMapClicks(false); this.lockMapClicks(false);
// this.marker.enableEdit(); // this.marker.enableEdit();
@ -124,7 +142,7 @@ export class Sticker {
estimateAngle = e => { estimateAngle = e => {
const { x, y } = this.element.getBoundingClientRect(); const { x, y } = this.element.getBoundingClientRect();
const { pageX, pageY } = e; const { pageX, pageY } = getX(e);
this.angle = parseFloat(Math.atan2((y - pageY), (x - pageX)).toFixed(2)); this.angle = parseFloat(Math.atan2((y - pageY), (x - pageX)).toFixed(2));
this.setAngle(this.angle); this.setAngle(this.angle);