Mirror of forum.nim-lang.org

7369 :: Resize window events karax

• sdmcallister (orginal) [2021-01-10T13:11:46+01:00] view original

  I'm working with the eCharts library following the example in the karax experiments. I want to make the plot size dynamic and relative to the current browser window size which might change. If the browser window size is changed I need to resize the plot to fit the view. At the moment I have the div width set to 100%. When I change the window size I have to manually refresh the browser to have the chart update which isn't ideal. I would rather this happen onresize. In plain js I could create an event handler that would do plot.resize on window.resize. Is there a way to do this on karax or some alternative?

---

• geotre (orginal) [2021-01-10T17:50:24+01:00] view original

  You can trigger Karax to redraw when the window size changes with something like:

  proc onResize(ev: Event) =
    # maybe do something with display width, e.g. using document.body.clientWidth
    redraw()
  
  window.addEventListener("resize", onResize)
  Run

  You might want to debounce this to avoid triggering a lot of redraws while the user changes the window size

---

• sdmcallister (orginal) [2021-01-10T18:45:12+01:00] view original

  The Karax eCharts experiment provides MWE similar to what I might create, so I won't re-paste here unless that is preferrable.

  https://github.com/pragmagic/karax/tree/master/experiments

  Images resize without issue when the window is changed.

  In the past when I've used echarts and regular javascript I did something like this:

  
  window.addEventListener('resize', function(){
    chart1.resize();
  })
  
  Run

  Is is possible to translate this into Karax or is a different approach required?

---