added fixed aspect ratio slides

diff --git a/dist/index.js b/dist/index.js
index 3c1f889f91691017c89655bfc2334c0164bf07d3..d966c3de991472ae2674c2f9c5d807746d22aedf 100644 (file)
--- 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 (file)
Binary files a/dist/prez.wasm and b/dist/prez.wasm differ

diff --git a/onyx.prez b/onyx.prez
index 82250f3bf8765e39a5e1d3a123b69b743dc2facb..676a9ca3b37cd156a70bae5a52c94b620b4cec4b 100644 (file)
--- 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 1bb19678d95e2efd4f41b89feae551f843a747f6..37d0dee873965a32d4634c2abccb4f616e62b903 100644 (file)
--- 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 7a013c1ff5d3498e6762b575eeebdaa1248ff785..ac805c4d8873c4629faf36c152f56bcf6e4e2679 100644 (file)
--- 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 a8ed93f12098604afa9759d951d30218bd48bc4b..0ebe506e724c9b263d3676601593940eb56a8f03 100644 (file)
--- 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