Fix/context menu edged curve

app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -0,0 +1,103 @@
+<template>
+  <ViewerContextMenuItem
+    :itemProps="props.itemProps"
+    tooltip="Edges options"
+    :btn_image="EdgedCurveEdges"
+  >
+    <template #options>
+      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <template v-if="visibility">
+        <v-row class="pa-0" align="center">
+          <v-divider />
+          <v-col cols="auto" justify="center">
+            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
+          </v-col>
+          <v-col justify="center">
+            <v-slider
+              v-model="size"
+              hide-details
+              min="0"
+              max="20"
+              step="2"
+              thumb-color="black"
+              ticks
+            />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <ViewerOptionsColoringTypeSelector
+              :id="id"
+              v-model:coloring_style_key="coloring_style_key"
+              v-model:color="color"
+              v-model:vertex_attribute="vertex_attribute"
+              v-model:edge_attribute="edge_attribute"
+            />
+          </v-col>
+        </v-row>
+      </template>
+    </template>
+  </ViewerContextMenuItem>
+</template>
+
+<script setup>
+  import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
+  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
+  import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector"
+  import EdgedCurveEdges from "@ogw_front/assets/viewer_svgs/edged_curve_edges.svg"
+
+  import { useDataStyleStore } from "@ogw_front/stores/data_style"
+  import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
+
+  const dataStyleStore = useDataStyleStore()
+  const hybridViewerStore = useHybridViewerStore()
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+
+  const id = toRef(() => props.itemProps.id)
+
+  const visibility = computed({
+    get: () => dataStyleStore.meshEdgesVisibility(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesVisibility(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const size = computed({
+    get: () => dataStyleStore.meshEdgesWidth(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesWidth(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const coloring_style_key = computed({
+    get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const color = computed({
+    get: () => dataStyleStore.meshEdgesColor(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesColor(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttribute(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesEdgeAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+</script>

app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -7,20 +7,41 @@
     <template #options>
       <ViewerOptionsVisibilitySwitch v-model="visibility" />
       <template v-if="visibility">
-        <ViewerOptionsColoringTypeSelector
-          :id="id"
-          v-model:coloring_style_key="coloring_style_key"
-          v-model:color="color"
-        />
+        <v-row class="pa-0" align="center">
+          <v-divider />
+          <v-col cols="auto" justify="center">
+            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
+          </v-col>
+          <v-col justify="center">
+            <v-slider
+              v-model="size"
+              hide-details
+              min="0"
+              max="20"
+              step="2"
+              thumb-color="black"
+              ticks
+            />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <ViewerOptionsColoringTypeSelector
+              :id="id"
+              v-model:coloring_style_key="coloring_style_key"
+              v-model:color="color"
+            />
+          </v-col>
+        </v-row>
       </template>
     </template>
   </ViewerContextMenuItem>
 </template>
 
 <script setup>
   import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
   import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
   import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector"
 
   import { useDataStyleStore } from "@ogw_front/stores/data_style"
   import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
@@ -43,9 +64,9 @@
     },
   })
   const size = computed({
-    get: () => dataStyleStore.edgesSize(id.value),
+    get: () => dataStyleStore.meshEdgesWidth(id.value),
     set: (newValue) => {
-      dataStyleStore.setEdgesSize(id.value, newValue)
+      dataStyleStore.setMeshEdgesWidth(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
@@ -63,4 +84,11 @@
       hybridViewerStore.remoteRender()
     },
   })
+  const vertex_attribute = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
 </script>

app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -30,6 +30,7 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
+              v-model:vertex_attribute="vertex_attribute"
             />
           </v-col>
         </v-row>
@@ -84,11 +85,4 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPointsVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsVertexAttribute(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
 </script>

app/components/Viewer/Generic/Mesh/PolygonsOptions.vue

@@ -12,8 +12,6 @@
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:textures="textures"
-          v-model:vertex_attribute="vertex_attribute"
-          v-model:polygon_attribute="polygon_attribute"
         />
       </template>
     </template>
@@ -34,6 +32,7 @@
   const props = defineProps({
     itemProps: { type: Object, required: true },
     btn_image: { type: String, required: true },
+
     tooltip: { type: String, required: false, default: "Polygons options" },
   })
 
@@ -67,18 +66,4 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPolygonsVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsVertexAttribute(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const polygon_attribute = computed({
-    get: () => dataStyleStore.meshPolygonsPolygonAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsPolygonAttribute(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
 </script>

app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue

@@ -6,14 +6,11 @@
   >
     <template #options>
       <ViewerOptionsVisibilitySwitch v-model="visibility" />
-
       <template v-if="visibility">
         <ViewerOptionsColoringTypeSelector
           :id="id"
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
-          v-model:vertex_attribute="vertex_attribute"
-          v-model:polyhedron_attribute="polyhedron_attribute"
         />
       </template>
     </template>
@@ -60,18 +57,4 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.polyhedraVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setPolyhedraVertexAttribute(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const polyhedron_attribute = computed({
-    get: () => dataStyleStore.polyhedraPolyhedronAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setPolyhedraPolyhedronAttribute(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
 </script>

app/components/Viewer/Options/ColoringTypeSelector.vue

@@ -34,9 +34,12 @@
               :id="id"
             />
           </template>
-          <!-- <template v-if="coloring_style_key === edge_dict['value']">
-            <ViewerOptionsEdgeAttributeSelector v-model="edge_attribute" :id="id" />
-          </template> -->
+          <template v-if="coloring_style_key === edge_dict['value']">
+            <ViewerOptionsEdgeAttributeSelector
+              v-model="edge_attribute"
+              :id="id"
+            />
+          </template>
           <template v-if="coloring_style_key === cell_dict['value']">
             <ViewerOptionsCellAttributeSelector
               v-model="cell_attribute"
@@ -65,7 +68,7 @@
   import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker"
   import ViewerOptionsTexturesSelector from "@ogw_front/components/Viewer/Options/TexturesSelector"
   import ViewerOptionsVertexAttributeSelector from "@ogw_front/components/Viewer/Options/VertexAttributeSelector"
-  // import ViewerOptionsEdgeAttributeSelector from "@ogw_front/components/Viewer/Options/EdgeAttributeSelector"
+  import ViewerOptionsEdgeAttributeSelector from "@ogw_front/components/Viewer/Options/EdgeAttributeSelector"
   import ViewerOptionsPolygonAttributeSelector from "@ogw_front/components/Viewer/Options/PolygonAttributeSelector"
   import ViewerOptionsCellAttributeSelector from "@ogw_front/components/Viewer/Options/CellAttributeSelector"
   import ViewerOptionsPolyhedronAttributeSelector from "@ogw_front/components/Viewer/Options/PolyhedronAttributeSelector"
@@ -75,7 +78,7 @@
   const color = defineModel("color")
   const textures = defineModel("textures")
   const vertex_attribute = defineModel("vertex_attribute")
-  // const edge_attribute = defineModel("edge_attribute");
+  const edge_attribute = defineModel("edge_attribute")
   const cell_attribute = defineModel("cell_attribute")
   const polygon_attribute = defineModel("polygon_attribute")
   const polyhedron_attribute = defineModel("polyhedron_attribute")
@@ -91,7 +94,9 @@
   const has_vertex = computed(() =>
     vertex_attribute.value !== undefined ? true : false,
   )
-  // const has_edge = computed(() => (edge_attribute.value !== undefined ? true : false));
+  const has_edge = computed(() =>
+    edge_attribute.value !== undefined ? true : false,
+  )
   const has_cells = computed(() =>
     cell_attribute.value !== undefined ? true : false,
   )
@@ -105,7 +110,7 @@
   const color_dict = { name: "Color", value: "color" }
   const textures_dict = { name: "Textures", value: "textures" }
   const vertex_dict = { name: "Vertex attribute", value: "vertex" }
-  // const edge_dict = { name: "Edge attribute", value: "edge" }
+  const edge_dict = { name: "Edge attribute", value: "edge" }
   const cell_dict = { name: "Cell attribute", value: "cell" }
   const polygon_dict = { name: "Polygon attribute", value: "polygon" }
   const polyhedron_dict = {
@@ -117,7 +122,7 @@
     if (has_color.value) array.push(color_dict)
     if (has_textures.value) array.push(textures_dict)
     if (has_vertex.value) array.push(vertex_dict)
-    // if (has_edges.value) array.push(edge_dict);
+    if (has_edge.value) array.push(edge_dict)
     if (has_cells.value) array.push(cell_dict)
     if (has_polygons.value) array.push(polygon_dict)
     if (has_polyhedra.value) array.push(polyhedron_dict)