Commit 90526f1f authored by Pietro Saccardi's avatar Pietro Saccardi
Browse files

Triggering repaint only after resize is done

parent 057e233f

webpack/js/mlab.js

+25 −6
Original line number Diff line number Diff line
@@ -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)

});