Freehand polygon drawing with SketchViewModel - change the default active drawing segment rendering?

[JonathanTiu]

When using the SketchViewModel and drawing a freehand polygon in Esri 4.x, i see it renders all these little circles (vertices?) of the active drawing segment being drawn. It looks very busy and quite jarring.

In our Esri 3.x application, when we are drawing, we are able to just render a plain line as we draw the freehand polygon which is very nice.

Is there any way to customize .  Those little circles for each vertex are quite annoying and are completely different from what we were able to render with our 3.x application.  we are trying to migrate to 4.x and maintain the same UI feedback as a requirement.

[JoelBennett]

The SketchViewModel has an undocumented property called "vertexSymbol" which, by default, it is set to a circular SimpleMarkerSymbol with a white background and a dark grey border.  I would recommend setting the opacity of the symbol in order to show and hide it as desired:

function hideVertexSymbol(sketchViewModel) {
	sketchViewModel.set("vertexSymbol.outline.color.a", 0);
	sketchViewModel.set("vertexSymbol.color.a", 0);
}

function showVertexSymbol(sketchViewModel) {
	sketchViewModel.set("vertexSymbol.outline.color.a", 1);
	sketchViewModel.set("vertexSymbol.color.a", 1);
}

[JonathanTiu]

I don't see a set() api on SketchViewModel? is it just a direct access

ie.   sketchViewModel.vertexSymbol ?

[JoelBennett]

SketchViewModel extends Accessor, and therefore has the "set" method.  More info here and here.

[JonathanTiu]

i saw that and tried it. thank you - your suggestion worked!

one thing is the cursor still has a dangling orange circle that follows wherever the cursor goes.  do you know if that is another undocumented property on sketchviewmodel that could be manipulated similarly?

[JoelBennett]

I have a fix for that, but it involves modifying a file on a locally hosted copy of the SDK.  That is, I download and host a copy of the SDK on our own servers rather than using ESRI's server at runtime.  Here are my notes, which are specific to 4.27 (although may work in previous version as well):

esri/views/2d/interactive/editingTools/draw/DrawGraphicTool2D.js

Prevent vertex symbol from appearing with mouse cursor when using a freehand drawing tool.

Note: this behavior started in 4.21.

Search for:

this.internalGraphicsLayer.add(this._visualElementGraphics.activeVertex);

Replace with:

if(this.get("drawOperation.drawingMode.updating"))this.internalGraphicsLayer.add(this._visualElementGraphics.activeVertex);

[JonathanTiu]

Interesting. 

I attempted a variation of your fix without requiring modifying DrawGraphicTool2D.js.

basically i try to detect as it's moving, and try to remove the activeVertex element.

it almost works except it now draws a very very small circle under the cursor!

mapView.on('pointer-move', (_event: any) => {

            const drawTool = sketchViewModelRef?.current?.activeComponent;

            if (drawTool && !drawTool.get("drawOperation.drawingMode.updating")) {

                drawTool.internalGraphicsLayer.remove(drawTool._visualElementGraphics.activeVertex);

            }

        });

[JoelBennett]

That's a different problem in a different module, which I also fix in the local copy.  My notes on it (specific to 4.27) are below:

esri/views/draw/DrawGraphicTool.js

Prevent empty polygon from following mouse cursor around when starting a sketch using the regular or freehand polygon drawing tools.

Note that this issue doesn't apply to rectangles or circles.

This behavior evidently started in 4.25.

Search for:

h._createOrUpdateGraphic=function(a){

Replace with:

h._createOrUpdateGraphic=function(a){if((a)&&(a.type=="polygon")&&((a.rings.length===0)||(a.rings[0].length<3)))return;