@geode/opengeodeweb-front 10.14.0-rc.6 → 10.14.0-rc.8

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

@@ -16,7 +16,7 @@ const { itemProps } = defineProps({
 
 const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
 const componentId = computed(() => itemProps.meta_data.pickedComponentId);
-const selection = dataStyleStore.visibleMeshComponents(modelId);
+const selection = dataStyleStore.visibleMeshComponents(modelId.value);
 const componentType = ref(undefined);
 
 watchEffect(async () => {

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

@@ -2,14 +2,18 @@
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
+import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHoverhighlight } from "@ogw_front/composables/use_hover_highlight";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const treeviewStore = useTreeviewStore();
+const dataStore = useDataStore();
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 
 const emit = defineEmits(["show-menu"]);
 
@@ -62,6 +66,21 @@ function isModel(item) {
     actualItem.viewer_type === "model" || ["BRep", "Section"].includes(actualItem.geode_object_type)
   );
 }
+
+async function handleHoverEnter(item) {
+  const actualItem = item.raw || item;
+  const is_model = isModel(item);
+  let block_ids = [];
+  if (is_model) {
+    block_ids = await dataStore.getAllModelComponentsViewerIds(actualItem.id);
+  }
+  onHoverEnter(actualItem.id, block_ids, is_model ? "model" : "mesh");
+}
+
+function handleHoverLeave(item) {
+  const actualItem = item.raw || item;
+  onHoverLeave(actualItem.id);
+}
 </script>
 
 <template>
@@ -89,6 +108,8 @@ function isModel(item) {
       <template #title="{ item }">
         <ObjectTreeItemLabel
           :item="item"
+          @mouseenter="handleHoverEnter(item)"
+          @mouseleave="handleHoverLeave(item)"
           @contextmenu="emit('show-menu', { event: $event, itemId: item.id })"
         />
       </template>

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

@@ -5,11 +5,13 @@ import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/It
 import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHoverhighlight } from "@ogw_front/composables/use_hover_highlight";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const { id: viewId } = defineProps({ id: { type: String, required: true } });
+const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 const emit = defineEmits(["show-menu"]);
 
 const dataStore = useDataStore();
@@ -63,6 +65,18 @@ function showContextMenu(event, item) {
     modelComponentType: actualItem.category ? undefined : actualItem.id,
   });
 }
+
+function handleHoverEnter(item) {
+  const actualItem = item.raw || item;
+  const block_ids = actualItem.category
+    ? [actualItem.viewer_id]
+    : actualItem.children?.map((child) => child.viewer_id) || [];
+  onHoverEnter(viewId, block_ids);
+}
+
+function handleHoverLeave() {
+  onHoverLeave(viewId);
+}
 </script>
 
 <template>
@@ -95,6 +109,8 @@ function showContextMenu(event, item) {
         <ObjectTreeItemLabel
           :item="item"
           show-tooltip
+          @mouseenter="handleHoverEnter(item)"
+          @mouseleave="handleHoverLeave(item)"
           @contextmenu="showContextMenu($event, item)"
         />
       </template>

package/app/composables/use_hover_highlight.js

@@ -0,0 +1,48 @@
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import vtk_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const HOVER_DELAY = 1000;
+
+export function useHoverhighlight() {
+  const viewerStore = useViewerStore();
+  let timer = undefined;
+  let currentId = undefined;
+  let currentType = undefined;
+
+  function onHoverEnter(id, block_ids = [], type = "model") {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    const schema = vtk_schemas.opengeodeweb_viewer[type].highlight;
+    timer = setTimeout(async () => {
+      currentId = id;
+      currentType = type;
+      const params = {
+        id,
+        visibility: true,
+        ...(type === "model" && { block_ids }),
+      };
+      await viewerStore.request(schema, params);
+    }, HOVER_DELAY);
+  }
+
+  function onHoverLeave(id) {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    if (currentId === id) {
+      const schema = vtk_schemas.opengeodeweb_viewer[currentType].highlight;
+      const params = {
+        id,
+        visibility: false,
+        ...(currentType === "model" && { block_ids: [] }),
+      };
+      viewerStore.request(schema, params);
+      currentId = undefined;
+      currentType = undefined;
+    }
+  }
+
+  return { onHoverEnter, onHoverLeave };
+}

package/app/stores/data.js

@@ -63,6 +63,7 @@ export const useDataStore = defineStore("data", () => {
           id: meshComponent.geode_id,
           title: meshComponent.name,
           category: meshComponent.type,
+          viewer_id: meshComponent.viewer_id,
           is_active: meshComponent.is_active,
         })),
       }));
@@ -206,6 +207,11 @@ export const useDataStore = defineStore("data", () => {
     return await getMeshComponentGeodeIds(modelId, "Block");
   }
 
+  async function getAllModelComponentsViewerIds(modelId) {
+    const components = await database.model_components.where("id").equals(modelId).toArray();
+    return components.map((component) => Number.parseInt(component.viewer_id, 10));
+  }
+
   async function getMeshComponentsViewerIds(modelId, meshComponentGeodeIds) {
     const components = await database.model_components
       .where("[id+geode_id]")
@@ -245,6 +251,7 @@ export const useDataStore = defineStore("data", () => {
     getLinesGeodeIds,
     getSurfacesGeodeIds,
     getBlocksGeodeIds,
+    getAllModelComponentsViewerIds,
     getMeshComponentGeodeIds,
     getMeshComponentsViewerIds,
     getComponentByViewerId,

package/internal/stores/data_style/model/index.js

@@ -31,8 +31,8 @@ function useModelStyle() {
   const modelColorStyle = useModelColorStyle(componentStyleFunctions);
   const modelVisibilityStyle = useModelVisibilityStyle(componentStyleFunctions);
 
-  function visibleMeshComponents(id_ref) {
-    return useModelSelection(id_ref, dataStyleState);
+  function visibleMeshComponents(modelId) {
+    return useModelSelection(modelId, dataStyleState);
   }
 
   function applyModelStyle(modelId) {

package/internal/stores/data_style/model/selection.js

@@ -44,6 +44,9 @@ function buildSelection(modelId, components, stylesMap, typeStylesMap, dataStyle
 function useModelSelection(modelId, dataStyleState) {
   return useObservable(
     liveQuery(async () => {
+      if (!modelId) {
+        return [];
+      }
       const [allComponents, componentStyles, typeStyles] = await Promise.all([
         database.model_components.where("id").equals(modelId).toArray(),
         database.model_component_datastyle.where("id_model").equals(modelId).toArray(),
@@ -55,9 +58,10 @@ function useModelSelection(modelId, dataStyleState) {
       const stylesMap = Object.fromEntries(
         componentStyles.map((style) => [style.id_component, style]),
       );
-      const typeStylesMap = Object.fromEntries(typeStyles.map((style) => [style.type, style]));
-      return buildSelection(modelId, allComponents, stylesMap, typeStylesMap, dataStyleState);
+      const stylesByTypeMap = Object.fromEntries(typeStyles.map((style) => [style.type, style]));
+      return buildSelection(modelId, allComponents, stylesMap, stylesByTypeMap, dataStyleState);
     }),
+    { initialValue: [] },
   );
 }
 

package/package.json

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