@geode/opengeodeweb-front 10.10.2-rc.2 → 10.11.0-rc.4

package/app/components/Viewer/ContextMenuItem.vue

@@ -29,7 +29,7 @@ const optionsStyle = computed(() => {
   if (!is_active.value || !optionsHeight.value) {
     return {};
   }
-  const angle = (index / itemProps.totalItems) * 2 * Math.PI;
+  const angle = (itemProps.index / itemProps.totalItems) * 2 * Math.PI;
   const radius = RADIUS;
   const absoluteButtonY = menuStore.menuY + Math.sin(angle) * radius;
   const height = optionsHeight.value;

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

@@ -0,0 +1,96 @@
+<script setup>
+import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const { itemProps } = defineProps({
+  itemProps: { type: Object, required: true },
+});
+
+const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
+const componentId = computed(() => itemProps.meta_data.pickedComponentId);
+
+const modelVisibility = computed({
+  get: () => dataStyleStore.modelVisibility(modelId.value),
+  set: (value) => {
+    dataStyleStore.setModelVisibility(modelId.value, value);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const componentColor = computed({
+  get: () =>
+    componentId.value
+      ? dataStyleStore.getModelComponentColor(modelId.value, componentId.value)
+      : undefined,
+  set: async (newValue) => {
+    if (componentId.value) {
+      await dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], newValue);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+</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">
+        <div class="text-caption mb-1">Color</div>
+        <ViewerOptionsColorPicker v-model="componentColor" />
+      </v-container>
+    </div>
+  </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);
+}
+</style>

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

@@ -0,0 +1,22 @@
+<script setup>
+import ModelColor from "@ogw_front/assets/viewer_svgs/model_component_color.svg";
+import ModelStyleCard from "./ModelStyleCard.vue";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+
+const { itemProps } = defineProps({
+  itemProps: { type: Object, required: true },
+});
+</script>
+
+<template>
+  <ViewerContextMenuItem
+    :index="itemProps.index"
+    :itemProps="itemProps"
+    tooltip="Style options"
+    :btn_image="ModelColor"
+  >
+    <template #options>
+      <ModelStyleCard :itemProps="itemProps" />
+    </template>
+  </ViewerContextMenuItem>
+</template>

package/app/components/Viewer/Ui.vue

@@ -1,34 +1,43 @@
 <script setup>
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
 import ViewerTreeObjectTree from "@ogw_front/components/Viewer/Tree/ObjectTree";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useMenuStore } from "@ogw_front/stores/menu";
+import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-const { id, displayMenu, menuStore, containerWidth, containerHeight, dataStyleStore, viewerStore } =
-  defineProps({
-    id: { type: String, required: true },
-    displayMenu: { type: Boolean, required: true },
-    menuStore: { type: Object, required: true },
-    containerWidth: { type: Number, required: true },
-    containerHeight: { type: Number, required: true },
-    dataStyleStore: { type: Object, required: true },
-    viewerStore: { type: Object, required: true },
-  });
+const { displayMenu, containerWidth, containerHeight } = defineProps({
+  displayMenu: { type: Boolean, required: true },
+  containerWidth: { type: Number, required: true },
+  containerHeight: { type: Number, required: true },
+});
 
-const emit = defineEmits(["show-menu", "set-id"]);
+const emit = defineEmits(["show-menu"]);
+
+const dataStore = useDataStore();
+const dataStyleStore = useDataStyleStore();
+const viewerStore = useViewerStore();
+const menuStore = useMenuStore();
+const dataItems = dataStore.refAllItems();
 
 async function get_viewer_id(x, y) {
-  const ids = Object.keys(dataStyleStore.styles);
+  const activeIds = new Set(dataItems.value.map((item) => item.id));
+  const ids = Object.keys(dataStyleStore.styles).filter((styleId) => activeIds.has(styleId));
+
+  let result = { id: undefined, viewer_id: undefined };
   await viewerStore.request(
     viewer_schemas.opengeodeweb_viewer.viewer.picked_ids,
     { x, y, ids },
     {
       response_function: (response) => {
-        const { array_ids } = response;
+        const { array_ids, viewer_id } = response;
         const [first_id] = array_ids;
-        emit("set-id", first_id);
+        result = { id: first_id, viewer_id };
       },
     },
   );
+  return result;
 }
 
 defineExpose({ get_viewer_id });
@@ -38,7 +47,7 @@ defineExpose({ get_viewer_id });
   <ViewerTreeObjectTree @show-menu="(args) => emit('show-menu', args)" />
   <ViewerContextMenu
     v-if="displayMenu"
-    :id="menuStore.current_id || id"
+    :id="menuStore.current_id"
     :x="menuStore.menuX"
     :y="menuStore.menuY"
     :container-width="containerWidth"

package/app/stores/data.js

@@ -120,8 +120,12 @@ export const useDataStore = defineStore("data", () => {
         });
       }
     }
-    addModelComponents(new_item.mesh_components);
-    addModelComponents(new_item.collection_components);
+    if (new_item.mesh_components) {
+      addModelComponents(new_item.mesh_components);
+    }
+    if (new_item.collection_components) {
+      addModelComponents(new_item.collection_components);
+    }
     return database.model_components.bulkPut(allComponents);
   }
 
@@ -137,22 +141,35 @@ export const useDataStore = defineStore("data", () => {
         });
       }
     }
-    for (const component of new_item.mesh_components) {
-      if (component.boundaries) {
-        addModelComponentRelations(component.boundaries, component.geode_id, "boundary");
-      }
-      if (component.internals) {
-        addModelComponentRelations(component.internals, component.geode_id, "internal");
+    if (new_item.mesh_components) {
+      for (const component of new_item.mesh_components) {
+        if (component.boundaries) {
+          addModelComponentRelations(component.boundaries, component.geode_id, "boundary");
+        }
+        if (component.internals) {
+          addModelComponentRelations(component.internals, component.geode_id, "internal");
+        }
       }
     }
-    for (const component of new_item.collection_components) {
-      if (component.items) {
-        addModelComponentRelations(component.items, component.geode_id, "collection");
+    if (new_item.collection_components) {
+      for (const component of new_item.collection_components) {
+        if (component.items) {
+          addModelComponentRelations(component.items, component.geode_id, "collection");
+        }
       }
     }
     return database.model_components_relation.bulkPut(relations);
   }
 
+  async function getComponentByViewerId(modelId, viewer_id) {
+    const component = await database.model_components
+      .where("viewer_id")
+      .equals(Number(viewer_id))
+      .and((model_component) => model_component.id === modelId)
+      .first();
+    return component;
+  }
+
   async function deleteItem(id) {
     await database.data.delete(id);
     await deleteModelComponents(id);
@@ -232,6 +249,7 @@ export const useDataStore = defineStore("data", () => {
     getBlocksGeodeIds,
     getMeshComponentGeodeIds,
     getMeshComponentsViewerIds,
+    getComponentByViewerId,
 
     exportStores,
     importStores,

package/app/stores/menu.js

@@ -36,9 +36,9 @@ import TetrahedralSolidTetrahedraOptions from "@ogw_front/components/Viewer/Tetr
 import TetrahedralSolidTrianglesOptions from "@ogw_front/components/Viewer/TetrahedralSolid/TrianglesOptions";
 
 // Model components
-import ModelComponentsOptions from "@ogw_front/components/Viewer/Generic/Model/ModelComponentsOptions";
 import ModelEdgesOptions from "@ogw_front/components/Viewer/Generic/Model/EdgesOptions";
 import ModelPointsOptions from "@ogw_front/components/Viewer/Generic/Model/PointsOptions";
+import ModelStyleOptions from "@ogw_front/components/Viewer/Generic/Model/ModelStyleOptions";
 
 const PointSet_menu = [PointSetPointsOptions];
 
@@ -78,18 +78,18 @@ const TetrahedralSolid_menu = [
   TetrahedralSolidTetrahedraOptions,
 ];
 
-const BRep_menu = [ModelEdgesOptions, ModelPointsOptions];
+const BRep_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
 
-const CrossSection_menu = [ModelEdgesOptions, ModelPointsOptions];
+const CrossSection_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
 
-const ImplicitCrossSection_menu = [ModelEdgesOptions, ModelPointsOptions];
-const ImplicitStructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions];
+const ImplicitCrossSection_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
+const ImplicitStructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
 
-const Section_menu = [ModelEdgesOptions, ModelPointsOptions];
+const Section_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
 
-const StructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions];
+const StructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
 
-const ModelComponent_menu = [ModelComponentsOptions];
+const ModelComponent_menu = [ModelStyleOptions];
 
 const menusData = {
   mesh: {

package/internal/database/tables/model_components.js

@@ -1,4 +1,4 @@
 export const modelComponentsTable = {
   name: "model_components",
-  schema: "[id+geode_id], [id+type], viewer_id, name",
+  schema: "[id+geode_id], [id+type], viewer_id, name, is_active",
 };

package/internal/stores/data_style/mesh/edges/edge.js

@@ -2,6 +2,7 @@
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 // Local imports
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useMeshEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 

package/package.json

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

package/tests/vitest.config.js

@@ -7,6 +7,10 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const RETRIES = 3;
 const DEFAULT_RETRY = 0;
+const TIMEOUTS = {
+  unit: 5000,
+  integration: 15_000,
+};
 
 const globalRetry = process.env.CI ? RETRIES : DEFAULT_RETRY;
 
@@ -27,6 +31,7 @@ export default defineConfig({
           globals: false,
           include: ["tests/unit/**/*.test.js"],
           environment: "nuxt",
+          testTimeout: TIMEOUTS.unit,
           setupFiles: [path.resolve(__dirname, "./setup_indexeddb.js")],
           server: {
             deps: {
@@ -43,6 +48,7 @@ export default defineConfig({
           include: ["tests/integration/**/*.test.js"],
           environment: "nuxt",
           fileParallelism: false,
+          testTimeout: TIMEOUTS.integration,
           setupFiles: [path.resolve(__dirname, "./setup_indexeddb.js")],
           server: {
             deps: {

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

@@ -1,38 +0,0 @@
-<script setup>
-import ModelColor from "@ogw_front/assets/viewer_svgs/model_component_color.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
-import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
-
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
-
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
-
-const modelId = computed(() => itemProps.meta_data.modelId);
-const componentId = computed(() => itemProps.id);
-
-const color = computed({
-  get: () => dataStyleStore.getModelComponentColor(modelId.value, componentId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-</script>
-
-<template>
-  <ViewerContextMenuItem :itemProps="itemProps" tooltip="Components color" :btn_image="ModelColor">
-    <template #options>
-      <v-row class="pa-0" align="center">
-        <v-col>
-          <ViewerOptionsColorPicker v-model="color" />
-        </v-col>
-      </v-row>
-    </template>
-  </ViewerContextMenuItem>
-</template>