feat(models): add point-cloud tab to models manager (#304)

* feat(models): add point-cloud tab to models manager

* fix(config): enable 'tileset-viewer-parameters' viewer plugin

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

@@ -71,7 +71,6 @@
       right: 0;
       display: flex;
       flex-direction: column;
-      width: 100px;
       padding: calc(var(--spacing-unit) / 2) 0;
       box-shadow: var(--box-shadow);
       background-color: var(--color-white);
@@ -81,7 +80,8 @@
       display: flex;
       align-items: center;
       gap: var(--spacing-unit);
-      padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
+      padding: calc(var(--spacing-unit) / 3) var(--spacing-unit);
+      white-space: nowrap;
 
       &.disabled > span {
         opacity: 0.6;

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

@@ -78,6 +78,7 @@ 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 PointCloudManager from "./point-cloud-manager/PointCloudManager.vue";
 
 const tabsDef = [
   {
@@ -109,14 +110,22 @@ const tabsDef = [
     icon: "filePdfPolychrome",
     modelTypes: [MODEL_TYPE.PDF, MODEL_TYPE.META_BUILDING],
     component: "PDFManager"
+  },
+  {
+    id: "point-cloud",
+    label: "Point Cloud",
+    icon: "filePdfPolychrome",
+    modelTypes: [MODEL_TYPE.POINT_CLOUD],
+    component: "PointCloudManager"
   }
 ];
 
 export default {
   components: {
     DWGManager,
     IFCManager,
-    PDFManager
+    PDFManager,
+    PointCloudManager
   },
   props: {
     project: {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="model-actions-cell" v-click-away="closeMenu">
     <template v-if="model.type === MODEL_TYPE.IFC">
-      <template v-for="window of [WINDOWS.V2D, WINDOWS.V3D]" :key="window">
+      <template v-for="window of [WINDOWS.IFC2D, WINDOWS.IFC3D]" :key="window">
         <ViewerButton
           :disabled="!isModelReady"
           :project="project"
@@ -45,6 +45,16 @@
       />
     </template>
 
+    <template v-else-if="model.type === MODEL_TYPE.POINT_CLOUD">
+      <ViewerButton
+        :disabled="!isModelReady"
+        :project="project"
+        :model="model"
+        :window="WINDOWS.TILESET"
+        text="3D"
+      />
+    </template>
+
     <template v-if="model.document">
       <BIMDataButton
         class="model-actions-cell__btn"

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

@@ -1,5 +1,6 @@
 <template>
   <GenericModelsManager
+    class="pdf-manager"
     :project="project"
     :tabs="tabs"
     @edit-metaBuilding="editBM"

src/components/specific/models/models-manager/point-cloud-manager/PointCloudManager.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { ref, watch } from "vue";
+import { segregateBySource } from "../../../../../utils/models.js";
+// Components
+import GenericModelsManager from "../generic-models-manager/GenericModelsManager.vue";
+
+const props = defineProps({
+  project: {
+    type: Object,
+    required: true
+  },
+  models: {
+    type: Array,
+    required: true
+  }
+});
+
+const tabsDef = [{ id: "upload" }, { id: "archive" }];
+const tabs = ref([]);
+
+watch(
+  () => props.models,
+  models => {
+    const modelsBySource = segregateBySource(models);
+    tabs.value = tabsDef.map(tab => ({
+      ...tab,
+      label: tab.label || tab.id,
+      models: modelsBySource[tab.id]
+    }));
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <GenericModelsManager :project="project" :tabs="tabs" />
+</template>

src/config/models.js

@@ -13,7 +13,8 @@ const MODEL_TYPE = Object.freeze({
   META_BUILDING: "METABUILDING",
   OBJ: "OBJ",
   PDF: "PDF",
-  PNG: "PNG"
+  PNG: "PNG",
+  POINT_CLOUD: "POINT_CLOUD"
 });
 
 /**

src/config/viewer.js

@@ -1,6 +1,7 @@
 import { MODEL_TYPE } from "./models.js";
 
-const { DWG, DXF, IFC, JPEG, JPG, META_BUILDING, PDF, PNG } = MODEL_TYPE;
+const { DWG, DXF, IFC, JPEG, JPG, META_BUILDING, PDF, PNG, POINT_CLOUD } =
+  MODEL_TYPE;
 
 const AVAILABLE_PLUGINS = Object.freeze({
   backgroundColor:
@@ -14,33 +15,49 @@ const AVAILABLE_PLUGINS = Object.freeze({
   svgExtractor: "https://unpkg.com/@bimdata/svg-extractor-viewer-plugin@1.0.2"
 });
 
+/**
+ * List of available viewer windows.
+ */
 const WINDOWS = Object.freeze({
   DWG: "dwg",
   DXF: "dxf",
+  IFC2D: "2d",
+  IFC3D: "3d",
   PLAN: "plan",
-  V2D: "2d",
-  V3D: "3d"
+  TILESET: "tileset"
 });
 
 /**
- * Define the type of models that can opened
- * in each viewer window
+ * Define the type of models that can be opened
+ * in each viewer window.
  */
 const WINDOW_MODELS = Object.freeze({
   [WINDOWS.DWG]: [DWG],
   [WINDOWS.DXF]: [DXF],
+  [WINDOWS.IFC2D]: [IFC],
+  [WINDOWS.IFC3D]: [IFC],
   [WINDOWS.PLAN]: [JPEG, JPG, META_BUILDING, PDF, PNG],
-  [WINDOWS.V2D]: [IFC],
-  [WINDOWS.V3D]: [IFC]
+  [WINDOWS.TILESET]: [POINT_CLOUD]
 });
 
-const DEFAULT_WINDOW = WINDOWS.V3D;
+/**
+ * Viewer window that will be opened by default
+ * if none is specified.
+ */
+const DEFAULT_WINDOW = WINDOWS.IFC3D;
 
 const PLUGINS_CONFIG = {
+  accessMarketplace: true,
+  bcfManager: true,
+  buildingMaker: true,
   header: {
     warnings: false
   },
   measure3d: true,
+  plan: true,
+  properties: {
+    editProperties: true
+  },
   split: true,
   "structure-properties": {
     merge: true,
@@ -51,17 +68,12 @@ const PLUGINS_CONFIG = {
     merge: true,
     export: true
   },
-  properties: {
-    editProperties: true
-  },
+  tileset: true,
+  "tileset-viewer-parameters": true,
   "viewer2d-background": true,
-  plan: true,
-  buildingMaker: true,
   viewer3d: {
     enableDynamicLOD: true
-  },
-  bcfManager: true,
-  accessMarketplace: true
+  }
 };
 
 export {

src/utils/models.js

@@ -83,7 +83,7 @@ function windowType(file) {
   const { model_type } = file;
   const { IFC, DWG } = MODEL_TYPE;
 
-  if (model_type === IFC) return WINDOWS.V3D;
+  if (model_type === IFC) return WINDOWS.IFC3D;
   if (model_type === DWG) return WINDOWS.DWG;
 
   return WINDOWS.PLAN;