diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue index c82938b1..77c2fb5f 100644 --- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue +++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue @@ -59,7 +59,6 @@ }, }) - diff --git a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue index 02fe857e..12e93eed 100644 --- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue +++ b/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() - }, - }) - diff --git a/app/components/Viewer/Options/AttributeColorBar.vue b/app/components/Viewer/Options/AttributeColorBar.vue new file mode 100644 index 00000000..f1018fd1 --- /dev/null +++ b/app/components/Viewer/Options/AttributeColorBar.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/app/components/Viewer/Options/CellAttributeSelector.vue b/app/components/Viewer/Options/CellAttributeSelector.vue index 532cb6f2..6eaa49b9 100644 --- a/app/components/Viewer/Options/CellAttributeSelector.vue +++ b/app/components/Viewer/Options/CellAttributeSelector.vue @@ -1,28 +1,87 @@ + + + + diff --git a/app/components/Viewer/Options/ColorMapPicker.vue b/app/components/Viewer/Options/ColorMapPicker.vue new file mode 100644 index 00000000..80c6ec17 --- /dev/null +++ b/app/components/Viewer/Options/ColorMapPicker.vue @@ -0,0 +1,168 @@ + + + + + diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue index 6c3d86b3..aaea10a3 100644 --- a/app/components/Viewer/Options/ColoringTypeSelector.vue +++ b/app/components/Viewer/Options/ColoringTypeSelector.vue @@ -19,6 +19,7 @@ const props = defineProps({ id: { type: String, required: true }, + meshType: { type: String, required: false }, }) const has_color = computed(() => (color.value !== undefined ? true : false)) @@ -82,7 +83,6 @@ coloring_styles.value.values[coloring_styles.value.labels.indexOf(value)] }) - diff --git a/app/stores/data_style.js b/app/stores/data_style.js index 747a59ac..9b92e8ba 100644 --- a/app/stores/data_style.js +++ b/app/stores/data_style.js @@ -46,7 +46,9 @@ export const useDataStyleStore = defineStore("dataStyle", () => { } const exportStores = () => { - return { styles: dataStyleState.styles } + return { + styles: dataStyleState.styles, + } } const importStores = (snapshot) => { diff --git a/app/utils/colormap.js b/app/utils/colormap.js new file mode 100644 index 00000000..fdfffc41 --- /dev/null +++ b/app/utils/colormap.js @@ -0,0 +1,6 @@ +import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps" + +export function getRGBPointsFromPreset(presetName) { + const preset = vtkColorMaps.getPresetByName(presetName) + return preset ? preset.RGBPoints : [] +} diff --git a/internal/stores/data_style_state.js b/internal/stores/data_style_state.js index 3b5dd49d..d8d594fb 100644 --- a/internal/stores/data_style_state.js +++ b/internal/stores/data_style_state.js @@ -23,5 +23,10 @@ export const useDataStyleStateStore = defineStore("dataStyleState", () => { return styles[id] } - return { getStyle, styles, objectVisibility, selectedObjects } + return { + getStyle, + styles, + objectVisibility, + selectedObjects, + } }) diff --git a/internal/stores/mesh/cells.js b/internal/stores/mesh/cells.js index 0596063f..622e985f 100644 --- a/internal/stores/mesh/cells.js +++ b/internal/stores/mesh/cells.js @@ -1,11 +1,14 @@ // Third party imports import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json" +// Local imports import { useDataStyleStateStore } from "../data_style_state" import { useViewerStore } from "@ogw_front/stores/viewer" +import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" // Local constants const mesh_cells_schemas = viewer_schemas.opengeodeweb_viewer.mesh.cells + export function useMeshCellsStyle() { const dataStyleStateStore = useDataStyleStateStore() const viewerStore = useViewerStore() @@ -76,20 +79,78 @@ export function useMeshCellsStyle() { function meshCellsVertexAttribute(id) { return meshCellsStyle(id).coloring.vertex } - function setMeshCellsVertexAttribute(id, vertex_attribute) { + return setMeshCellsVertexAttributeName(id, vertex_attribute.name) + } + function meshCellsVertexAttributeName(id) { + const vertex = meshCellsStyle(id).coloring.vertex + return vertex ? vertex.name : "" + } + function setMeshCellsVertexAttributeName(id, name) { const coloring_style = meshCellsStyle(id).coloring return viewerStore.request( - mesh_cells_schemas.vertex_attribute, - { id, ...vertex_attribute }, + mesh_cells_schemas.attribute.vertex.name, + { id, name }, { response_function: () => { - coloring_style.vertex = vertex_attribute - console.log( - setMeshCellsVertexAttribute.name, - { id }, - meshCellsVertexAttribute(id), - ) + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.name = name + console.log(setMeshCellsVertexAttributeName.name, { id }, name) + }, + }, + ) + } + function meshCellsVertexAttributeRange(id) { + const vertex = meshCellsStyle(id).coloring.vertex + return vertex ? [vertex.minimum, vertex.maximum] : [0, 1] + } + function setMeshCellsVertexAttributeRange(id, min, max) { + const coloring_style = meshCellsStyle(id).coloring + return viewerStore.request( + mesh_cells_schemas.attribute.vertex.scalar_range, + { id, minimum: min, maximum: max }, + { + response_function: () => { + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.minimum = min + coloring_style.vertex.maximum = max + console.log(setMeshCellsVertexAttributeRange.name, { id, min, max }) + }, + }, + ) + } + function meshCellsVertexAttributeColorMap(id) { + const vertex = meshCellsStyle(id).coloring.vertex + return vertex ? vertex.colorMap : null + } + function setMeshCellsVertexAttributeColorMap( + id, + colorMapName, + minimum, + maximum, + ) { + const coloring_style = meshCellsStyle(id).coloring + let points = colorMapName + if (typeof colorMapName === "string") { + points = getRGBPointsFromPreset(colorMapName) + } + return viewerStore.request( + mesh_cells_schemas.attribute.vertex.color_map, + { id, points, minimum, maximum }, + { + response_function: () => { + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.colorMap = colorMapName + console.log(setMeshCellsVertexAttributeColorMap.name, { + id, + colorMapName, + }) }, }, ) @@ -99,18 +160,77 @@ export function useMeshCellsStyle() { return meshCellsStyle(id).coloring.cell } function setMeshCellsCellAttribute(id, cell_attribute) { + return setMeshCellsCellAttributeName(id, cell_attribute.name) + } + function meshCellsCellAttributeName(id) { + const cell = meshCellsStyle(id).coloring.cell + return cell ? cell.name : "" + } + function setMeshCellsCellAttributeName(id, name) { const coloring_style = meshCellsStyle(id).coloring return viewerStore.request( - mesh_cells_schemas.cell_attribute, - { id, ...cell_attribute }, + mesh_cells_schemas.attribute.cell.name, + { id, name }, { response_function: () => { - coloring_style.cell = cell_attribute - console.log( - setMeshCellsCellAttribute.name, - { id }, - meshCellsCellAttribute(id), - ) + if (!coloring_style.cell) { + coloring_style.cell = {} + } + coloring_style.cell.name = name + console.log(setMeshCellsCellAttributeName.name, { id }, name) + }, + }, + ) + } + function meshCellsCellAttributeRange(id) { + const cell = meshCellsStyle(id).coloring.cell + return cell ? [cell.minimum, cell.maximum] : [0, 1] + } + function setMeshCellsCellAttributeRange(id, min, max) { + const coloring_style = meshCellsStyle(id).coloring + return viewerStore.request( + mesh_cells_schemas.attribute.cell.scalar_range, + { id, minimum: min, maximum: max }, + { + response_function: () => { + if (!coloring_style.cell) { + coloring_style.cell = {} + } + coloring_style.cell.minimum = min + coloring_style.cell.maximum = max + console.log(setMeshCellsCellAttributeRange.name, { id, min, max }) + }, + }, + ) + } + function meshCellsCellAttributeColorMap(id) { + const cell = meshCellsStyle(id).coloring.cell + return cell ? cell.colorMap : null + } + function setMeshCellsCellAttributeColorMap( + id, + colorMapName, + minimum, + maximum, + ) { + const coloring_style = meshCellsStyle(id).coloring + let points = colorMapName + if (typeof colorMapName === "string") { + points = getRGBPointsFromPreset(colorMapName) + } + return viewerStore.request( + mesh_cells_schemas.attribute.cell.color_map, + { id, points, minimum, maximum }, + { + response_function: () => { + if (!coloring_style.cell) { + coloring_style.cell = {} + } + coloring_style.cell.colorMap = colorMapName + console.log(setMeshCellsCellAttributeColorMap.name, { + id, + colorMapName, + }) }, }, ) @@ -138,12 +258,62 @@ export function useMeshCellsStyle() { if (coloring.vertex === null) { throw new Error("Vertex attribute not set") } - return setMeshCellsVertexAttribute(id, coloring.vertex) + if (coloring.vertex.name) { + return setMeshCellsVertexAttributeName(id, coloring.vertex.name).then( + () => { + if ( + coloring.vertex.minimum !== undefined && + coloring.vertex.maximum !== undefined + ) { + return setMeshCellsVertexAttributeRange( + id, + coloring.vertex.minimum, + coloring.vertex.maximum, + ).then(() => { + if (coloring.vertex.colorMap) { + return setMeshCellsVertexAttributeColorMap( + id, + coloring.vertex.colorMap, + coloring.vertex.minimum, + coloring.vertex.maximum, + ) + } + }) + } + }, + ) + } + return Promise.resolve() } else if (type === "cell") { if (coloring.cell === null) { throw new Error("Cell attribute not set") } - return setMeshCellsCellAttribute(id, coloring.cell) + if (coloring.cell.name) { + return setMeshCellsCellAttributeName(id, coloring.cell.name).then( + () => { + if ( + coloring.cell.minimum !== undefined && + coloring.cell.maximum !== undefined + ) { + return setMeshCellsCellAttributeRange( + id, + coloring.cell.minimum, + coloring.cell.maximum, + ).then(() => { + if (coloring.cell.colorMap) { + return setMeshCellsCellAttributeColorMap( + id, + coloring.cell.colorMap, + coloring.cell.minimum, + coloring.cell.maximum, + ) + } + }) + } + }, + ) + } + return Promise.resolve() } else { throw new Error("Unknown mesh cells coloring type: " + type) } @@ -158,18 +328,30 @@ export function useMeshCellsStyle() { } return { - meshCellsVisibility, - meshCellsActiveColoring, - meshCellsColor, - meshCellsTextures, - meshCellsCellAttribute, - meshCellsVertexAttribute, - setMeshCellsVisibility, - setMeshCellsActiveColoring, - setMeshCellsColor, - setMeshCellsTextures, - setMeshCellsVertexAttribute, - setMeshCellsCellAttribute, - applyMeshCellsStyle, + meshCellsVisibility: meshCellsVisibility, + meshCellsActiveColoring: meshCellsActiveColoring, + meshCellsColor: meshCellsColor, + meshCellsTextures: meshCellsTextures, + meshCellsVertexAttribute: meshCellsVertexAttribute, + meshCellsVertexAttributeName: meshCellsVertexAttributeName, + meshCellsVertexAttributeRange: meshCellsVertexAttributeRange, + meshCellsVertexAttributeColorMap: meshCellsVertexAttributeColorMap, + meshCellsCellAttribute: meshCellsCellAttribute, + meshCellsCellAttributeName: meshCellsCellAttributeName, + meshCellsCellAttributeRange: meshCellsCellAttributeRange, + meshCellsCellAttributeColorMap: meshCellsCellAttributeColorMap, + setMeshCellsVisibility: setMeshCellsVisibility, + setMeshCellsActiveColoring: setMeshCellsActiveColoring, + setMeshCellsColor: setMeshCellsColor, + setMeshCellsTextures: setMeshCellsTextures, + setMeshCellsVertexAttribute: setMeshCellsVertexAttribute, + setMeshCellsVertexAttributeName: setMeshCellsVertexAttributeName, + setMeshCellsVertexAttributeRange: setMeshCellsVertexAttributeRange, + setMeshCellsVertexAttributeColorMap: setMeshCellsVertexAttributeColorMap, + setMeshCellsCellAttribute: setMeshCellsCellAttribute, + setMeshCellsCellAttributeName: setMeshCellsCellAttributeName, + setMeshCellsCellAttributeRange: setMeshCellsCellAttributeRange, + setMeshCellsCellAttributeColorMap: setMeshCellsCellAttributeColorMap, + applyMeshCellsStyle: applyMeshCellsStyle, } } diff --git a/internal/stores/mesh/edges.js b/internal/stores/mesh/edges.js index db16c41d..23bc176e 100644 --- a/internal/stores/mesh/edges.js +++ b/internal/stores/mesh/edges.js @@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useDataStyleStateStore } from "../data_style_state" import { useViewerStore } from "@ogw_front/stores/viewer" +import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" // Local constants const mesh_edges_schemas = viewer_schemas.opengeodeweb_viewer.mesh.edges @@ -53,12 +54,62 @@ export function useMeshEdgesStyle() { if (coloring.vertex === null) { throw new Error("Vertex attribute not set") } - return setMeshEdgesVertexAttribute(id, coloring.vertex) + if (coloring.vertex.name) { + return setMeshEdgesVertexAttributeName(id, coloring.vertex.name).then( + () => { + if ( + coloring.vertex.minimum !== undefined && + coloring.vertex.maximum !== undefined + ) { + return setMeshEdgesVertexAttributeRange( + id, + coloring.vertex.minimum, + coloring.vertex.maximum, + ).then(() => { + if (coloring.vertex.colorMap) { + return setMeshEdgesVertexAttributeColorMap( + id, + coloring.vertex.colorMap, + coloring.vertex.minimum, + coloring.vertex.maximum, + ) + } + }) + } + }, + ) + } + return Promise.resolve() } else if (type === "edge") { if (coloring.edge === null) { throw new Error("Edge attribute not set") } - return setMeshEdgesEdgeAttribute(id, coloring.edge) + if (coloring.edge.name) { + return setMeshEdgesEdgeAttributeName(id, coloring.edge.name).then( + () => { + if ( + coloring.edge.minimum !== undefined && + coloring.edge.maximum !== undefined + ) { + return setMeshEdgesEdgeAttributeRange( + id, + coloring.edge.minimum, + coloring.edge.maximum, + ).then(() => { + if (coloring.edge.colorMap) { + return setMeshEdgesEdgeAttributeColorMap( + id, + coloring.edge.colorMap, + coloring.edge.minimum, + coloring.edge.maximum, + ) + } + }) + } + }, + ) + } + return Promise.resolve() } else { throw new Error("Unknown mesh edges coloring type: " + type) } @@ -106,18 +157,77 @@ export function useMeshEdgesStyle() { return meshEdgesStyle(id).coloring.vertex } function setMeshEdgesVertexAttribute(id, vertex_attribute) { + return setMeshEdgesVertexAttributeName(id, vertex_attribute.name) + } + function meshEdgesVertexAttributeName(id) { + const vertex = meshEdgesStyle(id).coloring.vertex + return vertex ? vertex.name : "" + } + function setMeshEdgesVertexAttributeName(id, name) { const coloring_style = meshEdgesStyle(id).coloring return viewerStore.request( - mesh_edges_schemas.vertex_attribute, - { id, ...vertex_attribute }, + mesh_edges_schemas.attribute.vertex.name, + { id, name }, { response_function: () => { - coloring_style.vertex = vertex_attribute - console.log( - setMeshEdgesVertexAttribute.name, - { id }, - meshEdgesVertexAttribute(id), - ) + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.name = name + console.log(setMeshEdgesVertexAttributeName.name, { id }, name) + }, + }, + ) + } + function meshEdgesVertexAttributeRange(id) { + const vertex = meshEdgesStyle(id).coloring.vertex + return vertex ? [vertex.minimum, vertex.maximum] : [0, 1] + } + function setMeshEdgesVertexAttributeRange(id, min, max) { + const coloring_style = meshEdgesStyle(id).coloring + return viewerStore.request( + mesh_edges_schemas.attribute.vertex.scalar_range, + { id, minimum: min, maximum: max }, + { + response_function: () => { + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.minimum = min + coloring_style.vertex.maximum = max + console.log(setMeshEdgesVertexAttributeRange.name, { id, min, max }) + }, + }, + ) + } + function meshEdgesVertexAttributeColorMap(id) { + const vertex = meshEdgesStyle(id).coloring.vertex + return vertex ? vertex.colorMap : null + } + function setMeshEdgesVertexAttributeColorMap( + id, + colorMapName, + minimum, + maximum, + ) { + const coloring_style = meshEdgesStyle(id).coloring + let points = colorMapName + if (typeof colorMapName === "string") { + points = getRGBPointsFromPreset(colorMapName) + } + return viewerStore.request( + mesh_edges_schemas.attribute.vertex.color_map, + { id, points, minimum, maximum }, + { + response_function: () => { + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.colorMap = colorMapName + console.log(setMeshEdgesVertexAttributeColorMap.name, { + id, + colorMapName, + }) }, }, ) @@ -127,18 +237,94 @@ export function useMeshEdgesStyle() { return meshEdgesStyle(id).coloring.edge } function setMeshEdgesEdgeAttribute(id, edge_attribute) { + return setMeshEdgesEdgeAttributeName(id, edge_attribute.name) + } + function meshEdgesEdgeAttributeName(id) { + const edge = meshEdgesStyle(id).coloring.edge + return edge ? edge.name : "" + } + function setMeshEdgesEdgeAttributeName(id, name) { const coloring_style = meshEdgesStyle(id).coloring return viewerStore.request( - mesh_edges_schemas.edge_attribute, - { id, ...edge_attribute }, + mesh_edges_schemas.attribute.edge.name, + { id, name }, { response_function: () => { - coloring_style.edge = edge_attribute - console.log( - setMeshEdgesEdgeAttribute.name, - { id }, - meshEdgesEdgeAttribute(id), - ) + if (!coloring_style.edge) { + coloring_style.edge = {} + } + coloring_style.edge.name = name + console.log(setMeshEdgesEdgeAttributeName.name, { id }, name) + }, + }, + ) + } + function meshEdgesEdgeAttributeRange(id) { + const edge = meshEdgesStyle(id).coloring.edge + return edge ? [edge.minimum, edge.maximum] : [0, 1] + } + function setMeshEdgesEdgeAttributeRange(id, min, max) { + const coloring_style = meshEdgesStyle(id).coloring + if (!mesh_edges_schemas.edge_scalar_range) { + console.warn("setMeshEdgesEdgeAttributeRange: RPC not available") + if (!coloring_style.edge) { + coloring_style.edge = {} + } + coloring_style.edge.minimum = min + coloring_style.edge.maximum = max + return Promise.resolve() + } + return viewerStore.request( + mesh_edges_schemas.edge_scalar_range, + { id, minimum: min, maximum: max }, + { + response_function: () => { + if (!coloring_style.edge) { + coloring_style.edge = {} + } + coloring_style.edge.minimum = min + coloring_style.edge.maximum = max + console.log(setMeshEdgesEdgeAttributeRange.name, { id, min, max }) + }, + }, + ) + } + function meshEdgesEdgeAttributeColorMap(id) { + const edge = meshEdgesStyle(id).coloring.edge + return edge ? edge.colorMap : null + } + function setMeshEdgesEdgeAttributeColorMap( + id, + colorMapName, + minimum, + maximum, + ) { + const coloring_style = meshEdgesStyle(id).coloring + let points = colorMapName + if (typeof colorMapName === "string") { + points = getRGBPointsFromPreset(colorMapName) + } + if (!mesh_edges_schemas.edge_color_map) { + console.warn("setMeshEdgesEdgeAttributeColorMap: RPC not available") + if (!coloring_style.edge) { + coloring_style.edge = {} + } + coloring_style.edge.colorMap = colorMapName + return Promise.resolve() + } + return viewerStore.request( + mesh_edges_schemas.edge_color_map, + { id, points, minimum, maximum }, + { + response_function: () => { + if (!coloring_style.edge) { + coloring_style.edge = {} + } + coloring_style.edge.colorMap = colorMapName + console.log(setMeshEdgesEdgeAttributeColorMap.name, { + id, + colorMapName, + }) }, }, ) @@ -154,18 +340,30 @@ export function useMeshEdgesStyle() { } return { - applyMeshEdgesStyle, + meshEdgesVisibility, meshEdgesActiveColoring, meshEdgesColor, - meshEdgesVisibility, meshEdgesWidth, meshEdgesVertexAttribute, + meshEdgesVertexAttributeName, + meshEdgesVertexAttributeRange, + meshEdgesVertexAttributeColorMap, meshEdgesEdgeAttribute, + meshEdgesEdgeAttributeName, + meshEdgesEdgeAttributeRange, + meshEdgesEdgeAttributeColorMap, + setMeshEdgesVisibility, setMeshEdgesActiveColoring, setMeshEdgesColor, - setMeshEdgesVisibility, setMeshEdgesWidth, setMeshEdgesVertexAttribute, + setMeshEdgesVertexAttributeName, + setMeshEdgesVertexAttributeRange, + setMeshEdgesVertexAttributeColorMap, setMeshEdgesEdgeAttribute, + setMeshEdgesEdgeAttributeName, + setMeshEdgesEdgeAttributeRange, + setMeshEdgesEdgeAttributeColorMap, + applyMeshEdgesStyle, } } diff --git a/internal/stores/mesh/index.js b/internal/stores/mesh/index.js index b38d710c..71b20655 100644 --- a/internal/stores/mesh/index.js +++ b/internal/stores/mesh/index.js @@ -57,6 +57,7 @@ export default function useMeshStyle() { promise_array.push(meshPolygonsStyleStore.applyMeshPolygonsStyle(id)) } else if (key === "polyhedra") { promise_array.push(meshPolyhedraStyleStore.applyMeshPolyhedraStyle(id)) + } else if (key === "attributes") { } else { throw new Error("Unknown mesh key: " + key) } diff --git a/internal/stores/mesh/points.js b/internal/stores/mesh/points.js index 45ccd45a..b9e1a47d 100644 --- a/internal/stores/mesh/points.js +++ b/internal/stores/mesh/points.js @@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useDataStyleStateStore } from "../data_style_state" import { useViewerStore } from "@ogw_front/stores/viewer" +import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" // Local constants const mesh_points_schemas = viewer_schemas.opengeodeweb_viewer.mesh.points @@ -54,7 +55,32 @@ export function useMeshPointsStyle() { if (coloring.vertex === null) { throw new Error("Vertex attribute not set") } - return setMeshPointsVertexAttribute(id, coloring.vertex) + if (coloring.vertex.name) { + return setMeshPointsVertexAttributeName(id, coloring.vertex.name).then( + () => { + if ( + coloring.vertex.minimum !== undefined && + coloring.vertex.maximum !== undefined + ) { + return setMeshPointsVertexAttributeRange( + id, + coloring.vertex.minimum, + coloring.vertex.maximum, + ).then(() => { + if (coloring.vertex.colorMap) { + return setMeshPointsVertexAttributeColorMap( + id, + coloring.vertex.colorMap, + coloring.vertex.minimum, + coloring.vertex.maximum, + ) + } + }) + } + }, + ) + } + return Promise.resolve() } else { throw new Error("Unknown mesh points coloring type: " + type) } @@ -84,18 +110,77 @@ export function useMeshPointsStyle() { return meshPointsStyle(id).coloring.vertex } function setMeshPointsVertexAttribute(id, vertex_attribute) { + return setMeshPointsVertexAttributeName(id, vertex_attribute.name) + } + function meshPointsVertexAttributeName(id) { + const vertex = meshPointsStyle(id).coloring.vertex + return vertex ? vertex.name : "" + } + function setMeshPointsVertexAttributeName(id, name) { const coloring_style = meshPointsStyle(id).coloring return viewerStore.request( - mesh_points_schemas.vertex_attribute, - { id, ...vertex_attribute }, + mesh_points_schemas.attribute.vertex.name, + { id, name }, { response_function: () => { - coloring_style.vertex = vertex_attribute - console.log( - setMeshPointsVertexAttribute.name, - { id }, - meshPointsVertexAttribute(id), - ) + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.name = name + console.log(setMeshPointsVertexAttributeName.name, { id }, name) + }, + }, + ) + } + function meshPointsVertexAttributeRange(id) { + const vertex = meshPointsStyle(id).coloring.vertex + return vertex ? [vertex.minimum, vertex.maximum] : [0, 1] + } + function setMeshPointsVertexAttributeRange(id, min, max) { + const coloring_style = meshPointsStyle(id).coloring + return viewerStore.request( + mesh_points_schemas.attribute.vertex.scalar_range, + { id, minimum: min, maximum: max }, + { + response_function: () => { + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.minimum = min + coloring_style.vertex.maximum = max + console.log(setMeshPointsVertexAttributeRange.name, { id, min, max }) + }, + }, + ) + } + function meshPointsVertexAttributeColorMap(id) { + const vertex = meshPointsStyle(id).coloring.vertex + return vertex ? vertex.colorMap : null + } + function setMeshPointsVertexAttributeColorMap( + id, + colorMapName, + minimum, + maximum, + ) { + const coloring_style = meshPointsStyle(id).coloring + let points = colorMapName + if (typeof colorMapName === "string") { + points = getRGBPointsFromPreset(colorMapName) + } + return viewerStore.request( + mesh_points_schemas.attribute.vertex.color_map, + { id, points, minimum, maximum }, + { + response_function: () => { + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.colorMap = colorMapName + console.log(setMeshPointsVertexAttributeColorMap.name, { + id, + colorMapName, + }) }, }, ) @@ -131,11 +216,17 @@ export function useMeshPointsStyle() { meshPointsActiveColoring, meshPointsColor, meshPointsVertexAttribute, + meshPointsVertexAttributeName, + meshPointsVertexAttributeRange, + meshPointsVertexAttributeColorMap, meshPointsSize, setMeshPointsVisibility, setMeshPointsActiveColoring, setMeshPointsColor, setMeshPointsVertexAttribute, + setMeshPointsVertexAttributeName, + setMeshPointsVertexAttributeRange, + setMeshPointsVertexAttributeColorMap, setMeshPointsSize, applyMeshPointsStyle, } diff --git a/internal/stores/mesh/polygons.js b/internal/stores/mesh/polygons.js index 524c384c..e8346b76 100644 --- a/internal/stores/mesh/polygons.js +++ b/internal/stores/mesh/polygons.js @@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useDataStyleStateStore } from "../data_style_state" import { useViewerStore } from "@ogw_front/stores/viewer" +import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" // Local constants const mesh_polygons_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polygons @@ -82,20 +83,82 @@ export function useMeshPolygonsStyle() { function meshPolygonsVertexAttribute(id) { return meshPolygonsStyle(id).coloring.vertex } - function setMeshPolygonsVertexAttribute(id, vertex_attribute) { + return setMeshPolygonsVertexAttributeName(id, vertex_attribute.name) + } + function meshPolygonsVertexAttributeName(id) { + const vertex = meshPolygonsStyle(id).coloring.vertex + return vertex ? vertex.name : "" + } + function setMeshPolygonsVertexAttributeName(id, name) { const coloring_style = meshPolygonsStyle(id).coloring return viewerStore.request( - mesh_polygons_schemas.vertex_attribute, - { id, ...vertex_attribute }, + mesh_polygons_schemas.attribute.vertex.name, + { id, name }, { response_function: () => { - coloring_style.vertex = vertex_attribute - console.log( - setMeshPolygonsVertexAttribute.name, - { id }, - meshPolygonsVertexAttribute(id), - ) + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.name = name + console.log(setMeshPolygonsVertexAttributeName.name, { id }, name) + }, + }, + ) + } + function meshPolygonsVertexAttributeRange(id) { + const vertex = meshPolygonsStyle(id).coloring.vertex + return vertex ? [vertex.minimum, vertex.maximum] : [0, 1] + } + function setMeshPolygonsVertexAttributeRange(id, min, max) { + const coloring_style = meshPolygonsStyle(id).coloring + return viewerStore.request( + mesh_polygons_schemas.attribute.vertex.scalar_range, + { id, minimum: min, maximum: max }, + { + response_function: () => { + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.minimum = min + coloring_style.vertex.maximum = max + console.log(setMeshPolygonsVertexAttributeRange.name, { + id, + min, + max, + }) + }, + }, + ) + } + function meshPolygonsVertexAttributeColorMap(id) { + const vertex = meshPolygonsStyle(id).coloring.vertex + return vertex ? vertex.colorMap : null + } + function setMeshPolygonsVertexAttributeColorMap( + id, + colorMapName, + minimum, + maximum, + ) { + const coloring_style = meshPolygonsStyle(id).coloring + let points = colorMapName + if (typeof colorMapName === "string") { + points = getRGBPointsFromPreset(colorMapName) + } + return viewerStore.request( + mesh_polygons_schemas.attribute.vertex.color_map, + { id, points, minimum, maximum }, + { + response_function: () => { + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.colorMap = colorMapName + console.log(setMeshPolygonsVertexAttributeColorMap.name, { + id, + colorMapName, + }) }, }, ) @@ -105,18 +168,81 @@ export function useMeshPolygonsStyle() { return meshPolygonsStyle(id).coloring.polygon } function setMeshPolygonsPolygonAttribute(id, polygon_attribute) { + return setMeshPolygonsPolygonAttributeName(id, polygon_attribute.name) + } + function meshPolygonsPolygonAttributeName(id) { + const polygon = meshPolygonsStyle(id).coloring.polygon + return polygon ? polygon.name : "" + } + function setMeshPolygonsPolygonAttributeName(id, name) { const coloring_style = meshPolygonsStyle(id).coloring return viewerStore.request( - mesh_polygons_schemas.polygon_attribute, - { id, ...polygon_attribute }, + mesh_polygons_schemas.attribute.polygon.name, + { id, name }, { response_function: () => { - coloring_style.polygon = polygon_attribute - console.log( - setMeshPolygonsPolygonAttribute.name, - { id }, - meshPolygonsPolygonAttribute(id), - ) + if (!coloring_style.polygon) { + coloring_style.polygon = {} + } + coloring_style.polygon.name = name + console.log(setMeshPolygonsPolygonAttributeName.name, { id }, name) + }, + }, + ) + } + function meshPolygonsPolygonAttributeRange(id) { + const polygon = meshPolygonsStyle(id).coloring.polygon + return polygon ? [polygon.minimum, polygon.maximum] : [0, 1] + } + function setMeshPolygonsPolygonAttributeRange(id, min, max) { + const coloring_style = meshPolygonsStyle(id).coloring + return viewerStore.request( + mesh_polygons_schemas.attribute.polygon.scalar_range, + { id, minimum: min, maximum: max }, + { + response_function: () => { + if (!coloring_style.polygon) { + coloring_style.polygon = {} + } + coloring_style.polygon.minimum = min + coloring_style.polygon.maximum = max + console.log(setMeshPolygonsPolygonAttributeRange.name, { + id, + min, + max, + }) + }, + }, + ) + } + function meshPolygonsPolygonAttributeColorMap(id) { + const polygon = meshPolygonsStyle(id).coloring.polygon + return polygon ? polygon.colorMap : null + } + function setMeshPolygonsPolygonAttributeColorMap( + id, + colorMapName, + minimum, + maximum, + ) { + const coloring_style = meshPolygonsStyle(id).coloring + let points = colorMapName + if (typeof colorMapName === "string") { + points = getRGBPointsFromPreset(colorMapName) + } + return viewerStore.request( + mesh_polygons_schemas.attribute.polygon.color_map, + { id, points, minimum, maximum }, + { + response_function: () => { + if (!coloring_style.polygon) { + coloring_style.polygon = {} + } + coloring_style.polygon.colorMap = colorMapName + console.log(setMeshPolygonsPolygonAttributeColorMap.name, { + id, + colorMapName, + }) }, }, ) @@ -144,12 +270,64 @@ export function useMeshPolygonsStyle() { if (coloring.vertex === null) { throw new Error("Vertex attribute not set") } - return setMeshPolygonsVertexAttribute(id, coloring.vertex) + if (coloring.vertex.name) { + return setMeshPolygonsVertexAttributeName( + id, + coloring.vertex.name, + ).then(() => { + if ( + coloring.vertex.minimum !== undefined && + coloring.vertex.maximum !== undefined + ) { + return setMeshPolygonsVertexAttributeRange( + id, + coloring.vertex.minimum, + coloring.vertex.maximum, + ).then(() => { + if (coloring.vertex.colorMap) { + return setMeshPolygonsVertexAttributeColorMap( + id, + coloring.vertex.colorMap, + coloring.vertex.minimum, + coloring.vertex.maximum, + ) + } + }) + } + }) + } + return Promise.resolve() } else if (type === "polygon") { if (coloring.polygon === null) { throw new Error("Polygon attribute not set") } - return setMeshPolygonsPolygonAttribute(id, coloring.polygon) + if (coloring.polygon.name) { + return setMeshPolygonsPolygonAttributeName( + id, + coloring.polygon.name, + ).then(() => { + if ( + coloring.polygon.minimum !== undefined && + coloring.polygon.maximum !== undefined + ) { + return setMeshPolygonsPolygonAttributeRange( + id, + coloring.polygon.minimum, + coloring.polygon.maximum, + ).then(() => { + if (coloring.polygon.colorMap) { + return setMeshPolygonsPolygonAttributeColorMap( + id, + coloring.polygon.colorMap, + coloring.polygon.minimum, + coloring.polygon.maximum, + ) + } + }) + } + }) + } + return Promise.resolve() } else { throw new Error("Unknown mesh polygons coloring type: " + type) } @@ -168,14 +346,26 @@ export function useMeshPolygonsStyle() { meshPolygonsActiveColoring, meshPolygonsColor, meshPolygonsTextures, - meshPolygonsPolygonAttribute, meshPolygonsVertexAttribute, + meshPolygonsVertexAttributeName, + meshPolygonsVertexAttributeRange, + meshPolygonsVertexAttributeColorMap, + meshPolygonsPolygonAttribute, + meshPolygonsPolygonAttributeName, + meshPolygonsPolygonAttributeRange, + meshPolygonsPolygonAttributeColorMap, setMeshPolygonsVisibility, setMeshPolygonsActiveColoring, setMeshPolygonsColor, setMeshPolygonsTextures, setMeshPolygonsVertexAttribute, + setMeshPolygonsVertexAttributeName, + setMeshPolygonsVertexAttributeRange, + setMeshPolygonsVertexAttributeColorMap, setMeshPolygonsPolygonAttribute, + setMeshPolygonsPolygonAttributeName, + setMeshPolygonsPolygonAttributeRange, + setMeshPolygonsPolygonAttributeColorMap, applyMeshPolygonsStyle, } } diff --git a/internal/stores/mesh/polyhedra.js b/internal/stores/mesh/polyhedra.js index 47c2520b..a55d482b 100644 --- a/internal/stores/mesh/polyhedra.js +++ b/internal/stores/mesh/polyhedra.js @@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useDataStyleStateStore } from "../data_style_state" import { useViewerStore } from "@ogw_front/stores/viewer" +import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" // Local constants const mesh_polyhedra_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polyhedra @@ -53,12 +54,64 @@ export function useMeshPolyhedraStyle() { if (coloring.vertex === null) { throw new Error("Vertex attribute not set") } - return setMeshPolyhedraVertexAttribute(id, coloring.vertex) + if (coloring.vertex.name) { + return setMeshPolyhedraVertexAttributeName( + id, + coloring.vertex.name, + ).then(() => { + if ( + coloring.vertex.minimum !== undefined && + coloring.vertex.maximum !== undefined + ) { + return setMeshPolyhedraVertexAttributeRange( + id, + coloring.vertex.minimum, + coloring.vertex.maximum, + ).then(() => { + if (coloring.vertex.colorMap) { + return setMeshPolyhedraVertexAttributeColorMap( + id, + coloring.vertex.colorMap, + coloring.vertex.minimum, + coloring.vertex.maximum, + ) + } + }) + } + }) + } + return Promise.resolve() } else if (type === "polyhedron") { if (coloring.polyhedron === null) { throw new Error("Polyhedron attribute not set") } - return setMeshPolyhedraPolyhedronAttribute(id, coloring.polyhedron) + if (coloring.polyhedron.name) { + return setMeshPolyhedraPolyhedronAttributeName( + id, + coloring.polyhedron.name, + ).then(() => { + if ( + coloring.polyhedron.minimum !== undefined && + coloring.polyhedron.maximum !== undefined + ) { + return setMeshPolyhedraPolyhedronAttributeRange( + id, + coloring.polyhedron.minimum, + coloring.polyhedron.maximum, + ).then(() => { + if (coloring.polyhedron.colorMap) { + return setMeshPolyhedraPolyhedronAttributeColorMap( + id, + coloring.polyhedron.colorMap, + coloring.polyhedron.minimum, + coloring.polyhedron.maximum, + ) + } + }) + } + }) + } + return Promise.resolve() } else { throw new Error("Unknown mesh polyhedra coloring type: " + type) } @@ -89,18 +142,81 @@ export function useMeshPolyhedraStyle() { return meshPolyhedraStyle(id).coloring.vertex } function setMeshPolyhedraVertexAttribute(id, vertex_attribute) { + return setMeshPolyhedraVertexAttributeName(id, vertex_attribute.name) + } + function meshPolyhedraVertexAttributeName(id) { + const vertex = meshPolyhedraStyle(id).coloring.vertex + return vertex ? vertex.name : "" + } + function setMeshPolyhedraVertexAttributeName(id, name) { const coloring_style = meshPolyhedraStyle(id).coloring return viewerStore.request( - mesh_polyhedra_schemas.vertex_attribute, - { id, ...vertex_attribute }, + mesh_polyhedra_schemas.attribute.vertex.name, + { id, name }, { response_function: () => { - coloring_style.vertex = vertex_attribute - console.log( - setMeshPolyhedraVertexAttribute.name, - { id }, - meshPolyhedraVertexAttribute(id), - ) + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.name = name + console.log(setMeshPolyhedraVertexAttributeName.name, { id }, name) + }, + }, + ) + } + function meshPolyhedraVertexAttributeRange(id) { + const vertex = meshPolyhedraStyle(id).coloring.vertex + return vertex ? [vertex.minimum, vertex.maximum] : [0, 1] + } + function setMeshPolyhedraVertexAttributeRange(id, min, max) { + const coloring_style = meshPolyhedraStyle(id).coloring + return viewerStore.request( + mesh_polyhedra_schemas.attribute.vertex.scalar_range, + { id, minimum: min, maximum: max }, + { + response_function: () => { + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.minimum = min + coloring_style.vertex.maximum = max + console.log(setMeshPolyhedraVertexAttributeRange.name, { + id, + min, + max, + }) + }, + }, + ) + } + function meshPolyhedraVertexAttributeColorMap(id) { + const vertex = meshPolyhedraStyle(id).coloring.vertex + return vertex ? vertex.colorMap : null + } + function setMeshPolyhedraVertexAttributeColorMap( + id, + colorMapName, + minimum, + maximum, + ) { + const coloring_style = meshPolyhedraStyle(id).coloring + let points = colorMapName + if (typeof colorMapName === "string") { + points = getRGBPointsFromPreset(colorMapName) + } + return viewerStore.request( + mesh_polyhedra_schemas.attribute.vertex.color_map, + { id, points, minimum, maximum }, + { + response_function: () => { + if (!coloring_style.vertex) { + coloring_style.vertex = {} + } + coloring_style.vertex.colorMap = colorMapName + console.log(setMeshPolyhedraVertexAttributeColorMap.name, { + id, + colorMapName, + }) }, }, ) @@ -110,22 +226,92 @@ export function useMeshPolyhedraStyle() { return meshPolyhedraStyle(id).coloring.polyhedron } function setMeshPolyhedraPolyhedronAttribute(id, polyhedron_attribute) { - const coloring = meshPolyhedraStyle(id).coloring + return setMeshPolyhedraPolyhedronAttributeName( + id, + polyhedron_attribute.name, + ) + } + function meshPolyhedraPolyhedronAttributeName(id) { + const polyhedron = meshPolyhedraStyle(id).coloring.polyhedron + return polyhedron ? polyhedron.name : "" + } + function setMeshPolyhedraPolyhedronAttributeName(id, name) { + const coloring_style = meshPolyhedraStyle(id).coloring return viewerStore.request( - mesh_polyhedra_schemas.polyhedron_attribute, - { id, ...polyhedron_attribute }, + mesh_polyhedra_schemas.attribute.polyhedron.name, + { id, name }, { response_function: () => { - coloring.polyhedron = polyhedron_attribute + if (!coloring_style.polyhedron) { + coloring_style.polyhedron = {} + } + coloring_style.polyhedron.name = name console.log( - setMeshPolyhedraPolyhedronAttribute.name, + setMeshPolyhedraPolyhedronAttributeName.name, { id }, - meshPolyhedraPolyhedronAttribute(id), + name, ) }, }, ) } + function meshPolyhedraPolyhedronAttributeRange(id) { + const polyhedron = meshPolyhedraStyle(id).coloring.polyhedron + return polyhedron ? [polyhedron.minimum, polyhedron.maximum] : [0, 1] + } + function setMeshPolyhedraPolyhedronAttributeRange(id, min, max) { + const coloring_style = meshPolyhedraStyle(id).coloring + return viewerStore.request( + mesh_polyhedra_schemas.attribute.polyhedron.scalar_range, + { id, minimum: min, maximum: max }, + { + response_function: () => { + if (!coloring_style.polyhedron) { + coloring_style.polyhedron = {} + } + coloring_style.polyhedron.minimum = min + coloring_style.polyhedron.maximum = max + console.log(setMeshPolyhedraPolyhedronAttributeRange.name, { + id, + min, + max, + }) + }, + }, + ) + } + function meshPolyhedraPolyhedronAttributeColorMap(id) { + const polyhedron = meshPolyhedraStyle(id).coloring.polyhedron + return polyhedron ? polyhedron.colorMap : null + } + function setMeshPolyhedraPolyhedronAttributeColorMap( + id, + colorMapName, + minimum, + maximum, + ) { + const coloring_style = meshPolyhedraStyle(id).coloring + let points = colorMapName + if (typeof colorMapName === "string") { + points = getRGBPointsFromPreset(colorMapName) + } + return viewerStore.request( + mesh_polyhedra_schemas.attribute.polyhedron.color_map, + { id, points, minimum, maximum }, + { + response_function: () => { + if (!coloring_style.polyhedron) { + coloring_style.polyhedron = {} + } + coloring_style.polyhedron.colorMap = colorMapName + console.log(setMeshPolyhedraPolyhedronAttributeColorMap.name, { + id, + colorMapName, + }) + }, + }, + ) + } function applyMeshPolyhedraStyle(id) { const style = meshPolyhedraStyle(id) @@ -136,16 +322,28 @@ export function useMeshPolyhedraStyle() { } return { - applyMeshPolyhedraStyle, + meshPolyhedraVisibility, meshPolyhedraActiveColoring, meshPolyhedraColor, meshPolyhedraVertexAttribute, - meshPolyhedraVisibility, + meshPolyhedraVertexAttributeName, + meshPolyhedraVertexAttributeRange, + meshPolyhedraVertexAttributeColorMap, meshPolyhedraPolyhedronAttribute, + meshPolyhedraPolyhedronAttributeName, + meshPolyhedraPolyhedronAttributeRange, + meshPolyhedraPolyhedronAttributeColorMap, + setMeshPolyhedraVisibility, setMeshPolyhedraActiveColoring, setMeshPolyhedraColor, - setMeshPolyhedraPolyhedronAttribute, setMeshPolyhedraVertexAttribute, - setMeshPolyhedraVisibility, + setMeshPolyhedraVertexAttributeName, + setMeshPolyhedraVertexAttributeRange, + setMeshPolyhedraVertexAttributeColorMap, + setMeshPolyhedraPolyhedronAttribute, + setMeshPolyhedraPolyhedronAttributeName, + setMeshPolyhedraPolyhedronAttributeRange, + setMeshPolyhedraPolyhedronAttributeColorMap, + applyMeshPolyhedraStyle, } } diff --git a/internal/stores/model/index.js b/internal/stores/model/index.js index 7d83cfa8..665ad991 100644 --- a/internal/stores/model/index.js +++ b/internal/stores/model/index.js @@ -154,6 +154,8 @@ export default function useModelStyle() { promise_array.push(modelPointsStyleStore.applyModelPointsStyle(id)) } else if (key === "edges") { promise_array.push(modelEdgesStyleStore.applyModelEdgesStyle(id)) + } else if (key === "attributes") { + // Do nothing } else { throw new Error("Unknown model key: " + key) } diff --git a/tests/integration/microservices/back/requirements.txt b/tests/integration/microservices/back/requirements.txt index f46331da..bd3a3ef5 100644 --- a/tests/integration/microservices/back/requirements.txt +++ b/tests/integration/microservices/back/requirements.txt @@ -5,4 +5,3 @@ # pip-compile --output-file=tests/integration/microservices/back/requirements.txt tests/integration/microservices/back/requirements.in # -opengeodeweb-back==6.*,>=6.1.0rc3 diff --git a/tests/integration/microservices/viewer/requirements.txt b/tests/integration/microservices/viewer/requirements.txt index 68cb23f1..4d097394 100644 --- a/tests/integration/microservices/viewer/requirements.txt +++ b/tests/integration/microservices/viewer/requirements.txt @@ -5,4 +5,3 @@ # pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in # -opengeodeweb-viewer==1.*,>=1.15.1rc1