$ npm run build
> [email protected] build
> node node_modules/@eviltik/devsrv/bin/devsrv.js -b && node node_modules/rollup/dist/bin/rollup -c ./rollup.config.js

Sat, 05 Mar 2022 11:57:59 GMT devsrv - info: use config file ..GIT\CanvasUI\devsrv.config.js
Sat, 05 Mar 2022 11:57:59 GMT devsrv - info: build success

C:\Users\T\Desktop\DATA\DEV\GIT\CanvasUI\dist\examples\jsm_src\CanvasUI.js => dist/examples/js/CanvasUI.js...
created dist/examples/js/CanvasUI.js in 929ms

C:\Users\T\Desktop\DATA\DEV\GIT\CanvasUI\dist\examples\jsm_src\VRButton.js => dist/examples/js/VRButton.js...
created dist/examples/js/VRButton.js in 55ms

C:\Users\T\Desktop\DATA\DEV\GIT\CanvasUI\dist\examples\jsm_src\CanvasUI.js => dist/examples/jsm/CanvasUI.js...
created dist/examples/jsm/CanvasUI.js in 200ms

C:\Users\T\Desktop\DATA\DEV\GIT\CanvasUI\dist\examples\jsm_src\VRButton.js => dist/examples/jsm/VRButton.js...
created dist/examples/jsm/VRButton.js in 35ms

<link rel="stylesheet" href="../../css/reset.css"></link>

body{
    margin: 0;
}

canvas {
    display: block; /* fix necessary to remove space at bottom of canvas */
}

// 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 ..

const exampleList = [
{
    title: 'Buttons - Panel',
    url:'../buttons/'
}

import { Environnement } from '../Environnement.js';
import { CanvasUI } from '../../jsm/CanvasUI.js';

class App extends Environnement {
    constructor() {
        super();
    }

    createUI() {
        ...
    }

}

npm install eslint -g

const config = {
    panelSize: { width: 2, height: 0.5 },
    height: 128,
    info: { type: "text", position:{ left: 6, top: 6 }, width: 500, height: 58, backgroundColor: "#aaa", fontColor: "#000" },
    prev: { type: "button", position:{ top: 64, left: 0 }, width: 64, fontColor: "#bb0", hover: "#ff0", onSelect: onPrev },
    stop: { type: "button", position:{ top: 64, left: 64 }, width: 64, fontColor: "#bb0", hover: "#ff0", onSelect: onStop },
    next: { type: "button", position:{ top: 64, left: 128 }, width: 64, fontColor: "#bb0", hover: "#ff0", onSelect: onNext },
    continue: { type: "button", position:{ top: 70, right: 10 }, width: 200, height: 52, fontColor: "#fff", backgroundColor: "#2659a4", hover: "#3df", onSelect: onContinue },
    renderer: this.renderer
}

.button {
    color:#bb0;
    width:64px;
    top:64px;
    font-familly:"...";
    background-color:#000099;
    transition: background-color 0.2s;
}

.button:hover {
    background-color:#ff0;
    transition: background-color 1s;
}

#info {
    left:10px,
    top:10px,
    width:492px,
    height:50px,
    background-color:#aaa;
    color:#000
}

#continue {
    top:70px;
    right:70px;
    width:200px;
    height:50px;
    color:#fff;
}

#continue:hover {
    color:#0000ff;
}

.red {
    background-color:red;
}

const elements = {
    info: { type: 'text', value:'' },
    prev: { type: 'button', value:'...', style:{ left: 0 }, onSelect: onPrev },
    stop: { type: 'button', value:'...', style:{ left: 64 }, class:'red', onSelect: onStop },
    next: { type: 'button', value:'...', style:{ left: 128 }, onSelect: onNext },
    continue: { type: 'button', value:'Continue', onSelect: onContinue },
};

const config = {
    panelSize: { width:2, height:0.5 } ,
    height: 128,
    threejs:{
        renderer: this.renderer, // mandatory for XR
        camera: this.camera, // mandatory when mouse controller used
        scene: this.scene // mandatory for scrolling example, needed to add raycaster pointer when select
    }
    // this is defaults
    controller:{
        devices:{
            mouse:{ enable:true, handler:'follow' },
            xr:{ enable:true, raycasterLinesLength:10 }
        },
        select:{
            hover: false, // select once (keyboard behavior), 
            // hover:true, // trigger select event while raycaster is moving (select+hover) on the element (colorpicker or slider behavior)
            repeater:{
                // when hover=false, we have a repeater option, delayed trigger select event + repeat. 
                // usefull to handle "delete" keyboard key, select will repeat until you selectend
                timeoutms:100, // 0 mean immediate, 
                repeatms:20
            }
        }
    },
    
}

new CanvasUI( elements , config );

//Inside closure so that the inner functions don't need regeneration on every call.
const getCssClasses = (function () {
    function normalize(str) {
        if (!str)  return '';
        str = String(str).replace(/\s*([>~+])\s*/g, ' $1 ');  //Normalize symbol spacing.
        return str.replace(/(\s+)/g, ' ').trim();           //Normalize whitespace
    }
    function split(str, on) {               //Split, Trim, and remove empty elements
        return str.split(on).map(x => x.trim()).filter(x => x);
    }
    function containsAny(selText, ors) {
        return selText ? ors.some(x => selText.indexOf(x) >= 0) : false;
    }
    return function (selector) {
        const logicalORs = split(normalize(selector), ',');
        const sheets = Array.from(window.document.styleSheets);
        const ruleArrays = sheets.map((x) => Array.from(x.rules || x.cssRules || []));
        const allRules = ruleArrays.reduce((all, x) => all.concat(x), []);
        return allRules.filter((x) => containsAny(normalize(x.selectorText), logicalORs));
    };
})();

class foo {
    constructor() {
        this.bar = true;
    }
}

class foo {
   
    // private variable
    #foo_private= "bar_public";

    // public variable
    foo_public = "foo_public";

    constructor() {
        // modify private variable
        this.#foo_private = "bar2_private";
    
        // modify public variable
        this.foo_public = "bar2_public";

        // run a private method
        this.#myPrivateMethod();

        // run a public method
        this.myPublicMethod();
    }

    // private method
    #myPrivateMethod() {
    }

    // public method
    myPublicMethod() {
    }
}

class CanvasText extends CanvasWidget {
}

let property;
if (object) {
    property = (typeof object.attribute != undefined) ? object.attribute : defaultValue;
}

const property = (typeof object?.attribute !== undefined) ? object.attribute : defaultValue;

CanvasUI.js                  - bundled production code
CanvasUI.min.js           - bundled minified production code
CanvasUI.debug.js       - bundled source code

const config = {
    ...
    message: {
        type: 'input-text',
        placeholder: 'Click or select me',
        ...
    },
    label: {
        type: 'text',
        ...
    }
};

const content = {
    message: '',
    label: 'Keyboard demo'
};

The WebGL context was not marked as XR compatible. Call MakeXRCompatible to mark it as such. This will result in a fatal error in the future. See https://immersive-web.github.io/webxr/#dom-webglrenderingcontextbase-makexrcompatible

const config = {
    panelSize: { width: 2, height: 0.5 },
    height: 128,
    info: { type: "text", position:{ left: 6, top: 6 }, width: 500, height: 58, backgroundColor: "#aaa", fontColor: "#000" },
    prev: { type: "button", position:{ top: 64, left: 0 }, width: 64, fontColor: "#bb0", hover: "#ff0", onSelect: onPrev },
    stop: { type: "button", position:{ top: 64, left: 64 }, width: 64, fontColor: "#bb0", hover: "#ff0", onSelect: onStop },
    next: { type: "button", position:{ top: 64, left: 128 }, width: 64, fontColor: "#bb0", hover: "#ff0", onSelect: onNext },
    continue: { type: "button", position:{ top: 70, right: 10 }, width: 200, height: 52, fontColor: "#fff", backgroundColor: "#2659a4", hover: "#3df", onSelect: onContinue },
    renderer: this.renderer
}

const elements = {
    'info'': { type: 'text', value:'' },
    'prev': { type: 'button', value:'...', [ ... ] onSelect: onPrev },
    'stop': { type: 'button', value:'...', [ ... ] onSelect: onStop },
    'next': { type: 'button', value:'...', [ ... ] onSelect: onNext },
    'continue': { type: 'button', value:'Continue', [ ... ] onSelect: onContinue },
};

const config = {

   /**        
   * CanvasUI start with a panel having a size of 1x1 meter. 
   * But you can define your own size.
   */
    panel: {

        size: {
            width: 2,
            height: 0.5
        }

    } ,

   /**        
   * CanvasUI use a Canvas HTML element to renderer widgets into a texture.
   */
    canvas: {
      /**    
       * size: canvas size (width, height) of the offscreencanvas, default 512 (pixels)
       */
        size: {
            height: 128
        }
    },

    threejs: {

        /**
        * threejs attribute value can be your threejs application instance, on which canvasui will look for a renderer,
        * camera and scene attributes.
        */

        /**        
         * renderer
         * 
         * NEEDED if you want to use WebXR controllers (renderer.xr, renderer.xr.isPresenting, getControllers ...)
         */
        renderer: this.renderer, 

        /**        
         * camera
         * 
         * NEEDED if you want to use the Mouse controller, because the raycaster is attached to the camera
         */
        camera: this.camera,

        /**        
         * camera
         * 
         * OPTIONAL if you want CanvasUI to be able to add some extra meshes (i.e raycaster intercept mesh, 
         * like in the panel scrolling example )
         */
        scene: this.scene 

    }

    controller: {

        drivers: {

           /**
           * Mouse driver
           * You can use mouse to interact with CanvasUI elements
           * this required a camera in threejs.camera config
           */
            mouse: {

               /**
               * enable: true | false, default true
               */
                enable: true,

               /**
               * handler: follow, default follow ('capture' mode not yet implemented)
               * 
               * follow mode just follow the mouse cursor.
               */
                handler:'follow'
            },

           /**
           * WebXR driver
           */

            webxr: {

                   /**
                   * enable: true | false, default true
                   */
                    enable: true, 

                   /**
                   * raycasterLinesLength: in meters, default 10
                   */
                    raycasterLinesLength:10
           },

           // @nik, do you see more drivers for later ? gamepad :) ?

        },*

        /**
         * Select behavior
         * 
         * Common settings for both WebXR driver and Mouse driver
         * For WebXR driver: selectstart, select, selectend controlller events
         * For Mouse driver: mouseup/mousedown/mousemove events
         */

        select: {

              /**
               * Raycaster(s) hover behavior while element is selected
               * 
               * hover : true | false, default false
               *
               * true:  trigger onSelect once (keyboard like behavior)
               * false: trigger onSelect while raycaster is moving (select+hover) on the element. Colorpicker or Slider like behavior.
               */
                hover: false, 
    
                /**
                 * Select repeater behavior 
                 * 
                 * Only when hover = false. 
                 * Usefull for repeating onSelect event while keeping a select WebXR button pressed or mouse down. 
                 * In keyboard example, it simulate multiple keydown event
                 */   
                repeater: {

                     * When pressing WebXR select button controller or clicking the mouse on a CanvasUI element,
                     * the onSelect method of the element is triggered a first time. And that's all when hover = true.
                     * 
                     * But if hover = false, after the first onSelect method has been triggered, it will optionally wait 
                     * for timeoutms milliseconds before triggering onSelect with a setInterval().
                     * 
                     * Then if specified, onSelect event will be triggered every repeatms millisecond until 
                     * the selectend or mouseup event is triggered
                     *
                     * enable or disable the repeter
                     * enable: true | false, default false
                     * 
                     * timeoutms
                     * 0 mean setTimeout 0 , i.e onSelect will be triggered in the next event loop, similare to setImmediate.
                     * null or undefined value will trigger onSelect on the same event loop without setTimeout().
                     * timeoutms:  default 100
                     * 
                     * repeatms
                     * 0 mean setInterval 0 , i.e onSelect will be triggered in the next event loop, similare to setImmediate. (use with caution)
                     * null or undefined value will disable the repeater.
                     * repeatms: default 20
                     */
                    timeoutms:100, 
                    repeatms:20
                }
          }
    }
}

const config = {
    panel: { size: { width: 2, height: 0.5 } } ,
    canvas: { size : { height: 128 } },
    threejs: {
        renderer: this.renderer, 
        camera: this.camera
    }
}

new CanvasUI( elements , config );

functon onSelect() {
}

function onRaycasterEnter() {
    // play sound
}

function onRaycasterLeave() {
    // play sound
}

mybutton: {
    type: "button",
    position:{ top: 64, left: 0 },
    width: 64,
    fontColor: "#bb0",
    hover: "#ff0",
    onSelect,
    onRaycasterEnter,
    onRaycasterLeave
},