Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
protected setupScene(): void {
// test interpolation
this._labelLAB = new Position2DLabel(new Text(`| should be violet |`), Label.Type.Static);
// generated color
this._labelGenerated1 = new Position2DLabel(new Text(`| generated 0 |`), Label.Type.Dynamic);
this._labelGenerated2 = new Position2DLabel(new Text(`| generated 1 |`), Label.Type.Dynamic);
this._labelGenerated3 = new Position2DLabel(new Text(`| generated 2 |`), Label.Type.Dynamic);
this._labelGenerated4 = new Position2DLabel(new Text(`| generated 3 |`), Label.Type.Dynamic);
// color scale linear
this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);
// color scale nearest
this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
// color scale linear
this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);
// color scale nearest
this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);
const generatedLabels = [
this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]
const linearLabels = [
this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
this._labelLinear6, this._labelLinear7, this._labelLinear8];
const nearestLabels = [
this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,
this._labelNearest6, this._labelNearest7, this._labelNearest8];
this._labelPass.labels = [this._labelLAB, ...generatedLabels, ...linearLabels, ...nearestLabels];
this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);
// color scale nearest
this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);
const generatedLabels = [
this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]
const linearLabels = [
this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
this._labelLinear6, this._labelLinear7, this._labelLinear8];
const nearestLabels = [
this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,
this._labelNearest6, this._labelNearest7, this._labelNearest8];
this._labelPass.labels = [this._labelLAB, ...generatedLabels, ...linearLabels, ...nearestLabels];
this._labelGenerated3 = new Position2DLabel(new Text(`| generated 2 |`), Label.Type.Dynamic);
this._labelGenerated4 = new Position2DLabel(new Text(`| generated 3 |`), Label.Type.Dynamic);
// color scale linear
this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);
// color scale nearest
this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);
const generatedLabels = [
this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]
const linearLabels = [
this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
this._labelLinear6, this._labelLinear7, this._labelLinear8];
const nearestLabels = [
this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,
this._labelGenerated4 = new Position2DLabel(new Text(`| generated 3 |`), Label.Type.Dynamic);
// color scale linear
this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);
// color scale nearest
this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);
const generatedLabels = [
this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]
const linearLabels = [
this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
this._labelLinear6, this._labelLinear7, this._labelLinear8];
const nearestLabels = [
this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,
this._labelNearest6, this._labelNearest7, this._labelNearest8];
new Text(`${werther} | Label.Elide.Left`), Label.Type.Dynamic);
this._labelRight.fontSizeUnit = Label.Unit.Pixel;
this._labelRight.elide = Label.Elide.Left;
this._labelRight.alignment = Label.Alignment.Right;
this._labelRight.lineAnchor = Label.LineAnchor.Baseline;
this._labelRight.color.fromHex('#fff');
this._labelMiddle = new Position2DLabel(
new Text(`Label.Elide.Middle | ${werther} | Label.Elide.Middle`), Label.Type.Dynamic);
this._labelMiddle.fontSizeUnit = Label.Unit.Pixel;
this._labelMiddle.elide = Label.Elide.Middle;
this._labelMiddle.alignment = Label.Alignment.Center;
this._labelMiddle.lineAnchor = Label.LineAnchor.Baseline;
this._labelMiddle.color.fromHex('#fff');
this._labelCustom = new Position2DLabel(
new Text(`Custom Ellipsis | ${werther}`), Label.Type.Dynamic);
this._labelCustom.fontSizeUnit = Label.Unit.Pixel;
this._labelCustom.elide = Label.Elide.Right;
this._labelCustom.alignment = Label.Alignment.Left;
this._labelCustom.lineAnchor = Label.LineAnchor.Baseline;
this._labelCustom.color.fromHex('#fff');
this._labelPass.aaStepScale = 1.0;
this._labelPass.labels = [this._labelSize
, this._labelLeft, this._labelRight, this._labelMiddle, this._labelCustom];
setInterval(() => {
const size = 16 + Math.sin(performance.now() * 0.001) * 4.0;
this._labelSize.text.text = `// label.fontSize = ${size.toFixed(2)} (${this._labelSize.fontSizeUnit})`;
protected setupScene(): void {
/** Wrapped labels, showcasing Ellipsis and NewLine */
const kafka = 'One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in \
his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his \
brown belly, slightly domed and divided by arches into stiff sections.';
this._labelTop = new Position2DLabel(new Text(`Label.Anchor.Top | ${kafka}`), Label.Type.Dynamic);
this._labelTop.lineAnchor = Label.LineAnchor.Top;
this._labelAscent = new Position2DLabel(new Text(`Label.Anchor.Ascent | ${kafka}`), Label.Type.Dynamic);
this._labelAscent.lineAnchor = Label.LineAnchor.Ascent;
this._labelCenter = new Position2DLabel(new Text(`Label.Anchor.Center | ${kafka}`), Label.Type.Dynamic);
this._labelCenter.lineAnchor = Label.LineAnchor.Center;
this._labelBaseline = new Position2DLabel(new Text(`Label.Anchor.Baseline | ${kafka}`), Label.Type.Dynamic);
this._labelBaseline.lineAnchor = Label.LineAnchor.Baseline;
this._labelDescent = new Position2DLabel(new Text(`Label.Anchor.Descent | ${kafka}`), Label.Type.Dynamic);
this._labelDescent.lineAnchor = Label.LineAnchor.Descent;
this._labelBottom = new Position2DLabel(new Text(`Label.Anchor.Bottom | ${kafka}`), Label.Type.Dynamic);
this._labelBottom.lineAnchor = Label.LineAnchor.Bottom;
this._labelPass.labels = [this._labelTop, this._labelAscent, this._labelCenter,
this._labelBaseline, this._labelDescent, this._labelBottom];
for (const label of this._labelPass.labels) {
label.fontSize = 20;
as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world \
among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the \
presence of the Almighty, who formed us in his own image, and the breath of that universal love which bears and \
sustains us, as it floats around us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, \
and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often \
think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full \
and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!';
this._labelSize = new Position2DLabel(new Text(), Label.Type.Dynamic);
this._labelSize.fontSize = 20;
this._labelSize.fontSizeUnit = Label.Unit.Pixel;
this._labelSize.alignment = Label.Alignment.Left;
this._labelSize.lineAnchor = Label.LineAnchor.Baseline;
this._labelSize.color.fromHex('#27aae1');
this._labelLeft = new Position2DLabel(
new Text(`Label.Elide.Right | ${werther}`), Label.Type.Dynamic);
this._labelLeft.fontSizeUnit = Label.Unit.Pixel;
this._labelLeft.elide = Label.Elide.Right;
this._labelLeft.alignment = Label.Alignment.Left;
this._labelLeft.lineAnchor = Label.LineAnchor.Baseline;
this._labelLeft.color.fromHex('#fff');
this._labelRight = new Position2DLabel(
new Text(`${werther} | Label.Elide.Left`), Label.Type.Dynamic);
this._labelRight.fontSizeUnit = Label.Unit.Pixel;
this._labelRight.elide = Label.Elide.Left;
this._labelRight.alignment = Label.Alignment.Right;
this._labelRight.lineAnchor = Label.LineAnchor.Baseline;
this._labelRight.color.fromHex('#fff');
this._labelMiddle = new Position2DLabel(