From ba7a8f9d664edac7996cfb63dcab7c33084c75b9 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 22 Jan 2020 12:26:26 +0700 Subject: [PATCH] cleanup --- src/map/Stickers/index.tsx | 2 - src/styles/map.less | 5 +- src/utils/map/ArrowsLayer.ts | 251 +---------------------------------- src/utils/window.ts | 2 - 4 files changed, 4 insertions(+), 256 deletions(-) diff --git a/src/map/Stickers/index.tsx b/src/map/Stickers/index.tsx index df81d9e..93a9850 100644 --- a/src/map/Stickers/index.tsx +++ b/src/map/Stickers/index.tsx @@ -25,8 +25,6 @@ const Stickers: React.FC = React.memo( return () => MainMap.stickerLayer.removeLayer(item); }, [MainMap]); - console.log(is_editing); - return (
{layer && diff --git a/src/styles/map.less b/src/styles/map.less index 863fb43..5ba3646 100644 --- a/src/styles/map.less +++ b/src/styles/map.less @@ -285,9 +285,10 @@ } .leaflet-div-icon { - background: none; - border: none; + background: none !important; + border: none !important; } + .custom-marker-cluster { width: 24px; height: 24px; diff --git a/src/utils/map/ArrowsLayer.ts b/src/utils/map/ArrowsLayer.ts index cf9c58f..c62fb94 100644 --- a/src/utils/map/ArrowsLayer.ts +++ b/src/utils/map/ArrowsLayer.ts @@ -81,250 +81,8 @@ class ArrowsLayer extends LayerGroup { this.arrowLayer.addLayers(midpoints); }; - // Tries to detect if marker changed for every marker starting from changed_at - // setLatLngs = (route: LatLngLiteral[]): void => { - // if (!this.map) return; - - // // this.arrowLayer.clearLayers(); - - // if (route.length === 0) return; - - // console.time('total'); - - // const changed_at = this.getChangeIndex(this.prevState.route, route); - - // console.log('changed at:', changed_at); - // console.log('recalc:', route.length - changed_at); - - // const midpoints = this.prevState.midpoints.slice(0, changed_at - 1); - // const markers = this.prevState.markers.slice(0, changed_at - 1); - - // console.time('recalc'); - // for (let i = changed_at; i < route.length; i += 1) { - // const point = - // route[i + 1] && dist2(route[i], route[i + 1]) > 0.00005 - // ? { - // latlng: middleCoord(route[i], route[i + 1]), - // angle: angleBetweenPoints( - // this.map.latLngToContainerPoint(route[i]), - // this.map.latLngToContainerPoint(route[i + 1]) - // ), - // } - // : null; - - // if (this.prevState.markers[i] && !point) { - // // the marker is gone - // this.arrowLayer.removeLayer(this.prevState.markers[i]); - // markers.push(null); - // } - - // if (this.prevState.markers[i] && point) { - // // marker changed / created - // const is_same = - // this.prevState.markers[i] && - // this.prevState.midpoints[i] && - // this.prevState.midpoints[i].latlng.lat === point.latlng.lat && - // this.prevState.midpoints[i].latlng.lng === point.latlng.lng; - - // if (!is_same) { - // console.log('not same'); - // this.prevState.markers[i].setLatLng(point.latlng); - // this.prevState.markers[i].setIcon(createArrowIcon(point.angle)); - // } - - // markers.push(this.prevState.markers[i]); - // } - - // if (!this.prevState.markers[i] && point) { - // // new marker - // const marker = createArrow(point.latlng, point.angle); - // this.arrowLayer.addLayer(marker); - // markers.push(marker); - // } - - // midpoints.push(point); - // } - // console.timeEnd('recalc'); - - // this.prevState = { - // route, - // markers, - // midpoints, - // }; - - // console.timeEnd('total'); - // }; - - // Only creates from changed item to the end. Buggy when trying to delete and add points in the middle - // setLatLngs = (route: LatLngLiteral[]): void => { - // if (!this.map) return; - - // // this.arrowLayer.clearLayers(); - - // if (route.length === 0) return; - - // console.time('total'); - - // const changed_at = this.getChangeIndex(this.prevState.route, route); - - // console.log('changed at:', changed_at); - // console.log('recalc:', route.length - changed_at); - - // const midpoints = this.prevState.midpoints.slice(0, changed_at - 1); - // const markers = this.prevState.markers.slice(0, changed_at - 1); - - // console.time('recalc'); - // for (let i = changed_at; i < route.length; i += 1) { - // const point = - // route[i + 1] && dist2(route[i], route[i + 1]) > 0.00005 - // ? { - // latlng: middleCoord(route[i], route[i + 1]), - // angle: angleBetweenPoints( - // this.map.latLngToContainerPoint(route[i]), - // this.map.latLngToContainerPoint(route[i + 1]) - // ), - // } - // : null; - - // const marker = point ? createArrow(point.latlng, point.angle) : null; - - // midpoints.push(point); - // markers.push(marker); - // } - // console.timeEnd('recalc'); - - // console.time('remove'); - // this.arrowLayer.removeLayers( - // this.prevState.markers - // .slice(changed_at - 1, this.prevState.markers.length - 1) - // .filter(el => !!el) - // ); - // console.timeEnd('remove'); - - // this.prevState = { - // route, - // markers, - // midpoints, - // }; - - // console.time('add'); - // this.arrowLayer.addLayers(markers.filter(el => !!el)); - // console.timeEnd('add'); - // console.timeEnd('total'); - // }; - - // TODO: iterate through all the route and detect if marker created, changed or deleted. Skip getting changed_at - // TODO: try to figure why its not updated properly when you add / delete points in the middle - - // setLatLngs = (route: LatLngLiteral[]): void => { - // if (!this.map) return; - // if (route.length === 0) return; - - // const newState: IPrevState = { - // route, - // markers: [null], - // }; - - // for (let i = 1; i < route.length; i += 1) { - // const current = route[i]; - // const previous = route[i - 1]; - - // const is_new = !this.prevState.route[i]; - // const is_changed = - // this.prevState.route[i] && - // (this.prevState.route[i].lat !== current.lat || - // this.prevState.route[i].lng !== current.lng || - // this.prevState.route[i - 1].lng !== previous.lng || - // this.prevState.route[i - 1].lng !== previous.lng); - - // const need_to_add = dist2(route[i], route[i - 1]) > 0.00005; - - // if (is_new) { - // const marker = need_to_add - // ? createArrow( - // middleCoord(route[i], route[i - 1]), - // angleBetweenPoints( - // this.map.latLngToContainerPoint(route[i]), - // this.map.latLngToContainerPoint(route[i - 1]) - // ) - // ) - // : null; - - // console.log(i, marker ? 'new create' : 'new skip'); - - // if (marker) { - // this.arrowLayer.addLayer(marker); - // } - - // newState.markers.push(marker); - // continue; - // } - - // if (is_changed) { - // const middle = middleCoord(route[i], route[i - 1]); - // const angle = angleBetweenPoints( - // this.map.latLngToContainerPoint(route[i]), - // this.map.latLngToContainerPoint(route[i - 1]) - // ); - - // if (need_to_add && this.prevState.markers[i]) { - // console.log(i, 'change'); - - // this.prevState.markers[i].setLatLng(middle); - // this.prevState.markers[i].setIcon(createArrowIcon(angle)); - // newState.markers.push(this.prevState.markers[i]); - // continue; - // } - - // if (need_to_add && !this.prevState.markers[i]) { - // console.log(i, 'change create'); - - // const marker = createArrow(middle, angle); - // this.arrowLayer.addLayer(marker); - // newState.markers.push(marker); - // continue; - // } - - // if (!need_to_add && this.prevState.markers[i]) { - // console.log(i, 'change remove'); - - // this.arrowLayer.removeLayer(this.prevState.markers[i]); - // newState.markers.push(null); - // continue; - // } - - // if (!need_to_add && !this.prevState.markers[i]) { - // console.log(i, 'change skip'); - // newState.markers.push(null); - // continue; - // } - // } - - // if (!is_new && !is_changed) { - // console.log(i, 'not changed'); - - // newState.markers.push(this.prevState.markers[i]); - // } - // } - - // console.log('------', newState.markers); - - // if (newState.markers.length < this.prevState.markers.length) { - // this.arrowLayer.removeLayers( - // this.prevState.markers - // .slice( - // this.prevState.markers.length - newState.markers.length, - // this.prevState.markers.length - 1 - // ) - // .filter(el => !!el) - // ); - // } - - // this.prevState = newState; - // }; - map: Map; - arrowLayer: MarkerClusterGroup = new MarkerClusterGroup({ + arrowLayer = new MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false, @@ -333,13 +91,6 @@ class ArrowsLayer extends LayerGroup { iconCreateFunction: arrowClusterIcon, }); - // prevState: IPrevState = { - // route: [], - // markers: [], - // midpoints: [], - // // distances: [], - // }; - layers: Marker[] = []; } diff --git a/src/utils/window.ts b/src/utils/window.ts index c137ccf..aef72df 100644 --- a/src/utils/window.ts +++ b/src/utils/window.ts @@ -5,8 +5,6 @@ export const isMobile = (): boolean => window.innerWidth <= MOBILE_BREAKPOINT; export const getLocation = (callback: (pos: LatLngLiteral) => void) => { window.navigator.geolocation.getCurrentPosition(position => { - console.log('getting pos'); - if (!position || !position.coords || !position.coords.latitude || !position.coords.longitude) return callback(null);