mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 11:06:40 +07:00
InteractivePoly: fixed touch on drawing
This commit is contained in:
parent
9000efddad
commit
15618ad3d7
1 changed files with 20 additions and 3 deletions
|
@ -200,6 +200,11 @@ export class Component extends Polyline {
|
||||||
event.originalEvent.stopPropagation();
|
event.originalEvent.stopPropagation();
|
||||||
event.originalEvent.preventDefault();
|
event.originalEvent.preventDefault();
|
||||||
|
|
||||||
|
if (this.is_drawing) {
|
||||||
|
this.stopDrawing();
|
||||||
|
this.is_drawing = true;
|
||||||
|
}
|
||||||
|
|
||||||
const prev = this.dragHintFindNearest(event.latlng);
|
const prev = this.dragHintFindNearest(event.latlng);
|
||||||
|
|
||||||
if (prev < 0) return;
|
if (prev < 0) return;
|
||||||
|
@ -219,12 +224,16 @@ export class Component extends Polyline {
|
||||||
|
|
||||||
stopDragHintMove = (): void => {
|
stopDragHintMove = (): void => {
|
||||||
this._map.dragging.enable();
|
this._map.dragging.enable();
|
||||||
this.is_dragging = false;
|
|
||||||
this.constrLine.removeFrom(this._map);
|
this.constrLine.removeFrom(this._map);
|
||||||
|
|
||||||
this._map.off('mousemove', this.dragHintMove);
|
this._map.off('mousemove', this.dragHintMove);
|
||||||
this._map.off('mouseup', this.dragHintAddMarker);
|
this._map.off('mouseup', this.dragHintAddMarker);
|
||||||
this._map.off('mouseout', this.stopDragHintMove);
|
this._map.off('mouseout', this.stopDragHintMove);
|
||||||
|
|
||||||
|
if (this.is_drawing) this.startDrawing();
|
||||||
|
|
||||||
|
setTimeout(() => { this.is_dragging = false; }, 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
dragHintAddMarker = ({ latlng }: LeafletMouseEvent): void => {
|
dragHintAddMarker = ({ latlng }: LeafletMouseEvent): void => {
|
||||||
|
@ -232,8 +241,10 @@ export class Component extends Polyline {
|
||||||
|
|
||||||
this.markers.splice((this.hint_prev_marker + 1), 0, this.createMarker(latlng));
|
this.markers.splice((this.hint_prev_marker + 1), 0, this.createMarker(latlng));
|
||||||
this.insertLatLng(latlng, this.hint_prev_marker + 1);
|
this.insertLatLng(latlng, this.hint_prev_marker + 1);
|
||||||
this.stopDragHintMove();
|
console.log('--> dragHintAddMarker');
|
||||||
this.hideDragHint();
|
this.hideDragHint();
|
||||||
|
this.stopDragHintMove();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
dragHintChangeDistance = (index: number, current: LatLngLiteral): void => {
|
dragHintChangeDistance = (index: number, current: LatLngLiteral): void => {
|
||||||
|
@ -295,6 +306,7 @@ export class Component extends Polyline {
|
||||||
this.stopDrawing();
|
this.stopDrawing();
|
||||||
this.is_drawing = true;
|
this.is_drawing = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.is_dragging) this.stopDragHintMove();
|
if (this.is_dragging) this.stopDragHintMove();
|
||||||
|
|
||||||
this.vertex_index = this.markers.indexOf(target);
|
this.vertex_index = this.markers.indexOf(target);
|
||||||
|
@ -341,6 +353,7 @@ export class Component extends Polyline {
|
||||||
};
|
};
|
||||||
|
|
||||||
startDrawing = (): void => {
|
startDrawing = (): void => {
|
||||||
|
this.is_drawing = true;
|
||||||
this.setConstraints([]);
|
this.setConstraints([]);
|
||||||
this.constrLine.addTo(this._map);
|
this.constrLine.addTo(this._map);
|
||||||
this._map.on('mousemove', this.onDrawingMove);
|
this._map.on('mousemove', this.onDrawingMove);
|
||||||
|
@ -370,10 +383,12 @@ export class Component extends Polyline {
|
||||||
};
|
};
|
||||||
|
|
||||||
onDrawingClick = (event: LeafletMouseEvent): void => {
|
onDrawingClick = (event: LeafletMouseEvent): void => {
|
||||||
console.log(event);
|
if (this.is_dragging) return;
|
||||||
|
|
||||||
const { latlng } = event;
|
const { latlng } = event;
|
||||||
|
|
||||||
this.stopDrawing();
|
this.stopDrawing();
|
||||||
|
|
||||||
const latlngs = this.getLatLngs() as any[];
|
const latlngs = this.getLatLngs() as any[];
|
||||||
|
|
||||||
this.drawingChangeDistance(latlng);
|
this.drawingChangeDistance(latlng);
|
||||||
|
@ -506,6 +521,7 @@ export class Component extends Polyline {
|
||||||
color: 'red',
|
color: 'red',
|
||||||
dashArray: '10, 12',
|
dashArray: '10, 12',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
|
interactive: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
touchHinter: Polyline = new Polyline([], {
|
touchHinter: Polyline = new Polyline([], {
|
||||||
|
@ -514,6 +530,7 @@ export class Component extends Polyline {
|
||||||
smoothFactor: 3,
|
smoothFactor: 3,
|
||||||
// bubblingMouseEvents: false,
|
// bubblingMouseEvents: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
hintMarker: Marker = this.createHintMarker(latLng({ lat: 0, lng: 0 }));
|
hintMarker: Marker = this.createHintMarker(latLng({ lat: 0, lng: 0 }));
|
||||||
|
|
||||||
constrLine: Polyline;
|
constrLine: Polyline;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue