Feature: Photopshere Viewer

package.json

@@ -14,9 +14,9 @@
   },
   "dependencies": {
     "@bimdata/bcf-components": "6.4.7",
-    "@bimdata/components": "1.7.1",
-    "@bimdata/design-system": "2.2.1-beta.7",
-    "@bimdata/typescript-fetch-api-client": "10.17.2",
+    "@bimdata/components": "1.7.2",
+    "@bimdata/design-system": "2.2.1-beta.8",
+    "@bimdata/typescript-fetch-api-client": "10.18.0",
     "@bimdata/viewer": "2.7.0-beta.2",
     "@paddle/paddle-js": "^1.3.2",
     "async": "^3.2.6",

src/components/specific/files/all-files-table/AllFilesTable.vue

@@ -215,6 +215,7 @@
               :file="file"
               :loading="loadingFileIds.includes(file.id)"
               @create-model="$emit('create-model', file)"
+              @create-photosphere="$emit('create-photosphere', file)"
               @delete="$emit('delete', file)"
               @download="$emit('download', file)"
               @file-clicked="$emit('file-clicked', file)"
@@ -283,6 +284,7 @@ export default {
   },
   emits: [
     "create-model",
+    "create-photosphere",
     "delete",
     "download",
     "file-clicked",

src/components/specific/files/files-manager/FilesManager.vue

@@ -76,6 +76,7 @@
             :foldersToUpload="foldersToUpload"
             @back-parent-folder="backToParent"
             @create-model="createModelFromFile"
+            @create-photosphere="createModelFromFile($event, MODEL_TYPE.PHOTOSPHERE)"
             @delete="openFileDeleteModal([$event])"
             @download="downloadFiles([$event])"
             @dragover.prevent="() => {}"
@@ -100,6 +101,7 @@
             :loadingFileIds="loadingFileIds"
             :files="displayedFiles"
             @create-model="createModelFromFile"
+            @create-photosphere="createModelFromFile($event, MODEL_TYPE.PHOTOSPHERE)"
             @delete="openFileDeleteModal([$event])"
             @download="downloadFiles([$event])"
             @file-clicked="onFileSelected"
@@ -191,6 +193,7 @@ import { useAppSidePanel } from "../../app/app-side-panel/app-side-panel.js";
 import { useSession } from "../../../../composables/session.js";
 import { useListFilter } from "../../../../composables/list-filter.js";
 import { useStandardBreakpoints } from "../../../../composables/responsive.js";
+import { MODEL_TYPE } from "../../../../config/models.js";
 import { VISA_STATUS } from "../../../../config/visa.js";
 import FileService from "../../../../services/FileService.js";
 import TagService from "../../../../services/TagService";
@@ -271,7 +274,7 @@ export default {
       moveFiles: move,
       downloadFiles: download,
     } = useFiles();
-    const { createModel, deleteModels } = useModels();
+    const { createModel, createPhotosphere, deleteModels } = useModels();
 
     const { fetchToValidateVisas, fetchCreatedVisas } = useVisa();
 
@@ -391,10 +394,15 @@ export default {
 
     const loadingFileIds = ref([]);
 
-    const createModelFromFile = async (file) => {
+    const createModelFromFile = async (file, type) => {
       try {
         loadingFileIds.value.push(file.id);
-        const model = await createModel(props.project, file);
+        let model;
+        if (type === MODEL_TYPE.PHOTOSPHERE) {
+          model = await createPhotosphere(props.project, file);
+        } else {
+          model = await createModel(props.project, file);
+        }
         emit("model-created", model);
         pushNotification({
           type: "success",
@@ -750,6 +758,7 @@ export default {
       folderToManage,
       importFromOtherProjectsActions,
       loadingFileIds,
+      MODEL_TYPE,
       searchText,
       selectedFileTab,
       selection,

src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue

@@ -47,6 +47,7 @@ import { useUser } from "../../../../../state/user.js";
 import { isFolder } from "../../../../../utils/file-structure.js";
 import {
   isConvertible,
+  isConvertibleToPhotosphere,
   isModel,
   isViewable,
   openInViewer
@@ -76,6 +77,7 @@ export default {
   },
   emits: [
     "create-model",
+    "create-photosphere",
     "delete",
     "download",
     "file-clicked",
@@ -139,6 +141,16 @@ export default {
         }
       }
 
+      if (!isFolder(props.file) && isConvertibleToPhotosphere(props.file) && !isModel(props.file)) {
+        menuItems.value.push({
+          key: 3,
+          iconComponent: SetAsModelIcon,
+          text: "FileActionsCell.createPhotosphereButtonText",
+          disabled: !hasAdminPerm(props.project, props.file),
+          action: () => onClick("create-photosphere")
+        });
+      }
+
       menuItems.value.push({
         key: 5,
         icon: "edit",

src/components/specific/files/folder-table/FoldersTable.vue

@@ -91,6 +91,7 @@
         :file="file"
         :loading="loadingFileIds.includes(file.id)"
         @create-model="$emit('create-model', file)"
+        @create-photosphere="$emit('create-photosphere', file)"
         @delete="$emit('delete', file)"
         @download="$emit('download', file)"
         @file-clicked="$emit('file-clicked', file)"
@@ -165,6 +166,7 @@ export default {
   emits: [
     "back-parent-folder",
     "create-model",
+    "create-photosphere",
     "delete",
     "download",
     "file-clicked",

src/components/specific/files/folder-table/columns.js

@@ -1,6 +1,8 @@
-import { fileExtension } from "../../../../utils/files.js";
 import i18n from "../../../../i18n/index.js";
+import { fileExtension } from "../../../../utils/files.js";
+
 const { t } = i18n.global;
+
 export default [
   {
     id: "type",

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

@@ -84,9 +84,10 @@ import { segregateByType } from "../../../../utils/models.js";
 import DWGManager from "./dwg-manager/DWGManager.vue";
 import IFCManager from "./ifc-manager/IFCManager.vue";
 import PDFManager from "./pdf-manager/PDFManager.vue";
+import PhotosphereManager from "./photosphere-manager/PhotosphereManager.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, PHOTOSPHERE_BUILDING, PNG, POINT_CLOUD } =
   MODEL_TYPE;
 
 const tabsDef = [
@@ -129,11 +130,18 @@ const tabsDef = [
     beta: true
   },
   {
-    id: "photos",
-    text: "Photos",
+    id: "images",
+    text: "Images",
     icon: "fileImagePolychrome",
     modelTypes: [JPEG, PNG],
     component: "DWGManager"
+  },
+  {
+    id: "photosphere",
+    text: "Photosphere",
+    icon: "filePhotospherePolychrome",
+    modelTypes: [PHOTOSPHERE, PHOTOSPHERE_BUILDING],
+    component: "PhotosphereManager"
   }
 ];
 
@@ -142,6 +150,7 @@ export default {
     DWGManager,
     IFCManager,
     PDFManager,
+    PhotosphereManager,
     PointCloudManager
   },
   props: {

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

@@ -66,6 +66,8 @@
       @download="downloadModels([$event])"
       @view-metaBuilding="$emit('view-metaBuilding', $event)"
       @edit-metaBuilding="$emit('edit-metaBuilding', $event)"
+      @view-photosphereBuilding="$emit('view-photosphereBuilding', $event)"
+      @edit-photosphereBuilding="$emit('edit-photosphereBuilding', $event)"
     >
       <template #placeholder>
         <slot name="tablePlaceholder"></slot>
@@ -125,9 +127,11 @@ export default {
   },
   emits: [
     "edit-metaBuilding",
+    "edit-photosphereBuilding",
     "file-uploaded",
     "tab-changed",
-    "view-metaBuilding"
+    "view-metaBuilding",
+    "view-photosphereBuilding",
   ],
   setup(props, { emit }) {
     const router = useRouter();

src/components/specific/models/models-manager/pdf-manager/PDFManager.vue

@@ -135,14 +135,14 @@ export default {
         const modelsBySource = segregateBySource(
           models.filter(model => model.type !== MODEL_TYPE.META_BUILDING)
         );
-        const metaBuildings = models.filter(
+        const buildings = models.filter(
           model => model.type === MODEL_TYPE.META_BUILDING
         );
         tabs.value = tabs.value.map(tab => ({
           ...tab,
           label: tab.label || tab.id,
           models:
-            tab.id === "metaBuildings" ? metaBuildings : modelsBySource[tab.id]
+            tab.id === "metaBuildings" ? buildings : modelsBySource[tab.id]
         }));
       },
       { immediate: true }

src/components/specific/models/models-manager/photosphere-manager/PhotosphereBuildingMakerPanel.vue

@@ -0,0 +1,70 @@
+<script setup>
+import apiClient from "../../../../../services/api-client.js";
+import { useModels } from "../../../../../state/models.js";
+
+const { loadProjectModels } = useModels();
+
+defineProps({
+  space: {
+    type: Object,
+    required: true
+  },
+  project: {
+    type: Object,
+    required: true
+  },
+  model: {
+    type: Object,
+    default: null
+  },
+});
+
+defineEmits(["close"]);
+</script>
+
+<template>
+  <div class="photosphere-building-maker-panel">
+    <BIMDataButton
+      class="close"
+      ghost
+      rounded
+      icon
+      @click="$emit('close')"
+    >
+      <BIMDataIconClose size="xxs" fill color="granite-light" />
+    </BIMDataButton>
+    <div class="content">
+      <BIMDataPhotosphereBuildingMaker
+        :apiClient="apiClient"
+        :space="space"
+        :project="project"
+        :model="model"
+        @metaBuilding-created="loadProjectModels(project)"
+        @metaBuilding-updated="loadProjectModels(project)"
+        @metaBuilding-deleted="loadProjectModels(project)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.photosphere-building-maker-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-manager/photosphere-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>