free-appending line points

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();
   };
 

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);
     }
   });

src/modules/Poly.ts

@@ -108,30 +108,35 @@ export class Poly {
 
     if (coords.length > 1) this.triggerOnChange();
   };
-
+  //
-  preventMissClicks = (e): void => {
+  // preventMissClicks = (e): void => {
-    const mode = this.editor.getMode();
+  //   const mode = this.editor.getMode();
-
+  //
-    if (mode === MODES.POLY) return;
+  //   if (mode === MODES.POLY) return;
-
+  //
-    e.cancel();
+  //   e.cancel();
-
+  //
-    if (mode === MODES.NONE) this.editor.setMode(MODES.POLY);
+  //   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 => {

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;

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);