Update create and edit geometries sample with scale/rotate/shapes (#797)

Updates the CreateAndEditGeometries sample with the new functionality for the upcoming release.
Includes rotation/scaling of existing geometries, as well as use of the ShapeTool to create polylines/polygons of various shapes

Author: Jonathan Lavi

geometry/create-and-edit-geometries/CreateAndEditGeometries.png

@@ -10,7 +10,13 @@ A field worker can mark features of interest on a map using an appropriate geome
 
 ## 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 to select it and then edit the geometry by tapping and dragging elements of the geometry. If creating or editing polyline or polygon geometries, choose the desired creation/editing tool (i.e. `VertexTool` or `FreehandTool`).
+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 to select it and then edit the geometry by tapping and dragging elements of the geometry.
+
+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 from the combo box.
 
 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.
 
@@ -24,10 +30,11 @@ Use the control panel to undo or redo changes made to the geometry, delete a sel
         * Find the desired graphic in the `result.getGraphics()` list.
         * Access the geometry associated with the `Graphic` using `graphic.getGeometry()` - this will be used in the `geometryEditor.start(Geometry)` method.
 
-3. Create `VertexTool` or `FreehandTool` objects which define how the user interacts with the view to create or edit geometries, using `geometryEditor.setTool(geometryEditorTool)`.
-4. Check to see if undo and redo are possible during an editing session using `GeometryEditor.getCanUndo()` and `GeometryEditor.getCanRedo()`. If it's possible, use `GeometryEditor.undo()` and `GeometryEditor.redo()`.
-5. Check whether the currently selected `GeometryEditorElement` can be deleted (`GeometryEditor.getSelectedElement().getCanDelete()`). If the element can be deleted, delete using `GeometryEditor.deleteSelectedElement()`.
-6. 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` and a `GraphicsOverlay`.
+3. Create `VertexTool`, `FreehandTool`, or `ShapeTool` objects which define how the user interacts with the view to create or edit geometries, using `geometryEditor.setTool(geometryEditorTool)`.
+4. Edit a tool's `InteractionConfiguration` to set the `GeometryEditorScaleMode` to allow either uniform or stretch scale mode.
+5. Check to see if undo and redo are possible during an editing session using `GeometryEditor.getCanUndo()` and `GeometryEditor.getCanRedo()`. If it's possible, use `GeometryEditor.undo()` and `GeometryEditor.redo()`.
+6. Check whether the currently selected `GeometryEditorElement` can be deleted (`GeometryEditor.getSelectedElement().getCanDelete()`). If the element can be deleted, delete using `GeometryEditor.deleteSelectedElement()`.
+7. 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` and 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.
         * Append the `Graphic` to the `GraphicsOverlay`'s `GraphicListModel` (i.e. `GraphicsOverlay.getGraphics().add(Graphic)`).

geometry/create-and-edit-geometries/README.md

@@ -34,7 +34,10 @@
 import com.esri.arcgisruntime.mapping.view.geometryeditor.FreehandTool;
 import com.esri.arcgisruntime.mapping.view.geometryeditor.GeometryEditor;
 import com.esri.arcgisruntime.mapping.view.geometryeditor.GeometryEditorTool;
+import com.esri.arcgisruntime.mapping.view.geometryeditor.ShapeTool;
+import com.esri.arcgisruntime.mapping.view.geometryeditor.ShapeToolType;
 import com.esri.arcgisruntime.mapping.view.geometryeditor.VertexTool;
+import com.esri.arcgisruntime.mapping.view.geometryeditor.GeometryEditorScaleMode;
 import com.esri.arcgisruntime.symbology.SimpleFillSymbol;
 import com.esri.arcgisruntime.symbology.SimpleLineSymbol;
 import com.esri.arcgisruntime.symbology.SimpleMarkerSymbol;
@@ -45,6 +48,7 @@
 import javafx.scene.control.Alert;
 import javafx.scene.control.Button;
 import javafx.scene.control.ComboBox;
+import javafx.scene.control.CheckBox;
 import javafx.scene.input.MouseButton;
 import javafx.scene.paint.Color;
 import javafx.util.StringConverter;
@@ -60,6 +64,7 @@ public class CreateAndEditGeometriesController {
   @FXML private Button multipointButton;
   @FXML private Button polylineButton;
   @FXML private Button polygonButton;
+  @FXML private CheckBox scaleModeUniformCheckBox;
   @FXML private Button redoButton;
   @FXML private Button undoButton;
   @FXML private Button deleteSelectedElementButton;
@@ -71,6 +76,10 @@ public class CreateAndEditGeometriesController {
   private GeometryEditor geometryEditor;
   private VertexTool vertexTool;
   private FreehandTool freehandTool;
+  private ShapeTool arrowShapeTool;
+  private ShapeTool ellipseShapeTool;
+  private ShapeTool rectangleShapeTool;
+  private ShapeTool triangleShapeTool;
   private GraphicsOverlay graphicsOverlay;
   private Graphic selectedGraphic;
   private SimpleFillSymbol fillSymbol;
@@ -101,14 +110,40 @@ public void initialize() {
     geometryEditor = new GeometryEditor();
     mapView.setGeometryEditor(geometryEditor);
 
-    // create vertex and freehand tools for the geometry editor and add to combo box
+    // create vertex, freehand, and shape tools for the geometry editor and add to combo box
     vertexTool = new VertexTool();
     freehandTool = new FreehandTool();
+    arrowShapeTool = ShapeTool.create(ShapeToolType.ARROW);
+    ellipseShapeTool = ShapeTool.create(ShapeToolType.ELLIPSE);
+    rectangleShapeTool = ShapeTool.create(ShapeToolType.RECTANGLE);
+    triangleShapeTool = ShapeTool.create(ShapeToolType.TRIANGLE);
     toolComboBox.setConverter(new ComboBoxStringConverter());
-    toolComboBox.getItems().addAll(vertexTool, freehandTool);
+    toolComboBox.getItems().addAll(vertexTool, freehandTool, arrowShapeTool, ellipseShapeTool, rectangleShapeTool, triangleShapeTool);
+    // initially configure the geometry editor with the vertex tool
+    geometryEditor.setTool(vertexTool);
     // bidirectionally bind the geometry editor tool to the tool selected in the combo box
     toolComboBox.valueProperty().bindBidirectional(geometryEditor.toolProperty());
 
+    // bind the tool's scale mode property to the 'selected' property of the checkbox
+    toolComboBox.getItems().forEach(tool -> {
+      if (tool instanceof VertexTool){
+        ((VertexTool) tool).getConfiguration().scaleModeProperty().bind(
+                Bindings.when(scaleModeUniformCheckBox.selectedProperty())
+                        .then(GeometryEditorScaleMode.UNIFORM)
+                        .otherwise(GeometryEditorScaleMode.STRETCH));
+      } else if (tool instanceof FreehandTool) {
+        ((FreehandTool) tool).getConfiguration().scaleModeProperty().bind(
+                Bindings.when(scaleModeUniformCheckBox.selectedProperty())
+                        .then(GeometryEditorScaleMode.UNIFORM)
+                        .otherwise(GeometryEditorScaleMode.STRETCH));
+      } else if (tool instanceof ShapeTool) {
+        ((ShapeTool) tool).getConfiguration().scaleModeProperty().bind(
+                Bindings.when(scaleModeUniformCheckBox.selectedProperty())
+                        .then(GeometryEditorScaleMode.UNIFORM)
+                        .otherwise(GeometryEditorScaleMode.STRETCH));
+      }
+    });
+
     // create symbols for displaying new geometries
     // orange-red square for points
     pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.Style.SQUARE, Color.ORANGERED, 10);
@@ -141,6 +176,9 @@ public void initialize() {
           Bindings.createBooleanBinding(() -> geometryEditor.getGeometry().getGeometryType().equals(GeometryType.MULTIPOINT)),
           Bindings.createBooleanBinding(() -> geometryEditor.getGeometry().getGeometryType().equals(GeometryType.POINT))
         ));
+        // disable the scaling mode checkbox when the geometry editor is editing Point geometries
+        scaleModeUniformCheckBox.disableProperty().bind(Bindings.createBooleanBinding(() ->
+                geometryEditor.getGeometry().getGeometryType().equals(GeometryType.POINT)));
       } else {
         // when the geometry editor is not started (and so the geometry is null) enable all geometry buttons
         pointButton.disableProperty().unbind();
@@ -155,6 +193,9 @@ public void initialize() {
         // disable combo box when geometry editor is not started
         toolComboBox.disableProperty().unbind();
         toolComboBox.setDisable(true);
+        // disable the scaling mode checkbox when geometry editor is not started
+        scaleModeUniformCheckBox.disableProperty().unbind();
+        scaleModeUniformCheckBox.setDisable(true);
       }
     });
 
@@ -366,18 +407,10 @@ private void createNewGraphic() {
 
     // set graphic style based on geometry type
     switch (geometry.getGeometryType()) {
-      case POINT:
-        graphic.setSymbol(pointSymbol);
-        break;
-      case MULTIPOINT:
-        graphic.setSymbol(multipointSymbol);
-        break;
-      case POLYLINE:
-        graphic.setSymbol(lineSymbol);
-        break;
-      case POLYGON:
-        graphic.setSymbol(fillSymbol);
-        break;
+      case POINT -> graphic.setSymbol(pointSymbol);
+      case MULTIPOINT -> graphic.setSymbol(multipointSymbol);
+      case POLYLINE -> graphic.setSymbol(lineSymbol);
+      case POLYGON -> graphic.setSymbol(fillSymbol);
     }
 
     // add new graphic to the graphics overlay
@@ -429,7 +462,15 @@ private static class ComboBoxStringConverter extends StringConverter<GeometryEdi
     public String toString(GeometryEditorTool geometryEditorTool) {
       if (geometryEditorTool != null) {
         if (geometryEditorTool instanceof VertexTool) return "Vertex Tool";
-        else if (geometryEditorTool instanceof FreehandTool) return "Freehand Tool";
+        if (geometryEditorTool instanceof FreehandTool) return "Freehand Tool";
+        if (geometryEditorTool instanceof ShapeTool){
+          return switch (((ShapeTool) geometryEditorTool).getShapeType()) {
+            case ARROW -> "Arrow Shape Tool";
+            case ELLIPSE -> "Ellipse Shape Tool";
+            case RECTANGLE -> "Rectangle Shape Tool";
+            case TRIANGLE -> "Triangle Shape Tool";
+          };
+        }
       }
       return "";
     }

geometry/create-and-edit-geometries/src/main/java/com/esri/samples/create_and_edit_geometries/CreateAndEditGeometriesController.java

@@ -19,6 +19,7 @@
 <?import com.esri.arcgisruntime.mapping.view.MapView?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
+<?import javafx.scene.control.CheckBox?>
 <?import javafx.scene.control.ComboBox?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.Separator?>
@@ -100,9 +101,10 @@
         </Button>
         <ComboBox fx:id="toolComboBox" disable="true" GridPane.rowIndex="3" GridPane.columnIndex="0"
                   GridPane.columnSpan="2"/>
-        <Separator GridPane.rowIndex="4" GridPane.columnIndex="0" GridPane.columnSpan="2" maxWidth="100"/>
-        <Label GridPane.rowIndex="5" GridPane.columnSpan="2" GridPane.halignment="CENTER" text="Edit"/>
-        <Button fx:id="undoButton" onAction="#handleUndoButtonClicked" GridPane.rowIndex="6"
+        <CheckBox fx:id="scaleModeUniformCheckBox" disable="true" text="Uniform Scale" GridPane.rowIndex="4" GridPane.columnSpan="2"/>
+        <Separator GridPane.rowIndex="5" GridPane.columnIndex="0" GridPane.columnSpan="2" maxWidth="100"/>
+        <Label GridPane.rowIndex="6" GridPane.columnSpan="2" GridPane.halignment="CENTER" text="Edit"/>
+        <Button fx:id="undoButton" onAction="#handleUndoButtonClicked" GridPane.rowIndex="7"
                 GridPane.columnIndex="0" text="Undo">
             <graphic>
                 <ImageView>
@@ -113,7 +115,7 @@
                 <Tooltip text="Undo"/>
             </tooltip>
         </Button>
-        <Button fx:id="redoButton" onAction="#handleRedoButtonClicked" GridPane.rowIndex="6"
+        <Button fx:id="redoButton" onAction="#handleRedoButtonClicked" GridPane.rowIndex="7"
                 GridPane.columnIndex="1" text="Redo">
             <graphic>
                 <ImageView>
@@ -125,7 +127,7 @@
             </tooltip>
         </Button>
         <Button fx:id="deleteSelectedElementButton" onAction="#handleDeleteSelectedElementButtonClicked"
-                disable="true" GridPane.rowIndex="7" GridPane.columnIndex="0" GridPane.columnSpan="2"
+                disable="true" GridPane.rowIndex="8" GridPane.columnIndex="0" GridPane.columnSpan="2"
                 text="Delete selected element">
             <graphic>
                 <ImageView>
@@ -136,7 +138,7 @@
                 <Tooltip text="Delete selected element"/>
             </tooltip>
         </Button>
-        <Button fx:id="stopAndSaveButton" onAction="#handleStopAndSaveButtonClicked" GridPane.rowIndex="8"
+        <Button fx:id="stopAndSaveButton" onAction="#handleStopAndSaveButtonClicked" GridPane.rowIndex="9"
                 GridPane.columnIndex="0" GridPane.columnSpan="2" text="Stop and save edits">
             <graphic>
                 <ImageView>
@@ -147,7 +149,7 @@
                 <Tooltip text="Stop and save edits"/>
             </tooltip>
         </Button>
-        <Button fx:id="stopAndDiscardButton" onAction="#handleStopAndDiscardButtonClicked" GridPane.rowIndex="9"
+        <Button fx:id="stopAndDiscardButton" onAction="#handleStopAndDiscardButtonClicked" GridPane.rowIndex="10"
                 GridPane.columnIndex="0" GridPane.columnSpan="2" text="Stop (discards edits)">
             <graphic>
                 <ImageView>
@@ -160,7 +162,7 @@
             </tooltip>
         </Button>
         <Button fx:id="deleteAllGeometriesButton" onAction="#handleDeleteAllGeometriesButtonClicked"
-                GridPane.rowIndex="10" GridPane.columnIndex="0" GridPane.columnSpan="2" text="Delete all geometries">
+                GridPane.rowIndex="11" GridPane.columnIndex="0" GridPane.columnSpan="2" text="Delete all geometries">
             <graphic>
                 <ImageView>
                     <Image url="@icons/trash-32.png" requestedHeight="24" preserveRatio="true" smooth="true"/>

geometry/create-and-edit-geometries/src/main/resources/create_and_edit_geometries/main.fxml

@@ -1,8 +1,8 @@
 {
-  "points":[[-9.59386587, 53.08289651], [-9.59370896, 53.08234917],
-    [-9.59330546, 53.082564], [-9.59341755, 53.08286662],
-    [-9.59326997, 53.08304595], [-9.59246485, 53.08294507],
-    [-9.59250034, 53.08286101], [-9.59241815, 53.08284607],
-    [-9.59286835, 53.08311506], [-9.59307943, 53.08234731]],
-  "spatialReference":{"wkid":4326}
-}
+  "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}
+}

geometry/create-and-edit-geometries/src/main/resources/create_and_edit_geometries/multipoint_data.json

@@ -1,5 +1,5 @@
 {
-  "x": -9.59309629,
-  "y": 53.0830063,
-  "spatialReference":{"wkid":4326}
-}
+  "x":-1067898.59,
+  "y":6998366.62,
+  "spatialReference":{"latestWkid":3857,"wkid":102100}
+}

geometry/create-and-edit-geometries/src/main/resources/create_and_edit_geometries/point_data.json

@@ -1,15 +1,15 @@
 {
-  "rings": [[[-9.59350122, 53.08320723], [-9.59345177, 53.08333534],
-    [-9.59309789, 53.08327198], [-9.59300344, 53.08317992],
-    [-9.59221827, 53.08304034], [-9.59220706, 53.08287782],
-    [-9.59229486, 53.08280871], [-9.59236398, 53.08268915],
-    [-9.59255263, 53.08256769], [-9.59265165, 53.08237906],
-    [-9.59287552, 53.08241478], [-9.59292812, 53.0823012],
-    [-9.5932294, 53.08235022], [-9.59342188, 53.08260009],
-    [-9.59354382, 53.08238728], [-9.59365852, 53.08203535],
-    [-9.59408443, 53.08210446], [-9.59448232, 53.08224456],
-    [-9.5943609, 53.08243697], [-9.59458319, 53.08245939],
-    [-9.59439639, 53.08264619], [-9.59433288, 53.0827975],
-    [-9.59404707, 53.08323649], [-9.59350122, 53.08320723]]],
-  "spatialReference":{"wkid":4326}
-}
+  "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}
+}

geometry/create-and-edit-geometries/src/main/resources/create_and_edit_geometries/polygon_data.json

@@ -1,9 +1,9 @@
 {
-  "paths":[[[-9.59486423, 53.08169453], [-9.5947812, 53.08175431],
-    [-9.59475464, 53.08189379], [-9.59494393, 53.08213622],
-    [-9.59464173, 53.08240521], [-9.59413694, 53.08260115],
-    [-9.59357903, 53.0829266], [-9.59335984, 53.08311589],
-    [-9.59318051, 53.08316903], [-9.59301779, 53.08322216],
-    [-9.59264252, 53.08370038], [-9.59250636, 53.08383986]]],
-  "spatialReference":{"wkid":4326}
-}
+  "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}
+}

geometry/create-and-edit-geometries/src/main/resources/create_and_edit_geometries/polyline_data_1.json

@@ -1,8 +1,8 @@
 {
-  "paths":[[[-9.59400079, 53.08136244], [-9.59395761, 53.08149528],
-    [-9.59368862, 53.0817045], [-9.59358235, 53.08219267],
-    [-9.59331667, 53.08290335], [-9.59314398, 53.08314246],
-    [-9.5930676, 53.08330519], [-9.59303439, 53.08351109],
-    [-9.59301447, 53.08363728], [-9.59293809, 53.08387307]]],
-  "spatialReference":{"wkid":4326}
-}
+  "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}
+}

geometry/create-and-edit-geometries/src/main/resources/create_and_edit_geometries/polyline_data_2.json

@@ -11,3 +11,7 @@ Button {
 ComboBox {
     -fx-font-size: 10px;
 }
+
+.panel-region .check-box {
+   -fx-text-fill: white;
+}