diff --git a/package-lock.json b/package-lock.json index 14a6295..9e1cffd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -794,14 +794,14 @@ "integrity": "sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg==" }, "@types/geojson": { - "version": "7946.0.5", - "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.5.tgz", - "integrity": "sha512-rLlMXpd3rdlrp0+xsrda/hFfOpIxgqFcRpk005UKbHtcdFK+QXAjhBAPnvO58qF4O1LdDXrcaiJxMgstCIlcaw==" + "version": "7946.0.6", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.6.tgz", + "integrity": "sha512-f6qai3iR62QuMPPdgyH+LyiXTL2n9Rf62UniJjV7KHrbiwzLTZUKsdq0mFSTxAHbO7JvwxwC4tH0m1UnweuLrA==" }, "@types/leaflet": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.4.1.tgz", - "integrity": "sha512-2Z4AM/kf8Yif7i0YazjG/ures+0zIarc4BDP8QqvcCIiI8GWbCxkfJLf7DWMtMPRZv0bh+a1ZSJRTuSwOtPzzQ==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.4.3.tgz", + "integrity": "sha512-jFRBSsPHi1EwQSwrN0cOJLdPhwOZsRl4IMxvm/2ShLh0YM5GfCtQXCzsrv8RE7DWL+AykXdYSAd9bFLWbZT4CQ==", "requires": { "@types/geojson": "*" } diff --git a/package.json b/package.json index a8454b9..b8957e4 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ }, "dependencies": { "@types/classnames": "^2.2.7", - "@types/leaflet": "^1.4.1", + "@types/leaflet": "^1.4.3", "@types/node": "^11.9.0", "@types/react": "16.8.1", "axios": "^0.18.0", diff --git a/src/modules/InteractivePoly.ts b/src/modules/InteractivePoly.ts index ffe561e..8feb783 100644 --- a/src/modules/InteractivePoly.ts +++ b/src/modules/InteractivePoly.ts @@ -1,6 +1,7 @@ /* - todo IMPORTANT: select closest point on drag instead of first - todo add touch hint poly + done IMPORTANT: select closest point on drag instead of first + done add touch hint poly + done approx radius for dragFindNearest */ import { @@ -12,9 +13,11 @@ import { divIcon, LayerGroup, LatLng, - LeafletMouseEvent, latLng, LatLngLiteral, + LeafletMouseEvent, + latLng, + LatLngLiteral, } from 'leaflet'; -import { distKm, getPolyLength, pointBetweenPoints, pointInArea } from "$utils/geom"; +import { distKm, distToSegment, getPolyLength, pointInArea } from "$utils/geom"; interface InteractivePolylineOptions extends PolylineOptions { maxMarkers?: number, @@ -35,6 +38,7 @@ export class Component extends Polyline { this.constrLine = new Polyline([], this.constraintsStyle); this.startDragHinting(); + this.touchHinter.on('click', console.log); } setPoints = (latlngs: LatLng[]) => { @@ -167,7 +171,7 @@ export class Component extends Polyline { }; hideDragHint = (): void => { - this._map.removeLayer(this.hintMarker); + if (this._map.hasLayer(this.hintMarker)) this._map.removeLayer(this.hintMarker); }; showDragHint = (): void => { @@ -189,13 +193,11 @@ export class Component extends Polyline { }; startDragHintMove = (event: LeafletMouseEvent): void => { - console.log('hoop'); event.originalEvent.stopPropagation(); event.originalEvent.preventDefault(); - // console.log(this.closestLayerPoint(event.latlng)); - const prev = this.dragHintFindNearest(event.latlng); + if (prev < 0) return; this.hint_prev_marker = prev; @@ -227,6 +229,7 @@ export class Component extends Polyline { this.markers.splice((this.hint_prev_marker + 1), 0, this.createMarker(latlng)); this.insertLatLng(latlng, this.hint_prev_marker + 1); this.stopDragHintMove(); + this.hideDragHint(); }; dragHintChangeDistance = (index: number, current: LatLngLiteral): void => { @@ -246,13 +249,19 @@ export class Component extends Polyline { }; dragHintFindNearest = (latlng: LatLng): any => { - const latlngs = this.getLatLngs(); + const latlngs = this.getLatLngs() as LatLng[]; - return latlngs.findIndex((current, index) => { + const neighbours = latlngs.filter((current, index) => { const next = latlngs[index + 1] as LatLng; - return (next && pointInArea(current, next, latlng) && pointBetweenPoints(current, next, latlng)); - }); + return (next && pointInArea(current, next, latlng)); + }) + .map(el => latlngs.indexOf(el)) + .sort((a, b) => ( + distToSegment(latlngs[a], latlngs[a + 1], latlng) - distToSegment(latlngs[b], latlngs[b + 1], latlng) + )); + + return neighbours.length > 0 ? neighbours[0] : -1; }; dragHintMove = (event: LeafletMouseEvent): void => { @@ -524,9 +533,8 @@ Component.addInitHook(function () { this.map.on('moveend', this.updateMarkers); if (window.innerWidth < 768) { - this.touchHinter.setStyle({ weight: 30 }); + this.touchHinter.setStyle({ weight: 50 }); } - console.log('touchHinter', this.touchHinter); } }); diff --git a/src/utils/geom.ts b/src/utils/geom.ts index b00a6f3..7fb814e 100644 --- a/src/utils/geom.ts +++ b/src/utils/geom.ts @@ -50,11 +50,11 @@ export const getPolyLength = (latlngs: LatLngLiteral[]): number => { }; // 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) +export const pointInArea = (A: LatLng, B: LatLng, C: LatLng, radius: number = 0.001): boolean => ( + C.lng <= Math.max(A.lng + radius, B.lng + radius) && + C.lat <= Math.max(A.lat + radius, B.lat + radius) && + C.lat >= Math.min(A.lat - radius, B.lat - radius) && + C.lng >= Math.min(A.lng - radius, B.lng - radius) ); @@ -80,6 +80,6 @@ const distToSegmentSquared = (A: LatLng, B: LatLng, C: LatLng): number => { }); }; -const distToSegment = (A: LatLng, B: LatLng, C: LatLng): number => Math.sqrt(distToSegmentSquared(A, B, C)); +export 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.01);