Feat/color bar

app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -59,7 +59,6 @@
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -94,6 +93,7 @@
               v-model:color="color"
               v-model:vertex_attribute="vertex_attribute"
               v-model:edge_attribute="edge_attribute"
+              mesh-type="edges"
             />
           </v-col>
         </v-row>

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

@@ -60,7 +60,6 @@
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -77,6 +76,7 @@
           v-model:textures="textures"
           v-model:vertex_attribute="vertex_attribute"
           v-model:cell_attribute="cell_attribute"
+          mesh-type="cells"
         />
       </template>
     </template>

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

@@ -52,7 +52,6 @@
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -85,6 +84,8 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
+              v-model:vertex_attribute="vertex_attribute"
+              mesh-type="edges"
             />
           </v-col>
         </v-row>

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

@@ -44,8 +44,14 @@
       hybridViewerStore.remoteRender()
     },
   })
+  const vertex_attribute = computed({
+    get: () => dataStyleStore.meshPointsVertexAttribute(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsVertexAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -79,6 +85,7 @@
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
               v-model:vertex_attribute="vertex_attribute"
+              mesh-type="points"
             />
           </v-col>
         </v-row>

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

@@ -46,8 +46,21 @@
       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>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -62,6 +75,9 @@
           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"
+          mesh-type="polygons"
         />
       </template>
     </template>

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

@@ -38,8 +38,21 @@
       hybridViewerStore.remoteRender()
     },
   })
+  const vertex_attribute = computed({
+    get: () => dataStyleStore.meshPolyhedraVertexAttribute(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolyhedraVertexAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polyhedron_attribute = computed({
+    get: () => dataStyleStore.meshPolyhedraPolyhedronAttribute(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolyhedraPolyhedronAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -53,6 +66,9 @@
           :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"
+          mesh-type="polyhedra"
         />
       </template>
     </template>

app/components/Viewer/Options/AttributeColorBar.vue

@@ -0,0 +1,83 @@
+<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,
+    default: "Cool to Warm",
+  })
+
+  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>