Avoid using DOM elements

[tmcw]

Many of the guides and intermediate drawing UI in gl-draw are constructed using divs and CSS: these should be implemented in GL land instead.

[tristen]

Where are we using DOM elements?

[tmcw]

• https://github.com/mapbox/gl-draw/blob/435c9a101301d7f53b3f79b855e7f81b2296c46b/src/handlers/vertices.js#L9-L31
• https://github.com/mapbox/gl-draw/blob/435c9a101301d7f53b3f79b855e7f81b2296c46b/src/handlers/square.js#L33-L38

[tristen]

These are guides for heaven's sake!

[tristen]

And it's much faster to render these as DOM elements than burning them into the canvas only to remove them when a feature is drawn.

[tmcw]

Is it? GL needs to be fast enough to power a drawing interface without resorting to DOM overlays.

[tristen]

It has to be. The latency between adding a marker and rendering on a map is still pretty long. These are likely to only ever be the DOM elements constructed. Why is this a problem exactly?

[tmcw]

Because it splits the styling and design worlds. Handler divs will be accidentally restyled by people's CSS. When someone customizes the style of the drawn layer in GL JSON, they'll have to customize the style of the guide in CSS to match. When we port this to native, we'll have to make an exception to the GL-only canvas and draw over it in retained mode.

[tristen]

When we port this to native, we'll have to make an exception to the GL-only canvas and draw over it in retained mode.

This is the only reasonable argument you are making.

[1ec5]

I don’t see how this simplifies much for gl-native. At least on iOS, implementing these guides would be more straightforward as native views than baked into GL. We want to / have to support native views as annotations anyways: mapbox/mapbox-gl-native#1784. (Performance would theoretically be better in GL, but animation and gesture recognition are much better on native views.)

As for the Web, how will resize handles be given grab cursors on mouseover and while dragging?

[tmcw]

As for the Web, how will resize handles be given grab cursors on mouseover and while dragging?

The same as in Canvas & WebGL based applications: by setting a cursor class on the canvas.