Rework Catalog model loading

src/index.js

@@ -6,7 +6,7 @@ import BIMOptions, { bimOptionsId } from './upload.vue';
 import objectList, { objectListId } from './objectList.vue';
 import scaleControl, { scaleControlId } from './scaleControl.vue';
 import * as Cesium from "@vcmap-cesium/engine";
-
+import {loadCatalogModel} from "./objectList.vue";
 
 let model;
 let conditions = [[true, true]];
@@ -56,6 +56,7 @@ function setScale(scaleValue) {
   const position = currentlyScaledModel.position.getValue();
   const orientation = currentlyScaledModel.orientation;
   const uri = currentlyScaledModel.model.uri;
+  const fromCatalog = currentlyScaledModel.fromCatalog;
 
   vcMap.getEntities().remove(currentlyScaledModel);
   removePlacedModel(currentlyScaledModel);
@@ -70,6 +71,7 @@ function setScale(scaleValue) {
       scale: scaleValue,
       show: true,
     },
+    fromCatalog: fromCatalog,
   });
   placedModels.push({
     model: newModel,
@@ -102,6 +104,7 @@ function saveObjects() {
       position: [wgs84X, wgs84Y, height],
       heading: heading,
       scale: m.model.model.scale.getValue(),
+      fromCatalog:  m.fromCatalog,
     });
   }
   outputObject.placedObjects = outputArray;
@@ -127,7 +130,7 @@ function saveFile(fileName, urlFile){
 }
 
 
-function setupModel(vcsApp, windowPos, url, name) {
+function setupModel(vcsApp, windowPos, url, name, fromCatalog) {
   const vcMap = vcsApp.maps.activeMap;
   const scene = vcMap.getScene();
   const ray = scene.camera.getPickRay(windowPos);
@@ -141,6 +144,7 @@ function setupModel(vcsApp, windowPos, url, name) {
       show: true,
       scale: 1,
     },
+    fromCatalog: fromCatalog,
   });
   placedModels.push({
     model: model,
@@ -351,12 +355,27 @@ export default function smartVillagesPlugin(config, baseUrl) {
               }
             }
             if (objectUrl === undefined) {
-              app.notifier.add({
-                type: NotificationType.ERROR,
-                message: "Objekt mit dem namen: " + loadingObject.name + " konnte nicht in den geladenen Objekten gefunden werden. Konfiguration konnte nicht vollständig geladen werden.",
-              });
-              // abort
-              return;
+              console.log("From Catalog:" + loadingObject.fromCatalog);
+              if (loadingObject.fromCatalog === true){
+                // TODO: Fetch from catalog
+                objectUrl = loadingObject.uri;
+                // Load the model into memory
+                loadCatalogModel(objectUrl).catch(e => {
+                  console.error(e);
+                  app.notifier.add({
+                    type: NotificationType.ERROR,
+                    message: "Katalogobject: " + loadingObject.name + " konnte nicht geladenen werden. Konfiguration konnte nicht vollständig geladen werden.",
+                  });
+                });
+                return;
+              }else {
+                app.notifier.add({
+                  type: NotificationType.ERROR,
+                  message: "Objekt mit dem namen: " + loadingObject.name + " konnte nicht in den geladenen Objekten gefunden werden. Konfiguration konnte nicht vollständig geladen werden.",
+                });
+                // abort
+                return;
+              }
             }
             const cartPos = Cartesian3.fromDegrees(loadingObject.position[0], loadingObject.position[1], loadingObject.position[2]);
             // Add the model to the viewer
@@ -368,6 +387,7 @@ export default function smartVillagesPlugin(config, baseUrl) {
                 scale: loadingObject.scale,
                 show: true,
               },
+              fromCatalog: loadingObject.fromCatalog,
             });
             const roll = new HeadingPitchRoll();
             hpRollMap.set(model, roll);

src/objectList.vue

@@ -7,7 +7,7 @@
       </template>
       <template #default>
         <v-expansion-panels multiple>
-          <VcsExpansionPanel v-for = "(subcats, categoryName) in objLib" :key="categoryName" :heading="categoryName" value="opened">
+          <VcsExpansionPanel v-for = "(subcats, categoryName) in objLib" :key="categoryName" :heading="categoryName">
             <v-container v-for="(entries, subCategory) in subcats" :key = "subCategory" class=" py-1 px-1 border-b-md">
               <v-col>
               <VcsLabel class="mb-4 text-h2">{{subCategory}}</VcsLabel>
@@ -210,71 +210,74 @@ function getCatalogueEntries(json, linkPrefix) {
   }
 
 async function retrieveCatalogModel(modelLink){
-  if(preloadedModels.value[modelLink] != null){
-    const catModel = preloadedModels.value[modelLink];
+  loadCatalogModel(modelLink).then(model => {
+    const catModel = model;
     const x = window.innerWidth / 2;
     const y = window.innerHeight / 2;
     const cart = new Cartesian2(x, y);
-    setupModelFunction(app, cart, catModel.url, catModel.modelLink);
-  } else {
-    const loader = new GLTFLoader();
-    loader.load(
-        modelLink,
-        function (gltf) {
-          const bounds = new THREE.Box3().setFromObject(gltf.scene);
-          const x = bounds.min.x + (bounds.max.x - bounds.min.x) / 2;
-          const z = bounds.min.z + (bounds.max.z - bounds.min.z) / 2;
-          const m = new THREE.Matrix4().makeTranslation(-x, -bounds.min.y, -z);
-          gltf.scene.applyMatrix4(m);
-
-          const exporter = new GLTFExporter();
-          const options = {
-            binary: true,
-            animations: gltf.animations,
-          };
+    setupModelFunction(app, cart, catModel.url, catModel.modelLink, true);
+  }).catch(error => {
+    console.error(error);
+    app.notifier.add({
+      type: NotificationType.ERROR,
+      message:
+          'Ein Fehler ist beim Laden des Katalogobjektes aufgetreten.',
+      timeout: 20000,
+    });
+  });
+}
 
-          exporter.parse(
-              gltf.scene,
-              function (output) {
-                const blob = new Blob([output], { type: 'application/octet-stream' });
-                const url = URL.createObjectURL(blob);
-
-                projectStateObject.objects.push({
-                  name: modelLink,
-                  url: url,
-                });
-                const x = window.innerWidth / 2;
-                const y = window.innerHeight / 2;
-                const cart = new Cartesian2(x, y);
-                setupModelFunction(app, cart, url, modelLink);
-                preloadedModels.value[modelLink] = {
-                  url: url,
-                  modelLink: modelLink,
-                };
-              },
-              function (error) {
-                app.notifier.add({
-                  type: NotificationType.ERROR,
-                  message:
-                      'Ein Fehler ist beim Laden der glTF Datei aufgetreten. Bitte vergewissern Sie sich, dass es sich um eine gültige glTF2.0 Datei handelt.',
-                  timeout: 20000,
-                });
-              },
-              options
-          );
-        },
-        undefined,
-        function (error) {
-          app.notifier.add({
-            type: NotificationType.ERROR,
-            message:
-                'Ein Fehler ist beim Laden der glTF Datei aufgetreten. Bitte vergewissern Sie sich, dass es sich um eine gültige glTF2.0 Datei handelt.' +
-                ' Fehlermeldung: ' + error.message,
-            timeout: 20000,
-          });
-        }
-    );
-  }
+export async function loadCatalogModel(modelLink){
+  return new Promise( (resolve, reject) => {
+    if(preloadedModels.value[modelLink] != null){
+      resolve(preloadedModels.value[modelLink]);
+    } else{
+      //Todo: parse model from catalog
+      const loader = new GLTFLoader();
+      loader.load(
+          modelLink,
+          function (gltf) {
+            const bounds = new THREE.Box3().setFromObject(gltf.scene);
+            const x = bounds.min.x + (bounds.max.x - bounds.min.x) / 2;
+            const z = bounds.min.z + (bounds.max.z - bounds.min.z) / 2;
+            const m = new THREE.Matrix4().makeTranslation(-x, -bounds.min.y, -z);
+            gltf.scene.applyMatrix4(m);
+
+            const exporter = new GLTFExporter();
+            const options = {
+              binary: true,
+              animations: gltf.animations,
+            };
+
+            exporter.parse(
+                gltf.scene,
+                function (output) {
+                  const blob = new Blob([output], { type: 'application/octet-stream' });
+                  const url = URL.createObjectURL(blob);
+
+                  projectStateObject.objects.push({
+                    name: modelLink,
+                    url: url,
+                  });
+                  preloadedModels.value[modelLink] = {
+                    url: url,
+                    modelLink: modelLink,
+                  };
+                  resolve(preloadedModels.value[modelLink]);
+                },
+                function (error) {
+                  reject(error);
+                },
+                options
+            );
+          },
+          undefined,
+          function (error) {
+            reject(error);
+          }
+      );
+    }
+  })
 }
 
 function uploadModel() {
@@ -336,7 +339,7 @@ function uploadModel() {
                   const x = window.innerWidth / 2;
                   const y = window.innerHeight / 2;
                   const cart = new Cartesian2(x, y);
-                  setupModelFunction(app, cart, url, name);
+                  setupModelFunction(app, cart, url, name, false);
                 },
               }
             ]