muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

cleanup

Browse source
This commit is contained in:
Fedor Katurov 2020-01-22 12:26:26 +07:00
parent 8e0a4c6df6
commit ba7a8f9d66
4 changed files with 4 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/map/Stickers/index.tsx
View file

@ -25,8 +25,6 @@ const Stickers: React.FC<IProps> = React.memo(
return () => MainMap.stickerLayer.removeLayer(item); return () => MainMap.stickerLayer.removeLayer(item);
}, [MainMap]); }, [MainMap]);
console.log(is_editing);
return ( return (
<div> <div>
{layer && {layer &&

5
src/styles/map.less
View file

@ -285,9 +285,10 @@
} }
.leaflet-div-icon { .leaflet-div-icon {
background: none; background: none !important;
border: none; border: none !important;
} }
.custom-marker-cluster { .custom-marker-cluster {
width: 24px; width: 24px;
height: 24px; height: 24px;

251
src/utils/map/ArrowsLayer.ts
View file

@ -81,250 +81,8 @@ class ArrowsLayer extends LayerGroup {
this.arrowLayer.addLayers(midpoints); 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; map: Map;
arrowLayer: MarkerClusterGroup = new MarkerClusterGroup({ arrowLayer = new MarkerClusterGroup({
spiderfyOnMaxZoom: false, spiderfyOnMaxZoom: false,
showCoverageOnHover: false, showCoverageOnHover: false,
zoomToBoundsOnClick: false, zoomToBoundsOnClick: false,
@ -333,13 +91,6 @@ class ArrowsLayer extends LayerGroup {
iconCreateFunction: arrowClusterIcon, iconCreateFunction: arrowClusterIcon,
}); });
// prevState: IPrevState = {
// route: [],
// markers: [],
// midpoints: [],
// // distances: [],
// };
layers: Marker<any>[] = []; layers: Marker<any>[] = [];
} }

2
src/utils/window.ts
View file

@ -5,8 +5,6 @@ export const isMobile = (): boolean => window.innerWidth <= MOBILE_BREAKPOINT;
export const getLocation = (callback: (pos: LatLngLiteral) => void) => { export const getLocation = (callback: (pos: LatLngLiteral) => void) => {
window.navigator.geolocation.getCurrentPosition(position => { window.navigator.geolocation.getCurrentPosition(position => {
console.log('getting pos');
if (!position || !position.coords || !position.coords.latitude || !position.coords.longitude) if (!position || !position.coords || !position.coords.latitude || !position.coords.longitude)
return callback(null); return callback(null);