Rework split-road flow, fix #1166, fix #1148

UI/Popup/SplitRoadWizard.ts

@@ -22,8 +22,10 @@ import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
 import { ElementStorage } from "../../Logic/ElementStorage"
 import BaseLayer from "../../Models/BaseLayer"
 import FilteredLayer from "../../Models/FilteredLayer"
+import BaseUIElement from "../BaseUIElement"
+import { VariableUiElement } from "../Base/VariableUIElement"
 
-export default class SplitRoadWizard extends Toggle {
+export default class SplitRoadWizard extends Combine {
     // @ts-ignore
     private static splitLayerStyling = new LayerConfig(
         split_point,
@@ -63,6 +65,106 @@ export default class SplitRoadWizard extends Toggle {
 
         // Toggle variable between show split button and map
         const splitClicked = new UIEventSource<boolean>(false)
+
+        const leafletMap = new UIEventSource<BaseUIElement>(
+            SplitRoadWizard.setupMapComponent(id, splitPoints, state)
+        )
+
+        // Toggle between splitmap
+        const splitButton = new SubtleButton(
+            Svg.scissors_ui().SetStyle("height: 1.5rem; width: auto"),
+            new Toggle(
+                t.splitAgain.Clone().SetClass("text-lg font-bold"),
+                t.inviteToSplit.Clone().SetClass("text-lg font-bold"),
+                hasBeenSplit
+            )
+        )
+        splitButton.onClick(() => {
+            splitClicked.setData(true)
+        })
+
+        // Only show the splitButton if logged in, else show login prompt
+        const loginBtn = t.loginToSplit
+            .Clone()
+            .onClick(() => state.osmConnection.AttemptLogin())
+            .SetClass("login-button-friendly")
+        const splitToggle = new Toggle(splitButton, loginBtn, state.osmConnection.isLoggedIn)
+
+        // Save button
+        const saveButton = new Button(t.split.Clone(), async () => {
+            hasBeenSplit.setData(true)
+            splitClicked.setData(false)
+            const splitAction = new SplitAction(
+                id,
+                splitPoints.data.map((ff) => ff.feature.geometry.coordinates),
+                {
+                    theme: state?.layoutToUse?.id,
+                },
+                5,
+                (coordinates) => {
+                    state.allElements.ContainingFeatures.get(id).geometry["coordinates"] =
+                        coordinates
+                }
+            )
+            await state.changes.applyAction(splitAction)
+            // We throw away the old map and splitpoints, and create a new map from scratch
+            splitPoints.setData([])
+            leafletMap.setData(SplitRoadWizard.setupMapComponent(id, splitPoints, state))
+        })
+
+        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,
+            new VariableUiElement(leafletMap),
+            new Combine([cancelButton, saveToggle]).SetClass("flex flex-row"),
+        ])
+        mapView.SetClass("question")
+        super([
+            Toggle.If(hasBeenSplit, () =>
+                t.hasBeenSplit.Clone().SetClass("font-bold thanks block w-full")
+            ),
+            new Toggle(mapView, splitToggle, splitClicked),
+        ])
+        this.dialogIsOpened = splitClicked
+    }
+
+    private static setupMapComponent(
+        id: string,
+        splitPoints: UIEventSource<{ feature: any; freshness: Date }[]>,
+        state: {
+            filteredLayers: UIEventSource<FilteredLayer[]>
+            backgroundLayer: UIEventSource<BaseLayer>
+            featureSwitchIsTesting: UIEventSource<boolean>
+            featureSwitchIsDebugging: UIEventSource<boolean>
+            featureSwitchShowAllQuestions: UIEventSource<boolean>
+            osmConnection: OsmConnection
+            featureSwitchUserbadge: UIEventSource<boolean>
+            changes: Changes
+            layoutToUse: LayoutConfig
+            allElements: ElementStorage
+        }
+    ): BaseUIElement {
         // Load the road with given id on the minimap
         const roadElement = state.allElements.ContainingFeatures.get(id)
 
@@ -96,7 +198,6 @@ export default class SplitRoadWizard extends Toggle {
             layerToShow: SplitRoadWizard.splitLayerStyling,
             state,
         })
-
         /**
          * Handles a click on the overleaf map.
          * Finds the closest intersection with the road and adds a point there, ready to confirm the cut.
@@ -137,67 +238,6 @@ export default class SplitRoadWizard extends Toggle {
                 onMapClick([mouseEvent.latlng.lng, mouseEvent.latlng.lat])
             })
         )
-
-        // Toggle between splitmap
-        const splitButton = new SubtleButton(
-            Svg.scissors_ui().SetStyle("height: 1.5rem; width: auto"),
-            t.inviteToSplit.Clone().SetClass("text-lg font-bold")
-        )
-        splitButton.onClick(() => {
-            splitClicked.setData(true)
-        })
-
-        // Only show the splitButton if logged in, else show login prompt
-        const loginBtn = t.loginToSplit
-            .Clone()
-            .onClick(() => state.osmConnection.AttemptLogin())
-            .SetClass("login-button-friendly")
-        const splitToggle = new Toggle(splitButton, loginBtn, state.osmConnection.isLoggedIn)
-
-        // Save button
-        const saveButton = new Button(t.split.Clone(), () => {
-            hasBeenSplit.setData(true)
-            state.changes.applyAction(
-                new SplitAction(
-                    id,
-                    splitPoints.data.map((ff) => ff.feature.geometry.coordinates),
-                    {
-                        theme: state?.layoutToUse?.id,
-                    }
-                )
-            )
-        })
-
-        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)
-        this.dialogIsOpened = splitClicked
+        return miniMap
     }
 }