From 5d02cd7c67b6b4f1bddc80ca6a492627f0b21691 Mon Sep 17 00:00:00 2001 From: muerwre Date: Fri, 22 Feb 2019 15:23:44 +0700 Subject: [PATCH] free-appending line points --- src/modules/Editor.ts | 1 + src/modules/InteractivePoly.ts | 160 +++++++++++++++++++++++++++++---- src/modules/Poly.ts | 29 +++--- src/styles/map.less | 6 ++ src/utils/geom.ts | 42 +++++++++ 5 files changed, 211 insertions(+), 27 deletions(-) diff --git a/src/modules/Editor.ts b/src/modules/Editor.ts index fa2131e..ce0b413 100644 --- a/src/modules/Editor.ts +++ b/src/modules/Editor.ts @@ -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(); }; diff --git a/src/modules/InteractivePoly.ts b/src/modules/InteractivePoly.ts index 3d9be68..2208f48 100644 --- a/src/modules/InteractivePoly.ts +++ b/src/modules/InteractivePoly.ts @@ -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); } }); diff --git a/src/modules/Poly.ts b/src/modules/Poly.ts index dfb6311..9fec7f0 100644 --- a/src/modules/Poly.ts +++ b/src/modules/Poly.ts @@ -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 => { diff --git a/src/styles/map.less b/src/styles/map.less index 0a53d55..3e0e3a6 100644 --- a/src/styles/map.less +++ b/src/styles/map.less @@ -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; diff --git a/src/utils/geom.ts b/src/utils/geom.ts index c1f29fb..03eeb55 100644 --- a/src/utils/geom.ts +++ b/src/utils/geom.ts @@ -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);