search

elm / core

Elm's core libraries
http://package.elm-lang.org/packages/elm/core/latest
BSD 3-Clause "New" or "Revised" License
2.8k stars 359 forks source link

Fast Text width & height #189

Closed vilterp closed 8 years ago

vilterp commented 9 years ago

Adding something like textWidth : Text -> Float and textHeight : Text -> Float to either Graphics.Collage or Text would be nice for laying out graphics which include text, but also forms. I suspect using the canvas's measureText method would be faster than the current way of getting text width & height, which is making the text into an element and using widthOf, which uses the DOM.

This would be a good addition to the recent change allowing direct rendering of text to canvas (#118).

I'm currently developing an app in which elements containing text are dragged and dropped. Constructing the Forms every frame from the data model involves getting the widths of each piece of text, and according to the Chrome profiler getting this width (the htmlHeight method) is taking up the most time of anything in my code on each frame.

vilterp commented 9 years ago

Here's a test showing measureText being 15x faster when I ran it (120k ops/sec vs. 8k ops/sec): https://jsperf.com/text-measurement-element-vs-canvas

vilterp commented 9 years ago

Implemented this as a native module in elm-diagrams; unfortunately canvas and DOM do not measure text width the same way, and canvas does not measure text height at all (see https://github.com/vilterp/elm-diagrams/issues/36). So, not sure how to go about this.

evancz commented 8 years ago

Sorry this did not get attention til now! The Graphics.* modules now live in evancz/elm-graphics so I am trying to get stuff migrated over there.

That said, I would like to keep that API stable for now. I expect to be focusing on <canvas> for professional users and "friendly graphics" for learning as separate use cases. Progress will be made when those start happening.