feat(models): add support for photosphere models (wip)

src/components/specific/models/models-manager/ModelsManager.vue

@@ -86,7 +86,7 @@ import IFCManager from "./ifc-manager/IFCManager.vue";
 import PDFManager from "./pdf-manager/PDFManager.vue";
 import PointCloudManager from "./point-cloud-manager/PointCloudManager.vue";
 
-const { DWG, DXF, IFC, JPEG, META_BUILDING, PDF, PNG, POINT_CLOUD } =
+const { DWG, DXF, IFC, JPEG, META_BUILDING, PDF, PHOTOSPHERE, PNG, POINT_CLOUD } =
   MODEL_TYPE;
 
 const tabsDef = [
@@ -132,7 +132,7 @@ const tabsDef = [
     id: "photos",
     text: "Photos",
     icon: "fileImagePolychrome",
-    modelTypes: [JPEG, PNG],
+    modelTypes: [JPEG, PHOTOSPHERE, PNG],
     component: "DWGManager"
   }
 ];

src/components/specific/models/models-manager/generic-models-manager/GenericModelsManager.vue

@@ -64,6 +64,7 @@
       @download="downloadModels([$event])"
       @view-metaBuilding="$emit('view-metaBuilding', $event)"
       @edit-metaBuilding="$emit('edit-metaBuilding', $event)"
+      @view-photosphereBuilding="$emit('view-photosphereBuilding', $event)"
     >
       <template #placeholder>
         <slot name="tablePlaceholder"></slot>
@@ -122,7 +123,8 @@ export default {
     "edit-metaBuilding",
     "file-uploaded",
     "tab-changed",
-    "view-metaBuilding"
+    "view-metaBuilding",
+    "view-photosphereBuilding",
   ],
   setup(props, { emit }) {
     const { createModel, updateModels } = useModels();

src/components/specific/models/models-manager/image-manager/ImageManager.vue

@@ -0,0 +1,79 @@
+<template>
+  <GenericModelsManager
+    :project="project"
+    :types="types"
+    :tabs="tabs"
+    @file-uploaded="$emit('file-uploaded')"
+    @view-photosphereBuilding="viewPhotosphereBuilding"
+  />
+</template>
+
+<script>
+import { ref, watch } from "vue";
+import { useAppSidePanel } from "../../../app/app-side-panel/app-side-panel.js";
+import { segregateBySource } from "../../../../../utils/models.js";
+// Components
+import GenericModelsManager from "../generic-models-manager/GenericModelsManager.vue";
+import PhotosphereBuildingPanel from "./PhotosphereBuildingPanel.vue";
+
+const tabsDef = [{ id: "upload" }, { id: "archive" }];
+
+export default {
+  components: {
+    GenericModelsManager
+  },
+  props: {
+    project: {
+      type: Object,
+      required: true
+    },
+    models: {
+      type: Array,
+      required: true
+    },
+    types: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["file-uploaded"],
+  setup(props) {
+    const { openSidePanel, closeSidePanel } = useAppSidePanel();
+
+    const tabs = ref(tabsDef);
+
+    const viewPhotosphereBuilding = model => {
+      openSidePanel("right", {
+        component: {
+          render() {
+            return h(PhotosphereBuildingPanel, {
+              onClose: closeSidePanel,
+              space: props.project.cloud,
+              project: props.project,
+              model,
+            })
+          }
+        }
+      });
+    };
+
+    watch(
+      () => props.models,
+      models => {
+        const modelsBySource = segregateBySource(models);
+        tabs.value = tabs.value.map(tab => ({
+          ...tab,
+          label: tab.label || tab.id,
+          models: modelsBySource[tab.id]
+        }));
+      },
+      { immediate: true }
+    );
+
+    return {
+      tabs,
+      viewPhotosphereBuilding
+    };
+  }
+};
+</script>

src/components/specific/models/models-manager/image-manager/PhotosphereBuildingPanel.vue

@@ -0,0 +1,65 @@
+<script setup>
+import apiClient from "../../../../../services/api-client.js";
+
+defineProps({
+  space: {
+    type: Object,
+    required: true
+  },
+  project: {
+    type: Object,
+    required: true
+  },
+  model: {
+    type: Object,
+    required: true
+  },
+});
+
+defineEmits(["close"]);
+</script>
+
+<template>
+  <div class="photosphere-building-panel">
+    <BIMDataButton
+      class="close"
+      ghost
+      rounded
+      icon
+      @click="$emit('close')"
+    >
+      <BIMDataIconClose size="xxs" fill color="granite-light" />
+    </BIMDataButton>
+    <div class="content">
+      <BIMDataPhotosphereBuilding
+        :apiClient="apiClient"
+        :space="space"
+        :project="project"
+        :model="model"
+        :selectable="false"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.photosphere-building-panel {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  .close {
+    position: absolute;
+    z-index: 1;
+    top: calc(var(--spacing-unit) / 2);
+    right: var(--spacing-unit);
+  }
+
+  .content {
+    height: 100%;
+  }
+}
+</style>

src/components/specific/models/models-table/ModelsTable.vue

@@ -59,6 +59,7 @@
         @update="nameEditMode[model.id] = true"
         @view-metaBuilding="$emit('view-metaBuilding', $event)"
         @edit-metaBuilding="$emit('edit-metaBuilding', $event)"
+        @view-photosphereBuilding="$emit('view-photosphereBuilding', $event)"
       />
     </template>
 
@@ -113,6 +114,7 @@ export default {
     "upload-canceled",
     "upload-failed",
     "view-metaBuilding",
+    "view-photosphereBuilding",
   ],
   setup(props) {
     const { t } = useI18n();

src/components/specific/models/models-table/model-actions-cell/ModelActionsCell.vue

@@ -8,8 +8,20 @@
         icon
         @click="onClick('view-metaBuilding')"
       >
-      <BIMDataIconStructure size="s" />
-    </BIMDataButton>
+        <BIMDataIconStructure size="s" />
+      </BIMDataButton>
+    </template>
+
+    <template v-if="model.type === MODEL_TYPE.PHOTOSPHERE">
+      <BIMDataButton
+        color="primary"
+        outline
+        radius
+        icon
+        @click="onClick('view-photosphereBuilding')"
+      >
+        <BIMDataIconStructure size="s" />
+      </BIMDataButton>
     </template>
 
     <template v-if="model.type === MODEL_TYPE.IFC">
@@ -45,9 +57,9 @@
 
     <template
       v-else-if="
-        model.type === MODEL_TYPE.PDF ||
-        model.type === MODEL_TYPE.META_BUILDING ||
         model.type === MODEL_TYPE.JPEG ||
+        model.type === MODEL_TYPE.META_BUILDING ||
+        model.type === MODEL_TYPE.PDF ||
         model.type === MODEL_TYPE.PNG
       "
     >
@@ -70,6 +82,16 @@
       />
     </template>
 
+    <template v-else-if="model.type === MODEL_TYPE.PHOTOSPHERE">
+      <ViewerButton
+        :disabled="!isModelReady"
+        :project="project"
+        :model="model"
+        :window="WINDOWS.PHOTOSPHERE"
+        text="2D"
+      />
+    </template>
+
     <template v-if="model.document">
       <BIMDataButton
         class="model-actions-cell__btn"
@@ -142,7 +164,8 @@ export default {
     "download",
     "edit-metaBuilding",
     "update",
-    "view-metaBuilding"
+    "view-metaBuilding",
+    "view-photosphereBuilding",
   ],
   setup(props, { emit }) {
     const {

src/config/models.js

@@ -16,6 +16,7 @@ const MODEL_TYPE = Object.freeze({
   META_BUILDING: "METABUILDING",
   OBJ: "OBJ",
   PDF: "PDF",
+  PHOTOSPHERE: "PHOTOSPHERE",
   PNG: "PNG",
   POINT_CLOUD: "POINT_CLOUD",
 });
@@ -115,6 +116,11 @@ const MODEL_CONFIG = Object.freeze({
     window: WINDOWS.PLAN,
     icon: "filePdfPolychrome",
   },
+  [MODEL_TYPE.PHOTOSPHERE]: {
+    ext: [MODEL_EXTENSIONS.JPEG, MODEL_EXTENSIONS.JPG],
+    window: WINDOWS.PHOTOSPHERE,
+    icon: "fileImagePolychrome",
+  },
   [MODEL_TYPE.PNG]: {
     ext: [MODEL_EXTENSIONS.PNG],
     window: WINDOWS.PLAN,

src/config/viewer.js

@@ -14,6 +14,7 @@ const WINDOWS = Object.freeze({
   DXF: "dxf",
   IFC2D: "2d",
   IFC3D: "3d",
+  PHOTOSPHERE: "photosphere",
   PLAN: "plan",
   POINT_CLOUD: "pointCloud"
 });