4ea86ab · typeable/elm-ui

git.iko.soy/typeable/elm-ui

add text metrics to the metrics harvester

commit4ea86ab0d8be5631b063d446d41ed56beb86e417 authorElm UI Automation <automation@elm-ui.com> dateMon 4 May 2020, 22:38 (6 years ago) parent80e267c

2 files changed+129−57

compare with master

unifiedsplit

tests-rendering/src/Testable/Runner.elm+56−54 tests-rendering/view/view.html+73−3

tests-rendering/src/Testable/Runner.elm+56−54

@@ -46,7 +46,7 @@ program tests =

4646 cur :: remaining ->

4747 ( Just cur, remaining )

4848 in

49− Browser.document

49+ Browser.element

5050 { init =

5151 always

5252 ( { current = current

@@ -136,8 +136,9 @@ type Msg

136136 (List

137137 { id : String

138138 , bbox : Testable.BoundingBox

139− , isVisible : Bool

140139 , style : List ( String, String )

140+ , isVisible : Bool

141+ , textMetrics : List TextMetrics

141142 }

142143 )

143144

@@ -225,70 +226,61 @@ update msg model =

225226 )

226227

227228

228−view : Model Msg -> Browser.Document Msg

229+view : Model Msg -> Html.Html Msg

229230view model =

230231 case model.current of

231232 Nothing ->

232233 if List.isEmpty model.upcoming then

233− { title = "tests finished"

234− , body =

235− [ case model.finished of

236− [] ->

237− Element.layout [] <|

238− Element.column

234+ case model.finished of

235+ [] ->

236+ Element.layout [] <|

237+ Element.column

238+ [ Element.spacing 20

239+ , Element.padding 20

240+ , Element.width (Element.px 800)

241+ ]

242+ [ Element.none ]

243+

244+ finished :: remaining ->

245+ Element.layout

246+ [ Font.size 16

247+ , Element.inFront (Element.html (viewElementHighlight model))

248+ ]

249+ <|

250+ Element.row [ Element.width Element.fill ]

251+ [ Element.el

252+ [ Element.width Element.fill

253+ ]

254+ (Element.el

255+ [ Element.centerX

256+ , Element.padding 100

257+ , Border.dashed

258+ , Border.width 2

259+ , Border.color palette.lightGrey

260+ , Font.size 20

261+ , Element.inFront

262+ (Element.el

263+ [ Font.size 14

264+ , Font.color palette.lightGrey

265+ ]

266+ (Element.text "test case")

267+ )

268+ ]

269+ (Testable.toElement finished.element)

270+ )

271+ , Element.column

239272 [ Element.spacing 20

240273 , Element.padding 20

241− , Element.width (Element.px 800)

274+ , Element.width Element.fill

242275 ]

243− [ Element.none ]

244−

245− finished :: remaining ->

246− Element.layout

247− [ Font.size 16

248− , Element.inFront (Element.html (viewElementHighlight model))

276+ (List.map viewResult (finished :: remaining))

249277 ]

250− <|

251− Element.row [ Element.width Element.fill ]

252− [ Element.el

253− [ Element.width Element.fill

254− ]

255− (Element.el

256− [ Element.centerX

257− , Element.padding 100

258− , Border.dashed

259− , Border.width 2

260− , Border.color palette.lightGrey

261− , Font.size 20

262− , Element.inFront

263− (Element.el

264− [ Font.size 14

265− , Font.color palette.lightGrey

266− ]

267− (Element.text "test case")

268− )

269− ]

270− (Testable.toElement finished.element)

271− )

272− , Element.column

273− [ Element.spacing 20

274− , Element.padding 20

275− , Element.width Element.fill

276− ]

277− (List.map viewResult (finished :: remaining))

278− ]

279− ]

280− }

281278

282279 else

283− { title = "tests finished"

284− , body = []

285− }

280+ Html.text ""

286281

287282 Just ( label, current ) ->

288− { title = "running"

289− , body =

290− [ Testable.toHtml current ]

291− }

283+ Testable.toHtml current

292284

293285

294286viewElementHighlight model =

@@ -492,7 +484,17 @@ port styles :

492484 , bbox : Testable.BoundingBox

493485 , style : List ( String, String )

494486 , isVisible : Bool

487+ , textMetrics : List TextMetrics

495488 }

496489 -> msg

497490 )

498491 -> Sub msg

492+

493+

494+type alias TextMetrics =

495+ { actualBoundingBoxAscent : Float

496+ , actualBoundingBoxDescent : Float

497+ , actualBoundingBoxLeft : Float

498+ , actualBoundingBoxRight : Float

499+ , width : Float

500+ }

tests-rendering/view/view.html+73−3

@@ -6,10 +6,45 @@

66 <script type="text/javascript" src="./elm.js"></script>

77 </head>

88 <style></style>

9− <body id="root"></body>

9+ <body id="root">

10+ <div id="elm-home"></div>

11+ <canvas id="canvas"></canvas>

12+ </body>

1013

1114 <script type="text/javascript">

12− var app = Elm.WeirdCentering.init();

15+ // Calculations for canvas

16+ var PIXEL_RATIO = (function () {

17+ var ctx = document.createElement("canvas").getContext("2d"),

18+ dpr = window.devicePixelRatio || 1,

19+ bsr =

20+ ctx.webkitBackingStorePixelRatio ||

21+ ctx.mozBackingStorePixelRatio ||

22+ ctx.msBackingStorePixelRatio ||

23+ ctx.oBackingStorePixelRatio ||

24+ ctx.backingStorePixelRatio ||

25+ 1;

26+

27+ return dpr / bsr;

28+ })();

29+

30+ function createHiDPICanvas(w, h, id, ratio) {

31+ if (!ratio) {

32+ ratio = PIXEL_RATIO;

33+ }

34+ let can = document.getElementById(id);

35+ can.width = w * ratio;

36+ can.height = h * ratio;

37+ can.style.width = w + "px";

38+ can.style.height = h + "px";

39+ can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);

40+ return can;

41+ }

42+ // create a canvas for text measurements

43+ let canvas = createHiDPICanvas(200, 100, "canvas");

44+ // Starting Elm App,

45+ var app = Elm.WeirdCentering.init({

46+ node: document.getElementById("elm-home"),

47+ });

1348

1449 var test_results = "waiting..";

1550

@@ -29,10 +64,17 @@

2964 }

3065 var style = getStyle(element);

3166 var bbox = getBoundingBox(element);

67+ var metrics = getTextMetrics(element);

3268

3369 var visible = isVisible(id, bbox);

3470

35− var result = { bbox: bbox, style: style, id: id, isVisible: visible };

71+ var result = {

72+ textMetrics: metrics,

73+ bbox: bbox,

74+ style: style,

75+ id: id,

76+ isVisible: visible,

77+ };

3678 results.push(result);

3779 }

3880 app.ports.styles.send(results);

@@ -100,5 +142,33 @@

100142 padding: padding,

101143 };

102144 }

145+ function getTextMetrics(element) {

146+ // Given our element, we want to return the text metrics on the text within.

147+ // If it is an element we want to measure:

148+ // we want to get the font family

149+ // and the font size.

150+ // We're going to presume that the font is loaded.

151+ let childrenTextMetrics = [];

152+ for (i = 0; i < element.children.length; i++) {

153+ if (element.children[i].classList.contains("t")) {

154+ let style = window.getComputedStyle(element, null);

155+ let fontSize = style.getPropertyValue("font-size");

156+ let fontFamily = style.getPropertyValue("font-family");

157+ let ctx = canvas.getContext("2d");

158+

159+ ctx.font = fontSize + " " + fontFamily; //"16px Roboto";

160+ let text = ctx.measureText(element.children[i].innerText);

161+

162+ childrenTextMetrics.push({

163+ actualBoundingBoxAscent: text.actualBoundingBoxAscent,

164+ actualBoundingBoxDescent: text.actualBoundingBoxDescent,

165+ actualBoundingBoxLeft: text.actualBoundingBoxLeft,

166+ actualBoundingBoxRight: text.actualBoundingBoxRight,

167+ width: text.width,

168+ });

169+ }

170+ }

171+ return childrenTextMetrics;

172+ }

103173 </script>

104174</html>