Fix Y-axis inconsistency

1 files changed, 186 insertions, 223 deletions

diff --git a/source/saw/main.c b/source/saw/main.c
index 1b10017..7147fd2 100644
--- a/source/saw/main.c
+++ b/source/saw/main.c
@@ -236,25 +236,35 @@ typedef struct {
   b8  enabled;
   b8  selected;
   i64 row;
-  f64 position;
-  f64 size;
+  f64 time;
+  f64 duration;
 } saw_ui_grid_item_t;
 
 typedef struct {
-  f64                 x0;
-  f64                 y0;
-  f64                 width;
-  f64                 height;
-  f64                 offset_x;
-  f64                 offset_y;
-  f64                 scale_x;
-  f64                 scale_y;
-  i64                 time_begin;
-  i64                 time_end;
-  i64                 time_cursor;
-  i64                 time_rate;
-  i64                 time_num; // numerator
-  i64                 time_den; // denominator
+  f64 x0;       // widget position x
+  f64 y0;       // widget position y
+  f64 width;    // widget width
+  f64 height;   // widget height
+  f64 offset_y; // grid offset y
+  f64 scale_x;  // grid scale x
+  f64 scale_y;  // grid scale y
+
+  // timeline
+  i64 time_begin;
+  i64 time_end;
+  i64 time_cursor;
+  i64 time_offset;
+
+  //  The time rate determines how to convert item time into position
+  //  on the X axis.
+  //
+  //    x = (time - time_offset) * scale_x / time_rate
+  //
+  i64 time_rate;
+
+  i64 meter_num; // numerator
+  i64 meter_den; // denominator
+
   i64                 items_size;
   saw_ui_grid_item_t *items;
 } saw_ui_grid_t;
@@ -1547,7 +1557,6 @@ static void saw_project_print_to_file(str_t file_name) {
 //
 //    TODO
 //    - UI library and tests.
-//    - Fix Y-axis inconsistency.
 //    - Grid widget.
 //    - Prefer nvgRGBAf instead of nvgRGBA.
 //
@@ -1575,10 +1584,8 @@ static void saw_ui_end(void) {
 static b8 saw_ui_button(f64 x0, f64 y0, f64 width, f64 height,
                         i64 color_index, str_t icon, str_t label,
                         b8 is_active) {
-  f64 frame_height = sapp_height();
-  f64 y            = frame_height - y0 - height;
-  b8  has_cursor   = saw_mouse_x >= x0 && saw_mouse_x < x0 + width &&
-                  saw_mouse_y >= y && saw_mouse_y < y + height;
+  b8 has_cursor = saw_mouse_x >= x0 && saw_mouse_x < x0 + width &&
+                  saw_mouse_y >= y0 && saw_mouse_y < y0 + height;
   saw_ui_color_t c = saw_ui_colors[color_index];
 
   if (has_cursor)
@@ -1595,7 +1602,7 @@ static b8 saw_ui_button(f64 x0, f64 y0, f64 width, f64 height,
     nvgFontSize(saw_nvg, height * .6);
     nvgFontFaceId(saw_nvg, saw_font_icons);
     nvgTextAlign(saw_nvg, NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
-    nvgText(saw_nvg, x0 + height * .5, y + height * .5, icon.values,
+    nvgText(saw_nvg, x0 + height * .5, y0 + height * .5, icon.values,
             icon.values + icon.size);
     x0 += height;
     width -= height * 2.;
@@ -1605,7 +1612,7 @@ static b8 saw_ui_button(f64 x0, f64 y0, f64 width, f64 height,
     nvgFontSize(saw_nvg, height * .8);
     nvgFontFaceId(saw_nvg, saw_font_text);
     nvgTextAlign(saw_nvg, NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
-    nvgText(saw_nvg, x0 + width * .5, y + height * .5, label.values,
+    nvgText(saw_nvg, x0 + width * .5, y0 + height * .5, label.values,
             label.values + label.size);
   }
 
@@ -1620,10 +1627,8 @@ static void saw_ui_value_float(f64 x0, f64 y0, f64 width, f64 height,
   if (data == NULL || !(scale < -EPS || scale > EPS))
     return;
 
-  f64 frame_height = sapp_height();
-  f64 y            = frame_height - y0 - height;
-  b8  has_cursor   = saw_mouse_x >= x0 && saw_mouse_x < x0 + width &&
-                  saw_mouse_y >= y && saw_mouse_y < y + height;
+  b8 has_cursor = saw_mouse_x >= x0 && saw_mouse_x < x0 + width &&
+                  saw_mouse_y >= y0 && saw_mouse_y < y0 + height;
   saw_ui_color_t c = saw_ui_colors[color_index];
 
   //  Process input
@@ -1667,7 +1672,7 @@ static void saw_ui_value_float(f64 x0, f64 y0, f64 width, f64 height,
     if (saw_ui_input_active == saw_ui_input_index ||
         (saw_ui_input_active == -1 && has_cursor)) {
       nvgBeginPath(saw_nvg);
-      nvgRect(saw_nvg, x0 + width * .5, y, width * .5, height);
+      nvgRect(saw_nvg, x0 + width * .5, y0, width * .5, height);
       nvgFillColor(saw_nvg, nvgRGBAf(.9f, .95f, .9f, .5f));
       nvgFill(saw_nvg);
     }
@@ -1679,7 +1684,7 @@ static void saw_ui_value_float(f64 x0, f64 y0, f64 width, f64 height,
       nvgFillColor(saw_nvg, nvgRGBAf(c.normal[0], c.normal[1],
                                      c.normal[2], c.normal[3]));
       nvgTextAlign(saw_nvg, NVG_ALIGN_LEFT | NVG_ALIGN_MIDDLE);
-      nvgText(saw_nvg, x0, y + height * 5. * .125, label.values,
+      nvgText(saw_nvg, x0, y0 + height * 5. * .125, label.values,
               label.values + label.size);
       x0 += width / 2;
     }
@@ -1693,7 +1698,7 @@ static void saw_ui_value_float(f64 x0, f64 y0, f64 width, f64 height,
     nvgTextAlign(saw_nvg, NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
     c8 buf[256];
     sprintf(buf, "%.3f", (f32) *data);
-    nvgText(saw_nvg, x0 + width * .25, y + height * 5. * .125, buf,
+    nvgText(saw_nvg, x0 + width * .25, y0 + height * 5. * .125, buf,
             NULL);
   }
 
@@ -1710,10 +1715,8 @@ static void saw_ui_value_int(f64 x0, f64 y0, f64 width, f64 height,
   if (data == NULL || !(scale < -EPS || scale > EPS))
     return;
 
-  f64 frame_height = sapp_height();
-  f64 y            = frame_height - y0 - height;
-  b8  has_cursor   = saw_mouse_x >= x0 && saw_mouse_x < x0 + width &&
-                  saw_mouse_y >= y && saw_mouse_y < y + height;
+  b8 has_cursor = saw_mouse_x >= x0 && saw_mouse_x < x0 + width &&
+                  saw_mouse_y >= y0 && saw_mouse_y < y0 + height;
   saw_ui_color_t c = saw_ui_colors[color_index];
 
   //  Process input
@@ -1757,7 +1760,7 @@ static void saw_ui_value_int(f64 x0, f64 y0, f64 width, f64 height,
     if (saw_ui_input_active == saw_ui_input_index ||
         (saw_ui_input_active == -1 && has_cursor)) {
       nvgBeginPath(saw_nvg);
-      nvgRect(saw_nvg, x0 + width * .5, y, width * .5, height);
+      nvgRect(saw_nvg, x0 + width * .5, y0, width * .5, height);
       nvgFillColor(saw_nvg, nvgRGBAf(.9f, .95f, .9f, .5f));
       nvgFill(saw_nvg);
     }
@@ -1769,7 +1772,7 @@ static void saw_ui_value_int(f64 x0, f64 y0, f64 width, f64 height,
       nvgFillColor(saw_nvg, nvgRGBAf(c.normal[0], c.normal[1],
                                      c.normal[2], c.normal[3]));
       nvgTextAlign(saw_nvg, NVG_ALIGN_LEFT | NVG_ALIGN_MIDDLE);
-      nvgText(saw_nvg, x0, y + (height * 5) / 8, label.values,
+      nvgText(saw_nvg, x0, y0 + (height * 5) / 8, label.values,
               label.values + label.size);
       x0 += width / 2;
     }
@@ -1783,7 +1786,7 @@ static void saw_ui_value_int(f64 x0, f64 y0, f64 width, f64 height,
     nvgTextAlign(saw_nvg, NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
     c8 buf[256];
     sprintf(buf, "%lld", *data);
-    nvgText(saw_nvg, x0 + width * .25, y + (height * 5.) * .125, buf,
+    nvgText(saw_nvg, x0 + width * .25, y0 + (height * 5.) * .125, buf,
             NULL);
   }
 
@@ -1801,10 +1804,8 @@ static void saw_ui_value_list(f64 x0, f64 y0, f64 width, f64 height,
   if (data == NULL || names == NULL || !(scale < -EPS || scale > EPS))
     return;
 
-  i64 frame_height = sapp_height();
-  i64 y            = frame_height - y0 - height;
-  b8  has_cursor   = saw_mouse_x >= x0 && saw_mouse_x < x0 + width &&
-                  saw_mouse_y >= y && saw_mouse_y < y + height;
+  b8 has_cursor = saw_mouse_x >= x0 && saw_mouse_x < x0 + width &&
+                  saw_mouse_y >= y0 && saw_mouse_y < y0 + height;
   saw_ui_color_t c = saw_ui_colors[color_index];
 
   //  Process input
@@ -1848,7 +1849,7 @@ static void saw_ui_value_list(f64 x0, f64 y0, f64 width, f64 height,
     if (saw_ui_input_active == saw_ui_input_index ||
         (saw_ui_input_active == -1 && has_cursor)) {
       nvgBeginPath(saw_nvg);
-      nvgRect(saw_nvg, x0 + width * .5, y, width * .5, height);
+      nvgRect(saw_nvg, x0 + width * .5, y0, width * .5, height);
       nvgFillColor(saw_nvg, nvgRGBAf(.9f, .95f, .9f, .5f));
       nvgFill(saw_nvg);
     }
@@ -1860,7 +1861,7 @@ static void saw_ui_value_list(f64 x0, f64 y0, f64 width, f64 height,
       nvgFillColor(saw_nvg, nvgRGBAf(c.normal[0], c.normal[1],
                                      c.normal[2], c.normal[3]));
       nvgTextAlign(saw_nvg, NVG_ALIGN_LEFT | NVG_ALIGN_MIDDLE);
-      nvgText(saw_nvg, x0, y + height * 5 * .125, label.values,
+      nvgText(saw_nvg, x0, y0 + height * 5 * .125, label.values,
               label.values + label.size);
       x0 += width / 2;
     }
@@ -1873,7 +1874,7 @@ static void saw_ui_value_list(f64 x0, f64 y0, f64 width, f64 height,
                                      c.active[2], c.active[3]));
     nvgTextAlign(saw_nvg, NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
     str_t s = names[*data];
-    nvgText(saw_nvg, x0 + width * .25, y + height * 5 * .125,
+    nvgText(saw_nvg, x0 + width * .25, y0 + height * 5 * .125,
             s.values, s.values + s.size);
   }
 
@@ -1956,7 +1957,6 @@ static void saw_ui_header(f64 x0, f64 y0, f64 width, f64 height) {
 }
 
 static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
-  f64 frame_height = sapp_height();
   f64 track_height = 60.;
   f64 grid_scale   = 50.;
   f64 grid_rate    = 3.;
@@ -1970,11 +1970,10 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
   //
 
   nvgBeginPath(saw_nvg);
-  nvgRect(saw_nvg, x0, frame_height - y0 - height + border, width,
+  nvgRect(saw_nvg, x0, y0 + border, width,
+          track_height * .2 - border * 2.);
+  nvgRect(saw_nvg, x0, y0 + border + track_height * .8, width,
           track_height * .2 - border * 2.);
-  nvgRect(saw_nvg, x0,
-          frame_height - y0 - height + border + track_height * .8,
-          width, track_height * .2 - border * 2.);
   nvgFillColor(saw_nvg, nvgRGBA(180, 140, 120, 160));
   nvgFill(saw_nvg);
 
@@ -1989,13 +1988,13 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
     if (!roll->enabled)
       continue;
 
-    f64 top    = frame_height - y0 - height + track_height;
-    f64 bottom = frame_height - y0;
+    f64 top    = y0 + track_height;
+    f64 bottom = y0 + height;
     f64 dx     = x0 + saw_compose.ui_offset_x;
     f64 l      = dx + (roll->time * grid_scale) / SAMPLE_RATE;
     f64 r      = l + (roll->duration * grid_scale) / SAMPLE_RATE;
-    f64 u      = frame_height - y0 - height + track_height +
-            saw_compose.ui_offset_y + roll->track * track_height;
+    f64 u      = top + saw_compose.ui_offset_y +
+            roll->track * track_height;
     f64 d = u + track_height;
 
     f64 s = grid_scale / grid_rate;
@@ -2084,19 +2083,17 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
       saw_lbutton_down &&
       saw_mouse_x >= x0 + saw_compose.ui_offset_x &&
       saw_mouse_x < x0 + width) {
-    if (!saw_compose.grid_input &&
-        saw_mouse_y >= frame_height - y0 - height &&
-        saw_mouse_y < frame_height - y0 - height + track_height)
+    if (!saw_compose.grid_input && saw_mouse_y >= y0 &&
+        saw_mouse_y < y0 + track_height)
       saw_playback_frame = ((saw_mouse_x - saw_compose.ui_offset_x) *
                             SAMPLE_RATE) /
                            grid_scale;
     else if (saw_edit_mode == EDIT_MODE_HAND && saw_lbutton_click &&
-             saw_mouse_y >=
-                 frame_height - y0 - height + track_height &&
-             saw_mouse_y < frame_height - y0) {
-      i64 track = (i64) floor((saw_mouse_y - saw_compose.ui_offset_y -
-                               frame_height + y0 + height) /
-                              track_height) -
+             saw_mouse_y >= y0 + track_height &&
+             saw_mouse_y < y0 + height) {
+      i64 track = (i64) floor(
+                      (saw_mouse_y - saw_compose.ui_offset_y - y0) /
+                      track_height) -
                   1;
       i64 cell = (i64) floor(
           ((saw_mouse_x - saw_compose.ui_offset_x) * grid_rate) /
@@ -2113,12 +2110,12 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
 
       f64 x = x0 + saw_compose.ui_offset_x +
               (frame * grid_scale) / SAMPLE_RATE;
-      f64 y = frame_height - y0 - height + track_height +
-              saw_compose.ui_offset_y + track * track_height;
+      f64 y = y0 + track_height + saw_compose.ui_offset_y +
+              track * track_height;
 
       if (track < 0 || track >= TRACK_COUNT || x < x0 ||
-          x >= x0 + width || y < frame_height - y0 - height ||
-          y + track_height >= frame_height - y0)
+          x >= x0 + width || y < y0 ||
+          y + track_height >= y0 + height)
         n = -1;
 
       if (n != -1) {
@@ -2161,9 +2158,9 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
       if (saw_current_roll == -1)
         break;
 
-      i64 track = (i64) floor((saw_mouse_y - saw_compose.ui_offset_y -
-                               frame_height + y0 + height) /
-                              track_height) -
+      i64 track = (i64) floor(
+                      (saw_mouse_y - saw_compose.ui_offset_y - y0) /
+                      track_height) -
                   1;
       i64 cell = (i64) floor(
           ((saw_mouse_x - saw_compose.ui_offset_x) * grid_rate) /
@@ -2214,9 +2211,8 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
 
   if (saw_mbutton_click ||
       (saw_edit_mode == EDIT_MODE_PAN && saw_lbutton_click)) {
-    if (saw_mouse_x >= x0 &&
-        saw_mouse_y >= frame_height - y0 - height + track_height &&
-        saw_mouse_x < x0 + width && saw_mouse_y < frame_height - y0)
+    if (saw_mouse_x >= x0 && saw_mouse_y >= y0 + track_height &&
+        saw_mouse_x < x0 + width && saw_mouse_y < y0 + height)
       saw_compose.ui_offset_input = 1;
   }
 
@@ -2292,7 +2288,7 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
 
   if (x >= x0 - border * 2 && x < x0 + width) {
     nvgBeginPath(saw_nvg);
-    nvgRect(saw_nvg, x, frame_height - y0 - height, w, height);
+    nvgRect(saw_nvg, x, y0, w, height);
     nvgFillColor(saw_nvg, nvgRGBA(240, 240, 80, 180));
     nvgFill(saw_nvg);
   }
@@ -2302,8 +2298,7 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
 
   if (saw_mouse_on && !hover_any && !saw_compose.grid_input &&
       saw_mouse_x >= x0 + saw_compose.ui_offset_x) {
-    i64 track = (saw_mouse_y - saw_compose.ui_offset_y -
-                 frame_height + y0 + height) /
+    i64 track = (saw_mouse_y - saw_compose.ui_offset_y - y0) /
                     track_height -
                 1;
     i64 cell = (i64) floor(
@@ -2311,14 +2306,13 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
         grid_scale);
     f64 x = x0 + saw_compose.ui_offset_x +
             (cell * grid_scale) / grid_rate;
-    f64 y = frame_height - y0 - height + track_height +
-            saw_compose.ui_offset_y + track * track_height;
+    f64 y = y0 + track_height + saw_compose.ui_offset_y +
+            track * track_height;
     f64 w = grid_scale / grid_rate;
 
     if (track >= 0 && track < TRACK_COUNT && x >= x0 &&
-        x + w < x0 + width &&
-        y >= frame_height - y0 - height + track_height &&
-        y + track_height < frame_height - y0) {
+        x + w < x0 + width && y >= y0 + track_height &&
+        y + track_height < y0 + height) {
       nvgBeginPath(saw_nvg);
       nvgRect(saw_nvg, x + border, y + border, w - border * 2,
               track_height - border * 2);
@@ -2331,17 +2325,15 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
   //
 
   if (saw_mouse_on && saw_mouse_x >= x0 + saw_compose.ui_offset_x &&
-      saw_mouse_x < x0 + width &&
-      saw_mouse_y >= frame_height - y0 - height &&
-      saw_mouse_y < frame_height - y0) {
+      saw_mouse_x < x0 + width && saw_mouse_y >= y0 &&
+      saw_mouse_y < y0 + height) {
     f64 dx = x0 + saw_compose.ui_offset_x;
     f64 s  = grid_scale / grid_rate;
     f64 x  = dx + ((saw_mouse_x - dx + s / 2) / s) * s;
     f64 w  = border * 4;
 
     nvgBeginPath(saw_nvg);
-    nvgRect(saw_nvg, x - w / 2, frame_height - y0 - height, w,
-            height);
+    nvgRect(saw_nvg, x - w / 2, y0, w, height);
     nvgFillColor(saw_nvg, nvgRGBA(80, 80, 240, 160));
     nvgFill(saw_nvg);
   }
@@ -2350,12 +2342,11 @@ static void saw_ui_compose(f64 x0, f64 y0, f64 width, f64 height) {
 static void saw_ui_choose_instrument(saw_track_t *track, f64 x0,
                                      f64 y0, f64 width, f64 height) {
   f64 text_height = 40.;
-  f64 y           = y0 + height - text_height;
 
   x0 += width * .125;
   width *= .75;
 
-  if (saw_ui_button(x0, y, width, text_height, TINT_ORANGE,
+  if (saw_ui_button(x0, y0, width, text_height, TINT_ORANGE,
                     SZ("\uf83e"), SZ("Oscillator"), 1)) {
     track->instrument = INSTRUMENT_OSCILLATOR;
 
@@ -2374,10 +2365,8 @@ static void saw_ui_choose_instrument(saw_track_t *track, f64 x0,
     };
   }
 
-  y -= text_height;
-
-  if (saw_ui_button(x0, y, width, text_height, TINT_ORANGE,
-                    SZ("\uf1c7"), SZ("Sampler"), 1)) {
+  if (saw_ui_button(x0, y0 + text_height, width, text_height,
+                    TINT_ORANGE, SZ("\uf1c7"), SZ("Sampler"), 1)) {
     track->instrument = INSTRUMENT_SAMPLER;
 
     memset(&track->sampler, 0, sizeof track->sampler);
@@ -2408,59 +2397,55 @@ static void saw_ui_choose_instrument(saw_track_t *track, f64 x0,
 
 static void saw_ui_oscillator(saw_oscillator_t *osc, f64 x0, f64 y0,
                               f64 width, f64 height) {
-  f64 frame_height = sapp_height();
-  f64 text_height  = 33.;
-  f64 x            = x0 + width / 12.;
-  f64 w            = width * 5. / 6.;
+  f64 text_height = 33.;
+  f64 x           = x0 + width / 12.;
+  f64 w           = width * 5. / 6.;
 
   str_t wave_names[] = {
     SZ("Sine"),   SZ("Saw up"),   SZ("Saw down"),
     SZ("Sqr up"), SZ("Sqr down"), SZ("Kick"),
   };
 
-  saw_ui_value_list(x, y0 + height - text_height, w, text_height,
-                    TINT_WHITE, SZ("Wave"), 500.,
-                    sizeof wave_names / sizeof *wave_names,
+  saw_ui_value_list(x, y0, w, text_height, TINT_WHITE, SZ("Wave"),
+                    500., sizeof wave_names / sizeof *wave_names,
                     wave_names, &osc->wave);
-  saw_ui_value_float(x, y0 + height - text_height * 2., w,
-                     text_height, TINT_WHITE, SZ("Warp"), 10000, -1.,
-                     1., &osc->warp);
+  saw_ui_value_float(x, y0 + text_height * 1., w, text_height,
+                     TINT_WHITE, SZ("Warp"), 10000, -1., 1.,
+                     &osc->warp);
   //  FIXME
   //  Looping phase value.
-  saw_ui_value_float(x, y0 + height - text_height * 3., w,
-                     text_height, TINT_WHITE, SZ("Phase"), 10000, 0.,
-                     1., &osc->phase);
-  saw_ui_value_float(x, y0 + height - text_height * 4., w,
-                     text_height, TINT_WHITE, SZ("Stereo"), 10000, 0.,
-                     2., &osc->stereo_width);
-  saw_ui_value_float(x, y0 + height - text_height * 5., w,
-                     text_height, TINT_WHITE, SZ("Volume"), 10000, 0.,
-                     2., &osc->volume);
+  saw_ui_value_float(x, y0 + text_height * 2., w, text_height,
+                     TINT_WHITE, SZ("Phase"), 10000, 0., 1.,
+                     &osc->phase);
+  saw_ui_value_float(x, y0 + text_height * 3., w, text_height,
+                     TINT_WHITE, SZ("Stereo"), 10000, 0., 2.,
+                     &osc->stereo_width);
+  saw_ui_value_float(x, y0 + text_height * 4., w, text_height,
+                     TINT_WHITE, SZ("Volume"), 10000, 0., 2.,
+                     &osc->volume);
 
   nvgFontSize(saw_nvg, text_height);
   nvgFontFaceId(saw_nvg, saw_font_text);
   nvgFillColor(saw_nvg, nvgRGBA(255, 255, 255, 255));
   nvgTextAlign(saw_nvg, NVG_ALIGN_LEFT | NVG_ALIGN_BASELINE);
-  nvgText(saw_nvg, x, frame_height - y0 - height + text_height * 6.5,
-          "Envelope", 0);
-
-  saw_ui_value_float(x, y0 + height - text_height * 8., w,
-                     text_height, TINT_WHITE, SZ("Sustain"), 10000,
-                     0., 1., &osc->envelope.sustain);
-  saw_ui_value_float(x, y0 + height - text_height * 9., w,
-                     text_height, TINT_WHITE, SZ("Attack"), 100000,
-                     0., 6., &osc->envelope.attack);
-  saw_ui_value_float(x, y0 + height - text_height * 10., w,
-                     text_height, TINT_WHITE, SZ("Decay"), 100000, 0.,
-                     6., &osc->envelope.decay);
-  saw_ui_value_float(x, y0 + height - text_height * 11., w,
-                     text_height, TINT_WHITE, SZ("Release"), 100000,
-                     0., 6., &osc->envelope.release);
+  nvgText(saw_nvg, x, y0 + text_height * 6.5, "Envelope", 0);
+
+  saw_ui_value_float(x, y0 + text_height * 7., w, text_height,
+                     TINT_WHITE, SZ("Sustain"), 10000, 0., 1.,
+                     &osc->envelope.sustain);
+  saw_ui_value_float(x, y0 + text_height * 8., w, text_height,
+                     TINT_WHITE, SZ("Attack"), 100000, 0., 6.,
+                     &osc->envelope.attack);
+  saw_ui_value_float(x, y0 + text_height * 9., w, text_height,
+                     TINT_WHITE, SZ("Decay"), 100000, 0., 6.,
+                     &osc->envelope.decay);
+  saw_ui_value_float(x, y0 + text_height * 10., w, text_height,
+                     TINT_WHITE, SZ("Release"), 100000, 0., 6.,
+                     &osc->envelope.release);
 }
 
 static void saw_ui_sampler(saw_sampler_t *sampler, f64 x0, f64 y0,
                            f64 width, f64 height) {
-  f64 frame_height  = sapp_height();
   f64 text_height   = 33.;
   f64 x             = x0 + width / 12.;
   f64 w             = width * 5. / 6.;
@@ -2536,7 +2521,7 @@ static void saw_ui_sampler(saw_sampler_t *sampler, f64 x0, f64 y0,
     if (sampler->outline.size > 0) {
       f64 dw = (f64) w / (f64) sampler->outline.size;
       f64 h  = sample_height * .5;
-      f64 y  = frame_height - y0 - height + h;
+      f64 y  = y0 + h;
 
       if (dw > .5) {
         nvgBeginPath(saw_nvg);
@@ -2555,61 +2540,49 @@ static void saw_ui_sampler(saw_sampler_t *sampler, f64 x0, f64 y0,
     nvgFontFaceId(saw_nvg, saw_font_text);
     nvgFillColor(saw_nvg, nvgRGBAf(1.f, .7f, .2f, .5f));
     nvgTextAlign(saw_nvg, NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
-    nvgText(saw_nvg, x0 + width * .5,
-            frame_height - y0 - height + sample_height * .5,
+    nvgText(saw_nvg, x0 + width * .5, y0 + sample_height * .5,
             "Drop a WAV file here", NULL);
   }
 
-  saw_ui_value_float(x, y0 + height - sample_height - text_height, w,
-                     text_height, TINT_WHITE, SZ("Begin"), 100000, 0.,
-                     60., &sampler->begin);
-  saw_ui_value_float(x,
-                     y0 + height - sample_height - text_height * 2.,
-                     w, text_height, TINT_WHITE, SZ("End"), 100000,
-                     0., 60., &sampler->end);
-  saw_ui_value_float(x,
-                     y0 + height - sample_height - text_height * 3.,
-                     w, text_height, TINT_WHITE, SZ("Crossfade"),
-                     100000, 0., 60., &sampler->crossfade);
-  saw_ui_value_float(x,
-                     y0 + height - sample_height - text_height * 4.,
-                     w, text_height, TINT_WHITE, SZ("Base freq."),
-                     500, 1., 44100., &sampler->base_frequency);
-  saw_ui_value_float(x,
-                     y0 + height - sample_height - text_height * 5.,
-                     w, text_height, TINT_WHITE, SZ("Volume."), 10000,
+  saw_ui_value_float(x, y0 + sample_height, w, text_height,
+                     TINT_WHITE, SZ("Begin"), 100000, 0., 60.,
+                     &sampler->begin);
+  saw_ui_value_float(x, y0 + sample_height + text_height * 1., w,
+                     text_height, TINT_WHITE, SZ("End"), 100000, 0.,
+                     60., &sampler->end);
+  saw_ui_value_float(x, y0 + sample_height + text_height * 2., w,
+                     text_height, TINT_WHITE, SZ("Crossfade"), 100000,
+                     0., 60., &sampler->crossfade);
+  saw_ui_value_float(x, y0 + sample_height + text_height * 3., w,
+                     text_height, TINT_WHITE, SZ("Base freq."), 500,
+                     1., 44100., &sampler->base_frequency);
+  saw_ui_value_float(x, y0 + sample_height + text_height * 4., w,
+                     text_height, TINT_WHITE, SZ("Volume."), 10000,
                      0., 2., &sampler->volume);
 
   nvgFontSize(saw_nvg, text_height);
   nvgFontFaceId(saw_nvg, saw_font_text);
   nvgFillColor(saw_nvg, nvgRGBA(255, 255, 255, 255));
   nvgTextAlign(saw_nvg, NVG_ALIGN_LEFT | NVG_ALIGN_BASELINE);
-  nvgText(saw_nvg, x,
-          frame_height - y0 - height + sample_height +
-              text_height * 6.5,
+  nvgText(saw_nvg, x, y0 + sample_height + text_height * 6.5,
           "Envelope", NULL);
 
-  saw_ui_value_float(x,
-                     y0 + height - sample_height - text_height * 8.,
-                     w, text_height, TINT_WHITE, SZ("Sustain"), 10000,
+  saw_ui_value_float(x, y0 + sample_height + text_height * 7., w,
+                     text_height, TINT_WHITE, SZ("Sustain"), 10000,
                      0., 1., &sampler->envelope.sustain);
-  saw_ui_value_float(x,
-                     y0 + height - sample_height - text_height * 9.,
-                     w, text_height, TINT_WHITE, SZ("Attack"), 100000,
+  saw_ui_value_float(x, y0 + sample_height + text_height * 8., w,
+                     text_height, TINT_WHITE, SZ("Attack"), 100000,
                      0., 6., &sampler->envelope.attack);
-  saw_ui_value_float(x,
-                     y0 + height - sample_height - text_height * 10.,
-                     w, text_height, TINT_WHITE, SZ("Decay"), 100000,
-                     0., 6., &sampler->envelope.decay);
-  saw_ui_value_float(x,
-                     y0 + height - sample_height - text_height * 11.,
-                     w, text_height, TINT_WHITE, SZ("Release"),
-                     100000, 0., 6., &sampler->envelope.release);
+  saw_ui_value_float(x, y0 + sample_height + text_height * 9., w,
+                     text_height, TINT_WHITE, SZ("Decay"), 100000, 0.,
+                     6., &sampler->envelope.decay);
+  saw_ui_value_float(x, y0 + sample_height + text_height * 10., w,
+                     text_height, TINT_WHITE, SZ("Release"), 100000,
+                     0., 6., &sampler->envelope.release);
 }
 
 static void saw_ui_track(saw_track_t *track, f64 x0, f64 y0,
                          f64 width, f64 height, str_t title) {
-  f64 frame_height  = sapp_height();
   f64 text_height   = 33.;
   f64 header_offset = 60.;
   f64 border        = 2.;
@@ -2619,17 +2592,15 @@ static void saw_ui_track(saw_track_t *track, f64 x0, f64 y0,
   nvgTextAlign(saw_nvg, NVG_ALIGN_LEFT | NVG_ALIGN_BASELINE);
   nvgFillColor(saw_nvg, nvgRGBA(255, 255, 255, 255));
 
-  nvgText(saw_nvg, x0 + border * 2.,
-          frame_height - y0 - height + text_height - border * 2.,
+  nvgText(saw_nvg, x0 + border * 2., y0 + text_height - border * 2.,
           title.values, title.values + title.size);
 
   if (track->instrument != INSTRUMENT_NONE) {
     f64 x = x0 + width - text_height * 1.5;
-    f64 y = frame_height - y0 - height;
     f64 s = text_height;
 
-    b8 has_cursor = saw_mouse_x >= x && saw_mouse_y >= y &&
-                    saw_mouse_x < x + s && saw_mouse_y < y + s;
+    b8 has_cursor = saw_mouse_x >= x && saw_mouse_y >= y0 &&
+                    saw_mouse_x < x + s && saw_mouse_y < y0 + s;
 
     c8 xmark[] = "\uf00d";
 
@@ -2641,7 +2612,7 @@ static void saw_ui_track(saw_track_t *track, f64 x0, f64 y0,
     else
       nvgFillColor(saw_nvg, nvgRGBA(240, 200, 100, 160));
 
-    nvgText(saw_nvg, x + border, y + s - border, xmark,
+    nvgText(saw_nvg, x + border, y0 + s - border, xmark,
             xmark + (sizeof xmark - 1));
 
     if (has_cursor && saw_lbutton_click) {
@@ -2654,24 +2625,23 @@ static void saw_ui_track(saw_track_t *track, f64 x0, f64 y0,
 
   switch (track->instrument) {
     case INSTRUMENT_OSCILLATOR:
-      saw_ui_oscillator(&track->oscillator, x0, y0, width,
-                        height - header_offset - text_height);
+      saw_ui_oscillator(&track->oscillator, x0, y0 + header_offset,
+                        width, height - header_offset);
       break;
 
     case INSTRUMENT_SAMPLER:
-      saw_ui_sampler(&track->sampler, x0, y0, width,
-                     height - header_offset - text_height);
+      saw_ui_sampler(&track->sampler, x0, y0 + header_offset, width,
+                     height - header_offset);
       break;
 
     default:
-      saw_ui_choose_instrument(track, x0, y0, width,
-                               height - header_offset - text_height);
+      saw_ui_choose_instrument(track, x0, y0 + header_offset, width,
+                               height - header_offset);
   }
 }
 
 static void saw_ui_roll(saw_roll_t *roll, f64 x0, f64 y0, f64 width,
                         f64 height, str_t title) {
-  f64 frame_height    = sapp_height();
   f64 text_height     = 35.;
   f64 header_height   = 35.;
   f64 pianokey_height = 35.;
@@ -2687,8 +2657,7 @@ static void saw_ui_roll(saw_roll_t *roll, f64 x0, f64 y0, f64 width,
   //
 
   nvgBeginPath(saw_nvg);
-  nvgRect(saw_nvg, x0, frame_height - y0 - height, width,
-          text_height);
+  nvgRect(saw_nvg, x0, y0, width, text_height);
   nvgFillColor(saw_nvg, nvgRGBA(80, 60, 50, 160));
   nvgFill(saw_nvg);
 
@@ -2697,8 +2666,7 @@ static void saw_ui_roll(saw_roll_t *roll, f64 x0, f64 y0, f64 width,
   nvgFontFaceId(saw_nvg, saw_font_text);
   nvgTextAlign(saw_nvg, NVG_ALIGN_LEFT | NVG_ALIGN_BASELINE);
   nvgFillColor(saw_nvg, nvgRGBA(255, 255, 255, 255));
-  nvgText(saw_nvg, x0 + border * 2.,
-          frame_height - y0 - height + text_height - border * 2,
+  nvgText(saw_nvg, x0 + border * 2., y0 + text_height - border * 2,
           title.values, title.values + title.size);
   nvgFill(saw_nvg);
 
@@ -2729,7 +2697,7 @@ static void saw_ui_roll(saw_roll_t *roll, f64 x0, f64 y0, f64 width,
   //
   {
     f64 x      = x0 + pianokey_width + sheet_offset;
-    f64 y      = frame_height - y0 - height + text_height;
+    f64 y      = y0 + text_height;
     f64 w      = width - pianokey_width - sheet_offset;
     f64 h      = header_height * .2;
     f64 border = 5.;
@@ -2808,12 +2776,11 @@ static void saw_ui_roll(saw_roll_t *roll, f64 x0, f64 y0, f64 width,
 
     for (i64 pitch = 0; pitch < PITCH_COUNT; pitch++) {
       f64 x = x0 + border;
-      f64 y = frame_height - y0 - (pitch + 1) * pianokey_height +
-              border + roll->ui_offset_y;
-      if (y > frame_height - y0 - pianokey_height)
+      f64 y = y0 + height - (pitch + 1) * pianokey_height + border +
+              roll->ui_offset_y;
+      if (y > y0 + height - pianokey_height)
         continue;
-      if (y <
-          frame_height - y0 - height + text_height + header_height)
+      if (y < y0 + text_height + header_height)
         break;
 
       b8 has_cursor = saw_mouse_x >= x && saw_mouse_x < x + w &&
@@ -2894,12 +2861,11 @@ static void saw_ui_roll(saw_roll_t *roll, f64 x0, f64 y0, f64 width,
   if (saw_mbutton_click || (saw_edit_mode == EDIT_MODE_PAN &&
                             saw_lbutton_click && !roll->loop_input)) {
     if (saw_mouse_x >= x0 + pianokey_width + sheet_offset &&
-        saw_mouse_y >= frame_height - y0 - height + text_height &&
-        saw_mouse_x < x0 + width && saw_mouse_y < frame_height - y0)
+        saw_mouse_y >= y0 + text_height && saw_mouse_x < x0 + width &&
+        saw_mouse_y < y0 + height)
       roll->ui_offset_x_input = 1;
-    if (saw_mouse_x >= x0 &&
-        saw_mouse_y >= frame_height - y0 - height + text_height &&
-        saw_mouse_x < x0 + width && saw_mouse_y < frame_height - y0)
+    if (saw_mouse_x >= x0 && saw_mouse_y >= y0 + text_height &&
+        saw_mouse_x < x0 + width && saw_mouse_y < y0 + height)
       roll->ui_offset_y_input = 1;
   }
 
@@ -2914,12 +2880,12 @@ static void saw_ui_roll(saw_roll_t *roll, f64 x0, f64 y0, f64 width,
   //
 
   for (i64 pitch = 0; pitch < PITCH_COUNT; pitch++) {
-    f64 y = frame_height - y0 - (pitch + 1) * pianokey_height +
+    f64 y = y0 + height - (pitch + 1) * pianokey_height +
             roll->ui_offset_y;
 
-    if (y > frame_height - y0 - pianokey_height)
+    if (y > y0 + height - pianokey_height)
       continue;
-    if (y < frame_height - y0 - height + text_height + header_height)
+    if (y < y0 + text_height + header_height)
       break;
 
     f64 h = pianokey_height;
@@ -3008,12 +2974,12 @@ static void saw_ui_roll(saw_roll_t *roll, f64 x0, f64 y0, f64 width,
     if (!note->enabled)
       continue;
 
-    f64 y = frame_height - y0 - (note->pitch + 1) * pianokey_height +
+    f64 y = y0 + height - (note->pitch + 1) * pianokey_height +
             roll->ui_offset_y;
 
-    if (y + pianokey_height > frame_height - y0)
+    if (y + pianokey_height > y0 + height)
       continue;
-    if (y < frame_height - y0 - height + text_height + header_height)
+    if (y < y0 + text_height + header_height)
       continue;
 
     f64 x = x0 + pianokey_width + sheet_offset + roll->ui_offset_x +
@@ -3146,8 +3112,7 @@ static void saw_ui_roll(saw_roll_t *roll, f64 x0, f64 y0, f64 width,
     if (x >= x0 + pianokey_width + sheet_offset - border * 2. &&
         x < x0 + width) {
       nvgBeginPath(saw_nvg);
-      nvgRect(saw_nvg, x, frame_height - y0 - height + text_height, w,
-              height - text_height);
+      nvgRect(saw_nvg, x, y0 + text_height, w, height - text_height);
       nvgFillColor(saw_nvg, nvgRGBA(240, 240, 80, 180));
       nvgFill(saw_nvg);
     }
@@ -3157,17 +3122,15 @@ static void saw_ui_roll(saw_roll_t *roll, f64 x0, f64 y0, f64 width,
   //
   if (saw_mouse_on &&
       saw_mouse_x >= x0 + pianokey_width + sheet_offset &&
-      saw_mouse_x < x0 + width &&
-      saw_mouse_y >= frame_height - y0 - height &&
-      saw_mouse_y < frame_height - y0) {
+      saw_mouse_x < x0 + width && saw_mouse_y >= y0 &&
+      saw_mouse_y < y0 + height) {
     f64 dx = x0 + pianokey_width + sheet_offset + roll->ui_offset_x;
     f64 x  = dx + floor((saw_mouse_x - dx) / sheet_scale + .5) *
                      sheet_scale;
     f64 w = border * 4.;
 
     nvgBeginPath(saw_nvg);
-    nvgRect(saw_nvg, x - w * .5,
-            frame_height - y0 - height + text_height, w,
+    nvgRect(saw_nvg, x - w * .5, y0 + text_height, w,
             height - text_height);
     nvgFillColor(saw_nvg, nvgRGBA(80, 80, 240, 160));
     nvgFill(saw_nvg);
@@ -3432,16 +3395,16 @@ static void saw_frame(void) {
         //  Render header
         //
 
-        saw_ui_header(0,                            // x0
-                      frame_height - header_height, // y0
-                      frame_width,                  // width
-                      header_height                 // height
+        saw_ui_header(0,            // x0
+                      0,            // y0
+                      frame_width,  // width
+                      header_height // height
         );
 
         //  Render compose view
         //
         saw_ui_compose(0,                         // x0
-                       roll_height,               // y0
+                       header_height,             // y0
                        frame_width - track_width, // width
                        compose_height             // height
         );
@@ -3455,7 +3418,7 @@ static void saw_frame(void) {
 
           saw_ui_track(saw_tracks + saw_current_track, // track
                        frame_width - track_width,      // x0
-                       0,                              // y0
+                       header_height,                  // y0
                        track_width,                    // width
                        track_height,                   // height
                        kit_str(strlen(buf), buf)       // label
@@ -3469,12 +3432,12 @@ static void saw_frame(void) {
           c8 buf[64];
           sprintf(buf, "Sheet %lld", saw_current_roll + 1);
 
-          saw_ui_roll(saw_rolls + saw_current_roll, // roll
-                      0,                            // x0
-                      0,                            // y0
-                      frame_width - track_width,    // width
-                      roll_height,                  // height
-                      kit_str(strlen(buf), buf)     // label
+          saw_ui_roll(saw_rolls + saw_current_roll,   // roll
+                      0,                              // x0
+                      header_height + compose_height, // y0
+                      frame_width - track_width,      // width
+                      roll_height,                    // height
+                      kit_str(strlen(buf), buf)       // label
           );
         }
 
@@ -3492,16 +3455,16 @@ static void saw_frame(void) {
           .y0          = 0.,
           .width       = 0.,
           .height      = 0.,
-          .offset_x    = 0.,
           .offset_y    = 0.,
-          .scale_x     = 1.,
-          .scale_y     = 1.,
+          .scale_x     = 10.,
+          .scale_y     = 10.,
           .time_begin  = 0,
           .time_end    = time_rate * 10,
           .time_cursor = 0,
+          .time_offset = 0,
           .time_rate   = time_rate,
-          .time_num    = 4,
-          .time_den    = 4,
+          .meter_num   = 4,
+          .meter_den   = 4,
           .items_size  = sizeof items / sizeof *items,
           .items       = items,
         };