Model upload and positioning

src/apps/illumination/ngv-main-illumination.ts

@@ -6,6 +6,7 @@ import {type CesiumWidget} from '@cesium/engine';
 import type {IIlluminationConfig} from './ingv-config-illumination.js';
 
 import '../../plugins/cesium/ngv-plugin-cesium-widget.js';
+import type {ViewerInitializedDetails} from '../../plugins/cesium/ngv-plugin-cesium-widget.js';
 
 @customElement('ngv-main-illumination')
 export class NgvMainIllumination extends LitElement {
@@ -23,6 +24,7 @@ export class NgvMainIllumination extends LitElement {
   `;
 
   updated(): void {
+    if (!this.viewer?.clock) return;
     this.viewer.clock.currentTime = this.date;
     console.log(this.date.toString());
   }
@@ -32,8 +34,8 @@ export class NgvMainIllumination extends LitElement {
       <div class="app-container">
         <ngv-plugin-cesium-widget
           .cesiumContext=${this.config.cesiumContext}
-          @viewerInitialized=${(evt: CustomEvent<CesiumWidget>) => {
-            this.viewer = evt.detail;
+          @viewerInitialized=${(evt: CustomEvent<ViewerInitializedDetails>) => {
+            this.viewer = evt.detail.viewer;
             this.updated();
           }}
         ></ngv-plugin-cesium-widget>

src/apps/permits/demoPermitConfig.ts

@@ -43,6 +43,9 @@ export const config: IPermitsConfig = {
       widgetOptions: {
         scene3DOnly: true,
       },
+      globeOptions: {
+        depthTestAgainstTerrain: true,
+      },
     },
   },
 };

src/apps/permits/index.ts

@@ -1,6 +1,6 @@
 import type {HTMLTemplateResult} from 'lit';
 import {html} from 'lit';
-import {customElement} from 'lit/decorators.js';
+import {customElement, state} from 'lit/decorators.js';
 
 import '../../structure/ngv-structure-app.js';
 
@@ -11,42 +11,31 @@ import {ABaseApp} from '../../structure/BaseApp.js';
 
 import type {IPermitsConfig} from './ingv-config-permits.js';
 import '../../plugins/cesium/ngv-plugin-cesium-widget';
-import type {CesiumWidget, Model} from '@cesium/engine';
+import '../../plugins/cesium/ngv-plugin-cesium-upload';
+import '../../plugins/cesium/ngv-plugin-cesium-model-interact';
+import type {CesiumWidget, DataSourceCollection} from '@cesium/engine';
 
-import {
-  Math as CesiumMath,
-  Ellipsoid,
-  HeadingPitchRoll,
-  Transforms,
-} from '@cesium/engine';
+import {PrimitiveCollection} from '@cesium/engine';
+import type {ViewerInitializedDetails} from '../../plugins/cesium/ngv-plugin-cesium-widget.js';
 
 @customElement('ngv-app-permits')
 @localized()
 export class NgvAppPermits extends ABaseApp<IPermitsConfig> {
+  @state()
   private viewer: CesiumWidget;
+  private uploadedModelsCollection: PrimitiveCollection =
+    new PrimitiveCollection();
+  private dataSourceCollection: DataSourceCollection;
 
-  constructor() {
-    super(() => import('./demoPermitConfig.js'));
-  }
-
-  modelCallback(name: string, model: Model): void {
-    // This position the model where the camera is
-    console.log('positioning', name);
-    const positionClone = this.viewer.camera.position.clone();
+  private storeOptions = {
+    localStoreKey: 'permits-localStoreModels',
+    indexDbName: 'permits-uploadedModelsStore',
+  };
 
-    const fixedFrameTransform = Transforms.localFrameToFixedFrameGenerator(
-      'north',
-      'west',
-    );
+  private collections: ViewerInitializedDetails['primitiveCollections'];
 
-    const modelOrientation = [90, 0, 0];
-    const modelMatrix = Transforms.headingPitchRollToFixedFrame(
-      positionClone,
-      new HeadingPitchRoll(...modelOrientation.map(CesiumMath.toRadians)),
-      Ellipsoid.WGS84,
-      fixedFrameTransform,
-    );
-    model.modelMatrix = modelMatrix;
+  constructor() {
+    super(() => import('./demoPermitConfig.js'));
   }
 
   render(): HTMLTemplateResult {
@@ -56,11 +45,44 @@ export class NgvAppPermits extends ABaseApp<IPermitsConfig> {
     }
     return html`
       <ngv-structure-app .config=${this.config}>
+        <div
+          slot="menu"
+          style="display: flex; flex-direction: column; row-gap: 10px;"
+        >
+          ${this.viewer
+            ? html`
+                <ngv-plugin-cesium-model-interact
+                  .viewer="${this.viewer}"
+                  .dataSourceCollection="${this.dataSourceCollection}"
+                  .primitiveCollection="${this.collections.models}"
+                  .options="${{listTitle: 'Catalog'}}"
+                ></ngv-plugin-cesium-model-interact>
+                <div
+                  style="width: 100%;border: 1px solid #E0E3E6;margin: 5px 0;"
+                ></div>
+                <ngv-plugin-cesium-upload
+                  .viewer="${this.viewer}"
+                  .primitiveCollection="${this.uploadedModelsCollection}"
+                  .storeOptions="${this.storeOptions}"
+                ></ngv-plugin-cesium-upload>
+                <ngv-plugin-cesium-model-interact
+                  .viewer="${this.viewer}"
+                  .dataSourceCollection="${this.dataSourceCollection}"
+                  .primitiveCollection="${this.uploadedModelsCollection}"
+                  .storeOptions="${this.storeOptions}"
+                  .options="${{listTitle: 'Uploaded models'}}"
+                ></ngv-plugin-cesium-model-interact>
+              `
+            : ''}
+        </div>
+
         <ngv-plugin-cesium-widget
           .cesiumContext=${this.config.app.cesiumContext}
-          .modelCallback=${this.modelCallback.bind(this)}
-          @viewerInitialized=${(evt: CustomEvent<CesiumWidget>) => {
-            this.viewer = evt.detail;
+          @viewerInitialized=${(evt: CustomEvent<ViewerInitializedDetails>) => {
+            this.viewer = evt.detail.viewer;
+            this.viewer.scene.primitives.add(this.uploadedModelsCollection);
+            this.dataSourceCollection = evt.detail.dataSourceCollection;
+            this.collections = evt.detail.primitiveCollections;
           }}
         ></ngv-plugin-cesium-widget>
       </ngv-structure-app>

src/catalogs/demoCatalog.ts

@@ -12,13 +12,19 @@ export const catalog: INGVCatalog = {
           credit: 'test',
         },
       },
+      position: [6.628484, 46.5],
+      height: 0,
+      rotation: 0,
     },
     sofa: {
       type: 'model',
       options: {
         url: 'https://raw.GithubUserContent.com/KhronosGroup/glTF-Sample-Assets/main/./Models/SheenWoodLeatherSofa/glTF-Binary/SheenWoodLeatherSofa.glb',
         credit: 'Khonos',
       },
+      position: [6.628484, 46.5],
+      height: 0,
+      rotation: 0,
     },
     // to complete
   },

src/interfaces/cesium/ingv-cesium-context.ts

@@ -1,4 +1,4 @@
-import type {CesiumWidget} from '@cesium/engine';
+import type {CesiumWidget, Globe} from '@cesium/engine';
 import type {INGVCatalog} from './ingv-catalog.js';
 
 export interface IngvCesiumContext {
@@ -32,4 +32,5 @@ export interface IngvCesiumContext {
     };
   };
   widgetOptions?: ConstructorParameters<typeof CesiumWidget>[1];
+  globeOptions?: Partial<Globe>;
 }

src/interfaces/cesium/ingv-layers.ts

@@ -6,6 +6,7 @@ import type {
 } from '@cesium/engine';
 
 import type {CesiumTerrainProvider, Model} from '@cesium/engine';
+import type {Cartesian3} from '@cesium/engine';
 
 export type INGVCesiumImageryTypes =
   | INGVCesiumWMSImagery
@@ -18,7 +19,7 @@ export type INGVCesiumAllTypes =
   | INGVCesiumImageryTypes;
 
 export type INGVCesiumAllPrimitiveTypes =
-  | INGVCesiumModel
+  | INGVCesiumModelConfig
   | INGVIFC
   | INGVCesium3DTiles;
 
@@ -29,17 +30,30 @@ export interface INGVCesium3DTiles {
   options?: ConstructorParameters<typeof Cesium3DTileset>[0];
 }
 
-export interface INGVCesiumModel {
+export interface INGVCesiumModelConfig {
   type: 'model';
   options?: Parameters<typeof Model.fromGltfAsync>[0];
+  position?: [number, number];
+  height?: number;
+  rotation?: number;
+}
+
+export interface INGVCesiumModel extends Model {
+  id: {
+    dimensions?: Cartesian3;
+    name: string;
+  };
 }
 
 export interface INGVIFC {
   type: 'ifc';
   url: string;
   options?: {
-    modelOptions: Omit<INGVCesiumModel['options'], 'url'>;
+    modelOptions: Omit<INGVCesiumModelConfig['options'], 'url'>;
   };
+  position: [number, number];
+  height: number;
+  rotation: number;
 }
 
 export interface INGVCesiumTerrain {