Published
Edited
Jun 15, 2018
Importers
1 star
class CanvasManager {
constructor(context, state) {
this.context = context;
this.state = state;
}
redrawDisplay(clear) {
let context = this.context
let state = this.state
if (clear) { context.clearRect(0, 0, config.n*config.size, config.n*config.size); }
let stack = state.stack;
let triggers = state.triggers;
const canvas = context.canvas;
triggers.splice(0, triggers.length);
function showSquares(state){
let squareDisplayList = state.entityList.map(e => e.display);
squareDisplayList.forEach(
sd => {
sd.passiveDisplay(context);
triggers.unshift(sd.previewListener(canvas));
triggers.unshift(sd.selectListener(canvas, stack));
})
}
function showElement(elem, listen_elem, show_children, listen_children){
if (elem.display != undefined) {
elem.display.display(context);
if (listen_elem) {
triggers.unshift(elem.display.previewListener(canvas));
triggers.unshift(elem.display.selectListener(canvas, stack));
}
}
if (show_children) {
let selection = elem.getNextSelection(state);
for (let i = 0; i < selection.length; i++) {
let s = selection[i];
s.display.display(context);
if (listen_children) {
triggers.unshift(s.display.previewListener(canvas));
triggers.unshift(s.display.selectListener(canvas, stack));
}
}
}
}
function showInputStack(stack){
let topLayer = stack.length - 1;
// For every element in the inputStack display if selected.
// Listen to deselect and only deselect for all or just the top element in the stack.
// Add preview and select listeners for nextSel only.
for (let layer = 0; layer < stack.length; layer++) {
let elem = stack[layer];
showElement(elem, false, false, false);
if (layer == topLayer) {
showElement(elem, true, true, true);
}
}
}
addListeners(context, triggers);
showSquares(state);
showInputStack(stack);
}
addListeners(context, triggerList) {
context.canvas.onmousemove = function(event) {
triggerList.map(t => t(event))
}
context.canvas.onclick = function(event) {
triggerList.map(t => t(event));
}
}
* tick() {
while (true) {
yield Promises.delay(16);
}
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
