@webspatial/core-sdk 0.0.1-alpha

package/README.md

@@ -0,0 +1,112 @@
+# **Full API documentation**
+
+* [API Docs](https://github.com/webspatial/webspatial.github.io/blob/main/docs/globals.md)
+
+# **Introduction**
+
+The core-sdk library is responsible for interacting with the target platforms native APIs to expose behavior not commonly found on the web.
+
+# **Hello world example**
+
+```
+import { Spatial, SpatialHelper } from '@webspatial/core-sdk'
+
+var main = async () => {
+    var spatial = new Spatial()
+    var versionInfo = "clientVersion:" + spatial.getClientVersion() + "\nnativeVersion:" + spatial.getNativeVersion() + "\nisSupported:" + spatial.isSupported()
+    
+    let sh = SpatialHelper.instance!
+    if (sh) {
+        // Create a new window container
+        var container = await sh.session.createWindowContainer({ style: 'Volumetric' })
+        
+        // Setup volume for the entity
+        var rootEntity = await sh.session.createEntity()
+        await rootEntity.setCoordinateSpace("Root")
+        rootEntity.setComponent(await sh.session.createViewComponent())
+        
+        // Create a mesh. and add it tot the root volume
+        var box = await sh.shape.createShapeEntity("box")
+        await box.setParent(rootEntity)
+        
+        // add the volume to the window
+        await container.setRootEntity(rootEntity)
+    }
+}
+main()
+```
+
+# **Initialization**
+
+Create a new spatial object which is the root entry point to the API. This object should be available in standard browsers as well as webspatial environments. This object can check client and native versions of the library and detect if webspatial is available in this setup.
+
+```
+var spatial = new Spatial()
+if(spatial.isSupported()){
+  var session = spatial.requestSession()
+  if(session){
+    console.log("session supported and created")
+  }
+}
+```
+
+# **Async/Await/Promises**
+
+Due to the architecture of webspatial, the client library communicates to native code over a JS Bridge provided by the platform. Because of this, function calls may not be completed immediately. To accomidate this, the majority of webspatial api use [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to keep track of completion. It is recommended you create an async main function to allow you to use the await syntax for app setup.
+
+```
+var main = async ()=>{
+    // Your code goes here
+};
+main()'
+```
+
+# **WindowContainer**
+
+To create a new WindowContainer (aka WindowGroup on apple vision pro)
+
+```
+var windowContainer = await session.createWindowContainer({ style: 'Volumetric' })
+```
+
+Depending on if you want to display content as a panel or within a volume, you can choose to use "Plain" or "Volumetric" style.
+
+# **Entity/Component api**
+
+To start displaying content within a WindowContainer, you must create an entity.
+
+```
+// Create entity
+var entity = await session.createEntity()
+
+// Create component
+await entity.setComponent(
+    await session.createViewComponent({ windowContainer: windowContainer }),
+)
+await entity.setCoordinateSpace('Root')
+
+// Set root entity on the window container. 
+// Note the entity much have:
+// - Root coordinate space
+// - have a ViewComponent for Volumetric windowContainer
+// - have a WindowComponent for Plain windowContainer
+await windowContainer.setRootEntity(entity)
+```
+
+Entity maps to an object that will be displayed. Components tell how that object should be displayed.  
+You can find more examples here when you run the server locally:
+
+* http://localhost:5173/src/docsWebsite/index.html?examplePath=webElement
+
+# **Helper**
+
+This library, similar to (webGL or webXR) may be a bit too verbose to use directly. You can use the helper we provide to do some common tasks such as opening a new webpage panel or use our higher level react API.
+
+```
+import { SpatialHelper } from '@webspatial/core-sdk'
+SpatialHelper.instance.navigation.openPanel(
+    'https://www.npmjs.com/package/@webspatial/core-sdk',
+    { resolution: { width: 600, height: 100 } },
+)
+```
+

package/dist/core/Spatial.d.ts

@@ -0,0 +1,27 @@
+import { SpatialSession } from './SpatialSession';
+/**
+ * Base object designed to be placed on navigator.spatial to mirror navigator.xr for webxr
+ */
+export declare class Spatial {
+    /**
+     * Requests a session object from the browser
+     * @returns The session or null if not availible in the current browser
+     * [TODO] discuss implications of this not being async
+     */
+    requestSession(): SpatialSession | null;
+    /**
+     * @returns true if web spatial is supported by this webpage
+     */
+    isSupported(): any;
+    /**
+     * Gets the native version, format is "x.x.x"
+     * @returns native version string
+     */
+    getNativeVersion(): any;
+    /**
+     * Gets the client version, format is "x.x.x"
+     * @returns client version string
+     */
+    getClientVersion(): string;
+}
+//# sourceMappingURL=Spatial.d.ts.map

package/dist/core/Spatial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spatial.d.ts","sourceRoot":"","sources":["../../src/core/Spatial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;GAEG;AACH,qBAAa,OAAO;IAClB;;;;OAIG;IACH,cAAc;IAWd;;OAEG;IACH,WAAW;IAOX;;;OAGG;IACH,gBAAgB;IAIhB;;;OAGG;IACH,gBAAgB;CAGjB"}

package/dist/core/Spatial.js

@@ -0,0 +1,41 @@
+import { SpatialSession } from './SpatialSession';
+/**
+ * Base object designed to be placed on navigator.spatial to mirror navigator.xr for webxr
+ */
+export class Spatial {
+    /**
+     * Requests a session object from the browser
+     * @returns The session or null if not availible in the current browser
+     * [TODO] discuss implications of this not being async
+     */
+    requestSession() {
+        if (this.isSupported() &&
+            this.getNativeVersion() === this.getClientVersion()) {
+            return new SpatialSession();
+        }
+        else {
+            return null;
+        }
+    }
+    /**
+     * @returns true if web spatial is supported by this webpage
+     */
+    isSupported() {
+        return (window.WebSpatailEnabled &&
+            this.getNativeVersion() === this.getClientVersion());
+    }
+    /**
+     * Gets the native version, format is "x.x.x"
+     * @returns native version string
+     */
+    getNativeVersion() {
+        return window.WebSpatailNativeVersion;
+    }
+    /**
+     * Gets the client version, format is "x.x.x"
+     * @returns client version string
+     */
+    getClientVersion() {
+        return '0.0.1';
+    }
+}

package/dist/core/SpatialEntity.d.ts

@@ -0,0 +1,92 @@
+import { SpatialObject } from './SpatialObject';
+import { SpatialTransform } from './SpatialTransform';
+import { SpatialWindowContainer } from './SpatialWindowContainer';
+import { SpatialComponent } from './component';
+/**
+ * Entity used to describe an object that can be added to the scene
+ */
+export declare class SpatialEntity extends SpatialObject {
+    /**
+     * Transform corresponding to the entity
+     * note: updateTransform must be called for transform to be synced to rendering
+     */
+    transform: SpatialTransform;
+    /** @hidden */
+    private _destroyed;
+    /** @hidden */
+    private get _entity();
+    /**
+     * Syncs the transform with the renderer, must be called to observe updates
+     */
+    updateTransform(): Promise<void>;
+    /**
+     * Syncs the zIndex with the renderer
+     */
+    updateZIndex(zIndex: number): Promise<void>;
+    private components;
+    /**
+     * Attaches a component to the entity to be displayed
+     * [TODO] review pass by value vs ref and ownership model for this
+     */
+    setComponent(component: SpatialComponent): Promise<void>;
+    /**
+     * Removes a component from the entity
+     */
+    removeComponent<T extends SpatialComponent>(type: new (...args: any[]) => T): Promise<void>;
+    /**
+     * Gets a component from the entity
+     */
+    getComponent<T extends SpatialComponent>(type: new (...args: any[]) => T): T | undefined;
+    /**
+     * @hidden
+     * Sets the window container that this entity should be rendered by (this does not effect resource ownership)
+     * @param wg the window container that should render this entity
+     */
+    _setParentWindowContainer(wg: SpatialWindowContainer): Promise<void>;
+    /**
+     * Sets a parent entity, if that entity or its parents are attached to a window container, this entity will be displayed
+     * @param e parent entity or null to remove current parent
+     */
+    setParent(e: SpatialEntity | null): Promise<void>;
+    /**
+     * Sets the coordinate space of this entity (Default: App)
+     * "App" = game engine style coordinates in meters
+     * "Dom" = Windowing coordinates in dom units (eg. 0,0,0 is top left of window)
+     * "Root" = Coordinate space is ignored and content is displayed and updated as window container's root object, window containers can only have one root entity
+     * [TODO] review this api
+     * @param space coordinate space mode
+     */
+    setCoordinateSpace(space: 'App' | 'Dom' | 'Root'): Promise<void>;
+    /**
+     * Query the 3d boudning box of the entity
+     * @returns The bounding box of the entity
+     */
+    getBoundingBox(): Promise<{
+        center: {
+            x: number;
+            y: number;
+            z: number;
+        };
+        extents: {
+            x: number;
+            y: number;
+            z: number;
+        };
+    }>;
+    /**
+     * Sets if the entity should be visible (default: True)
+     * @param visible
+     */
+    setVisible(visible: boolean): Promise<void>;
+    /**
+     * Removes a reference to the entity by the renderer and this object should no longer be used. [TODO] Attached components will not be destroyed
+     */
+    destroy(): Promise<void>;
+    /**
+     * Check if destroy has been called
+     */
+    isDestroyed(): boolean;
+    /** @hidden */
+    _setName(name: string): Promise<unknown>;
+}
+//# sourceMappingURL=SpatialEntity.d.ts.map

package/dist/core/SpatialEntity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpatialEntity.d.ts","sourceRoot":"","sources":["../../src/core/SpatialEntity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C;;GAEG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C;;;OAGG;IACH,SAAS,mBAAyB;IAElC,cAAc;IACd,OAAO,CAAC,UAAU,CAAQ;IAC1B,cAAc;IACd,OAAO,KAAK,OAAO,GAElB;IAED;;OAEG;IACG,eAAe;IAIrB;;OAEG;IACG,YAAY,CAAC,MAAM,EAAE,MAAM;IAIjC,OAAO,CAAC,UAAU,CAA6C;IAE/D;;;OAGG;IACG,YAAY,CAAC,SAAS,EAAE,gBAAgB;IAK9C;;OAEG;IACG,eAAe,CAAC,CAAC,SAAS,gBAAgB,EAC9C,IAAI,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC;IASjC;;OAEG;IACH,YAAY,CAAC,CAAC,SAAS,gBAAgB,EACrC,IAAI,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAC9B,CAAC,GAAG,SAAS;IAIhB;;;;OAIG;IACG,yBAAyB,CAAC,EAAE,EAAE,sBAAsB;IAM1D;;;OAGG;IACG,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAMvC;;;;;;;OAOG;IACG,kBAAkB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM;IAItD;;;OAGG;IACG,cAAc;gBAKR;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE;iBAClC;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE;;IAIhD;;;OAGG;IACG,UAAU,CAAC,OAAO,EAAE,OAAO;IAIjC;;OAEG;IACG,OAAO;IAKb;;OAEG;IACH,WAAW;IAKX,cAAc;IACR,QAAQ,CAAC,IAAI,EAAE,MAAM;CAG5B"}

package/dist/core/SpatialEntity.js

@@ -0,0 +1,121 @@
+import { SpatialObject } from './SpatialObject';
+import { SpatialTransform } from './SpatialTransform';
+import { WebSpatial } from './private/WebSpatial';
+/**
+ * Entity used to describe an object that can be added to the scene
+ */
+export class SpatialEntity extends SpatialObject {
+    /**
+     * Transform corresponding to the entity
+     * note: updateTransform must be called for transform to be synced to rendering
+     */
+    transform = new SpatialTransform();
+    /** @hidden */
+    _destroyed = false;
+    /** @hidden */
+    get _entity() {
+        return this._resource;
+    }
+    /**
+     * Syncs the transform with the renderer, must be called to observe updates
+     */
+    async updateTransform() {
+        await WebSpatial.updateResource(this._entity, this.transform);
+    }
+    /**
+     * Syncs the zIndex with the renderer
+     */
+    async updateZIndex(zIndex) {
+        await WebSpatial.updateResource(this._entity, { zIndex });
+    }
+    components = new Map();
+    /**
+     * Attaches a component to the entity to be displayed
+     * [TODO] review pass by value vs ref and ownership model for this
+     */
+    async setComponent(component) {
+        await WebSpatial.setComponent(this._entity, component._resource);
+        this.components.set(component.constructor, component);
+    }
+    /**
+     * Removes a component from the entity
+     */
+    async removeComponent(type) {
+        var c = this.getComponent(type);
+        if (c != undefined) {
+            await WebSpatial.removeComponent(this._entity, c._resource);
+            this.components.delete(c.constructor);
+        }
+    }
+    /**
+     * Gets a component from the entity
+     */
+    getComponent(type) {
+        return this.components.get(type);
+    }
+    /**
+     * @hidden
+     * Sets the window container that this entity should be rendered by (this does not effect resource ownership)
+     * @param wg the window container that should render this entity
+     */
+    async _setParentWindowContainer(wg) {
+        await WebSpatial.updateResource(this._entity, {
+            setParentWindowContainerID: wg._wg.id,
+        });
+    }
+    /**
+     * Sets a parent entity, if that entity or its parents are attached to a window container, this entity will be displayed
+     * @param e parent entity or null to remove current parent
+     */
+    async setParent(e) {
+        await WebSpatial.updateResource(this._entity, {
+            setParent: e ? e._entity.id : '',
+        });
+    }
+    /**
+     * Sets the coordinate space of this entity (Default: App)
+     * "App" = game engine style coordinates in meters
+     * "Dom" = Windowing coordinates in dom units (eg. 0,0,0 is top left of window)
+     * "Root" = Coordinate space is ignored and content is displayed and updated as window container's root object, window containers can only have one root entity
+     * [TODO] review this api
+     * @param space coordinate space mode
+     */
+    async setCoordinateSpace(space) {
+        await WebSpatial.updateResource(this._entity, { setCoordinateSpace: space });
+    }
+    /**
+     * Query the 3d boudning box of the entity
+     * @returns The bounding box of the entity
+     */
+    async getBoundingBox() {
+        var res = await WebSpatial.updateResource(this._entity, {
+            getBoundingBox: true,
+        });
+        return res.data;
+    }
+    /**
+     * Sets if the entity should be visible (default: True)
+     * @param visible
+     */
+    async setVisible(visible) {
+        await WebSpatial.updateResource(this._entity, { visible });
+    }
+    /**
+     * Removes a reference to the entity by the renderer and this object should no longer be used. [TODO] Attached components will not be destroyed
+     */
+    async destroy() {
+        this._destroyed = true;
+        await WebSpatial.destroyResource(this._entity);
+    }
+    /**
+     * Check if destroy has been called
+     */
+    isDestroyed() {
+        return this._destroyed;
+    }
+    // Set Entity name. Currently for debugging only.
+    /** @hidden */
+    async _setName(name) {
+        return WebSpatial.updateResource(this._entity, { name });
+    }
+}

package/dist/core/SpatialHelper.d.ts

@@ -0,0 +1,39 @@
+import { StyleParam } from './component';
+import { SpatialEntity } from './SpatialEntity';
+import { SpatialSession } from './SpatialSession';
+/**
+ * Helper class used to quickly add spatial content to standard web pages
+ * [Experimental] expect APIs to potentially change in future versions
+ */
+export declare class SpatialHelper {
+    session: SpatialSession;
+    private static _instance;
+    static get instance(): SpatialHelper | null;
+    constructor(session: SpatialSession);
+    shape: {
+        createShapeEntity: (shape?: string) => Promise<SpatialEntity>;
+        createModelEntity: (url: string) => Promise<SpatialEntity>;
+        wrapInBoundingBoxEntity: (entityToWrap: SpatialEntity) => Promise<SpatialEntity>;
+    };
+    navigation: {
+        openPanel: (url: string, options?: {
+            resolution: {
+                width: number;
+                height: number;
+            };
+        }) => Promise<void>;
+        openVolume: (url: string, options?: {
+            resolution: {
+                width: number;
+                height: number;
+            };
+        }) => Promise<void>;
+    };
+    dom: {
+        attachSpatialView: (divOnPage: HTMLElement) => Promise<{
+            entity: SpatialEntity;
+        }>;
+    };
+    setBackgroundStyle: (style: StyleParam, backgroundColor?: string) => Promise<void>;
+}
+//# sourceMappingURL=SpatialHelper.d.ts.map

package/dist/core/SpatialHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpatialHelper.d.ts","sourceRoot":"","sources":["../../src/core/SpatialHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,UAAU,EAAE,MAAM,aAAa,CAAA;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGjD;;;GAGG;AACH,qBAAa,aAAa;IAkBL,OAAO,EAAE,cAAc;IAjB1C,OAAO,CAAC,MAAM,CAAC,SAAS,CAA6B;IACrD,MAAM,KAAK,QAAQ,yBAclB;gBAEkB,OAAO,EAAE,cAAc;IAE1C,KAAK;;iCAiB4B,MAAM;gDAOS,aAAa;MAsB5D;IAED,UAAU;yBAED,MAAM,YACD;YAAE,UAAU,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE;0BA2BtD,MAAM,YACD;YAAE,UAAU,EAAE;gBAAE,KAAK,EAAE,MAAM,CAAC;gBAAC,MAAM,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE;MA2B9D;IAED,GAAG;uCACoC,WAAW;;;MAgDjD;IAED,kBAAkB,UACT,UAAU,6CAKlB;CACF"}

package/dist/core/SpatialHelper.js

@@ -0,0 +1,169 @@
+import { SpatialViewComponent } from './component';
+import { Spatial } from './Spatial';
+import { Vec3 } from './SpatialTransform';
+/**
+ * Helper class used to quickly add spatial content to standard web pages
+ * [Experimental] expect APIs to potentially change in future versions
+ */
+export class SpatialHelper {
+    session;
+    static _instance = null;
+    static get instance() {
+        if (this._instance) {
+            return this._instance;
+        }
+        else {
+            let spatial = new Spatial();
+            if (spatial.isSupported()) {
+                let session = spatial.requestSession();
+                if (session) {
+                    this._instance = new SpatialHelper(session);
+                    return this._instance;
+                }
+            }
+        }
+        return null;
+    }
+    constructor(session) {
+        this.session = session;
+    }
+    shape = {
+        createShapeEntity: async (shape = 'box') => {
+            var box = await this.session.createMeshResource({ shape: shape });
+            var mat = await this.session.createPhysicallyBasedMaterialResource();
+            await mat.update();
+            var customModel = await this.session.createModelComponent();
+            customModel.setMaterials([mat]);
+            customModel.setMesh(box);
+            var boxEntity = await this.session.createEntity();
+            await boxEntity.setComponent(customModel);
+            boxEntity.transform.position.z = 0;
+            boxEntity.transform.scale = new Vec3(0.5, 0.5, 0.5);
+            await boxEntity.updateTransform();
+            return boxEntity;
+        },
+        createModelEntity: async (url) => {
+            var customModel = await this.session.createModelComponent({ url });
+            var boxEntity = await this.session.createEntity();
+            await boxEntity.setComponent(customModel);
+            await boxEntity.updateTransform();
+            return boxEntity;
+        },
+        wrapInBoundingBoxEntity: async (entityToWrap) => {
+            var bb = await entityToWrap.getBoundingBox();
+            // Scale to fit
+            var targetSize = 1.0;
+            var scale = targetSize / Math.max(bb.extents.x, bb.extents.y, bb.extents.z);
+            entityToWrap.transform.scale.x = scale;
+            entityToWrap.transform.scale.y = scale;
+            entityToWrap.transform.scale.z = scale;
+            // Center within view
+            entityToWrap.transform.position.x = -bb.center.x * scale;
+            entityToWrap.transform.position.y = -bb.center.y * scale;
+            entityToWrap.transform.position.z = -bb.center.z * scale;
+            await entityToWrap.updateTransform();
+            // wrap in boudning box
+            var boudningEntity = await SpatialHelper.instance?.session.createEntity();
+            await entityToWrap.setParent(boudningEntity);
+            return boudningEntity;
+        },
+    };
+    navigation = {
+        openPanel: async (url, options) => {
+            if (options?.resolution) {
+                await this.session
+                    .getCurrentWindowContainer()
+                    ._setOpenSettings({ resolution: options.resolution });
+            }
+            // Create window container
+            var wg = await this.session.createWindowContainer({ style: 'Plain' });
+            // Create a root entity displaying a webpage
+            var ent = await this.session.createEntity();
+            var i = await this.session.createWindowComponent({ windowContainer: wg });
+            await i.loadURL(url);
+            await ent.setCoordinateSpace('Root');
+            await ent.setComponent(i);
+            // Add enitity the window container
+            await wg.setRootEntity(ent);
+            // Restore default size
+            await this.session
+                .getCurrentWindowContainer()
+                ._setOpenSettings({ resolution: { width: 900, height: 700 } });
+        },
+        openVolume: async (url, options) => {
+            var wg = await this.session.createWindowContainer({ style: 'Volumetric' });
+            // Create a root view entity within the window container
+            var rootEnt = await this.session.createEntity();
+            await rootEnt.setComponent(await this.session.createViewComponent({ windowContainer: wg }));
+            await rootEnt.setCoordinateSpace('Root');
+            await wg.setRootEntity(rootEnt);
+            // Add webpage to the window container
+            var ent = await this.session.createEntity();
+            var i = await this.session.createWindowComponent({ windowContainer: wg });
+            await i.loadURL(url);
+            if (options?.resolution) {
+                await i.setResolution(options.resolution.width, options.resolution.height);
+            }
+            else {
+                await i.setResolution(1000, 1000);
+            }
+            ent.transform.position.z = -0.49;
+            await ent.updateTransform();
+            await ent.setCoordinateSpace('App');
+            await ent.setComponent(i);
+            await ent.setParent(rootEnt);
+        },
+    };
+    dom = {
+        attachSpatialView: async (divOnPage) => {
+            // Create SpatialView
+            var viewEnt = await this.session.createEntity();
+            await viewEnt.setCoordinateSpace('Dom'); // Set coordinate space so its transform is relative to the webpage's pixels
+            await viewEnt.setComponent(await this.session.createViewComponent());
+            // Add to the root window component to display
+            var wc = await this.session.getCurrentWindowComponent();
+            var ent = await wc.getEntity();
+            await viewEnt.setParent(ent);
+            // Keep spatialView positioned where the div is
+            var update = () => {
+                var rect = divOnPage.getBoundingClientRect();
+                viewEnt.transform.position.x = rect.x + rect.width / 2;
+                viewEnt.transform.position.y = rect.y + rect.height / 2 + window.scrollY;
+                viewEnt.updateTransform();
+                viewEnt
+                    .getComponent(SpatialViewComponent)
+                    .setResolution(rect.width, rect.height);
+            };
+            var mo = new MutationObserver(update);
+            mo.observe(divOnPage, { attributes: true });
+            var ro = new ResizeObserver(update);
+            ro.observe(divOnPage);
+            const addRemoveObserver = new MutationObserver(mutations => {
+                mutations.forEach(mutation => {
+                    mutation.removedNodes.forEach(node => {
+                        if (node instanceof HTMLElement) {
+                            update();
+                        }
+                    });
+                    mutation.addedNodes.forEach(node => {
+                        if (node instanceof HTMLElement) {
+                            update();
+                        }
+                    });
+                });
+            });
+            addRemoveObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            update();
+            return {
+                entity: viewEnt,
+            };
+        },
+    };
+    setBackgroundStyle = async (style, backgroundColor = '#00000000') => {
+        document.documentElement.style.backgroundColor = backgroundColor;
+        await this.session.getCurrentWindowComponent().setStyle(style);
+    };
+}

package/dist/core/SpatialObject.d.ts

@@ -0,0 +1,19 @@
+import { WebSpatialResource } from './private/WebSpatial';
+/**
+ * @hidden
+ * Parent class of spatial objects, should not be used directly
+ */
+export declare class SpatialObject {
+    /** @hidden */
+    _resource: WebSpatialResource;
+    /** @hidden */
+    constructor(
+    /** @hidden */
+    _resource: WebSpatialResource);
+    /**
+     * Marks resource to be released (it should no longer be used)
+     */
+    destroy(): Promise<void>;
+    protected onDestroy(): Promise<void>;
+}
+//# sourceMappingURL=SpatialObject.d.ts.map

package/dist/core/SpatialObject.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpatialObject.d.ts","sourceRoot":"","sources":["../../src/core/SpatialObject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEzD;;;GAGG;AACH,qBAAa,aAAa;IAGtB,cAAc;IACP,SAAS,EAAE,kBAAkB;IAHtC,cAAc;;IAEZ,cAAc;IACP,SAAS,EAAE,kBAAkB;IAGtC;;OAEG;IACG,OAAO;cAKG,SAAS;CAC1B"}

package/dist/core/SpatialObject.js

@@ -0,0 +1,22 @@
+import { WebSpatial } from './private/WebSpatial';
+/**
+ * @hidden
+ * Parent class of spatial objects, should not be used directly
+ */
+export class SpatialObject {
+    _resource;
+    /** @hidden */
+    constructor(
+    /** @hidden */
+    _resource) {
+        this._resource = _resource;
+    }
+    /**
+     * Marks resource to be released (it should no longer be used)
+     */
+    async destroy() {
+        await WebSpatial.destroyResource(this._resource);
+        await this.onDestroy();
+    }
+    async onDestroy() { }
+}