bg2e-js 1.4.32 → 2.0.0

package/app/AppController.js

@@ -0,0 +1,32 @@
+
+export default class AppController {
+    constructor() {
+        this._mainLoop = null;
+    }
+
+    get mainLoop() { return this._mainLoop; }
+    set mainLoop(ml) { this._mainLoop = ml; }
+
+    get canvas() { return this._mainLoop?.canvas; }
+
+    get renderer() { return this._mainLoop?.canvas?.renderer; }
+
+    get viewport() { return this.canvas?.viewport || { width: 0, height: 0, aspectRatio: 0 }; }
+
+    async init() {}
+    reshape(width,height) {}
+    async frame(delta) {}
+    display() {}
+    destroy() {}
+    keyDown(evt) {}
+    keyUp(evt) {}
+    mouseUp(evt) {}
+    mouseDown(evt) {}
+    mouseMove(evt) {}
+    mouseOut(evt) {}
+    mouseDrag(evt) {}
+    mouseWheel(evt) {}
+    touchStart(evt) {}
+    touchMove(evt) {}
+    touchEnd(evt) {}
+}

package/app/Canvas.js

@@ -0,0 +1,98 @@
+import { generateUUID } from "../tools/crypto";
+
+export const getMouseEventOffset = (evt,canvas) => {
+    const offset = canvas.domElement.getBoundingClientRect();
+    return {
+        x: evt.clientX - offset.left,
+        y: evt.clientY - offset.top
+    };
+}
+
+export const getEventTouches = (evt,canvas) => {
+    const offset = canvas.domElement.getBoundingClientRect();
+    const touches = Array.from(evt.touches).map(touch => {
+        return {
+            identifier: touch.identifier,
+            x: touch.clientX - offset.left,
+            y: touch.clientY - offset.top,
+            force: touch.force,
+            rotationAngle: touch.rotationAngle,
+            radiusX: touch.radiusX,
+            radiusY: touch.radiusY
+        };
+    });
+    return touches;
+}
+
+let g_firstCanvas = null;
+
+export default class Canvas {
+    static FirstCanvas() {
+        return g_firstCanvas;
+    }
+
+    constructor(domElement,renderer) {
+        this._renderer = renderer;
+        this._domElement = domElement;
+        this._domElement._bg2e_id = generateUUID();
+
+        g_firstCanvas = g_firstCanvas || this;
+
+        // Initialized in mainLoop constructor
+        this._mainLoop = null;
+    }
+
+    get id() {
+        return this._domElement._bg2e_id;
+    }
+
+    async init() {
+        await this._renderer.init(this);
+    }
+
+    get mainLoop() { return this._mainLoop; }
+
+    get renderer() { return this._renderer; }
+
+    get domElement() { return this._domElement; }
+
+    get width() { return this._domElement.clientWidth; }
+
+    get height() { return this._domElement.clientHeight; }
+
+    get viewport() { return { width: this.width, height: this.height, aspectRatio: this.width / this.height }; }
+
+    updateViewportSize() {
+        const sizeInPx = { w: this.domElement.clientWidth, h: this.domElement.clientHeight };
+        this.domElement.width = sizeInPx.w * window.devicePixelRatio;
+        this.domElement.height = sizeInPx.h * window.devicePixelRatio;
+    }
+
+    screenshot(format, width, height) {
+        let canvasStyle = "";
+        const prevSize = {};
+
+        if (width) {
+            height = height ? height : width;
+            canvasStyle = this.domElement.style.cssText;
+            prevSize.width = this.domElement.width;
+            prevSize.height = this.domElement.height;
+
+            this.domElement.style.cssText = `top:auto;left:auto;bottom:auto;right:auto;width:${width}px;height:${height}px;`;
+            this.domElement.width = width;
+            this.domElement.height = height;
+            this.mainLoop.appController.reshape(width,height);
+            this.mainLoop.appController.display();
+        }
+
+        const data = this.domElement.toDataURL(format);
+        if (width) {
+            this.domElement.cssText = canvasStyle;
+            this.domElement.width = prevSize.width;
+            this.domElement.height = prevSize.height;
+            this.mainLoop.appController.reshape(prevSize.width, prevSize.heigth);
+            this.mainLoop.appController.display();
+        }
+        return data;
+    }
+}

package/app/EventBase.js

@@ -0,0 +1,8 @@
+
+export default class EventBase {
+    stopPropagation() {
+        this._stopPropagation = true;
+    }
+
+    get isEventPropagationStopped() { return this._stopPropagation; }
+}

package/app/KeyboardEvent.js

@@ -0,0 +1,51 @@
+import EventBase from "./EventBase";
+
+export const SpecialKey = {
+    BACKSPACE: "Backspace",
+    TAB: "Tab",
+    ENTER: "Enter",
+    SHIFT: "Shift",
+    SHIFT_LEFT: "ShiftLeft",
+    SHIFT_RIGHT: "ShiftRight",
+    CTRL: "Control",
+    CTRL_LEFT: "ControlLeft",
+    CTRL_LEFT: "ControlRight",
+    ALT: "Alt",
+    ALT_LEFT: "AltLeft",
+    ALT_RIGHT: "AltRight",
+    PAUSE: "Pause",
+    CAPS_LOCK: "CapsLock",
+    ESCAPE: "Escape",
+    PAGE_UP: "PageUp",
+    PAGEDOWN: "PageDown",
+    END: "End",
+    HOME: "Home",
+    LEFT_ARROW: "ArrowLeft",
+    UP_ARROW: "ArrowUp",
+    RIGHT_ARROW: "ArrowRight",
+    DOWN_ARROW: "ArrowDown",
+    INSERT: "Insert",
+    DELETE: "Delete",
+    SPACE: "Space"
+};
+
+export const createKeyboardEvent = (evt) => {
+    const code = SpecialKey[evt.code] != null ? evt.keyCode : evt.code;
+    return new KeyboardEvent(code, evt);
+}
+
+export default class KeyboardEvent extends EventBase {
+    static IsSpecialKey(event) {
+        return SpecialKey[event.code]!=null;
+    }
+    
+    constructor(key,event) {
+        super();
+        this.key = key;
+        this.event = event;
+    }
+    
+    get isSpecialKey() {
+        return KeyboardEvent.IsSpecialKey(this.event);
+    }
+}

package/app/MainLoop.js

@@ -0,0 +1,251 @@
+
+import { 
+    MouseButtonEventType, 
+    createMouseEvent, 
+    leftMouseButton,
+    middleMouseButton,
+    clearMouseButtons,
+    setMouseButton
+} from "./MouseEvent";
+import { createTouchEvent } from "./TouchEvent";
+import { createKeyboardEvent } from "./KeyboardEvent";
+
+export const FrameUpdate = {
+    AUTO: 0,
+    MANUAL: 1
+};
+
+const g_animationLoop = {
+    lastTime: 0,
+    mainLoop: []
+};
+
+async function animationLoop(totalTime) {
+    totalTime = totalTime || 0;
+    requestAnimationFrame(animationLoop);
+    const elapsed = totalTime - g_animationLoop.lastTime;
+    g_animationLoop.lastTime = totalTime;
+    for (const ml of g_animationLoop.mainLoop) {
+        await onUpdate(ml, elapsed);
+    }
+}
+
+class MouseStatus {
+    constructor() {
+        this.pos = {x: 0, y: 0};
+        this.leftButton = false;
+        this.middleButton = false;
+        this.rightButton = false;
+    }
+
+    get anyButton() { return this.leftButton || this.middleButton || this.rightButton; }
+}
+
+export default class MainLoop {
+    constructor(canvas, appController) {
+        this._canvas = canvas;
+        this._canvas._mainLoop = this;
+        this._appController = appController;
+        this._appController._mainLoop = this;
+        this._updateMode = FrameUpdate.AUTO;
+        this._redisplayFrames = 1;
+
+        this._mouseStatus = new MouseStatus();
+    }
+
+    get canvas() { return this._canvas; }
+    get appController() { return this._appController; }
+    get renderer() { return this._canvas?.renderer; }
+
+    get updateMode() { return this._updateMode; }
+    set updateMode(um) { this._updateMode = um; }
+
+    get mouseStatus() { return this._mouseStatus; }
+
+    get redisplay() { return this._redisplayFrames>0; }
+
+    async run() {
+        await this.canvas.init();
+        await this.appController.init();
+        initEvents(this);
+        g_animationLoop.mainLoop.push(this);
+        animationLoop();
+    }
+
+    exit() {
+        this.appController.destroy();
+        const i = g_animationLoop.mainLoop.indexOf(this);
+        if (i!==-1) {
+            g_animationLoop.mainLoop.splice(i,1);
+        }
+    }
+
+    postReshape() {
+        onResize(this);
+    }
+
+    postRedisplay({ frames=2,timeout=10 } = {}) {
+        if (timeout <= 0) {
+            this._redisplayFrames = frames;
+        }
+        else {
+            setTimeout(() => this._redisplayFrames = frames, timeout);
+        }
+    }
+}
+
+
+function initEvents(mainLoop) {
+    onResize(mainLoop);
+
+    const handlePropagation = (bgEvt,evt) => {
+        if (bgEvt.isEventPropagationStopped) {
+            evt.stopPropagation();
+            evt.preventDefault();
+            return false;
+        }
+        return true;
+    }
+
+    const c = mainLoop.canvas.domElement;
+    c.__mainLoop = mainLoop;
+    c.addEventListener("mousedown", evt => {
+        return handlePropagation(onMouseDown(evt, evt.target.__mainLoop), evt);
+    });
+    c.addEventListener("mousemove", evt => {
+        return handlePropagation(onMouseMove(evt, evt.target.__mainLoop), evt);
+    });
+    c.addEventListener("mouseout", evt => {
+        return handlePropagation(onMouseOut(evt, evt.target.__mainLoop), evt);
+    });
+    
+    c.addEventListener("mouseover", evt => {
+        return handlePropagation(onMouseOver(evt, evt.target.__mainLoop), evt);
+    });
+
+    c.addEventListener("mouseup", evt => {
+        return handlePropagation(onMouseUp(evt, evt.target.__mainLoop), evt);
+    });
+    
+    c.addEventListener("touchstart", evt => {
+        return handlePropagation(onTouchStart(evt, evt.target.__mainLoop), evt);
+    });
+
+    c.addEventListener("touchmove", evt => {
+        return handlePropagation(onTouchMove(evt, evt.target.__mainLoop), evt);
+    });
+    
+    c.addEventListener("touchend", evt => {
+        return handlePropagation(onTouchEnd(evt, evt.target.__mainLoop), evt);
+    });
+
+    const mouseWheelEvt = (/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
+    c.addEventListener(mouseWheelEvt, evt => {
+        return handlePropagation(onMouseWheel(evt, evt.target.__mainLoop), evt);
+    });
+
+    window.addEventListener("keydown", evt => {
+        g_animationLoop.mainLoop.forEach(ml => onKeyDown(evt, ml));
+    });
+
+    window.addEventListener("keyup", evt => {
+        g_animationLoop.mainLoop.forEach(ml => onKeyUp(evt, ml));
+    });
+
+    window.addEventListener("resize", evt => {
+        onResize(mainLoop);
+    });
+
+    c.oncontextmenu = evt => false;
+}
+
+function onResize(mainLoop) {
+    const dpi = window.devicePixelRatio;
+    mainLoop.appController.reshape(mainLoop.canvas.width * dpi, mainLoop.canvas.height * dpi);
+}
+
+async function onUpdate(mainLoop, elapsed) {
+    if (mainLoop.redisplay) {
+        if (mainLoop.updateMode === FrameUpdate.AUTO) {
+            mainLoop._redisplayFrames = 1;
+        }
+        else {
+            mainLoop._redisplayFrames--;
+        }
+        if (mainLoop._redisplayFrames > 0) {
+            await mainLoop.appController.frame(elapsed);
+            mainLoop.appController.display();
+        }
+    }
+}
+
+function onMouseDown(evt,mainLoop) {
+    const bg2Event = createMouseEvent(evt, mainLoop, MouseButtonEventType.DOWN);
+    setMouseButton(bg2Event, true);
+    mainLoop.appController.mouseDown(bg2Event);
+    return bg2Event;
+}
+
+function onMouseMove(evt,mainLoop) {
+    const bg2Event = createMouseEvent(evt, mainLoop, MouseButtonEventType.NONE);
+    mainLoop.appController.mouseMove(bg2Event);
+    if (mainLoop.mouseStatus.anyButton) {
+        mainLoop.appController.mouseDrag(bg2Event);
+    }
+    return bg2Event;
+}
+
+function onMouseOut(evt,mainLoop) {
+    const bg2Event = createMouseEvent(evt, mainLoop, MouseButtonEventType.NONE);
+    clearMouseButtons();
+    mainLoop.appController.mouseOut(bg2Event);
+    return bg2Event;
+}
+
+function onMouseOver(evt,mainLoop) {
+    return onMouseMove(evt,mainLoop)
+}
+
+function onMouseUp(evt,mainLoop) {
+    const bg2Event = createMouseEvent(evt, mainLoop, MouseButtonEventType.UP);
+    setMouseButton(bg2Event, false);
+    mainLoop.appController.mouseUp(bg2Event);
+    return bg2Event;
+}
+
+function onMouseWheel(evt,mainLoop) {
+    const bg2Event = createMouseEvent(evt, mainLoop, MouseButtonEventType.NONE);
+    bg2Event.delta = evt.wheelDelta ? evt.wheelDelta * -1 : evt.detail * 10;
+    mainLoop.appController.mouseWheel(bg2Event);
+    return bg2Event;
+}
+
+function onTouchStart(evt,mainLoop) {
+    const bgEvent = createTouchEvent(evt,mainLoop);
+    mainLoop.appController.touchStart(bgEvent);
+    return bgEvent;
+}
+
+function onTouchMove(evt,mainLoop) {
+    const bgEvent = createTouchEvent(evt,mainLoop);
+    mainLoop.appController.touchMove(bgEvent);
+    return bgEvent;
+}
+
+function onTouchEnd(evt,mainLoop) {
+    const bgEvent = createTouchEvent(evt,mainLoop);
+    mainLoop.appController.touchEnd(bgEvent);
+    return bgEvent;
+}
+
+function onKeyDown(evt,mainLoop) {
+    const bgEvent = createKeyboardEvent(evt);
+    mainLoop.appController.keyDown(bgEvent);
+    return bgEvent;
+}
+
+function onKeyUp(evt,mainLoop) {
+    const bgEvent = createKeyboardEvent(evt);
+    mainLoop.appController.keyUp(bgEvent);
+    return bgEvent;
+}

package/app/MouseEvent.js

@@ -0,0 +1,77 @@
+import { getMouseEventOffset } from "./Canvas";
+import EventBase from "./EventBase";
+
+export const MouseButton = {
+    LEFT: 0,
+    MIDDLE: 1,
+    RIGHT: 2,
+    NONE: -1
+};
+
+export const MouseButtonEventType = {
+    NONE: 0,
+    UP: 1,
+    DOWN: 2
+};
+
+export const createMouseEvent = (evt,mainLoop,buttonType) => {
+    mainLoop.mouseStatus.pos = getMouseEventOffset(evt, mainLoop.canvas);
+    if (buttonType !== MouseButtonEventType.NONE) {
+        const buttonStatus = buttonType === MouseButtonEventType.DOWN;
+        if (evt.button === MouseButton.LEFT) {
+            mainLoop.mouseStatus.leftButton = buttonStatus;
+        }
+        else if (evt.button === MouseButton.MIDDLE) {
+            mainLoop.mouseStatus.middleButton = buttonStatus;
+        }
+        else if (evt.button === MouseButton.RIGHT) {
+            mainLoop.mouseStatus.rightButton = buttonStatus;
+        }
+    }
+
+    return new MouseEvent(evt.button, mainLoop.mouseStatus.pos.x, mainLoop.mouseStatus.pos.y, 0, evt);
+}
+
+const g_mouseButtons = [false,false,false];
+export const leftMouseButton = () => {
+    return g_mouseButtons[0];
+}
+
+export const middleMouseButton = () => {
+    return g_mouseButtons[1];
+}
+
+export const rightMouseButton = () => {
+    return g_mouseButtons[2];
+}
+
+export const clearMouseButtons = () => {
+    g_mouseButtons[0] = false;
+    g_mouseButtons[1] = false;
+    g_mouseButtons[2] = false;
+}
+
+export const setMouseButton = (event, status) => {
+    switch (event.button) {
+    case MouseButton.LEFT:
+        g_mouseButtons[0] = status;
+        break;
+    case MouseButton.MIDDLE:
+        g_mouseButtons[1] = status;
+        break;
+    case MouseButton.RIGHT:
+        g_mouseButtons[2] = status;
+        break;
+    }
+}
+export default class MouseEvent extends EventBase {
+
+    constructor(button = MouseButton.NONE, x=-1, y=-1, delta=0,event=null) {
+        super();
+        this.button = button;
+        this.x = x;
+        this.y = y;
+        this.delta = delta;
+        this.event = event;
+    }
+}

package/app/TouchEvent.js

@@ -0,0 +1,15 @@
+import { getEventTouches } from "./Canvas";
+import EventBase from "./EventBase";
+
+export const createTouchEvent = (evt,mainLoop) => {
+    const touches = getEventTouches(evt,mainLoop.canvas);
+    return new TouchEvent(touches, evt);
+}
+
+export default class TouchEvent extends EventBase {
+    constructor(touches,event) {
+        super();
+        this.touches = touches;
+        this.event = event;
+    }
+}

package/base/Color.js

@@ -0,0 +1,131 @@
+import Vec from '../math/Vec';
+
+const checkLength = (v1,v2 = null) => {
+    if (v1.length < 4 || (v2 !== null && v2.length < 4)) {
+        throw new Error(`Invalid color component length`);
+    }
+}
+
+export default class Color extends Vec {
+    constructor() {
+        if (arguments.length === 1 && arguments[0].length === 4) {
+            // 4 elements array
+            super(arguments[0]);
+        }
+        else if (arguments.length === 1 && arguments[0].length === 3) {
+            super(arguments[0][0], arguments[0][1], arguments[0][2], 1);
+        }
+        else if (typeof(arguments) === "object" &&
+            arguments[0].rgb !== undefined ||
+            arguments[0].r !== undefined ||
+            arguments[0].g !== undefined ||
+            arguments[0].b !== undefined ||
+            arguments[0].a !== undefined
+        ) {
+            const r = arguments[0].r || arguments[0].rgb || 0;
+            const g = arguments[0].g || arguments[0].rgb || 0;
+            const b = arguments[0].b || arguments[0].rgb || 0;
+            const a = arguments[0].a || arguments[0].a || 1;
+            super(r, g, b, a);
+        }
+        else if (arguments.length === 0) {
+            super([0, 0, 0, 1]);
+        }
+        else {
+            throw new Error('Invalid initialization parameters in Color constructor');
+        }
+    }
+   
+    static Yellow() { return new Color([1.0,1.0,0.0,1.0]); }
+    static Orange() { return new Color([1.0,0.5,0.0,1.0]); }
+    static Red() { return new Color([1.0,0.0,0.0,1.0]); }
+    static Violet() { return new Color([0.5,0.0,1.0,1.0]); }
+    static Blue() { return new Color([0.0,0.0,1.0,1.0]); }
+    static Green() { return new Color([0.0,1.0,0.0,1.0]); }
+    static White() { return new Color([1.0,1.0,1.0,1.0]); }
+    static LightGray() { return new Color([0.8,0.8,0.8,1.0]); }
+    static Gray() { return new Color([0.5,0.5,0.5,1.0]); }
+    static DarkGray() { return new Color([0.2,0.2,0.2,1.0]); }
+    static Black() { return new Color([0.0,0.0,0.0,1.0]); }
+    static Brown() { return new Color([0.4,0.2,0.0,1.0]); }
+    static Transparent() { return new Color([0,0,0,0]); }
+
+    get r() { return this[0]; }
+    set r(v) { this[0] = v; }
+    get g() { return this[1]; }
+    set g(v) { this[1] = v; }
+    get b() { return this[2]; }
+    set b(v) { this[2] = v; }
+    get a() { return this[3]; }
+    set a(v) { this[3] = v; }
+
+    get rgb() { return new Vec(this[0], this[1], this[2]); }
+    set rgb(rgb) {
+        if (rgb.length === 3) {
+            this[0] = rgb[0];
+            this[1] = rgb[1];
+            this[2] = rgb[2];
+        }
+        else {
+            throw new Error("Invalid parameter settings rgb values in Color");
+        }
+    }
+
+    static Max(v1,v2) {
+        checkLength(v1, v2);
+        return new Color([
+            v1[0]>v2[0] ? v1[0] : v2[0],
+            v1[1]>v2[1] ? v1[1] : v2[1],
+            v1[2]>v2[2] ? v1[2] : v2[2],
+            v1[3]>v2[3] ? v1[3] : v2[3]
+        ]);
+    }
+
+    static Min(v1,v2) {
+        checkLength(v1, v2);
+        return new Color([
+            v1[0]<v2[0] ? v1[0] : v2[0],
+            v1[1]<v2[1] ? v1[1] : v2[1],
+            v1[2]<v2[2] ? v1[2] : v2[2],
+            v1[3]<v2[3] ? v1[3] : v2[3]
+        ]);
+    }
+
+    static Add(v1,v2) {
+        checkLength(v1, v2);
+        return new Color([
+            v1[0] + v2[0],
+            v1[1] + v2[1],
+            v1[2] + v2[2],
+            v1[3] + v2[3]
+        ]);
+    }
+
+    static Sub(v1,v2) {
+        checkLength(v1, v2);
+        return new Color([
+            v1[0] - v2[0],
+            v1[1] - v2[1],
+            v1[2] - v2[2],
+            v1[3] - v2[3]
+        ]);
+    }
+
+    static Mult(v,s) {
+        checkLength(v);
+        new Color([ v[0] * s, v[1] * s, v[2] * s, v[3] * s ]);
+    }
+
+    static Div(v,s) {
+        switch (v.length) {
+        case 2:
+            return new Vec([ v[0] / s, v[1] / s ]);
+        case 3:
+            return new Vec([ v[0] / s, v[1] / s, v[2] / s ]);
+        case 4:
+            return new Vec([ v[0] / s, v[1] / s, v[2] / s, v[3] / s ]);
+        default:
+            throw new Error(`Invalid vector size: ${ v.length }`);
+        }
+    }
+}