Triggering repaint only after resize is done

webpack/js/mlab.js

@@ -16,11 +16,12 @@ import $ from 'jquery';
 
 function paintTree() {
  const GRID_UNIT = 30
- const CC = 10
- const OPACITY = 0.4
+ const N_SOURCES = 10
+ const OPACITY = 0.5
  const TRUNK_COL = '#444' //'#7fc0c2'
  const RAY_COL = '#fff' //'#fff'
  const ROOT_COL = '#444' //'#222'
+ const LBLS_PER_FRAME = 1
 
  const graph = $('#graph')
  const W = graph.width()
@@ -91,7 +92,7 @@ function paintTree() {
  edges[edge].attr('opacity', 0.5 * OPACITY)
  },
  add_source: function(node, owner) {
- if (owner < CC) {
+ if (owner < N_SOURCES) {
  node_group.circle(...embed(grid.getNodeXY(node)), 6)
  .attr('stroke', TRUNK_COL)
  .attr('strokeOpacity', 0.8 * OPACITY)
@@ -109,11 +110,11 @@ function paintTree() {
  }
  return node
  }
- for (let i = 0; i < CC; i++) {
+ for (let i = 0; i < N_SOURCES; i++) {
  algo.addSource(get_random_unreachable_node(), true)
  }
  const anim = setInterval(function() {
- for (let i = 0; i < 30; ++i) {
+ for (let i = 0; i < LBLS_PER_FRAME; ++i) {
  const result = algo.propagate(true)
  if (result === false) {
  clearInterval(anim)
@@ -139,6 +140,24 @@ document.addEventListener('DOMContentLoaded', () => {
  paintTree()
 });
 
+let resizeTimer = null
+let graphSize = null
+
+function getGraphSize() {
+ let g = $('#graph')
+ return [g.width(), g.height()]
+}
+
 window.addEventListener('resize', () => {
- paintTree()
+ if (resizeTimer) {
+ clearTimeout(resizeTimer)
+ } else {
+ graphSize = getGraphSize()
+ }
+ resizeTimer = setTimeout(function() {
+ resizeTimer = null
+ if (getGraphSize() != graphSize) {
+ paintTree();
+ }
+ }, 250)
 });