<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic SketchViewModel Move Circle Bug in ArcGIS JavaScript Maps SDK Questions</title>
    <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/sketchviewmodel-move-circle-bug/m-p/1583278#M86496</link>
    <description>&lt;P&gt;A bug in the 4.31 SDK (and possibly previous versions) causes trouble when moving &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Circle.html" target="_self"&gt;Circle&lt;/A&gt; geometries via the &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html" target="_self"&gt;SketchViewModel&lt;/A&gt;.&amp;nbsp; Basically, if you move a circle graphic once, it's fine.&amp;nbsp; But if you move it after that, it will "jump back" to its original location and then move in relation to the mouse.&amp;nbsp; To illustrate, this can be reproduced with the following steps:&lt;/P&gt;&lt;P&gt;1) Open &lt;A href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=sketch-geometries" target="_self"&gt;the sandbox for the "Sketch temporary geometries" sample.&lt;/A&gt;&lt;/P&gt;&lt;P&gt;2) Replace the contents of the script tag found on line 21 with the following:&lt;/P&gt;&lt;LI-CODE lang="javascript"&gt;    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) =&amp;gt; {
      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(() =&amp;gt; {
        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);
      });
    });&lt;/LI-CODE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;3) Click the "Refresh" button at the top-right of the map.&lt;/P&gt;&lt;P&gt;4) Click the red circle on the map to activate editing mode.&lt;/P&gt;&lt;P&gt;5) Drag the red circle to a new location (this works fine).&lt;/P&gt;&lt;P&gt;6) Now, attempt to drag it to a new location.&amp;nbsp; It "jumps back" to its original location, and then updates itself relative to that location according to your mouse movements.&amp;nbsp; All subsequent movements do this as well.&lt;/P&gt;&lt;P&gt;In contrast, the green circle does not exhibit this behavior and you can move it around normally.&amp;nbsp; This is because the green circle is not an instance of &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Circle.html" target="_self"&gt;Circle&lt;/A&gt;, but an instance of &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Polygon.html" target="_self"&gt;Polygon&lt;/A&gt;.&amp;nbsp; See line 60 above, where an object created as a &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Circle.html" target="_self"&gt;Circle&lt;/A&gt; is "converted" to an instance of &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Polygon.html" target="_self"&gt;Polygon&lt;/A&gt;.&amp;nbsp; Therefore, this is a current workaround for this problem.&lt;/P&gt;</description>
    <pubDate>Fri, 07 Feb 2025 19:56:04 GMT</pubDate>
    <dc:creator>JoelBennett</dc:creator>
    <dc:date>2025-02-07T19:56:04Z</dc:date>
    <item>
      <title>SketchViewModel Move Circle Bug</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/sketchviewmodel-move-circle-bug/m-p/1583278#M86496</link>
      <description>&lt;P&gt;A bug in the 4.31 SDK (and possibly previous versions) causes trouble when moving &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Circle.html" target="_self"&gt;Circle&lt;/A&gt; geometries via the &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html" target="_self"&gt;SketchViewModel&lt;/A&gt;.&amp;nbsp; Basically, if you move a circle graphic once, it's fine.&amp;nbsp; But if you move it after that, it will "jump back" to its original location and then move in relation to the mouse.&amp;nbsp; To illustrate, this can be reproduced with the following steps:&lt;/P&gt;&lt;P&gt;1) Open &lt;A href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=sketch-geometries" target="_self"&gt;the sandbox for the "Sketch temporary geometries" sample.&lt;/A&gt;&lt;/P&gt;&lt;P&gt;2) Replace the contents of the script tag found on line 21 with the following:&lt;/P&gt;&lt;LI-CODE lang="javascript"&gt;    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) =&amp;gt; {
      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(() =&amp;gt; {
        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);
      });
    });&lt;/LI-CODE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;3) Click the "Refresh" button at the top-right of the map.&lt;/P&gt;&lt;P&gt;4) Click the red circle on the map to activate editing mode.&lt;/P&gt;&lt;P&gt;5) Drag the red circle to a new location (this works fine).&lt;/P&gt;&lt;P&gt;6) Now, attempt to drag it to a new location.&amp;nbsp; It "jumps back" to its original location, and then updates itself relative to that location according to your mouse movements.&amp;nbsp; All subsequent movements do this as well.&lt;/P&gt;&lt;P&gt;In contrast, the green circle does not exhibit this behavior and you can move it around normally.&amp;nbsp; This is because the green circle is not an instance of &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Circle.html" target="_self"&gt;Circle&lt;/A&gt;, but an instance of &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Polygon.html" target="_self"&gt;Polygon&lt;/A&gt;.&amp;nbsp; See line 60 above, where an object created as a &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Circle.html" target="_self"&gt;Circle&lt;/A&gt; is "converted" to an instance of &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Polygon.html" target="_self"&gt;Polygon&lt;/A&gt;.&amp;nbsp; Therefore, this is a current workaround for this problem.&lt;/P&gt;</description>
      <pubDate>Fri, 07 Feb 2025 19:56:04 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/sketchviewmodel-move-circle-bug/m-p/1583278#M86496</guid>
      <dc:creator>JoelBennett</dc:creator>
      <dc:date>2025-02-07T19:56:04Z</dc:date>
    </item>
  </channel>
</rss>

