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)
 });