Feature/btn viewer framents

package.json

@@ -48,4 +48,4 @@
     "vite": "^8.1.4",
     "vite-plugin-environment": "^1.1.3"
   }
-}
+}

src/components/specific/models/models-table/columns.js

@@ -33,7 +33,7 @@ export default [
   {
     id: "lastupdate",
     text: "t.modifiedOn",
-    width: "160px",
+    width: "140px",
     align: "center",
   },
   {
@@ -45,6 +45,6 @@ export default [
   {
     id: "actions",
     label: " ",
-    width: "200px",
+    width: "220px",
   },
 ];

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

@@ -3,7 +3,43 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: calc(var(--spacing-unit) * 3 / 2);
+  gap: calc(var(--spacing-unit) / 2);
+
+  .actions-btn {
+    gap: var(--spacing-unit);
+  }
+
+  .separator {
+    width: 1px;
+    height: 30px;
+    background-color: var(--color-primary);
+    flex-shrink: 0;
+  }
+
+  .viewer-fragments {
+    position: relative;
+    &:deep(.bimdata-btn) {
+      display: flex;
+      flex-direction: column;
+      background-color: #fef6df;
+      & > span {
+        line-height: 1;
+      }
+    }
+    .beta-label {
+      font-size: 8px;
+    }
+    ::before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      background: var(--color-secondary);
+      clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+      position: absolute;
+      left: 4%;
+      top: 20%;
+    }
+  }
 
   &__btn {
     color: var(--color-granite-light);

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

@@ -1,94 +1,113 @@
 <template>
   <div class="model-actions-cell" v-click-away="closeMenu">
-    <template v-if="model.type === MODEL_TYPE.META_BUILDING">
-      <BIMDataButton color="primary" outline radius icon @click="onClick('view-metaBuilding')">
-        <BIMDataIconStructure size="s" />
-      </BIMDataButton>
-    </template>
+    <div v-if="isModelReady" class="actions-btn flex items-center">
+      <template v-if="model.type === MODEL_TYPE.META_BUILDING">
+        <BIMDataButton color="primary" outline radius icon @click="onClick('view-metaBuilding')">
+          <BIMDataIconStructure size="s" />
+        </BIMDataButton>
+      </template>
 
-    <template v-if="model.type === MODEL_TYPE.PHOTOSPHERE_BUILDING">
-      <BIMDataButton
-        color="primary"
-        outline
-        radius
-        icon
-        @click="onClick('view-photosphereBuilding')"
-      >
-        <BIMDataIconStructure size="s" />
-      </BIMDataButton>
-    </template>
+      <template v-if="model.type === MODEL_TYPE.PHOTOSPHERE_BUILDING">
+        <BIMDataButton
+          color="primary"
+          outline
+          radius
+          icon
+          @click="onClick('view-photosphereBuilding')"
+        >
+          <BIMDataIconStructure size="s" />
+        </BIMDataButton>
+      </template>
+
+      <template v-if="model.type === MODEL_TYPE.IFC">
+        <template v-for="window of [WINDOWS.IFC2D, WINDOWS.IFC3D]" :key="window">
+          <ViewerButton
+            :disabled="!isModelReady"
+            :project="project"
+            :model="model"
+            :window="window"
+          />
+        </template>
+      </template>
 
-    <template v-if="model.type === MODEL_TYPE.IFC">
-      <template v-for="window of [WINDOWS.IFC2D, WINDOWS.IFC3D]" :key="window">
+      <template v-else-if="model.type === MODEL_TYPE.DWG">
         <ViewerButton
           :disabled="!isModelReady"
           :project="project"
           :model="model"
-          :window="window"
+          :window="WINDOWS.DWG"
+          text="2D"
         />
       </template>
-    </template>
 
-    <template v-else-if="model.type === MODEL_TYPE.DWG">
-      <ViewerButton
-        :disabled="!isModelReady"
-        :project="project"
-        :model="model"
-        :window="WINDOWS.DWG"
-        text="2D"
-      />
-    </template>
+      <template v-else-if="model.type === MODEL_TYPE.DXF">
+        <ViewerButton
+          :disabled="!isModelReady"
+          :project="project"
+          :model="model"
+          :window="WINDOWS.DXF"
+          text="2D"
+        />
+      </template>
 
-    <template v-else-if="model.type === MODEL_TYPE.DXF">
-      <ViewerButton
-        :disabled="!isModelReady"
-        :project="project"
-        :model="model"
-        :window="WINDOWS.DXF"
-        text="2D"
-      />
-    </template>
+      <template
+        v-else-if="
+          model.type === MODEL_TYPE.JPEG ||
+          model.type === MODEL_TYPE.META_BUILDING ||
+          model.type === MODEL_TYPE.PDF ||
+          model.type === MODEL_TYPE.PNG
+        "
+      >
+        <ViewerButton
+          :disabled="!isModelReady"
+          :project="project"
+          :model="model"
+          :window="WINDOWS.PLAN"
+          text="2D"
+        />
+      </template>
 
-    <template
-      v-else-if="
-        model.type === MODEL_TYPE.JPEG ||
-        model.type === MODEL_TYPE.META_BUILDING ||
-        model.type === MODEL_TYPE.PDF ||
-        model.type === MODEL_TYPE.PNG
-      "
-    >
-      <ViewerButton
-        :disabled="!isModelReady"
-        :project="project"
-        :model="model"
-        :window="WINDOWS.PLAN"
-        text="2D"
-      />
-    </template>
+      <template v-else-if="model.type === MODEL_TYPE.POINT_CLOUD">
+        <ViewerButton
+          :disabled="!isModelReady"
+          :project="project"
+          :model="model"
+          :window="WINDOWS.POINT_CLOUD"
+          text="3D"
+        />
+      </template>
 
-    <template v-else-if="model.type === MODEL_TYPE.POINT_CLOUD">
-      <ViewerButton
-        :disabled="!isModelReady"
-        :project="project"
-        :model="model"
-        :window="WINDOWS.POINT_CLOUD"
-        text="3D"
-      />
-    </template>
+      <template
+        v-else-if="
+          model.type === MODEL_TYPE.PHOTOSPHERE || model.type === MODEL_TYPE.PHOTOSPHERE_BUILDING
+        "
+      >
+        <ViewerButton
+          :disabled="!isModelReady"
+          :project="project"
+          :model="model"
+          :window="WINDOWS.PHOTOSPHERE"
+          text="2D"
+        />
+      </template>
 
-    <template
-      v-else-if="
-        model.type === MODEL_TYPE.PHOTOSPHERE || model.type === MODEL_TYPE.PHOTOSPHERE_BUILDING
-      "
-    >
-      <ViewerButton
-        :disabled="!isModelReady"
-        :project="project"
-        :model="model"
-        :window="WINDOWS.PHOTOSPHERE"
-        text="2D"
-      />
-    </template>
+      <template v-if="model.type === MODEL_TYPE.IFC">
+        <div class="separator"></div>
+        <ViewerButton
+          :disabled="!isModelReady"
+          :project="project"
+          :model="model"
+          :window="WINDOWS.FRAGMENTS"
+          color="secondary"
+          text="3D"
+          class="viewer-fragments"
+        >
+          <template #subtext>
+            <span class="beta-label">Bêta</span>
+          </template>
+        </ViewerButton>
+      </template>
+    </div>
 
     <template v-if="model.document_id">
       <BIMDataButton
@@ -180,7 +199,9 @@ export default {
     const isOpen = ref(false);
     const isModelReady = computed(() => MODEL_STATUS.COMPLETED === props.model.status);
 
-    const modelDocument = computed(() => handler.get({ nature: FILE_TYPE.DOCUMENT, id: props.model.document_id }));
+    const modelDocument = computed(() =>
+      handler.get({ nature: FILE_TYPE.DOCUMENT, id: props.model.document_id }),
+    );
 
     const menuItems = ref([]);
     const openMenu = () => {

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

@@ -8,22 +8,18 @@
       params: {
         spaceID: project.cloud.id,
         projectID: project.id,
-        modelIDs: model.id
+        modelIDs: model.id,
       },
       query: {
-        window
-      }
+        window,
+      },
     }"
   >
-    <BIMDataButton
-      :disabled="disabled"
-      class="viewer-button"
-      color="granite"
-      outline
-      radius
-      icon
-    >
-      {{ text || window.toUpperCase() }}
+    <BIMDataButton :disabled="disabled" class="viewer-button" :color="color" outline radius icon>
+      <span>
+        {{ text || window.toUpperCase() }}
+      </span>
+      <slot name="subtext"> </slot>
     </BIMDataButton>
   </AppLink>
 </template>
@@ -37,23 +33,27 @@ import AppLink from "../../../app/app-link/AppLink.vue";
 defineProps({
   project: {
     type: Object,
-    required: true
+    required: true,
   },
   model: {
     type: Object,
-    required: true
+    required: true,
   },
   window: {
     type: String,
-    default: DEFAULT_WINDOW
+    default: DEFAULT_WINDOW,
   },
   disabled: {
     type: Boolean,
-    default: false
+    default: false,
   },
   text: {
-    type: String
-  }
+    type: String,
+  },
+  color: {
+    type: String,
+    default: "granite",
+  },
 });
 </script>
 

src/config/viewer.js

@@ -16,7 +16,8 @@ const WINDOWS = Object.freeze({
   IFC3D: "3d",
   PHOTOSPHERE: "photosphere",
   PLAN: "plan",
-  POINT_CLOUD: "pointCloud"
+  POINT_CLOUD: "pointCloud",
+  FRAGMENTS: "3d-fragments",
 });
 
 /**
@@ -32,9 +33,9 @@ const PLUGINS_CONFIG = {
   "anchor-synchronization": false,
   bcfManager: true,
   buildingMaker: true,
-  "drawing-tools" : true,
+  "drawing-tools": true,
   header: {
-    warnings: false
+    warnings: false,
   },
   pdfExport: false,
   properties: {
@@ -44,7 +45,7 @@ const PLUGINS_CONFIG = {
   split: true,
   structure: {
     export: true,
-    merge: true
+    merge: true,
   },
   "structure-properties": {
     editProperties: true,
@@ -56,8 +57,9 @@ const PLUGINS_CONFIG = {
   viewer3d: {
     enableDTX: true,
   },
+  "viewer3d-fragments": true,
   "zone-editor": true,
-  "zone-editor-button": true
+  "zone-editor-button": true,
 };
 
 export { AVAILABLE_PLUGINS, DEFAULT_WINDOW, PLUGINS_CONFIG, WINDOWS };