@geode/opengeodeweb-front 10.29.0-rc.1 → 10.29.0-rc.3

package/app/components/Viewer/ContextMenu/InfoCard.vue

@@ -23,28 +23,24 @@ const menuStore = useMenuStore();
 const dataStore = useDataStore();
 
 const componentName = ref("");
+const componentItem = ref(undefined);
 
 watch(
   () => menuStore.current_meta_data,
   async (newMeta) => {
     componentName.value = "";
+    componentItem.value = undefined;
     if (!newMeta) {
       return;
     }
 
-    if (newMeta.viewer_type === "model_component" && newMeta.modelId && newMeta.pickedComponentId) {
-      try {
-        const comp = await dataStore.getComponentByViewerId(
-          newMeta.modelId,
-          newMeta.pickedComponentId,
-        );
-        if (comp && comp.name) {
-          componentName.value = comp.name;
-        } else {
-          componentName.value = newMeta.pickedComponentId;
-        }
-      } catch {
-        componentName.value = newMeta.pickedComponentId;
+    const modelId = newMeta.modelId || newMeta.id;
+    if (newMeta.pickedComponentId && modelId) {
+      const components = await dataStore.getAllMeshComponents(modelId);
+      const comp = components.find((component) => component.id === newMeta.pickedComponentId);
+      if (comp) {
+        componentName.value = comp.title;
+        componentItem.value = comp;
       }
     }
   },
@@ -56,7 +52,7 @@ const cleanName = computed(() => {
   if (!meta) {
     return "Unnamed Object";
   }
-  if (componentName.value) {
+  if (componentName.value && meta.viewer_type === "model_component") {
     return componentName.value;
   }
   return meta.name || "Unnamed Object";
@@ -70,6 +66,18 @@ const displayTitle = computed(() => {
   return middleTruncate(name, TRUNCATE_MAX_LENGTH, TRUNCATE_START_CHARS, TRUNCATE_END_CHARS);
 });
 
+const displayComponentTitle = computed(() => {
+  if (!componentItem.value) {
+    return "";
+  }
+  return middleTruncate(
+    componentItem.value.title,
+    TRUNCATE_MAX_LENGTH,
+    TRUNCATE_START_CHARS,
+    TRUNCATE_END_CHARS,
+  );
+});
+
 const copied = ref(false);
 async function copyId(targetId) {
   if (!targetId) {
@@ -86,16 +94,17 @@ async function copyId(targetId) {
   }
 }
 
-const formattedId = computed(() => {
-  const metaId = metaData?.id;
-  if (!metaId) {
+function formatId(id) {
+  if (!id) {
     return "";
   }
-  if (metaId.length <= MAX_SHORT_ID_LENGTH) {
-    return metaId;
+  if (id.length <= MAX_SHORT_ID_LENGTH) {
+    return id;
   }
-  return `${metaId.slice(0, ID_SLICE_START)}...${metaId.slice(metaId.length - ID_SLICE_END_OFFSET)}`;
-});
+  return `${id.slice(0, ID_SLICE_START)}...${id.slice(id.length - ID_SLICE_END_OFFSET)}`;
+}
+
+const formattedId = computed(() => formatId(metaData?.id));
 </script>
 
 <template>
@@ -138,6 +147,32 @@ const formattedId = computed(() => {
               class="ml-1"
             />
           </v-col>
+
+          <template v-if="componentItem">
+            <v-divider class="w-100 my-2" opacity="0.2" />
+            <v-col
+              class="text-subtitle-2 font-weight-bold text-truncate text-white w-100 pa-0"
+              cols="auto"
+              style="line-height: 1.3"
+            >
+              {{ displayComponentTitle }}
+            </v-col>
+            <v-col
+              class="text-caption font-weight-black text-uppercase text-secondary pa-0"
+              style="font-size: 0.68rem; line-height: 1.2"
+            >
+              {{ componentItem.category }}
+            </v-col>
+            <v-col
+              class="id-badge-container mt-1 d-inline-flex align-center px-2 py-0.5"
+              @click.stop="copyId(componentItem.id)"
+            >
+              <span class="id-text">
+                {{ formatId(componentItem.id) }}
+              </span>
+              <v-icon icon="mdi-content-copy" size="10" color="white" class="ml-1" />
+            </v-col>
+          </template>
         </v-row>
       </GlassCard>
     </v-sheet>

package/app/components/Viewer/Generic/Model/BlocksOptions.vue

@@ -19,7 +19,7 @@ const hybridViewerStore = useHybridViewerStore();
 const blocksVisibility = computed({
   get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Block"),
   set: async (newValue) => {
-    await dataStyleStore.setModelComponentTypeVisibility(modelId, "Block", newValue);
+    await dataStyleStore.setModelBlocksVisibility(modelId, targetBlockIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
@@ -36,7 +36,7 @@ const blockVisibility = computed({
 const blocksColor = computed({
   get: () => dataStyleStore.modelComponentTypeColor(modelId, "Block"),
   set: async (color) => {
-    await dataStyleStore.setModelComponentTypeColor(modelId, "Block", color);
+    await dataStyleStore.setModelBlocksColor(modelId, targetBlockIds, color);
     hybridViewerStore.remoteRender();
   },
 });
@@ -52,7 +52,7 @@ const blockColor = computed({
 const blocksActiveColoring = computed({
   get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Block"),
   set: async (coloringType) => {
-    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Block", coloringType);
+    await dataStyleStore.setModelBlocksActiveColoring(modelId, targetBlockIds, coloringType);
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Generic/Model/CornersOptions.vue

@@ -13,14 +13,13 @@ const { modelId, cornerId, targetCornerIds } = defineProps({
 });
 
 const dataStyleStore = useDataStyleStore();
-console.log("CornersOptions setup!");
 const hybridViewerStore = useHybridViewerStore();
 
 // Visibility
 const cornersVisibility = computed({
   get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Corner"),
   set: async (newValue) => {
-    await dataStyleStore.setModelComponentTypeVisibility(modelId, "Corner", newValue);
+    await dataStyleStore.setModelCornersVisibility(modelId, targetCornerIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
@@ -37,7 +36,7 @@ const cornerVisibility = computed({
 const cornersColor = computed({
   get: () => dataStyleStore.modelComponentTypeColor(modelId, "Corner"),
   set: async (color) => {
-    await dataStyleStore.setModelComponentTypeColor(modelId, "Corner", color);
+    await dataStyleStore.setModelCornersColor(modelId, targetCornerIds, color);
     hybridViewerStore.remoteRender();
   },
 });
@@ -53,7 +52,7 @@ const cornerColor = computed({
 const cornersActiveColoring = computed({
   get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Corner"),
   set: async (coloringType) => {
-    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Corner", coloringType);
+    await dataStyleStore.setModelCornersActiveColoring(modelId, targetCornerIds, coloringType);
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Generic/Model/LinesOptions.vue

@@ -19,7 +19,7 @@ const hybridViewerStore = useHybridViewerStore();
 const linesVisibility = computed({
   get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Line"),
   set: async (newValue) => {
-    await dataStyleStore.setModelComponentTypeVisibility(modelId, "Line", newValue);
+    await dataStyleStore.setModelLinesVisibility(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
@@ -36,7 +36,7 @@ const lineVisibility = computed({
 const linesColor = computed({
   get: () => dataStyleStore.modelComponentTypeColor(modelId, "Line"),
   set: async (color) => {
-    await dataStyleStore.setModelComponentTypeColor(modelId, "Line", color);
+    await dataStyleStore.setModelLinesColor(modelId, targetLineIds, color);
     hybridViewerStore.remoteRender();
   },
 });
@@ -52,7 +52,7 @@ const lineColor = computed({
 const linesActiveColoring = computed({
   get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Line"),
   set: async (coloringType) => {
-    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Line", coloringType);
+    await dataStyleStore.setModelLinesActiveColoring(modelId, targetLineIds, coloringType);
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/Generic/Model/ModelStyleCard.vue

@@ -63,9 +63,13 @@ watch(
 
 const targetComponentIds = ref([]);
 watch(
-  () => [modelId.value, componentType.value],
+  () => [modelId.value, componentType.value, itemProps.meta_data.targetComponentIds],
   async () => {
     targetComponentIds.value = [];
+    if (itemProps.meta_data.targetComponentIds) {
+      targetComponentIds.value = itemProps.meta_data.targetComponentIds;
+      return;
+    }
     if (componentType.value && modelId.value) {
       const currentModelId = modelId.value;
       const currentType = componentType.value;

package/app/components/Viewer/Generic/Model/SurfacesOptions.vue

@@ -19,7 +19,7 @@ const hybridViewerStore = useHybridViewerStore();
 const surfacesVisibility = computed({
   get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Surface"),
   set: async (newValue) => {
-    await dataStyleStore.setModelComponentTypeVisibility(modelId, "Surface", newValue);
+    await dataStyleStore.setModelSurfacesVisibility(modelId, targetSurfaceIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
@@ -36,7 +36,7 @@ const surfaceVisibility = computed({
 const surfacesColor = computed({
   get: () => dataStyleStore.modelComponentTypeColor(modelId, "Surface"),
   set: async (color) => {
-    await dataStyleStore.setModelComponentTypeColor(modelId, "Surface", color);
+    await dataStyleStore.setModelSurfacesColor(modelId, targetSurfaceIds, color);
     hybridViewerStore.remoteRender();
   },
 });
@@ -52,7 +52,7 @@ const surfaceColor = computed({
 const surfacesActiveColoring = computed({
   get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Surface"),
   set: async (coloringType) => {
-    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Surface", coloringType);
+    await dataStyleStore.setModelSurfacesActiveColoring(modelId, targetSurfaceIds, coloringType);
     hybridViewerStore.remoteRender();
   },
 });

package/app/components/Viewer/ObjectTree/Views/ModelComponents.vue

@@ -79,7 +79,7 @@ const itemsForTreeView = computed(() => {
   for (const category of filteredCategories.value) {
     result.push({
       ...category,
-      children: sortAndFormatItems(componentsCache.value?.[category.id], sortType.value),
+      children: sortAndFormatItems(componentsCache.value[category.id], sortType.value),
     });
   }
   return result;
@@ -87,12 +87,16 @@ const itemsForTreeView = computed(() => {
 
 function showContextMenu(event, item) {
   const actualItem = item.raw || item;
+  const typeId = actualItem.category || actualItem.id;
+  const typeItem = itemsForTreeView.value.find((type) => type.id === typeId);
+  const targetComponentIds = typeItem ? typeItem.children.map((child) => child.id) : undefined;
   emit("show-menu", {
     event,
     itemId: actualItem.category ? actualItem.id : id,
     context_type: actualItem.category ? "model_component" : "model_component_type",
     modelId: id,
     modelComponentType: actualItem.category ? undefined : actualItem.id,
+    targetComponentIds,
   });
 }
 
@@ -108,7 +112,7 @@ function handleHoverEnter({ item, immediate = false }) {
     () =>
       actualItem.category
         ? [actualItem.viewer_id]
-        : actualItem.children?.map((child) => child.viewer_id) || [],
+        : actualItem.children.map((child) => child.viewer_id),
     "model",
     immediate,
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.29.0-rc.1",
+  "version": "10.29.0-rc.3",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {