Merge develop

UI/Popup/DeleteWizard.ts

@@ -3,7 +3,7 @@ import State from "../../State";
 import Toggle from "../Input/Toggle";
 import Translations from "../i18n/Translations";
 import Svg from "../../Svg";
-import DeleteAction from "../../Logic/Osm/DeleteAction";
+import DeleteAction from "../../Logic/Osm/Actions/DeleteAction";
 import {Tag} from "../../Logic/Tags/Tag";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import {TagsFilter} from "../../Logic/Tags/TagsFilter";
@@ -19,6 +19,7 @@ import {Changes} from "../../Logic/Osm/Changes";
 import {And} from "../../Logic/Tags/And";
 import Constants from "../../Models/Constants";
 import DeleteConfig from "../../Customizations/JSON/DeleteConfig";
+import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction";
 
 export default class DeleteWizard extends Toggle {
     /**
@@ -58,7 +59,9 @@ export default class DeleteWizard extends Toggle {
                 })
             }
             (State.state?.changes ?? new Changes())
-                .addTag(id, new And(tagsToApply.map(kv => new Tag(kv.k, kv.v))), tagsSource);
+                .applyAction(new ChangeTagAction(
+                   id, new And(tagsToApply.map(kv => new Tag(kv.k, kv.v))), tagsSource.data
+                ))
         }
 
         function doDelete(selected: TagsFilter) {

UI/Popup/FeatureInfoBox.ts

@@ -13,6 +13,7 @@ import SharedTagRenderings from "../../Customizations/SharedTagRenderings";
 import BaseUIElement from "../BaseUIElement";
 import {VariableUiElement} from "../Base/VariableUIElement";
 import DeleteWizard from "./DeleteWizard";
+import SplitRoadWizard from "./SplitRoadWizard";
 
 export default class FeatureInfoBox extends ScrollableFullScreen {
 
@@ -66,10 +67,6 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
             renderings.push(questionBox);
         }
 
-        const hasMinimap = layerConfig.tagRenderings.some(tr => tr.hasMinimap())
-        if (!hasMinimap) {
-            renderings.push(new TagRenderingAnswer(tags, SharedTagRenderings.SharedTagRendering.get("minimap")))
-        }
 
         if (layerConfig.deletion) {
             renderings.push(
@@ -81,6 +78,19 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
                 ))
         }
 
+        if (layerConfig.allowSplit) {
+            renderings.push(
+                new VariableUiElement(tags.map(tags => tags.id).map(id =>
+                    new SplitRoadWizard(id))
+                ))
+        }
+
+
+        const hasMinimap = layerConfig.tagRenderings.some(tr => tr.hasMinimap())
+        if (!hasMinimap) {
+            renderings.push(new TagRenderingAnswer(tags, SharedTagRenderings.SharedTagRendering.get("minimap")))
+        }
+
         renderings.push(
             new VariableUiElement(
                 State.state.osmConnection.userDetails

UI/Popup/SplitRoadWizard.ts

@@ -0,0 +1,155 @@
+import Toggle from "../Input/Toggle";
+import Svg from "../../Svg";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {SubtleButton} from "../Base/SubtleButton";
+import Minimap from "../Base/Minimap";
+import State from "../../State";
+import ShowDataLayer from "../ShowDataLayer";
+import {GeoOperations} from "../../Logic/GeoOperations";
+import {LeafletMouseEvent} from "leaflet";
+import Combine from "../Base/Combine";
+import {Button} from "../Base/Button";
+import Translations from "../i18n/Translations";
+import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
+import SplitAction from "../../Logic/Osm/Actions/SplitAction";
+import {OsmObject, OsmWay} from "../../Logic/Osm/OsmObject";
+import Title from "../Base/Title";
+
+export default class SplitRoadWizard extends Toggle {
+    private static splitLayout = new UIEventSource(SplitRoadWizard.GetSplitLayout())
+
+    /**
+     * A UI Element used for splitting roads
+     *
+     * @param id: The id of the road to remove
+     */
+    constructor(id: string) {
+
+        const t = Translations.t.split;
+
+        // 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 }[]>([]);
+
+        const hasBeenSplit = new UIEventSource(false)
+
+        // Toggle variable between show split button and map
+        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, allowMoving: false});
+        miniMap.SetStyle("width: 100%; height: 24rem;");
+
+        // Define how a cut is displayed on the map
+
+        // Load the road with given id on the minimap
+        const roadElement = State.state.allElements.ContainingFeatures.get(id)
+        const roadEventSource = new UIEventSource([{feature: roadElement, freshness: new Date()}]);
+        // Datalayer displaying the road and the cut points (if any)
+        new ShowDataLayer(roadEventSource, miniMap.leafletMap, State.state.layoutToUse, false, true, "splitRoadWay");
+        new ShowDataLayer(splitPoints, miniMap.leafletMap, SplitRoadWizard.splitLayout, false, false, "splitRoad: splitpoints")
+
+        /**
+         * Handles a click on the overleaf map.
+         * Finds the closest intersection with the road and adds a point there, ready to confirm the cut.
+         * @param coordinates Clicked location, [lon, lat]
+         */
+        function onMapClick(coordinates) {
+            // Get nearest point on the road
+            const pointOnRoad = GeoOperations.nearestPoint(roadElement, coordinates); // pointOnRoad is a geojson
+
+            // Update point properties to let it match the layer
+            pointOnRoad.properties._cutposition = "yes";
+            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);
+
+            // 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
+        miniMap.leafletMap.addCallbackAndRunD(
+            (leafletMap) => leafletMap.on("click", (mouseEvent: LeafletMouseEvent) => {
+                onMapClick([mouseEvent.latlng.lng, mouseEvent.latlng.lat])
+            }))
+
+        // Toggle between splitmap
+        const splitButton = new SubtleButton(Svg.scissors_ui(), t.inviteToSplit.Clone());
+        splitButton.onClick(
+            () => {
+                splitClicked.setData(true)
+            }
+        )
+
+        // Only show the splitButton if logged in, else show login prompt
+        const loginBtn = t.loginToSplit.Clone()
+            .onClick(() => State.state.osmConnection.AttemptLogin())
+            .SetClass("login-button-friendly");
+        const splitToggle = new Toggle(splitButton, loginBtn, State.state.osmConnection.isLoggedIn)
+
+        // Save button
+        const saveButton = new Button(t.split.Clone(), () => {
+            hasBeenSplit.setData(true)
+            const way = OsmObject.DownloadObject(id)
+            const partOfSrc = OsmObject.DownloadReferencingRelations(id);
+            let hasRun = false
+            way.map(way => {
+                const partOf = partOfSrc.data
+                if(way === undefined || partOf === undefined){
+                    return;
+                }
+                if(hasRun){
+                    return
+                }
+                hasRun = true
+                const splitAction = new SplitAction(
+                    <OsmWay>way, way.asGeoJson(), partOf, splitPoints.data.map(ff => ff.feature)
+                )
+                State.state.changes.applyAction(splitAction)
+                
+            }, [partOfSrc])
+
+
+        });
+        saveButton.SetClass("btn btn-primary mr-3");
+        const disabledSaveButton = new Button("Split", undefined);
+        disabledSaveButton.SetClass("btn btn-disabled mr-3");
+        // Only show the save button if there are split points defined
+        const saveToggle = new Toggle(disabledSaveButton, saveButton, splitPoints.map((data) => data.length === 0))
+
+        const cancelButton = Translations.t.general.cancel.Clone() // Not using Button() element to prevent full width button
+            .SetClass("btn btn-secondary mr-3")
+            .onClick(() => {
+                splitPoints.setData([]);
+                splitClicked.setData(false);
+            });
+
+        cancelButton.SetClass("btn btn-secondary block");
+
+        const splitTitle = new Title(t.splitTitle);
+
+        const mapView = new Combine([splitTitle, miniMap, new Combine([cancelButton, saveToggle]).SetClass("flex flex-row")]);
+        mapView.SetClass("question")
+        const confirm = new Toggle(mapView, splitToggle, splitClicked);
+        super(t.hasBeenSplit.Clone(), confirm, hasBeenSplit)
+    }
+
+    private static GetSplitLayout(): LayoutConfig {
+        return new LayoutConfig({
+            maintainer: "mapcomplete",
+            language: ["en"],
+            startLon: 0,
+            startLat: 0,
+            description: "Split points visualisations - built in at SplitRoadWizard.ts",
+            icon: "", startZoom: 0,
+            title: "Split locations",
+            version: "",
+
+            id: "splitpositions",
+            layers: [{id: "splitpositions", source: {osmTags: "_cutposition=yes"}, icon: "./assets/svg/plus.svg"}]
+        }, true, "(BUILTIN) SplitRoadWizard.ts")
+
+    }
+}

UI/Popup/TagRenderingQuestion.ts

@@ -25,6 +25,7 @@ import BaseUIElement from "../BaseUIElement";
 import {DropDown} from "../Input/DropDown";
 import {Unit} from "../../Customizations/JSON/Denomination";
 import InputElementWrapper from "../Input/InputElementWrapper";
+import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction";
 
 /**
  * Shows the question element.
@@ -56,7 +57,9 @@ export default class TagRenderingQuestion extends Combine {
             const selection = inputElement.GetValue().data;
             if (selection) {
                 (State.state?.changes ?? new Changes())
-                    .addTag(tags.data.id, selection, tags);
+                    .applyAction(new ChangeTagAction(
+                        tags.data.id, selection, tags.data
+                    ))
             }
 
             if (options.afterSave) {
@@ -195,9 +198,7 @@ export default class TagRenderingQuestion extends Combine {
                     oppositeTags.push(notSelected);
                 }
                 tags.push(TagUtils.FlattenMultiAnswer(oppositeTags));
-                const actualTags = TagUtils.FlattenMultiAnswer(tags);
-                console.log("Converted ", indices.join(","), "into", actualTags.asHumanString(false, false, {}), "with elems", elements)
-                return actualTags;
+                return TagUtils.FlattenMultiAnswer(tags);
             },
             (tags: TagsFilter) => {
                 // {key --> values[]}