@webspatial/core-sdk 0.1.11 → 0.1.13

package/dist/index.js

@@ -1,3 +1,11 @@
+
+    (function(){
+      if(typeof window === 'undefined') return;
+      if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
+      window.__webspatialsdk__['core-sdk-version'] = "0.1.13"
+  })()
+    
+
 // src/core/private/remote-command/RemoteCommand.ts
 var RemoteCommand = class _RemoteCommand {
   static requestCounter = 0;
@@ -472,1014 +480,1026 @@ var SpatialComponent = class extends SpatialObject {
   }
 };
 
-// src/core/component/SpatialWindowComponent.ts
-var SpatialWindowComponent = class extends SpatialComponent {
-  /**
-   * Loads a url page in the window
-   * @param url url to load
-   */
-  async loadURL(url) {
-    await WebSpatial.updateResource(this._resource, { url });
-  }
-  async setFromWindow(window2) {
-    if (window2._webSpatialID) {
-      await WebSpatial.updateResource(this._resource, {
-        windowID: window2._webSpatialID
-      });
-    } else {
-      await console.warn(
-        "failed to call setFromWindow, window provided is not valid"
-      );
-    }
+// src/core/SpatialWindowContainer.ts
+var SpatialWindowContainer = class {
+  /** @hidden */
+  constructor(_wg) {
+    this._wg = _wg;
   }
   /**
-   * Sets the resolution of the window, the resulting dimensions when rendered will be equal to 1/1360 units
-   * eg. if the resolution is set to 1360x1360 it will be a 1x1 plane
-   * See 1360 in spatialViewUI.swift for how this ratio works
-   * @param width width in pixels
-   * @param height height in pixels
+   * @hidden
+   * Sets sets the open configuration for opening new window containers
+   * @param options style options
    */
-  async setResolution(width, height) {
-    await WebSpatial.updateResource(this._resource, {
-      resolution: { x: width, y: height }
+  async _setOpenSettings(options) {
+    await WebSpatial.updateWindowContainer(this._wg, {
+      nextOpenSettings: options
     });
   }
   /**
-   * [Experimental] Sets the anchor which the entity this is attached to will rotate around
-   * @param rotationAnchor
+   * Retrieves the root entity of the windowContainer
+   * @returns the root entity of the windowContainer if one exists
    */
-  async setRotationAnchor(rotationAnchor) {
-    await WebSpatial.updateResource(this._resource, {
-      rotationAnchor
+  async getRootEntity() {
+    let reqResp = await WebSpatial.updateWindowContainer(this._wg, {
+      getRootEntityID: ""
     });
+    if (reqResp.data.rootEntId === "") {
+      return null;
+    } else {
+      var res = new WebSpatialResource();
+      res.id = reqResp.data.rootEntId;
+      return new SpatialEntity(res);
+    }
   }
-  /**
-   * [Experimental] Sets the opacity of the window after apply material
-   * @param opacity
+  /*
+   * Sets the root entity that this windowContainer will display (this does not effect resource ownership)
+   * @param entity to display
    */
-  async setOpacity(opacity) {
-    await WebSpatial.updateResource(this._resource, {
-      opacity
+  async setRootEntity(entity) {
+    await entity._setParentWindowContainer(this);
+  }
+  async close() {
+    await WebSpatial.updateWindowContainer(this._wg, {
+      close: true
     });
   }
+};
+
+// src/core/resource/SpatialMeshResource.ts
+var SpatialMeshResource = class extends SpatialObject {
+};
+
+// src/core/resource/SpatialPhysicallyBasedMaterialResource.ts
+var SpatialPhysicallyBasedMaterialResource = class extends SpatialObject {
   /**
-   * Sets the style that should be applied to the window
-   * @param options style options
+   * Base color of the material containing rgba between 0 and 1
    */
-  async setStyle(styleParam) {
-    const { material, cornerRadius } = styleParam;
-    const options = {};
-    if (material?.type) {
-      options.backgroundMaterial = material.type;
-    }
-    if (cornerRadius !== void 0) {
-      if (typeof cornerRadius === "number") {
-        options.cornerRadius = {
-          topLeading: cornerRadius,
-          bottomLeading: cornerRadius,
-          topTrailing: cornerRadius,
-          bottomTrailing: cornerRadius
-        };
-      } else {
-        options.cornerRadius = { ...cornerRadius };
-      }
-    }
-    if (document && document.readyState == "loading") {
-      var encoded = encodeURIComponent(JSON.stringify(options));
-      var x = document.createElement("link");
-      x.rel = "stylesheet";
-      x.href = "forceStyle://mystyle.css?style=" + encoded;
-      document.head.appendChild(x);
-    }
-    await WebSpatial.updateResource(this._resource, { style: options });
-  }
+  baseColor = { r: 0, g: 0.7, b: 0.7, a: 1 };
   /**
-   * Modifies the amount the spatial window can be scrolled
-   * Should only be used internally
-   * See https://developer.apple.com/documentation/uikit/1624475-uiedgeinsetsmake?language=objc
-   * @param insets margin to modify scroll distances by
+   * PBR metalic value between 0 and 1
    */
-  async setScrollEdgeInsets(insets) {
-    await WebSpatial.updateResource(this._resource, {
-      setScrollEdgeInsets: insets
-    });
-  }
+  metallic = { value: 0.5 };
   /**
-   * Enable/Disable scrolling in the window (defaults to enabled), if disabled, scrolling will be applied to the root page
-   * @param enabled value to set
+   * PBR roughness value between 0 and 1
    */
-  async setScrollEnabled(enabled) {
-    await WebSpatial.updateResource(this._resource, { scrollEnabled: enabled });
+  roughness = { value: 0.5 };
+  _modelComponentAttachedTo = {};
+  _addToComponent(c) {
+    this._modelComponentAttachedTo[c._resource.id] = c;
   }
   /**
-   * Defaults to false. If set to true, scrolling the parent page will also scroll this window with it like other dom elements
-   * @param scrollWithParent value to set
+   * Syncs state of color, metallic, roupghness to the renderer
    */
-  async setScrollWithParent(scrollWithParent) {
+  async update() {
     await WebSpatial.updateResource(this._resource, {
-      scrollWithParent
+      baseColor: this.baseColor,
+      metallic: this.metallic,
+      roughness: this.roughness
     });
+    for (var key in this._modelComponentAttachedTo) {
+      await this._modelComponentAttachedTo[key]._syncMaterials();
+    }
   }
 };
 
-// src/core/component/EventSpatialComponent.ts
-var EventSpatialComponent = class extends SpatialComponent {
-  // Class implementation goes here
-  constructor(_resource) {
-    super(_resource);
-    WebSpatial.registerEventReceiver(_resource.id, (data) => {
-      this.onRecvEvent(data);
-    });
-  }
-  async onDestroy() {
-    WebSpatial.unregisterEventReceiver(this._resource.id);
+// src/core/SpatialSession.ts
+function _parseParentResources(options) {
+  var parentWindowContainer = null;
+  if (options?.windowContainer !== null) {
+    parentWindowContainer = options?.windowContainer ? options?.windowContainer._wg : WebSpatial.getCurrentWindowContainer();
   }
-};
-
-// src/core/component/SpatialInputComponent.ts
-var SpatialInputComponent = class extends EventSpatialComponent {
-  onRecvEvent(data) {
-    this.onTranslate(data);
+  var parentWindow = null;
+  if (options?.windowComponent !== null) {
+    parentWindow = options?.windowComponent ? options?.windowComponent._resource : WebSpatial.getCurrentWebPanel();
   }
+  return [parentWindowContainer, parentWindow];
+}
+var SpatialSession = class _SpatialSession {
+  /** @hidden */
+  _engineUpdateListeners = Array();
+  /** @hidden */
+  _frameLoopStarted = false;
   /**
-   * Callback fired when a translate event occurs
-   * @param data translate event data
+   * Add event listener callback to be called each frame
+   * @param callback callback to be called each update
    */
-  onTranslate(data) {
+  addOnEngineUpdateEventListener(callback) {
+    this._engineUpdateListeners.push(callback);
+    if (!this._frameLoopStarted) {
+      this._frameLoopStarted = true;
+      WebSpatial.onFrame(async (time) => {
+        await Promise.all(
+          this._engineUpdateListeners.map((cb) => {
+            return cb(time);
+          })
+        );
+      });
+    }
   }
-};
-
-// src/core/component/SpatialModelComponent.ts
-var SpatialModelComponent = class extends SpatialComponent {
-  cachedMaterials = new Array();
   /**
-   * Sets the mesh to be displayed by the component
-   * @param mesh mesh to set
+   * Creates a Entity
+   * @returns Entity
    */
-  async setMesh(mesh) {
-    await WebSpatial.updateResource(this._resource, {
-      meshResource: mesh._resource.id
-    });
+  async createEntity(options) {
+    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
+    let entity = await WebSpatial.createResource(
+      "Entity",
+      parentWindowContainer,
+      parentWindow
+    );
+    return new SpatialEntity(entity);
   }
   /**
-   * Sets the materials that should be applied to the mesh
-   * @param materials array of materials to set
+   * Creates a WindowComponent
+   * [TODO] should creation of components be moved to entity? and these made private?
+   * @returns WindowComponent
    */
-  async setMaterials(materials) {
-    this.cachedMaterials = materials;
-    await WebSpatial.updateResource(this._resource, {
-      materials: materials.map((m) => {
-        m._addToComponent(this);
-        return m._resource.id;
-      })
-    });
-  }
-  /** @hidden */
-  async _syncMaterials() {
-    await this.setMaterials(this.cachedMaterials);
+  async createWindowComponent(options) {
+    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
+    let entity = await WebSpatial.createResource(
+      "SpatialWebView",
+      parentWindowContainer,
+      parentWindow
+    );
+    return new SpatialWindowComponent(entity);
   }
-};
-
-// src/core/component/SpatialViewComponent.ts
-var SpatialViewComponent = class extends SpatialComponent {
   /**
-   * Sets the resolution of the spatial view in dom pixels
+   * Creates a ViewComponent used to display 3D content within the entity
+   * @returns SpatialViewComponent
    */
-  async setResolution(width, height) {
-    await WebSpatial.updateResource(this._resource, {
-      resolution: { x: width, y: height }
-    });
+  async createViewComponent(options) {
+    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
+    let entity = await WebSpatial.createResource(
+      "SpatialView",
+      parentWindowContainer,
+      parentWindow
+    );
+    return new SpatialViewComponent(entity);
   }
   /**
-   * Sets if content of the spatialView should be within a portal
-   * If true, volume will be behind the page, if false, it will be in front of the page
-   */
-  async setIsPortal(isPortal) {
-    await WebSpatial.updateResource(this._resource, {
-      isPortal
-    });
-  }
-};
-
-// src/core/component/SpatialModel3DComponent.ts
-var SpatialModel3DComponent = class extends EventSpatialComponent {
-  onRecvEvent(data) {
-    const { eventType, value, error } = data;
-    switch (eventType) {
-      case "phase":
-        if (value === "success") {
-          this.onSuccess?.();
-        } else {
-          this.onFailure?.(error);
-        }
-        break;
-      case "dragstart":
-        this._onDragStart?.(value);
-        break;
-      case "dragend":
-        this._onDragEnd?.(value);
-        break;
-      case "drag":
-        this._onDrag?.(value);
-        break;
-      case "tap":
-        this._onTap?.();
-        break;
-      case "doubletap":
-        this._onDoubleTap?.();
-        break;
-      case "longpress":
-        this._onLongPress?.();
-        break;
-      default:
-        break;
+   * Creates a ModelComponent used to display geometry + material of a 3D model
+   * @returns ModelComponent
+   */
+  async createModelComponent(options) {
+    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
+    var opts = void 0;
+    if (options) {
+      opts = { modelURL: options.url };
     }
+    let entity = await WebSpatial.createResource(
+      "ModelComponent",
+      parentWindowContainer,
+      parentWindow,
+      opts
+    );
+    return new SpatialModelComponent(entity);
   }
   /**
-   * Sets the resolution of the spatial view in dom pixels
+   * Creates a Model3DComponent
+   * @returns Model3DComponent
    */
-  async setResolution(width, height) {
-    await WebSpatial.updateResource(this._resource, {
-      resolution: { x: width, y: height }
-    });
-  }
-  async setRotationAnchor(rotationAnchor) {
-    await WebSpatial.updateResource(this._resource, {
-      rotationAnchor
-    });
+  async createModel3DComponent(options) {
+    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
+    var opts = void 0;
+    if (options) {
+      opts = { modelURL: options.url };
+    }
+    let entity = await WebSpatial.createResource(
+      "Model3DComponent",
+      parentWindowContainer,
+      parentWindow,
+      opts
+    );
+    return new SpatialModel3DComponent(entity);
   }
   /**
-   * Sets the opacity of the model
-   * @param opacity
+   * Creates a InputComponent
+   * [Experimental] Creates a InputComponent used to handle click and drag events of the entity containing a model
+   * @returns InputComponent
    */
-  async setOpacity(opacity) {
-    await WebSpatial.updateResource(this._resource, {
-      opacity
-    });
+  async createInputComponent(options) {
+    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
+    let entity = await WebSpatial.createResource(
+      "InputComponent",
+      parentWindowContainer,
+      parentWindow
+    );
+    return new SpatialInputComponent(entity);
   }
   /**
-   * Sets how the model fill the rect
-   * @param contentMode
+   * Creates a MeshResource containing geometry data
+   * @returns MeshResource
    */
-  async setContentMode(contentMode) {
-    await WebSpatial.updateResource(this._resource, {
-      contentMode
-    });
+  async createMeshResource(options) {
+    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
+    let entity = await WebSpatial.createResource(
+      "MeshResource",
+      parentWindowContainer,
+      parentWindow,
+      options
+    );
+    return new SpatialMeshResource(entity);
   }
   /**
-   * Constrains this model dimensions to the specified aspect ratio.
-   * with a value of 0, the model will use the original aspect ratio.
-   *
-   * @param aspectRatio number
+   * Creates a PhysicallyBasedMaterial containing PBR material data
+   * @returns PhysicallyBasedMaterial
    */
-  async setAspectRatio(aspectRatio) {
-    await WebSpatial.updateResource(this._resource, {
-      aspectRatio
-    });
+  async createPhysicallyBasedMaterialResource(options) {
+    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
+    let entity = await WebSpatial.createResource(
+      "PhysicallyBasedMaterial",
+      parentWindowContainer,
+      parentWindow,
+      options
+    );
+    return new SpatialPhysicallyBasedMaterialResource(entity);
   }
   /**
-   * Defaults to false. If set to true, scrolling the parent page will also scroll this window with it like other dom elements
-   * @param scrollWithParent value to set
-   */
-  async setScrollWithParent(scrollWithParent) {
-    await WebSpatial.updateResource(this._resource, {
-      scrollWithParent
-    });
+   * Creates a WindowContainer
+   * @returns SpatialWindowContainer
+   * */
+  async createWindowContainer(options) {
+    var style = options?.style ? options?.style : "Plain";
+    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
+    return new SpatialWindowContainer(
+      await WebSpatial.createWindowContainer(
+        style,
+        parentWindowContainer,
+        parentWindow
+      )
+    );
   }
   /**
-   * Sets whether the model appear in original size or fit the rect
-   * @param resizable
+   * Creates a Scene to display content within an anchored area managed by the OS
+   * @hidden
+   * @param {WindowStyle} [style='Plain'] - The style of the Scene container to be created with. Defaults to 'Plain'.
+   * @param {Object} [cfg={}] - Configuration object for the Scene.
+   * @returns Boolean
    */
-  async setResizable(resizable) {
-    await WebSpatial.updateResource(this._resource, {
-      resizable
-    });
+  async _createScene(style = "Plain", cfg) {
+    return await WebSpatial.createScene(style, cfg);
   }
   /**
-   * Callback fired when model load success
-   */
-  onSuccess;
-  /**
-   * Callback fired when model load failure
-   * @param errorReason
+   * Retrieves the window for this page
+   * @returns the window component corresponding to the js running on this page
+   * [TODO] discuss implications of this not being async
    */
-  onFailure;
+  getCurrentWindowComponent() {
+    return new SpatialWindowComponent(WebSpatial.getCurrentWebPanel());
+  }
   /**
-   * Callback fired when model was dragged at the beginning
-   * @param dragEvent
+   * Retrieves the parent window for this page or null if this is the root page
+   * @returns the window component or null
    */
-  _onDragStart;
-  set onDragStart(callback) {
-    if (this._onDragStart !== callback) {
-      this._onDragStart = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableDragEvent: this.enableDragEvent
+  async getParentWindowComponent() {
+    let parentResp = await WebSpatial.updateResource(
+      WebSpatial.getCurrentWebPanel(),
+      { getParentID: "" }
+    );
+    if (parentResp.data.parentID === "") {
+      return new Promise((res2, rej) => {
+        res2(null);
       });
+    } else {
+      var res = new WebSpatialResource();
+      res.id = parentResp.data.parentID;
+      return new SpatialWindowComponent(res);
     }
   }
   /**
-   * Callback fired when model was dragged
-   * @param dragEvent
+   * Logs a message to the native apps console
+   * @param msg mesage to log
    */
-  _onDrag;
-  set onDrag(callback) {
-    if (this._onDrag !== callback) {
-      this._onDrag = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableDragEvent: this.enableDragEvent
-      });
-    }
+  async log(...msg) {
+    await WebSpatial.sendCommand(
+      new RemoteCommand("log", {
+        logString: msg.map((x) => {
+          return JSON.stringify(x);
+        })
+      })
+    );
   }
   /**
-   * Callback fired when model was dragged at the ending
-   * @param dragEvent
+   * @hidden
+   * Debugging only, used to ping the native renderer
    */
-  _onDragEnd;
-  set onDragEnd(callback) {
-    if (this._onDragEnd !== callback) {
-      this._onDragEnd = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableDragEvent: this.enableDragEvent
-      });
-    }
+  async _ping(msg) {
+    return await WebSpatial.ping(msg);
   }
-  get enableDragEvent() {
-    return void 0 !== this._onDrag || void 0 !== this._onDragStart || void 0 !== this._onDragEnd;
+  /**
+   * @hidden
+   * Debugging to get internal state from native code
+   * @returns data as a js object
+   */
+  async _getStats() {
+    return await WebSpatial.getStats();
   }
   /**
-   * Callback fired when model was tapped
+   * @hidden
    */
-  _onTap;
-  set onTap(callback) {
-    if (this._onTap !== callback) {
-      this._onTap = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableTapEvent: void 0 !== callback
-      });
-    }
+  async _inspect(spatialObjectId = WebSpatial.getCurrentWebPanel().id) {
+    return WebSpatial.inspect(spatialObjectId);
   }
-  /** Callback fired when model was double tapped */
-  _onDoubleTap;
-  set onDoubleTap(callback) {
-    if (this._onDoubleTap !== callback) {
-      this._onDoubleTap = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableDoubleTapEvent: void 0 !== callback
-      });
-    }
-  }
-  /** Callback fired when model was long pressed */
-  _onLongPress;
-  set onLongPress(callback) {
-    if (this._onLongPress !== callback) {
-      this._onLongPress = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableLongPressEvent: void 0 !== callback
-      });
-    }
-  }
-};
-
-// src/core/resource/SpatialMeshResource.ts
-var SpatialMeshResource = class extends SpatialObject {
-};
-
-// src/core/resource/SpatialPhysicallyBasedMaterialResource.ts
-var SpatialPhysicallyBasedMaterialResource = class extends SpatialObject {
-  /**
-   * Base color of the material containing rgba between 0 and 1
-   */
-  baseColor = { r: 0, g: 0.7, b: 0.7, a: 1 };
   /**
-   * PBR metalic value between 0 and 1
+   * @hidden
    */
-  metallic = { value: 0.5 };
+  async _inspectRootWindowContainer() {
+    return WebSpatial.inspectRootWindowContainer();
+  }
+  /** Opens the immersive space */
+  async openImmersiveSpace() {
+    return await WebSpatial.openImmersiveSpace();
+  }
+  /** Closes the immersive space */
+  async dismissImmersiveSpace() {
+    return await WebSpatial.dismissImmersiveSpace();
+  }
+  static _immersiveWindowContainer = null;
   /**
-   * PBR roughness value between 0 and 1
+   * Retreives the window container corresponding to the Immersive space
+   * @returns the immersive window container
    */
-  roughness = { value: 0.5 };
-  _modelComponentAttachedTo = {};
-  _addToComponent(c) {
-    this._modelComponentAttachedTo[c._resource.id] = c;
+  async getImmersiveWindowContainer() {
+    if (_SpatialSession._immersiveWindowContainer) {
+      return _SpatialSession._immersiveWindowContainer;
+    } else {
+      _SpatialSession._immersiveWindowContainer = new SpatialWindowContainer(
+        WebSpatial.getImmersiveWindowContainer()
+      );
+      return _SpatialSession._immersiveWindowContainer;
+    }
   }
+  // Retreives the window container that is the parent to this spatial web page
+  static _currentWindowContainer = null;
   /**
-   * Syncs state of color, metallic, roupghness to the renderer
+   * Gets the current window container for the window
+   * [TODO] discuss what happens if it doesnt yet have a window container
+   * @returns the current window container for the window
    */
-  async update() {
-    await WebSpatial.updateResource(this._resource, {
-      baseColor: this.baseColor,
-      metallic: this.metallic,
-      roughness: this.roughness
-    });
-    for (var key in this._modelComponentAttachedTo) {
-      await this._modelComponentAttachedTo[key]._syncMaterials();
+  getCurrentWindowContainer() {
+    if (_SpatialSession._currentWindowContainer) {
+      return _SpatialSession._currentWindowContainer;
+    } else {
+      _SpatialSession._currentWindowContainer = new SpatialWindowContainer(
+        WebSpatial.getCurrentWindowContainer()
+      );
+      return _SpatialSession._currentWindowContainer;
     }
   }
-};
-
-// src/core/SpatialWindowContainer.ts
-var SpatialWindowContainer = class {
-  /** @hidden */
-  constructor(_wg) {
-    this._wg = _wg;
-  }
   /**
-   * @hidden
-   * Sets sets the open configuration for opening new window containers
-   * @param options style options
+   * Start a transaction that queues up commands to submit them all at once to reduce ipc overhead
+   * @param fn function to be run, within this function, promises will not resolve
+   * @returns promise for the entire transaction completion
    */
-  async _setOpenSettings(options) {
-    await WebSpatial.updateWindowContainer(this._wg, {
-      nextOpenSettings: options
-    });
+  transaction(fn) {
+    WebSpatial.startTransaction();
+    fn();
+    return WebSpatial.sendTransaction();
   }
   /**
-   * Retrieves the root entity of the windowContainer
-   * @returns the root entity of the windowContainer if one exists
+   * Creates a window context object that is compatable with SpatialWindowComponent's setFromWindow API
+   * @returns window context
    */
-  async getRootEntity() {
-    let reqResp = await WebSpatial.updateWindowContainer(this._wg, {
-      getRootEntityID: ""
-    });
-    if (reqResp.data.rootEntId === "") {
-      return null;
+  async createWindowContext() {
+    let openedWindow = window.open("webspatial://createWindowContext");
+    if (WebSpatial.getBackend() != "AVP") {
+      var counter = 0;
+      while (openedWindow.window.testAPI == null) {
+        if (counter > 15) {
+          openedWindow?.close();
+          openedWindow = window.open("about:blank");
+          counter = 0;
+          this.log("unexpected error when trying to open new window, retrying.");
+        }
+        var locName = "about:blank?x" + counter;
+        openedWindow.location.href = locName;
+        counter++;
+        await new Promise((resolve) => setTimeout(resolve, 10));
+      }
+      ;
+      openedWindow._webSpatialID = openedWindow.window.testAPI.getWindowID();
     } else {
-      var res = new WebSpatialResource();
-      res.id = reqResp.data.rootEntId;
-      return new SpatialEntity(res);
+      while (openedWindow.window._webSpatialID == void 0) {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+      }
     }
+    openedWindow.document.head.innerHTML = `<meta name="viewport" content="width=device-width, initial-scale=1">
+      <base href="${document.baseURI}">
+      `;
+    return openedWindow;
   }
-  /*
-   * Sets the root entity that this windowContainer will display (this does not effect resource ownership)
-   * @param entity to display
-   */
-  async setRootEntity(entity) {
-    await entity._setParentWindowContainer(this);
+  // Get Entity by id. Currently for debugging only.
+  /** @hidden */
+  async _getEntity(id) {
+    const entityInfo = await WebSpatial.inspect(id);
+    const [_, x, y, z] = entityInfo.position.match(/(\d+\.?\d*)/g);
+    const [__, sx, sy, sz] = entityInfo.scale.match(/(\d+\.?\d*)/g);
+    var res = new WebSpatialResource();
+    res.id = id;
+    res.windowContainerId = WebSpatial.getCurrentWindowContainer().id;
+    const entity = new SpatialEntity(res);
+    entity.transform.position.x = parseFloat(x);
+    entity.transform.position.y = parseFloat(y);
+    entity.transform.position.z = parseFloat(z);
+    entity.transform.scale.x = parseFloat(sx);
+    entity.transform.scale.y = parseFloat(sy);
+    entity.transform.scale.z = parseFloat(sz);
+    return entity;
+  }
+  // set loading view.
+  /** @hidden */
+  async setLoading(method, style) {
+    return WebSpatial.setLoading(method, style);
   }
 };
 
-// src/core/SpatialSession.ts
-function _parseParentResources(options) {
-  var parentWindowContainer = null;
-  if (options?.windowContainer !== null) {
-    parentWindowContainer = options?.windowContainer ? options?.windowContainer._wg : WebSpatial.getCurrentWindowContainer();
-  }
-  var parentWindow = null;
-  if (options?.windowComponent !== null) {
-    parentWindow = options?.windowComponent ? options?.windowComponent._resource : WebSpatial.getCurrentWebPanel();
-  }
-  return [parentWindowContainer, parentWindow];
-}
-var SpatialSession = class _SpatialSession {
-  /** @hidden */
-  _engineUpdateListeners = Array();
-  /** @hidden */
-  _frameLoopStarted = false;
+// src/core/Spatial.ts
+var Spatial = class {
   /**
-   * Add event listener callback to be called each frame
-   * @param callback callback to be called each update
+   * 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
    */
-  addOnEngineUpdateEventListener(callback) {
-    this._engineUpdateListeners.push(callback);
-    if (!this._frameLoopStarted) {
-      this._frameLoopStarted = true;
-      WebSpatial.onFrame(async (time) => {
-        await Promise.all(
-          this._engineUpdateListeners.map((cb) => {
-            return cb(time);
-          })
-        );
-      });
+  requestSession() {
+    if (this.isSupported() && this.getNativeVersion() === this.getClientVersion()) {
+      return new SpatialSession();
+    } else {
+      return null;
     }
   }
   /**
-   * Creates a Entity
-   * @returns Entity
+   * @returns true if web spatial is supported by this webpage
    */
-  async createEntity(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "Entity",
-      parentWindowContainer,
-      parentWindow
-    );
-    return new SpatialEntity(entity);
+  isSupported() {
+    return this.getNativeVersion() === this.getClientVersion();
   }
   /**
-   * Creates a WindowComponent
-   * [TODO] should creation of components be moved to entity? and these made private?
-   * @returns WindowComponent
+   * Gets the native version, format is "x.x.x"
+   * @returns native version string
    */
-  async createWindowComponent(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "SpatialWebView",
-      parentWindowContainer,
-      parentWindow
-    );
-    return new SpatialWindowComponent(entity);
+  getNativeVersion() {
+    if (window.__WebSpatialData && window.__WebSpatialData.getNativeVersion) {
+      return window.__WebSpatialData.getNativeVersion();
+    }
+    return window.WebSpatailNativeVersion;
   }
   /**
-   * Creates a ViewComponent used to display 3D content within the entity
-   * @returns SpatialViewComponent
+   * Gets the client version, format is "x.x.x"
+   * @returns client version string
    */
-  async createViewComponent(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "SpatialView",
-      parentWindowContainer,
-      parentWindow
-    );
-    return new SpatialViewComponent(entity);
-  }
+  getClientVersion() {
+    return "0.0.1";
+  }
+};
+
+// src/core/SpatialHelper.ts
+var SpatialHelper = class _SpatialHelper {
+  constructor(session) {
+    this.session = 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;
+  }
+  shape = {
+    createShapeEntity: async (shape = "box") => {
+      var box = await this.session.createMeshResource({ 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();
+      var targetSize = 1;
+      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;
+      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();
+      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 });
+      }
+      var wg = await this.session.createWindowContainer({
+        style: "Plain",
+        windowComponent: null,
+        windowContainer: null
+      });
+      var ent = await this.session.createEntity({
+        windowComponent: null,
+        windowContainer: wg
+      });
+      var i = await this.session.createWindowComponent({
+        windowComponent: null,
+        windowContainer: wg
+      });
+      await i.loadURL(url);
+      await ent.setCoordinateSpace("Root");
+      await ent.setComponent(i);
+      await wg.setRootEntity(ent);
+      await this.session.getCurrentWindowContainer()._setOpenSettings({ resolution: { width: 900, height: 700 } });
+      return {
+        windowContainer: wg
+      };
+    },
+    openVolume: async (url, options) => {
+      var wg = await this.session.createWindowContainer({
+        style: "Volumetric",
+        windowComponent: null,
+        windowContainer: null
+      });
+      var rootEnt = await this.session.createEntity({
+        windowComponent: null,
+        windowContainer: wg
+      });
+      await rootEnt.setComponent(
+        await this.session.createViewComponent({
+          windowComponent: null,
+          windowContainer: wg
+        })
+      );
+      await rootEnt.setCoordinateSpace("Root");
+      await wg.setRootEntity(rootEnt);
+      var ent = await this.session.createEntity({
+        windowComponent: null,
+        windowContainer: wg
+      });
+      var i = await this.session.createWindowComponent({
+        windowComponent: null,
+        windowContainer: wg
+      });
+      await i.loadURL(url);
+      if (options?.resolution) {
+        await i.setResolution(
+          options.resolution.width,
+          options.resolution.height
+        );
+      } else {
+        await i.setResolution(1e3, 1e3);
+      }
+      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) => {
+      var viewEnt = await this.session.createEntity();
+      await viewEnt.setCoordinateSpace("Dom");
+      await viewEnt.setComponent(await this.session.createViewComponent());
+      var wc = await this.session.getCurrentWindowComponent();
+      var ent = await wc.getEntity();
+      await viewEnt.setParent(ent);
+      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);
+  };
+};
+
+// src/core/component/SpatialWindowComponent.ts
+var SpatialWindowComponent = class extends SpatialComponent {
   /**
-   * Creates a ModelComponent used to display geometry + material of a 3D model
-   * @returns ModelComponent
+   * Loads a url page in the window
+   * @param url url to load
    */
-  async createModelComponent(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    var opts = void 0;
-    if (options) {
-      opts = { modelURL: options.url };
+  async loadURL(url) {
+    await WebSpatial.updateResource(this._resource, { url });
+  }
+  async setFromWindow(window2) {
+    if (window2._webSpatialID) {
+      await WebSpatial.updateResource(this._resource, {
+        windowID: window2._webSpatialID
+      });
+    } else {
+      await console.warn(
+        "failed to call setFromWindow, window provided is not valid"
+      );
     }
-    let entity = await WebSpatial.createResource(
-      "ModelComponent",
-      parentWindowContainer,
-      parentWindow,
-      opts
-    );
-    return new SpatialModelComponent(entity);
   }
   /**
-   * Creates a Model3DComponent
-   * @returns Model3DComponent
+   * Sets the resolution of the window, the resulting dimensions when rendered will be equal to 1/1360 units
+   * eg. if the resolution is set to 1360x1360 it will be a 1x1 plane
+   * See 1360 in spatialViewUI.swift for how this ratio works
+   * @param width width in pixels
+   * @param height height in pixels
    */
-  async createModel3DComponent(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    var opts = void 0;
-    if (options) {
-      opts = { modelURL: options.url };
-    }
-    let entity = await WebSpatial.createResource(
-      "Model3DComponent",
-      parentWindowContainer,
-      parentWindow,
-      opts
-    );
-    return new SpatialModel3DComponent(entity);
+  async setResolution(width, height) {
+    await WebSpatial.updateResource(this._resource, {
+      resolution: { x: width, y: height }
+    });
   }
   /**
-   * Creates a InputComponent
-   * [Experimental] Creates a InputComponent used to handle click and drag events of the entity containing a model
-   * @returns InputComponent
+   * [Experimental] Sets the anchor which the entity this is attached to will rotate around
+   * @param rotationAnchor
    */
-  async createInputComponent(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "InputComponent",
-      parentWindowContainer,
-      parentWindow
-    );
-    return new SpatialInputComponent(entity);
+  async setRotationAnchor(rotationAnchor) {
+    await WebSpatial.updateResource(this._resource, {
+      rotationAnchor
+    });
   }
   /**
-   * Creates a MeshResource containing geometry data
-   * @returns MeshResource
+   * [Experimental] Sets the opacity of the window after apply material
+   * @param opacity
    */
-  async createMeshResource(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "MeshResource",
-      parentWindowContainer,
-      parentWindow,
-      options
-    );
-    return new SpatialMeshResource(entity);
+  async setOpacity(opacity) {
+    await WebSpatial.updateResource(this._resource, {
+      opacity
+    });
   }
   /**
-   * Creates a PhysicallyBasedMaterial containing PBR material data
-   * @returns PhysicallyBasedMaterial
+   * Sets the style that should be applied to the window
+   * @param options style options
    */
-  async createPhysicallyBasedMaterialResource(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "PhysicallyBasedMaterial",
-      parentWindowContainer,
-      parentWindow,
-      options
-    );
-    return new SpatialPhysicallyBasedMaterialResource(entity);
+  async setStyle(styleParam) {
+    const currentWindowComponent = SpatialHelper.instance?.session.getCurrentWindowComponent();
+    const isSettingSelfStyle = currentWindowComponent?._resource.id == this._resource.id;
+    const { material, cornerRadius } = styleParam;
+    const options = {};
+    if (material?.type) {
+      options.backgroundMaterial = material.type;
+    }
+    if (cornerRadius !== void 0) {
+      if (typeof cornerRadius === "number") {
+        options.cornerRadius = {
+          topLeading: cornerRadius,
+          bottomLeading: cornerRadius,
+          topTrailing: cornerRadius,
+          bottomTrailing: cornerRadius
+        };
+      } else {
+        options.cornerRadius = { ...cornerRadius };
+      }
+    }
+    if (isSettingSelfStyle && document && document.readyState == "loading") {
+      var encoded = encodeURIComponent(JSON.stringify(options));
+      var x = document.createElement("link");
+      x.rel = "stylesheet";
+      x.href = "forceStyle://mystyle.css?style=" + encoded;
+      document.head.appendChild(x);
+      x.remove();
+    } else {
+      await WebSpatial.updateResource(this._resource, { style: options });
+    }
   }
   /**
-   * Creates a WindowContainer
-   * @returns SpatialWindowContainer
-   * */
-  async createWindowContainer(options) {
-    var style = options?.style ? options?.style : "Plain";
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    return new SpatialWindowContainer(
-      await WebSpatial.createWindowContainer(
-        style,
-        parentWindowContainer,
-        parentWindow
-      )
-    );
+   * Modifies the amount the spatial window can be scrolled
+   * Should only be used internally
+   * See https://developer.apple.com/documentation/uikit/1624475-uiedgeinsetsmake?language=objc
+   * @param insets margin to modify scroll distances by
+   */
+  async setScrollEdgeInsets(insets) {
+    await WebSpatial.updateResource(this._resource, {
+      setScrollEdgeInsets: insets
+    });
   }
   /**
-   * Creates a Scene to display content within an anchored area managed by the OS
-   * @hidden
-   * @param {WindowStyle} [style='Plain'] - The style of the Scene container to be created with. Defaults to 'Plain'.
-   * @param {Object} [cfg={}] - Configuration object for the Scene.
-   * @returns Boolean
+   * Enable/Disable scrolling in the window (defaults to enabled), if disabled, scrolling will be applied to the root page
+   * @param enabled value to set
    */
-  async _createScene(style = "Plain", cfg) {
-    return await WebSpatial.createScene(style, cfg);
+  async setScrollEnabled(enabled) {
+    await WebSpatial.updateResource(this._resource, { scrollEnabled: enabled });
   }
   /**
-   * Retrieves the window for this page
-   * @returns the window component corresponding to the js running on this page
-   * [TODO] discuss implications of this not being async
+   * Defaults to false. If set to true, scrolling the parent page will also scroll this window with it like other dom elements
+   * @param scrollWithParent value to set
    */
-  getCurrentWindowComponent() {
-    return new SpatialWindowComponent(WebSpatial.getCurrentWebPanel());
+  async setScrollWithParent(scrollWithParent) {
+    await WebSpatial.updateResource(this._resource, {
+      scrollWithParent
+    });
+  }
+};
+
+// src/core/component/EventSpatialComponent.ts
+var EventSpatialComponent = class extends SpatialComponent {
+  // Class implementation goes here
+  constructor(_resource) {
+    super(_resource);
+    WebSpatial.registerEventReceiver(_resource.id, (data) => {
+      this.onRecvEvent(data);
+    });
+  }
+  async onDestroy() {
+    WebSpatial.unregisterEventReceiver(this._resource.id);
+  }
+};
+
+// src/core/component/SpatialInputComponent.ts
+var SpatialInputComponent = class extends EventSpatialComponent {
+  onRecvEvent(data) {
+    this.onTranslate(data);
   }
   /**
-   * Retrieves the parent window for this page or null if this is the root page
-   * @returns the window component or null
+   * Callback fired when a translate event occurs
+   * @param data translate event data
    */
-  async getParentWindowComponent() {
-    let parentResp = await WebSpatial.updateResource(
-      WebSpatial.getCurrentWebPanel(),
-      { getParentID: "" }
-    );
-    if (parentResp.data.parentID === "") {
-      return new Promise((res2, rej) => {
-        res2(null);
-      });
-    } else {
-      var res = new WebSpatialResource();
-      res.id = parentResp.data.parentID;
-      return new SpatialWindowComponent(res);
-    }
+  onTranslate(data) {
   }
+};
+
+// src/core/component/SpatialModelComponent.ts
+var SpatialModelComponent = class extends SpatialComponent {
+  cachedMaterials = new Array();
   /**
-   * Logs a message to the native apps console
-   * @param msg mesage to log
+   * Sets the mesh to be displayed by the component
+   * @param mesh mesh to set
    */
-  async log(...msg) {
-    await WebSpatial.sendCommand(
-      new RemoteCommand("log", {
-        logString: msg.map((x) => {
-          return JSON.stringify(x);
-        })
-      })
-    );
+  async setMesh(mesh) {
+    await WebSpatial.updateResource(this._resource, {
+      meshResource: mesh._resource.id
+    });
   }
   /**
-   * @hidden
-   * Debugging only, used to ping the native renderer
+   * Sets the materials that should be applied to the mesh
+   * @param materials array of materials to set
    */
-  async _ping(msg) {
-    return await WebSpatial.ping(msg);
+  async setMaterials(materials) {
+    this.cachedMaterials = materials;
+    await WebSpatial.updateResource(this._resource, {
+      materials: materials.map((m) => {
+        m._addToComponent(this);
+        return m._resource.id;
+      })
+    });
+  }
+  /** @hidden */
+  async _syncMaterials() {
+    await this.setMaterials(this.cachedMaterials);
   }
+};
+
+// src/core/component/SpatialViewComponent.ts
+var SpatialViewComponent = class extends SpatialComponent {
   /**
-   * @hidden
-   * Debugging to get internal state from native code
-   * @returns data as a js object
+   * Sets the resolution of the spatial view in dom pixels
    */
-  async _getStats() {
-    return await WebSpatial.getStats();
+  async setResolution(width, height) {
+    await WebSpatial.updateResource(this._resource, {
+      resolution: { x: width, y: height }
+    });
   }
   /**
-   * @hidden
+   * Sets if content of the spatialView should be within a portal
+   * If true, volume will be behind the page, if false, it will be in front of the page
    */
-  async _inspect(spatialObjectId = WebSpatial.getCurrentWebPanel().id) {
-    return WebSpatial.inspect(spatialObjectId);
+  async setIsPortal(isPortal) {
+    await WebSpatial.updateResource(this._resource, {
+      isPortal
+    });
+  }
+};
+
+// src/core/component/SpatialModel3DComponent.ts
+var SpatialModel3DComponent = class extends EventSpatialComponent {
+  onRecvEvent(data) {
+    const { eventType, value, error } = data;
+    switch (eventType) {
+      case "phase":
+        if (value === "success") {
+          this.onSuccess?.();
+        } else {
+          this.onFailure?.(error);
+        }
+        break;
+      case "dragstart":
+        this._onDragStart?.(value);
+        break;
+      case "dragend":
+        this._onDragEnd?.(value);
+        break;
+      case "drag":
+        this._onDrag?.(value);
+        break;
+      case "tap":
+        this._onTap?.();
+        break;
+      case "doubletap":
+        this._onDoubleTap?.();
+        break;
+      case "longpress":
+        this._onLongPress?.();
+        break;
+      default:
+        break;
+    }
   }
   /**
-   * @hidden
+   * Sets the resolution of the spatial view in dom pixels
    */
-  async _inspectRootWindowContainer() {
-    return WebSpatial.inspectRootWindowContainer();
-  }
-  /** Opens the immersive space */
-  async openImmersiveSpace() {
-    return await WebSpatial.openImmersiveSpace();
+  async setResolution(width, height) {
+    await WebSpatial.updateResource(this._resource, {
+      resolution: { x: width, y: height }
+    });
   }
-  /** Closes the immersive space */
-  async dismissImmersiveSpace() {
-    return await WebSpatial.dismissImmersiveSpace();
+  async setRotationAnchor(rotationAnchor) {
+    await WebSpatial.updateResource(this._resource, {
+      rotationAnchor
+    });
   }
-  static _immersiveWindowContainer = null;
   /**
-   * Retreives the window container corresponding to the Immersive space
-   * @returns the immersive window container
+   * Sets the opacity of the model
+   * @param opacity
    */
-  async getImmersiveWindowContainer() {
-    if (_SpatialSession._immersiveWindowContainer) {
-      return _SpatialSession._immersiveWindowContainer;
-    } else {
-      _SpatialSession._immersiveWindowContainer = new SpatialWindowContainer(
-        WebSpatial.getImmersiveWindowContainer()
-      );
-      return _SpatialSession._immersiveWindowContainer;
-    }
+  async setOpacity(opacity) {
+    await WebSpatial.updateResource(this._resource, {
+      opacity
+    });
   }
-  // Retreives the window container that is the parent to this spatial web page
-  static _currentWindowContainer = null;
   /**
-   * Gets the current window container for the window
-   * [TODO] discuss what happens if it doesnt yet have a window container
-   * @returns the current window container for the window
+   * Sets how the model fill the rect
+   * @param contentMode
    */
-  getCurrentWindowContainer() {
-    if (_SpatialSession._currentWindowContainer) {
-      return _SpatialSession._currentWindowContainer;
-    } else {
-      _SpatialSession._currentWindowContainer = new SpatialWindowContainer(
-        WebSpatial.getCurrentWindowContainer()
-      );
-      return _SpatialSession._currentWindowContainer;
-    }
+  async setContentMode(contentMode) {
+    await WebSpatial.updateResource(this._resource, {
+      contentMode
+    });
   }
   /**
-   * Start a transaction that queues up commands to submit them all at once to reduce ipc overhead
-   * @param fn function to be run, within this function, promises will not resolve
-   * @returns promise for the entire transaction completion
+   * Constrains this model dimensions to the specified aspect ratio.
+   * with a value of 0, the model will use the original aspect ratio.
+   *
+   * @param aspectRatio number
    */
-  transaction(fn) {
-    WebSpatial.startTransaction();
-    fn();
-    return WebSpatial.sendTransaction();
+  async setAspectRatio(aspectRatio) {
+    await WebSpatial.updateResource(this._resource, {
+      aspectRatio
+    });
   }
   /**
-   * Creates a window context object that is compatable with SpatialWindowComponent's setFromWindow API
-   * @returns window context
+   * Defaults to false. If set to true, scrolling the parent page will also scroll this window with it like other dom elements
+   * @param scrollWithParent value to set
    */
-  async createWindowContext() {
-    let openedWindow = window.open("webspatial://createWindowContext");
-    if (WebSpatial.getBackend() != "AVP") {
-      var counter = 0;
-      while (openedWindow.window.testAPI == null) {
-        if (counter > 15) {
-          openedWindow?.close();
-          openedWindow = window.open("about:blank");
-          counter = 0;
-          this.log("unexpected error when trying to open new window, retrying.");
-        }
-        var locName = "about:blank?x" + counter;
-        openedWindow.location.href = locName;
-        counter++;
-        await new Promise((resolve) => setTimeout(resolve, 10));
-      }
-      ;
-      openedWindow._webSpatialID = openedWindow.window.testAPI.getWindowID();
-    } else {
-      while (openedWindow.window._webSpatialID == void 0) {
-        await new Promise((resolve) => setTimeout(resolve, 10));
-      }
-    }
-    openedWindow.document.head.innerHTML = `<meta name="viewport" content="width=device-width, initial-scale=1">
-      <base href="${document.baseURI}">
-      `;
-    return openedWindow;
-  }
-  // Get Entity by id. Currently for debugging only.
-  /** @hidden */
-  async _getEntity(id) {
-    const entityInfo = await WebSpatial.inspect(id);
-    const [_, x, y, z] = entityInfo.position.match(/(\d+\.?\d*)/g);
-    const [__, sx, sy, sz] = entityInfo.scale.match(/(\d+\.?\d*)/g);
-    var res = new WebSpatialResource();
-    res.id = id;
-    res.windowContainerId = WebSpatial.getCurrentWindowContainer().id;
-    const entity = new SpatialEntity(res);
-    entity.transform.position.x = parseFloat(x);
-    entity.transform.position.y = parseFloat(y);
-    entity.transform.position.z = parseFloat(z);
-    entity.transform.scale.x = parseFloat(sx);
-    entity.transform.scale.y = parseFloat(sy);
-    entity.transform.scale.z = parseFloat(sz);
-    return entity;
-  }
-  // set loading view.
-  /** @hidden */
-  async setLoading(method, style) {
-    return WebSpatial.setLoading(method, style);
+  async setScrollWithParent(scrollWithParent) {
+    await WebSpatial.updateResource(this._resource, {
+      scrollWithParent
+    });
   }
-};
-
-// src/core/Spatial.ts
-var Spatial = class {
   /**
-   * 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
+   * Sets whether the model appear in original size or fit the rect
+   * @param resizable
    */
-  requestSession() {
-    if (this.isSupported() && this.getNativeVersion() === this.getClientVersion()) {
-      return new SpatialSession();
-    } else {
-      return null;
-    }
+  async setResizable(resizable) {
+    await WebSpatial.updateResource(this._resource, {
+      resizable
+    });
   }
   /**
-   * @returns true if web spatial is supported by this webpage
+   * Callback fired when model load success
    */
-  isSupported() {
-    return this.getNativeVersion() === this.getClientVersion();
+  onSuccess;
+  /**
+   * Callback fired when model load failure
+   * @param errorReason
+   */
+  onFailure;
+  /**
+   * Callback fired when model was dragged at the beginning
+   * @param dragEvent
+   */
+  _onDragStart;
+  set onDragStart(callback) {
+    if (this._onDragStart !== callback) {
+      this._onDragStart = callback;
+      WebSpatial.updateResource(this._resource, {
+        enableDragEvent: this.enableDragEvent
+      });
+    }
   }
   /**
-   * Gets the native version, format is "x.x.x"
-   * @returns native version string
+   * Callback fired when model was dragged
+   * @param dragEvent
    */
-  getNativeVersion() {
-    if (window.__WebSpatialData && window.__WebSpatialData.getNativeVersion) {
-      return window.__WebSpatialData.getNativeVersion();
+  _onDrag;
+  set onDrag(callback) {
+    if (this._onDrag !== callback) {
+      this._onDrag = callback;
+      WebSpatial.updateResource(this._resource, {
+        enableDragEvent: this.enableDragEvent
+      });
     }
-    return window.WebSpatailNativeVersion;
   }
   /**
-   * Gets the client version, format is "x.x.x"
-   * @returns client version string
+   * Callback fired when model was dragged at the ending
+   * @param dragEvent
    */
-  getClientVersion() {
-    return "0.0.1";
+  _onDragEnd;
+  set onDragEnd(callback) {
+    if (this._onDragEnd !== callback) {
+      this._onDragEnd = callback;
+      WebSpatial.updateResource(this._resource, {
+        enableDragEvent: this.enableDragEvent
+      });
+    }
   }
-};
-
-// src/core/SpatialHelper.ts
-var SpatialHelper = class _SpatialHelper {
-  constructor(session) {
-    this.session = session;
+  get enableDragEvent() {
+    return void 0 !== this._onDrag || void 0 !== this._onDragStart || void 0 !== this._onDragEnd;
   }
-  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;
-        }
-      }
+  /**
+   * Callback fired when model was tapped
+   */
+  _onTap;
+  set onTap(callback) {
+    if (this._onTap !== callback) {
+      this._onTap = callback;
+      WebSpatial.updateResource(this._resource, {
+        enableTapEvent: void 0 !== callback
+      });
     }
-    return null;
   }
-  shape = {
-    createShapeEntity: async (shape = "box") => {
-      var box = await this.session.createMeshResource({ 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();
-      var targetSize = 1;
-      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;
-      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();
-      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 });
-      }
-      var wg = await this.session.createWindowContainer({
-        style: "Plain",
-        windowComponent: null,
-        windowContainer: null
-      });
-      var ent = await this.session.createEntity({
-        windowComponent: null,
-        windowContainer: wg
-      });
-      var i = await this.session.createWindowComponent({
-        windowComponent: null,
-        windowContainer: wg
-      });
-      await i.loadURL(url);
-      await ent.setCoordinateSpace("Root");
-      await ent.setComponent(i);
-      await wg.setRootEntity(ent);
-      await this.session.getCurrentWindowContainer()._setOpenSettings({ resolution: { width: 900, height: 700 } });
-    },
-    openVolume: async (url, options) => {
-      var wg = await this.session.createWindowContainer({
-        style: "Volumetric",
-        windowComponent: null,
-        windowContainer: null
-      });
-      var rootEnt = await this.session.createEntity({
-        windowComponent: null,
-        windowContainer: wg
-      });
-      await rootEnt.setComponent(
-        await this.session.createViewComponent({
-          windowComponent: null,
-          windowContainer: wg
-        })
-      );
-      await rootEnt.setCoordinateSpace("Root");
-      await wg.setRootEntity(rootEnt);
-      var ent = await this.session.createEntity({
-        windowComponent: null,
-        windowContainer: wg
-      });
-      var i = await this.session.createWindowComponent({
-        windowComponent: null,
-        windowContainer: wg
+  /** Callback fired when model was double tapped */
+  _onDoubleTap;
+  set onDoubleTap(callback) {
+    if (this._onDoubleTap !== callback) {
+      this._onDoubleTap = callback;
+      WebSpatial.updateResource(this._resource, {
+        enableDoubleTapEvent: void 0 !== callback
       });
-      await i.loadURL(url);
-      if (options?.resolution) {
-        await i.setResolution(
-          options.resolution.width,
-          options.resolution.height
-        );
-      } else {
-        await i.setResolution(1e3, 1e3);
-      }
-      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) => {
-      var viewEnt = await this.session.createEntity();
-      await viewEnt.setCoordinateSpace("Dom");
-      await viewEnt.setComponent(await this.session.createViewComponent());
-      var wc = await this.session.getCurrentWindowComponent();
-      var ent = await wc.getEntity();
-      await viewEnt.setParent(ent);
-      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
+  }
+  /** Callback fired when model was long pressed */
+  _onLongPress;
+  set onLongPress(callback) {
+    if (this._onLongPress !== callback) {
+      this._onLongPress = callback;
+      WebSpatial.updateResource(this._resource, {
+        enableLongPressEvent: void 0 !== callback
       });
-      update();
-      return {
-        entity: viewEnt
-      };
     }
-  };
-  setBackgroundStyle = async (style, backgroundColor = "#00000000") => {
-    document.documentElement.style.backgroundColor = backgroundColor;
-    await this.session.getCurrentWindowComponent().setStyle(style);
-  };
+  }
 };
 export {
   Spatial,