d3-sort-visualization/js/visualizer-actions.js

/**
 * Instructions contain a string with the name of a function in this object which is called to perform an action.
 */
Visualizer.prototype.initSection = function() {
    // console.warn('INIT SECTION');
};

/**
 *
 */
Visualizer.prototype.swap = function(indexA, indexB) {
    // console.warn('SWAP');
// Move u;
// NOTE Two way binding here between dataset and function parameter?
// NOTE swapping will not reorder index and i parameter will be off
// NOTE discuss chained transitions: http://bl.ocks.org/mbostock/1125997
    // this.groups
    //     .transition().duration(400)
    //         .attr('transform', function doTransform(d) {
    //             if (d.index === indexA) {
    //                 d.index = indexB;
    //             }
    //             else if (d.index === indexB) {
    //                 d.index = indexA;
    //             }

    //             return `translate(${d.index * (Visualizer.itemW + Visualizer.spacerW)}, ${Visualizer.itemY})`;
    //         })
};

/**
 * Highlights an index.
 */
Visualizer.prototype.highlight = function(args) {
    var index = args[2];

    if (index < 0) {
        console.error('Trying to highlight index of ' + index);
        return;
    }

    this.svg.select(`g:nth-child(${index})`).select('rect').attr('fill', 'red');
};

/**
 * Un-highlights an index.
 */
Visualizer.prototype.unhighlight = function() {
    this.svg.selectAll('.item').attr('fill', function(d) { return d.fill; });
};

// /**
//  * Greys out an item.
//  */
// Visualizer.prototype.fade = function(startIndex, endIndex) {
//     console.log(`fading from ${startIndex} to ${endIndex}`);
//     this.svg.selectAll('rect')
//         // NOTE this replaces the fill function reference for each rectangle - key point!
//         .attr('fill', function fill(d) {
//             if (d.index >= startIndex && d.index <= endIndex) {
//                 console.log(`${d.index} to ${d.fade}`)
//                 return d.fade;
//             }
//             return d.fill;
//         });
// };

// /**
//  * Restores all items to un-greyed state.
//  */
// Visualizer.prototype.unfade = function() {
//     this.svg.selectAll('rect')
//         .attr('fill', functi;n fill(d) {
//             console.log(`unfade ${d.index}`)
//             return d.fill;
//         })
// };

/**
 * Moves marker 1 to an index and sets its text label.
 */
Visualizer.prototype.marker1 = function(args) {
    var index = args[2];
    var label = args[3];

    if (label !== undefined) {
        label = label[0].toString();
        this.svg.select('#marker1 text').text(label)
    }

    var x = index * (Visualizer.itemW + Visualizer.spacerW);

    this.svg.select('#marker1')
        .transition().duration(300)
        .attr('transform', `translate(${x},0)`)
};

/**
 * Moves marker 2 to an index and sets its text label.
 */
Visualizer.prototype.marker2 = function(args) {
    var index = args[2];
    var label = args[3];

    if (label !== undefined) {
        label = label[0].toString();
        this.svg.select('#marker2 text').text(label)
    }

    var x = index * (Visualizer.itemW + Visualizer.spacerW);

    this.svg.select('#marker2')
        .transition().duration(300)
        .attr('transform', `translate(${x},0)`)
};

/**
 * Updates message in stats 1 div.
 */
Visualizer.prototype.stats1 = function(args) {
    var msg = args[2];
    this.parent.querySelectorAll('.stat')[0].innerHTML = msg;
};

/**
 * Updates message in stats 2 div.
 */
Visualizer.prototype.stats2 = function(args) {
    var msg = args[2];
    this.parent.querySelectorAll('.stat')[1].innerHTML = msg;
};

/**
 * Updates message in message 1 div.
 */
Visualizer.prototype.message1 = function(args) {
    var msg = args[2];
    this.parent.querySelector('.message:nth-child(2)').innerHTML = msg;
};

/**
 * Updates message in message 2 div.
 */
Visualizer.prototype.message2 = function(args) {
    var msg = args[2];
    this.parent.querySelector('.message:nth-child(2)').innerHTML = msg;
};

/**
 * Updates message in message 3 div.
 */
Visualizer.prototype.message3 = function(args) {
    var msg = args[2];
    this.parent.querySelector('.message:nth-child(3)').innerHTML = msg;
};