@webspatial/core-sdk 0.0.1

package/src/core/component/SpatialModel3DComponent.ts

@@ -0,0 +1,213 @@
+import { EventSpatialComponent } from './EventSpatialComponent'
+import { WebSpatial } from '../private/WebSpatial'
+import { Vec3 } from '../SpatialTransform'
+
+/**
+ * Translate event, matching similar behavior to https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event
+ */
+export type ModelDragEvent = {
+  eventType: 'dragstart' | 'dragend' | 'drag'
+  translation3D: Vec3
+  startLocation3D: Vec3
+}
+
+export type TapEvent = {
+  eventType: 'tap'
+}
+
+/**
+ * Used to position a model3d in 3D space
+ */
+export class SpatialModel3DComponent extends EventSpatialComponent {
+  protected override onRecvEvent(data: any): void {
+    const { eventType, value, error } = data
+    switch (eventType) {
+      case 'phase':
+        if (value === 'success') {
+          this.onSuccess?.()
+        } else {
+          this.onFailure?.(error as string)
+        }
+        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
+    }
+  }
+  /**
+   * Sets the resolution of the spatial view in dom pixels
+   */
+  async setResolution(width: number, height: number) {
+    await WebSpatial.updateResource(this._resource, {
+      resolution: { x: width, y: height },
+    })
+  }
+
+  async setRotationAnchor(rotationAnchor: Vec3) {
+    await WebSpatial.updateResource(this._resource, {
+      rotationAnchor: rotationAnchor,
+    })
+  }
+
+  /**
+   * Sets the opacity of the model
+   * @param opacity
+   */
+  async setOpacity(opacity: number) {
+    await WebSpatial.updateResource(this._resource, {
+      opacity,
+    })
+  }
+
+  /**
+   * Sets how the model fill the rect
+   * @param contentMode
+   */
+  async setContentMode(contentMode: 'fill' | 'fit') {
+    await WebSpatial.updateResource(this._resource, {
+      contentMode,
+    })
+  }
+
+  /**
+   * 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
+   */
+  async setAspectRatio(aspectRatio: number) {
+    await WebSpatial.updateResource(this._resource, {
+      aspectRatio,
+    })
+  }
+
+  /**
+   * Sets whether the model appear in original size or fit the rect
+   * @param resizable
+   */
+  async setResizable(resizable: boolean) {
+    await WebSpatial.updateResource(this._resource, {
+      resizable,
+    })
+  }
+
+  /**
+   * Callback fired when model load success
+   */
+  public onSuccess?: () => void
+
+  /**
+   * Callback fired when model load failure
+   * @param errorReason
+   */
+  public onFailure?: (errorReason: string) => void
+
+  /**
+   * Callback fired when model was dragged at the beginning
+   * @param dragEvent
+   */
+  private _onDragStart?: (dragEvent: ModelDragEvent) => void
+  public set onDragStart(
+    callback: ((dragEvent: ModelDragEvent) => void) | undefined,
+  ) {
+    if (this._onDragStart !== callback) {
+      this._onDragStart = callback
+      WebSpatial.updateResource(this._resource, {
+        enableDragEvent: this.enableDragEvent,
+      })
+    }
+  }
+
+  /**
+   * Callback fired when model was dragged
+   * @param dragEvent
+   */
+  private _onDrag?: (dragEvent: ModelDragEvent) => void
+  public set onDrag(
+    callback: ((dragEvent: ModelDragEvent) => void) | undefined,
+  ) {
+    if (this._onDrag !== callback) {
+      this._onDrag = callback
+      WebSpatial.updateResource(this._resource, {
+        enableDragEvent: this.enableDragEvent,
+      })
+    }
+  }
+
+  /**
+   * Callback fired when model was dragged at the ending
+   * @param dragEvent
+   */
+  private _onDragEnd?: (dragEvent: ModelDragEvent) => void
+  public set onDragEnd(
+    callback: ((dragEvent: ModelDragEvent) => void) | undefined,
+  ) {
+    if (this._onDragEnd !== callback) {
+      this._onDragEnd = callback
+      WebSpatial.updateResource(this._resource, {
+        enableDragEvent: this.enableDragEvent,
+      })
+    }
+  }
+
+  private get enableDragEvent(): boolean {
+    return (
+      undefined !== this._onDrag ||
+      undefined !== this._onDragStart ||
+      undefined !== this._onDragEnd
+    )
+  }
+
+  /**
+   * Callback fired when model was tapped
+   */
+  private _onTap?: () => void
+  public set onTap(callback: (() => void) | undefined) {
+    if (this._onTap !== callback) {
+      this._onTap = callback
+      WebSpatial.updateResource(this._resource, {
+        enableTapEvent: undefined !== callback,
+      })
+    }
+  }
+
+  /** Callback fired when model was double tapped */
+  private _onDoubleTap?: () => void
+  public set onDoubleTap(callback: (() => void) | undefined) {
+    if (this._onDoubleTap !== callback) {
+      this._onDoubleTap = callback
+      WebSpatial.updateResource(this._resource, {
+        enableDoubleTapEvent: undefined !== callback,
+      })
+    }
+  }
+
+  /** Callback fired when model was long pressed */
+  private _onLongPress?: () => void
+  public set onLongPress(callback: (() => void) | undefined) {
+    if (this._onLongPress !== callback) {
+      this._onLongPress = callback
+      WebSpatial.updateResource(this._resource, {
+        enableLongPressEvent: undefined !== callback,
+      })
+    }
+  }
+}

package/src/core/component/SpatialModelComponent.ts

@@ -0,0 +1,39 @@
+import { SpatialMeshResource } from '../resource/SpatialMeshResource'
+import { SpatialPhysicallyBasedMaterialResource } from '../resource/SpatialPhysicallyBasedMaterialResource'
+import { SpatialComponent } from './SpatialComponent'
+import { WebSpatial } from '../private/WebSpatial'
+
+/**
+ * Used to position a model in 3D space, made up of a mesh and materials to be applied to the mesh
+ */
+export class SpatialModelComponent extends SpatialComponent {
+  private cachedMaterials = new Array<SpatialPhysicallyBasedMaterialResource>()
+  /**
+   * Sets the mesh to be displayed by the component
+   * @param mesh mesh to set
+   */
+  async setMesh(mesh: SpatialMeshResource) {
+    await WebSpatial.updateResource(this._resource, {
+      meshResource: mesh._resource.id,
+    })
+  }
+
+  /**
+   * Sets the materials that should be applied to the mesh
+   * @param materials array of materials to set
+   */
+  async setMaterials(materials: Array<SpatialPhysicallyBasedMaterialResource>) {
+    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)
+  }
+}

package/src/core/component/SpatialViewComponent.ts

@@ -0,0 +1,32 @@
+import { WebSpatial } from '../private/WebSpatial'
+import { SpatialComponent } from './SpatialComponent'
+
+/**
+ * Represenets a volume that can be added to the webpage
+ * Child entities will be added within this volume's space
+ * Defaults to having 1x1x1 meter dimensions
+ * Resolution defaults to 100x100 pixels
+ * Only will be displayed on entities in "ROOT" or "DOM" space
+ * If the resolution of the spatial view is not a square, the volume will be larger based on the ratio with the shortest side being 1 meter.
+ * (eg. 200x100 = 2m x 1m x 1m volume)
+ */
+export class SpatialViewComponent extends SpatialComponent {
+  /**
+   * Sets the resolution of the spatial view in dom pixels
+   */
+  async setResolution(width: number, height: number) {
+    await WebSpatial.updateResource(this._resource, {
+      resolution: { x: width, y: height },
+    })
+  }
+
+  /**
+   * 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: Boolean) {
+    await WebSpatial.updateResource(this._resource, {
+      isPortal: isPortal,
+    })
+  }
+}

package/src/core/component/SpatialWindowComponent.ts

@@ -0,0 +1,168 @@
+import { SpatialComponent } from './SpatialComponent'
+import { WebSpatial } from '../private/WebSpatial'
+import { Vec3 } from '../SpatialTransform'
+
+/**
+ * Material type for SpatialDiv or HTML document.
+ *
+ * This type defines the background material options for both SpatialDiv elements and HTML documents.
+ *
+ * - `'none'`: This is the default value.
+ *   - For HTML documents, the web page window will have the default native background.
+ *   - For SpatialDiv, the window will have a transparent background.
+ * - `'translucent'`: Represents a glass-like material in AVP (Apple Vision Pro).
+ * - `'thick'`: Represents a thick material in AVP.
+ * - `'regular'`: Represents a regular material in AVP.
+ * - `'thin'`: Represents a thin material in AVP.
+ * - `'transparent'`: Represents a fully transparent background.
+ */
+export type BackgroundMaterialType =
+  | 'none'
+  | 'translucent'
+  | 'thick'
+  | 'regular'
+  | 'thin'
+  | 'transparent'
+
+export type CornerRadius = {
+  topLeading: number
+  bottomLeading: number
+  topTrailing: number
+  bottomTrailing: number
+}
+
+export type StyleParam = {
+  material?: {
+    type: BackgroundMaterialType
+  }
+  cornerRadius?: number | CornerRadius
+}
+
+/**
+ * Used to position an web window in 3D space
+ */
+export class SpatialWindowComponent extends SpatialComponent {
+  /**
+   * Loads a url page in the window
+   * @param url url to load
+   */
+  async loadURL(url: string) {
+    await WebSpatial.updateResource(this._resource, { url: url })
+  }
+
+  async setFromWindow(window: any) {
+    if (window._webSpatialID) {
+      await WebSpatial.updateResource(this._resource, {
+        windowID: window._webSpatialID,
+      })
+    } else {
+      await console.warn(
+        'failed to call setFromWindow, window provided is not valid',
+      )
+    }
+  }
+
+  /**
+   * 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 setResolution(width: number, height: number) {
+    await WebSpatial.updateResource(this._resource, {
+      resolution: { x: width, y: height },
+    })
+  }
+
+  /**
+   * [Experimental] Sets the anchor which the entity this is attached to will rotate around
+   * @param rotationAnchor
+   */
+  async setRotationAnchor(rotationAnchor: Vec3) {
+    await WebSpatial.updateResource(this._resource, {
+      rotationAnchor: rotationAnchor,
+    })
+  }
+
+  /**
+   * [Experimental] Sets the opacity of the window after apply material
+   * @param opacity
+   */
+  async setOpacity(opacity: number) {
+    await WebSpatial.updateResource(this._resource, {
+      opacity,
+    })
+  }
+
+  /**
+   * Sets the style that should be applied to the window
+   * @param options style options
+   */
+  async setStyle(styleParam: StyleParam) {
+    const { material, cornerRadius } = styleParam
+    const options: any = {}
+    if (material?.type) {
+      options.backgroundMaterial = material.type
+    }
+
+    if (cornerRadius !== undefined) {
+      if (typeof cornerRadius === 'number') {
+        options.cornerRadius = {
+          topLeading: cornerRadius,
+          bottomLeading: cornerRadius,
+          topTrailing: cornerRadius,
+          bottomTrailing: cornerRadius,
+        }
+      } else {
+        options.cornerRadius = { ...cornerRadius }
+      }
+    }
+
+    if (document && document.readyState == 'loading') {
+      // Avoid flash of unstyled content by sending style command via a link element
+      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 })
+  }
+
+  /**
+   * 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: {
+    top: number
+    left: number
+    bottom: number
+    right: number
+  }) {
+    await WebSpatial.updateResource(this._resource, {
+      setScrollEdgeInsets: insets,
+    })
+  }
+
+  /**
+   * 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 setScrollEnabled(enabled: boolean) {
+    await WebSpatial.updateResource(this._resource, { scrollEnabled: enabled })
+  }
+
+  /**
+   * 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: boolean) {
+    await WebSpatial.updateResource(this._resource, {
+      scrollWithParent: scrollWithParent,
+    })
+  }
+}

package/src/core/component/index.ts

@@ -0,0 +1,14 @@
+export { SpatialComponent } from './SpatialComponent'
+export {
+  SpatialWindowComponent,
+  type BackgroundMaterialType,
+  type StyleParam,
+  type CornerRadius,
+} from './SpatialWindowComponent'
+export { SpatialInputComponent } from './SpatialInputComponent'
+export { SpatialModelComponent } from './SpatialModelComponent'
+export { SpatialViewComponent } from './SpatialViewComponent'
+export {
+  SpatialModel3DComponent,
+  type ModelDragEvent,
+} from './SpatialModel3DComponent'

package/src/core/index.ts

@@ -0,0 +1,10 @@
+export * from './component'
+export * from './resource'
+export { SpatialEntity } from './SpatialEntity'
+export { SpatialSession } from './SpatialSession'
+export { Spatial } from './Spatial'
+export { SpatialWindowContainer } from './SpatialWindowContainer'
+export { SpatialHelper } from './SpatialHelper'
+export { type WindowStyle } from './types'
+export { SpatialTransform, Vec3, Vec4 } from './SpatialTransform'
+export * from './types'