Perfomance improvements

[kelvinabrokwa]

gl-draw, as is, is virtually unuseable. However, its a great test-case for gl-js on-the-fly rendering capabilities. That being said, there many optimizations in the javascript here that can ameliorate this.

To do:

• reduce calls to Immutable.toJS and Immutable.fromJS
• initialize all object members in constructor functions
• make variables monomorphic where possible
  • https://github.com/mapbox/gl-draw/blob/dev-pages/src/draw.js#L190-L191
• no longer used as of add vertex #51 make vertex finding for vertex drag less robust and less expensive
  • https://github.com/mapbox/gl-draw/blob/dev-pages/src/handlers/square.js#L97-L100
  • Math.sqrt(Math.pow(v.get(0) - coords[0], 2) + Math.pow(v.get(1) - coords[1], 2)) => Math.abs(v.get(0) - coords[0]) + Math.abs(v.get(1) - coords[1])

Upstream:

• check out zoom and pan implementations in mapbox-gl-js for tips and tricks on animation

[kelvinabrokwa]

Initial notes and observations

mousedown on feature followed by onmousemove event for square geometry

Below is a snapshot of a single onmousemove event

translate and update could use work but even then the bulk of the work is upstream (gl-js). In translate, its project and unproject. In update its render (which calls setData)

In 5 lines of translate we have:

• .toJS && .fromJS
• .toJS && .fromJS
• .toJS

the initial call to drag is actually slower than the rendering process!

[kelvinabrokwa]

Closing for now, will reopen if this becomes more actionable.