Duplicate Element ID

[dulimarta]

TwoJS Scene and Groups share the same ID

I noticed that TwoJS scene (which is a Group) and the first user-created group share the same ID: two-0. Here is the sample code I used:

import Two from "two.js"; // Version 0.8.9
import { Group } from "two.js/src/group";
import { Circle } from "two.js/src/shapes/circle";

const two = new Two({
  width: 512,
  height: 512,
  autostart: true,
});

two.scene.matrix.manual = true;
two.scene.matrix.translate(256, 256);
two.appendTo(document.body);
let layers: Group[] = [];

for (let k = 0; k < 3; k++) {
  const g = new Group();
  g.addTo(two.scene);
  layers.push(g);
}
const c1 = new Circle(0, 0, 128);
c1.stroke = "red";
c1.linewidth = 3.0;
c1.addTo(layers[0]);

Screenshots

The following is the screenshot from FireFox inspector panel:

I'm not submitting this issue as a bug report, but it may potentially becomes a bug in the future.

[jonobr1]

Thanks for reporting. That looks like a bug. Which version of Two.js is this?

Nevermind, I see the version! I'll take a look at this.

[jonobr1]

Oh, if you're going to import the individual modules instead of the project as a whole then you need to get the Two module as well. Change your import statement to this:

import Two from 'two.js/src/two';

Or don't import group and circle and access them off of the Two object like so:

import Two from "two.js"; // Version 0.8.9

const two = new Two({
  width: 512,
  height: 512,
  autostart: true,
});

two.scene.matrix.manual = true;
two.scene.matrix.translate(256, 256);
two.appendTo(document.body);
let layers: Two.Group[] = [];

for (let k = 0; k < 3; k++) {
  const g = new Group();
  g.addTo(two.scene);
  layers.push(g);
}
const c1 = new Two.Circle(0, 0, 128);
c1.stroke = "red";
c1.linewidth = 3.0;
c1.addTo(layers[0]);

[dulimarta]

Thank you for your prompt response. My project is in TypeScript and using Two.Group as a type like in the second line below

import Two from "two.js";

let layers: Two.Group[] = []; // Compiles with error
const g = new Two.Group(); // Compiles OK  

produces the following compiler error

Namespace '"two.js"' has no exported member 'Group'.

[jonobr1]

I'm not well versed in Typescript, but I think you need to do this:

import Two from 'two.js';

const layer = new Two.Group();
const layers: typeof Two.Group[] = [layer];