midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Further work on the road splitting feature

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-07-15 00:26:25 +02:00
parent 9348a019d6
commit 1da3f8a332
9 changed files with 351 additions and 274 deletions
Download patch file Download diff file Expand all files Collapse all files

57
UI/Popup/SplitRoadWizard.ts
View file

@ -7,13 +7,15 @@ import State from "../../State";
import ShowDataLayer from "../ShowDataLayer";
import {GeoOperations} from "../../Logic/GeoOperations";
import {LeafletMouseEvent} from "leaflet";
import LayerConfig from "../../Customizations/JSON/LayerConfig";
import Combine from "../Base/Combine";
import {Button} from "../Base/Button";
import Translations from "../i18n/Translations";
import {splitRoad} from "../../Logic/Osm/SplitAction";
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
import SplitAction from "../../Logic/Osm/SplitAction";
export default class SplitRoadWizard extends Toggle {
private static splitLayout = new UIEventSource(SplitRoadWizard.GetSplitLayout())
/**
* A UI Element used for splitting roads
*
@ -23,25 +25,25 @@ export default class SplitRoadWizard extends Toggle {
const t = Translations.t.split;
// Contains the points on the road that are selected to split on
const splitPositions = new UIEventSource([]);
// Contains the points on the road that are selected to split on - contains geojson points with extra properties such as 'location' with the distance along the linestring
const splitPoints = new UIEventSource<{feature: any, freshness: Date}[]>([]);
// Toggle variable between show split button and map
const splitClicked = new UIEventSource<boolean>(true); // todo: -> false
const splitClicked = new UIEventSource<boolean>(false);
// Minimap on which you can select the points to be splitted
const miniMap = new Minimap({background: State.state.backgroundLayer});
miniMap.SetStyle("width: 100%; height: 50rem;");
// Define how a cut is displayed on the map
const layoutConfigJson = {id: "splitpositions", source: {osmTags: "_cutposition=yes"}, icon: "./assets/svg/plus.svg"}
State.state.layoutToUse.data.layers.push(new LayerConfig(layoutConfigJson,undefined,"Split Road Wizard"))
// Load the road with given id on the minimap
const roadElement = State.state.allElements.ContainingFeatures.get(id)
const splitAction = new SplitAction(roadElement)
const roadEventSource = new UIEventSource([{feature: roadElement, freshness: new Date()}]);
// Datalayer displaying the road and the cut points (if any)
const dataLayer = new ShowDataLayer(roadEventSource, miniMap.leafletMap, State.state.layoutToUse, false, true);
new ShowDataLayer(roadEventSource, miniMap.leafletMap, State.state.layoutToUse, false, true);
new ShowDataLayer(splitPoints, miniMap.leafletMap, SplitRoadWizard.splitLayout, false, false)
/**
* Handles a click on the overleaf map.
@ -54,17 +56,14 @@ export default class SplitRoadWizard extends Toggle {
// Update point properties to let it match the layer
pointOnRoad.properties._cutposition = "yes";
pointOnRoad._matching_layer_id = "splitpositions";
// Add it to the list of all points and notify observers
splitPositions.data.push(pointOnRoad);
splitPositions.ping();
pointOnRoad["_matching_layer_id"] = "splitpositions";
// let the state remember the point, to be able to retrieve it later by id
State.state.allElements.addOrGetElement(pointOnRoad);
roadEventSource.data.push({feature: pointOnRoad, freshness: new Date()}); // show the point on the data layer
roadEventSource.ping(); // not updated using .setData, so manually ping observers
// Add it to the list of all points and notify observers
splitPoints.data.push({feature: pointOnRoad, freshness: new Date()}); // show the point on the data layer
splitPoints.ping(); // not updated using .setData, so manually ping observers
}
// When clicked, pass clicked location coordinates to onMapClick function
@ -88,19 +87,16 @@ export default class SplitRoadWizard extends Toggle {
State.state.osmConnection.isLoggedIn)
// Save button
const saveButton = new Button("Split here", () => splitRoad(id, splitPositions.data));
const saveButton = new Button("Split here", () => splitAction.DoSplit(splitPoints.data));
saveButton.SetClass("block btn btn-primary");
const disabledSaveButton = new Button("Split here", undefined);
disabledSaveButton.SetClass("block btn btn-disabled");
// Only show the save button if there are split points defined
const saveToggle = new Toggle(disabledSaveButton, saveButton, splitPositions.map((data) => data.length === 0))
const saveToggle = new Toggle(disabledSaveButton, saveButton, splitPoints.map((data) => data.length === 0))
const cancelButton = new Button("Cancel", () => {
splitClicked.setData(false);
splitPositions.setData([]);
// Only keep showing the road, the cutpoints must be removed from the map
roadEventSource.setData([roadEventSource.data[0]])
splitPoints.setData([]);
});
cancelButton.SetClass("block btn btn-secondary");
@ -111,4 +107,21 @@ export default class SplitRoadWizard extends Toggle {
super(mapView, splitToggle, splitClicked);
}
private static GetSplitLayout(): LayoutConfig {
return new LayoutConfig({
maintainer: "mapcomplete",
language: [],
startLon: 0,
startLat: 0,
description: undefined,
icon: "", startZoom: 0,
title: "Split locations",
version: "",
id: "splitpositions",
layers: [{id: "splitpositions", source: {osmTags: "_cutposition=yes"}, icon: "./assets/svg/plus.svg"}]
}, true, "split road wizard layout")
}
}