typedb / typedb-studio

TypeDB Studio (IDE)
https://typedb.com
Mozilla Public License 2.0
191 stars 44 forks source link

Draw all Graph text (and shapes) onto one Canvas #577

Closed alexjpwalker closed 2 years ago

alexjpwalker commented 2 years ago

What is the goal of this PR?

Previously, text was rendered in a separate "layer" to shapes, meaning that to render the graph we needed 2 Canvases and 2 other "layers". We've significantly cleaned up the GraphArea implementation, by now drawing all Graph text (and shapes) onto a single Canvas. As a result, this has eliminated "jitter" where shapes and their labels would frequently go out of sync.

What are the changes implemented in this PR?

The reason we originally used these separate layers is because DrawScope, the object provided to us while drawing inside a Canvas, does NOT provide a drawText method. However, we've now discovered that by depending on the underlying Skia library skiko-awt, we can call drawIntoCanvas { it.nativeCanvas.drawTextLine() }, which does draw text onto a Canvas, and is both more consistent than the previous approach (it completely eliminates jitter), and more performant (we're bypassing all the hoops that Compose Material goes through when drawing Material Text).

Nonetheless, we would like to not have to interface with Skia directly if at all possible. The ability to draw text in a DrawScope has been a much-requested feature in the Jetpack Compose community since mid-2021, but it hasn't materialised yet. So for now, we will use Skia's own methods, which are quite low-level.