Published
Edited
Sep 15, 2020
Importers
1 star
class EZPIXI extends PIXI.Application {
constructor(settings = {}) {
const width = settings.width || 500;
const height = settings.height || 500;
const backgroundColor = settings.backgroundColor || settings.bgCol;
// Construct app super
if (backgroundColor) super({ width, height, backgroundColor });
else super({ width, height });
this.events = {}; // Collection of events
this.vars = {};
}
// Remove all immidiate children of stage
clear() {
const children = this.stage.children;
for(let i = children.length - 1; i >= 0; i--) {
this.stage.removeChild(children[i]);
}
}
// Add event to application
AddEvent(name, func) {
if(this.events[name]) this.view.removeEventListener(name, this.events[name]);
this.events[name] = func;
this.view.addEventListener(name, this.events[name]);
}
// Function for adding simple zoom
AddZoom(target, settings = {}) {
const min = settings.min || 0;
const max = settings.max || 1;
const value = settings.value === undefined ? min : settings.value;
const speed = settings.speed || 0.001;
// Set initial zoom
this.vars.zoom = value;
this.AddEvent('wheel', (e) => {
this.vars.zoom -= e.deltaY * speed;
if (this.vars.zoom < min) this.vars.zoom = min;
if (this.vars.zoom > max) this.vars.zoom = max;
target.scale.set(2 ** this.vars.zoom);
e.preventDefault(); // Consume scroll event
});
}
}
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.
