Skip to content

Commit 8f5df62

Browse files
SpliiTSpliiT
committed
fix logic and design
1 parent 4fb4d63 commit 8f5df62

17 files changed

+403
-108
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,13 @@
4444
hybridViewerStore.remoteRender()
4545
},
4646
})
47+
const vertex_attribute = computed({
48+
get: () => dataStyleStore.meshPointsVertexAttribute(id.value),
49+
set: (newValue) => {
50+
dataStyleStore.setMeshPointsVertexAttribute(id.value, newValue)
51+
hybridViewerStore.remoteRender()
52+
},
53+
})
4754
</script>
4855
<template>
4956
<ViewerContextMenuItem

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,20 @@
4646
hybridViewerStore.remoteRender()
4747
},
4848
})
49+
const vertex_attribute = computed({
50+
get: () => dataStyleStore.meshPolygonsVertexAttribute(id.value),
51+
set: (newValue) => {
52+
dataStyleStore.setMeshPolygonsVertexAttribute(id.value, newValue)
53+
hybridViewerStore.remoteRender()
54+
},
55+
})
56+
const polygon_attribute = computed({
57+
get: () => dataStyleStore.meshPolygonsPolygonAttribute(id.value),
58+
set: (newValue) => {
59+
dataStyleStore.setMeshPolygonsPolygonAttribute(id.value, newValue)
60+
hybridViewerStore.remoteRender()
61+
},
62+
})
4963
</script>
5064
<template>
5165
<ViewerContextMenuItem

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,20 @@
3838
hybridViewerStore.remoteRender()
3939
},
4040
})
41+
const vertex_attribute = computed({
42+
get: () => dataStyleStore.polyhedraVertexAttribute(id.value),
43+
set: (newValue) => {
44+
dataStyleStore.setPolyhedraVertexAttribute(id.value, newValue)
45+
hybridViewerStore.remoteRender()
46+
},
47+
})
48+
const polyhedron_attribute = computed({
49+
get: () => dataStyleStore.polyhedraPolyhedronAttribute(id.value),
50+
set: (newValue) => {
51+
dataStyleStore.setPolyhedraPolyhedronAttribute(id.value, newValue)
52+
hybridViewerStore.remoteRender()
53+
},
54+
})
4155
</script>
4256
<template>
4357
<ViewerContextMenuItem

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

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
cell_attribute.min,
115115
cell_attribute.max,
116116
)
117-
hybridViewerStore.remoteRender()
117+
onColorMapChange()
118118
}
119119
}
120120
@@ -126,8 +126,17 @@
126126
) {
127127
const preset = getRGBPointsFromPreset(cell_attribute.colorMap)
128128
if (preset && preset.RGBPoints) {
129-
const points = convertRGBPointsToSchemaFormat(preset.RGBPoints)
130-
dataStyleStore.setMeshCellsCellColorMap(props.id, points)
129+
const points = convertRGBPointsToSchemaFormat(
130+
preset.RGBPoints,
131+
cell_attribute.min,
132+
cell_attribute.max,
133+
)
134+
dataStyleStore.setMeshCellsCellColorMap(
135+
props.id,
136+
points,
137+
cell_attribute.min,
138+
cell_attribute.max,
139+
)
131140
hybridViewerStore.remoteRender()
132141
}
133142
}
@@ -143,8 +152,17 @@
143152
{ id: props.id },
144153
{
145154
response_function: (response) => {
146-
cell_attribute_names.value = response.cell_attribute_names
147-
cell_attribute_metadata.value = response.cell_attribute_metadata || {}
155+
const names = []
156+
const metadata = {}
157+
for (const attribute of response.attributes) {
158+
names.push(attribute.attribute_name)
159+
metadata[attribute.attribute_name] = [
160+
attribute.min_value,
161+
attribute.max_value,
162+
]
163+
}
164+
cell_attribute_names.value = names
165+
cell_attribute_metadata.value = metadata
148166
},
149167
},
150168
)

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

Lines changed: 68 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
const setCanvasRef = (name, el) => {
1515
if (el) {
1616
canvasRefs.value[name] = el
17+
drawPresetCanvas(name, el)
1718
}
1819
}
1920
@@ -106,51 +107,63 @@
106107
<div class="color-map-list">
107108
<v-text-field
108109
v-model="filterText"
109-
placeholder="Filter color maps..."
110+
placeholder="Search presets..."
110111
density="compact"
111-
clearable
112112
hide-details
113113
prepend-inner-icon="mdi-magnify"
114-
class="mb-2"
114+
variant="outlined"
115+
class="mb-3 search-input"
115116
/>
116-
<v-list density="compact" max-height="400" class="overflow-y-auto">
117+
<v-list
118+
density="compact"
119+
max-height="350"
120+
class="overflow-y-auto preset-list"
121+
>
117122
<template v-for="(item, index) in filteredPresets" :key="index">
123+
<!-- Group -->
118124
<v-list-group v-if="item.Children" :value="item.Name">
119125
<template #activator="{ props }">
120-
<v-list-item v-bind="props" :title="item.Name" />
126+
<v-list-item
127+
v-bind="props"
128+
:title="item.Name"
129+
class="group-header"
130+
/>
121131
</template>
132+
122133
<v-list-item
123134
v-for="(child, childIndex) in item.Children"
124135
:key="childIndex"
125136
@click="$emit('select', child)"
126-
class="preset-item"
137+
class="preset-item pl-4"
127138
>
128-
<v-list-item-title>{{ child.Name }}</v-list-item-title>
129-
<template #append>
139+
<div class="d-flex flex-column w-100 py-1">
140+
<span class="preset-item-name mb-1">{{ child.Name }}</span>
130141
<canvas
131142
:ref="(el) => setCanvasRef(child.Name, el)"
132-
width="100"
143+
width="200"
133144
height="20"
134145
class="preset-canvas"
135146
/>
136-
</template>
147+
</div>
137148
</v-list-item>
138149
</v-list-group>
150+
151+
<!-- Single Item -->
139152
<v-list-item
140153
v-else
141154
:key="index"
142155
@click="$emit('select', item)"
143156
class="preset-item"
144157
>
145-
<v-list-item-title>{{ item.Name }}</v-list-item-title>
146-
<template #append>
158+
<div class="d-flex flex-column w-100 py-1">
159+
<span class="preset-item-name mb-1">{{ item.Name }}</span>
147160
<canvas
148161
:ref="(el) => setCanvasRef(item.Name, el)"
149-
width="100"
162+
width="200"
150163
height="20"
151164
class="preset-canvas"
152165
/>
153-
</template>
166+
</div>
154167
</v-list-item>
155168
</template>
156169
</v-list>
@@ -159,20 +172,56 @@
159172

160173
<style scoped>
161174
.color-map-list {
162-
width: 350px;
163-
padding: 8px;
175+
width: 320px;
176+
padding: 12px;
177+
background-color: rgba(30, 30, 30, 0.85) !important;
178+
backdrop-filter: blur(20px);
179+
-webkit-backdrop-filter: blur(20px);
180+
border: 1px solid rgba(255, 255, 255, 0.15) !important;
181+
border-radius: 12px;
182+
}
183+
184+
.search-input :deep(.v-field__input) {
185+
font-size: 14px;
186+
color: white !important;
187+
}
188+
189+
.search-input :deep(.v-field__outline__start),
190+
.search-input :deep(.v-field__outline__end),
191+
.search-input :deep(.v-field__outline__notch::before),
192+
.search-input :deep(.v-field__outline__notch::after) {
193+
border-color: rgba(255, 255, 255, 0.2) !important;
194+
}
195+
196+
.preset-list {
197+
background: transparent !important;
198+
}
199+
200+
.group-header {
201+
font-weight: 600;
202+
color: #e0e0e0 !important;
164203
}
165204
166205
.preset-item {
167206
cursor: pointer;
207+
border-radius: 6px;
208+
margin-bottom: 2px;
209+
transition: background-color 0.2s;
168210
}
169211
170212
.preset-item:hover {
171-
background-color: rgba(0, 0, 0, 0.05);
213+
background-color: rgba(255, 255, 255, 0.1) !important;
214+
}
215+
216+
.preset-item-name {
217+
font-size: 12px;
218+
color: #bdbdbd;
172219
}
173220
174221
.preset-canvas {
175-
border: 1px solid #ccc;
176-
border-radius: 2px;
222+
width: 100%;
223+
height: 20px;
224+
border-radius: 4px;
225+
border: 1px solid rgba(255, 255, 255, 0.1);
177226
}
178227
</style>

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

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,12 @@
114114
}
115115
116116
onMounted(() => {
117+
nextTick(() => {
118+
drawLutCanvas()
119+
})
120+
})
121+
122+
watch(lutCanvas, () => {
117123
drawLutCanvas()
118124
})
119125
@@ -150,25 +156,28 @@
150156
flex-direction: column;
151157
gap: 4px;
152158
padding: 8px;
153-
border: 1px solid #ccc;
154159
border-radius: 4px;
155-
background: white;
160+
background-color: rgba(30, 30, 30, 0.85) !important;
161+
backdrop-filter: blur(20px);
162+
-webkit-backdrop-filter: blur(20px);
163+
border: 1px solid rgba(255, 255, 255, 0.15) !important;
164+
transition: background-color 0.2s;
156165
}
157166
158167
.color-map-picker:hover {
159-
background: #f5f5f5;
168+
background-color: rgba(255, 255, 255, 0.1) !important;
160169
}
161170
162171
.preset-name {
163172
font-size: 12px;
164173
font-weight: 500;
165-
color: #333;
174+
color: #e0e0e0;
166175
}
167176
168177
.lut-canvas {
169178
width: 100%;
170179
height: 20px;
171-
border: 1px solid #ddd;
180+
border: 1px solid rgba(255, 255, 255, 0.1);
172181
border-radius: 2px;
173182
}
174183
</style>

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

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@
8282
edge_attribute.max = range ? range[1] : 1
8383
edge_attribute.colorMap = "Cool to Warm"
8484
}
85-
// Apply the loaded settings to the viewer
8685
nextTick(() => {
8786
onScalarRangeChange()
8887
onColorMapChange()
@@ -115,7 +114,7 @@
115114
edge_attribute.min,
116115
edge_attribute.max,
117116
)
118-
hybridViewerStore.remoteRender()
117+
onColorMapChange()
119118
}
120119
}
121120
@@ -127,8 +126,17 @@
127126
) {
128127
const preset = getRGBPointsFromPreset(edge_attribute.colorMap)
129128
if (preset && preset.RGBPoints) {
130-
const points = convertRGBPointsToSchemaFormat(preset.RGBPoints)
131-
dataStyleStore.setMeshEdgesVertexColorMap(props.id, points)
129+
const points = convertRGBPointsToSchemaFormat(
130+
preset.RGBPoints,
131+
edge_attribute.min,
132+
edge_attribute.max,
133+
)
134+
dataStyleStore.setMeshEdgesVertexColorMap(
135+
props.id,
136+
points,
137+
edge_attribute.min,
138+
edge_attribute.max,
139+
)
132140
hybridViewerStore.remoteRender()
133141
}
134142
}
@@ -140,8 +148,17 @@
140148
{ id: props.id },
141149
{
142150
response_function: (response) => {
143-
edge_attribute_names.value = response.edge_attribute_names
144-
edge_attribute_metadata.value = response.edge_attribute_metadata || {}
151+
const names = []
152+
const metadata = {}
153+
for (const attribute of response.attributes) {
154+
names.push(attribute.attribute_name)
155+
metadata[attribute.attribute_name] = [
156+
attribute.min_value,
157+
attribute.max_value,
158+
]
159+
}
160+
edge_attribute_names.value = names
161+
edge_attribute_metadata.value = metadata
145162
},
146163
},
147164
)

0 commit comments

Comments
 (0)