Smooth scrolling (#423)

* parse viewport events

* progress toward pixel scrolling

* ITS WORKING

* fix basic scrolling gaps

* add limit to number of old surfaces to store

* set cursor destination based on rendered location not global grid

src/bridge/events.rs

@@ -216,6 +216,13 @@ pub enum RedrawEvent {
         scrolled: bool,
         separator_character: String,
     },
+    WindowViewport {
+        grid: u64,
+        top_line: f64,
+        bottom_line: f64,
+        current_line: f64,
+        current_column: f64,
+    },
     CommandLineShow {
         content: StyledContent,
         position: u64,
@@ -732,6 +739,27 @@ fn parse_msg_set_pos(msg_set_pos_arguments: Vec<Value>) -> Result<RedrawEvent> {
     })
 }
 
+fn parse_win_viewport(win_viewport_arguments: Vec<Value>) -> Result<RedrawEvent> {
+    let values = [
+        Value::Nil,
+        Value::Nil,
+        Value::Nil,
+        Value::Nil,
+        Value::Nil,
+        Value::Nil,
+    ];
+    let [grid, _window, top_line, bottom_line, current_line, current_column] =
+        extract_values(win_viewport_arguments, values)?;
+
+    Ok(RedrawEvent::WindowViewport {
+        grid: parse_u64(grid)?,
+        top_line: parse_f64(top_line)?,
+        bottom_line: parse_f64(bottom_line)?,
+        current_line: parse_f64(current_line)?,
+        current_column: parse_f64(current_column)?,
+    })
+}
+
 fn parse_styled_content(line: Value) -> Result<StyledContent> {
     parse_array(line)?
         .into_iter()
@@ -898,6 +926,7 @@ pub fn parse_redraw_event(event_value: Value) -> Result<Vec<RedrawEvent>> {
             "win_hide" => Some(parse_win_hide(event_parameters)?),
             "win_close" => Some(parse_win_close(event_parameters)?),
             "msg_set_pos" => Some(parse_msg_set_pos(event_parameters)?),
+            "win_viewport" => Some(parse_win_viewport(event_parameters)?),
             "cmdline_show" => Some(parse_cmdline_show(event_parameters)?),
             "cmdline_pos" => Some(parse_cmdline_pos(event_parameters)?),
             "cmdline_special_char" => Some(parse_cmdline_special_char(event_parameters)?),

src/editor/cursor.rs

@@ -35,7 +35,6 @@ pub struct CursorMode {
 
 #[derive(Clone, PartialEq)]
 pub struct Cursor {
-    pub position: (f64, f64),
     pub grid_position: (u64, u64),
     pub parent_window_id: u64,
     pub shape: CursorShape,
@@ -52,7 +51,6 @@ pub struct Cursor {
 impl Cursor {
     pub fn new() -> Cursor {
         Cursor {
-            position: (0.0, 0.0),
             grid_position: (0, 0),
             parent_window_id: 0,
             shape: CursorShape::Block,

src/editor/mod.rs

@@ -54,6 +54,7 @@ pub enum DrawCommand {
     UpdateCursor(Cursor),
     FontChanged(String),
     DefaultStyleChanged(Style),
+    ModeChanged(EditorMode),
 }
 
 pub enum WindowCommand {
@@ -71,6 +72,7 @@ impl fmt::Debug for DrawCommand {
             DrawCommand::UpdateCursor(_) => write!(formatter, "UpdateCursor"),
             DrawCommand::FontChanged(_) => write!(formatter, "FontChanged"),
             DrawCommand::DefaultStyleChanged(_) => write!(formatter, "DefaultStyleChanged"),
+            DrawCommand::ModeChanged(_) => write!(formatter, "ModeChanged"),
         }
     }
 }
@@ -80,7 +82,6 @@ pub struct Editor {
     pub cursor: Cursor,
     pub defined_styles: HashMap<u64, Arc<Style>>,
     pub mode_list: Vec<CursorMode>,
-    pub current_mode: EditorMode,
     pub draw_command_batcher: Arc<DrawCommandBatcher>,
     pub window_command_sender: Sender<WindowCommand>,
 }
@@ -95,7 +96,6 @@ impl Editor {
             cursor: Cursor::new(),
             defined_styles: HashMap::new(),
             mode_list: Vec::new(),
-            current_mode: EditorMode::Unknown(String::from("")),
             draw_command_batcher: Arc::new(DrawCommandBatcher::new(batched_draw_command_sender)),
             window_command_sender,
         }
@@ -113,8 +113,10 @@ impl Editor {
             RedrawEvent::ModeChange { mode, mode_index } => {
                 if let Some(cursor_mode) = self.mode_list.get(mode_index as usize) {
                     self.cursor.change_mode(cursor_mode, &self.defined_styles);
-                    self.current_mode = mode;
                 }
+                self.draw_command_batcher
+                    .queue(DrawCommand::ModeChanged(mode))
+                    .ok();
             }
             RedrawEvent::MouseOn => {
                 self.window_command_sender
@@ -218,6 +220,12 @@ impl Editor {
             RedrawEvent::MessageSetPosition { grid, row, .. } => {
                 self.set_message_position(grid, row)
             }
+            RedrawEvent::WindowViewport {
+                grid,
+                top_line,
+                bottom_line,
+                ..
+            } => self.send_updated_viewport(grid, top_line, bottom_line),
             _ => {}
         };
     }
@@ -385,23 +393,13 @@ impl Editor {
 
     fn send_cursor_info(&mut self) {
         let (grid_left, grid_top) = self.cursor.grid_position;
-        match self.get_window_top_left(self.cursor.parent_window_id) {
-            Some((window_left, window_top)) => {
-                self.cursor.position =
-                    (window_left + grid_left as f64, window_top + grid_top as f64);
-
-                if let Some(window) = self.windows.get(&self.cursor.parent_window_id) {
-                    let (character, double_width) =
-                        window.get_cursor_character(grid_left, grid_top);
-                    self.cursor.character = character;
-                    self.cursor.double_width = double_width;
-                }
-            }
-            None => {
-                self.cursor.position = (grid_left as f64, grid_top as f64);
-                self.cursor.double_width = false;
-                self.cursor.character = " ".to_string();
-            }
+        if let Some(window) = self.windows.get(&self.cursor.parent_window_id) {
+            let (character, double_width) = window.get_cursor_character(grid_left, grid_top);
+            self.cursor.character = character;
+            self.cursor.double_width = double_width;
+        } else {
+            self.cursor.double_width = false;
+            self.cursor.character = " ".to_string();
         }
         self.draw_command_batcher
             .queue(DrawCommand::UpdateCursor(self.cursor.clone()))
@@ -419,6 +417,14 @@ impl Editor {
             }
         }
     }
+
+    fn send_updated_viewport(&mut self, grid: u64, top_line: f64, bottom_line: f64) {
+        if let Some(window) = self.windows.get_mut(&grid) {
+            window.update_viewport(top_line, bottom_line);
+        } else {
+            warn!("viewport event received before window initialized");
+        }
+    }
 }
 
 pub fn start_editor(

src/editor/window.rs

@@ -38,6 +38,10 @@ pub enum WindowDrawCommand {
     Show,
     Hide,
     Close,
+    Viewport {
+        top_line: f64,
+        bottom_line: f64,
+    },
 }
 
 impl fmt::Debug for WindowDrawCommand {
@@ -58,6 +62,14 @@ impl fmt::Debug for WindowDrawCommand {
             WindowDrawCommand::Show => write!(formatter, "Show"),
             WindowDrawCommand::Hide => write!(formatter, "Hide"),
             WindowDrawCommand::Close => write!(formatter, "Close"),
+            WindowDrawCommand::Viewport {
+                top_line,
+                bottom_line,
+            } => write!(
+                formatter,
+                "Viewport {{ top: {}, bottom: {} }}",
+                top_line, bottom_line
+            ),
         }
     }
 }
@@ -375,4 +387,11 @@ impl Window {
     pub fn close(&self) {
         self.send_command(WindowDrawCommand::Close);
     }
+
+    pub fn update_viewport(&self, top_line: f64, bottom_line: f64) {
+        self.send_command(WindowDrawCommand::Viewport {
+            top_line,
+            bottom_line,
+        });
+    }
 }

src/renderer/cursor_renderer/mod.rs

@@ -1,8 +1,12 @@
 mod blink;
 mod cursor_vfx;
 
+use std::collections::HashMap;
+
 use skulpin::skia_safe::{Canvas, Paint, Path, Point};
 
+use super::RenderedWindow;
+use crate::bridge::EditorMode;
 use crate::editor::{Colors, Cursor, CursorShape};
 use crate::redraw_scheduler::REDRAW_SCHEDULER;
 use crate::renderer::animation_utils::*;
@@ -178,6 +182,7 @@ impl Corner {
 pub struct CursorRenderer {
     pub corners: Vec<Corner>,
     cursor: Cursor,
+    destination: Point,
     blink_status: BlinkStatus,
     previous_cursor_shape: Option<CursorShape>,
     cursor_vfx: Option<Box<dyn cursor_vfx::CursorVfx>>,
@@ -189,9 +194,9 @@ impl CursorRenderer {
         let mut renderer = CursorRenderer {
             corners: vec![Corner::new(); 4],
             cursor: Cursor::new(),
+            destination: (0.0, 0.0).into(),
             blink_status: BlinkStatus::new(),
             previous_cursor_shape: None,
-            //cursor_vfx: Box::new(PointHighlight::new(Point{x:0.0, y:0.0}, HighlightMode::Ripple)),
             cursor_vfx: None,
             previous_vfx_mode: cursor_vfx::VfxMode::Disabled,
         };
@@ -233,10 +238,36 @@ impl CursorRenderer {
             .collect::<Vec<Corner>>();
     }
 
+    pub fn update_cursor_destination(
+        &mut self,
+        font_width: f32,
+        font_height: f32,
+        windows: &HashMap<u64, RenderedWindow>,
+    ) {
+        let (cursor_grid_x, cursor_grid_y) = self.cursor.grid_position;
+
+        if let Some(window) = windows.get(&self.cursor.parent_window_id) {
+            self.destination = (
+                (cursor_grid_x as f32 + window.grid_current_position.x) * font_width,
+                (cursor_grid_y as f32 + window.grid_current_position.y
+                    - (window.current_scroll - window.current_surfaces.top_line))
+                    * font_height,
+            )
+                .into();
+        } else {
+            self.destination = (
+                cursor_grid_x as f32 * font_width,
+                cursor_grid_y as f32 * font_height,
+            )
+                .into();
+        }
+    }
+
     pub fn draw(
         &mut self,
         default_colors: &Colors,
         font_size: (f32, f32),
+        current_mode: &EditorMode,
         shaper: &mut CachingShaper,
         canvas: &mut Canvas,
         dt: f32,
@@ -253,7 +284,6 @@ impl CursorRenderer {
         let mut paint = Paint::new(skulpin::skia_safe::colors::WHITE, None);
         paint.set_anti_alias(settings.antialiasing);
 
-        let (grid_x, grid_y) = self.cursor.position;
         let character = self.cursor.character.clone();
 
         let font_width = match (self.cursor.double_width, &self.cursor.shape) {
@@ -263,14 +293,9 @@ impl CursorRenderer {
 
         let font_dimensions: Point = (font_width, font_height).into();
 
-        let in_insert_mode = false;
-        // {
-        // let editor = EDITOR.lock();
-        // matches!(editor.current_mode, EditorMode::Insert)
-        // };
+        let in_insert_mode = matches!(current_mode, EditorMode::Insert);
 
-        let destination: Point = (grid_x as f32 * font_width, grid_y as f32 * font_height).into();
-        let center_destination = destination + font_dimensions * 0.5;
+        let center_destination = self.destination + font_dimensions * 0.5;
         let new_cursor = Some(self.cursor.shape.clone());
 
         if self.previous_cursor_shape != new_cursor {
@@ -340,7 +365,7 @@ impl CursorRenderer {
             let blobs = &shaper.shape_cached(&character, false, false);
 
             for blob in blobs.iter() {
-                canvas.draw_text_blob(&blob, destination, &paint);
+                canvas.draw_text_blob(&blob, self.destination, &paint);
             }
 
             canvas.restore();

src/renderer/mod.rs

@@ -16,6 +16,7 @@ pub use caching_shaper::CachingShaper;
 pub use font_options::*;
 pub use rendered_window::{RenderedWindow, WindowDrawDetails};
 
+use crate::bridge::EditorMode;
 use crate::editor::{Colors, DrawCommand, Style, WindowDrawCommand};
 use crate::settings::*;
 use cursor_renderer::CursorRenderer;
@@ -24,21 +25,27 @@ use cursor_renderer::CursorRenderer;
 
 #[derive(Clone)]
 pub struct RendererSettings {
-    animation_length: f32,
+    position_animation_length: f32,
+    scroll_animation_length: f32,
     floating_opacity: f32,
     floating_blur: bool,
 }
 
 pub fn initialize_settings() {
     SETTINGS.set(&RendererSettings {
-        animation_length: 0.15,
+        position_animation_length: 0.15,
+        scroll_animation_length: 0.3,
         floating_opacity: 0.7,
         floating_blur: true,
     });
 
     register_nvim_setting!(
-        "window_animation_length",
-        RendererSettings::animation_length
+        "window_position_animation_length",
+        RendererSettings::position_animation_length
+    );
+    register_nvim_setting!(
+        "window_scroll_animation_length",
+        RendererSettings::scroll_animation_length
     );
     register_nvim_setting!(
         "floating_window_opacity",
@@ -53,6 +60,7 @@ pub struct Renderer {
     rendered_windows: HashMap<u64, RenderedWindow>,
     cursor_renderer: CursorRenderer,
 
+    pub current_mode: EditorMode,
     pub paint: Paint,
     pub shaper: CachingShaper,
     pub default_style: Arc<Style>,
@@ -67,6 +75,7 @@ impl Renderer {
         let rendered_windows = HashMap::new();
         let cursor_renderer = CursorRenderer::new();
 
+        let current_mode = EditorMode::Unknown(String::from(""));
         let mut paint = Paint::new(colors::WHITE, None);
         paint.set_anti_alias(false);
         let mut shaper = CachingShaper::new();
@@ -82,6 +91,7 @@ impl Renderer {
             rendered_windows,
             cursor_renderer,
 
+            current_mode,
             paint,
             shaper,
             default_style,
@@ -92,14 +102,12 @@ impl Renderer {
         }
     }
 
-    fn update_font(&mut self, guifont_setting: &str) -> bool {
-        let updated = self.shaper.update_font(guifont_setting);
-        if updated {
+    fn update_font(&mut self, guifont_setting: &str) {
+        if self.shaper.update_font(guifont_setting) {
             let (font_width, font_height) = self.shaper.font_base_dimensions();
             self.font_width = font_width;
             self.font_height = font_height.ceil();
         }
-        updated
     }
 
     fn compute_text_region(&self, grid_pos: (u64, u64), cell_width: u64) -> Rect {
@@ -111,6 +119,15 @@ impl Renderer {
         Rect::new(x, y, x + width, y + height)
     }
 
+    fn get_default_background(&self) -> Color {
+        self.default_style
+            .colors
+            .background
+            .clone()
+            .unwrap()
+            .to_color()
+    }
+
     fn draw_background(
         &mut self,
         canvas: &mut Canvas,
@@ -211,7 +228,6 @@ impl Renderer {
             }
             DrawCommand::Window { grid_id, command } => {
                 if let Some(rendered_window) = self.rendered_windows.remove(&grid_id) {
-                    warn!("Window positioned {}", grid_id);
                     let rendered_window = rendered_window.handle_window_draw_command(self, command);
                     self.rendered_windows.insert(grid_id, rendered_window);
                 } else if let WindowDrawCommand::Position {
@@ -240,13 +256,14 @@ impl Renderer {
                 self.cursor_renderer.update_cursor(new_cursor);
             }
             DrawCommand::FontChanged(new_font) => {
-                if self.update_font(&new_font) {
-                    // Resize all the grids
-                }
+                self.update_font(&new_font);
             }
             DrawCommand::DefaultStyleChanged(new_style) => {
                 self.default_style = Arc::new(new_style);
             }
+            DrawCommand::ModeChanged(new_mode) => {
+                self.current_mode = new_mode;
+            }
             _ => {}
         }
     }
@@ -291,6 +308,10 @@ impl Renderer {
 
         coordinate_system_helper.use_logical_coordinates(root_canvas);
 
+        let default_background = self.get_default_background();
+        let font_width = self.font_width;
+        let font_height = self.font_height;
+
         let windows: Vec<&mut RenderedWindow> = {
             let (mut root_windows, mut floating_windows): (
                 Vec<&mut RenderedWindow>,
@@ -313,16 +334,28 @@ impl Renderer {
         };
 
         let settings = SETTINGS.get::<RendererSettings>();
-        let font_width = self.font_width;
-        let font_height = self.font_height;
         self.window_regions = windows
             .into_iter()
-            .map(|window| window.draw(root_canvas, &settings, font_width, font_height, dt))
+            .map(|window| {
+                window.draw(
+                    root_canvas,
+                    &settings,
+                    default_background,
+                    font_width,
+                    font_height,
+                    dt,
+                )
+            })
             .collect();
 
+        let windows = &self.rendered_windows;
+        self.cursor_renderer
+            .update_cursor_destination(font_width, font_height, windows);
+
         self.cursor_renderer.draw(
             &self.default_style.colors,
             (self.font_width, self.font_height),
+            &self.current_mode,
             &mut self.shaper,
             root_canvas,
             dt,

src/renderer/rendered_window.rs

@@ -1,3 +1,6 @@
+use std::collections::VecDeque;
+use std::iter;
+
 use skulpin::skia_safe::canvas::{SaveLayerRec, SrcRectConstraint};
 use skulpin::skia_safe::gpu::SurfaceOrigin;
 use skulpin::skia_safe::{
@@ -11,14 +14,10 @@ use crate::redraw_scheduler::REDRAW_SCHEDULER;
 
 fn build_window_surface(
     parent_canvas: &mut Canvas,
-    renderer: &Renderer,
-    grid_width: u64,
-    grid_height: u64,
+    pixel_width: i32,
+    pixel_height: i32,
 ) -> Surface {
-    let dimensions = (
-        (grid_width as f32 * renderer.font_width) as i32,
-        (grid_height as f32 * renderer.font_height) as i32,
-    );
+    let dimensions = (pixel_width, pixel_height);
     let mut context = parent_canvas.gpu_context().unwrap();
     let budgeted = Budgeted::Yes;
     let parent_image_info = parent_canvas.image_info();
@@ -41,29 +40,84 @@ fn build_window_surface(
     .expect("Could not create surface")
 }
 
+fn build_window_surface_with_grid_size(
+    parent_canvas: &mut Canvas,
+    renderer: &Renderer,
+    grid_width: u64,
+    grid_height: u64,
+) -> Surface {
+    let pixel_width = (grid_width as f32 * renderer.font_width) as i32;
+    let pixel_height = (grid_height as f32 * renderer.font_height) as i32;
+    build_window_surface(parent_canvas, pixel_width, pixel_height)
+}
+
 fn build_background_window_surface(
     parent_canvas: &mut Canvas,
     renderer: &Renderer,
     grid_width: u64,
     grid_height: u64,
 ) -> Surface {
-    let mut surface = build_window_surface(parent_canvas, renderer, grid_width, grid_height);
+    let mut surface =
+        build_window_surface_with_grid_size(parent_canvas, renderer, grid_width, grid_height);
     let canvas = surface.canvas();
-    canvas.clear(
-        renderer
-            .default_style
-            .colors
-            .background
-            .clone()
-            .unwrap()
-            .to_color(),
-    );
+    canvas.clear(renderer.get_default_background());
     surface
 }
 
+fn clone_window_surface(surface: &mut Surface) -> Surface {
+    let snapshot = surface.image_snapshot();
+    let mut canvas = surface.canvas();
+    let mut new_surface = build_window_surface(&mut canvas, snapshot.width(), snapshot.height());
+    let new_canvas = new_surface.canvas();
+    new_canvas.draw_image(snapshot, (0.0, 0.0), None);
+    new_surface
+}
+
+pub struct SurfacePair {
+    background: Surface,
+    foreground: Surface,
+    pub top_line: f32,
+    bottom_line: f32,
+}
+
+impl SurfacePair {
+    fn new(
+        parent_canvas: &mut Canvas,
+        renderer: &Renderer,
+        grid_width: u64,
+        grid_height: u64,
+        top_line: f32,
+        bottom_line: f32,
+    ) -> SurfacePair {
+        let background =
+            build_background_window_surface(parent_canvas, renderer, grid_width, grid_height);
+        let foreground =
+            build_window_surface_with_grid_size(parent_canvas, renderer, grid_width, grid_height);
+
+        SurfacePair {
+            background,
+            foreground,
+            top_line,
+            bottom_line,
+        }
+    }
+
+    fn clone(&mut self) -> SurfacePair {
+        let new_background = clone_window_surface(&mut self.background);
+        let new_foreground = clone_window_surface(&mut self.foreground);
+        SurfacePair {
+            background: new_background,
+            foreground: new_foreground,
+            top_line: self.top_line,
+            bottom_line: self.bottom_line,
+        }
+    }
+}
+
 pub struct RenderedWindow {
-    background_surface: Surface,
-    foreground_surface: Surface,
+    old_surfaces: VecDeque<SurfacePair>,
+    pub current_surfaces: SurfacePair,
+
     pub id: u64,
     pub hidden: bool,
     pub floating: bool,
@@ -72,9 +126,14 @@ pub struct RenderedWindow {
     grid_height: u64,
 
     grid_start_position: Point,
-    grid_current_position: Point,
+    pub grid_current_position: Point,
     grid_destination: Point,
-    t: f32,
+    position_t: f32,
+
+    start_scroll: f32,
+    pub current_scroll: f32,
+    scroll_destination: f32,
+    scroll_t: f32,
 }
 
 pub struct WindowDrawDetails {
@@ -92,14 +151,12 @@ impl RenderedWindow {
         grid_width: u64,
         grid_height: u64,
     ) -> RenderedWindow {
-        let background_surface =
-            build_background_window_surface(parent_canvas, renderer, grid_width, grid_height);
-        let foreground_surface =
-            build_window_surface(parent_canvas, renderer, grid_width, grid_height);
+        let current_surfaces =
+            SurfacePair::new(parent_canvas, renderer, grid_width, grid_height, 0.0, 0.0);
 
         RenderedWindow {
-            background_surface,
-            foreground_surface,
+            old_surfaces: VecDeque::new(),
+            current_surfaces,
             id,
             hidden: false,
             floating: false,
@@ -110,7 +167,12 @@ impl RenderedWindow {
             grid_start_position: grid_position,
             grid_current_position: grid_position,
             grid_destination: grid_position,
-            t: 2.0, // 2.0 is out of the 0.0 to 1.0 range and stops animation
+            position_t: 2.0, // 2.0 is out of the 0.0 to 1.0 range and stops animation
+
+            start_scroll: 0.0,
+            current_scroll: 0.0,
+            scroll_destination: 0.0,
+            scroll_t: 2.0, // 2.0 is out of the 0.0 to 1.0 range and stops animation
         }
     }
 
@@ -127,31 +189,52 @@ impl RenderedWindow {
     }
 
     pub fn update(&mut self, settings: &RendererSettings, dt: f32) -> bool {
-        if (self.t - 1.0).abs() < std::f32::EPSILON {
-            return false;
-        }
+        let mut animating = false;
+
+        {
+            if (self.position_t - 1.0).abs() < std::f32::EPSILON {
+                // We are at destination, move t out of 0-1 range to stop the animation
+                self.position_t = 2.0;
+            } else {
+                animating = true;
+                self.position_t =
+                    (self.position_t + dt / settings.position_animation_length).min(1.0);
+            }
 
-        if (self.t - 1.0).abs() < std::f32::EPSILON {
-            // We are at destination, move t out of 0-1 range to stop the animation
-            self.t = 2.0;
-        } else {
-            self.t = (self.t + dt / settings.animation_length).min(1.0);
+            self.grid_current_position = ease_point(
+                ease_out_expo,
+                self.grid_start_position,
+                self.grid_destination,
+                self.position_t,
+            );
         }
 
-        self.grid_current_position = ease_point(
-            ease_out_expo,
-            self.grid_start_position,
-            self.grid_destination,
-            self.t,
-        );
+        {
+            if (self.scroll_t - 1.0).abs() < std::f32::EPSILON {
+                // We are at destination, move t out of 0-1 range to stop the animation
+                self.scroll_t = 2.0;
+                self.old_surfaces.clear();
+            } else {
+                animating = true;
+                self.scroll_t = (self.scroll_t + dt / settings.scroll_animation_length).min(1.0);
+            }
+
+            self.current_scroll = ease(
+                ease_out_expo,
+                self.start_scroll,
+                self.scroll_destination,
+                self.scroll_t,
+            );
+        }
 
-        true
+        animating
     }
 
     pub fn draw(
         &mut self,
         root_canvas: &mut Canvas,
         settings: &RendererSettings,
+        default_background: Color,
         font_width: f32,
         font_height: f32,
         dt: f32,
@@ -163,7 +246,6 @@ impl RenderedWindow {
         let pixel_region = self.pixel_region(font_width, font_height);
 
         root_canvas.save();
-
         root_canvas.clip_rect(&pixel_region, None, Some(false));
 
         if self.floating && settings.floating_blur {
@@ -176,26 +258,55 @@ impl RenderedWindow {
         }
 
         let mut paint = Paint::default();
+        // We want each surface to overwrite the one underneath and will use layers to ensure
+        // only lower priority surfaces will get clobbered and not the underlying windows
+        paint.set_blend_mode(BlendMode::Src);
+
+        {
+            // Save layer so that setting the blend mode doesn't effect the blur
+            root_canvas.save_layer(&SaveLayerRec::default());
+            let mut a = 255;
+            if self.floating {
+                a = (settings.floating_opacity.min(1.0).max(0.0) * 255.0) as u8;
+            }
 
-        if self.floating {
-            let a = (settings.floating_opacity.min(1.0).max(0.0) * 255.0) as u8;
-            paint.set_color(Color::from_argb(a, 255, 255, 255));
-        }
+            paint.set_color(default_background.with_a(a));
+            root_canvas.draw_rect(pixel_region, &paint);
 
-        self.background_surface.draw(
-            root_canvas.as_mut(),
-            (pixel_region.left(), pixel_region.top()),
-            Some(&paint),
-        );
+            paint.set_color(Color::from_argb(a, 255, 255, 255));
 
-        let mut paint = Paint::default();
-        paint.set_blend_mode(BlendMode::SrcOver);
+            for surface_pair in iter::once(&mut self.current_surfaces)
+                .chain(self.old_surfaces.iter_mut())
+                .rev()
+            {
+                let scroll_offset =
+                    surface_pair.top_line * font_height - self.current_scroll * font_height;
+                surface_pair.background.draw(
+                    root_canvas.as_mut(),
+                    (pixel_region.left(), pixel_region.top() + scroll_offset),
+                    Some(&paint),
+                );
+            }
+            root_canvas.restore();
+        }
 
-        self.foreground_surface.draw(
-            root_canvas.as_mut(),
-            (pixel_region.left(), pixel_region.top()),
-            Some(&paint),
-        );
+        {
+            // Save layer so that text may safely overwrite images underneath
+            root_canvas.save_layer(&SaveLayerRec::default());
+            for surface_pair in iter::once(&mut self.current_surfaces)
+                .chain(self.old_surfaces.iter_mut())
+                .rev()
+            {
+                let scroll_offset =
+                    surface_pair.top_line * font_height - self.current_scroll * font_height;
+                surface_pair.foreground.draw(
+                    root_canvas.as_mut(),
+                    (pixel_region.left(), pixel_region.top() + scroll_offset),
+                    Some(&paint),
+                );
+            }
+            root_canvas.restore();
+        }
 
         if self.floating {
             root_canvas.restore();
@@ -229,13 +340,13 @@ impl RenderedWindow {
                     if self.grid_start_position.x.abs() > f32::EPSILON
                         || self.grid_start_position.y.abs() > f32::EPSILON
                     {
-                        self.t = 0.0; // Reset animation as we have a new destination.
+                        self.position_t = 0.0; // Reset animation as we have a new destination.
                         self.grid_start_position = self.grid_current_position;
                         self.grid_destination = new_destination;
                     } else {
                         // We don't want to animate since the window is animating out of the start location,
                         // so we set t to 2.0 to stop animations.
-                        self.t = 2.0;
+                        self.position_t = 2.0;
                         self.grid_start_position = new_destination;
                         self.grid_destination = new_destination;
                     }
@@ -243,25 +354,33 @@ impl RenderedWindow {
 
                 if grid_width != self.grid_width || grid_height != self.grid_height {
                     {
-                        let mut old_background = self.background_surface;
-                        self.background_surface = build_background_window_surface(
+                        let mut old_background = self.current_surfaces.background;
+                        self.current_surfaces.background = build_background_window_surface(
                             old_background.canvas(),
                             &renderer,
                             grid_width,
                             grid_height,
                         );
-                        old_background.draw(self.background_surface.canvas(), (0.0, 0.0), None);
+                        old_background.draw(
+                            self.current_surfaces.background.canvas(),
+                            (0.0, 0.0),
+                            None,
+                        );
                     }
 
                     {
-                        let mut old_foreground = self.foreground_surface;
-                        self.foreground_surface = build_window_surface(
+                        let mut old_foreground = self.current_surfaces.foreground;
+                        self.current_surfaces.foreground = build_window_surface_with_grid_size(
                             old_foreground.canvas(),
                             &renderer,
                             grid_width,
                             grid_height,
                         );
-                        old_foreground.draw(self.foreground_surface.canvas(), (0.0, 0.0), None);
+                        old_foreground.draw(
+                            self.current_surfaces.foreground.canvas(),
+                            (0.0, 0.0),
+                            None,
+                        );
                     }
 
                     self.grid_width = grid_width;
@@ -272,7 +391,7 @@ impl RenderedWindow {
 
                 if self.hidden {
                     self.hidden = false;
-                    self.t = 2.0; // We don't want to animate since the window is becoming visible, so we set t to 2.0 to stop animations.
+                    self.position_t = 2.0; // We don't want to animate since the window is becoming visible, so we set t to 2.0 to stop animations.
                     self.grid_start_position = new_destination;
                     self.grid_destination = new_destination;
                 }
@@ -287,7 +406,7 @@ impl RenderedWindow {
                 let grid_position = (window_left, window_top);
 
                 {
-                    let mut background_canvas = self.background_surface.canvas();
+                    let mut background_canvas = self.current_surfaces.background.canvas();
                     renderer.draw_background(
                         &mut background_canvas,
                         grid_position,
@@ -297,7 +416,7 @@ impl RenderedWindow {
                 }
 
                 {
-                    let mut foreground_canvas = self.foreground_surface.canvas();
+                    let mut foreground_canvas = self.current_surfaces.foreground.canvas();
                     renderer.draw_foreground(
                         &mut foreground_canvas,
                         &text,
@@ -323,8 +442,8 @@ impl RenderedWindow {
                 );
 
                 {
-                    let background_snapshot = self.background_surface.image_snapshot();
-                    let background_canvas = self.background_surface.canvas();
+                    let background_snapshot = self.current_surfaces.background.image_snapshot();
+                    let background_canvas = self.current_surfaces.background.canvas();
 
                     background_canvas.save();
                     background_canvas.clip_rect(scrolled_region, None, Some(false));
@@ -346,8 +465,8 @@ impl RenderedWindow {
                 }
 
                 {
-                    let foreground_snapshot = self.foreground_surface.image_snapshot();
-                    let foreground_canvas = self.foreground_surface.canvas();
+                    let foreground_snapshot = self.current_surfaces.foreground.image_snapshot();
+                    let foreground_canvas = self.current_surfaces.foreground.canvas();
 
                     foreground_canvas.save();
                     foreground_canvas.clip_rect(scrolled_region, None, Some(false));
@@ -369,16 +488,16 @@ impl RenderedWindow {
                 }
             }
             WindowDrawCommand::Clear => {
-                let background_canvas = self.background_surface.canvas();
-                self.background_surface = build_background_window_surface(
+                let background_canvas = self.current_surfaces.background.canvas();
+                self.current_surfaces.background = build_background_window_surface(
                     background_canvas,
                     &renderer,
                     self.grid_width,
                     self.grid_height,
                 );
 
-                let foreground_canvas = self.foreground_surface.canvas();
-                self.foreground_surface = build_window_surface(
+                let foreground_canvas = self.current_surfaces.foreground.canvas();
+                self.current_surfaces.foreground = build_window_surface_with_grid_size(
                     foreground_canvas,
                     &renderer,
                     self.grid_width,
@@ -388,11 +507,34 @@ impl RenderedWindow {
             WindowDrawCommand::Show => {
                 if self.hidden {
                     self.hidden = false;
-                    self.t = 2.0; // We don't want to animate since the window is becoming visible, so we set t to 2.0 to stop animations.
+                    self.position_t = 2.0; // We don't want to animate since the window is becoming visible, so we set t to 2.0 to stop animations.
                     self.grid_start_position = self.grid_destination;
                 }
             }
             WindowDrawCommand::Hide => self.hidden = true,
+            WindowDrawCommand::Viewport {
+                top_line,
+                bottom_line,
+            } => {
+                if (self.current_surfaces.top_line - top_line as f32).abs() > std::f32::EPSILON {
+                    let mut new_surfaces = self.current_surfaces.clone();
+                    new_surfaces.top_line = top_line as f32;
+                    new_surfaces.bottom_line = bottom_line as f32;
+
+                    // Set new target viewport position and initialize animation timer
+                    self.start_scroll = self.current_scroll;
+                    self.scroll_destination = top_line as f32;
+                    self.scroll_t = 0.0;
+
+                    let current_surfaces = self.current_surfaces;
+                    self.current_surfaces = new_surfaces;
+                    self.old_surfaces.push_back(current_surfaces);
+
+                    if self.old_surfaces.len() > 5 {
+                        self.old_surfaces.pop_front();
+                    }
+                }
+            }
             _ => {}
         };