fix(render): fix text getting cut off from improper int <-> float con…

…version (#911) * TextNode: make sure the width returned from the textwrap is properly int converted * Make convenience function for int -> ceil(float)
revery-ui · Jun 12, 2020 · 8fd2003 · 8fd2003
1 parent 094266c
commit 8fd2003
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 43 deletions.
diff --git a/examples/MarkdownExample.re b/examples/MarkdownExample.re
@@ -38,45 +38,41 @@ let example = () =>
   <View style=Styles.outer>
     <markdown
       markdown={markdown|
+An h2 header
+------------
 
-# reason-sdl2
+Here's a numbered list:
 
-#### Based on [reason-glfw](https://github.com/revery-ui/reason-glfw). Reason / OCaml bindings for SDL2
+ 1. first item
+ 2. second item
+ 3. third item
 
-## Building
+Note again how the actual text starts at 4 columns in (4 characters
+from the left side). Here's a code sample:
 
-`esy` is used for building, so if you don't have `esy`, install it:
+    # Let me re-iterate ...
+    for i in 1 .. 10 { do-something(i) }
 
-```
-npm install -g esy
-```
+As you probably guessed, indented 4 spaces. By the way, instead of
+indenting the block, you can use delimited blocks, if you like:
 
-```OCaml
-let x = 4 in
-let y = x - 10 in
-let z = y * x;;
-```
+~~~
+define foobar() {
+    print "Welcome to flavor country!";
+}
+~~~
 
-Then just run `esy` in the root of the project to install and build.
-
-## Running
-
-Run `esy @example install` initially to install, then `esy @example run` to build and run the example.
-
-## License
-
-This project is licensed under the MIT License - see [LICENSE](LICENSE) for more details.
-
-## Design
-
-TBD
-
-## Acknowledgements
-
-- The test texture is provided by [LearnOpenGL](https://learnopengl.com) - an excellent resource for OpenGL!
-- This is built on several great libraries, like [SDL2](https://libsdl.org), [glad](https://github.com/Dav1dde/glad), [stb_image](https://github.com/nothings/stb/blob/master/stb_image.h)
-- The test image is from @Arahnoid's [UVChecker-map](https://github.com/Arahnoid/UVChecker-map) repo.
+(which makes copying & pasting easier). You can optionally mark the
+delimited block for Pandoc to syntax highlight it:
 
+~~~python
+import time
+# Quick, count to ten!
+for i in range(10):
+    # (but not *too* quick)
+    time.sleep(0.5)
+    print(i)
+~~~
     |markdown}
     />
   </View>;

diff --git a/src/UI/TextNode.re b/src/UI/TextNode.re
@@ -9,6 +9,10 @@ open Revery_Font;
 open Style;
 open ViewNode;
 
+open {
+       let int_of_float_ceil = f => int_of_float(f +. 1.);
+     };
+
 class textNode (text: string) = {
   as _this;
   val mutable text = text;
@@ -179,7 +183,10 @@ class textNode (text: string) = {
            _fontWeight,
          );
 
-    {width: int_of_float(width), height: int_of_float(lineHeightPx)};
+    {
+      width: int_of_float_ceil(width),
+      height: int_of_float_ceil(lineHeightPx),
+    };
   };
   pub setText = t =>
     if (!String.equal(t, text)) {
@@ -188,21 +195,36 @@ class textNode (text: string) = {
       _this#markLayoutDirty();
     };
   pub setSmoothing = smoothing => _smoothing = smoothing;
-  pub setFontFamily = fontFamily => {
+  pub setFontFamily = fontFamily =>
     if (_fontFamily !== fontFamily) {
+      _fontFamily = fontFamily;
+      _isMeasured = false;
       _this#markLayoutDirty();
     };
-    _fontFamily = fontFamily;
-  };
-  pub setFontWeight = fontWeight => _fontWeight = fontWeight;
-  pub setItalicized = italicized => _italicized = italicized;
-  pub setMonospaced = monospaced => _monospaced = monospaced;
-  pub setFontSize = fontSize => {
+  pub setFontWeight = fontWeight =>
+    if (_fontWeight != fontWeight) {
+      _fontWeight = fontWeight;
+      _isMeasured = false;
+      _this#markLayoutDirty();
+    };
+  pub setItalicized = italicized =>
+    if (_italicized != italicized) {
+      _italicized = italicized;
+      _isMeasured = false;
+      _this#markLayoutDirty();
+    };
+  pub setMonospaced = monospaced =>
+    if (_monospaced != monospaced) {
+      _monospaced = monospaced;
+      _isMeasured = false;
+      _this#markLayoutDirty();
+    };
+  pub setFontSize = fontSize =>
     if (_fontSize != fontSize) {
+      _fontSize = fontSize;
+      _isMeasured = false;
       _this#markLayoutDirty();
     };
-    _fontSize = fontSize;
-  };
   pub setUnderlined = underlined => {
     if (_underlined != underlined) {
       _this#markLayoutDirty();
@@ -272,9 +294,11 @@ class textNode (text: string) = {
     };
     let maxWidthLine = List.fold_left(pickWiderLine, 0., _lines);
     {
-      width: int_of_float(maxWidthLine),
+      width: int_of_float_ceil(maxWidthLine),
       height:
-        int_of_float(float_of_int(List.length(_lines)) *. lineHeightPx),
+        int_of_float_ceil(
+          float_of_int(List.length(_lines)) *. lineHeightPx,
+        ),
     };
   };
   pub! getMeasureFunction = () => {