@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

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

@@ -1,5 +1,10 @@
-<script setup>
+<script setup lang="ts">
+import BlocksOptions from "./BlocksOptions.vue";
+import CornersOptions from "./CornersOptions.vue";
+import LinesOptions from "./LinesOptions.vue";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import SurfacesOptions from "./SurfacesOptions.vue";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import { useDataStore } from "@ogw_front/stores/data";
@@ -7,17 +12,12 @@ import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-import BlocksOptions from "./BlocksOptions.vue";
-import CornersOptions from "./CornersOptions.vue";
-import LinesOptions from "./LinesOptions.vue";
-import SurfacesOptions from "./SurfacesOptions.vue";
-
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const dataStore = useDataStore();
 const treeviewStore = useTreeviewStore();
 
-function getBatchComponentIds(currentId) {
+function getBatchComponentIds(currentId: string): string[] {
   const { activeItems } = treeviewStore;
   if (activeItems.includes(currentId) && activeItems.length > 1) {
     return activeItems;
@@ -25,14 +25,18 @@ function getBatchComponentIds(currentId) {
   return [currentId];
 }
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: Record<string, unknown>;
+}
 
-const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
-const componentId = computed(() => itemProps.meta_data.pickedComponentId);
-const selection = computed(() => dataStyleStore.visibleMeshComponents(modelId.value).value || []);
-const componentType = ref(undefined);
+const { itemProps } = defineProps<Props>();
+
+const modelId = computed<string>(() => itemProps.meta_data.modelId || itemProps.id);
+const componentId = computed<string | undefined>(() => itemProps.meta_data.pickedComponentId);
+const selection = computed<string[]>(
+  () => dataStyleStore.visibleMeshComponents(modelId.value).value || [],
+);
+const componentType = ref<string | undefined>(undefined);
 
 watch(
   () => [
@@ -61,7 +65,7 @@ watch(
   { immediate: true },
 );
 
-const targetComponentIds = ref([]);
+const targetComponentIds = ref<string[]>([]);
 watch(
   () => [modelId.value, componentType.value, itemProps.meta_data.targetComponentIds],
   async () => {
@@ -82,33 +86,40 @@ watch(
   { immediate: true },
 );
 
-const modelVisibility = computed({
+const modelVisibility = computed<boolean | undefined>({
   get: () => dataStyleStore.modelVisibility(modelId.value),
   set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelVisibility(modelId.value, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const modelComponentsColor = computed({
-  get: () => dataStyleStore.getModelColor(modelId.value),
+const modelComponentsColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.getModelColor(modelId.value) as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.mutateStyle(modelId.value, {
       coloring: { constant: color },
     });
+    const activeColoring = dataStyleStore.getModelActiveColoring(modelId.value);
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
       color,
-      dataStyleStore.getModelActiveColoring(modelId.value),
+      typeof activeColoring === "string" ? activeColoring : undefined,
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const modelComponentsActiveColoring = computed({
-  get: () => dataStyleStore.getModelActiveColoring(modelId.value),
+const modelComponentsActiveColoring = computed<string | undefined>({
+  get: () => dataStyleStore.getModelActiveColoring(modelId.value) as string | undefined,
   set: async (coloringType) => {
+    if (typeof coloringType !== "string") {
+      return;
+    }
     await dataStyleStore.mutateStyle(modelId.value, {
       coloring: { active: coloringType },
     });

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

@@ -1,11 +1,15 @@
-<script setup>
+<script setup lang="ts">
+import ViewerContextMenuItem, {
+  type ItemProps,
+} from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import ModelColor from "@ogw_front/assets/viewer_svgs/model_component_color.svg";
 import ModelStyleCard from "./ModelStyleCard.vue";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

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

@@ -1,9 +1,10 @@
-<script setup>
+<script setup lang="ts">
+import ViewerContextMenuItem, {
+  type ItemProps,
+} from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import SurfacePoints from "@ogw_front/assets/viewer_svgs/surface_points.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
-import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
-import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
-
+import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size.vue";
+import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -12,25 +13,29 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index: number };
+}
+
+const { itemProps } = defineProps<Props>();
 
-const id = computed(() => itemProps.meta_data.modelId || itemProps.id);
+const id = computed<string>(
+  () => (itemProps.meta_data.modelId as string | undefined) || itemProps.id,
+);
 
-const visibility = computed({
+const visibility = computed<boolean>({
   get: () => dataStyleStore.modelPointsVisibility(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setModelPointsVisibility(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const size = computed({
+const size = computed<number>({
   get: () => dataStyleStore.modelPointsSize(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setModelPointsSize(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
@@ -41,6 +46,7 @@ const size = computed({
 <template>
   <ViewerContextMenuItem
     data-testid="modelPointsMenu"
+    :index="itemProps.index"
     :itemProps="itemProps"
     tooltip="Points options"
     :btnImage="SurfacePoints"

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

@@ -1,22 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-const { modelId, surfaceId, targetSurfaceIds } = defineProps({
-  modelId: { type: String, required: true },
-  surfaceId: { type: String, default: undefined },
-  targetSurfaceIds: { type: Array, required: true },
-});
+interface Props {
+  modelId: string;
+  surfaceId?: string;
+  targetSurfaceIds: string[];
+}
+
+const { modelId, surfaceId = undefined, targetSurfaceIds } = defineProps<Props>();
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
 // Visibility
-const surfacesVisibility = computed({
+const surfacesVisibility = computed<boolean>({
   get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Surface"),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVisibility(modelId, targetSurfaceIds, newValue);
@@ -24,57 +27,73 @@ const surfacesVisibility = computed({
   },
 });
 
-const surfaceVisibility = computed({
-  get: () => dataStyleStore.modelSurfaceVisibility(modelId, surfaceId),
+const surfaceVisibility = computed<boolean>({
+  get: () => dataStyleStore.modelSurfaceVisibility(modelId, surfaceId) as boolean | undefined,
   set: async (newValue) => {
+    if (surfaceId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesVisibility(modelId, [surfaceId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
 // Color
-const surfacesColor = computed({
-  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Surface"),
+const surfacesColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Surface") as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.setModelSurfacesColor(modelId, targetSurfaceIds, color);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfaceColor = computed({
-  get: () => dataStyleStore.modelSurfaceColor(modelId, surfaceId),
+const surfaceColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelSurfaceColor(modelId, surfaceId) as RGBAColor | undefined,
   set: async (color) => {
+    if (surfaceId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesColor(modelId, [surfaceId], color);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfacesActiveColoring = computed({
-  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Surface"),
+const surfacesActiveColoring = computed<string | undefined>({
+  get: () =>
+    dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Surface") as string | undefined,
   set: async (coloringType) => {
+    if (typeof coloringType !== "string") {
+      return;
+    }
     await dataStyleStore.setModelSurfacesActiveColoring(modelId, targetSurfaceIds, coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfaceActiveColoring = computed({
-  get: () => dataStyleStore.modelSurfaceActiveColoring(modelId, surfaceId),
+const surfaceActiveColoring = computed<string | undefined>({
+  get: () => dataStyleStore.modelSurfaceActiveColoring(modelId, surfaceId) as string | undefined,
   set: async (coloringType) => {
+    if (surfaceId === undefined || typeof coloringType !== "string") {
+      return;
+    }
     await dataStyleStore.setModelSurfacesActiveColoring(modelId, [surfaceId], coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
 // Group Attributes
-const surfacesVertexAttributeName = computed({
+const surfacesVertexAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId),
   set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, targetSurfaceIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfacesVertexAttributeItem = computed({
+const surfacesVertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVertexAttributeItem(modelId, targetSurfaceIds, newValue);
@@ -82,20 +101,24 @@ const surfacesVertexAttributeItem = computed({
   },
 });
 
-const surfacesVertexAttributeRange = computed({
+const surfacesVertexAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId),
   set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesVertexAttributeRange(
       modelId,
       targetSurfaceIds,
-      newValue[0],
-      newValue[1],
+      minimum,
+      maximum,
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfacesVertexAttributeColorMap = computed({
+const surfacesVertexAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeColorMap(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVertexAttributeColorMap(
@@ -107,8 +130,9 @@ const surfacesVertexAttributeColorMap = computed({
   },
 });
 
-const surfacesVertexAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeNoDataColor(modelId),
+const surfacesVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelSurfacesVertexAttributeNoDataColor(modelId) as RGBAColor | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVertexAttributeNoDataColor(
       modelId,
@@ -119,15 +143,18 @@ const surfacesVertexAttributeNoDataColor = computed({
   },
 });
 
-const surfacesPolygonAttributeName = computed({
+const surfacesPolygonAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId),
   set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, targetSurfaceIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfacesPolygonAttributeItem = computed({
+const surfacesPolygonAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesPolygonAttributeItem(modelId, targetSurfaceIds, newValue);
@@ -135,20 +162,24 @@ const surfacesPolygonAttributeItem = computed({
   },
 });
 
-const surfacesPolygonAttributeRange = computed({
+const surfacesPolygonAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId),
   set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesPolygonAttributeRange(
       modelId,
       targetSurfaceIds,
-      newValue[0],
-      newValue[1],
+      minimum,
+      maximum,
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfacesPolygonAttributeColorMap = computed({
+const surfacesPolygonAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeColorMap(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesPolygonAttributeColorMap(
@@ -160,8 +191,9 @@ const surfacesPolygonAttributeColorMap = computed({
   },
 });
 
-const surfacesPolygonAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeNoDataColor(modelId),
+const surfacesPolygonAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelSurfacesPolygonAttributeNoDataColor(modelId) as RGBAColor | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesPolygonAttributeNoDataColor(
       modelId,
@@ -173,91 +205,129 @@ const surfacesPolygonAttributeNoDataColor = computed({
 });
 
 // Individual Attributes
-const vertexAttributeName = computed({
+const vertexAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, surfaceId),
   set: async (newValue) => {
+    if (surfaceId === undefined || newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, [surfaceId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeItem = computed({
+const vertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId, surfaceId),
   set: async (newValue) => {
+    if (surfaceId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesVertexAttributeItem(modelId, [surfaceId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeRange = computed({
+const vertexAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId, surfaceId),
   set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (surfaceId === undefined || minimum === undefined || maximum === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesVertexAttributeRange(
       modelId,
       [surfaceId],
-      newValue[0],
-      newValue[1],
+      minimum,
+      maximum,
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeColorMap = computed({
+const vertexAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeColorMap(modelId, surfaceId),
   set: async (newValue) => {
+    if (surfaceId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesVertexAttributeColorMap(modelId, [surfaceId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeNoDataColor(modelId, surfaceId),
+const vertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelSurfacesVertexAttributeNoDataColor(modelId, surfaceId) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
+    if (surfaceId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesVertexAttributeNoDataColor(modelId, [surfaceId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const polygonAttributeName = computed({
+const polygonAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, surfaceId),
   set: async (newValue) => {
+    if (surfaceId === undefined || newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, [surfaceId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const polygonAttributeItem = computed({
+const polygonAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId, surfaceId),
   set: async (newValue) => {
+    if (surfaceId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesPolygonAttributeItem(modelId, [surfaceId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const polygonAttributeRange = computed({
+const polygonAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId, surfaceId),
   set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (surfaceId === undefined || minimum === undefined || maximum === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesPolygonAttributeRange(
       modelId,
       [surfaceId],
-      newValue[0],
-      newValue[1],
+      minimum,
+      maximum,
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const polygonAttributeColorMap = computed({
+const polygonAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeColorMap(modelId, surfaceId),
   set: async (newValue) => {
+    if (surfaceId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesPolygonAttributeColorMap(modelId, [surfaceId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const polygonAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeNoDataColor(modelId, surfaceId),
+const polygonAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelSurfacesPolygonAttributeNoDataColor(modelId, surfaceId) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
+    if (surfaceId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelSurfacesPolygonAttributeNoDataColor(
       modelId,
       [surfaceId],

package/app/components/Viewer/Grid/2D/CellsOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import Grid2D_Cells from "@ogw_front/assets/viewer_svgs/grid_2d_cells.svg";
-import ViewerGenericMeshCellsOptions from "@ogw_front/components/Viewer/Generic/Mesh/CellsOptions";
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ViewerGenericMeshCellsOptions from "@ogw_front/components/Viewer/Generic/Mesh/CellsOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Viewer/Grid/2D/EdgesOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import Grid2D_Edges from "@ogw_front/assets/viewer_svgs/grid_2d_edges.svg";
-import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions";
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Viewer/Grid/2D/PointsOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import Grid2D_Points from "@ogw_front/assets/viewer_svgs/grid_2d_points.svg";
-import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions";
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Viewer/Grid/3D/CellsOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import Grid3DCells from "@ogw_front/assets/viewer_svgs/grid_3d_cells.svg";
-import ViewerGenericMeshCellsOptions from "@ogw_front/components/Viewer/Generic/Mesh/CellsOptions";
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ViewerGenericMeshCellsOptions from "@ogw_front/components/Viewer/Generic/Mesh/CellsOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Viewer/Grid/3D/EdgesOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import Grid3D_Edges from "@ogw_front/assets/viewer_svgs/grid_3d_edges.svg";
-import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions";
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>