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.
130 lines
3.5 KiB
130 lines
3.5 KiB
/**
|
|
*
|
|
*/
|
|
Visualizer.prototype.swap = function(delay, indexA, indexB) {
|
|
// 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(delay)
|
|
.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(delay, index) {
|
|
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; });
|
|
};
|
|
|
|
// /**
|
|
// * 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(delay, which) {
|
|
this.svg.select(`#marker${which}`).attr('style', 'display:none');
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
Visualizer.prototype.showMarker = function(delay, which) {
|
|
this.svg.select(`#marker${which}`).attr('style', 'display:block');
|
|
};
|
|
|
|
/**
|
|
* Marker movement.
|
|
*/
|
|
Visualizer.prototype.marker = function(delay, which, index, label) {
|
|
if (label !== undefined) {
|
|
label = label[0].toString();
|
|
this.svg.select(`#marker${which} text`).text(label)
|
|
}
|
|
|
|
this.svg.select(`#marker${which}`)
|
|
.transition().duration(delay)
|
|
.attr('transform', `translate(${Visualizer.calculateX(index)},${Visualizer.spacerW})`)
|
|
};
|
|
|
|
/**
|
|
* Message updates.
|
|
*/
|
|
Visualizer.prototype.message = function(delay, which, msg) {
|
|
var msg = msg || ' ';
|
|
this.parent.querySelector(`.message:nth-child(${which})`).innerHTML = msg;
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
Visualizer.prototype.reset = function() {
|
|
this.instructionIndex = 0;
|
|
|
|
this.message([null, 0, 1, '']);
|
|
this.message([null, 0, 2, '']);
|
|
this.message([null, 0, 3, '']);
|
|
this.message([null, 0, 4, '']);
|
|
this.message([null, 0, 5, '']);
|
|
|
|
this.marker([null, 0, 1, 0]);
|
|
this.marker([null, 0, 2, 0]);
|
|
this.unhighlight();
|
|
|
|
this.groups
|
|
.transition().duration(100)
|
|
.attr('transform', function doTransform(d, i) {
|
|
d.index = i;
|
|
return `translate(${Visualizer.calculateX(i)}, ${Visualizer.itemY})`;
|
|
});
|
|
};
|
|
|