bg2e-js 2.1.2 → 2.2.1

package/package.json

@@ -1,13 +1,30 @@
 {
   "name": "bg2e-js",
-  "version": "2.1.2",
+  "version": "2.2.1",
   "description": "a graphics engine for productivity applications",
   "main": "./dist/bg2e-js.js",
+  "types": "./src/index.ts",
   "files": [
     "dist/bg2e-js.js",
-    "dist/bg2e-js.js.map"
+    "dist/bg2e-js.js.map",
+    "src"
   ],
   "module": "./dist/bg2e-js.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/bg2e-js.js",
+      "default": "./dist/bg2e-js.js"
+    },
+    "./ts": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./ts/*": {
+      "types": "./src/*",
+      "import": "./src/*"
+    }
+  },
   "type": "module",
   "scripts": {
     "dev": "vite build --watch --emptyOutDir",
@@ -33,6 +50,7 @@
     "bg2io": "^1.0.7"
   },
   "devDependencies": {
+    "typescript": "^5.9.3",
     "vite": "^7.1.5"
   }
 }

package/src/app/AppController.ts

@@ -0,0 +1,39 @@
+import Bg2MouseEvent from "./Bg2MouseEvent";
+import Bg2KeyboardEvent from "./Bg2KeyboardEvent";
+import Bg2TouchEvent from "./Bg2TouchEvent";
+
+export default class AppController {
+    _mainLoop: any;
+
+    constructor() {
+        this._mainLoop = null;
+    }
+
+    get mainLoop(): any { return this._mainLoop; }
+    set mainLoop(ml: any) { this._mainLoop = ml; }
+
+    get canvas(): any { return this._mainLoop?.canvas; }
+
+    get renderer(): any { return this._mainLoop?.canvas?.renderer; }
+
+    get viewport(): { width: number; height: number; aspectRatio: number } { 
+        return this.canvas?.viewport || { width: 0, height: 0, aspectRatio: 0 }; 
+    }
+
+    async init(): Promise<void> {}
+    reshape(width: number, height: number): void {}
+    async frame(delta: number): Promise<void> {}
+    display(): void {}
+    destroy(): void {}
+    keyDown(evt: Bg2KeyboardEvent): void {}
+    keyUp(evt: Bg2KeyboardEvent): void {}
+    mouseUp(evt: Bg2MouseEvent): void {}
+    mouseDown(evt: Bg2MouseEvent): void {}
+    mouseMove(evt: Bg2MouseEvent): void {}
+    mouseOut(evt: Bg2MouseEvent): void {}
+    mouseDrag(evt: Bg2MouseEvent): void {}
+    mouseWheel(evt: Bg2MouseEvent): void {}
+    touchStart(evt: Bg2TouchEvent): void {}
+    touchMove(evt: Bg2TouchEvent): void {}
+    touchEnd(evt: Bg2TouchEvent): void {}
+}

package/src/app/Bg2KeyboardEvent.ts

@@ -0,0 +1,54 @@
+import EventBase from "./EventBase";
+
+export enum SpecialKey {
+    BACKSPACE = "Backspace",
+    TAB = "Tab",
+    ENTER = "Enter",
+    SHIFT = "Shift",
+    SHIFT_LEFT = "ShiftLeft",
+    SHIFT_RIGHT = "ShiftRight",
+    CTRL = "Control",
+    CTRL_LEFT = "ControlLeft",
+    CTRL_RIGHT = "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: any): KeyboardEvent => {
+    const code = (SpecialKey as any)[evt.code] != null ? evt.keyCode : evt.code;
+    return new KeyboardEvent(code, evt);
+}
+
+export default class KeyboardEvent extends EventBase {
+    key: string;
+    event: any;
+
+    static IsSpecialKey(event: any): boolean {
+        return (SpecialKey as any)[event.code] != null;
+    }
+    
+    constructor(key: string, event: any) {
+        super();
+        this.key = key;
+        this.event = event;
+    }
+    
+    get isSpecialKey(): boolean {
+        return KeyboardEvent.IsSpecialKey(this.event);
+    }
+}

package/src/app/Bg2MouseEvent.ts

@@ -0,0 +1,82 @@
+import { getMouseEventOffset } from "./Canvas";
+import EventBase from "./EventBase";
+
+export enum MouseButton {
+    LEFT = 0,
+    MIDDLE = 1,
+    RIGHT = 2,
+    NONE = -1
+}
+
+export enum MouseButtonEventType {
+    NONE = 0,
+    UP = 1,
+    DOWN = 2
+}
+
+export const createMouseEvent = (evt: any, mainLoop: any, buttonType: MouseButtonEventType): MouseEvent => {
+    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: boolean[] = [false, false, false];
+export const leftMouseButton = (): boolean => {
+    return g_mouseButtons[0];
+}
+
+export const middleMouseButton = (): boolean => {
+    return g_mouseButtons[1];
+}
+
+export const rightMouseButton = (): boolean => {
+    return g_mouseButtons[2];
+}
+
+export const clearMouseButtons = (): void => {
+    g_mouseButtons[0] = false;
+    g_mouseButtons[1] = false;
+    g_mouseButtons[2] = false;
+}
+
+export const setMouseButton = (event: any, status: boolean): void => {
+    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 {
+    button: MouseButton;
+    x: number;
+    y: number;
+    delta: number;
+    event: any;
+
+    constructor(button: MouseButton = MouseButton.NONE, x: number = -1, y: number = -1, delta: number = 0, event: any = null) {
+        super();
+        this.button = button;
+        this.x = x;
+        this.y = y;
+        this.delta = delta;
+        this.event = event;
+    }
+}

package/src/app/Bg2TouchEvent.ts

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

package/src/app/Canvas.ts

@@ -0,0 +1,108 @@
+import { generateUUID } from "../tools/crypto";
+
+export const getMouseEventOffset = (evt: any, canvas: Canvas): { x: number; y: number } => {
+    const offset = canvas.domElement.getBoundingClientRect();
+    return {
+        x: evt.clientX - offset.left,
+        y: evt.clientY - offset.top
+    };
+}
+
+export const getEventTouches = (evt: any, canvas: Canvas): any[] => {
+    const offset = canvas.domElement.getBoundingClientRect();
+    const touches = Array.from(evt.touches).map((touch: any) => {
+        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: Canvas | null = null;
+
+export default class Canvas {
+    private _renderer: any;
+    private _domElement: HTMLCanvasElement;
+    _mainLoop: any;
+
+    static FirstCanvas(): Canvas {
+        if (!g_firstCanvas) {
+            throw new Error("No Canvas instance has been created yet.");
+        }
+        return g_firstCanvas;
+    }
+
+    constructor(domElement: HTMLCanvasElement, renderer: any) {
+        this._renderer = renderer;
+        this._domElement = domElement;
+        (this._domElement as any)._bg2e_id = generateUUID();
+
+        g_firstCanvas = g_firstCanvas || this;
+
+        // Initialized in mainLoop constructor
+        this._mainLoop = null;
+    }
+
+    get id(): string {
+        return (this._domElement as any)._bg2e_id;
+    }
+
+    async init(): Promise<void> {
+        await this._renderer.init(this);
+    }
+
+    get mainLoop(): any { return this._mainLoop; }
+
+    get renderer(): any { return this._renderer; }
+
+    get domElement(): HTMLCanvasElement { return this._domElement; }
+
+    get width(): number { return this._domElement.clientWidth; }
+
+    get height(): number { return this._domElement.clientHeight; }
+
+    get viewport(): { width: number; height: number; aspectRatio: number } { return { width: this.width, height: this.height, aspectRatio: this.width / this.height }; }
+
+    updateViewportSize(): void {
+        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?: string, width?: number, height?: number): string {
+        let canvasStyle = "";
+        const prevSize = {
+            width: 0,
+            height: 0
+        };
+
+        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.style.cssText = canvasStyle;
+            this.domElement.width = prevSize.width;
+            this.domElement.height = prevSize.height;
+            this.mainLoop.appController.reshape(prevSize.width, prevSize.height);
+            this.mainLoop.appController.display();
+        }
+        return data;
+    }
+}

package/src/app/EventBase.ts

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

package/src/app/MainLoop.ts

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

package/src/app/index.ts

@@ -0,0 +1,25 @@
+import AppController from "./AppController";
+import Canvas, {
+     getMouseEventOffset,
+     getEventTouches
+} from "./Canvas";
+import EventBase from "./EventBase";
+import MainLoop, {
+    FrameUpdate
+} from "./MainLoop";
+import Bg2KeyboardEvent from "./Bg2KeyboardEvent";
+import Bg2MouseEvent from "./Bg2MouseEvent";
+import Bg2TouchEvent from "./Bg2TouchEvent";
+
+export default {
+    AppController,
+    FrameUpdate,
+    Canvas,
+    getMouseEventOffset,
+    getEventTouches,
+    EventBase,
+    Bg2KeyboardEvent,
+    MainLoop,
+    Bg2MouseEvent,
+    Bg2TouchEvent
+}