mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 02:56:41 +07:00
free-appending line points
This commit is contained in:
muerwre
parent
2880231798
commit
5d02cd7c67
5 changed files with 211 additions and 27 deletions
|
|
@ -360,6 +360,7 @@ export class Editor {
|
|||
|
||||
// todo: implement
|
||||
// if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.editor.enable();
|
||||
this.poly.enableEditor();
|
||||
this.stickers.startEditing();
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ import {
|
|||
divIcon,
|
||||
LayerGroup,
|
||||
LatLng,
|
||||
LeafletEventHandlerFn, LeafletEvent, LeafletMouseEvent, LatLngLiteral, latLng
|
||||
LeafletMouseEvent, latLng,
|
||||
} from 'leaflet';
|
||||
import { pointBetweenPoints, pointInArea } from "$utils/geom";
|
||||
|
||||
interface InteractivePolylineOptions extends PolylineOptions {
|
||||
maxMarkers?: number,
|
||||
|
|
@ -22,7 +23,9 @@ export class Component extends Polyline {
|
|||
this.constraintsStyle = { ...this.constraintsStyle, ...options.constraintsStyle };
|
||||
this.maxMarkers = options.maxMarkers || this.maxMarkers;
|
||||
|
||||
this.constrLine = new Polyline([], this.constraintsStyle).addTo(this.constraintsLayer);
|
||||
this.constrLine = new Polyline([], this.constraintsStyle);
|
||||
|
||||
this.startDragHinting();
|
||||
}
|
||||
|
||||
setPoints = (latlngs: LatLng[]) => {
|
||||
|
|
@ -30,6 +33,15 @@ export class Component extends Polyline {
|
|||
this.recreateMarkers();
|
||||
};
|
||||
|
||||
createHintMarker = (latlng: LatLng): Marker => marker(latlng, {
|
||||
draggable: false,
|
||||
icon: divIcon({
|
||||
className: 'leaflet-vertex-drag-helper',
|
||||
iconSize: [11, 11],
|
||||
iconAnchor: [6, 6]
|
||||
})
|
||||
});
|
||||
|
||||
createMarker = (latlng: LatLng): Marker => marker(latlng, {
|
||||
draggable: true,
|
||||
icon: divIcon({
|
||||
|
|
@ -113,11 +125,16 @@ export class Component extends Polyline {
|
|||
disable: () => {
|
||||
this.hideAllMarkers();
|
||||
this.is_editing = false;
|
||||
this.stopDragHinting();
|
||||
this.stopDrawing();
|
||||
|
||||
this.fire('editordisable');
|
||||
},
|
||||
enable: () => {
|
||||
this.is_editing = true;
|
||||
this.showVisibleMarkers();
|
||||
this.startDragHinting();
|
||||
|
||||
this.fire('editorenable');
|
||||
},
|
||||
continue: () => {
|
||||
|
|
@ -132,8 +149,92 @@ export class Component extends Polyline {
|
|||
}
|
||||
};
|
||||
|
||||
moveDragHint = ({ latlng }: LeafletMouseEvent): void => {
|
||||
this.hintMarker.setLatLng(latlng);
|
||||
};
|
||||
|
||||
hideDragHint = ({ latlng }: LeafletMouseEvent): void => {
|
||||
this._map.removeLayer(this.hintMarker);
|
||||
};
|
||||
|
||||
showDragHint = ({ latlng }: LeafletMouseEvent): void => {
|
||||
this._map.addLayer(this.hintMarker);
|
||||
};
|
||||
|
||||
startDragHinting = (): void => {
|
||||
this.on('mousemove', this.moveDragHint);
|
||||
this.on('mousedown', this.startDragHintMove);
|
||||
this.on('mouseover', this.showDragHint);
|
||||
this.on('mouseout', this.hideDragHint);
|
||||
};
|
||||
|
||||
stopDragHinting = (): void => {
|
||||
this.off('mousemove', this.moveDragHint);
|
||||
this.off('mousedown', this.startDragHintMove);
|
||||
this.off('mouseover', this.showDragHint);
|
||||
this.off('mouseout', this.hideDragHint);
|
||||
};
|
||||
|
||||
startDragHintMove = (event: LeafletMouseEvent): void => {
|
||||
event.originalEvent.stopPropagation();
|
||||
event.originalEvent.preventDefault();
|
||||
|
||||
const prev = this.dragHintFindNearest(event.latlng);
|
||||
if (prev < 0) return;
|
||||
|
||||
this.hint_prev_marker = prev;
|
||||
|
||||
this.constrLine.setLatLngs([]).addTo(this._map);
|
||||
|
||||
this._map.dragging.disable();
|
||||
|
||||
this.is_dragging = true;
|
||||
|
||||
this._map.on('mousemove', this.dragHintMove);
|
||||
this._map.on('mouseup', this.dragHintAddMarker);
|
||||
this._map.on('mouseout', this.stopDragHintMove);
|
||||
};
|
||||
|
||||
stopDragHintMove = (): void => {
|
||||
this._map.dragging.enable();
|
||||
|
||||
this.is_dragging = false;
|
||||
|
||||
this.constrLine.removeFrom(this._map);
|
||||
|
||||
this._map.off('mousemove', this.dragHintMove);
|
||||
this._map.off('mouseup', this.dragHintAddMarker);
|
||||
this._map.off('mouseout', this.stopDragHintMove);
|
||||
};
|
||||
|
||||
dragHintAddMarker = ({ latlng }: LeafletMouseEvent): void => {
|
||||
this.markers.splice((this.hint_prev_marker + 1), 0, this.createMarker(latlng))
|
||||
this.insertLatLng(latlng, this.hint_prev_marker + 1);
|
||||
this.stopDragHintMove();
|
||||
};
|
||||
|
||||
dragHintFindNearest = (latlng: LatLng): any => {
|
||||
const latlngs = this.getLatLngs();
|
||||
|
||||
return latlngs.findIndex((current, index) => {
|
||||
const next = latlngs[index + 1] as LatLng;
|
||||
|
||||
return (next && pointInArea(current, next, latlng) && pointBetweenPoints(current, next, latlng));
|
||||
});
|
||||
};
|
||||
|
||||
dragHintMove = (event: LeafletMouseEvent): void => {
|
||||
event.originalEvent.stopPropagation();
|
||||
event.originalEvent.preventDefault();
|
||||
|
||||
this.setConstraints([
|
||||
this.markers[this.hint_prev_marker].getLatLng(),
|
||||
event.latlng,
|
||||
this.markers[this.hint_prev_marker + 1].getLatLng(),
|
||||
]);
|
||||
};
|
||||
|
||||
onMarkerDrag = ({ target }: { target: Marker}) => {
|
||||
console.log('drag?');
|
||||
const coords = new Array(0)
|
||||
.concat((this.vertex_index > 0 && this.markers[this.vertex_index - 1].getLatLng()) || [])
|
||||
.concat(target.getLatLng())
|
||||
|
|
@ -145,12 +246,16 @@ export class Component extends Polyline {
|
|||
};
|
||||
|
||||
onMarkerDragStart = ({ target }: { target: Marker}) => {
|
||||
if (this.is_drawing) this.stopDrawing();
|
||||
if (this.is_drawing) {
|
||||
this.stopDrawing();
|
||||
this.is_drawing = true;
|
||||
}
|
||||
if (this.is_dragging) this.stopDragHintMove();
|
||||
|
||||
this.vertex_index = this.markers.indexOf(target);
|
||||
|
||||
this.is_dragging = true;
|
||||
this.constraintsLayer.addTo(this._map);
|
||||
this.constrLine.addTo(this._map);
|
||||
|
||||
this.fire('vertexdragstart', { index: this.vertex_index, vertex: target });
|
||||
};
|
||||
|
|
@ -159,26 +264,37 @@ export class Component extends Polyline {
|
|||
this.replaceLatlng(target.getLatLng(), this.vertex_index);
|
||||
|
||||
this.is_dragging = false;
|
||||
this.constraintsLayer.removeFrom(this._map);
|
||||
this.constrLine.removeFrom(this._map);
|
||||
|
||||
this.vertex_index = null;
|
||||
|
||||
if (this.is_drawing) this.startDrawing();
|
||||
|
||||
this.fire('vertexdragend', { index: this.vertex_index, vertex: target });
|
||||
this.vertex_index = null;
|
||||
if (this.is_drawing) this.startDrawing();
|
||||
};
|
||||
|
||||
startDrawing = (): void => {
|
||||
this.constraintsLayer.addTo(this._map);
|
||||
this.setConstraints([]);
|
||||
this.constrLine.addTo(this._map);
|
||||
this._map.on('mousemove', this.onDrawingMove);
|
||||
this._map.on('click', this.onDrawingClick);
|
||||
};
|
||||
|
||||
stopDrawing = (): void => {
|
||||
this.constraintsLayer.removeFrom(this._map);
|
||||
this.constrLine.removeFrom(this._map);
|
||||
this._map.off('mousemove', this.onDrawingMove);
|
||||
this._map.off('click', this.onDrawingClick);
|
||||
this.is_drawing = false;
|
||||
};
|
||||
|
||||
onDrawingMove = ({ latlng }: LeafletMouseEvent): void => {
|
||||
if (this.markers.length === 0) {
|
||||
this.setConstraints([]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this._map.hasLayer(this.constrLine)) this._map.addLayer(this.constrLine);
|
||||
|
||||
const marker = this.drawing_direction === 'forward'
|
||||
? this.markers[this.markers.length - 1]
|
||||
: this.markers[0];
|
||||
|
|
@ -207,6 +323,12 @@ export class Component extends Polyline {
|
|||
this.setLatLngs(latlngs);
|
||||
};
|
||||
|
||||
insertLatLng = (latlng, index): void => {
|
||||
const latlngs = this.getLatLngs();
|
||||
latlngs.splice(index, 0, latlng);
|
||||
this.setLatLngs(latlngs);
|
||||
};
|
||||
|
||||
setConstraints = (coords: LatLng[]) => {
|
||||
this.constrLine.setLatLngs(coords);
|
||||
};
|
||||
|
|
@ -214,14 +336,16 @@ export class Component extends Polyline {
|
|||
markers: Marker[] = [];
|
||||
maxMarkers: InteractivePolylineOptions['maxMarkers'] = 2;
|
||||
markerLayer: LayerGroup = new LayerGroup();
|
||||
constraintsLayer: LayerGroup = new LayerGroup();
|
||||
|
||||
constraintsStyle: InteractivePolylineOptions['constraintsStyle'] = {
|
||||
weight: 6,
|
||||
color: 'red',
|
||||
dashArray: '5, 10',
|
||||
dashArray: '10, 12',
|
||||
opacity: 0.5,
|
||||
};
|
||||
|
||||
hintMarker: Marker = this.createHintMarker(latLng({ lat: 0, lng: 0 }));
|
||||
|
||||
constrLine: Polyline;
|
||||
|
||||
is_editing: boolean = true;
|
||||
|
|
@ -230,15 +354,18 @@ export class Component extends Polyline {
|
|||
|
||||
drawing_direction: 'forward' | 'backward' = 'forward';
|
||||
vertex_index?: number = null;
|
||||
|
||||
hint_prev_marker: number = null;
|
||||
distance: number = 0;
|
||||
}
|
||||
|
||||
Component.addInitHook(function () {
|
||||
this.once('add', (event) => {
|
||||
console.log('bup');
|
||||
|
||||
if (event.target instanceof InteractivePoly) {
|
||||
this.map = event.target._map;
|
||||
this.markerLayer.addTo(event.target._map);
|
||||
this.hintMarker.addTo(event.target._map);
|
||||
this.constrLine.addTo(event.target._map);
|
||||
|
||||
this.map.on('moveend', this.updateMarkers);
|
||||
}
|
||||
|
|
@ -246,7 +373,10 @@ Component.addInitHook(function () {
|
|||
|
||||
this.once('remove', (event) => {
|
||||
if (event.target instanceof InteractivePoly) {
|
||||
this.markerLayer.removeFrom(this.map);
|
||||
this.markerLayer.removeFrom(this._map);
|
||||
this.hintMarker.removeFrom(this._map);
|
||||
this.constrLine.removeFrom(this._map);
|
||||
|
||||
this.map.off('moveend', this.updateMarkers);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -108,30 +108,35 @@ export class Poly {
|
|||
|
||||
if (coords.length > 1) this.triggerOnChange();
|
||||
};
|
||||
|
||||
preventMissClicks = (e): void => {
|
||||
const mode = this.editor.getMode();
|
||||
|
||||
if (mode === MODES.POLY) return;
|
||||
|
||||
e.cancel();
|
||||
|
||||
if (mode === MODES.NONE) this.editor.setMode(MODES.POLY);
|
||||
};
|
||||
//
|
||||
// preventMissClicks = (e): void => {
|
||||
// const mode = this.editor.getMode();
|
||||
//
|
||||
// if (mode === MODES.POLY) return;
|
||||
//
|
||||
// e.cancel();
|
||||
//
|
||||
// if (mode === MODES.NONE) this.editor.setMode(MODES.POLY);
|
||||
// };
|
||||
|
||||
continue = (): void => {
|
||||
// todo: implement
|
||||
// this.poly.editor.continueForward();
|
||||
this.poly.editor.continue();
|
||||
};
|
||||
|
||||
stop = (): void => {
|
||||
// todo: implement
|
||||
// if (this.poly) this.poly.editor.stopDrawing();
|
||||
this.poly.stopDrawing();
|
||||
};
|
||||
|
||||
enableEditor = (): void => {
|
||||
this.poly.editor.enable();
|
||||
};
|
||||
|
||||
continueForward = (): void => {
|
||||
// todo: implement
|
||||
// this.poly.continueForward();
|
||||
this.poly.editor.continue();
|
||||
};
|
||||
|
||||
lockMap = (): void => {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,12 @@
|
|||
border-radius: @panel_radius !important;
|
||||
}
|
||||
|
||||
.leaflet-vertex-drag-helper {
|
||||
pointer-events: none !important;
|
||||
background: red;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.leaflet-vertex-icon, .leaflet-middle-icon {
|
||||
outline: none !important;
|
||||
border-radius: 10px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { LatLng, LatLngLiteral } from "leaflet";
|
||||
|
||||
interface ILatLng {
|
||||
lat: number,
|
||||
lng: number,
|
||||
|
|
@ -40,8 +42,48 @@ export const getLabelDirection = (angle: number): 'left' | 'right' => (
|
|||
// ? distance + findDistance(latlng.lat, latlng.lng, latlngs[i + 1].lat, latlngs[i + 1].lng)
|
||||
// : distance
|
||||
// ), 0);
|
||||
|
||||
export const getPolyLength = (latlngs: ILatLng[]): number => {
|
||||
console.log('latlngs', latlngs);
|
||||
|
||||
return 0;
|
||||
};
|
||||
|
||||
const distanceBetweenPoints = (A: LatLng, B: LatLng): number => (
|
||||
parseFloat(Math.sqrt(((A.lat - B.lat) ** 2) + ((A.lng - B.lng) ** 2)).toFixed(3))
|
||||
);
|
||||
|
||||
// if C between A and B
|
||||
export const pointInArea = (A: LatLng, B: LatLng, C: LatLng): boolean => (
|
||||
C.lat >= Math.min(A.lat, B.lat) &&
|
||||
C.lat <= Math.max(A.lat, B.lat) &&
|
||||
C.lng >= Math.min(A.lng, B.lng) &&
|
||||
C.lng <= Math.max(A.lng, B.lng)
|
||||
);
|
||||
|
||||
|
||||
const dist2 = (A: LatLngLiteral, B: LatLngLiteral): number => (((A.lat - B.lat) ** 2) + ((A.lng - B.lng) ** 2));
|
||||
|
||||
const distToSegmentSquared = (A: LatLng, B: LatLng, C: LatLng): number => {
|
||||
const l2 = dist2(A, B);
|
||||
if (l2 == 0) return dist2(C, A);
|
||||
|
||||
const t = Math.max(
|
||||
0,
|
||||
Math.min(
|
||||
1,
|
||||
(((C.lat - A.lat) * (B.lat - A.lat) + (C.lng - A.lng) * (B.lng - A.lng)) / l2)
|
||||
)
|
||||
);
|
||||
|
||||
return dist2(
|
||||
C,
|
||||
{
|
||||
lat: A.lat + t * (B.lat - A.lat),
|
||||
lng: A.lng + t * (B.lng - A.lng)
|
||||
});
|
||||
};
|
||||
|
||||
const distToSegment = (A: LatLng, B: LatLng, C: LatLng): number => Math.sqrt(distToSegmentSquared(A, B, C));
|
||||
// if C between A and B
|
||||
export const pointBetweenPoints = (A: LatLng, B: LatLng, C: LatLng): boolean => (distToSegment(A, B, C) < 0.001);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue