bg2e-js 2.0.1 → 2.1.0

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "bg2e-js",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "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.d.ts

@@ -1,37 +0,0 @@
-
-import MainLoop from './MainLoop';
-import Canvas from './Canvas';
-import MouseEvent from  './MouseEvent';
-import TouchEvent from './TouchEvent';
-import KeyboardEvent from './KeyboardEvent';
-import Renderer from '../render/Renderer';
-
-export default class AppController {
-    constructor();
-
-    get mainLoop() ; MainLoop;
-    set mainLoop(ml: MainLoop);
-
-    get canvas() : Canvas;
-
-    get renderer() : Renderer;
-
-    get viewport() : { width: number, height: number, aspectRatio: number };
-
-    async init();
-    reshape(width: number, height: number);
-    async frame(delta: number);
-    display();
-    destroy();
-    keyDown(evt: KeyboardEvent);
-    keyUp(evt: KeyboardEvent);
-    mouseUp(evt: MouseEvent);
-    mouseDown(evt: MouseEvent);
-    mouseMove(evt: MouseEvent);
-    mouseOut(evt: MouseEvent);
-    mouseDrag(evt: MouseEvent);
-    mouseWheel(evt: MouseEvent);
-    touchStart(evt: TouchEvent);
-    touchMove(evt: TouchEvent);
-    touchEnd(evt: TouchEvent);
-}

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.d.ts

@@ -1,42 +0,0 @@
-
-import { MainLoop } from './MainLoop';
-
-export type Touch = {
-    identifier: number
-    x: number
-    y: number
-    force: number
-    rotationAngle: number
-    radiusX: number
-    radiusY: number
-}
-
-export declare function getMouseEventOffset(evt: any, canvas: Canvas) : { x: number, y: number };
-
-export declare function getEventTouches(evt: any, canvas: Canvas) : Touch[];
-
-export default class Canvas {
-    static FirstCanvas() : Canvas;
-
-    constructor(domElement: HTMLElement, renderer: any);
-
-    get id() : string;
-
-    async init() : Promise<void>;
-
-    get mainLoop() : 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() : void;
-
-    screenshot(format: string, width: number, height: number);
-}

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.d.ts

@@ -1,245 +0,0 @@
-
-import { Canvas } from "./Canvas";
-import { AppController } from "./AppController";
-
-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: Canvas, appController: AppController);
-
-    get canvas() : Canvas;
-    get appController() : 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;
-}