@pacem/pacem-3d 1.0.0-abel

package/dist/esm/types.js

@@ -0,0 +1,482 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Watch, PropertyConverters, CustomElement, PacemEventTarget, PropertyChangeEvent, CustomElementUtils, CustomUIEvent, P, Utils, Components } from '@pacem/pacem-core';
+import { Geometry } from '@pacem/pacem-numerical';
+import { Point3DConverter, Point3DOrNumberConverter, QuaternionConverter } from './converters';
+import { Pacem3DElement } from './stage';
+import { TAG_MIDDLE_NAME } from './constants';
+export function isStage(object) {
+    return !Utils.isNull(object) && 'render' in object && typeof object['render'] === 'function';
+}
+export function isRenderable(object) {
+    return isStage(object?.stage);
+}
+export function isUi3DObject(object) {
+    return 'transformMatrix' in object && isRenderable(object);
+}
+export function isCamera(object) {
+    return 'type' in object && 'up' in object && 'lookAt' in object && isRenderable(object);
+}
+export function isPerspectiveCamera(object) {
+    return isCamera(object) && 'type' in object && object.type === 'perspective';
+}
+export function isOrthographicCamera(object) {
+    return isCamera(object) && 'type' in object && object.type === 'orthographic';
+}
+export function isLight(object) {
+    return 'type' in object && (object.type === 'ambient' || object.type === 'omni' || object.type === 'direction' || object.type == 'spot') && isRenderable(object);
+}
+export function isMesh(object) {
+    return 'geometry' in object && isUi3DObject(object);
+}
+export function isGeometry(object) {
+    return 'positions' in object && Utils.isArray(object.positions);
+}
+export function isMeshGeometry(object) {
+    return ('triangleIndices' in object && Utils.isArray(object.triangleIndices)
+        || 'normals' in object && Utils.isArray(object.normals)
+        || 'textureCoordinates' in object && Utils.isArray(object.textureCoordinates)) && isGeometry(object);
+}
+export function isGroup(object) {
+    return 'childRenderables' in object && Utils.isArray(object['childRenderables']) && isUi3DObject(object);
+}
+/**
+ * Sets the normals to a mesh geometry by computing each face's unit orthogonal vector.
+ * @param geometry
+ */
+export function computeSharpVertexNormals(geometry) {
+    const normals = [];
+    if (!Utils.isNullOrEmpty(geometry)) {
+        const indices = geometry.triangleIndices;
+        if (indices.length % 3 !== 0) {
+            throw new RangeError(`Invalid mesh geometry: ${indices.length} is not multiple of 3.`);
+        }
+        for (let j = 2; j < indices.length; j += 3) {
+            const u = indices[j - 2], v = indices[j - 1], w = indices[j];
+            const a = geometry.positions[u], b = geometry.positions[v], c = geometry.positions[w];
+            const normal = computePlaneNormal(a, b, c);
+            normals.push(normal, normal, normal);
+        }
+    }
+    geometry.normals = normals;
+}
+/**
+ * Computes the unit vector orthogonal to the plane identified by 3 points.
+ * @param a
+ * @param b
+ * @param c
+ */
+export function computePlaneNormal(a, b, c) {
+    // TODO: check input correctness (distinct points)
+    const vAB = Geometry.LinearAlgebra.Vector3D.subtract(a, b), vAC = Geometry.LinearAlgebra.Vector3D.subtract(a, c);
+    const orthogonal = Geometry.LinearAlgebra.Vector3D.cross(vAB, vAC);
+    return Geometry.LinearAlgebra.Vector3D.unit(orthogonal);
+}
+export class UI3DEvent extends CustomUIEvent {
+    constructor(type, eventInit, originalEvent, point) {
+        super(type, eventInit, originalEvent);
+        this.#point = point;
+    }
+    #point;
+    /** Gets the event's source position in 3d coordinates. */
+    get point() {
+        return this.#point;
+    }
+}
+export class DragEvent extends UI3DEvent {
+}
+export class RenderableEvent extends UI3DEvent {
+    constructor(type, args, originalEvent, p) {
+        super(type, { detail: args, bubbles: true, cancelable: true }, originalEvent, p);
+    }
+}
+export var StalePropertyFlag;
+(function (StalePropertyFlag) {
+    StalePropertyFlag["Position"] = "position";
+    StalePropertyFlag["Transform"] = "transform";
+    StalePropertyFlag["Geometry"] = "geometry";
+    StalePropertyFlag["Children"] = "children";
+    StalePropertyFlag["Material"] = "material";
+    StalePropertyFlag["Light"] = "light";
+    StalePropertyFlag["Camera"] = "camera";
+    StalePropertyFlag["Visibility"] = "visibility";
+})(StalePropertyFlag || (StalePropertyFlag = {}));
+export function isInteraction(object) {
+    return typeof object === 'object' && 'time' in object && typeof object['time'] === 'number';
+}
+//namespace Pacem.Components.Drawing3D {
+const Constants = {
+    OBJECT_SELECTOR: P + '-' + TAG_MIDDLE_NAME + '-object',
+    LIGHT_SELECTOR: P + '-' + TAG_MIDDLE_NAME + '-light',
+    PERSPECTIVE_CAMERA_SELECTOR: P + '-' + TAG_MIDDLE_NAME + '-perspective-camera',
+    ORTHO_CAMERA_SELECTOR: P + '-' + TAG_MIDDLE_NAME + '-orthographic-camera',
+    LINE_SELECTOR: P + '-' + TAG_MIDDLE_NAME + '-line',
+    MESH_SELECTOR: P + '-' + TAG_MIDDLE_NAME + '-mesh',
+    GROUP_SELECTOR: P + '-' + TAG_MIDDLE_NAME + '-group',
+    DEFAULT_COORDS: { x: 0, y: 0, z: 0 }
+};
+export class RenderableElement extends Components.PacemCrossItemsContainerElement {
+    constructor() {
+        super(...arguments);
+        this.position = Constants.DEFAULT_COORDS;
+        this.#staleFlags = [];
+    }
+    validate(_) {
+        // by default no children allowed (Group will except)
+        return false;
+    }
+    findContainer() {
+        // override
+        return this.parent || this.stage;
+    }
+    get stage() {
+        return this['_scene'] = this['_scene'] || CustomElementUtils.findAncestorOfType(this, Pacem3DElement);
+    }
+    get parent() {
+        return this['_drawableParent'] = this['_drawableParent'] || CustomElementUtils.findAncestor(this, i => i instanceof RenderableElement);
+    }
+    disconnectedCallback() {
+        delete this['_scene'];
+        delete this['_drawableParent'];
+        super.disconnectedCallback();
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'hide':
+                this.setAsDirty(StalePropertyFlag.Visibility);
+                break;
+            case 'items':
+                this.setAsDirty(StalePropertyFlag.Children);
+                break;
+            case 'position':
+                this.setAsDirty(StalePropertyFlag.Position);
+                break;
+        }
+    }
+    #staleFlags;
+    get flags() {
+        return this.#staleFlags;
+    }
+    /** Calls for a redraw of the current element in the next rendering process. */
+    setAsDirty(...flags) {
+        // set the flags that identify the stale part of the object to be updated.
+        for (let flag of flags) {
+            if (!this.flags.includes(flag)) {
+                this.flags.push(flag);
+            }
+        }
+        this.stage?.render(this);
+    }
+}
+__decorate([
+    Watch({ emit: false, converter: Point3DConverter })
+], RenderableElement.prototype, "position", void 0);
+__decorate([
+    Watch({ emit: false, reflectBack: true, converter: PropertyConverters.String })
+], RenderableElement.prototype, "tag", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], RenderableElement.prototype, "inert", void 0);
+export class Ui3DElement extends RenderableElement {
+    // #endregion
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'transformMatrix':
+                this.setAsDirty(StalePropertyFlag.Transform);
+                break;
+            case 'translateZ':
+            case 'translateX':
+            case 'translateY':
+                this.offset = { x: this.translateX, y: this.translateY, z: this.translateZ };
+                break;
+            case 'scaleX':
+            case 'scaleY':
+            case 'scaleZ':
+                this.scale = { x: this.scaleX, y: this.scaleY, z: this.scaleZ };
+                break;
+            case 'scale':
+            case 'offset':
+            case 'rotate':
+                this._computeTransformMatrix();
+                break;
+        }
+    }
+    _computeTransformMatrix() {
+        const MAT3D = Geometry.LinearAlgebra.Matrix3D, VEC3D = Geometry.LinearAlgebra.Vector3D, QUAT = Geometry.LinearAlgebra.Quaternion;
+        // scale
+        const scale = this.scale ?? VEC3D.from(1, 1, 1);
+        let m = MAT3D.scale(MAT3D.identity(), scale);
+        // rotate
+        if (!Utils.isNull(this.rotate)) {
+            const rot = QUAT.toRotationMatrix(this.rotate);
+            m = MAT3D.multiply(m, rot);
+        }
+        // translate
+        const offset = this.offset ?? VEC3D.from(0, 0, 0);
+        m = MAT3D.translate(m, offset);
+        this.transformMatrix = m;
+    }
+}
+__decorate([
+    Watch({ emit: false, converter: QuaternionConverter })
+], Ui3DElement.prototype, "rotate", void 0);
+__decorate([
+    Watch({ emit: false, converter: Point3DOrNumberConverter })
+], Ui3DElement.prototype, "scale", void 0);
+__decorate([
+    Watch({ emit: false, converter: Point3DOrNumberConverter })
+], Ui3DElement.prototype, "offset", void 0);
+__decorate([
+    Watch({ emit: false })
+], Ui3DElement.prototype, "transformMatrix", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Ui3DElement.prototype, "scaleX", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Ui3DElement.prototype, "scaleY", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Ui3DElement.prototype, "scaleZ", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Ui3DElement.prototype, "translateX", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Ui3DElement.prototype, "translateY", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Ui3DElement.prototype, "translateZ", void 0);
+let Pacem3DGroupElement = class Pacem3DGroupElement extends Ui3DElement {
+    validate(child) {
+        // overrides default denial
+        return child instanceof RenderableElement;
+    }
+    #children = [];
+    get childRenderables() {
+        return this.#children;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'items':
+            case 'datasource':
+                this.#children = (val || []);
+                this.setAsDirty(StalePropertyFlag.Children);
+                break;
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false })
+], Pacem3DGroupElement.prototype, "datasource", void 0);
+Pacem3DGroupElement = __decorate([
+    CustomElement({ tagName: Constants.GROUP_SELECTOR })
+], Pacem3DGroupElement);
+export { Pacem3DGroupElement };
+let Pacem3DMeshElement = class Pacem3DMeshElement extends Ui3DElement {
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'geometry':
+                this.setAsDirty(StalePropertyFlag.Geometry);
+                break;
+            case 'material':
+            case 'backMaterial':
+                this.setAsDirty(StalePropertyFlag.Material);
+                break;
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Json })
+], Pacem3DMeshElement.prototype, "geometry", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Json })
+], Pacem3DMeshElement.prototype, "material", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Json })
+], Pacem3DMeshElement.prototype, "backMaterial", void 0);
+Pacem3DMeshElement = __decorate([
+    CustomElement({ tagName: Constants.MESH_SELECTOR })
+], Pacem3DMeshElement);
+export { Pacem3DMeshElement };
+let Pacem3DObjectElement = class Pacem3DObjectElement extends Ui3DElement {
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'content' || name === 'type') {
+            this.setAsDirty(StalePropertyFlag.Geometry, StalePropertyFlag.Material);
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false })
+], Pacem3DObjectElement.prototype, "content", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], Pacem3DObjectElement.prototype, "type", void 0);
+Pacem3DObjectElement = __decorate([
+    CustomElement({ tagName: Constants.OBJECT_SELECTOR })
+], Pacem3DObjectElement);
+export { Pacem3DObjectElement };
+let Pacem3DLightElement = class Pacem3DLightElement extends RenderableElement {
+    constructor() {
+        super(...arguments);
+        this.intensity = .85;
+        this.target = Constants.DEFAULT_COORDS;
+        this.color = '#fff';
+        this.type = 'omni';
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'type':
+            case 'color':
+            case 'intensity':
+            case 'target':
+                this.setAsDirty(StalePropertyFlag.Light);
+                break;
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Pacem3DLightElement.prototype, "intensity", void 0);
+__decorate([
+    Watch({ emit: false, converter: Point3DConverter })
+], Pacem3DLightElement.prototype, "target", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], Pacem3DLightElement.prototype, "color", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], Pacem3DLightElement.prototype, "type", void 0);
+Pacem3DLightElement = __decorate([
+    CustomElement({ tagName: Constants.LIGHT_SELECTOR })
+], Pacem3DLightElement);
+export { Pacem3DLightElement };
+export class Pacem3DCameraElement extends RenderableElement {
+    constructor() {
+        super(...arguments);
+        this.near = 0.1;
+        this.far = 1000.0;
+        this.up = Geometry.LinearAlgebra.Vector3D.j();
+        this.lookAt = Constants.DEFAULT_COORDS;
+    }
+    #sphere;
+    _resetBoundingSphere() {
+        const oldValue = this.#sphere;
+        const eye = this.position, center = this.lookAt;
+        const radius = Utils.isNullOrEmpty(eye) || Utils.isNullOrEmpty(center) ? 0
+            : Geometry.LinearAlgebra.Vector3D.mag(Geometry.LinearAlgebra.Vector3D.subtract(eye, center));
+        const currentValue = this.#sphere = { center, radius };
+        this.dispatchEvent(new PropertyChangeEvent({ currentValue, propertyName: 'boundingSphere', oldValue }));
+    }
+    get boundingSphere() {
+        return this.#sphere;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'lookAt':
+            case 'position':
+                this._resetBoundingSphere();
+            case 'near':
+            case 'far':
+            case 'up':
+                this.setAsDirty(StalePropertyFlag.Camera);
+                break;
+        }
+    }
+}
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Pacem3DCameraElement.prototype, "near", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Pacem3DCameraElement.prototype, "far", void 0);
+__decorate([
+    Watch({ emit: false, converter: Point3DConverter })
+], Pacem3DCameraElement.prototype, "up", void 0);
+__decorate([
+    Watch({ emit: false, converter: Point3DConverter })
+], Pacem3DCameraElement.prototype, "lookAt", void 0);
+let Pacem3DPerspectiveCameraElement = class Pacem3DPerspectiveCameraElement extends Pacem3DCameraElement {
+    constructor() {
+        super(...arguments);
+        this.fov = 45;
+        this.aspect = 1;
+    }
+    get type() {
+        return "perspective";
+    }
+    get aspectRatio() {
+        return this.aspect;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'fov':
+            case 'aspect':
+                this.setAsDirty(StalePropertyFlag.Camera);
+                break;
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Pacem3DPerspectiveCameraElement.prototype, "fov", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Pacem3DPerspectiveCameraElement.prototype, "aspect", void 0);
+Pacem3DPerspectiveCameraElement = __decorate([
+    CustomElement({ tagName: Constants.PERSPECTIVE_CAMERA_SELECTOR })
+], Pacem3DPerspectiveCameraElement);
+export { Pacem3DPerspectiveCameraElement };
+let Pacem3DOrthographicCameraElement = class Pacem3DOrthographicCameraElement extends Pacem3DCameraElement {
+    constructor() {
+        super(...arguments);
+        this.top = 1;
+        this.left = -1;
+        this.bottom = -1;
+        this.right = 1;
+    }
+    get type() {
+        return "orthographic";
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'top':
+            case 'left':
+            case 'bottom':
+            case 'right':
+                this.setAsDirty(StalePropertyFlag.Camera);
+                break;
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Pacem3DOrthographicCameraElement.prototype, "top", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Pacem3DOrthographicCameraElement.prototype, "left", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Pacem3DOrthographicCameraElement.prototype, "bottom", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], Pacem3DOrthographicCameraElement.prototype, "right", void 0);
+Pacem3DOrthographicCameraElement = __decorate([
+    CustomElement({ tagName: Constants.ORTHO_CAMERA_SELECTOR })
+], Pacem3DOrthographicCameraElement);
+export { Pacem3DOrthographicCameraElement };
+export class Pacem3DAdapterElement extends PacemEventTarget {
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@pacem/pacem-3d",
+  "files": [
+    "dist/browser/*.*",
+    "dist/bundle/*.*",
+    "dist/esm/*.*",
+    "typings/*.*",
+    "README.md",
+    "LICENSE",
+    "NOTICE",
+    "package.json"
+  ],
+  "type": "module",
+  "dependencies": {
+    "@pacem/pacem-foundation": "*",
+    "@pacem/pacem-core": "*",
+    "@pacem/pacem-numerical": "*"
+  },
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "typings": "./typings/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "types": "./typings/index.d.ts"
+    }
+  },
+  "version": "1.0.0-abel",
+  "author": {
+    "name": "Pacem",
+    "url": "https://pacem.it"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://js.pacem.it",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pacem-it/pacem.git"
+  }
+}