@pacem/pacem-3d 1.0.0-abel

package/dist/esm/constants.js

@@ -0,0 +1,2 @@
+export const TAG_MIDDLE_NAME = "3d";
+export const DEG2RAD = Math.PI / 180;

package/dist/esm/converters.js

@@ -0,0 +1,40 @@
+import { Utils } from '@pacem/pacem-core';
+import { parseAsNumericalArray } from '@pacem/pacem-foundation';
+import { Geometry } from '@pacem/pacem-numerical';
+//namespace Pacem.Drawing3D {
+export const Point3DConverter = {
+    convert: (attr) => Geometry.LinearAlgebra.Vector3D.parse(attr),
+    convertBack: (prop) => `${prop.x || 0} ${prop.y || 0} ${prop.z || 0}`
+};
+export const Point3DOrNumberConverter = {
+    convert: (attr) => {
+        const arr = parseAsNumericalArray(attr);
+        const throwErr = () => { throw new Error(`Cannot parse "${attr}" as a valid Vector3D.`); };
+        if (Utils.isNullOrEmpty(arr)) {
+            throwErr();
+        }
+        if (arr.length === 3) {
+            return Geometry.LinearAlgebra.Vector3D.from(...arr);
+        }
+        if (arr.length === 1) {
+            const v = arr[0];
+            return Geometry.LinearAlgebra.Vector3D.from(v, v, v);
+        }
+        throwErr();
+    },
+    convertBack: (prop) => `${prop.x || 0} ${prop.y || 0} ${prop.z || 0}`
+};
+export const QuaternionConverter = {
+    convert: (attr) => Geometry.LinearAlgebra.Quaternion.parse(attr),
+    convertBack: (prop) => `${prop.x || 0} ${prop.y || 0} ${prop.z || 0} ${prop.w || 0}`
+};
+export const BooleanOrNumberConverter = {
+    convert: (attr) => {
+        if (attr === 'true')
+            return true;
+        if (attr === 'false')
+            return false;
+        return parseAsNumericalArray(attr)[0];
+    },
+    convertBack: (prop) => prop.toString()
+};

package/dist/esm/decorators.js

@@ -0,0 +1,29 @@
+import { Utils } from '@pacem/pacem-core';
+//namespace Pacem.Drawing3D {
+export function NotifyChange(callback) {
+    return (target, prop, descriptor) => {
+        const backingField = `_${prop}_${Utils.uniqueCode()}_backingField`;
+        function getter() {
+            return this[backingField];
+        }
+        function setter(val) {
+            if (val !== this[backingField]) {
+                const old = this[backingField];
+                this[backingField] = val;
+                callback.call(this, prop, old, val);
+            }
+        }
+        //if (delete target[prop]) {
+        Object.defineProperty(target, prop, {
+            get: function () {
+                return getter.call(this);
+            },
+            set: function (val) {
+                setter.call(this, val);
+            },
+            enumerable: true,
+            configurable: false
+        });
+        //}
+    };
+}

package/dist/esm/detector.js

@@ -0,0 +1,73 @@
+//namespace Pacem.Components.Drawing3D {
+/** @deprecated*/
+export class Pacem3DDetector {
+    constructor() {
+        this._detected = {
+            supported: false, info: {}
+        };
+        let cvs = document.createElement('canvas');
+        let contextNames = ['webgl', 'experimental-webgl', 'moz-webgl', 'webkit-3d'];
+        let ctx;
+        let getParam = function (str) {
+            if (!str)
+                return undefined;
+            return ctx.getParameter(str);
+        };
+        // addLine
+        let addLine = (section, name, value) => {
+            let detected = this._detected;
+            var info = detected.info[section] = detected.info[section] || {};
+            name = name.replace(/[^\w]+/g, '');
+            name = name.substring(0, 1).toLowerCase() + name.substring(1);
+            info[name] = value;
+        };
+        if (navigator.userAgent.indexOf('MSIE') >= 0) {
+            try {
+                ctx = window['WebGLHelper'].CreateGLContext(cvs, 'canvas');
+            }
+            catch (e) { }
+        }
+        else {
+            for (var i = 0; i < contextNames.length; i++) {
+                try {
+                    ctx = cvs.getContext(contextNames[i]);
+                    if (ctx) {
+                        addLine('main', 'Context Name', contextNames[i]);
+                        break;
+                    }
+                }
+                catch (e) { }
+            }
+        }
+        this._detected.supported = !!ctx;
+        addLine('main', 'Platform', navigator.platform);
+        addLine('main', 'Agent', navigator.userAgent);
+        if (ctx) {
+            addLine('main', 'Vendor', getParam(ctx.VENDOR));
+            addLine('main', 'Version', getParam(ctx.VERSION));
+            addLine('main', 'Renderer', getParam(ctx.RENDERER));
+            addLine('main', 'Shading Language Version', getParam(ctx.SHADING_LANGUAGE_VERSION));
+            addLine('bits', 'Rgba Bits', getParam(ctx.RED_BITS) + ', ' + getParam(ctx.GREEN_BITS) + ', ' + getParam(ctx.BLUE_BITS) + ', ' + getParam(ctx.ALPHA_BITS));
+            addLine('bits', 'Depth Bits', getParam(ctx.DEPTH_BITS));
+            addLine('shader', 'Max Vertex Attribs', getParam(ctx.MAX_VERTEX_ATTRIBS));
+            addLine('shader', 'Max Vertex Texture Image Units', getParam(ctx.MAX_VERTEX_TEXTURE_IMAGE_UNITS));
+            addLine('shader', 'Max Varying Vectors', getParam(ctx.MAX_VARYING_VECTORS));
+            addLine('shader', 'Max Uniform Vectors', getParam(ctx.MAX_VERTEX_UNIFORM_VECTORS));
+            addLine('tex', 'Max Combined Texture Image Units', getParam(ctx.MAX_COMBINED_TEXTURE_IMAGE_UNITS));
+            addLine('tex', 'Max Texture Size', getParam(ctx.MAX_TEXTURE_SIZE));
+            addLine('tex', 'Max Cube Map Texture Size', getParam(ctx.MAX_CUBE_MAP_TEXTURE_SIZE));
+            addLine('tex', 'Num. Compressed Texture Formats', getParam(ctx.COMPRESSED_TEXTURE_FORMATS));
+            addLine('misc', 'Max Render Buffer Size', getParam(ctx.MAX_RENDERBUFFER_SIZE));
+            addLine('misc', 'Max Viewport Dimensions', getParam(ctx.MAX_VIEWPORT_DIMS));
+            addLine('misc', 'Aliased Line Width Range', getParam(ctx.ALIASED_LINE_WIDTH_RANGE));
+            addLine('misc', 'Aliased Point Size Range', getParam(ctx.ALIASED_POINT_SIZE_RANGE));
+            addLine('misc', 'Supported Extensions', ctx.getSupportedExtensions() || []);
+        }
+    }
+    get info() {
+        return this._detected.info;
+    }
+    get supported() {
+        return this._detected.supported;
+    }
+}

package/dist/esm/geometry.js

@@ -0,0 +1,102 @@
+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 { Utils } from '@pacem/pacem-core';
+import { StalePropertyFlag } from './types';
+import { NotifyChange } from './decorators';
+export class NodeGeometry {
+    constructor(positions = []) {
+        this.positions = positions;
+    }
+    static barycenter(positions) {
+        var bary = { x: 0, y: 0, z: 0 };
+        if (!Utils.isNullOrEmpty(positions)) {
+            var count = positions.length;
+            for (var i = 0; i < positions.length; i++) {
+                var pt = positions[i];
+                bary.x += pt.x;
+                bary.y += pt.y;
+                bary.z += pt.z;
+            }
+            var countDbl = 1.0 * count;
+            bary.x /= countDbl;
+            bary.y /= countDbl;
+            bary.z /= countDbl;
+        }
+        return bary;
+    }
+    static boundingBox(positions) {
+        const output = {
+            minX: +Infinity, minY: +Infinity, minZ: +Infinity,
+            maxX: -Infinity, maxY: -Infinity, maxZ: -Infinity
+        };
+        if (!Utils.isNullOrEmpty(positions)) {
+            for (var i = 0; i < positions.length; i++) {
+                var pt = positions[i];
+                output.minX = Math.min(output.minX, pt.x);
+                output.minY = Math.min(output.minY, pt.y);
+                output.minZ = Math.min(output.minZ, pt.z);
+                output.maxX = Math.max(output.maxX, pt.x);
+                output.maxY = Math.max(output.maxY, pt.y);
+                output.maxZ = Math.max(output.maxZ, pt.z);
+            }
+        }
+        return output;
+    }
+    setAsDirty() {
+        setSelfAsDirty.call(this);
+    }
+}
+function setSelfAsDirty() {
+    const me = this;
+    me.flags = [/* no further specifications, other than 'geometry' */ StalePropertyFlag.Geometry];
+}
+export class LineGeometry extends NodeGeometry {
+}
+__decorate([
+    NotifyChange(setSelfAsDirty)
+], LineGeometry.prototype, "positions", void 0);
+export class MeshGeometry extends NodeGeometry {
+    #boundingBox;
+    #boundingSphere;
+    #barycenter;
+    get barycenter() {
+        return this.#barycenter ??= NodeGeometry.barycenter(this.positions);
+    }
+    set barycenter(point) {
+        this.#barycenter = point;
+    }
+    get boundingBox() {
+        return this.#boundingBox ??= NodeGeometry.boundingBox(this.positions);
+    }
+    set boundingBox(bbox) {
+        this.#boundingBox = bbox;
+    }
+    get boundingSphere() {
+        return this.#boundingSphere;
+    }
+    set boundingSphere(sphere) {
+        this.#boundingSphere = sphere;
+    }
+    constructor(positions, triangleIndices, textureCoordinates = [], normals = []) {
+        super(positions);
+        this.triangleIndices = triangleIndices;
+        this.textureCoordinates = textureCoordinates;
+        this.normals = normals;
+    }
+}
+__decorate([
+    NotifyChange(setSelfAsDirty)
+], MeshGeometry.prototype, "positions", void 0);
+__decorate([
+    NotifyChange(setSelfAsDirty)
+], MeshGeometry.prototype, "triangleIndices", void 0);
+__decorate([
+    NotifyChange(setSelfAsDirty)
+], MeshGeometry.prototype, "textureCoordinates", void 0);
+__decorate([
+    NotifyChange(setSelfAsDirty)
+], MeshGeometry.prototype, "normals", void 0);

package/dist/esm/index-components-drawing3d.js

@@ -0,0 +1,22 @@
+export * from './types';
+export * from './detector';
+export * from './materials/material';
+export * from './materials/basic';
+export * from './materials/lambert';
+export * from './materials/line';
+export * from './materials/phong';
+export * from './materials/standard';
+export * from './primitives/primitive';
+export * from './primitives/box';
+export * from './primitives/cone';
+export * from './primitives/cylinder';
+export * from './primitives/line';
+export * from './primitives/plane';
+export * from './primitives/polyhedra';
+export * from './primitives/sphere';
+export * from './primitives/torus';
+export * from './adapters/shared';
+export * from './adapters/threejsadapter';
+export * from './adapters/webgpu/webgpuadapter';
+export * from './adapters/webgpu/behaviors/orbit-camera';
+export * from './stage';

package/dist/esm/index-components.js

@@ -0,0 +1 @@
+export * as Drawing3D from './index-components-drawing3d';

package/dist/esm/index-drawing3d.js

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './geometry';
+export * from './decorators';
+export * from './converters';
+export * from './materials/material';
+export * from './parsers/parser';

package/dist/esm/index-iife.js

@@ -0,0 +1,3 @@
+import { DeepMerger } from '@pacem/pacem-foundation';
+import * as Output from './index';
+DeepMerger.merge(Output);

package/dist/esm/index-root.js

@@ -0,0 +1 @@
+export * as Drawing3D from './index-drawing3d';

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * as Components from './index-components';
+export * from './index-root';

package/dist/esm/stage.js

@@ -0,0 +1,280 @@
+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 { CustomElement, P, PCSS, Defaults, ViewChild, Watch, PropertyConverters, Utils, Components, PropertyChangeEventName, Logging, Animations, UI } from '@pacem/pacem-core';
+import { RenderableEvent, DragEvent, RenderableElement } from './types';
+import { TAG_MIDDLE_NAME } from './constants';
+//namespace Pacem.Components.Drawing3D {
+let Pacem3DElement = class Pacem3DElement extends Components.PacemItemsContainerElement {
+    constructor() {
+        super(...arguments);
+        this._itemPropertyChangeHandler = (evt) => {
+            const renderable = evt.target;
+            // clear flags
+            // TODO: be more precise
+            this.adapter &&
+                this.adapter.updateItem(this, renderable);
+            renderable.flags.splice(0);
+        };
+        this._clickHandler = (evt) => {
+            let me = this;
+            if (!me.interactive || Utils.isNull(me._lastHitResult)) {
+                return;
+            }
+            const type = evt.type.replace(/^mouse/, '');
+            const hit = me._lastHitResult, object = hit.object, point = hit.point;
+            this._itemDispatch(object, point, type, evt);
+        };
+        this._hitTestCallback = (result, evt) => {
+            const me = this;
+            // TODO: handle dragging
+            if (result != me._lastHitResult) {
+                if (result?.object != me._lastHitResult?.object) {
+                    const obj = result?.object, last = me._lastHitResult?.object, pt = result?.point;
+                    if (!Utils.isNull(last)) {
+                        this._itemDispatch(last, pt, 'out', evt);
+                    }
+                    if (!Utils.isNull(obj)) {
+                        this._itemDispatch(obj, pt, 'over', evt);
+                    }
+                }
+                me._lastHitResult = result;
+            }
+        };
+        this._moveHandler = (evt) => {
+            let me = this;
+            if (!me.adapter || !me.interactive) {
+                return;
+            }
+            const rect = me._resizer.currentSize;
+            const callback = (r) => me._hitTestCallback(r, evt);
+            const pixel = evt.type === 'mousemove' ? { x: evt.pageX - rect.left, y: evt.pageY - rect.top } : { x: -1, y: -1 };
+            me.adapter.raycast(this, pixel, rect, callback);
+        };
+        this._resizeHandler = (evt) => {
+            const oldSize = this.#size;
+            const size = evt.detail;
+            if (!Utils.isNull(oldSize) && oldSize.height === size.height && oldSize.width === size.width) {
+                return;
+            }
+            this.#size = size;
+            const adapter = this.adapter;
+            if (!Utils.isNull(adapter)) {
+                this.adapter.invalidateSize(this, size);
+                this.dispatchEvent(new Components.ResizeEvent(size));
+            }
+        };
+        //#endregion
+    }
+    validate(item) {
+        return item instanceof RenderableElement;
+    }
+    get stage() {
+        return this._container;
+    }
+    get scene() {
+        return this.adapter && this.adapter.getScene(this);
+    }
+    register(item) {
+        const retval = super.register(item);
+        if (retval) {
+            this._add(item);
+            item.addEventListener(PropertyChangeEventName, this._itemPropertyChangeHandler, false);
+        }
+        return retval;
+    }
+    unregister(item) {
+        const retval = super.unregister(item);
+        if (retval) {
+            item.removeEventListener(PropertyChangeEventName, this._itemPropertyChangeHandler, false);
+            this._erase(item);
+        }
+        return retval;
+    }
+    _refreshDatasource(val = this.datasource) {
+        this.adapter?.updateItem(this, undefined);
+    }
+    _buildUpDatasourceFromDOM(val = this.items) {
+        if (!Utils.isNullOrEmpty(val)) {
+            this.datasource = val.slice();
+        }
+    }
+    _add(item) {
+        this.adapter &&
+            this.adapter.addItem(this, item);
+    }
+    _erase(item) {
+        this.adapter &&
+            this.adapter.removeItem(this, item);
+    }
+    _initializeAdapter(old, val) {
+        return new Promise((resolve, reject) => {
+            const items = this.datasource || [];
+            if (!Utils.isNull(old)) {
+                items.forEach(i => old.removeItem(this, i));
+            }
+            if (!Utils.isNull(this._container) && !Utils.isNull(val)) {
+                val.initialize(this).then(_ => {
+                    (items || []).forEach(i => this._add(i));
+                    resolve();
+                }, e => {
+                    this.log(Logging.LogLevel.Error, e?.toString());
+                    reject(e);
+                });
+            }
+            else {
+                resolve();
+            }
+        });
+    }
+    //#region lifecycle
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (first) {
+            return;
+        }
+        switch (name) {
+            case 'adapter':
+                this._initializeAdapter(old, val);
+                break;
+            case 'items':
+                this._buildUpDatasourceFromDOM(val);
+                break;
+            case 'transparent':
+                this.adapter?.invalidateSize(this, this.size);
+                break;
+            case 'datasource':
+                this._refreshDatasource(val);
+            case 'disabled':
+            case 'background':
+                this.render();
+                break;
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        // stage
+        const container = this._container;
+        // resizer
+        const resizer = this._resizer;
+        resizer.addEventListener('resize', this._resizeHandler, false);
+        resizer.target = container;
+        // adapter
+        this._initializeAdapter(null, this.adapter).then(_ => {
+            container.addEventListener('mousemove', this._moveHandler, false);
+            container.addEventListener('click', this._clickHandler, false);
+            container.addEventListener('mouseup', this._clickHandler, false);
+            container.addEventListener('mousedown', this._clickHandler, false);
+            container.addEventListener('mouseout', this._moveHandler, false);
+            this._buildUpDatasourceFromDOM();
+            this.render();
+        });
+    }
+    _itemDispatch(target, point, type, offset) {
+        if (!Utils.isNull(target)) {
+            var dragArgs, originalEvent, evtType;
+            if (offset instanceof Event) {
+                originalEvent = offset;
+            }
+            else {
+                dragArgs = { item: target, offset: offset };
+            }
+            if (typeof type === 'string') {
+                evtType = type;
+            }
+            else {
+                evtType = type.type;
+                originalEvent = type.originalEvent;
+            }
+            const m = point;
+            const evt = () => offset instanceof Event ? new RenderableEvent(evtType, target, originalEvent, m) : new DragEvent(evtType, { detail: dragArgs, cancelable: evtType === UI.DragDropEventType.Init || evtType === UI.DragDropEventType.Drag }, originalEvent, m), itemevt = offset instanceof Event ? new RenderableEvent('item' + evtType, target, originalEvent, m) : new DragEvent('item' + evtType, { detail: dragArgs, cancelable: evtType === UI.DragDropEventType.Init || evtType === UI.DragDropEventType.Drag }, originalEvent, m);
+            var prevent = false;
+            if (target instanceof EventTarget) {
+                const evnt = evt();
+                target.dispatchEvent(evnt);
+                prevent = evnt.defaultPrevented;
+            }
+            target.stage.dispatchEvent(itemevt);
+            // was the event (in one of its forms) rejected?
+            return prevent || itemevt.defaultPrevented;
+        }
+        return false;
+    }
+    disconnectedCallback() {
+        this.#handle?.stop();
+        const resizer = this._resizer, container = this._container;
+        if (!Utils.isNull(container)) {
+            container.removeEventListener('click', this._clickHandler, false);
+            container.removeEventListener('mouseup', this._clickHandler, false);
+            container.removeEventListener('mousedown', this._clickHandler, false);
+            container.removeEventListener('mousemove', this._moveHandler, false);
+            container.removeEventListener('mouseout', this._moveHandler, false);
+        }
+        if (!Utils.isNull(resizer)) {
+            resizer.removeEventListener('resize', this._resizeHandler, false);
+        }
+        super.disconnectedCallback();
+    }
+    #size;
+    get size() {
+        return this.#size;
+    }
+    render(item, deepUpdate, now = performance.now()) {
+        if (!Utils.isNull(item)) {
+            const adapter = this.adapter;
+            if (!Utils.isNull(adapter)) {
+                adapter.updateItem(this, item);
+            }
+        }
+        else {
+            this.#handle?.stop();
+            this.#handle = Animations.Timer.run(_ => this._doRender());
+            //this._doRender();
+        }
+    }
+    #handle;
+    _doRender() {
+        if (!this.disabled && !Utils.isNull(this.adapter)) {
+            const scene = this.adapter.getScene(this);
+            let cancelable = new CustomEvent('prerender', { detail: { scene }, cancelable: true });
+            this.dispatchEvent(cancelable);
+            if (!cancelable.defaultPrevented) {
+                this.adapter.render(this);
+                this.dispatchEvent(new CustomEvent('render', { detail: { scene } }));
+            }
+        }
+    }
+};
+__decorate([
+    ViewChild(`.${PCSS}-3d`)
+], Pacem3DElement.prototype, "_container", void 0);
+__decorate([
+    ViewChild(P + '-resize')
+], Pacem3DElement.prototype, "_resizer", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], Pacem3DElement.prototype, "interactive", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], Pacem3DElement.prototype, "transparent", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], Pacem3DElement.prototype, "background", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Element })
+], Pacem3DElement.prototype, "adapter", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Json })
+], Pacem3DElement.prototype, "datasource", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], Pacem3DElement.prototype, "orbit", void 0);
+Pacem3DElement = __decorate([
+    CustomElement({
+        tagName: P + '-' + TAG_MIDDLE_NAME, shadow: Defaults.USE_SHADOW_ROOT, template: `<${P}-resize watch-position="true"></${P}-resize><div class="${PCSS}-3d"></div><${P}-content></${P}-content>`
+    })
+], Pacem3DElement);
+export { Pacem3DElement };