Text and circle

docs/emgui_wasm.js

@@ -23,54 +23,6 @@
         WASM_VECTOR_LEN = buf.length;
         return ptr;
     }
-
-    let cachedTextDecoder = new TextDecoder('utf-8');
-
-    function getStringFromWasm(ptr, len) {
-        return cachedTextDecoder.decode(getUint8Memory().subarray(ptr, ptr + len));
-    }
-
-    let cachedGlobalArgumentPtr = null;
-    function globalArgumentPtr() {
-        if (cachedGlobalArgumentPtr === null) {
-            cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr();
-        }
-        return cachedGlobalArgumentPtr;
-    }
-
-    let cachegetUint32Memory = null;
-    function getUint32Memory() {
-        if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
-            cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
-        }
-        return cachegetUint32Memory;
-    }
-    /**
-    * @param {string} arg0
-    * @returns {string}
-    */
-    __exports.show_gui = function(arg0) {
-        const ptr0 = passStringToWasm(arg0);
-        const len0 = WASM_VECTOR_LEN;
-        const retptr = globalArgumentPtr();
-        try {
-            wasm.show_gui(retptr, ptr0, len0);
-            const mem = getUint32Memory();
-            const rustptr = mem[retptr / 4];
-            const rustlen = mem[retptr / 4 + 1];
-
-            const realRet = getStringFromWasm(rustptr, rustlen).slice();
-            wasm.__wbindgen_free(rustptr, rustlen * 1);
-            return realRet;
-
-
-        } finally {
-            wasm.__wbindgen_free(ptr0, len0 * 1);
-
-        }
-
-    };
-
     /**
     * @param {string} arg0
     * @returns {Painter}
@@ -114,6 +66,12 @@
 
 function getObject(idx) { return heap[idx]; }
 
+let cachedTextDecoder = new TextDecoder('utf-8');
+
+function getStringFromWasm(ptr, len) {
+    return cachedTextDecoder.decode(getUint8Memory().subarray(ptr, ptr + len));
+}
+
 let heap_next = heap.length;
 
 function addHeapObject(obj) {
@@ -149,6 +107,14 @@ const __widl_f_get_context_HTMLCanvasElement_target = typeof HTMLCanvasElement =
     throw new Error(`wasm-bindgen: HTMLCanvasElement.getContext does not exist`);
 };
 
+let cachegetUint32Memory = null;
+function getUint32Memory() {
+    if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
+        cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
+    }
+    return cachegetUint32Memory;
+}
+
 __exports.__widl_f_get_context_HTMLCanvasElement = function(arg0, arg1, arg2, exnptr) {
     let varg1 = getStringFromWasm(arg1, arg2);
     try {
@@ -201,6 +167,34 @@ __exports.__widl_f_buffer_data_with_array_buffer_view_WebGLRenderingContext = fu
     __widl_f_buffer_data_with_array_buffer_view_WebGLRenderingContext_target.call(getObject(arg0), arg1, getObject(arg2), arg3);
 };
 
+function getArrayU8FromWasm(ptr, len) {
+    return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
+}
+
+const __widl_f_tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.texImage2D || function() {
+    throw new Error(`wasm-bindgen: WebGLRenderingContext.texImage2D does not exist`);
+};
+
+__exports.__widl_f_tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array_WebGLRenderingContext = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, exnptr) {
+    let varg9 = arg9 == 0 ? undefined : getArrayU8FromWasm(arg9, arg10);
+    try {
+        __widl_f_tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array_WebGLRenderingContext_target.call(getObject(arg0), arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, varg9);
+    } catch (e) {
+        const view = getUint32Memory();
+        view[exnptr / 4] = 1;
+        view[exnptr / 4 + 1] = addHeapObject(e);
+
+    }
+};
+
+const __widl_f_active_texture_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.activeTexture || function() {
+    throw new Error(`wasm-bindgen: WebGLRenderingContext.activeTexture does not exist`);
+};
+
+__exports.__widl_f_active_texture_WebGLRenderingContext = function(arg0, arg1) {
+    __widl_f_active_texture_WebGLRenderingContext_target.call(getObject(arg0), arg1);
+};
+
 const __widl_f_attach_shader_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.attachShader || function() {
     throw new Error(`wasm-bindgen: WebGLRenderingContext.attachShader does not exist`);
 };
@@ -217,6 +211,14 @@ __exports.__widl_f_bind_buffer_WebGLRenderingContext = function(arg0, arg1, arg2
     __widl_f_bind_buffer_WebGLRenderingContext_target.call(getObject(arg0), arg1, getObject(arg2));
 };
 
+const __widl_f_bind_texture_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.bindTexture || function() {
+    throw new Error(`wasm-bindgen: WebGLRenderingContext.bindTexture does not exist`);
+};
+
+__exports.__widl_f_bind_texture_WebGLRenderingContext = function(arg0, arg1, arg2) {
+    __widl_f_bind_texture_WebGLRenderingContext_target.call(getObject(arg0), arg1, getObject(arg2));
+};
+
 const __widl_f_blend_func_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.blendFunc || function() {
     throw new Error(`wasm-bindgen: WebGLRenderingContext.blendFunc does not exist`);
 };
@@ -282,6 +284,17 @@ __exports.__widl_f_create_shader_WebGLRenderingContext = function(arg0, arg1) {
 
 };
 
+const __widl_f_create_texture_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.createTexture || function() {
+    throw new Error(`wasm-bindgen: WebGLRenderingContext.createTexture does not exist`);
+};
+
+__exports.__widl_f_create_texture_WebGLRenderingContext = function(arg0) {
+
+    const val = __widl_f_create_texture_WebGLRenderingContext_target.call(getObject(arg0));
+    return isLikeNone(val) ? 0 : addHeapObject(val);
+
+};
+
 const __widl_f_draw_elements_with_i32_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.drawElements || function() {
     throw new Error(`wasm-bindgen: WebGLRenderingContext.drawElements does not exist`);
 };
@@ -388,6 +401,22 @@ __exports.__widl_f_shader_source_WebGLRenderingContext = function(arg0, arg1, ar
     __widl_f_shader_source_WebGLRenderingContext_target.call(getObject(arg0), getObject(arg1), varg2);
 };
 
+const __widl_f_tex_parameteri_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.texParameteri || function() {
+    throw new Error(`wasm-bindgen: WebGLRenderingContext.texParameteri does not exist`);
+};
+
+__exports.__widl_f_tex_parameteri_WebGLRenderingContext = function(arg0, arg1, arg2, arg3) {
+    __widl_f_tex_parameteri_WebGLRenderingContext_target.call(getObject(arg0), arg1, arg2, arg3);
+};
+
+const __widl_f_uniform1i_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.uniform1i || function() {
+    throw new Error(`wasm-bindgen: WebGLRenderingContext.uniform1i does not exist`);
+};
+
+__exports.__widl_f_uniform1i_WebGLRenderingContext = function(arg0, arg1, arg2) {
+    __widl_f_uniform1i_WebGLRenderingContext_target.call(getObject(arg0), getObject(arg1), arg2);
+};
+
 const __widl_f_uniform2f_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.uniform2f || function() {
     throw new Error(`wasm-bindgen: WebGLRenderingContext.uniform2f does not exist`);
 };
@@ -463,6 +492,14 @@ __exports.__wbg_subarray_705096b76e15e94e = function(arg0, arg1, arg2) {
     return addHeapObject(getObject(arg0).subarray(arg1, arg2));
 };
 
+__exports.__wbg_new_3153ff3e90269012 = function(arg0) {
+    return addHeapObject(new Uint16Array(getObject(arg0)));
+};
+
+__exports.__wbg_subarray_6f181829e5fd3854 = function(arg0, arg1, arg2) {
+    return addHeapObject(getObject(arg0).subarray(arg1, arg2));
+};
+
 __exports.__wbg_instanceof_Memory_d223615e29613829 = function(idx) {
     return getObject(idx) instanceof WebAssembly.Memory ? 1 : 0;
 };
@@ -511,6 +548,21 @@ __exports.__wbindgen_string_new = function(p, l) {
     return addHeapObject(getStringFromWasm(p, l));
 };
 
+__exports.__wbindgen_number_get = function(n, invalid) {
+    let obj = getObject(n);
+    if (typeof(obj) === 'number') return obj;
+    getUint8Memory()[invalid] = 1;
+    return 0;
+};
+
+__exports.__wbindgen_is_null = function(idx) {
+    return getObject(idx) === null ? 1 : 0;
+};
+
+__exports.__wbindgen_is_undefined = function(idx) {
+    return getObject(idx) === undefined ? 1 : 0;
+};
+
 __exports.__wbindgen_boolean_get = function(i) {
     let v = getObject(i);
     if (typeof(v) === 'boolean') {
@@ -520,6 +572,18 @@ __exports.__wbindgen_boolean_get = function(i) {
     }
 };
 
+__exports.__wbindgen_is_symbol = function(i) {
+    return typeof(getObject(i)) === 'symbol' ? 1 : 0;
+};
+
+__exports.__wbindgen_string_get = function(i, len_ptr) {
+    let obj = getObject(i);
+    if (typeof(obj) !== 'string') return 0;
+    const ptr = passStringToWasm(obj);
+    getUint32Memory()[len_ptr / 4] = WASM_VECTOR_LEN;
+    return ptr;
+};
+
 __exports.__wbindgen_memory = function() { return addHeapObject(wasm.memory); };
 
 function takeObject(idx) {

docs/frontend.js

@@ -111,8 +111,7 @@ function paint_gui(canvas, input) {
         var commands = rust_gui(input);
         for (var _i = 0, commands_1 = commands; _i < commands_1.length; _i++) {
             var cmd = commands_1[_i];
-            var commands_2 = rust_gui(input);
-            commands_2.unshift({
+            commands.unshift({
                 fill_color: { r: 0, g: 0, b: 0, a: 0 },
                 kind: "clear"
             });

docs/frontend.ts

@@ -206,14 +206,12 @@ function paint_gui(canvas, input: RawInput) {
     }
     wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input));
   } else {
-    let commands = rust_gui(input);
+    const commands = rust_gui(input);
     for (const cmd of commands) {
-      const commands = rust_gui(input);
       commands.unshift({
         fill_color: { r: 0, g: 0, b: 0, a: 0 },
         kind: "clear",
       });
-
       paint_command(canvas, cmd);
     }
   }

emgui/src/emgui.rs

@@ -1,7 +1,7 @@
 use crate::{layout, style, types::*};
 
 /// Encapsulates input, layout and painting for ease of use.
-#[derive(Clone, Debug, Default)]
+#[derive(Clone)]
 pub struct Emgui {
     pub last_input: RawInput,
     pub layout: layout::Layout,
@@ -9,6 +9,14 @@ pub struct Emgui {
 }
 
 impl Emgui {
+    pub fn new() -> Emgui {
+        Emgui {
+            last_input: Default::default(),
+            layout: layout::Layout::new(),
+            style: Default::default(),
+        }
+    }
+
     pub fn new_frame(&mut self, new_input: RawInput) {
         let gui_input = GuiInput::from_last_and_new(&self.last_input, &new_input);
         self.last_input = new_input;

emgui/src/font.rs

@@ -5,19 +5,20 @@ use rusttype::{point, Scale};
 #[derive(Clone, Copy, Debug, PartialEq)]
 pub struct GlyphInfo {
     /// X offset for nice rendering
-    offset_x: u16,
+    pub offset_x: u16,
 
     /// Y offset for nice rendering
-    offset_y: u16,
+    pub offset_y: u16,
 
-    min_x: u16,
-    min_y: u16,
+    // Texture coordinates:
+    pub min_x: u16,
+    pub min_y: u16,
 
     /// Inclusive.
-    max_x: u16,
+    pub max_x: u16,
 
     /// Inclusive
-    max_y: u16,
+    pub max_y: u16,
 }
 
 /// Printable ascii characters [33, 126], which excludes 32 (space) and 127 (DEL)
@@ -26,6 +27,7 @@ const FIRST_ASCII: usize = 33;
 /// Inclusive
 const LAST_ASCII: usize = 126;
 
+// TODO: break out texture atlas into separate struct, and fill it dynamically, potentially from multiple fonts.
 #[derive(Clone)]
 pub struct Font {
     /// Maximum character height
@@ -138,8 +140,12 @@ impl Font {
         (FIRST_ASCII..=LAST_ASCII).map(|c| c as u8 as char)
     }
 
-    pub fn texture(&self) -> (usize, usize, &[u8]) {
-        (self.atlas_width, self.atlas_height, &self.atlas)
+    pub fn texture(&self) -> (u16, u16, &[u8]) {
+        (
+            self.atlas_width as u16,
+            self.atlas_height as u16,
+            &self.atlas,
+        )
     }
 
     pub fn pixel(&self, x: u16, y: u16) -> u8 {
@@ -159,6 +165,19 @@ impl Font {
         }
     }
 
+    /// Returns the start (X) of each character, starting at zero, plus the total width.
+    /// i.e. returns text.chars().count() + 1 numbers.
+    pub fn layout_single_line(&self, text: &str) -> Vec<f32> {
+        let mut x_offsets = Vec::new();
+        let mut x = 0.0;
+        for c in text.chars() {
+            x_offsets.push(x);
+            x += 7.0; // TODO: kerning
+        }
+        x_offsets.push(x);
+        x_offsets
+    }
+
     pub fn debug_print_atlas_ascii_art(&self) {
         for y in 0..self.atlas_height {
             println!(

emgui/src/layout.rs

@@ -1,6 +1,6 @@
 use std::collections::HashSet;
 
-use crate::{math::*, types::*};
+use crate::{font::Font, math::*, types::*};
 
 // ----------------------------------------------------------------------------
 
@@ -95,7 +95,10 @@ struct Memory {
 // ----------------------------------------------------------------------------
 
 struct TextFragment {
-    rect: Rect,
+    /// The start of each character, starting at zero.
+    x_offsets: Vec<f32>,
+    /// 0 for the first line, n * line_spacing for the rest
+    y_offset: f32,
     text: String,
 }
 
@@ -149,9 +152,10 @@ impl Layouter {
 
 type Id = u64;
 
-#[derive(Clone, Debug, Default)]
+#[derive(Clone)]
 pub struct Layout {
     options: LayoutOptions,
+    font: Font, // TODO: Arc?
     input: GuiInput,
     memory: Memory,
     id: Id,
@@ -161,6 +165,19 @@ pub struct Layout {
 }
 
 impl Layout {
+    pub fn new() -> Layout {
+        Layout {
+            options: Default::default(),
+            font: Font::new(13),
+            input: Default::default(),
+            memory: Default::default(),
+            id: Default::default(),
+            layouter: Default::default(),
+            graphics: Default::default(),
+            hovering_graphics: Default::default(),
+        }
+    }
+
     pub fn input(&self) -> &GuiInput {
         &self.input
     }
@@ -388,6 +405,7 @@ impl Layout {
         let mut popup_layout = Layout {
             options: self.options,
             input: self.input,
+            font: self.font.clone(),
             memory: self.memory.clone(), // TODO: Arc
             id: self.id,
             layouter: Default::default(),
@@ -450,11 +468,11 @@ impl Layout {
         let mut max_width = 0.0;
         let mut text_fragments = Vec::new();
         for line in text.split('\n') {
-            // TODO: break long lines
-            let line_width = char_size.x * (line.len() as f32);
-
+            let x_offsets = self.font.layout_single_line(&line);
+            let line_width = *x_offsets.last().unwrap();
             text_fragments.push(TextFragment {
-                rect: Rect::from_min_size(vec2(0.0, cursor_y), vec2(line_width, char_size.y)),
+                x_offsets,
+                y_offset: cursor_y,
                 text: line.into(),
             });
 
@@ -468,9 +486,10 @@ impl Layout {
     fn add_text(&mut self, pos: Vec2, text: Vec<TextFragment>) {
         for fragment in text {
             self.graphics.push(GuiCmd::Text {
-                pos: pos + vec2(fragment.rect.pos.x, fragment.rect.center().y),
+                pos: pos + vec2(0.0, fragment.y_offset),
                 style: TextStyle::Label,
                 text: fragment.text,
+                x_offsets: fragment.x_offsets,
             });
         }
     }

emgui/src/math.rs

@@ -92,6 +92,11 @@ pub fn lerp(min: f32, max: f32, t: f32) -> f32 {
     (1.0 - t) * min + t * max
 }
 
+pub fn remap(from: f32, from_min: f32, from_max: f32, to_min: f32, to_max: f32) -> f32 {
+    let t = (from - from_min) / (from_max - from_min);
+    lerp(to_min, to_max, t)
+}
+
 pub fn remap_clamp(from: f32, from_min: f32, from_max: f32, to_min: f32, to_max: f32) -> f32 {
     let t = if from <= from_min {
         0.0
@@ -102,3 +107,5 @@ pub fn remap_clamp(from: f32, from_min: f32, from_max: f32, to_min: f32, to_max:
     };
     lerp(to_min, to_max, t)
 }
+
+pub const TAU: f32 = 2.0 * std::f32::consts::PI;

emgui/src/painter.rs

@@ -1,6 +1,7 @@
 /// Outputs render info in a format suitable for e.g. OpenGL.
 use crate::{
     font::Font,
+    math::{remap, Vec2, TAU},
     types::{Color, PaintCmd},
 };
 
@@ -21,11 +22,102 @@ pub struct Vertex {
 #[derive(Clone, Debug, Default)]
 pub struct Frame {
     pub clear_color: Option<Color>,
-    /// One big triangle strip
+    /// Draw as triangles (i.e. the length is a multiple of three)
     pub indices: Vec<u32>,
     pub vertices: Vec<Vertex>,
 }
 
+impl Frame {
+    /// Uniformly colored rectangle
+    pub fn add_rect(&mut self, top_left: Vertex, bottom_right: Vertex) {
+        let idx = self.vertices.len() as u32;
+        self.indices.push(idx + 0);
+        self.indices.push(idx + 1);
+        self.indices.push(idx + 2);
+        self.indices.push(idx + 2);
+        self.indices.push(idx + 1);
+        self.indices.push(idx + 3);
+
+        let top_right = Vertex {
+            x: bottom_right.x,
+            y: top_left.y,
+            u: bottom_right.u,
+            v: top_left.v,
+            color: top_left.color,
+        };
+        let botom_left = Vertex {
+            x: top_left.x,
+            y: bottom_right.y,
+            u: top_left.u,
+            v: bottom_right.v,
+            color: top_left.color,
+        };
+        self.vertices.push(top_left);
+        self.vertices.push(top_right);
+        self.vertices.push(botom_left);
+        self.vertices.push(bottom_right);
+    }
+
+    pub fn fill_closed_path(&mut self, points: &[Vec2], normals: &[Vec2], color: Color) {
+        self.vertices.extend(points.iter().map(|p| Vertex {
+            x: p.x,
+            y: p.y,
+            u: 0,
+            v: 0,
+            color,
+        }));
+        // TODO: use normals for anti-aliasing
+        assert_eq!(points.len(), normals.len());
+        let n = points.len() as u32;
+        let idx = self.vertices.len() as u32;
+        for i in 2..n {
+            self.indices.push(idx);
+            self.indices.push(idx + i - 1);
+            self.indices.push(idx + i);
+        }
+    }
+
+    pub fn draw_closed_path(
+        &mut self,
+        points: &[Vec2],
+        normals: &[Vec2],
+        width: f32,
+        color: Color,
+    ) {
+        // TODO: anti-aliasing
+        assert_eq!(points.len(), normals.len());
+        let n = points.len() as u32;
+        let hw = width / 2.0;
+
+        let idx = self.vertices.len() as u32;
+        for i in 0..n {
+            self.indices.push(idx + (2 * i + 0) % (2 * n));
+            self.indices.push(idx + (2 * i + 1) % (2 * n));
+            self.indices.push(idx + (2 * i + 2) % (2 * n));
+            self.indices.push(idx + (2 * i + 2) % (2 * n));
+            self.indices.push(idx + (2 * i + 1) % (2 * n));
+            self.indices.push(idx + (2 * i + 3) % (2 * n));
+        }
+
+        for (p, n) in points.iter().zip(normals) {
+            self.vertices.push(Vertex {
+                x: p.x + hw * n.x,
+                y: p.y + hw * n.x,
+                u: 0,
+                v: 0,
+                color,
+            });
+            self.vertices.push(Vertex {
+                x: p.x - hw * n.x,
+                y: p.y - hw * n.x,
+                u: 0,
+                v: 0,
+                color,
+            });
+        }
+    }
+}
+
 #[derive(Clone)]
 pub struct Painter {
     font: Font,
@@ -39,48 +131,132 @@ impl Painter {
     }
 
     /// 8-bit row-major font atlas texture, (width, height, pixels).
-    pub fn texture(&self) -> (usize, usize, &[u8]) {
+    pub fn texture(&self) -> (u16, u16, &[u8]) {
         self.font.texture()
     }
 
     pub fn paint(&self, commands: &[PaintCmd]) -> Frame {
+        // let mut path_points = Vec::new();
+        // let mut path_normals = Vec::new();
+
         let mut frame = Frame::default();
         for cmd in commands {
             match cmd {
-                PaintCmd::Circle { .. } => {} // TODO
+                PaintCmd::Circle {
+                    center,
+                    fill_color,
+                    outline,
+                    radius,
+                } => {
+                    let n = 64; // TODO: parameter
+                    if let Some(color) = fill_color {
+                        let idx = frame.vertices.len() as u32;
+                        for i in 2..n {
+                            frame.indices.push(idx);
+                            frame.indices.push(idx + i - 1);
+                            frame.indices.push(idx + i);
+                        }
+
+                        for i in 0..n {
+                            let angle = remap(i as f32, 0.0, n as f32, 0.0, TAU);
+                            frame.vertices.push(Vertex {
+                                x: center.x + radius * angle.cos(),
+                                y: center.y + radius * angle.sin(),
+                                u: 0,
+                                v: 0,
+                                color: *color,
+                            });
+                        }
+                    }
+                    if let Some(_outline) = outline {
+                        // TODO
+                    }
+                }
                 PaintCmd::Clear { fill_color } => {
                     frame.clear_color = Some(*fill_color);
                 }
                 PaintCmd::Line { .. } => {} // TODO
                 PaintCmd::Rect {
+                    fill_color,
+                    outline,
                     pos,
                     size,
-                    fill_color,
                     ..
                 } => {
-                    // TODO: rounded corners, colors etc.
-                    let idx = frame.vertices.len() as u32;
-                    frame.indices.push(idx + 0);
-                    frame.indices.push(idx + 0);
-                    frame.indices.push(idx + 1);
-                    frame.indices.push(idx + 2);
-                    frame.indices.push(idx + 3);
-                    frame.indices.push(idx + 3);
-
-                    let vert = |x, y| Vertex {
-                        x,
-                        y,
-                        u: 0,
-                        v: 0,
-                        color: fill_color.unwrap_or(Color::WHITE),
-                    };
-
-                    frame.vertices.push(vert(pos.x, pos.y));
-                    frame.vertices.push(vert(pos.x + size.x, pos.y));
-                    frame.vertices.push(vert(pos.x, pos.y + size.y));
-                    frame.vertices.push(vert(pos.x + size.x, pos.y + size.y));
+                    // TODO: rounded corners
+                    // TODO: anti-aliasing
+                    // TODO: FilledRect and RectOutline as separate commands?
+                    if let Some(color) = fill_color {
+                        let vert = |pos: Vec2| Vertex {
+                            x: pos.x,
+                            y: pos.y,
+                            u: 0,
+                            v: 0,
+                            color: *color,
+                        };
+                        frame.add_rect(vert(*pos), vert(*pos + *size));
+                    }
+                    if let Some(outline) = outline {
+                        let vert = |x, y| Vertex {
+                            x,
+                            y,
+                            u: 0,
+                            v: 0,
+                            color: outline.color,
+                        };
+
+                        // Draw this counter-clockwise from top-left corner,
+                        // outer to inner on each step.
+                        let hw = outline.width / 2.0;
+
+                        let idx = frame.vertices.len() as u32;
+                        for i in 0..4 {
+                            frame.indices.push(idx + (2 * i + 0) % 8);
+                            frame.indices.push(idx + (2 * i + 1) % 8);
+                            frame.indices.push(idx + (2 * i + 2) % 8);
+                            frame.indices.push(idx + (2 * i + 2) % 8);
+                            frame.indices.push(idx + (2 * i + 1) % 8);
+                            frame.indices.push(idx + (2 * i + 3) % 8);
+                        }
+
+                        let min = *pos;
+                        let max = *pos + *size;
+                        frame.vertices.push(vert(min.x - hw, min.y - hw));
+                        frame.vertices.push(vert(min.x + hw, min.y + hw));
+                        frame.vertices.push(vert(max.x + hw, min.y - hw));
+                        frame.vertices.push(vert(max.x - hw, min.y + hw));
+                        frame.vertices.push(vert(max.x + hw, max.y + hw));
+                        frame.vertices.push(vert(max.x - hw, max.y - hw));
+                        frame.vertices.push(vert(min.x - hw, max.y + hw));
+                        frame.vertices.push(vert(min.x + hw, max.y - hw));
+                    }
+                }
+                PaintCmd::Text {
+                    color,
+                    pos,
+                    text,
+                    x_offsets,
+                } => {
+                    for (c, x_offset) in text.chars().zip(x_offsets.iter()) {
+                        if let Some(glyph) = self.font.glyph_info(c) {
+                            let top_left = Vertex {
+                                x: pos.x + x_offset + (glyph.offset_x as f32),
+                                y: pos.y + (glyph.offset_y as f32),
+                                u: glyph.min_x,
+                                v: glyph.min_y,
+                                color: *color,
+                            };
+                            let bottom_right = Vertex {
+                                x: top_left.x + (1 + glyph.max_x - glyph.min_x) as f32,
+                                y: top_left.y + (1 + glyph.max_y - glyph.min_y) as f32,
+                                u: glyph.max_x + 1,
+                                v: glyph.max_y + 1,
+                                color: *color,
+                            };
+                            frame.add_rect(top_left, bottom_right);
+                        }
+                    }
                 }
-                PaintCmd::Text { .. } => {} // TODO
             }
         }
         frame

emgui/src/style.rs

@@ -241,18 +241,18 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
         }
         GuiCmd::Text {
             pos,
-            text,
             style: text_style,
+            text,
+            x_offsets,
         } => {
-            let fill_color = match text_style {
+            let color = match text_style {
                 TextStyle::Label => style.text_color(),
             };
             out_commands.push(PaintCmd::Text {
-                fill_color,
-                font_name: style.font_name.clone(),
-                font_size: style.font_size,
+                color,
                 pos,
                 text,
+                x_offsets,
             });
         }
         GuiCmd::Window { rect } => {

emgui/src/types.rs

@@ -123,6 +123,8 @@ pub enum GuiCmd {
         pos: Vec2,
         style: TextStyle,
         text: String,
+        /// Start each character in the text, as offset from pos.
+        x_offsets: Vec<f32>,
     },
     /// Background of e.g. a popup
     Window {
@@ -162,16 +164,14 @@ pub enum PaintCmd {
         pos: Vec2,
         size: Vec2,
     },
-    /// Paint a single line of mono-space text.
-    /// The text should start at the given position and flow to the right.
-    /// The text should be vertically centered at the given position.
+    /// Paint a single line of text
     Text {
-        fill_color: Color,
-        /// Name, e.g. Palatino
-        font_name: String,
-        /// Height in pixels, e.g. 12
-        font_size: f32,
+        color: Color,
+        /// Top left corner of the first character.
         pos: Vec2,
         text: String,
+        /// Start each character in the text, as offset from pos.
+        x_offsets: Vec<f32>,
+        // TODO: font info
     },
 }

emgui_wasm/Cargo.toml

@@ -26,6 +26,7 @@ features = [
   'WebGlProgram',
   'WebGlRenderingContext',
   'WebGlShader',
+  'WebGlTexture',
   'WebGlUniformLocation',
   'Window',
 ]

emgui_wasm/src/lib.rs

@@ -16,35 +16,36 @@ use wasm_bindgen::prelude::*;
 mod app;
 mod webgl;
 
-#[wasm_bindgen]
-pub fn show_gui(raw_input_json: &str) -> String {
-    // TODO: faster interface than JSON
-    let raw_input: RawInput = serde_json::from_str(raw_input_json).unwrap();
+// #[wasm_bindgen]
+// pub fn show_gui(raw_input_json: &str) -> String {
+//     // TODO: faster interface than JSON
+//     let raw_input: RawInput = serde_json::from_str(raw_input_json).unwrap();
 
-    lazy_static::lazy_static! {
-        static ref APP: Mutex<app::App> = Default::default();
-        static ref EMGUI: Mutex<Emgui> = Default::default();
-    }
+//     lazy_static::lazy_static! {
+//         static ref APP: Mutex<app::App> = Default::default();
+//         static ref EMGUI: Mutex<Emgui> = Default::default();
+//     }
 
-    let mut emgui = EMGUI.lock().unwrap();
-    emgui.new_frame(raw_input);
+//     let mut emgui = EMGUI.lock().unwrap();
+//     emgui.new_frame(raw_input);
 
-    use crate::app::GuiSettings;
-    APP.lock().unwrap().show_gui(&mut emgui.layout);
+//     use crate::app::GuiSettings;
+//     APP.lock().unwrap().show_gui(&mut emgui.layout);
 
-    let mut style = emgui.style.clone();
-    emgui.layout.foldable("Style", |gui| {
-        style.show_gui(gui);
-    });
-    emgui.style = style;
+//     let mut style = emgui.style.clone();
+//     emgui.layout.foldable("Style", |gui| {
+//         style.show_gui(gui);
+//     });
+//     emgui.style = style;
 
-    let commands = emgui.paint();
-    serde_json::to_string(&commands).unwrap()
-}
+//     let commands = emgui.paint();
+//     serde_json::to_string(&commands).unwrap()
+// }
 
 #[wasm_bindgen]
 pub fn new_webgl_painter(canvas_id: &str) -> Result<webgl::Painter, JsValue> {
-    webgl::Painter::new(canvas_id)
+    let emgui_painter = emgui::Painter::new(); // TODO: don't create this twice
+    webgl::Painter::new(canvas_id, emgui_painter.texture())
 }
 
 struct State {
@@ -57,7 +58,7 @@ impl State {
     fn new() -> State {
         State {
             app: Default::default(),
-            emgui: Default::default(),
+            emgui: Emgui::new(),
             emgui_painter: emgui::Painter::new(),
         }
     }

emgui_wasm/src/webgl.rs

@@ -1,23 +1,33 @@
+#![allow(dead_code)]
+
 use {
     js_sys::WebAssembly,
     wasm_bindgen::{prelude::*, JsCast},
-    web_sys::{WebGlBuffer, WebGlProgram, WebGlRenderingContext, WebGlShader},
+    web_sys::{WebGlBuffer, WebGlProgram, WebGlRenderingContext, WebGlShader, WebGlTexture},
 };
 
 use emgui::Frame;
 
+type Gl = WebGlRenderingContext;
+
 #[wasm_bindgen]
 pub struct Painter {
     canvas: web_sys::HtmlCanvasElement,
     gl: WebGlRenderingContext,
+    texture: WebGlTexture,
     program: WebGlProgram,
     index_buffer: WebGlBuffer,
     pos_buffer: WebGlBuffer,
+    tc_buffer: WebGlBuffer,
     color_buffer: WebGlBuffer,
+    tex_size: (u16, u16),
 }
 
 impl Painter {
-    pub fn new(canvas_id: &str) -> Result<Painter, JsValue> {
+    pub fn new(
+        canvas_id: &str,
+        (tex_width, tex_height, pixels): (u16, u16, &[u8]),
+    ) -> Result<Painter, JsValue> {
         let document = web_sys::window().unwrap().document().unwrap();
         let canvas = document.get_element_by_id(canvas_id).unwrap();
         let canvas: web_sys::HtmlCanvasElement = canvas.dyn_into::<web_sys::HtmlCanvasElement>()?;
@@ -27,19 +37,47 @@ impl Painter {
             .unwrap()
             .dyn_into::<WebGlRenderingContext>()?;
 
-        gl.enable(WebGlRenderingContext::BLEND);
-        gl.blend_func(
-            WebGlRenderingContext::SRC_ALPHA,
-            WebGlRenderingContext::ONE_MINUS_SRC_ALPHA,
-        );
+        // --------------------------------------------------------------------
+
+        let texture = gl.create_texture().unwrap();
+        gl.bind_texture(Gl::TEXTURE_2D, Some(&texture));
+
+        // TODO: remove once https://github.com/rustwasm/wasm-bindgen/issues/1005 is fixed.
+        let mut pixels: Vec<_> = pixels.iter().cloned().collect();
+
+        let level = 0;
+        let internal_format = Gl::ALPHA;
+        let border = 0;
+        let src_format = Gl::ALPHA;
+        let src_type = Gl::UNSIGNED_BYTE;
+        gl.tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
+            Gl::TEXTURE_2D,
+            level,
+            internal_format as i32,
+            tex_width as i32,
+            tex_height as i32,
+            border,
+            src_format,
+            src_type,
+            Some(&mut pixels),
+        )
+        .unwrap();
+        gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_WRAP_S, Gl::CLAMP_TO_EDGE as i32);
+        gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_WRAP_T, Gl::CLAMP_TO_EDGE as i32);
+        gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_MIN_FILTER, Gl::NEAREST as i32);
+
+        // --------------------------------------------------------------------
 
         let vert_shader = compile_shader(
             &gl,
-            WebGlRenderingContext::VERTEX_SHADER,
+            Gl::VERTEX_SHADER,
             r#"
             uniform vec2 u_screen_size;
+            uniform vec2 u_tex_size;
             attribute vec2 a_pos;
+            attribute vec2 a_tc;
             attribute vec4 a_color;
+            varying vec2 v_tc;
             varying vec4 v_color;
             void main() {
                 gl_Position = vec4(
@@ -47,34 +85,41 @@ impl Painter {
                     1.0 - 2.0 * a_pos.y / u_screen_size.y,
                     0.0,
                     1.0);
-                // v_color = vec4(1.0, 0.0, 0.0, 0.5);
+                v_tc = a_tc / u_tex_size;
                 v_color = a_color;
             }
         "#,
         )?;
         let frag_shader = compile_shader(
             &gl,
-            WebGlRenderingContext::FRAGMENT_SHADER,
+            Gl::FRAGMENT_SHADER,
             r#"
+            uniform sampler2D u_sampler;
             precision highp float;
+            varying vec2 v_tc;
             varying vec4 v_color;
             void main() {
                 gl_FragColor = v_color;
+                gl_FragColor *= texture2D(u_sampler, v_tc).a;
             }
         "#,
         )?;
         let program = link_program(&gl, [vert_shader, frag_shader].iter())?;
         let index_buffer = gl.create_buffer().ok_or("failed to create index_buffer")?;
         let pos_buffer = gl.create_buffer().ok_or("failed to create pos_buffer")?;
+        let tc_buffer = gl.create_buffer().ok_or("failed to create tc_buffer")?;
         let color_buffer = gl.create_buffer().ok_or("failed to create color_buffer")?;
 
         Ok(Painter {
             canvas,
             gl,
+            texture,
             program,
             index_buffer,
             pos_buffer,
+            tc_buffer,
             color_buffer,
+            tex_size: (tex_width, tex_height),
         })
     }
 
@@ -83,19 +128,26 @@ impl Painter {
 
         // --------------------------------------------------------------------
 
+        gl.enable(Gl::BLEND);
+        gl.blend_func(Gl::SRC_ALPHA, Gl::ONE_MINUS_SRC_ALPHA);
         gl.use_program(Some(&self.program));
+        gl.active_texture(Gl::TEXTURE0);
+        gl.bind_texture(Gl::TEXTURE_2D, Some(&self.texture));
 
         // --------------------------------------------------------------------
 
         let indices: Vec<u16> = frame.indices.iter().map(|idx| *idx as u16).collect();
 
-        let mut positions = Vec::with_capacity(2 * frame.vertices.len());
+        let mut positions: Vec<f32> = Vec::with_capacity(2 * frame.vertices.len());
+        let mut tex_coords: Vec<u16> = Vec::with_capacity(2 * frame.vertices.len());
         for v in &frame.vertices {
             positions.push(v.x);
             positions.push(v.y);
+            tex_coords.push(v.u);
+            tex_coords.push(v.v);
         }
 
-        let mut colors = Vec::with_capacity(4 * frame.vertices.len());
+        let mut colors: Vec<u8> = Vec::with_capacity(4 * frame.vertices.len());
         for v in &frame.vertices {
             colors.push(v.color.r);
             colors.push(v.color.g);
@@ -112,14 +164,11 @@ impl Painter {
         let indices_array = js_sys::Int16Array::new(&indices_memory_buffer)
             .subarray(indices_ptr, indices_ptr + indices.len() as u32);
 
-        gl.bind_buffer(
-            WebGlRenderingContext::ELEMENT_ARRAY_BUFFER,
-            Some(&self.index_buffer),
-        );
+        gl.bind_buffer(Gl::ELEMENT_ARRAY_BUFFER, Some(&self.index_buffer));
         gl.buffer_data_with_array_buffer_view(
-            WebGlRenderingContext::ELEMENT_ARRAY_BUFFER,
+            Gl::ELEMENT_ARRAY_BUFFER,
             &indices_array,
-            WebGlRenderingContext::STATIC_DRAW, // TODO: STREAM ?
+            Gl::STREAM_DRAW,
         );
 
         // --------------------------------------------------------------------
@@ -131,29 +180,47 @@ impl Painter {
         let pos_array = js_sys::Float32Array::new(&pos_memory_buffer)
             .subarray(pos_ptr, pos_ptr + positions.len() as u32);
 
-        gl.bind_buffer(WebGlRenderingContext::ARRAY_BUFFER, Some(&self.pos_buffer));
-        gl.buffer_data_with_array_buffer_view(
-            WebGlRenderingContext::ARRAY_BUFFER,
-            &pos_array,
-            WebGlRenderingContext::STATIC_DRAW, // TODO: STREAM ?
-        );
+        gl.bind_buffer(Gl::ARRAY_BUFFER, Some(&self.pos_buffer));
+        gl.buffer_data_with_array_buffer_view(Gl::ARRAY_BUFFER, &pos_array, Gl::STREAM_DRAW);
 
         let a_pos_loc = gl.get_attrib_location(&self.program, "a_pos");
         assert!(a_pos_loc >= 0);
         let a_pos_loc = a_pos_loc as u32;
 
+        let normalize = false;
+        let stride = 0;
+        let offset = 0;
+        gl.vertex_attrib_pointer_with_i32(a_pos_loc, 2, Gl::FLOAT, normalize, stride, offset);
+        gl.enable_vertex_attrib_array(a_pos_loc);
+
+        // --------------------------------------------------------------------
+
+        let tc_memory_buffer = wasm_bindgen::memory()
+            .dyn_into::<WebAssembly::Memory>()?
+            .buffer();
+        let tc_ptr = tex_coords.as_ptr() as u32 / 2;
+        let tc_array = js_sys::Uint16Array::new(&tc_memory_buffer)
+            .subarray(tc_ptr, tc_ptr + tex_coords.len() as u32);
+
+        gl.bind_buffer(Gl::ARRAY_BUFFER, Some(&self.tc_buffer));
+        gl.buffer_data_with_array_buffer_view(Gl::ARRAY_BUFFER, &tc_array, Gl::STREAM_DRAW);
+
+        let a_tc_loc = gl.get_attrib_location(&self.program, "a_tc");
+        assert!(a_tc_loc >= 0);
+        let a_tc_loc = a_tc_loc as u32;
+
         let normalize = false;
         let stride = 0;
         let offset = 0;
         gl.vertex_attrib_pointer_with_i32(
-            a_pos_loc,
+            a_tc_loc,
             2,
-            WebGlRenderingContext::FLOAT,
+            Gl::UNSIGNED_SHORT,
             normalize,
             stride,
             offset,
         );
-        gl.enable_vertex_attrib_array(a_pos_loc);
+        gl.enable_vertex_attrib_array(a_tc_loc);
 
         // --------------------------------------------------------------------
 
@@ -164,15 +231,8 @@ impl Painter {
         let colors_array = js_sys::Uint8Array::new(&colors_memory_buffer)
             .subarray(colors_ptr, colors_ptr + colors.len() as u32);
 
-        gl.bind_buffer(
-            WebGlRenderingContext::ARRAY_BUFFER,
-            Some(&self.color_buffer),
-        );
-        gl.buffer_data_with_array_buffer_view(
-            WebGlRenderingContext::ARRAY_BUFFER,
-            &colors_array,
-            WebGlRenderingContext::STATIC_DRAW, // TODO: STREAM ?
-        );
+        gl.bind_buffer(Gl::ARRAY_BUFFER, Some(&self.color_buffer));
+        gl.buffer_data_with_array_buffer_view(Gl::ARRAY_BUFFER, &colors_array, Gl::STREAM_DRAW);
 
         let a_color_loc = gl.get_attrib_location(&self.program, "a_color");
         assert!(a_color_loc >= 0);
@@ -184,7 +244,7 @@ impl Painter {
         gl.vertex_attrib_pointer_with_i32(
             a_color_loc,
             4,
-            WebGlRenderingContext::UNSIGNED_BYTE,
+            Gl::UNSIGNED_BYTE,
             normalize,
             stride,
             offset,
@@ -201,17 +261,23 @@ impl Painter {
             self.canvas.width() as f32,
             self.canvas.height() as f32,
         );
-        // gl.uniform2f(Some(&u_screen_size_loc), 4.0, 1.0);
+
+        let u_tex_size_loc = gl
+            .get_uniform_location(&self.program, "u_tex_size")
+            .unwrap();
+        gl.uniform2f(
+            Some(&u_tex_size_loc),
+            self.tex_size.0 as f32,
+            self.tex_size.1 as f32,
+        );
+
+        let u_sampler_loc = gl.get_uniform_location(&self.program, "u_sampler").unwrap();
+        gl.uniform1i(Some(&u_sampler_loc), 0);
 
         gl.clear_color(0.05, 0.05, 0.05, 1.0);
-        gl.clear(WebGlRenderingContext::COLOR_BUFFER_BIT);
+        gl.clear(Gl::COLOR_BUFFER_BIT);
 
-        gl.draw_elements_with_i32(
-            WebGlRenderingContext::TRIANGLE_STRIP,
-            indices.len() as i32,
-            WebGlRenderingContext::UNSIGNED_SHORT,
-            0,
-        );
+        gl.draw_elements_with_i32(Gl::TRIANGLES, indices.len() as i32, Gl::UNSIGNED_SHORT, 0);
 
         Ok(())
     }
@@ -229,7 +295,7 @@ fn compile_shader(
     gl.compile_shader(&shader);
 
     if gl
-        .get_shader_parameter(&shader, WebGlRenderingContext::COMPILE_STATUS)
+        .get_shader_parameter(&shader, Gl::COMPILE_STATUS)
         .as_bool()
         .unwrap_or(false)
     {
@@ -254,7 +320,7 @@ fn link_program<'a, T: IntoIterator<Item = &'a WebGlShader>>(
     gl.link_program(&program);
 
     if gl
-        .get_program_parameter(&program, WebGlRenderingContext::LINK_STATUS)
+        .get_program_parameter(&program, Gl::LINK_STATUS)
         .as_bool()
         .unwrap_or(false)
     {