Feat/color bar

app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -44,22 +44,87 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
+      dataStyleStore.setMeshEdgesVertexAttributeName(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const edge_attribute = computed({
-    get: () => dataStyleStore.meshEdgesEdgeAttribute(id.value),
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshEdgesEdgeAttribute(id.value, newValue)
+      dataStyleStore.setMeshEdgesVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshEdgesVertexAttributeColorMap(id.value)
+      if (colorMap) {
+        dataStyleStore.setMeshEdgesVertexAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshEdgesVertexAttributeRange(id.value)
+      dataStyleStore.setMeshEdgesVertexAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_name = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesEdgeAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_range = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesEdgeAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value)
+      if (colorMap) {
+        dataStyleStore.setMeshEdgesEdgeAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_color_map = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshEdgesEdgeAttributeRange(id.value)
+      dataStyleStore.setMeshEdgesEdgeAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -92,8 +157,12 @@
               :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-model:vertex_attribute_name="vertex_attribute_name"
+              v-model:vertex_attribute_range="vertex_attribute_range"
+              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+              v-model:edge_attribute_name="edge_attribute_name"
+              v-model:edge_attribute_range="edge_attribute_range"
+              v-model:edge_attribute_color_map="edge_attribute_color_map"
             />
           </v-col>
         </v-row>

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

@@ -45,22 +45,87 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshCellsVertexAttribute(id.value),
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshCellsVertexAttribute(id.value, newValue)
+      dataStyleStore.setMeshCellsVertexAttributeName(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const cell_attribute = computed({
-    get: () => dataStyleStore.meshCellsCellAttribute(id.value),
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshCellsCellAttribute(id.value, newValue)
+      dataStyleStore.setMeshCellsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshCellsVertexAttributeColorMap(id.value)
+      if (colorMap) {
+        dataStyleStore.setMeshCellsVertexAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshCellsVertexAttributeRange(id.value)
+      dataStyleStore.setMeshCellsVertexAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_name = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshCellsCellAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_range = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshCellsCellAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshCellsCellAttributeColorMap(id.value)
+      if (colorMap) {
+        dataStyleStore.setMeshCellsCellAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_color_map = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshCellsCellAttributeRange(id.value)
+      dataStyleStore.setMeshCellsCellAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -75,8 +140,12 @@
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:textures="textures"
-          v-model:vertex_attribute="vertex_attribute"
-          v-model:cell_attribute="cell_attribute"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:cell_attribute_name="cell_attribute_name"
+          v-model:cell_attribute_range="cell_attribute_range"
+          v-model:cell_attribute_color_map="cell_attribute_color_map"
         />
       </template>
     </template>

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

@@ -44,15 +44,7 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"

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

@@ -45,7 +45,6 @@
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -78,7 +77,6 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
-              v-model:vertex_attribute="vertex_attribute"
             />
           </v-col>
         </v-row>

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

@@ -47,7 +47,6 @@
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"

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

@@ -39,7 +39,6 @@
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"

app/components/Viewer/Options/AttributeColorBar.vue

@@ -0,0 +1,80 @@
+<script setup>
+  import ColorMapPicker from "./ColorMapPicker.vue"
+
+  const props = defineProps({
+    autoMin: { type: Number, default: 0 },
+    autoMax: { type: Number, default: 1 },
+  })
+
+  const minimum = defineModel("minimum", { type: Number })
+  const maximum = defineModel("maximum", { type: Number })
+  const colorMap = defineModel("colorMap", { type: String })
+
+  const minValue = computed({
+    get: () => minimum.value ?? props.autoMin,
+    set: (val) => {
+      minimum.value = val
+    },
+  })
+
+  const maxValue = computed({
+    get: () => maximum.value ?? props.autoMax,
+    set: (val) => {
+      maximum.value = val
+    },
+  })
+
+  onMounted(() => {
+    if (minimum.value === undefined) minimum.value = props.autoMin
+    if (maximum.value === undefined) maximum.value = props.autoMax
+  })
+
+  function reset() {
+    minimum.value = props.autoMin
+    maximum.value = props.autoMax
+  }
+</script>
+
+<template>
+  <div class="attribute-colorbar mt-3">
+    <ColorMapPicker v-model="colorMap" :min="minValue" :max="maxValue" />
+
+    <v-row dense align="center" class="mt-2">
+      <v-col cols="5">
+        <v-text-field
+          v-model.number="minValue"
+          label="Min"
+          type="number"
+          density="compact"
+          hide-details
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="2" class="d-flex justify-center">
+        <v-btn
+          icon="mdi-arrow-left-right"
+          size="x-small"
+          variant="text"
+          @click="reset"
+          v-tooltip="'Reset range'"
+        />
+      </v-col>
+      <v-col cols="5">
+        <v-text-field
+          v-model.number="maxValue"
+          label="Max"
+          type="number"
+          density="compact"
+          hide-details
+          variant="outlined"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<style scoped>
+  .attribute-colorbar {
+    width: 100%;
+  }
+</style>