centered text

diff --git a/dist/index.js b/dist/index.js
index 345ee1f567bf19698b2f418937e7a01d52c08aae..a79a025d54262014301c191ad9d198662b72c2d4 100644 (file)
--- a/dist/index.js
+++ b/dist/index.js
@@ -29,6 +29,28 @@ let canvas_import_obj = {
 
     get_width(canvas)  { return canvasElem.width;  },
     get_height(canvas) { return canvasElem.height; },
+
+    setFont(canvas, font_name, font_length) {
+        const data = new Uint8Array(wasm_instance.exports.memory.buffer, font_name, font_length);
+        const str  = new TextDecoder().decode(data);
+
+        canvasCtx.font = str;
+    },
+
+    measureText(canvas, text_ptr, text_len, measure_ptr) {
+        const data = new Uint8Array(wasm_instance.exports.memory.buffer, text_ptr, text_len);
+        const text = new TextDecoder().decode(data);
+
+        let metrics = canvasCtx.measureText(text);
+        console.log("TEST:", metrics);
+
+        let data_view = new DataView(wasm_instance.exports.memory.buffer, measure_ptr, 5 * 4);
+        data_view.setFloat32(0,  metrics.width, true);
+        data_view.setFloat32(4,  metrics.actualBoundingBoxLeft, true);
+        data_view.setFloat32(8,  metrics.actualBoundingBoxRight, true);
+        data_view.setFloat32(12, metrics.actualBoundingBoxTop, true);
+        data_view.setFloat32(16, metrics.actualBoundingBoxBottom, true);
+    },
     
     fillRect(canvas, x, y, w, h, r, g, b, a) {
         canvasCtx.fillStyle = `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${a})`; 

diff --git a/src/prez.onyx b/src/prez.onyx
index 56af4821181ea959cd257301725275ef21f749b1..16b4c4cdd7f06f61df98de1c993019c7e4e8745c 100644 (file)
--- a/src/prez.onyx
+++ b/src/prez.onyx
@@ -1,4 +1,3 @@
-
 use package core
 
 Canvas :: struct {
@@ -6,8 +5,22 @@ Canvas :: struct {
 
     init  :: (id: str) -> Handle #foreign "canvas" "init" ---
     clear :: (handle: Handle, r: f32, g: f32, b: f32, a := 1.0f) -> Handle #foreign "canvas" "clear" ---
+
     get_width  :: (handle: Handle) -> u32 #foreign "canvas" "get_width" ---
     get_height :: (handle: Handle) -> u32 #foreign "canvas" "get_height" ---
+
+    set_font :: (handle: Handle, font_name: str) -> u32 #foreign "canvas" "setFont" ---
+
+    TextMetrics :: struct {
+        width : f32;
+        box   : struct {
+            left, right : f32;
+            top, bottom : f32;
+        };
+    }
+
+    measure_text :: (handle: Handle, text: str, measurements: ^TextMetrics) -> void #foreign "canvas" "measureText" ---
+
     fill_rect :: (handle: Handle,
         x: f32, y: f32, w: f32, h: f32,
         r: f32, g: f32, b: f32, a := 1.0f) -> void #foreign "canvas" "fillRect" ---
@@ -15,23 +28,36 @@ Canvas :: struct {
     fill_text :: (handle: Handle, text: str, x: f32, y: f32, max_width: f32 = -1.0f) -> void #foreign "canvas" "fillText" ---
 }
 
+// :GlobalVariable
+canvas: Canvas.Handle
+
 setup_canvas :: () {
-    use Canvas;
+    use Canvas
 
-    canvas := init("prez_canvas");
-    if canvas == -1 {
-        println("Failed to set up canvas.");
-        return;
-    }
+    canvas = init("prez_canvas");
+    assert(canvas != -1, "Failed to set up canvas.");
 
     clear(canvas, 0.1, 0.1, 0.1);
 
+    set_font(canvas, "bold 72px Arial");
+}
+
+draw_centered_text :: (text: str, y_baseline: f32) {
+    use Canvas
+
     width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas);
-    fill_rect(canvas, width / 2, height / 2, width / 2, height / 2, 1, 0, 0);
 
-    fill_text(canvas, "Hello, World!!", width / 2, height / 2);
+    font_metrics: TextMetrics;
+    measure_text(canvas, text, ^font_metrics);
+    println(font_metrics.width);
+
+    x := (width - font_metrics.width) / 2;
+
+    fill_text(canvas, text, x, y_baseline);
 }
 
 main :: (args: [] cstr) {
     setup_canvas();
+
+    draw_centered_text("Hello, World! This is a long title!", 100);
 }