@geode/opengeodeweb-front 10.13.2 → 10.14.0-rc.1

package/app/components/Viewer/ContextMenuItem.vue

@@ -96,8 +96,9 @@ function toggleOptions() {
         variant="panel"
         padding="pa-0"
         class="elevation-24"
+        style="overflow: hidden; display: flex; flex-direction: column"
       >
-        <v-card-text class="pa-5">
+        <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>
       </GlassCard>

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

@@ -25,9 +25,17 @@ const visibility = computed({
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" tooltip="Edges options" :btn_image="SurfaceEdges">
+  <ViewerContextMenuItem
+    data-testid="modelEdgesMenu"
+    :itemProps="itemProps"
+    tooltip="Edges options"
+    :btn_image="SurfaceEdges"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch
+        data-testid="modelEdgesVisibilitySwitch"
+        v-model="visibility"
+      />
     </template>
   </ViewerContextMenuItem>
 </template>

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

@@ -1,11 +1,14 @@
 <script setup>
+import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const dataStore = useDataStore();
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },
@@ -13,11 +16,43 @@ 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 componentType = ref(undefined);
+
+watchEffect(async () => {
+  if (itemProps.meta_data.viewer_type === "model_component_type") {
+    componentType.value = itemProps.meta_data.modelComponentType;
+  } else if (componentId.value && modelId.value) {
+    componentType.value = await dataStore.meshComponentType(modelId.value, componentId.value);
+  } else {
+    componentType.value = undefined;
+  }
+});
 
 const modelVisibility = computed({
   get: () => dataStyleStore.modelVisibility(modelId.value),
-  set: (value) => {
-    dataStyleStore.setModelVisibility(modelId.value, value);
+  set: async (newValue) => {
+    await dataStyleStore.setModelVisibility(modelId.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const modelComponentTypeVisibility = computed({
+  get: () => selection.value.includes(componentType.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelComponentTypeVisibility(
+      modelId.value,
+      componentType.value,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const componentVisibility = computed({
+  get: () => selection.value.includes(componentId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelComponentsVisibility(modelId.value, [componentId.value], newValue);
     hybridViewerStore.remoteRender();
   },
 });
@@ -25,72 +60,114 @@ const modelVisibility = computed({
 const componentColor = computed({
   get: () =>
     componentId.value
-      ? dataStyleStore.getModelComponentColor(modelId.value, componentId.value)
+      ? dataStyleStore.getModelComponentEffectiveColor(
+          modelId.value,
+          componentId.value,
+          componentType.value,
+        )
       : undefined,
-  set: async (newValue) => {
+  set: async (color) => {
     if (componentId.value) {
-      await dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], newValue);
+      await dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], color);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+const modelComponentTypeColor = computed({
+  get: () =>
+    componentType.value
+      ? dataStyleStore.getModelComponentTypeColor(modelId.value, componentType.value)
+      : undefined,
+  set: async (color) => {
+    if (componentType.value) {
+      await dataStyleStore.setModelComponentTypeColor(modelId.value, componentType.value, color);
       hybridViewerStore.remoteRender();
     }
   },
 });
+
+const modelComponentTypeColorMode = computed({
+  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId.value, componentType.value),
+  set: async (colorMode) => {
+    if (componentType.value) {
+      await dataStyleStore.setModelComponentTypeColorMode(
+        modelId.value,
+        componentType.value,
+        colorMode,
+      );
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+const componentColorMode = computed({
+  get: () => dataStyleStore.getModelComponentColorMode(modelId.value, componentId.value),
+  set: async (colorMode) => {
+    if (componentId.value) {
+      await dataStyleStore.setModelComponentColorMode(modelId.value, componentId.value, colorMode);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+const colorModes = [
+  { title: "Constant", value: "constant" },
+  { title: "Random", value: "random" },
+];
+
+const modelComponentTypeLabel = computed(() =>
+  componentType.value ? `${componentType.value}s Options` : "",
+);
 </script>
 
 <template>
   <div class="model-style-card">
-    <div class="options-section">
-      <div class="section-badge">Model Options</div>
-      <v-container class="pa-2">
-        <VisibilitySwitch v-model="modelVisibility" />
-      </v-container>
-    </div>
-
-    <div v-if="componentId" class="options-section mt-6">
-      <div class="section-badge">Component Options</div>
-      <v-container class="pa-2">
+    <OptionsSection title="Model Options">
+      <VisibilitySwitch v-model="modelVisibility" />
+    </OptionsSection>
+
+    <OptionsSection v-if="componentType" :title="modelComponentTypeLabel" class="mt-6">
+      <VisibilitySwitch v-model="modelComponentTypeVisibility" />
+      <div class="text-caption mb-1 mt-2">Color Mode</div>
+      <v-select
+        v-model="modelComponentTypeColorMode"
+        :items="colorModes"
+        density="compact"
+        hide-details
+        class="mb-3"
+        variant="outlined"
+      />
+
+      <template v-if="modelComponentTypeColorMode === 'constant'">
+        <div class="text-caption mb-1">Color</div>
+        <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
+      </template>
+    </OptionsSection>
+
+    <OptionsSection v-if="componentId" title="Component Options" class="mt-6">
+      <VisibilitySwitch v-model="componentVisibility" />
+      <div class="text-caption mb-1 mt-2">Color Mode</div>
+      <v-select
+        v-model="componentColorMode"
+        :items="colorModes"
+        density="compact"
+        hide-details
+        class="mb-3"
+        variant="outlined"
+      />
+
+      <template v-if="componentColorMode === 'constant'">
         <div class="text-caption mb-1">Color</div>
         <ViewerOptionsColorPicker v-model="componentColor" />
-      </v-container>
-    </div>
+      </template>
+    </OptionsSection>
   </div>
 </template>
 
 <style scoped>
 .model-style-card {
-  min-width: 280px;
-}
-
-.options-section {
-  position: relative;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 12px;
-  padding: 12px 8px 8px 8px;
-}
-
-.section-badge {
-  position: absolute;
-  top: -12px;
-  left: 16px;
-  background-color: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(8px);
-  padding: 2px 12px;
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.v-theme--light .options-section {
-  border-color: rgba(0, 0, 0, 0.12);
-}
-
-.v-theme--light .section-badge {
-  background-color: white;
-  color: #444;
-  border-color: rgba(0, 0, 0, 0.12);
+  padding-top: 20px;
+  overflow-x: hidden;
 }
 </style>

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

@@ -32,9 +32,17 @@ const size = computed({
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" tooltip="Points options" :btn_image="SurfacePoints">
+  <ViewerContextMenuItem
+    data-testid="modelPointsMenu"
+    :itemProps="itemProps"
+    tooltip="Points options"
+    :btn_image="SurfacePoints"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch
+        data-testid="modelPointsVisibilitySwitch"
+        v-model="visibility"
+      />
       <template v-if="visibility">
         <v-row class="pa-0" align="center">
           <v-divider />

package/app/components/Viewer/ObjectTree/Layout.vue

@@ -194,7 +194,7 @@ function onVerticalResizeStart(event, index) {
         :scroll-top="mainView.scrollTop"
         @update:scroll-top="treeviewStore.setScrollTop(mainView.id, $event)"
       >
-        <GlobalObjects @show-menu="emit('show-menu', $event)" />
+        <GlobalObjects data-testid="mainObjectTree" @show-menu="emit('show-menu', $event)" />
       </ViewerObjectTreeBox>
     </div>
 
@@ -226,7 +226,11 @@ function onVerticalResizeStart(event, index) {
             @dragstart="onDragStart(index + 1)"
             @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
           >
-            <ModelComponents :id="view.id" @show-menu="emit('show-menu', $event)" />
+            <ModelComponents
+              data-testid="modelComponentsObjectTree"
+              :id="view.id"
+              @show-menu="emit('show-menu', $event)"
+            />
           </ViewerObjectTreeBox>
         </div>
         <div

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

@@ -52,6 +52,17 @@ async function onSelectionChange(current) {
   }
   hybridViewerStore.remoteRender();
 }
+
+function showContextMenu(event, item) {
+  const actualItem = item.raw || item;
+  emit("show-menu", {
+    event,
+    itemId: actualItem.category ? actualItem.id : viewId,
+    context_type: actualItem.category ? "model_component" : "model_component_type",
+    modelId: viewId,
+    modelComponentType: actualItem.category ? undefined : actualItem.id,
+  });
+}
 </script>
 
 <template>
@@ -83,14 +94,7 @@ async function onSelectionChange(current) {
         <ObjectTreeItemLabel
           :item="item"
           show-tooltip
-          @contextmenu="
-            emit('show-menu', {
-              event: $event,
-              itemId: item.id,
-              context_type: 'model_component',
-              modelId: viewId,
-            })
-          "
+          @contextmenu="showContextMenu($event, item)"
         />
       </template>
     </v-treeview>

package/app/components/Viewer/Options/OptionsSection.vue

@@ -0,0 +1,74 @@
+<script setup>
+const { title } = defineProps({
+  title: { type: String, required: true },
+});
+
+const isCollapsed = ref(false);
+</script>
+
+<template>
+  <div class="options-section">
+    <div class="section-badge" @click="isCollapsed = !isCollapsed">
+      {{ title }}
+      <v-icon class="collapse-icon" :class="{ rotated: isCollapsed }" size="12">
+        mdi-chevron-down
+      </v-icon>
+    </div>
+    <v-container v-show="!isCollapsed" class="pa-2">
+      <slot />
+    </v-container>
+  </div>
+</template>
+
+<style scoped>
+.options-section {
+  position: relative;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  padding: 12px 8px 8px 8px;
+}
+
+.section-badge {
+  position: absolute;
+  top: -12px;
+  left: 16px;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  padding: 2px 12px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.section-badge:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.collapse-icon {
+  transition: transform 0.2s ease;
+}
+
+.collapse-icon.rotated {
+  transform: rotate(-90deg);
+}
+
+.v-theme--light .options-section {
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
+.v-theme--light .section-badge {
+  background-color: white;
+  color: #444;
+  border-color: rgba(0, 0, 0, 0.12);
+}
+</style>

package/app/stores/data.js

@@ -184,10 +184,10 @@ export const useDataStore = defineStore("data", () => {
     await database.model_components_relation.where("id").equals(modelId).delete();
   }
 
-  async function getMeshComponentGeodeIds(modelId, component_type) {
+  async function getMeshComponentGeodeIds(modelId, type) {
     const components = await database.model_components
       .where("[id+type]")
-      .equals([modelId, component_type])
+      .equals([modelId, type])
       .toArray();
     return components.map((component) => component.geode_id);
   }

package/app/stores/data_style.js

@@ -45,12 +45,14 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     return {
       styles: dataStyleState.styles,
       componentStyles: dataStyleState.componentStyles,
+      modelComponentTypeStyles: dataStyleState.modelComponentTypeStyles,
     };
   }
 
   async function importStores(snapshot) {
     const stylesSnapshot = snapshot.styles;
     const componentStylesSnapshot = snapshot.componentStyles;
+    const modelComponentTypeStylesSnapshot = snapshot.modelComponentTypeStyles;
 
     await dataStyleState.clear();
 
@@ -60,12 +62,19 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     const component_style_promises = Object.values(componentStylesSnapshot).map((style) =>
       database.model_component_datastyle.put(structuredClone(style)),
     );
+    const model_component_type_style_promises = Object.values(modelComponentTypeStylesSnapshot).map(
+      (style) => database.model_component_type_datastyle.put(structuredClone(style)),
+    );
 
-    await Promise.all([...style_promises, ...component_style_promises]);
+    await Promise.all([
+      ...style_promises,
+      ...component_style_promises,
+      ...model_component_type_style_promises,
+    ]);
   }
 
   function applyAllStylesFromState() {
-    const ids = Object.keys(dataStyleState.styles);
+    const ids = Object.keys(dataStyleState.styles.value);
     const promises = ids.map(async (id) => {
       const meta = await dataStore.item(id);
       const viewerType = meta.viewer_type;

package/app/stores/menu.js

@@ -117,6 +117,9 @@ const menusData = {
     Section: Section_menu,
     StructuralModel: StructuralModel_menu,
   },
+  model_component_type: {
+    type: ModelComponent_menu,
+  },
   model_component: {
     component: ModelComponent_menu,
   },

package/app/utils/default_styles.js

@@ -21,6 +21,15 @@ const surfaces_defaultColor = { r: 255, g: 255, b: 255 };
 const blocks_defaultVisibility = true;
 const blocks_defaultColor = { r: 255, g: 255, b: 255 };
 
+const DEFAULT_MODEL_COMPONENT_TYPE_COLORS = {
+  Corner: corners_defaultColor,
+  Line: lines_defaultColor,
+  Surface: surfaces_defaultColor,
+  Block: blocks_defaultColor,
+};
+
+const MESH_TYPES = ["Corner", "Line", "Surface", "Block"];
+
 // Mesh functions
 function meshPointsDefaultStyle(
   visibility = points_defaultVisibility,
@@ -315,4 +324,4 @@ function getDefaultStyle(type) {
   return default_styles()[type];
 }
 
-export { getDefaultStyle };
+export { getDefaultStyle, DEFAULT_MODEL_COMPONENT_TYPE_COLORS, MESH_TYPES };

package/app/utils/import_workflow.js

@@ -48,10 +48,10 @@ async function importItem(item) {
   const addDataRelationsTask =
     item.viewer_type === "model" ? dataStore.addComponentRelations(item) : Promise.resolve();
   treeviewStore.addItem(item.geode_object_type, item.name, item.id, item.viewer_type);
-  dataStyleStore.addDataStyle(item.id, item.geode_object_type);
+  const addDataStyleTask = dataStyleStore.addDataStyle(item.id, item.geode_object_type);
   const addViewerTask = addDataTask.then(() => hybridViewerStore.addItem(item.id));
-  const applyStyleTask = Promise.all([registerTask, addDataComponentsTask]).then(() =>
-    dataStyleStore.applyDefaultStyle(item.id),
+  const applyStyleTask = Promise.all([registerTask, addDataComponentsTask, addDataStyleTask]).then(
+    () => dataStyleStore.applyDefaultStyle(item.id),
   );
   await Promise.all([
     registerTask,

package/internal/database/base_database.js

@@ -2,6 +2,7 @@ import { Dexie } from "dexie";
 import { dataStyleTable } from "./tables/data_style";
 import { dataTable } from "./tables/data";
 import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
+import { modelComponentTypeDataStyleTable } from "./tables/model_component_type_datastyle";
 import { modelComponentsRelationTable } from "./tables/model_components_relation";
 import { modelComponentsTable } from "./tables/model_components";
 
@@ -12,6 +13,7 @@ export class BaseDatabase extends Dexie {
       [modelComponentsTable.name]: modelComponentsTable.schema,
       [dataStyleTable.name]: dataStyleTable.schema,
       [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
+      [modelComponentTypeDataStyleTable.name]: modelComponentTypeDataStyleTable.schema,
       [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
       treeview_config: "id",
     };

package/internal/database/database.js

@@ -59,6 +59,7 @@ class Database extends BaseDatabase {
 
 await Dexie.delete("Database");
 const databaseContainer = { instance: new Database() };
+databaseContainer.instance.clear();
 
 const database = new Proxy(
   {},

package/internal/database/tables/model_component_type_datastyle.js

@@ -0,0 +1,4 @@
+export const modelComponentTypeDataStyleTable = {
+  name: "model_component_type_datastyle",
+  schema: "[id_model+type], id_model",
+};

package/internal/stores/data_style/model/blocks/color.js

@@ -1,46 +1,20 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelBlocksCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local constants
-const model_blocks_schemas = viewer_schemas.opengeodeweb_viewer.model.blocks;
+const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.color;
 
-export function useModelBlocksColorStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
+export function useModelBlocksColor() {
+  const modelCommonStyle = useModelCommonStyle();
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
 
   function modelBlockColor(id, block_id) {
     return modelBlocksCommonStyle.modelBlockStyle(id, block_id).color;
   }
 
-  function setModelBlocksColor(id, block_ids, color) {
-    if (!block_ids || block_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, block_ids).then((block_viewer_ids) => {
-      if (!block_viewer_ids || block_viewer_ids.length === 0) {
-        return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, {
-          color,
-        });
-      }
-      return viewerStore.request(
-        model_blocks_schemas.color,
-        { id, block_ids: block_viewer_ids, color },
-        {
-          response_function: () =>
-            modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, { color }),
-        },
-      );
-    });
+  function setModelBlocksColor(modelId, blocks_ids, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, blocks_ids, color, schema, color_mode);
   }
 
-  return {
-    modelBlockColor,
-    setModelBlocksColor,
-  };
+  return { setModelBlocksColor, modelBlockColor };
 }

package/internal/stores/data_style/model/blocks/common.js

@@ -1,8 +1,10 @@
 import merge from "lodash/merge";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 
 export function useModelBlocksCommonStyle() {
   const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
 
   function modelBlocksStyle(id) {
     return dataStyleState.getStyle(id).blocks;
@@ -14,12 +16,12 @@ export function useModelBlocksCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelBlocksStyle(id, block_ids, values) {
-    return dataStyleState.mutateComponentStyles(id, block_ids, values);
+  function mutateModelBlocksStyle(id, blocks_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, blocks_ids, values);
   }
 
   function mutateModelBlockStyle(id, block_id, values) {
-    return dataStyleState.mutateComponentStyle(id, block_id, values);
+    return modelCommonStyle.mutateComponentStyle(id, block_id, values);
   }
 
   return {