1- // If you only use `npm` you can simply
2- // import { Chart } from "wasm-demo" and remove `setup` call from `bootstrap.js`.
3- class Chart { }
1+ import { Chart , default as init } from "wasm-demo" ;
42
53const canvas = document . getElementById ( "canvas" ) ;
64const coord = document . getElementById ( "coord" ) ;
@@ -12,63 +10,66 @@ const status = document.getElementById("status");
1210
1311let chart = null ;
1412
13+ initialize ( ) ;
14+
15+ async function initialize ( ) {
16+ await init ( ) ;
17+ main ( ) ;
18+ }
19+
1520/** Main entry point */
1621export function main ( ) {
17- let hash = location . hash . substr ( 1 ) ;
18- for ( var i = 0 ; i < plotType . options . length ; i ++ ) {
19- if ( hash == plotType . options [ i ] . value ) {
22+ let hash = location . hash . slice ( 1 ) ;
23+ for ( var i = 0 ; i < plotType . options . length ; i ++ ) {
24+ if ( hash == plotType . options [ i ] . value ) {
2025 plotType . value = hash ;
2126 }
2227 }
23- setupUI ( ) ;
24- setupCanvas ( ) ;
25- }
26-
27- /** This function is used in `bootstrap.js` to setup imports. */
28- export function setup ( WasmChart ) {
29- Chart = WasmChart ;
28+ init ( ) ;
29+ setupUI ( ) ;
30+ setupCanvas ( ) ;
3031}
3132
3233/** Add event listeners. */
3334function setupUI ( ) {
34- status . innerText = "WebAssembly loaded!" ;
35- plotType . addEventListener ( "change" , updatePlot ) ;
35+ status . innerText = "WebAssembly loaded!" ;
36+ plotType . addEventListener ( "change" , updatePlot ) ;
3637 yaw . addEventListener ( "change" , updatePlot ) ;
3738 pitch . addEventListener ( "change" , updatePlot ) ;
3839 yaw . addEventListener ( "input" , updatePlot ) ;
3940 pitch . addEventListener ( "input" , updatePlot ) ;
40- window . addEventListener ( "resize" , setupCanvas ) ;
41- window . addEventListener ( "mousemove" , onMouseMove ) ;
41+ window . addEventListener ( "resize" , setupCanvas ) ;
42+ window . addEventListener ( "mousemove" , onMouseMove ) ;
4243}
4344
4445/** Setup canvas to properly handle high DPI and redraw current plot. */
4546function setupCanvas ( ) {
4647 const dpr = window . devicePixelRatio || 1.0 ;
47- const aspectRatio = canvas . width / canvas . height ;
48- const size = canvas . parentNode . offsetWidth * 0.8 ;
49- canvas . style . width = size + "px" ;
50- canvas . style . height = size / aspectRatio + "px" ;
51- canvas . width = size ;
52- canvas . height = size / aspectRatio ;
53- updatePlot ( ) ;
48+ const aspectRatio = canvas . width / canvas . height ;
49+ const size = canvas . parentNode . offsetWidth * 0.8 ;
50+ canvas . style . width = size + "px" ;
51+ canvas . style . height = size / aspectRatio + "px" ;
52+ canvas . width = size ;
53+ canvas . height = size / aspectRatio ;
54+ updatePlot ( ) ;
5455}
5556
5657/** Update displayed coordinates. */
5758function onMouseMove ( event ) {
58- if ( chart ) {
59+ if ( chart ) {
5960 var text = "Mouse pointer is out of range" ;
6061
61- if ( event . target == canvas ) {
62+ if ( event . target == canvas ) {
6263 let actualRect = canvas . getBoundingClientRect ( ) ;
6364 let logicX = event . offsetX * canvas . width / actualRect . width ;
6465 let logicY = event . offsetY * canvas . height / actualRect . height ;
6566 const point = chart . coord ( logicX , logicY ) ;
66- text = ( point )
67+ text = ( point )
6768 ? `(${ point . x . toFixed ( 3 ) } , ${ point . y . toFixed ( 3 ) } )`
6869 : text ;
6970 }
70- coord . innerText = text ;
71- }
71+ coord . innerText = text ;
72+ }
7273}
7374
7475function updatePlot3d ( ) {
@@ -80,24 +81,24 @@ function updatePlot3d() {
8081
8182/** Redraw currently selected plot. */
8283function updatePlot ( ) {
83- const selected = plotType . selectedOptions [ 0 ] ;
84- status . innerText = `Rendering ${ selected . innerText } ...` ;
85- chart = null ;
86- const start = performance . now ( ) ;
87- switch ( selected . value ) {
84+ const selected = plotType . selectedOptions [ 0 ] ;
85+ status . innerText = `Rendering ${ selected . innerText } ...` ;
86+ chart = null ;
87+ const start = performance . now ( ) ;
88+ switch ( selected . value ) {
8889 case "mandelbrot" :
8990 control . classList . add ( "hide" ) ;
9091 chart = Chart . mandelbrot ( canvas ) ;
9192 break ;
92- case "3d-plot" :
93+ case "3d-plot" :
9394 control . classList . remove ( "hide" ) ;
9495 updatePlot3d ( ) ;
9596 break ;
9697 default :
9798 control . classList . add ( "hide" ) ;
9899 chart = Chart . power ( "canvas" , Number ( selected . value ) )
99100 }
100-
101- const end = performance . now ( ) ;
102- status . innerText = `Rendered ${ selected . innerText } in ${ Math . ceil ( end - start ) } ms` ;
101+
102+ const end = performance . now ( ) ;
103+ status . innerText = `Rendered ${ selected . innerText } in ${ Math . ceil ( end - start ) } ms` ;
103104}
0 commit comments