canvasUI refactor

[eviltik]

Currently, we are creating Canvas UI widgets by instantiating a Canvas class.

Just thinking to tend to something like datGUIXR.

// only one CanvasUI instance, so we can shared data between widgets (raycaster, xr controllers events ..)
const canvasUI = new CanvasUI();

// then we can add widgets like this
const panelLeft = canvasUI.add(contentPanelLeft, configPanelLeft);
const panelRight = canvasUI.add(contentPanelRight, configPanelRight);

// open the door to new usefull methods ?
panelLeft.hide(); // show() // destroy // move // rotate // setModal // moveForward // moveBackward ..

// globals methods ?
canvasUI.hideAll(); // showAll // destroyAll // enable/visible ..

[NikLever]

A lot of the time there will be a single panel, so let's stick with an option to use a constructor CanvasUI(content, config). That would automatically add a CanvasPanel(content, config) to the panels array.

[eviltik]

Ho yes i see now !

I was working on that on my approach yesterday. Because of keyboard and mouse behavior (same as xr controllers, mouse events are setted twice).

I started a dev-mouse-controller branch based on your dev branch. Let me try.

[eviltik]

A lot of the time there will be a single panel,

Well, not sure about that ;)

That would automatically add a CanvasPanel(content, config) to the panels array. Looks like we need a new class. CanvasPanel.

Not all is clear for me, I'm trying to figure out better. Any additional explanations are welcome.

Just to be sure we are in sync :

• do you see any changes in initial CanvasUI content or config object (i.e impact createUI() in app.js) ?
• does CanvasPanel is just a kind of container
  • used to handle controllers (xr, mouse),
  • used to handle selection/hovering
  • having "elements" as childs ?
• does CanvasPanel is unique for every sub canvasui element (i.e keyboard) ?

[NikLever]

CanvasUI is used to handle controllers and an array of CanvasPanels CanvasPanel is a single Quad mesh with a CanvasTexture

const ui = new CanvasUI(content, config)

would create a singleton CanvasUI with a single CanvasPanel

The same as

const ui = new CanvasUI()
ui.add(content, config)