@geode/opengeodeweb-front 10.6.2 → 10.6.3-rc.1

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

@@ -1,85 +1,74 @@
 <script setup>
-  import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
-  import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector"
-  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
+import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
-  import { useDataStyleStore } from "@ogw_front/stores/data_style"
-  import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-  const dataStyleStore = useDataStyleStore()
-  const hybridViewerStore = useHybridViewerStore()
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
 
-  const { itemProps, btn_image } = defineProps({
-    itemProps: { type: Object, required: true },
-    btn_image: { type: String, required: true },
-  })
+const { itemProps, btn_image } = defineProps({
+  itemProps: { type: Object, required: true },
+  btn_image: { type: String, required: true },
+});
 
-  const id = toRef(() => itemProps.id)
+const id = toRef(() => itemProps.id);
 
-  const visibility = computed({
-    get: () => dataStyleStore.meshPointsVisibility(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPointsVisibility(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const size = computed({
-    get: () => dataStyleStore.meshPointsSize(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPointsSize(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const coloring_style_key = computed({
-    get: () => dataStyleStore.meshPointsActiveColoring(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPointsActiveColoring(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const color = computed({
-    get: () => dataStyleStore.meshPointsColor(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPointsColor(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute_name = computed({
-    get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPointsVertexAttributeName(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute_range = computed({
-    get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPointsVertexAttributeRange(
-        id.value,
-        newValue[0],
-        newValue[1],
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute_color_map = computed({
-    get: () => dataStyleStore.meshPointsVertexAttributeColorMap(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPointsVertexAttributeColorMap(
-        id.value,
-        newValue,
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
+const visibility = computed({
+  get: () => dataStyleStore.meshPointsVisibility(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPointsVisibility(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const size = computed({
+  get: () => dataStyleStore.meshPointsSize(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPointsSize(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const coloring_style_key = computed({
+  get: () => dataStyleStore.meshPointsActiveColoring(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPointsActiveColoring(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const color = computed({
+  get: () => dataStyleStore.meshPointsColor(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPointsColor(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_name = computed({
+  get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPointsVertexAttributeName(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed({
+  get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPointsVertexAttributeRange(id.value, newValue[0], newValue[1]);
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed({
+  get: () => dataStyleStore.meshPointsVertexAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPointsVertexAttributeColorMap(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
-  <ViewerContextMenuItem
-    :itemProps="itemProps"
-    tooltip="Points options"
-    :btn_image="btn_image"
-  >
+  <ViewerContextMenuItem :itemProps="itemProps" tooltip="Points options" :btn_image="btn_image">
     <template #options>
       <ViewerOptionsVisibilitySwitch v-model="visibility" />
       <template v-if="visibility">

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

@@ -1,120 +1,96 @@
 <script setup>
-  import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
-  import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector"
-  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
+import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
-  import { useDataStyleStore } from "@ogw_front/stores/data_style"
-  import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-  const dataStyleStore = useDataStyleStore()
-  const hybridViewerStore = useHybridViewerStore()
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
 
-  const { itemProps, btn_image, tooltip } = defineProps({
-    itemProps: { type: Object, required: true },
-    btn_image: { type: String, required: true },
-    tooltip: { type: String, required: false, default: "Polygons options" },
-  })
+const { itemProps, btn_image, tooltip } = defineProps({
+  itemProps: { type: Object, required: true },
+  btn_image: { type: String, required: true },
+  tooltip: { type: String, required: false, default: "Polygons options" },
+});
 
-  const id = toRef(() => itemProps.id)
+const id = toRef(() => itemProps.id);
 
-  const visibility = computed({
-    get: () => dataStyleStore.meshPolygonsVisibility(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolygonsVisibility(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const coloring_style_key = computed({
-    get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const color = computed({
-    get: () => dataStyleStore.meshPolygonsColor(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolygonsColor(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const textures = computed({
-    get: () => dataStyleStore.meshPolygonsTextures(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolygonsTextures(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute_name = computed({
-    get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolygonsVertexAttributeName(
-        id.value,
-        newValue,
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute_range = computed({
-    get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolygonsVertexAttributeRange(
-        id.value,
-        newValue[0],
-        newValue[1],
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute_color_map = computed({
-    get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolygonsVertexAttributeColorMap(
-        id.value,
-        newValue,
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const polygon_attribute_name = computed({
-    get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolygonsPolygonAttributeName(
-        id.value,
-        newValue,
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const polygon_attribute_range = computed({
-    get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolygonsPolygonAttributeRange(
-        id.value,
-        newValue[0],
-        newValue[1],
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const polygon_attribute_color_map = computed({
-    get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(
-        id.value,
-        newValue,
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
+const visibility = computed({
+  get: () => dataStyleStore.meshPolygonsVisibility(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolygonsVisibility(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const coloring_style_key = computed({
+  get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const color = computed({
+  get: () => dataStyleStore.meshPolygonsColor(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolygonsColor(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const textures = computed({
+  get: () => dataStyleStore.meshPolygonsTextures(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolygonsTextures(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_name = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolygonsVertexAttributeName(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolygonsVertexAttributeRange(id.value, newValue[0], newValue[1]);
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolygonsVertexAttributeColorMap(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_name = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolygonsPolygonAttributeName(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_range = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolygonsPolygonAttributeRange(id.value, newValue[0], newValue[1]);
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_color_map = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
-  <ViewerContextMenuItem
-    :itemProps="itemProps"
-    :tooltip="tooltip"
-    :btn_image="btn_image"
-  >
+  <ViewerContextMenuItem :itemProps="itemProps" :tooltip="tooltip" :btn_image="btn_image">
     <template #options>
       <ViewerOptionsVisibilitySwitch v-model="visibility" />
       <template v-if="visibility">

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

@@ -1,114 +1,93 @@
 <script setup>
-  import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
-  import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector"
-  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
+import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
-  import { useDataStyleStore } from "@ogw_front/stores/data_style"
-  import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-  const dataStyleStore = useDataStyleStore()
-  const hybridViewerStore = useHybridViewerStore()
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
 
-  const { itemProps, btn_image, tooltip } = defineProps({
-    itemProps: { type: Object, required: true },
-    btn_image: { type: String, required: true },
-    tooltip: { type: String, required: false, default: "Polyhedra options" },
-  })
+const { itemProps, btn_image, tooltip } = defineProps({
+  itemProps: { type: Object, required: true },
+  btn_image: { type: String, required: true },
+  tooltip: { type: String, required: false, default: "Polyhedra options" },
+});
 
-  const id = toRef(() => itemProps.id)
+const id = toRef(() => itemProps.id);
 
-  const visibility = computed({
-    get: () => dataStyleStore.meshPolyhedraVisibility(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const coloring_style_key = computed({
-    get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const color = computed({
-    get: () => dataStyleStore.meshPolyhedraColor(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolyhedraColor(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute_name = computed({
-    get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolyhedraVertexAttributeName(
-        id.value,
-        newValue,
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute_range = computed({
-    get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolyhedraVertexAttributeRange(
-        id.value,
-        newValue[0],
-        newValue[1],
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute_color_map = computed({
-    get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(
-        id.value,
-        newValue,
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const polyhedron_attribute_name = computed({
-    get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(
-        id.value,
-        newValue,
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const polyhedron_attribute_range = computed({
-    get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(
-        id.value,
-        newValue[0],
-        newValue[1],
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const polyhedron_attribute_color_map = computed({
-    get: () =>
-      dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(
-        id.value,
-        newValue,
-      )
-      hybridViewerStore.remoteRender()
-    },
-  })
+const visibility = computed({
+  get: () => dataStyleStore.meshPolyhedraVisibility(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const coloring_style_key = computed({
+  get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const color = computed({
+  get: () => dataStyleStore.meshPolyhedraColor(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolyhedraColor(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_name = computed({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolyhedraVertexAttributeName(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolyhedraVertexAttributeRange(id.value, newValue[0], newValue[1]);
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_name = computed({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_range = computed({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(
+      id.value,
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polyhedron_attribute_color_map = computed({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
-  <ViewerContextMenuItem
-    :itemProps="itemProps"
-    :tooltip="tooltip"
-    :btn_image="btn_image"
-  >
+  <ViewerContextMenuItem :itemProps="itemProps" :tooltip="tooltip" :btn_image="btn_image">
     <template #options>
       <ViewerOptionsVisibilitySwitch v-model="visibility" />
       <template v-if="visibility">
@@ -121,9 +100,7 @@
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:polyhedron_attribute_name="polyhedron_attribute_name"
           v-model:polyhedron_attribute_range="polyhedron_attribute_range"
-          v-model:polyhedron_attribute_color_map="
-            polyhedron_attribute_color_map
-          "
+          v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
         />
       </template>
     </template>

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

@@ -1,35 +1,31 @@
 <script setup>
-  import SurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg"
-  import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
-  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
+import SurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
-  import { useDataStyleStore } from "@ogw_front/stores/data_style"
-  import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-  const dataStyleStore = useDataStyleStore()
-  const hybridViewerStore = useHybridViewerStore()
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
 
-  const { itemProps } = defineProps({
-    itemProps: { type: Object, required: true },
-  })
+const { itemProps } = defineProps({
+  itemProps: { type: Object, required: true },
+});
 
-  const id = toRef(() => itemProps.id)
+const id = toRef(() => itemProps.id);
 
-  const visibility = computed({
-    get: () => dataStyleStore.modelEdgesVisibility(id.value),
-    set: async (newValue) => {
-      await dataStyleStore.setModelEdgesVisibility(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
+const visibility = computed({
+  get: () => dataStyleStore.modelEdgesVisibility(id.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelEdgesVisibility(id.value, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
-  <ViewerContextMenuItem
-    :itemProps="itemProps"
-    tooltip="Edges options"
-    :btn_image="SurfaceEdges"
-  >
+  <ViewerContextMenuItem :itemProps="itemProps" tooltip="Edges options" :btn_image="SurfaceEdges">
     <template #options>
       <ViewerOptionsVisibilitySwitch v-model="visibility" />
     </template>