Update the wasm example

Author: 38

examples/wasm-demo/Cargo.toml

@@ -8,9 +8,9 @@ edition = "2018"
 crate-type=["cdylib"]
 
 [dependencies]
-plotters = {path = "../..", default_features = false, features = ["line_series"]  }
+plotters = {path = "../.."}
 plotters-canvas = "0.1.*"
-wasm-bindgen = "0.2"
+wasm-bindgen = "0.2.62"
 wee_alloc = "0.4.5"
 web-sys = { version = "0.3.39", features = ["HtmlCanvasElement"] }
 

examples/wasm-demo/src/func_plot.rs

@@ -11,10 +11,11 @@ pub fn draw(canvas_id: &str, power: i32) -> DrawResult<impl Fn((i32, i32)) -> Op
     root.fill(&WHITE)?;
 
     let mut chart = ChartBuilder::on(&root)
+        .margin(20)
         .caption(format!("y=x^{}", power), font)
         .x_label_area_size(30)
         .y_label_area_size(30)
-        .build_ranged(-1f32..1f32, -1.2f32..1.2f32)?;
+        .build_cartesian_2d(-1f32..1f32, -1.2f32..1.2f32)?;
 
     chart.configure_mesh().x_labels(3).y_labels(3).draw()?;
 

examples/wasm-demo/src/mandelbrot.rs

@@ -1,8 +1,7 @@
 use crate::DrawResult;
+use plotters::prelude::*;
 use std::ops::Range;
 use web_sys::HtmlCanvasElement;
-
-use plotters::prelude::*;
 use plotters_canvas::CanvasBackend;
 
 /// Draw Mandelbrot set
@@ -16,7 +15,7 @@ pub fn draw(element: HtmlCanvasElement) -> DrawResult<impl Fn((i32, i32)) -> Opt
         .margin(20)
         .x_label_area_size(10)
         .y_label_area_size(10)
-        .build_ranged(-2.1..0.6, -1.2..1.2)?;
+        .build_cartesian_2d(-2.1..0.6, -1.2..1.2)?;
 
     chart
         .configure_mesh()

examples/wasm-demo/start-server.bat

@@ -4,5 +4,5 @@ wasm-pack build --release
 if errorlevel 1 cargo install wasm-pack
 wasm-pack build --release
 cd www
-npm install
+call npm install
 npm start

examples/wasm-demo/www/index.html

@@ -12,7 +12,7 @@
 	<main>
 	    <h1>Plotters WebAssembly Demo</h1>
 	    <div id="coord"></div>
-            <canvas id="canvas" width="600" height="400"></canvas>
+        <canvas id="canvas" width="600" height="400"></canvas>
 	    <div id="status">Loading WebAssembly...</div>
 	    <div id="control">
 		<label for="plot-type">Demo: </label>

examples/wasm-demo/www/index.js

@@ -30,24 +30,31 @@ function setupUI() {
 
 /** Setup canvas to properly handle high DPI and redraw current plot. */
 function setupCanvas() {
-    const dpr = window.devicePixelRatio || 1;
+	const dpr = window.devicePixelRatio || 1.0;
     const aspectRatio = canvas.width / canvas.height;
-    const size = Math.min(canvas.width, canvas.parentNode.offsetWidth);
+    const size = canvas.parentNode.offsetWidth * 0.8;
     canvas.style.width = size + "px";
     canvas.style.height = size / aspectRatio + "px";
-    canvas.width = size * dpr;
-    canvas.height = size / aspectRatio * dpr;
-    canvas.getContext("2d").scale(dpr, dpr);
+    canvas.width = size;
+    canvas.height = size / aspectRatio;
     updatePlot();
 }
 
 /** Update displayed coordinates. */
 function onMouseMove(event) {
     if (chart) {
-        const point = chart.coord(event.offsetX, event.offsetY);
-        coord.innerText = (point)
-            ? `(${point.x.toFixed(3)}, ${point.y.toFixed(3)})`
-            : "Mouse pointer is out of range";
+		var text = "Mouse pointer is out of range";
+
+		if(event.target == canvas) {
+			let actualRect = canvas.getBoundingClientRect();
+			let logicX = event.offsetX * canvas.width / actualRect.width;
+			let logicY = event.offsetY * canvas.height / actualRect.height;
+			const point = chart.coord(logicX, logicY);
+			text = (point) 
+				? `(${point.x.toFixed(3)}, ${point.y.toFixed(3)})`
+				: text;
+		}
+        coord.innerText = text;
     }
 }