You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.3 KiB
123 lines
3.3 KiB
/**
|
|
*
|
|
*/
|
|
Visualizer.prototype.swap = function(args) {
|
|
var indexA = args[2];
|
|
var indexB = args[3];
|
|
|
|
// 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(${Visualizer.calculateX(d.index)}, ${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.groups.each(function(d, i) {
|
|
if (d.index === index) {
|
|
d3.select(this).select('rect').attr('fill', 'orangered')
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Un-highlights an index.
|
|
*/
|
|
Visualizer.prototype.unhighlight = function() {
|
|
this.svg.selectAll('.item').attr('fill', function(d) { return d.fill; });
|
|
};
|
|
|
|
// TODO restart instructions on re-init
|
|
// TODO on 'next step', skip past all zero-length timeouts -> do this in followInstruction by checking if timeout is zero
|
|
// TODO add adaptive/stable bools below canvas
|
|
// TODO add tabs for best/worst cases
|
|
|
|
// /**
|
|
// * 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;
|
|
// })
|
|
// };
|
|
|
|
/**
|
|
*
|
|
*/
|
|
Visualizer.prototype.hideMarker = function(args) {
|
|
var which = args[2];
|
|
this.svg.select(`#marker${which}`).attr('style', 'display:none');
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
Visualizer.prototype.showMarker = function(args) {
|
|
var which = args[2];
|
|
this.svg.select(`#marker${which}`).attr('style', 'display:block');
|
|
};
|
|
|
|
/**
|
|
* Marker movement.
|
|
*/
|
|
Visualizer.prototype.marker = function(args) {
|
|
var which = args[2];
|
|
var index = args[3];
|
|
var label = args[4];
|
|
|
|
if (label !== undefined) {
|
|
label = label[0].toString();
|
|
this.svg.select(`#marker${which} text`).text(label)
|
|
}
|
|
|
|
this.svg.select(`#marker${which}`)
|
|
.transition().duration(100)
|
|
.attr('transform', `translate(${Visualizer.calculateX(index)},${Visualizer.spacerW})`)
|
|
};
|
|
|
|
/**
|
|
* Message updates.
|
|
*/
|
|
Visualizer.prototype.message = function(args) {
|
|
var which = args[2];
|
|
var msg = args[3];
|
|
this.parent.querySelector(`.message:nth-child(${which})`).innerHTML = msg;
|
|
};
|
|
|