From 8bb42fe56bc18b2c6fe3a014e4f83bbdb45eac7f Mon Sep 17 00:00:00 2001
From: Brendan Hansen <brendan.f.hansen@gmail.com>
Date: Fri, 19 Feb 2021 20:41:17 -0600
Subject: [PATCH] added fixed aspect ratio slides

---
 dist/index.js   |  31 ++++++++++++++++++++++++++++---
 dist/prez.wasm  | Bin 34691 -> 34946 bytes
 onyx.prez       |   5 +++--
 src/canvas.onyx |  24 ++++++++----------------
 src/slides.onyx |  48 ++++++++++++++++++++++++++++++++++++------------
 todo            |   2 +-
 6 files changed, 76 insertions(+), 34 deletions(-)

diff --git a/dist/index.js b/dist/index.js
index 3c1f889..d966c3d 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -117,10 +117,10 @@ let canvas_import_obj = {
         canvasCtx.fillRect(0, 0, canvasElem.width, canvasElem.height);
     },
 
-    get_width(canvas)  { return canvasElem.width;  },
-    get_height(canvas) { return canvasElem.height; },
+    getWidth(canvas)  { return canvasElem.width;  },
+    getHeight(canvas) { return canvasElem.height; },
 
-    set_size(canvas, width, height) {
+    setSize(canvas, width, height) {
         canvasElem.width = width;
         canvasElem.height = height;
     },
@@ -136,6 +136,31 @@ let canvas_import_obj = {
         canvasCtx.fillStyle = `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${a})`; 
     },
 
+    setTransform(canvas, matrix_buf) {
+        let data_view = new DataView(wasm_instance.exports.memory.buffer, matrix_buf, 6 * 4);
+
+        let a = data_view.getFloat32(0, true);
+        let b = data_view.getFloat32(4, true);
+        let c = data_view.getFloat32(8, true);
+        let d = data_view.getFloat32(12, true);
+        let e = data_view.getFloat32(16, true);
+        let f = data_view.getFloat32(20, true);
+
+        canvasCtx.setTransform(a, b, c, d, e, f);
+    },
+
+    getTransform(canvas, matrix_buf) {
+        let transform = canvasCtx.getTransform();
+
+        let data_view = new DataView(wasm_instance.exports.memory.buffer, matrix_buf, 6 * 4);
+        data_view.setFloat32(0,  transform.a, true);
+        data_view.setFloat32(4,  transform.b, true);
+        data_view.setFloat32(8,  transform.c, true);
+        data_view.setFloat32(12, transform.d, true);
+        data_view.setFloat32(16, transform.e, true);
+        data_view.setFloat32(20, transform.f, true);
+    },
+
     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);
diff --git a/dist/prez.wasm b/dist/prez.wasm
index 3112fb4009304bc6b01eb75bb57ef29f2c8f0cda..fc27b1b27c4163d1037ae0652d3feafcde93fcbb 100644
GIT binary patch
delta 7452
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

delta 7338
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

diff --git a/onyx.prez b/onyx.prez
index 82250f3..676a9ca 100644
--- a/onyx.prez
+++ b/onyx.prez
@@ -1,3 +1,4 @@
+[aspect_ratio 16 9]
 
 [var tbright 236]
 [var bbright 20]
@@ -47,7 +48,7 @@
 ▪ Easy to read
 
 [image onyx_example x 50 y 30 width 35
-    border_color 30 30 30 border_width 1]
+    border_color 30 30 30 border_width 2]
 
 
 # ---------------------------------------------
@@ -81,7 +82,7 @@
 https://webassembly.org/
 
 [image wasm_logo x 65 y 34 width 20
-    border_width 2 border_color 20 20 20]
+    border_width 20 border_color 20 20 20]
 
 
 # ---------------------------------------------
diff --git a/src/canvas.onyx b/src/canvas.onyx
index 1bb1967..37d0dee 100644
--- a/src/canvas.onyx
+++ b/src/canvas.onyx
@@ -6,14 +6,19 @@ 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" ---
+    get_width  :: (handle: Handle) -> u32 #foreign "canvas" "getWidth" ---
+    get_height :: (handle: Handle) -> u32 #foreign "canvas" "getHeight" ---
 
-    set_size :: (handle: Handle, width: u32, height: u32) -> void #foreign "canvas" "set_size" ---
+    set_size :: (handle: Handle, width: u32, height: u32) -> void #foreign "canvas" "setSize" ---
 
     set_font :: (handle: Handle, font_name: str) -> u32 #foreign "canvas" "setFont" ---
     set_color :: (handle: Handle, r: f32, g: f32, b: f32, a := 1.0f) -> void #foreign "canvas" "setColor" ---
 
+    TransformMatrix :: #type [6] f32;
+
+    set_transform :: (handle: Handle, matrix: TransformMatrix) -> void #foreign "canvas" "setTransform" --- 
+    get_transform :: (handle: Handle, out_matrix: TransformMatrix) -> void #foreign "canvas" "getTransform" ---
+
     TextMetrics :: struct {
         width : f32;
         box   : Box;
@@ -49,16 +54,3 @@ setup_canvas :: () {
     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);
-
-    font_metrics: TextMetrics;
-    measure_text(canvas, text, ^font_metrics);
-
-    x := (width - font_metrics.width) / 2;
-
-    fill_text(canvas, text, x, y_baseline * height);
-}
-
diff --git a/src/slides.onyx b/src/slides.onyx
index 7a013c1..ac805c4 100644
--- a/src/slides.onyx
+++ b/src/slides.onyx
@@ -188,12 +188,36 @@ slide_render :: (use slide: ^Slide) {
     //
     //     C :: Canvas
     //
-    Canvas.clear(canvas, background.r, background.g, background.b, background.a);
+    Canvas.clear(canvas, 0, 0, 0, 1);
 
-    for item: items do if item != null do slide_item_render(item, slide);
+    canvas_width, canvas_height := cast(f32) Canvas.get_width(canvas), cast(f32) Canvas.get_height(canvas);
+    width, height := 0.0f, 0.0f;
+    x, y := 0.0f, 0.0f;
+
+    if canvas_width > canvas_height * aspect_ratio {
+        height = canvas_height;    
+        width  = canvas_height * aspect_ratio;
+        x      = (canvas_width - width) / 2;
+        y      = 0;
+    } else {
+        width  = canvas_width;
+        height = canvas_width / aspect_ratio;
+        x      = 0;
+        y      = (canvas_height - height) / 2;
+    }
+
+    transform := f32.[ 1, 0, 0, 1, x, y ];
+    identity  := f32.[ 1, 0, 0, 1, 0, 0 ];
+
+    Canvas.set_transform(canvas, transform);
+    defer Canvas.set_transform(canvas, identity);
+
+    Canvas.fill_rect(canvas, 0, 0, width, height, background.r, background.g, background.b, background.a);
+    for item: items do if item != null do slide_item_render(item, slide, width, height);
 }
 
-slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) {
+slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide,
+                      width: f32, height: f32) {
     use Canvas
     use Slide_Item.Kind
 
@@ -204,12 +228,18 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) {
 
             use Slide_Item_Text.Justify
             switch text.justify {
-                case Center do draw_centered_text(text.text, text.y_pos);
+                case Center {
+                    font_metrics: TextMetrics;
+                    measure_text(canvas, text.text, ^font_metrics);
+
+                    x := (width - font_metrics.width) / 2;
+
+                    fill_text(canvas, text.text, x, text.y_pos * height);
+                }
 
                 case Left {
                     use Canvas
 
-                    width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas);
                     x, y := text.padding * width, text.y_pos * height;
                     fill_text(canvas, text.text, x, y);
                 }
@@ -217,8 +247,6 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) {
                 case Right {
                     use Canvas
 
-                    width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas);
-
                     font_metrics: TextMetrics;
                     measure_text(canvas, text.text, ^font_metrics);
 
@@ -232,8 +260,6 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) {
             use Canvas
 
             if html_image := map.get(^the_slideshow.image_map, image.name); html_image.handle != -1 {
-                width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas);
-
                 // @Speed: There is a much better way of doing this...
                 // @Robustness: Currently, because HTML images are asynchronously loaded,
                 // the image dimensions are not known when the load_image call is made.
@@ -250,7 +276,7 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) {
                 h := w * (cast(f32) html_image.height / cast(f32) html_image.width);
 
                 if image.border_width > 0 {
-                    bw := image.border_width * width;
+                    bw := image.border_width * w;
                     fill_rect(canvas, x - bw, y - bw, w + 2 * bw, h + 2 * bw,
                                       image.border_color.r, image.border_color.g,
                                       image.border_color.b, image.border_color.a);
@@ -263,8 +289,6 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) {
         case Rect {
             use Canvas
 
-            width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas);
-
             x := rect.x * width;
             y := rect.y * height;
             w := rect.w * width;
diff --git a/todo b/todo
index a8ed93f..0ebe506 100644
--- a/todo
+++ b/todo
@@ -1,5 +1,5 @@
 [X] Image borders
-[ ] Fixed aspect ratio slides
+[X] Fixed aspect ratio slides
 
 [ ] Slide animation: Slide from Right
 [ ] Slide animatoin: Fade
-- 
2.25.1