10 million

incremental_draw/Cargo.toml

@@ -6,6 +6,7 @@ version = "0.1.0"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
+js-sys = "0.3.64"
 leptos = {version = "0.4.2", features = ["csr"]}
 segment-tree = "2.0.0"
 wasm-bindgen = "0.2.74"

incremental_draw/src/lib.rs

@@ -35,10 +35,18 @@ impl Chart {
     }
 
     pub fn adjust_canvas(&mut self) -> Option<()> {
+        self.view_range = (
+            self.view_range.0,
+            self.view_range.1.min(self.min_max_tree.len()).max(10),
+        );
         let canvas = self.ctx.canvas()?;
         let width = canvas.client_width() as u32;
         let height = canvas.client_height() as u32;
-        self.canvas_size = (width, height);
+        let dpi = web_sys::window()
+            .map(|win| win.device_pixel_ratio())
+            .unwrap_or(1.0);
+        self.canvas_size = (((width as f64) * dpi) as u32, (height as f64 * dpi) as u32);
+        let (width, height) = self.canvas_size;
         canvas.set_width(width);
         canvas.set_height(height);
         Some(())

incremental_draw/src/main.rs

@@ -7,14 +7,26 @@ pub fn main() {
     mount_to_body(|cx| view! { cx,  <MyComponent></MyComponent> })
 }
 
+fn random_js() -> f64 {
+    js_sys::Math::random()
+}
+
+fn random_walk(size: usize) -> Vec<f64> {
+    let mut v = vec![0.0; size];
+    for i in 1..size {
+        v[i] = v[i - 1] + random_js() - 0.5;
+    }
+    v
+}
+
 #[component]
 fn MyComponent(cx: Scope) -> impl IntoView {
     let canvas_ref: NodeRef<Canvas> = create_node_ref(cx);
     let chart = create_rw_signal(cx, None as Option<Chart>);
 
     create_effect(cx, move |_| {
         if let Some(ctx) = context_from(&canvas_ref) {
-            let base_data: Vec<f64> = (0..1000_000).map(|i| ((i as f64) / 5000.0).sin()).collect();
+            let base_data: Vec<f64> = random_walk(10_000_000);
             let mut chart_obj = Chart::build(&base_data, ctx);
             chart_obj.recalc();
             chart.set(Some(chart_obj));
@@ -32,22 +44,37 @@ fn MyComponent(cx: Scope) -> impl IntoView {
     let advance_chart = move |delta: i32| {
         chart.update(|chart| {
             chart.as_mut().map(|chart| {
-                chart.view_range.1 += (delta * (chart.view_range.1 / 10) as i32) as usize;
+                let view_range = &mut chart.view_range;
+                view_range.1 = view_range.1.max(100);
+                let add_delta = delta * (view_range.1 / 100).max(1) as i32;
+                view_range.1 = if add_delta < 0 && add_delta.abs() > view_range.1 as i32 {
+                    10
+                } else {
+                    (view_range.1 as i32 + add_delta) as usize
+                };
                 chart.recalc();
             });
         })
     };
 
+    let view_elements = move || {
+        chart.with(|chart| {
+            chart
+                .as_ref()
+                .map(|chart| chart.view_range.1)
+                .unwrap_or(1)
+                .to_string()
+        })
+    };
+
     view! {
         cx,
         <div>
-            <button on:click=move |_| {
-                advance_chart(-1);
-            }>-</button>
-            <button on:click=move |_| {
-                advance_chart(1);
-            }>+</button>
-            <canvas node_ref=canvas_ref style="width: 100%; height: 500px"></canvas>
+            <div>"elements: " {move ||(view_elements)()}</div>
+            <canvas node_ref=canvas_ref style="width: 100%; height: 500px" on:wheel= move |event|{
+                let delta = event.delta_y() as i32;
+                advance_chart(delta);
+            } ></canvas>
         </div>
     }
 }