4.11 Sketch Widget Switching Views Issue

[JustinKirtz]

I have an app created that allows users to swap views between 2D and 3D, similar to the sample app used for the Calcite Maps Style Explorer. Now that the Sketch widget is available in 3D in 4.11 I'm trying to get the widget synced between views however I'm running into an issue. When I first create the widget in 2d, everything works as expected. You can create sketch graphics and you can click on the graphic to start updating it. Here is a sample of how my code looks when the widget is first created in 2d:

var sketch = new Sketch({

   view: mapView,

   layer: graphicsLayer

})

When the user switches views I assign the sketch widget view to the new view, SceneView, like so:

sketch.view = sceneView

This works to an extent. The sketch widget is still visible on the map and will let you sketch new graphics. However you can no longer click on a created graphic to update/transform it, it is like the hitTest no longer works. This problem persists when the user switches back to 2d. As before, I assign the sketch widget view back to mapView, like so:

sketch.view = mapView

And now the same problem occurs. You can add in new graphics but you can no longer click on a graphic to update/transform it. It only adds the graphic to the screen and nothing more. The only time that the widget fully works as expected is when the app is first loaded. After that, once the user switches views, it will only allow the user to sketch new graphics and they can no longer select a graphic to update/transform/delete.

Can someone point me in the right direction and tell me what I'm doing wrong? Has anyone figured out how to sync the new Sketch widget yet so you don't lose functionality when changing views?

[SaschaBrunnerCH · Accepted solution]

We could reproduce your problem with 4.11. This behavior should be fixed in the next release.
In the meantime the workaround is to destroy the sktech and create a new one:

sketch.destroy();
sketch = new Sketch({
    layer: layer,
    view: view
});‍‍‍‍‍‍‍‍‍‍

See the working example here: https://codepen.io/anon/pen/yreQBX

[JustinKirtz]

Thanks for the quick reply and confirmation that it is a bug. Your work around is what I needed.

There is another quirk that I found with the new sketch widget, can you please see if you can reproduce this because I think it is a bug as well.

In 4.10 I added basic html input color pickers and input sliders to the Sketch widget to allow the user to change the color, style, width, outline width, etc for the widget. It is all done with basic javascript inside of a 'watchUtils.when' on the sketchWidgets 'activeTool' property, simply get the input elements by ID, store their current value in a variable, and then assign that variable to the SketchViewModel's pointSymbol/polylineSymbol/polygonSymbol properties, for example:

sketchViewModel.pointSymbol.color = [insertNewColorValueFromInputElementHere]

Basically, every time the user clicks one of the sketch widget buttons the first thing that happens is that it fetches the current value in the input elements and overwrites the appropriate sketchViewModel property. Worked like a charm...until I tried to do it with 4.11

You can change the value in the color picker, slide the slider, change everything, but it never updates the actual graphic drawn on the screen, it always keeps the default styling from the sketchViewModel. However, and this is why I think it is a bug, when I log the sketchViewModel's properties they clearly show that they are being properly updated with the new value from the input color pickers...however the graphic that is actually drawn doesn't change color/width/size/etc. For example:

Lets say the sketchViewModel's default point symbol color is 'rgb(1,2,3)'. The user clicks the 'draw point' button and a point is drawn with the color 'rgb(1,2,3)'. The user then changes the color input for the point symbol's color to a value of 'rgb(25,50,100)' and then clicks the 'draw point' button to sketch a new point. When I log the sketchViewModel at that time it will log 'sketchViewModel.pointSymbol.color = 'rgb(25,50,100)', indicating that the code worked as expected....except the color of the graphic that is drawn is still 'rgb(1,2,3)'. I've even logged the sketchViewModel in an 'sketchWidget.on('create',function(event){if event==='complete'}) statement, thinking that maybe something has changed in the onComplete method that overwrites the sketchViewModel's color value...but no. Even in the onComplete method it logs 'sketchViewModel.pointSymbol.color='rgb(25,50,100)'....even though the graphic on screen is still being drawn as 'rgb(1,2,3)'. I'm at my wits end trying to figure this out so I'm wondering if you can reproduce it on your end and confirm that it is indeed a bug? And, if it isn't a bug, please help me figure out what I'm doing wrong.

Thanks again!

[SaschaBrunnerCH]

You need to clone the symbol before you modify it and set the modified symbol to the viewModel symbols. Example:

symbol = sketch.viewModel.pointSymbol.clone() 
symbol.color = [25, 50, 100]
sketch.viewModel.pointSymbol = symbol‍‍‍‍‍‍

I understand you correct, it behaved differently in 4.10 compared to 4.11?

[JustinKirtz]

Sascha...you are the man! Cloning it works perfectly!

And to answer your question, yes. In 4.10 I did not need to clone the viewModel's point/polyline/polygon symbol for the code to work. 

Thank you again for your quick replies and for solving my issues!

[SaschaBrunnerCH]

Ok, great that I could help.
Just checked and it was like this in 4.10. Could it be that you changed the symbol before you draw the first one? 

[JustinKirtz]

No, I did not change the symbol.This is a sample from my 4.10 code

if (app.sketchWidget.activeTool === 'point') {
 //if statements control whether to get color value from html color picker or dropdown menu. HTML color picker used in all browsers except for IE, which uses the dropdown menu 
 if (pointSymbolButton_color_IE_styles.getPropertyValue('display') === 'block') {
 app.pointSymbol_sketchwidget.color = pointSymbolButton_colorValue_IE;
 } else {
 app.pointSymbol_sketchwidget.color = pointSymbolButton_colorValue;
 }
 if (pointSymbolButton_outlinecolor_IE_styles.getPropertyValue('display') === 'block') {
 app.pointSymbol_sketchwidget.outline.color = pointSymbolButton_outlineColorValue_IE;
 } else {
 app.pointSymbol_sketchwidget.outline.color = pointSymbolButton_outlineColorValue;
 }
 app.pointSymbol_sketchwidget.style = pointSymbolButton_styleValue;
 app.pointSymbol_sketchwidget.size = pointSymbolButton_sizeValue;
 app.pointSymbol_sketchwidget.outline.width = pointSymbolButton_outlineWidthValue;
 pointStyles.style.display = 'block';
 polylineStyles.style.display = 'none';
 polygonStyles.style.display = 'none';
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

app.pointSymbol_sketchwidget is the simple marker symbol used by app.sketchWidget's sketch view model pointSymbol property.

[SaschaBrunnerCH]

This behavior is fixed in 4.12 release, which is due out early this week.

[JustinKirtz]

Great to hear, thanks for addressing the issue and keeping us updated.