bg2e-js 2.0.0 → 2.0.2

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "bg2e-js",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "a graphics engine for productivity applications",
-  "main": "index.js",
+  "main": "./dist/bg2e-js.js",
+  "files": [
+    "dist/bg2e-js.js",
+    "dist/bg2e-js.js.map"
+  ],
+  "module": "./dist/bg2e-js.js",
   "type": "module",
-  "dependencies": {
-    "bg2io": "^1.0.7"
+  "scripts": {
+    "dev": "vite build --watch --emptyOutDir",
+    "build": "vite build --emptyOutDir"
   },
-  "scripts": {},
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ferserc1/bg2e-js.git"
@@ -23,5 +28,11 @@
   "bugs": {
     "url": "https://github.com/ferserc1/bg2e-js/issues"
   },
-  "homepage": "https://github.com/ferserc1/bg2e-js#readme"
+  "homepage": "https://github.com/ferserc1/bg2e-js#readme",
+  "dependencies": {
+    "bg2io": "^1.0.7"
+  },
+  "devDependencies": {
+    "vite": "^7.1.5"
+  }
 }

package/app/AppController.js

@@ -1,32 +0,0 @@
-
-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

@@ -1,98 +0,0 @@
-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

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

package/app/KeyboardEvent.js

@@ -1,51 +0,0 @@
-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

@@ -1,251 +0,0 @@
-
-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

@@ -1,77 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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 }`);
-        }
-    }
-}