bg2e-js 2.1.2 → 2.2.1

package/src/manipulation/SelectionIdAssignVisitor.ts

@@ -0,0 +1,97 @@
+import NodeVisitor from "../scene/NodeVisitor";
+import SelectionMode from "./SelectionMode";
+import Color from "../base/Color";
+import Node from "../scene/Node";
+
+const getColor = (comps: number[]) => "" + comps[0] + comps[1] + comps[2];
+
+export default class SelectionAssignVisitor extends NodeVisitor {
+    protected _selectionMode: SelectionMode;
+    protected _elements: Record<string, any>;
+    protected _r: number = 0;
+    protected _g: number = 0;
+    protected _b: number = 0;
+
+    constructor() {
+        super();
+
+        this._selectionMode = SelectionMode.POLY_LIST;
+        this._elements = {};
+    }
+
+    set selectionMode(mode) {
+        this._selectionMode = mode;
+        this.clear();
+    }
+
+    get selectionMode() {
+        return this._selectionMode;
+    }
+
+    clear() {
+        this._r = 0;
+        this._g = 0;
+        this._b = 0;
+        this._elements = {};
+    }
+
+    getNextColor() {
+        const getId = () => {
+            return [ Math.round(Math.random()*255),
+                     Math.round(Math.random()*255),
+                     Math.round(Math.random()*255)];
+        }
+        
+        let components = getId();
+        let color = getColor(components);
+        while (this._elements[color]) {
+            components = getId();
+            color = getColor(components);
+        }
+
+        this._r = components[0];
+        this._g = components[1];
+        this._b = components[2];
+
+        return new Color([components[0]/255, components[1]/255, components[2]/255, 1]);
+    }
+
+    findElement(pickedColor: Uint8Array | undefined | null) {
+        if (!pickedColor) {
+            return null;
+        }
+
+        const color = [
+            pickedColor[0],
+            pickedColor[1],
+            pickedColor[2]
+        ];
+        return this._elements[getColor(color)];
+    }
+
+    visit(node: Node) {
+        const { drawable } = node;
+        if (drawable) {
+            let color = this.getNextColor();
+            drawable.items.forEach(({polyList}, i, array) => {
+                if (polyList.isSelectable) {
+                    polyList.colorCode = color;
+                    polyList.selected = false;
+                    const colorCode = getColor([
+                        Math.round(color[0] * 255),
+                        Math.round(color[1] * 255),
+                        Math.round(color[2] * 255)
+                    ]);
+                    this._elements[colorCode] = { polyList, drawable };
+                }
+
+                // Get new color code for the next polyList, only if this is not the
+                // last item, and the selection mode is POLY_LIST, otherwise we'll
+                // use the same color code for all polyList in the drawable
+                if (i<array.length-1 && this._selectionMode == SelectionMode.POLY_LIST) {
+                    color = this.getNextColor();
+                }
+            });
+        }
+    }
+}

package/src/manipulation/SelectionManager.ts

@@ -0,0 +1,166 @@
+import Vec from "../math/Vec";
+import SelectionBuffer from "./SelectionBuffer";
+import Camera from "../scene/Camera";
+import SelectionIdAssignVisitor from "./SelectionIdAssignVisitor";
+import SelectionMode from "./SelectionMode";
+import Renderer from "../render/Renderer";
+import Node from "../scene/Node";
+import Bg2MouseEvent from "../app/Bg2MouseEvent";
+import Bg2TouchEvent from "../app/Bg2TouchEvent";
+
+export type SelectionChangedData = {
+    polyList: any;
+    drawable: any;
+}
+export type SelectionChangedCallback = (selection: SelectionChangedData[]) => void;
+
+export default class SelectionManager {
+    protected _renderer: Renderer;
+    protected _sceneRoot: Node | null;
+    protected _camera: Camera | null;
+    protected _selectionMode: SelectionMode;
+    protected _multiSelect: boolean;
+    protected _selection: Array<{ polyList: any; drawable: any }>;
+    protected _selectionChangedCallbacks: Record<string, SelectionChangedCallback>;
+    protected _selectionBuffer: SelectionBuffer | null = null;
+    protected _selectionIdVisitor: SelectionIdAssignVisitor | null = null;
+    protected _downPosition: Vec = new Vec();
+    protected _viewportSize: [number, number] = [1, 1];
+
+    constructor(renderer: Renderer) {
+        this._renderer = renderer;
+        this._sceneRoot = null;
+        this._camera = null;
+        this._selectionMode = SelectionMode.POLY_LIST;
+        this._multiSelect = false;
+
+        this._selection = [];
+
+        this._selectionChangedCallbacks = {}
+    }
+
+    async init() {
+        this._selectionBuffer = new SelectionBuffer(this._renderer);
+        await this._selectionBuffer.init();
+
+        this._selectionIdVisitor = new SelectionIdAssignVisitor();
+    }
+
+    setViewportSize(w: number, h: number) {
+        this._viewportSize = [w, h];
+    }
+
+    get selection() {
+        return this._selection;
+    }
+
+    clearSelection() {
+        this._selection = [];
+    }
+
+    set sceneRoot(root) {
+        this._sceneRoot = root;
+        this.clearSelection();
+    }
+
+    get sceneRoot() {
+        return this._sceneRoot;
+    }
+
+    set camera(cam) {
+        this._camera = cam;
+        this.clearSelection();
+    }
+
+    get camera() {
+        if (this._camera) {
+            return this._camera;
+        }
+
+        if (!this.sceneRoot) {
+            return null;
+        }
+
+        this._camera = Camera.GetMain(this.sceneRoot);
+        return this._camera;
+    }
+
+    set selectionMode(mode: SelectionMode) {
+        this._selectionMode = mode;
+        this.clearSelection();
+    }
+
+    get selectionMode() {
+        return this._selectionMode;
+    }
+
+    set multiSelectMode(mode) {
+        this._multiSelect = mode;
+        this.clearSelection();
+    }
+
+    get multiSelectMode() {
+        return this._multiSelect;
+    }
+
+    onSelectionChanged(id: string, cb: SelectionChangedCallback) {
+        this._selectionChangedCallbacks[id] = cb;
+    }
+
+    triggerSelectionChanged() {
+        for (const key in this._selectionChangedCallbacks) {
+            this._selectionChangedCallbacks[key](this._selection);
+        }
+    }
+
+    mouseUp(evt: { x: number; y: number }) {
+        if (!this._selectionBuffer || !this._selectionIdVisitor || !this.camera || !this.sceneRoot) {
+            return;
+        }
+
+        const upPosition = new Vec([evt.x, evt.y]);
+        if (Vec.Distance(this._downPosition, upPosition) < 2) {
+            if (this._selectionIdVisitor && this.sceneRoot) {
+                this._selectionIdVisitor.selectionMode = this.selectionMode;
+                this.sceneRoot.accept(this._selectionIdVisitor);
+            }
+            const pixelRatio = window.devicePixelRatio || 1;
+            this._selectionBuffer?.reshape(this._viewportSize[0], this._viewportSize[1]);
+            const pickedColor = this._selectionBuffer!.draw(this.sceneRoot, this.camera, evt.x * pixelRatio, evt.y * pixelRatio);
+            const item = this._selectionIdVisitor.findElement(pickedColor);
+            const isSelected = () => this._selection.find(s => {
+                return s.polyList === item.polyList && s.drawable === item.drawable
+            });
+            if (item && this._multiSelect && !isSelected()) {
+                this._selection.push(item);
+                this.triggerSelectionChanged();
+            }
+            else if (item && !isSelected()) {
+                this._selection = [item];
+                this.triggerSelectionChanged();
+            }
+            else if (!item && !this._multiSelect && this._selection.length > 0) {
+                this._selection = [];
+                this.triggerSelectionChanged();
+            }
+
+            this._selection.forEach(item => item.polyList.selected = true);
+        }
+    }
+
+    mouseDown(evt: Bg2MouseEvent) {
+        this._downPosition = new Vec([evt.x, evt.y]);
+    }
+
+    touchStart(evt: Bg2TouchEvent) {
+
+    }
+
+    touchEnd(evt: Bg2TouchEvent) {
+
+    }
+
+    destroy() {
+        this._selectionBuffer?.destroy();
+    }
+}

package/src/manipulation/SelectionMode.ts

@@ -0,0 +1,6 @@
+enum SelectionMode {
+    OBJECT = 0,
+    POLY_LIST = 1
+}
+
+export default SelectionMode;

package/src/math/Mat3.ts

@@ -0,0 +1,259 @@
+import { NumericArray } from "./constants";
+import Vec from "./Vec";
+import { isZero, equals } from "./functions";
+
+export default class Mat3 extends NumericArray {
+    constructor();
+    constructor(m: ArrayLike<number>);
+    constructor(m0: number, m1: number, m2: number, m3: number, m4: number, m5: number, m6: number, m7: number, m8: number);
+    constructor(...args: any[]) {
+        if (args.length === 9) {
+            super(args);
+        }
+        else if (args.length === 1 && args[0].length === 9) {
+            super(args[0]);
+        }
+        else if (args.length === 0) {
+            super([0,0,0,0,0,0,0,0,0]);
+        }
+        else {
+            throw new Error(`Invalid parameter size in Mat3 constructor`);
+        }
+    }
+
+    identity(): this {
+        this[0] = 1; this[1] = 0; this[2] = 0;
+        this[3] = 0; this[4] = 1; this[5] = 0;
+        this[6] = 0; this[7] = 0; this[8] = 1;
+        return this;
+    }
+
+    zero(): this {
+        this[0] = 0; this[1] = 0; this[2] = 0;
+        this[3] = 0; this[4] = 0; this[5] = 0;
+        this[6] = 0; this[7] = 0; this[8] = 0;
+        return this;
+    }
+
+    row(i: number): Vec {
+        return new Vec(
+            this[i * 3], 
+            this[i * 3 + 1],
+            this[i * 3 + 2]);
+    }
+
+    setRow(i: number, a: ArrayLike<number>): this;
+    setRow(i: number, x: number, y: number, z: number): this;
+    setRow(i: number, a: number | ArrayLike<number>, y?: number, z?: number): this {
+        if (typeof a === 'object' && a.length >= 3) {
+            this[i * 3]      = a[0];
+            this[i * 3 + 1]  = a[1];
+            this[i * 3 + 2]  = a[2];
+        }
+        else if (typeof(a) === "number" && 
+            typeof(y) === "number" && 
+            typeof(z) === "number"
+        ) {
+            this[i * 3]      = a;
+            this[i * 3 + 1]  = y;
+            this[i * 3 + 2]  = z;
+        }
+        else {
+            throw new Error(`Invalid parameter setting matrix row`);
+        }
+        return this;
+    }
+
+    col(i: number): Vec {
+        return new Vec(
+            this[i],
+            this[i + 3],
+            this[i + 3 * 2]
+        )
+    }
+
+    setCol(i: number, a: ArrayLike<number>): this;
+    setCol(i: number, x: number, y: number, z: number): this;
+    setCol(i: number, a: number | ArrayLike<number>, y: number | null = null, z: number | null = null): this {
+        if (typeof a === 'object' && a.length >= 3) {
+            this[i]         = a[0];
+            this[i + 3]     = a[1];
+            this[i + 3 * 2] = a[2];
+        }
+        else if (typeof(a) === "number" && 
+            typeof(y) === "number" && 
+            typeof(z) === "number"
+        ) {
+            this[i]         = a;
+            this[i + 3]     = y;
+            this[i + 3 * 2] = z;
+        }
+        else {
+            throw new Error(`Invalid parameter setting matrix row`);
+        }
+        return this;
+    }
+
+    assign(m: ArrayLike<number>): this {
+        if (m.length === 9) {
+            this[0] = m[0]; this[1] = m[1]; this[2] = m[2];
+			this[3] = m[3]; this[4] = m[4]; this[5] = m[5];
+			this[6] = m[6]; this[7] = m[7]; this[8] = m[8];
+        }
+        else if (m.length === 16) {
+            this[0] = m[0]; this[1] = m[1]; this[2] = m[2];
+			this[3] = m[4]; this[4] = m[5]; this[5] = m[6];
+			this[6] = m[8]; this[7] = m[9]; this[8] = m[10];
+        }
+        else {
+            throw new Error(`Invalid plarameter setting matrix data`);
+        }
+        return this;
+    }
+
+    setScale(x: number, y: number, z: number): this { 
+		const rx = (new Vec(this[0], this[3], this[6])).normalize().scale(x);
+		const ry = (new Vec(this[1], this[4], this[7])).normalize().scale(y);
+		const rz = (new Vec(this[2], this[5], this[8])).normalize().scale(z);
+		this[0] = rx.x; this[3] = rx.y; this[6] = rx.z;
+		this[1] = ry.x; this[4] = ry.y; this[7] = ry.z;
+		this[2] = rz.x; this[5] = rz.y; this[8] = rz.z;
+		return this;
+	}
+
+    traspose(): this {
+        const m3 = this[3];  // 0, 1, 2
+        const m7 = this[7];  // 3, 4, 5
+        const m6 = this[6];  // 6, 7, 8
+        this[3] = this[1];
+        this[6] = this[2];
+        this[7] = this[5];
+        this[1] = m3;
+        this[2] = m6;
+        this[5] = m7;
+        return this;
+    }
+
+    mult(a: number): this;
+    mult(a: Mat3): this;
+    mult(a: number | Mat3): this {
+        if (typeof(a) === "number") {
+            this[0] *= a; this[1] *= a; this[2] *= a;
+            this[3] *= a; this[4] *= a; this[5] *= a;
+            this[6] *= a; this[7] *= a; this[8] *= a;
+        }
+        else if (a instanceof NumericArray && a.length === 9) {
+            const r0 = this.row(0);
+            const r1 = this.row(1);
+            const r2 = this.row(2);
+            const c0 = (a as Mat3).col(0);
+            const c1 = (a as Mat3).col(1);
+            const c2 = (a as Mat3).col(2);
+            
+            this[0] = Vec.Dot(r0,c0); this[1] = Vec.Dot(r0,c1); this[2] = Vec.Dot(r0,c2);
+            this[3] = Vec.Dot(r1,c0); this[4] = Vec.Dot(r1,c1); this[5] = Vec.Dot(r1,c2);
+            this[6] = Vec.Dot(r2,c0); this[7] = Vec.Dot(r2,c1); this[8] = Vec.Dot(r2,c2);
+        }
+        else {
+            throw new Error(`Invalid parameter in Mat3.mult()`);
+        }
+        return this;
+    }
+
+    multVector(v: ArrayLike<number>): Vec {
+        if (v.length === 2 || v.length === 3) {
+            const x = v[0];
+            const y = v[1];
+            const z = v.length === 2 ? 1 : v[2];
+        
+            return new Vec(	this[0] * x + this[3] * y + this[6] * z,
+                            this[1] * x + this[4] * y + this[7] * z,
+                            this[2] * x + this[5] * y + this[8] * z);
+        }
+        else {
+            throw new Error(`Invalid parameter in Mat3.multVector()`);
+        }
+    }
+
+    toString(): string {
+        return  `[ ${this[0]}, ${this[1]}, ${this[2]}\n` +
+                `  ${this[3]}, ${this[4]}, ${this[5]}\n` +
+                `  ${this[6]}, ${this[7]}, ${this[8]} ]`;
+    }
+
+    static MakeIdentity(): Mat3 {
+        const m = new Mat3();
+        return m.identity();
+    }
+
+    static MakeZero(): Mat3 {
+        const m = new Mat3();
+        return m.zero();
+    }
+
+    static MakeWithQuaternion(q: ArrayLike<number>): Mat3 {
+        const m = Mat3.MakeIdentity();
+        
+        m.setRow(0, new Vec( 1  - 2 * q[1] * q[1] - 2 * q[2] * q[2], 2 * q[0] * q[1] - 2 * q[2] * q[3], 2 * q[0] * q[2] + 2 * q[1] * q[3]));
+        m.setRow(1, new Vec( 2 * q[0] * q[1] + 2 * q[2] * q[3], 1  - 2.0 * q[0] * q[0] - 2 * q[2] * q[2], 2 * q[1] * q[2] - 2 * q[0] * q[3]));
+        m.setRow(2, new Vec( 2 * q[0] * q[2] - 2 * q[1] * q[3], 2 * q[1] * q[2] + 2 * q[0] * q[3] , 1 - 2 * q[0] * q[0] - 2 * q[1] * q[1]));
+
+        return m;
+    }
+
+    // https://en.wikipedia.org/wiki/Rotation_matrix#Rotation_matrix_from_axis_and_angle
+    // Make a rotation matrix from an axis and an angle
+    static MakeRotationWithDirection(direction: Vec, up?: Vec): Mat3 {
+        const m = Mat3.MakeIdentity();
+        const upVec = up || new Vec(0,1,0);
+        const z = direction.normalize();
+        // Since vectors are 3-dimensional, the cross product will always return a Vecz.
+        const x = (Vec.Cross(upVec, z) as Vec).normalize() as Vec;
+        const y = (Vec.Cross(z, x) as Vec).normalize() as Vec;
+
+        m.setRow(0, x);
+        m.setRow(1, y);
+        m.setRow(2, z);
+
+        return m;
+    }
+
+    static IsZero(m: ArrayLike<number>): boolean {
+        return	isZero(m[0]) && isZero(m[1]) && isZero(m[2]) &&
+                isZero(m[3]) && isZero(m[4]) && isZero(m[5]) &&
+                isZero(m[6]) && isZero(m[7]) && isZero(m[8]);
+    }
+    
+    static IsIdentity(m: ArrayLike<number>): boolean {
+        return	equals(m[0], 1) && isZero(m[1]) && isZero(m[2]) &&
+                isZero(m[3]) && equals(m[4], 1) && isZero(m[5]) &&
+                isZero(m[6]) && isZero(m[7]) && equals(m[8], 1);
+    }
+
+    static GetScale(m: ArrayLike<number>): Vec {
+        return new Vec(
+            Vec.Magnitude(new Vec(m[0], m[3], m[6])),
+            Vec.Magnitude(new Vec(m[1], m[4], m[7])),
+            Vec.Magnitude(new Vec(m[2], m[5], m[8]))
+        );
+    }
+
+    static Equals(a: ArrayLike<number>, b: ArrayLike<number>): boolean {
+        return	equals(a[0], b[0]) && equals(a[1], b[1])  && equals(a[2], b[2]) &&
+                equals(a[3], b[3]) && equals(a[4], b[4])  && equals(a[5], b[5]) &&
+                equals(a[6], b[6]) && equals(a[7], b[7])  && equals(a[8], b[8]);
+    }
+
+    static IsNaN(m: ArrayLike<number>): boolean {
+        return	isNaN(m[0]) || isNaN(m[1]) || isNaN(m[2]) &&
+                isNaN(m[3]) || isNaN(m[4]) || isNaN(m[5]) &&
+                isNaN(m[6]) || isNaN(m[7]) || isNaN(m[8]);
+    }
+
+    // This function multyplies two B x A matrices. It works opposite than the non-static mult() function:
+	// A.mult(B) is the same as Mat4.Mult(B,A)
+    static Mult(A: Mat3, B: Mat3): Mat3 {
+        const result = new Mat3(B);
+		return result.mult(A);
+    }
+};