Select to view content in your preferred language

SketchViewModel Move Circle Bug

81
0
02-07-2025 11:56 AM
JoelBennett
MVP Regular Contributor

A bug in the 4.31 SDK (and possibly previous versions) causes trouble when moving Circle geometries via the SketchViewModel.  Basically, if you move a circle graphic once, it's fine.  But if you move it after that, it will "jump back" to its original location and then move in relation to the mouse.  To illustrate, this can be reproduced with the following steps:

1) Open the sandbox for the "Sketch temporary geometries" sample.

2) Replace the contents of the script tag found on line 21 with the following:

    require([
      "esri/Color",
      "esri/Graphic",
      "esri/Map",
      "esri/geometry/Circle",
      "esri/geometry/Point",
      "esri/geometry/Polygon",
      "esri/layers/GraphicsLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/views/MapView",
      "esri/widgets/Sketch/SketchViewModel",
    ], (Color, Graphic, Map, Circle, Point, Polygon, GraphicsLayer, SimpleFillSymbol, MapView, SketchViewModel) => {
      const graphicsLayer = new GraphicsLayer();

      const map = new Map({
        basemap: "topo-vector",
        layers: [graphicsLayer]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 18,
        center: [139.5716, 35.6964]
      });

      view.when(() => {
        var sketchViewModel = new SketchViewModel({
          layer: graphicsLayer,
          view: view
        });
        
        var extent = view.extent;
        var yDiff = extent.height / 4;
        var xDiff = extent.width / 4;

        var circle1 = new Circle({
          center: new Point({x:extent.xmin + xDiff, y:extent.ymax - yDiff, spatialReference:extent.spatialReference}),
          geodesic: true,
          numberOfPoints: 100,
          radius: 50,
          radiusUnit: "meters"
        });

        var circle2 = new Circle({
          center: new Point({x:extent.xmax - xDiff, y:extent.ymin + yDiff, spatialReference:extent.spatialReference}),
          geodesic: true,
          numberOfPoints: 100,
          radius: 50,
          radiusUnit: "meters"
        });

        var graphic1 = new Graphic({
          geometry: circle1,
          attributes: [],
          symbol: new SimpleFillSymbol({color:new Color("red"), style:"solid"})
        });

        var graphic2 = new Graphic({
          geometry: Polygon.fromJSON(circle2.toJSON()),
          attributes: [],
          symbol: new SimpleFillSymbol({color:new Color("green"), style:"solid"})
        });

        graphicsLayer.add(graphic1);
        graphicsLayer.add(graphic2);
      });
    });

 

3) Click the "Refresh" button at the top-right of the map.

4) Click the red circle on the map to activate editing mode.

5) Drag the red circle to a new location (this works fine).

6) Now, attempt to drag it to a new location.  It "jumps back" to its original location, and then updates itself relative to that location according to your mouse movements.  All subsequent movements do this as well.

In contrast, the green circle does not exhibit this behavior and you can move it around normally.  This is because the green circle is not an instance of Circle, but an instance of Polygon.  See line 60 above, where an object created as a Circle is "converted" to an instance of Polygon.  Therefore, this is a current workaround for this problem.

0 Kudos
0 Replies