Create and edit geometries | ArcGIS Maps SDK for Kotlin

View on GitHub

Sample viewer app

Use the Geometry Editor to create new point, multipoint, polyline, or polygon geometries or to edit existing geometries by interacting with a map view.

CreateAndEditGeometries

Use case

A field worker can mark features of interest on a map using an appropriate geometry. Features such as sample or observation locations, fences or pipelines, and building footprints can be digitized using point, multipoint, polyline, and polygon geometry types. Polyline and polygon geometries can be created and edited using a vertex-based creation and editing tool (i.e. vertex locations specified explicitly via tapping), or using a freehand tool.

How to use the sample

To create a new geometry, press the button appropriate for the geometry type you want to create (i.e. points, multipoints, polyline, or polygon) and interactively tap and drag on the map view to create the geometry.

To edit an existing geometry, tap the geometry to be edited in the map and then perform edits by tapping and dragging its elements.

When the whole geometry is selected, you can use the control handles to scale and rotate the geometry.

If creating or editing polyline or polygon geometries, choose the desired creation/editing tool (i.e. VertexTool, ReticleVertexTool, FreehandTool, or one of the available ShapeTools).

When using the ReticleVertexTool, you can move the map position of the reticle by dragging and zooming the map. Insert a vertex under the reticle by tapping on the map. Move a vertex by tapping when the reticle is located over a vertex, drag the map to move the position of the reticle, then tap a second time to place the vertex.

Use the control panel to undo or redo changes made to the geometry, delete a selected element, save the geometry, stop the editing session and discard any edits, and remove all geometries from the map.

How it works

Create a MapViewProxy for interacting with the composable MapView.
Create a GeometryEditor for creating and editing Geometrys.
Create VertexTool, ReticleVertexTool, FreehandTool, or ShapeTool objects to define how the user interacts with the view to create or edit geometries, and set the geometry editor tool using the geometryEditor.tool property.
Edit a tool’s InteractionConfiguration to set the GeometryEditorScaleMode to allow either uniform or stretch scale mode.
Create a MapView with MapView using MapView(mapViewProxy = MapViewProxy, geometryEditor = GeometryEditor, ...).
Start the GeometryEditor using GeometryEditor.start(GeometryType) to create a new geometry or GeometryEditor.start(Geometry) to edit an existing geometry.
- If using the Geometry Editor to edit an existing geometry, the geometry must be retrieved from the graphics overlay being used to visualize the geometry prior to calling the start method. To do this:
  - Use MapViewProxy.identifyGraphicsOverlays(...) to identify graphics at the location of a tap.
  - Find the desired IdentifyGraphicsOverlayResult in the list returned by MapViewProxy.identifyGraphicsOverlays(...).
  - Find the desired graphic in the IdentifyGraphicsOverlayResult.graphics list.
  - Access the geometry associated with the Graphic using Graphic.geometry - this will be used in the GeometryEditor.start(Geometry) method.
Check to see if undo and redo are possible during an editing session using GeometryEditor.canUndo and GeometryEditor.canRedo. If it’s possible, use GeometryEditor.undo() and GeometryEditor.redo().
Check whether the currently selected GeometryEditorElement can be deleted (GeometryEditor.selectedElement.canDelete). If the element can be deleted, delete using GeometryEditor.deleteSelectedElement.
Call GeometryEditor.stop() to finish the editing session. The GeometryEditor does not automatically handle the visualization of a geometry output from an editing session. This must be done manually by propagating the geometry returned by GeometryEditor.stop() into a Graphic added to a GraphicsOverlay.
- To create a new Graphic in the GraphicsOverlay:
  - Using Graphic(Geometry), create a new Graphic with the geometry returned by the GeometryEditor.stop() method.
  - Add the Graphic to the GraphicsOverlay’s list of Graphics (i.e. GraphicsOverlay.graphics.add(Graphic)).
- To update the geometry underlying an existing Graphic in the GraphicsOverlay:
  - Replace the existing Graphic’s Geometry property with the geometry returned by the GeometryEditor.stop().

Relevant API

Geometry
GeometryEditor
Graphic
GraphicsOverlay
MapView

Additional information

The sample opens with the ArcGIS Imagery basemap centered on the island of Inis Meáin (Aran Islands) in Ireland. Inis Meáin comprises a landscape of interlinked stone walls, roads, buildings, archaeological sites, and geological features, producing complex geometrical relationships.

This sample uses the GeoView-Compose Toolkit module to be able to implement a composable MapView.

Sample Code

MainActivity.kt

CreateAndEditGeometriesViewModel.kt

ButtonMenu.kt

CreateAndEditGeometriesScreen.kt

/* Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.createandeditgeometries

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme
import com.esri.arcgismaps.sample.createandeditgeometries.screens.CreateAndEditGeometriesScreen

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // authentication with an API key or named user is
        // required to access basemaps and other location services
        ArcGISEnvironment.apiKey = ApiKey.create(BuildConfig.ACCESS_TOKEN)

        enableEdgeToEdge()
        setContent {
            SampleAppTheme {
                CreateAndEditGeometriesApp()
            }
        }
    }

    @Composable
    private fun CreateAndEditGeometriesApp() {
        Surface(color = MaterialTheme.colorScheme.background) {
            CreateAndEditGeometriesScreen(
                sampleName = getString(R.string.create_and_edit_geometries_app_name)
            )
        }
    }
}

/* Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.createandeditgeometries.components

import android.app.Application
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.unit.dp
import androidx.lifecycle.AndroidViewModel
import androidx.lifecycle.viewModelScope
import com.arcgismaps.Color
import com.arcgismaps.geometry.Envelope
import com.arcgismaps.geometry.Geometry
import com.arcgismaps.geometry.GeometryType
import com.arcgismaps.geometry.Multipoint
import com.arcgismaps.geometry.Point
import com.arcgismaps.geometry.Polygon
import com.arcgismaps.geometry.Polyline
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.SimpleFillSymbol
import com.arcgismaps.mapping.symbology.SimpleFillSymbolStyle
import com.arcgismaps.mapping.symbology.SimpleLineSymbol
import com.arcgismaps.mapping.symbology.SimpleLineSymbolStyle
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.mapping.view.SingleTapConfirmedEvent
import com.arcgismaps.mapping.view.geometryeditor.FreehandTool
import com.arcgismaps.mapping.view.geometryeditor.GeometryEditor
import com.arcgismaps.mapping.view.geometryeditor.GeometryEditorScaleMode
import com.arcgismaps.mapping.view.geometryeditor.ReticleVertexTool
import com.arcgismaps.mapping.view.geometryeditor.ShapeTool
import com.arcgismaps.mapping.view.geometryeditor.ShapeToolType
import com.arcgismaps.mapping.view.geometryeditor.VertexTool
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.launch

class CreateAndEditGeometriesViewModel(application: Application) : AndroidViewModel(application) {
    // create a map with the imagery basemap style
    val arcGISMap by mutableStateOf(
        ArcGISMap(BasemapStyle.ArcGISImagery).apply {
            // a viewpoint centered at the island of Inis Meáin (Aran Islands) in Ireland
            initialViewpoint = Viewpoint(
                latitude = 53.08275,
                longitude = -9.5933,
                scale = 5000.0
            )
        }
    )

    // create a message dialog view model for handling error messages
    val messageDialogVM = MessageDialogViewModel()

    // create a MapViewProxy that will be used to identify features in the MapView and set the viewpoint
    val mapViewProxy = MapViewProxy()

    // create a graphic to hold graphics identified on tap
    private var identifiedGraphic = Graphic()
    // create a graphics overlay
    val graphicsOverlay = GraphicsOverlay()
    // create a geometry editor
    val geometryEditor = GeometryEditor()

    /**
     * Enum of GeometryEditorTool types.
     */
    enum class ToolType {
        Vertex,
        ReticleVertex,
        Freehand,
        Arrow,
        Ellipse,
        Rectangle,
        Triangle
    }

    /**
     * Enum of GeometryEditorScaleMode types.
     */
    enum class ScaleOption {
        Stretch,
        Uniform
    }

    private val vertexTool = VertexTool()
    private val reticleVertexTool = ReticleVertexTool()
    private val freehandTool = FreehandTool()
    private val arrowTool = ShapeTool(ShapeToolType.Arrow)
    private val ellipseTool = ShapeTool(ShapeToolType.Ellipse)
    private val rectangleTool = ShapeTool(ShapeToolType.Rectangle)
    private val triangleTool = ShapeTool(ShapeToolType.Triangle)

    private val _selectedTool = MutableStateFlow(ToolType.Vertex)
    val selectedTool = _selectedTool.asStateFlow()

    private val _currentGeometryType = MutableStateFlow<GeometryType>(GeometryType.Unknown)
    val currentGeometryType = _currentGeometryType.asStateFlow()

    private val _currentScaleOption = MutableStateFlow(ScaleOption.Stretch)
    val currentScaleOption = _currentScaleOption.asStateFlow()

    // create symbols for displaying new geometries
    private val pointSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Square,
        color = Color.red,
        size = 10f
    )
    private val multiPointSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Circle,
        color = Color.yellow,
        size = 5f
    )
    private val polylineSymbol =  SimpleLineSymbol(
        style = SimpleLineSymbolStyle.Solid,
        color = Color.blue,
        width = 2f
    )
    private val polygonLineSymbol = SimpleLineSymbol(
        style = SimpleLineSymbolStyle.Dash,
        color = Color.black,
        width = 1f
    )
    private val polygonSymbol = SimpleFillSymbol(
        style = SimpleFillSymbolStyle.Solid,
        color = Color.fromRgba(r = 255, g = 0, b = 0, a = 100),
        outline = polygonLineSymbol
    )

    init {
        viewModelScope.launch {
            // load the map
            arcGISMap.load().onFailure { error ->
                messageDialogVM.showMessageDialog(
                    title = "Failed to load map",
                    description = error.message.toString()
                )
            }.onSuccess {
                // create graphics for the initial geometries and add them to the graphics overlay
                graphicsOverlay.graphics.addAll(
                    listOf(
                        Graphic(
                            geometry = Geometry.fromJsonOrNull(houseCoordinatesJson),
                            symbol = pointSymbol
                        ),
                        Graphic(
                            geometry = Geometry.fromJsonOrNull(outbuildingCoordinatesJson),
                            symbol = multiPointSymbol
                        ),
                        Graphic(
                            geometry = Geometry.fromJsonOrNull(road1CoordinatesJson),
                            symbol = polylineSymbol
                        ),
                        Graphic(
                            geometry = Geometry.fromJsonOrNull(road2CoordinatesJson),
                            symbol = polylineSymbol
                        ),
                        Graphic(
                            geometry = Geometry.fromJsonOrNull(boundaryCoordinatesJson),
                            symbol = polygonSymbol
                        )
                    )
                )
            }
        }
    }

    /**
     * Starts the GeometryEditor using the selected [GeometryType].
     */
    fun startEditor(selectedGeometry: GeometryType) {
        if (!geometryEditor.isStarted.value) {
            geometryEditor.start(selectedGeometry)
            _currentGeometryType.value = selectedGeometry
            if (selectedGeometry == GeometryType.Point || selectedGeometry == GeometryType.Multipoint) {
                // default to vertex tool for point or multipoint
                changeTool(ToolType.Vertex)
            }
        }
    }

    /**
     * Stops the GeometryEditor and updates the identified graphic or calls [createGraphic].
     */
    fun stopEditor() {
        // check if there was a previously identified graphic
        if (identifiedGraphic.geometry != null) {
            // update the identified graphic
            identifiedGraphic.geometry = geometryEditor.stop()
            // deselect the identified graphic
            identifiedGraphic.isSelected = false
        } else if (geometryEditor.isStarted.value) {
            // create a graphic from the geometry that was being edited
            createGraphic()
        }
        _currentGeometryType.value = GeometryType.Unknown
    }

    /**
     * Undoes all edits made using the GeometryEditor then calls [stopEditor].
     */
    fun discardEdits() {
        while (geometryEditor.canUndo.value) {
            geometryEditor.undo()
        }
        stopEditor()
    }

    /**
     * Deletes the selected element.
     */
    fun deleteSelectedElement() {
        if (geometryEditor.selectedElement.value != null) {
            geometryEditor.deleteSelectedElement()
        }
    }

    /**
     * Deletes all the geometries on the map.
     */
    fun deleteAllGeometries() {
        graphicsOverlay.graphics.clear()
    }

    /**
     * Undoes the last event on the geometry editor if possible.
     */
    fun undoEdit() {
        if (geometryEditor.canUndo.value) {
            geometryEditor.undo()
        }
    }

    /**
     * Redoes the last event on the geometry editor if possible.
     */
    fun redoEdit() {
        if (geometryEditor.canRedo.value) {
            geometryEditor.redo()
        }
    }

    /**
     * Changes the tool type of the geometry editor to the specified tool.
     */
    fun changeTool(toolType: ToolType) {
        when (toolType) {
            ToolType.Vertex -> geometryEditor.tool = vertexTool
            ToolType.ReticleVertex -> geometryEditor.tool = reticleVertexTool
            ToolType.Freehand -> geometryEditor.tool = freehandTool
            ToolType.Arrow -> geometryEditor.tool = arrowTool
            ToolType.Ellipse -> geometryEditor.tool = ellipseTool
            ToolType.Rectangle -> geometryEditor.tool = rectangleTool
            ToolType.Triangle -> geometryEditor.tool = triangleTool
        }

        // enable snapping and haptic feedback on snapping for reticle tool only
        val enableSnappingAndHaptics = (toolType == ToolType.ReticleVertex)
        geometryEditor.snapSettings.isEnabled = enableSnappingAndHaptics
        geometryEditor.snapSettings.isHapticFeedbackEnabled = enableSnappingAndHaptics
        geometryEditor.snapSettings.sourceSettings.forEach {
            it.isEnabled = enableSnappingAndHaptics
        }

        _selectedTool.value = toolType
    }

    /**
     * Changes the scale option of the current geometry editor tool to the specified scale option.
     */
    fun changeScaleOption(scaleOption: ScaleOption) {
        val newScaleOption =
            when (scaleOption) {
                ScaleOption.Stretch -> GeometryEditorScaleMode.Stretch
                ScaleOption.Uniform -> GeometryEditorScaleMode.Uniform
            }

        // update the scale option setting in the configurations of the tools that support it
        vertexTool.configuration.scaleMode = newScaleOption
        freehandTool.configuration.scaleMode = newScaleOption
        arrowTool.configuration.scaleMode = newScaleOption
        ellipseTool.configuration.scaleMode = newScaleOption
        rectangleTool.configuration.scaleMode = newScaleOption
        triangleTool.configuration.scaleMode = newScaleOption

        _currentScaleOption.value = scaleOption
    }

    /**
     * Creates a graphic from the geometry and adds it to the GraphicsOverlay.
     */
    private fun createGraphic() {
        // stop the geometry editor and get its final geometry state
        val geometry = geometryEditor.stop()
            ?: return messageDialogVM.showMessageDialog(
                title = "Error!",
                description = "Error stopping editing session"
            )

        // create a graphic to represent the new geometry
        val graphic = Graphic(geometry)

        // give the graphic an appropriate fill based on the geometry type
        when (geometry) {
            is Point -> graphic.symbol = pointSymbol
            is Multipoint -> graphic.symbol = multiPointSymbol
            is Polyline -> graphic.symbol = polylineSymbol
            is Polygon -> graphic.symbol = polygonSymbol
            else -> {}
        }
        // add the graphic to the graphics overlay
        graphicsOverlay.graphics.add(graphic)
        // deselect the graphic
        graphic.isSelected = false
    }

    /**
     * Identifies the graphic at the tapped screen coordinate in the provided [singleTapConfirmedEvent]
     * and starts the GeometryEditor using the identified graphic's geometry. Hide the BottomSheet on
     * [singleTapConfirmedEvent].
     */
    fun identify(singleTapConfirmedEvent: SingleTapConfirmedEvent) {
        viewModelScope.launch {
            // attempt to identify a graphic at the location the user tapped
            val graphicsResult = mapViewProxy.identifyGraphicsOverlays(
                screenCoordinate = singleTapConfirmedEvent.screenCoordinate,
                tolerance = 10.0.dp,
                returnPopupsOnly = false
            ).getOrNull()

            if (!geometryEditor.isStarted.value) {
                if (graphicsResult != null) {
                    if (graphicsResult.isNotEmpty()) {
                        // get the tapped graphic
                        identifiedGraphic = graphicsResult.first().graphics.first()
                        // select the graphic
                        identifiedGraphic.isSelected = true
                        // start the geometry editor with the identified graphic
                        identifiedGraphic.geometry?.let {
                            geometryEditor.start(it)
                            when (it) {
                                is Envelope -> _currentGeometryType.value = GeometryType.Envelope
                                is Polygon -> _currentGeometryType.value = GeometryType.Polygon
                                is Polyline -> _currentGeometryType.value = GeometryType.Polyline
                                is Multipoint -> _currentGeometryType.value = GeometryType.Multipoint
                                is Point -> _currentGeometryType.value = GeometryType.Point
                            }
                        }
                    }
                }
                // reset the identified graphic back to null
                identifiedGraphic.geometry = null
            }
        }
    }

    // json formatted strings for initial geometries
    private val houseCoordinatesJson = """{"x": -1067898.59, "y": 6998366.62,
    "spatialReference": {"latestWkid":3857, "wkid":102100}}"""

    private val outbuildingCoordinatesJson = """{"points":[[-1067984.26,6998346.28],[-1067966.80,6998244.84],
            [-1067921.88,6998284.65],[-1067934.36,6998340.74],
            [-1067917.93,6998373.97],[-1067828.30,6998355.28],
            [-1067832.25,6998339.70],[-1067823.10,6998336.93],
            [-1067873.22,6998386.78],[-1067896.72,6998244.49]],
            "spatialReference":{"latestWkid":3857,"wkid":102100}}"""

    private val road1CoordinatesJson = """{"paths":[[[-1068095.40,6998123.52],[-1068086.16,6998134.60],
            [-1068083.20,6998160.44],[-1068104.27,6998205.37],
            [-1068070.63,6998255.22],[-1068014.44,6998291.54],
            [-1067952.33,6998351.85],[-1067927.93,6998386.93],
            [-1067907.97,6998396.78],[-1067889.86,6998406.63],
            [-1067848.08,6998495.26],[-1067832.92,6998521.11]]],
            "spatialReference":{"latestWkid":3857,"wkid":102100}}"""

    private val road2CoordinatesJson = """{"paths":[[[-1067999.28,6998061.97],[-1067994.48,6998086.59],
            [-1067964.53,6998125.37],[-1067952.70,6998215.84],
            [-1067923.13,6998347.54],[-1067903.90,6998391.86],
            [-1067895.40,6998422.02],[-1067891.70,6998460.18],
            [-1067889.49,6998483.56],[-1067880.98,6998527.26]]],
            "spatialReference":{"latestWkid":3857,"wkid":102100}}"""

    private val boundaryCoordinatesJson = """{ "rings": [[[-1067943.67,6998403.86],[-1067938.17,6998427.60],
            [-1067898.77,6998415.86],[-1067888.26,6998398.80],
            [-1067800.85,6998372.93],[-1067799.61,6998342.81],
            [-1067809.38,6998330.00],[-1067817.07,6998307.85],
            [-1067838.07,6998285.34],[-1067849.10,6998250.38],
            [-1067874.02,6998256.00],[-1067879.87,6998235.95],
            [-1067913.41,6998245.03],[-1067934.84,6998291.34],
            [-1067948.41,6998251.90],[-1067961.18,6998186.68],
            [-1068008.59,6998199.49],[-1068052.89,6998225.45],
            [-1068039.37,6998261.11],[-1068064.12,6998265.26],
            [-1068043.32,6998299.88],[-1068036.25,6998327.93],
            [-1068004.43,6998409.28],[-1067943.67,6998403.86]]],
            "spatialReference":{"latestWkid":3857,"wkid":102100}}"""

    /**
     * Define a blue color for polylines.
     */
    private val Color.Companion.blue: Color
        get() {
            return fromRgba(0, 0, 255, 255)
        }

}

/* Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.createandeditgeometries.screens

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Build
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Clear
import androidx.compose.material.icons.filled.Create
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.arcgismaps.geometry.GeometryType
import com.esri.arcgismaps.sample.createandeditgeometries.R
import com.esri.arcgismaps.sample.createandeditgeometries.components.CreateAndEditGeometriesViewModel

/**
 * Composable component to display the menu buttons.
 */
@Composable
fun ButtonMenu(
    isGeometryEditorStarted: Boolean,
    canGeometryEditorUndo: Boolean,
    canGeometryEditorRedo: Boolean,
    canDeleteSelectedElement: Boolean,
    onStartEditingButtonClick: (GeometryType) -> Unit,
    onStopEditingButtonClick: () -> Unit,
    onDiscardEditsButtonClick: () -> Unit,
    onDeleteSelectedElementButtonClick: () -> Unit,
    onDeleteAllGeometriesButtonClick: () -> Unit,
    onUndoButtonClick: () -> Unit,
    onRedoButtonClick: () -> Unit,
    onToolChange: (CreateAndEditGeometriesViewModel.ToolType) -> Unit,
    selectedTool: CreateAndEditGeometriesViewModel.ToolType,
    onScaleOptionChange: (CreateAndEditGeometriesViewModel.ScaleOption) -> Unit,
    selectedScaleOption: CreateAndEditGeometriesViewModel.ScaleOption,
    currentGeometryType: GeometryType
) {
    val rowModifier = Modifier
        .padding(12.dp)
        .fillMaxWidth()

    Row(
        modifier = rowModifier
    ) {
        val vector = ImageVector
        var drawMenuExpanded by remember { mutableStateOf(false) }
        var deleteMenuExpanded by remember { mutableStateOf(false) }
        var toolMenuExpanded by remember { mutableStateOf(false) }
        var scaleOptionsMenuExpanded by remember { mutableStateOf(false) }
        val canChangeTool =
            (currentGeometryType == GeometryType.Polyline || currentGeometryType == GeometryType.Polygon)
        Box {
            IconButton(
                enabled = !isGeometryEditorStarted,
                onClick = { drawMenuExpanded = !drawMenuExpanded }
            ) {
                Icon(imageVector = Icons.Default.Create, contentDescription = "Start")
            }
            DropdownMenu(
                expanded = drawMenuExpanded,
                onDismissRequest = { drawMenuExpanded = false }
            ) {
                DropdownMenuItem(
                    text = { Text("Point") },
                    onClick = {
                        onStartEditingButtonClick(GeometryType.Point)
                        drawMenuExpanded = false
                    }
                )
                DropdownMenuItem(
                    text = { Text("Multipoint") },
                    onClick = {
                        onStartEditingButtonClick(GeometryType.Multipoint)
                        drawMenuExpanded = false
                    }
                )
                DropdownMenuItem(
                    text = { Text("Polyline") },
                    onClick = {
                        onStartEditingButtonClick(GeometryType.Polyline)
                        drawMenuExpanded = false
                    }
                )
                DropdownMenuItem(
                    text = { Text("Polygon") },
                    onClick = {
                        onStartEditingButtonClick(GeometryType.Polygon)
                        drawMenuExpanded = false
                    }
                )
            }
        }
        IconButton(
            enabled = canGeometryEditorUndo,
            onClick = { onUndoButtonClick() }
        ) {
            Icon(
                imageVector = vector.vectorResource(R.drawable.undo_24),
                contentDescription = "Undo"
            )
        }
        IconButton(
            enabled = canGeometryEditorRedo,
            onClick = { onRedoButtonClick() }
        ) {
            Icon(
                imageVector = vector.vectorResource(R.drawable.redo_24),
                contentDescription = "Redo"
            )
        }
        Box {
            IconButton(
                onClick = { deleteMenuExpanded = !deleteMenuExpanded }
            ) {
                Icon(imageVector = Icons.Filled.Delete, contentDescription = "Delete Geometry Menu")
            }
            DropdownMenu(
                expanded = deleteMenuExpanded,
                onDismissRequest = { deleteMenuExpanded = false }
            ) {
                DropdownMenuItem(
                    text = { Text("Delete Selected Element") },
                    enabled = canDeleteSelectedElement,
                    onClick = {
                        onDeleteSelectedElementButtonClick()
                        deleteMenuExpanded = false
                    }
                )
                DropdownMenuItem(
                    enabled = !isGeometryEditorStarted,
                    text = { Text("Delete All Geometries") },
                    onClick = {
                        onDeleteAllGeometriesButtonClick()
                        deleteMenuExpanded = false
                    }
                )
            }
        }
        Box {
            val toolTypeItems = remember { CreateAndEditGeometriesViewModel.ToolType.entries }
            IconButton(
                enabled = canChangeTool,
                onClick = { toolMenuExpanded = !toolMenuExpanded }
            ) {
                Icon(imageVector = Icons.Filled.Build, contentDescription = "Change Tool Type")
            }
            DropdownMenu(
                expanded = toolMenuExpanded,
                onDismissRequest = { toolMenuExpanded = false }
            ) {
                toolTypeItems.forEach {
                    DropdownMenuItem(
                        onClick = {
                            onToolChange(it)
                            // dismiss the dropdown when any item is selected
                            toolMenuExpanded = false
                        },
                        text = {
                            Text(
                                text = it.name,
                                fontWeight =
                                if (selectedTool == it) {
                                    FontWeight.Bold
                                } else {
                                    FontWeight.Normal
                                }
                            )
                        }
                    )
                }
            }
        }
        Box {
            val scaleOptionItems = remember { CreateAndEditGeometriesViewModel.ScaleOption.entries }
            IconButton(
                onClick = { scaleOptionsMenuExpanded = !scaleOptionsMenuExpanded }
            ) {
                Icon(imageVector = vector.vectorResource(R.drawable.vertex_move_24), contentDescription = "Change Scale Options")
            }
            DropdownMenu(
                expanded = scaleOptionsMenuExpanded,
                onDismissRequest = { scaleOptionsMenuExpanded = false }
            ) {
                scaleOptionItems.forEach {
                    DropdownMenuItem(
                        onClick = {
                            onScaleOptionChange(it)
                            // dismiss the dropdown when any item is selected
                            scaleOptionsMenuExpanded = false
                        },
                        text = {
                            Text(
                                text = it.name,
                                fontWeight =
                                if (selectedScaleOption == it) {
                                    FontWeight.Bold
                                } else {
                                    FontWeight.Normal
                                }
                            )
                        }
                    )
                }
            }
        }
        IconButton(
            enabled = isGeometryEditorStarted,
            onClick = { onStopEditingButtonClick() }
        ) {
            Icon(imageVector = Icons.Default.Check, contentDescription = "Save Edits")
        }
        IconButton(
            enabled = isGeometryEditorStarted,
            onClick = { onDiscardEditsButtonClick() }
        ) {
            Icon(imageVector = Icons.Default.Clear, contentDescription = "Discard Edits")
        }
    }
}

/* Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.createandeditgeometries.screens

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.esri.arcgismaps.sample.createandeditgeometries.components.CreateAndEditGeometriesViewModel
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialog
import com.esri.arcgismaps.sample.sampleslib.components.SampleTopAppBar

/**
 * Main screen layout for the sample app
 */
@Composable
fun CreateAndEditGeometriesScreen(sampleName: String) {
    // create a ViewModel to handle MapView interactions
    val mapViewModel: CreateAndEditGeometriesViewModel = viewModel()
    val selectedElement = mapViewModel.geometryEditor.selectedElement.collectAsStateWithLifecycle().value
    val canDeleteSelectedElement =
        when (selectedElement) {
            null -> false
            else -> selectedElement.canDelete
        }
    Scaffold(
        topBar = { SampleTopAppBar(title = sampleName) },
        content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(it),
            ) {
                MapView(
                    modifier = Modifier
                        .fillMaxSize()
                        .weight(1f),
                    arcGISMap = mapViewModel.arcGISMap,
                    mapViewProxy = mapViewModel.mapViewProxy,
                    geometryEditor = mapViewModel.geometryEditor,
                    graphicsOverlays = listOf(mapViewModel.graphicsOverlay),
                    onSingleTapConfirmed = mapViewModel::identify,
                )
                ButtonMenu(
                    isGeometryEditorStarted = mapViewModel.geometryEditor.isStarted.collectAsStateWithLifecycle().value,
                    canGeometryEditorUndo = mapViewModel.geometryEditor.canUndo.collectAsStateWithLifecycle().value,
                    canGeometryEditorRedo = mapViewModel.geometryEditor.canRedo.collectAsStateWithLifecycle().value,
                    canDeleteSelectedElement = canDeleteSelectedElement,
                    onStartEditingButtonClick = mapViewModel::startEditor,
                    onStopEditingButtonClick = mapViewModel::stopEditor,
                    onDiscardEditsButtonClick = mapViewModel::discardEdits,
                    onDeleteSelectedElementButtonClick = mapViewModel::deleteSelectedElement,
                    onDeleteAllGeometriesButtonClick = mapViewModel::deleteAllGeometries,
                    onUndoButtonClick = mapViewModel::undoEdit,
                    onRedoButtonClick = mapViewModel::redoEdit,
                    onToolChange = mapViewModel::changeTool,
                    selectedTool = mapViewModel.selectedTool.collectAsStateWithLifecycle().value,
                    onScaleOptionChange = mapViewModel::changeScaleOption,
                    selectedScaleOption = mapViewModel.currentScaleOption.collectAsStateWithLifecycle().value,
                    currentGeometryType = mapViewModel.currentGeometryType.collectAsStateWithLifecycle().value
                )
                mapViewModel.messageDialogVM.apply {
                    if (dialogStatus) {
                        MessageDialog(
                            title = messageTitle,
                            description = messageDescription,
                            onDismissRequest = ::dismissDialog
                        )
                    }
                }
            }
        }
    )
}