topic Re: Visibility problem in graphics drawing - js API 4.10 in ArcGIS JavaScript Maps SDK Questions

Visibility problem in graphics drawing - js API 4.10

NettaBeninson — Mon, 07 Jan 2019 16:48:46 GMT

We are trying to upgrade our js api to 4.10 (from 4.8, 4.9 had some problems) and we are experiencing a major issue with graphics drawing behavior.

When drawing new polyline/polygon - the new shape is partially to not visible during the draw action - as seen in the attached video.

During the drawing action:

1. The new drawn shape seems truncated/cut by 'squares' (tiles?)

2. New graphic text is smeared (we are using the recently activated halo)

3. hittest is working on complex graphic - but the graphic is not visible

This behavior indicates a major change from 4.9 and prior which is not documented, I think it is the same issue as version 4.10 of Javascript API, GraphicsLayer items truncated

and also related to this issue:

Cut off of symbols with WebGL on.

Is there an available fix or documentaion about the changes in "esri/views/2d/draw/Draw"?

Thanks!

Re: Visibility problem in graphics drawing - js API 4.10

UndralBatsukh — Tue, 08 Jan 2019 21:16:37 GMT

Hi there,

1. I am not able to reproduce the issue you described using sketch widget sample. Can you please give a reproducible case or at the very least tell me what classes you are using where and how you are creating the graphics?

2. Can you please give a reproducible case or properties you are setting for the textsymbol?

3. So I confirmed that MapView.hitTest is returning a graphic where its visible property is set to false. Will fix this this issue in a future release.

Thanks,

-Undral

Re: Visibility problem in graphics drawing - js API 4.10

XavierIrias — Wed, 09 Jan 2019 01:15:33 GMT

Netta, I share your suspicion that the root cause of your issue is the same as my issue. Unfortunately I don't yet have a trivial example showing the error but it's definitely true that version 4.10 is truncating graphics where 4.9 does not. Also 4.10 is prone to hanging when given a large amount of graphics to draw, such that I have to kill the browser tab. So far I have observed these problems with Firefox and Chrome on OSX.

It should be possible to disable WebGL on the browser (rather than asking the Esri API to not use it). I will attempt to do so and report back since that would be a smoking gun implicating the webGL code.

Re: Visibility problem in graphics drawing - js API 4.10

NettaBeninson — Wed, 09 Jan 2019 11:40:45 GMT

Hi, thank you for your response.

We are not using the newly introduced sketch widget, but draw and draw action.

We are creating draw actions and have a function that is called on several events:

action.on("vertex-add", redrawPolyline);
action.on("vertex-remove", redrawPolyline);
action.on("cursor-update", redrawPolyline);
action.on("draw-complete", redrawPolyline);

We created and used these actions since upgrading to the 4.x api and now the behavior is broken, even without text.

Our implementation is very simillar to the first example in Draw | API Reference | ArcGIS API for JavaScript 4.10 .

I coulndn't find an example for drawing a graphic in a GraphicsLayer | API Reference | ArcGIS API for JavaScript 4.10 , so it might have something to do with on the fly re-rendering of graphicsLayer.

Thanks for the hittest check.

I'll try creating a sandbox, if I won't be able to, we'll send you a link to a working sandbox of our system.

Re: Visibility problem in graphics drawing - js API 4.10

NettaBeninson — Wed, 09 Jan 2019 12:07:55 GMT

I suspect it might has something to do with basmap, I was able to reproduce "cutting" the drawn line after zoom and pan when the map had no basemap.

codepen link: Draw polyline - 4.10 - no basemap (based on the basic draw example)

[In the gif I didn't change my pan/zoom during drawing, only before I drew.]

Re: Visibility problem in graphics drawing - js API 4.10

UndralBatsukh — Wed, 09 Jan 2019 20:42:48 GMT

Hi there,

When view does not have a basemap, the view scale and zoom properties are not properly. So what you are seeing is similar to as if you were to zoom out all the way on the same sample. The lines are being cut along the edge. If you update your code pen to 4.9, you will see the same behavior. With this said, please tag me if you can reproduce the issue consistently. I am trying to reproduce it but having no luck.

Re: Visibility problem in graphics drawing - js API 4.10

UndralBatsukh — Wed, 09 Jan 2019 20:45:51 GMT

Hi,

Please tag me if you can reproduce the issue consistently. I am trying to reproduce the issue but I am not able to so in Chrome and Firefox on mac. What versions of firefox, chrome and osx?

Re: Visibility problem in graphics drawing - js API 4.10

BradBarnell — Sat, 26 Jan 2019 23:09:17 GMT

I also am having this problem in 4.10. Works in 4.9. See attached polygon graphics that are getting clipped randomly.

Re: Visibility problem in graphics drawing - js API 4.10

NettaBeninson — Sun, 27 Jan 2019 13:38:50 GMT

Hey, I currently cannot produce an instance of our entire system.

But it appears that other people also have this issue.

Can you please try to tell me/us what changed in the sketch action command?

It looks like the tiles are cutting the sketch, and zooming make the graphic appear again.

We are using a basemap of 4 layers, this happens even if I neutralize all the base layers ortho, vectortiles and esri basemap.

Re: Visibility problem in graphics drawing - js API 4.10

XavierIrias — Tue, 29 Jan 2019 18:43:25 GMT

I did some further testing. The graphics clipping in 4.10 seems to happen if and only if Array.prototype.remove is polyfilled. I don't know why but removing the polyfill made the issue disappear in Chrome on OSX. I also tested with some console.log calls to see if my polyfill was even being called, and it's not. So it's not the content of the polyfill for .remove but its mere presence that makes version 4.10 fail, so perhaps version 4.10 is property-sniffing and is thrown off by the presence of a .remove member on Array?

Very odd but it seems highly repeatable so I thought it might be helpful for you to know.

Re: Visibility problem in graphics drawing - js API 4.10

BradBarnell — Sat, 02 Feb 2019 22:15:29 GMT

Here is the ESRI bug tracking number on this issue if anybody cares: BUG - 000119023

Re: Visibility problem in graphics drawing - js API 4.10

UndralBatsukh — Mon, 04 Feb 2019 16:15:45 GMT

Brad Barnell‌ the issue number you provided will address polylines not rendering properly along its vertices. Xavier Irias‌ and Brad Barnell‌ if you can provide me with some reproducible case for graphics being cut off along tiles would be great. I have been trying to reproduce this issue and I am not able to so far. Based on everyone's screenshot seems like it happens at large scales... but that is the only clue I have so far. Xavier Irias‌ will you be able to provide a simple sample for what you mentioned above?

Netta Beninson‌ at 4.10, WebGL is used to draw all layers. This would be the root of the problem. It is just I am not able to reproduce the issue. Any clues and steps how to reproduce the issue will help to solve this issue.

Thank you

Re: Visibility problem in graphics drawing - js API 4.10

XavierIrias — Mon, 04 Feb 2019 22:50:55 GMT

Well, it's not as boiled down as I would like but unfortunately the very, very simple cases don't seem to fail as much. Here is a fiddle that shows the problem.

esri javascript 4.10 - JSFiddle

What you should see is a nice rendering of the Irish grid, a 5x5, that redraws when you pan or zoom. Instead you sometimes see just fragments of the grid, other times you see it draw flawlessly. it seems to be data-dependent.

To make the behavior vanish you can comment out the Array.prototype.remove lines at the top of the javascript section. Very odd, as I said this code never gets called but its presence plus an as-yet-unidentified data characteristic seems to trigger the bug.

I've found that refreshing the page yields different results, implying that possibly the WebGL system carries state from one refresh to the next.

Re: Visibility problem in graphics drawing - js API 4.10

UndralBatsukh — Tue, 05 Feb 2019 21:40:44 GMT

Thank you so much for this reproducible case. We will investigate the issue.

Re: Visibility problem in graphics drawing - js API 4.10

UndralBatsukh — Fri, 08 Feb 2019 18:23:49 GMT

Hi Xavier Irias‌

So we did see the problem with your reproducible case. We fixed the issue for your specific case (iteration over records when reshuffling). Hopefully it will fix the issue the others are seeing.

-Undral

Re: Visibility problem in graphics drawing - js API 4.10

NettaBeninson — Sun, 10 Feb 2019 11:48:10 GMT

Hi, sounds good!

Will the fix be available in 4.11 or there's a patch?

Thanks!

Re: Visibility problem in graphics drawing - js API 4.10

UndralBatsukh — Wed, 13 Mar 2019 16:03:54 GMT

Hi there,

It will be fixed at 4.11.

-Undral

Re: Visibility problem in graphics drawing - js API 4.10

THKPun — Tue, 03 Mar 2020 17:38:08 GMT

Hi Undral,

I am wondering if there's any workaround for the problem (other than removing Array.Prototype.remove as Xavier suggested)? My application is still running on 4.10 unfortunately and I am looking to see if I can work around the problem until we upgrade. I've tried several other things to force a map redraw (e.g. resetting extent) but I am still seeing the problem.

Thanks and any suggestion will be appreciated!