Skip to content

Commit d3e605a

Browse files
SpliiTSpliiT
committed
efactor attribute selectors architecture
- Implement new defineModel pattern with separate v-models for name, range, and colorMap - Add per-attribute persistence for range and colorMap settings - Apply "Cool to Warm" colormap by default on first attribute selection - Fix immediate colormap update when modifying range min/max - Use local state in AttributeSelectors with event-driven communication - Add remoteRender() call in store after colormap application Affected components: - AttributeSelectors (Vertex, Edge, Cell, Polygon, Polyhedron) - ColoringTypeSelector - SpecificOptions (Polygons, Points, Polyhedra, Cells, Edges) - mesh/polygons.js store
1 parent d846347 commit d3e605a

17 files changed

Lines changed: 823 additions & 548 deletions

‎app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue‎

Lines changed: 100 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,20 +44,106 @@
4444
hybridViewerStore.remoteRender()
4545
},
4646
})
47-
const vertex_attribute = computed({
48-
get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
47+
const vertex_attribute_name = computed({
48+
get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
49+
set: () => {
50+
// Name is set via attribute-selected event to pass defaultMin/defaultMax
51+
},
52+
})
53+
const vertex_attribute_range = computed({
54+
get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
4955
set: (newValue) => {
50-
dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
56+
dataStyleStore.setMeshEdgesVertexAttributeRange(
57+
id.value,
58+
newValue[0],
59+
newValue[1],
60+
)
61+
// Re-apply colormap with new range
62+
const colorMap = dataStyleStore.meshEdgesVertexAttributeColorMap(id.value)
63+
if (colorMap) {
64+
dataStyleStore.setMeshEdgesVertexAttributeColorMap(
65+
id.value,
66+
colorMap,
67+
newValue[0],
68+
newValue[1],
69+
)
70+
}
5171
hybridViewerStore.remoteRender()
5272
},
5373
})
54-
const edge_attribute = computed({
55-
get: () => dataStyleStore.meshEdgesEdgeAttribute(id.value),
74+
const vertex_attribute_color_map = computed({
75+
get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
5676
set: (newValue) => {
57-
dataStyleStore.setMeshEdgesEdgeAttribute(id.value, newValue)
77+
const range = dataStyleStore.meshEdgesVertexAttributeRange(id.value)
78+
dataStyleStore.setMeshEdgesVertexAttributeColorMap(
79+
id.value,
80+
newValue,
81+
range[0],
82+
range[1],
83+
)
5884
hybridViewerStore.remoteRender()
5985
},
6086
})
87+
const edge_attribute_name = computed({
88+
get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
89+
set: () => {
90+
// Name is set via attribute-selected event to pass defaultMin/defaultMax
91+
},
92+
})
93+
const edge_attribute_range = computed({
94+
get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
95+
set: (newValue) => {
96+
dataStyleStore.setMeshEdgesEdgeAttributeRange(
97+
id.value,
98+
newValue[0],
99+
newValue[1],
100+
)
101+
// Re-apply colormap with new range
102+
const colorMap = dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value)
103+
if (colorMap) {
104+
dataStyleStore.setMeshEdgesEdgeAttributeColorMap(
105+
id.value,
106+
colorMap,
107+
newValue[0],
108+
newValue[1],
109+
)
110+
}
111+
hybridViewerStore.remoteRender()
112+
},
113+
})
114+
const edge_attribute_color_map = computed({
115+
get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
116+
set: (newValue) => {
117+
const range = dataStyleStore.meshEdgesEdgeAttributeRange(id.value)
118+
dataStyleStore.setMeshEdgesEdgeAttributeColorMap(
119+
id.value,
120+
newValue,
121+
range[0],
122+
range[1],
123+
)
124+
hybridViewerStore.remoteRender()
125+
},
126+
})
127+
128+
// Event handlers for attribute selection with default min/max
129+
function onVertexAttributeSelected(data) {
130+
dataStyleStore.setMeshEdgesVertexAttributeName(
131+
id.value,
132+
data.name,
133+
data.defaultMin,
134+
data.defaultMax,
135+
)
136+
hybridViewerStore.remoteRender()
137+
}
138+
function onEdgeAttributeSelected(data) {
139+
dataStyleStore.setMeshEdgesEdgeAttributeName(
140+
id.value,
141+
data.name,
142+
data.defaultMin,
143+
data.defaultMax,
144+
)
145+
hybridViewerStore.remoteRender()
146+
}
61147
</script>
62148
<template>
63149
<ViewerContextMenuItem
@@ -91,9 +177,14 @@
91177
:id="id"
92178
v-model:coloring_style_key="coloring_style_key"
93179
v-model:color="color"
94-
v-model:vertex_attribute="vertex_attribute"
95-
v-model:edge_attribute="edge_attribute"
96-
mesh-type="edges"
180+
v-model:vertex_attribute_name="vertex_attribute_name"
181+
v-model:vertex_attribute_range="vertex_attribute_range"
182+
v-model:vertex_attribute_color_map="vertex_attribute_color_map"
183+
v-model:edge_attribute_name="edge_attribute_name"
184+
v-model:edge_attribute_range="edge_attribute_range"
185+
v-model:edge_attribute_color_map="edge_attribute_color_map"
186+
@vertex-attribute-selected="onVertexAttributeSelected"
187+
@edge-attribute-selected="onEdgeAttributeSelected"
97188
/>
98189
</v-col>
99190
</v-row>

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

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,106 @@
4545
hybridViewerStore.remoteRender()
4646
},
4747
})
48+
const vertex_attribute_name = computed({
49+
get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
50+
set: () => {
51+
// Name is set via attribute-selected event to pass defaultMin/defaultMax
52+
},
53+
})
54+
const vertex_attribute_range = computed({
55+
get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
56+
set: (newValue) => {
57+
dataStyleStore.setMeshCellsVertexAttributeRange(
58+
id.value,
59+
newValue[0],
60+
newValue[1],
61+
)
62+
// Re-apply colormap with new range
63+
const colorMap = dataStyleStore.meshCellsVertexAttributeColorMap(id.value)
64+
if (colorMap) {
65+
dataStyleStore.setMeshCellsVertexAttributeColorMap(
66+
id.value,
67+
colorMap,
68+
newValue[0],
69+
newValue[1],
70+
)
71+
}
72+
hybridViewerStore.remoteRender()
73+
},
74+
})
75+
const vertex_attribute_color_map = computed({
76+
get: () => dataStyleStore.meshCellsVertexAttributeColorMap(id.value),
77+
set: (newValue) => {
78+
const range = dataStyleStore.meshCellsVertexAttributeRange(id.value)
79+
dataStyleStore.setMeshCellsVertexAttributeColorMap(
80+
id.value,
81+
newValue,
82+
range[0],
83+
range[1],
84+
)
85+
hybridViewerStore.remoteRender()
86+
},
87+
})
88+
const cell_attribute_name = computed({
89+
get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
90+
set: () => {
91+
// Name is set via attribute-selected event to pass defaultMin/defaultMax
92+
},
93+
})
94+
const cell_attribute_range = computed({
95+
get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
96+
set: (newValue) => {
97+
dataStyleStore.setMeshCellsCellAttributeRange(
98+
id.value,
99+
newValue[0],
100+
newValue[1],
101+
)
102+
// Re-apply colormap with new range
103+
const colorMap = dataStyleStore.meshCellsCellAttributeColorMap(id.value)
104+
if (colorMap) {
105+
dataStyleStore.setMeshCellsCellAttributeColorMap(
106+
id.value,
107+
colorMap,
108+
newValue[0],
109+
newValue[1],
110+
)
111+
}
112+
hybridViewerStore.remoteRender()
113+
},
114+
})
115+
const cell_attribute_color_map = computed({
116+
get: () => dataStyleStore.meshCellsCellAttributeColorMap(id.value),
117+
set: (newValue) => {
118+
const range = dataStyleStore.meshCellsCellAttributeRange(id.value)
119+
dataStyleStore.setMeshCellsCellAttributeColorMap(
120+
id.value,
121+
newValue,
122+
range[0],
123+
range[1],
124+
)
125+
hybridViewerStore.remoteRender()
126+
},
127+
})
128+
129+
// Event handlers for attribute selection with default min/max
130+
function onVertexAttributeSelected(data) {
131+
dataStyleStore.setMeshCellsVertexAttributeName(
132+
id.value,
133+
data.name,
134+
data.defaultMin,
135+
data.defaultMax,
136+
)
137+
hybridViewerStore.remoteRender()
138+
}
139+
function onCellAttributeSelected(data) {
140+
dataStyleStore.setMeshCellsCellAttributeName(
141+
id.value,
142+
data.name,
143+
data.defaultMin,
144+
data.defaultMax,
145+
)
146+
hybridViewerStore.remoteRender()
147+
}
48148
</script>
49149
<template>
50150
<ViewerContextMenuItem
@@ -60,7 +160,14 @@
60160
v-model:coloring_style_key="coloring_style_key"
61161
v-model:color="color"
62162
v-model:textures="textures"
63-
mesh-type="cells"
163+
v-model:vertex_attribute_name="vertex_attribute_name"
164+
v-model:vertex_attribute_range="vertex_attribute_range"
165+
v-model:vertex_attribute_color_map="vertex_attribute_color_map"
166+
v-model:cell_attribute_name="cell_attribute_name"
167+
v-model:cell_attribute_range="cell_attribute_range"
168+
v-model:cell_attribute_color_map="cell_attribute_color_map"
169+
@vertex-attribute-selected="onVertexAttributeSelected"
170+
@cell-attribute-selected="onCellAttributeSelected"
64171
/>
65172
</template>
66173
</template>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@
7777
:id="id"
7878
v-model:coloring_style_key="coloring_style_key"
7979
v-model:color="color"
80-
mesh-type="edges"
8180
/>
8281
</v-col>
8382
</v-row>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@
7777
:id="id"
7878
v-model:coloring_style_key="coloring_style_key"
7979
v-model:color="color"
80-
mesh-type="points"
8180
/>
8281
</v-col>
8382
</v-row>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,6 @@
6161
v-model:coloring_style_key="coloring_style_key"
6262
v-model:color="color"
6363
v-model:textures="textures"
64-
:polygon_attribute="{}"
65-
mesh-type="polygons"
6664
/>
6765
</template>
6866
</template>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,6 @@
5252
:id="id"
5353
v-model:coloring_style_key="coloring_style_key"
5454
v-model:color="color"
55-
:polyhedron_attribute="{}"
56-
mesh-type="polyhedra"
5755
/>
5856
</template>
5957
</template>

‎app/components/Viewer/Options/AttributeColorBar.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@
88
99
const minimum = defineModel("minimum", { type: Number })
1010
const maximum = defineModel("maximum", { type: Number })
11-
const colorMap = defineModel("colorMap", {
12-
type: String,
13-
default: "Cool to Warm",
14-
})
11+
const colorMap = defineModel("colorMap", { type: String })
1512
1613
const minValue = computed({
1714
get: () => minimum.value ?? props.autoMin,

0 commit comments

Comments
 (0)