Editor Surface: Render tokenized buffer text (onivim#29)

* Render actual text from buffer

* Render data from tokenized buffer

* Formatting

* Formatting

* Cleanup

src/editor/Core/TokenizedBufferView.re

@@ -15,6 +15,12 @@ module BufferViewLine = {
      * line index, if any lines were wrapped
      */
     lineNumber: Position.t,
+    /*
+     * The 'virtual' line number - this is the screen-space line number
+     * that accounts for wrapping. If there is no wrapping, this will be
+     * equal to the lineNumber - if there is wrapping, this may be greater
+     * than the original lineNumber */
+    virtualLineNumber: Position.t,
     /*
      * lineOffset is the value that position 0 of the virtual line
      * maps to in the original buffer line. If `lineOffset` is 0,
@@ -33,6 +39,7 @@ let _toViewWithoutWrapping = (tokenizedBuffer: TokenizedBuffer.t) => {
     (i, tokens) => {
       let ret: BufferViewLine.t = {
         lineNumber: ZeroBasedPosition(i),
+        virtualLineNumber: ZeroBasedPosition(i),
         lineOffset: ZeroBasedPosition(0),
         tokens,
       };

src/editor/UI/Editor.re

@@ -45,7 +45,7 @@ let make = (state: Oni_Core.State.t) =>
     let tabs = toUiTabs(state.tabs);
     let style = editorViewStyle(theme.background, theme.foreground);
 
-    <View style> <Tabs tabs /> <EditorSurface /> </View>;
+    <View style> <Tabs tabs /> <EditorSurface state /> </View>;
   });
 
 let createElement = (~state: Oni_Core.State.t, ~children as _, ()) =>

src/editor/UI/EditorSurface.re

@@ -13,6 +13,8 @@ open CamomileLibraryDefault.Camomile;
 open Oni_Core;
 open Oni_Core.TokenizedBufferView;
 
+open Types;
+
 /* Set up some styles */
 let textHeaderStyle =
   Style.[fontFamily("FiraCode-Regular.ttf"), fontSize(14)];
@@ -23,17 +25,47 @@ let fontAwesomeStyle =
 
 let fontAwesomeIcon = Zed_utf8.singleton(UChar.of_int(0xF556));
 
-let _viewLinesToElements = (_bufferView: array(BufferViewLine.t)) => {
-  let ret = [
-    <Text style=textHeaderStyle text="Hello" />,
-    <Text style=textHeaderStyle text="World" />,
-  ];
-  ret;
+let tokensToElement =
+    (
+      fontWidth: int,
+      fontHeight: int,
+      virtualLineNumber: int,
+      tokens: list(Tokenizer.t),
+    ) => {
+  let f = (token: Tokenizer.t) => {
+    let style =
+      Style.[
+        position(`Absolute),
+        top(fontHeight * virtualLineNumber),
+        left(fontWidth * Position.toZeroBasedIndex(token.startPosition)),
+        fontFamily("FiraCode-Regular.ttf"),
+        fontSize(14),
+        height(fontHeight),
+      ];
+
+    <Text style text={token.text} />;
+  };
+
+  List.map(f, tokens);
+};
+
+let viewLinesToElements =
+    (fontWidth: int, fontHeight: int, bufferView: TokenizedBufferView.t) => {
+  let f = (b: BufferViewLine.t) => {
+    tokensToElement(
+      fontWidth,
+      fontHeight,
+      Position.toZeroBasedIndex(b.virtualLineNumber),
+      b.tokens,
+    );
+  };
+
+  Array.map(f, bufferView.viewLines) |> Array.to_list |> List.flatten;
 };
 
 let component = React.component("EditorSurface");
 
-let make = () =>
+let make = (state: State.t) =>
   component((_slots: React.Hooks.empty) => {
     let theme = Theme.get();
 
@@ -46,7 +78,12 @@ let make = () =>
       |> TokenizedBuffer.ofBuffer
       |> TokenizedBufferView.ofTokenizedBuffer;
 
-    let textElements = _viewLinesToElements(bufferView.viewLines);
+    let textElements =
+      viewLinesToElements(
+        state.editorFont.measuredWidth,
+        state.editorFont.measuredHeight,
+        bufferView,
+      );
 
     let style =
       Style.[
@@ -59,4 +96,5 @@ let make = () =>
     <View style> ...textElements </View>;
   });
 
-let createElement = (~children as _, ()) => React.element(make());
+let createElement = (~state, ~children as _, ()) =>
+  React.element(make(state));

src/editor/bin/Oni2.re

@@ -42,7 +42,9 @@ let init = app => {
       "[DEBUG - STATE] Mode: "
       ++ Core.State.Mode.show(state.mode)
       ++ " editor font measured width: "
-      ++ string_of_int(state.editorFont.measuredWidth),
+      ++ string_of_int(state.editorFont.measuredWidth)
+      ++ " editor font measured height: "
+      ++ string_of_int(state.editorFont.measuredHeight),
     );
     <Root state />;
   };
@@ -88,8 +90,8 @@ let init = app => {
             EditorFont.create(
               ~fontFile=fontFamily,
               ~fontSize,
-              ~measuredWidth=glyph.width,
-              ~measuredHeight=glyph.height,
+              ~measuredWidth=glyph.advance / 64,
+              ~measuredHeight=glyph.bearingY + 2,
               (),
             ),
           ),