diff --git a/app/stores/data.js b/app/stores/data.js index 92a7e1ff..d30e30b6 100644 --- a/app/stores/data.js +++ b/app/stores/data.js @@ -168,6 +168,8 @@ export const useDataStore = defineStore("data", () => { return components.map((component) => component.viewer_id) } + + async function exportStores() { const items = await database.data.toArray() return { items } @@ -198,6 +200,7 @@ export const useDataStore = defineStore("data", () => { getSurfacesGeodeIds, getBlocksGeodeIds, getMeshComponentsViewerIds, + exportStores, importStores, clear, diff --git a/app/stores/data_style.js b/app/stores/data_style.js index 059c1f73..c46c49f0 100644 --- a/app/stores/data_style.js +++ b/app/stores/data_style.js @@ -11,12 +11,12 @@ export const useDataStyleStore = defineStore("dataStyle", () => { const modelStyleStore = useModelStyle() const dataStore = useDataStore() - function addDataStyle(id, geode_object) { - dataStyleState.styles[id] = getDefaultStyle(geode_object) + async function addDataStyle(id, geode_object) { + await dataStyleState.updateStyle(id, getDefaultStyle(geode_object)) } async function setVisibility(id, visibility) { - const item = await database.data.get(id) + const item = await dataStore.item(id) const viewer_type = item?.viewer_type if (!viewer_type) { throw new Error(`Item not found or not loaded: ${id}`) @@ -32,7 +32,7 @@ export const useDataStyleStore = defineStore("dataStyle", () => { } async function applyDefaultStyle(id) { - const item = await database.data.get(id) + const item = await dataStore.item(id) const viewer_type = item?.viewer_type if (!viewer_type) { throw new Error(`Item not found or not loaded: ${id}`) @@ -48,40 +48,55 @@ export const useDataStyleStore = defineStore("dataStyle", () => { } function exportStores() { - return { styles: dataStyleState.styles } + return { + styles: dataStyleState.styles, + componentStyles: dataStyleState.componentStyles, + } } - function importStores(snapshot) { + async function importStores(snapshot) { const stylesSnapshot = snapshot.styles || {} - for (const id of Object.keys(dataStyleState.styles)) { - delete dataStyleState.styles[id] - } + const componentStylesSnapshot = snapshot.componentStyles || {} + + await dataStyleState.clear() + for (const [id, style] of Object.entries(stylesSnapshot)) { - dataStyleState.styles[id] = style + await dataStyleState.updateStyle(id, style) + } + + for (const style of Object.values(componentStylesSnapshot)) { + await dataStyleState.updateComponentStyle( + style.id_model, + style.id_component, + style, + ) } } async function applyAllStylesFromState() { - const ids = Object.keys(dataStyleState.styles || {}) + const rootIds = Object.keys(dataStyleState.styles || {}) const promises = [] - for (const id of ids) { + + // Apply root model/mesh styles + for (const id of rootIds) { const meta = await dataStore.item(id) - const viewerType = meta?.viewer_type - const style = dataStyleState.styles[id] - if (style && viewerType === "mesh") { + if (!meta) continue + const viewerType = meta.viewer_type + if (viewerType === "mesh") { promises.push(meshStyleStore.applyMeshStyle(id)) - } else if (style && viewerType === "model") { + } else if (viewerType === "model") { promises.push(modelStyleStore.applyModelStyle(id)) } } + return Promise.all(promises) } return { - styles: dataStyleState.styles, + styles: computed(() => dataStyleState.styles), getStyle: dataStyleState.getStyle, - objectVisibility: dataStyleState.objectVisibility, - selectedObjects: dataStyleState.selectedObjects, + objectVisibility: computed(() => dataStyleState.objectVisibility), + selectedObjects: computed(() => dataStyleState.selectedObjects), ...meshStyleStore, ...modelStyleStore, addDataStyle, diff --git a/app/stores/infra.js b/app/stores/infra.js index eafb9af8..3b7295de 100644 --- a/app/stores/infra.js +++ b/app/stores/infra.js @@ -1,6 +1,7 @@ import { appMode, getAppMode } from "@ogw_front/utils/app_mode" import Status from "@ogw_front/utils/status" import { useLambdaStore } from "@ogw_front/stores/lambda" +import { database } from "../../internal/database/database" export const useInfraStore = defineStore("infra", { state: () => ({ @@ -39,6 +40,8 @@ export const useInfraStore = defineStore("infra", { }, async create_backend() { console.log("[INFRA] Starting create_backend - Mode:", this.app_mode) + await database.clear() + console.log( "[INFRA] Registered microservices:", this.microservices.map((store) => store.$id), diff --git a/app/stores/menu.js b/app/stores/menu.js index 747c1943..b836eb93 100644 --- a/app/stores/menu.js +++ b/app/stores/menu.js @@ -151,17 +151,17 @@ export const useMenuStore = defineStore("menu", () => { } async function openMenu(id, x, y, width, height, top, left, meta_data) { - await closeMenu() - - if (meta_data) { - const items = getMenuItems( - meta_data.viewer_type, - meta_data.geode_object_type, - ) - if (items.length === 0) { - return - } + if (!id || !meta_data) { + return } + const items = getMenuItems( + meta_data.viewer_type, + meta_data.geode_object_type, + ) + if (items.length === 0) { + return + } + await closeMenu() current_id.value = id current_meta_data.value = meta_data || {} diff --git a/app/utils/file_import_workflow.js b/app/utils/file_import_workflow.js index c7cc40c8..ecbe3c3c 100644 --- a/app/utils/file_import_workflow.js +++ b/app/utils/file_import_workflow.js @@ -24,8 +24,49 @@ async function importWorkflow(files) { function buildImportItemFromPayloadApi(value, geode_object_type) { console.log("buildImportItemFromPayloadApi", { value, geode_object_type }) + const mesh_types = [ + "EdgedCurve2D", + "EdgedCurve3D", + "Graph", + "HybridSolid3D", + "LightRegularGrid2D", + "LightRegularGrid3D", + "PointSet2D", + "PointSet3D", + "PolygonalSurface2D", + "PolygonalSurface3D", + "PolyhedralSolid3D", + "RasterImage2D", + "RasterImage3D", + "RegularGrid2D", + "RegularGrid3D", + "TetrahedralSolid3D", + "TriangulatedSurface2D", + "TriangulatedSurface3D", + ] + const model_types = [ + "BRep", + "CrossSection", + "ImplicitCrossSection", + "ImplicitStructuralModel", + "Section", + "StructuralModel", + ] + + let viewer_type = value.viewer_type + const geode_type = value.geode_object_type || geode_object_type + if (!viewer_type) { + if (mesh_types.includes(geode_type)) { + viewer_type = "mesh" + } else if (model_types.includes(geode_type)) { + viewer_type = "model" + } + } + return { ...value, + geode_object_type: geode_type, + viewer_type: viewer_type, } } diff --git a/internal/database/database.js b/internal/database/database.js index 11c81856..e0d1f7a8 100644 --- a/internal/database/database.js +++ b/internal/database/database.js @@ -2,6 +2,8 @@ import { Dexie } from "dexie" import { ExtendedDatabase } from "./extended_database" import { dataTable } from "./tables/data_table" import { modelComponentsTable } from "./tables/model_components" +import { dataStyleTable } from "./tables/data_style" +import { modelComponentDataStyleTable } from "./tables/model_component_datastyle" class Database extends Dexie { constructor() { @@ -10,9 +12,15 @@ class Database extends Dexie { this.version(1).stores({ [dataTable.name]: dataTable.schema, [modelComponentsTable.name]: modelComponentsTable.schema, + [dataStyleTable.name]: dataStyleTable.schema, + [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema, }) } + async clear() { + return Promise.all(this.tables.map((table) => table.clear())) + } + static async addTable(tableName, schemaDefinition) { await this.addTables({ [tableName]: schemaDefinition }) } @@ -26,6 +34,9 @@ class Database extends Dexie { currentStores[dataTable.name] = dataTable.schema currentStores[modelComponentsTable.name] = modelComponentsTable.schema + currentStores[dataStyleTable.name] = dataStyleTable.schema + currentStores[modelComponentDataStyleTable.name] = + modelComponentDataStyleTable.schema for (const table of tempDb.tables) { const keyPath = table.schema.primKey.src @@ -49,6 +60,9 @@ class Database extends Dexie { existingDb.version(1).stores({ [dataTable.name]: dataTable.schema, [modelComponentsTable.name]: modelComponentsTable.schema, + [dataStyleTable.name]: dataStyleTable.schema, + [modelComponentDataStyleTable.name]: + modelComponentDataStyleTable.schema, }) } else { existingDb.version(version).stores(currentStores) diff --git a/internal/database/extended_database.js b/internal/database/extended_database.js index 71969e6b..e1cb6b26 100644 --- a/internal/database/extended_database.js +++ b/internal/database/extended_database.js @@ -22,4 +22,8 @@ export class ExtendedDatabase extends Dexie { ...newTables, }) } + + async clear() { + return Promise.all(this.tables.map((table) => table.clear())) + } } diff --git a/internal/database/tables/data_style.js b/internal/database/tables/data_style.js new file mode 100644 index 00000000..12297305 --- /dev/null +++ b/internal/database/tables/data_style.js @@ -0,0 +1,4 @@ +export const dataStyleTable = { + name: "data_style", + schema: "id", +} diff --git a/internal/database/tables/model_component_datastyle.js b/internal/database/tables/model_component_datastyle.js new file mode 100644 index 00000000..8699b056 --- /dev/null +++ b/internal/database/tables/model_component_datastyle.js @@ -0,0 +1,4 @@ +export const modelComponentDataStyleTable = { + name: "model_component_datastyle", + schema: "[id_model+id_component]", +} diff --git a/internal/database/tables/model_components.js b/internal/database/tables/model_components.js index cfb9041c..1b6a16e3 100644 --- a/internal/database/tables/model_components.js +++ b/internal/database/tables/model_components.js @@ -1,4 +1,4 @@ export const modelComponentsTable = { name: "model_components", - schema: "[id+geode_id], [id+type], viewer_id, name", + schema: "[id+geode_id], [id+type], viewer_id, geode_id, name", } diff --git a/internal/stores/data_style/mesh/cells/cell.js b/internal/stores/data_style/mesh/cells/cell.js index c1fd27a0..c8fe2ec5 100644 --- a/internal/stores/data_style/mesh/cells/cell.js +++ b/internal/stores/data_style/mesh/cells/cell.js @@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" import { useMeshCellsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -30,14 +31,20 @@ export function useMeshCellsCellAttributeStyle() { }) } - function setMeshCellsCellAttributeStoredConfig( + async function setMeshCellsCellAttributeStoredConfig( id, name, { minimum, maximum, colorMap }, ) { - const storedConfigs = meshCellsCellAttribute(id).storedConfigs - storedConfigs[name] = { minimum, maximum, colorMap } - return storedConfigs[name] + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.cells.coloring.cell.storedConfigs[name] = { + minimum, + maximum, + colorMap, + } + }) + return meshCellsCellAttributeStoredConfig(id, name) } function meshCellsCellAttributeName(id) { @@ -49,26 +56,39 @@ export function useMeshCellsCellAttributeStyle() { return meshCellsCellAttribute(id).name } function setMeshCellsCellAttributeName(id, name) { - console.log(setMeshCellsCellAttributeName.name, { id, name }) - return viewerStore.request( - meshCellsCellAttributeSchemas.name, - { id, name }, - { - response_function: async () => { - meshCellsCellAttribute(id).name = name - const { minimum, maximum } = meshCellsCellAttributeStoredConfig( - id, - name, - ) - await setMeshCellsCellAttributeRange(id, minimum, maximum) - console.log( - setMeshCellsCellAttributeName.name, - { id }, - meshCellsCellAttributeName(id), - ) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + const cell = style.cells.coloring.cell + cell.name = name + if (!(name in cell.storedConfigs)) { + cell.storedConfigs[name] = { + minimum: undefined, + maximum: undefined, + colorMap: undefined, + } + } + }) + const { minimum, maximum } = meshCellsCellAttributeStoredConfig(id, name) + await setMeshCellsCellAttributeRange(id, minimum, maximum) + console.log( + setMeshCellsCellAttributeName.name, + { id }, + meshCellsCellAttributeName(id), + ) + } + + if (meshCellsCellAttributeSchemas?.name && name !== "") { + return viewerStore.request( + meshCellsCellAttributeSchemas.name, + { id, name }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } function meshCellsCellAttributeRange(id) { @@ -77,12 +97,18 @@ export function useMeshCellsCellAttributeStyle() { const { minimum, maximum } = storedConfig return [minimum, maximum] } - function setMeshCellsCellAttributeRange(id, minimum, maximum) { + async function setMeshCellsCellAttributeRange(id, minimum, maximum) { const name = meshCellsCellAttributeName(id) - const storedConfig = meshCellsCellAttributeStoredConfig(id, name) - storedConfig.minimum = minimum - storedConfig.maximum = maximum - return setMeshCellsCellAttributeColorMap(id, storedConfig.colorMap) + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + const storedConfig = style.cells.coloring.cell.storedConfigs[name] + storedConfig.minimum = minimum + storedConfig.maximum = maximum + }) + return setMeshCellsCellAttributeColorMap( + id, + meshCellsCellAttributeColorMap(id), + ) } function meshCellsCellAttributeColorMap(id) { @@ -94,37 +120,46 @@ export function useMeshCellsCellAttributeStyle() { function setMeshCellsCellAttributeColorMap(id, colorMap) { const name = meshCellsCellAttributeName(id) const storedConfig = meshCellsCellAttributeStoredConfig(id, name) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.cells.coloring.cell.storedConfigs[name].colorMap = colorMap + }) + console.log( + setMeshCellsCellAttributeColorMap.name, + { id }, + meshCellsCellAttributeColorMap(id), + ) + } + if ( storedConfig.minimum === undefined || storedConfig.maximum === undefined || colorMap === undefined ) { - storedConfig.colorMap = colorMap - return + return updateState() } - const points = getRGBPointsFromPreset(colorMap) - const { minimum, maximum } = storedConfig - console.log(setMeshCellsCellAttributeColorMap.name, { - id, - minimum, - maximum, - colorMap, - }) - return viewerStore.request( - meshCellsCellAttributeSchemas.color_map, - { id, points, minimum, maximum }, - { - response_function: () => { - storedConfig.colorMap = colorMap - console.log( - setMeshCellsCellAttributeColorMap.name, - { id }, - meshCellsCellAttributeColorMap(id), - ) + if (meshCellsCellAttributeSchemas?.color_map) { + const points = getRGBPointsFromPreset(colorMap) + const { minimum, maximum } = storedConfig + + console.log(setMeshCellsCellAttributeColorMap.name, { + id, + minimum, + maximum, + colorMap, + }) + return viewerStore.request( + meshCellsCellAttributeSchemas.color_map, + { id, points, minimum, maximum }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/cells/color.js b/internal/stores/data_style/mesh/cells/color.js index 24db1b5b..684db0ad 100644 --- a/internal/stores/data_style/mesh/cells/color.js +++ b/internal/stores/data_style/mesh/cells/color.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshCellsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,29 @@ export function useMeshCellsColorStyle() { return meshCellsCommonStyle.meshCellsColoring(id).color } function setMeshCellsColor(id, color) { - return viewerStore.request( - meshCellsColorSchemas, - { id, color }, - { - response_function: () => { - meshCellsCommonStyle.meshCellsColoring(id).color = color - console.log( - setMeshCellsColor.name, - { id }, - JSON.stringify(meshCellsColor(id)), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.cells.coloring.color = color + }) + console.log( + setMeshCellsColor.name, + { id }, + JSON.stringify(meshCellsColor(id)), + ) + } + + if (meshCellsColorSchemas && color !== undefined) { + return viewerStore.request( + meshCellsColorSchemas, + { id, color }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/cells/index.js b/internal/stores/data_style/mesh/cells/index.js index f5d7e7b4..9680a3c4 100644 --- a/internal/stores/data_style/mesh/cells/index.js +++ b/internal/stores/data_style/mesh/cells/index.js @@ -1,6 +1,7 @@ // Third party imports // Local imports +import { useDataStyleStateStore } from "../../state" import { useMeshCellsCellAttributeStyle } from "./cell" import { useMeshCellsColorStyle } from "./color" import { useMeshCellsCommonStyle } from "./common" @@ -19,8 +20,10 @@ export function useMeshCellsStyle() { const meshCellsCellAttributeStyle = useMeshCellsCellAttributeStyle() async function setMeshCellsActiveColoring(id, type) { - const coloring = meshCellsCommonStyle.meshCellsColoring(id) - coloring.active = type + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.cells.coloring.active = type + }) console.log( setMeshCellsActiveColoring.name, { id }, diff --git a/internal/stores/data_style/mesh/cells/textures.js b/internal/stores/data_style/mesh/cells/textures.js index c2847281..aceb5daf 100644 --- a/internal/stores/data_style/mesh/cells/textures.js +++ b/internal/stores/data_style/mesh/cells/textures.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshCellsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -21,8 +22,11 @@ export function useMeshCellsTexturesStyle() { meshCellsTexturesSchemas, { id, textures }, { - response_function: () => { - meshCellsCommonStyle.meshCellsColoring(id).textures = textures + response_function: async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.cells.coloring.textures = textures + }) console.log(setMeshCellsTextures.name, { id }, meshCellsTextures(id)) }, }, diff --git a/internal/stores/data_style/mesh/cells/vertex.js b/internal/stores/data_style/mesh/cells/vertex.js index dbb85665..f88b7e0d 100644 --- a/internal/stores/data_style/mesh/cells/vertex.js +++ b/internal/stores/data_style/mesh/cells/vertex.js @@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" import { useMeshCellsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -30,14 +31,20 @@ export function useMeshCellsVertexAttributeStyle() { }) } - function setMeshCellsVertexAttributeStoredConfig( + async function setMeshCellsVertexAttributeStoredConfig( id, name, { minimum, maximum, colorMap }, ) { - const storedConfigs = meshCellsVertexAttribute(id).storedConfigs - storedConfigs[name] = { minimum, maximum, colorMap } - return storedConfigs[name] + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.cells.coloring.vertex.storedConfigs[name] = { + minimum, + maximum, + colorMap, + } + }) + return meshCellsVertexAttributeStoredConfig(id, name) } function meshCellsVertexAttributeName(id) { @@ -49,26 +56,42 @@ export function useMeshCellsVertexAttributeStyle() { return meshCellsVertexAttribute(id).name } function setMeshCellsVertexAttributeName(id, name) { - console.log(setMeshCellsVertexAttributeName.name, { id, name }) - return viewerStore.request( - meshCellsVertexAttributeSchemas.name, - { id, name }, - { - response_function: async () => { - meshCellsVertexAttribute(id).name = name - const { minimum, maximum } = meshCellsVertexAttributeStoredConfig( - id, - name, - ) - await setMeshCellsVertexAttributeRange(id, minimum, maximum) - console.log( - setMeshCellsVertexAttributeName.name, - { id }, - meshCellsVertexAttributeName(id), - ) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + const vertex = style.cells.coloring.vertex + vertex.name = name + if (!(name in vertex.storedConfigs)) { + vertex.storedConfigs[name] = { + minimum: undefined, + maximum: undefined, + colorMap: undefined, + } + } + }) + const { minimum, maximum } = meshCellsVertexAttributeStoredConfig( + id, + name, + ) + await setMeshCellsVertexAttributeRange(id, minimum, maximum) + console.log( + setMeshCellsVertexAttributeName.name, + { id }, + meshCellsVertexAttributeName(id), + ) + } + + if (meshCellsVertexAttributeSchemas?.name && name !== "") { + return viewerStore.request( + meshCellsVertexAttributeSchemas.name, + { id, name }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } function meshCellsVertexAttributeRange(id) { @@ -77,12 +100,18 @@ export function useMeshCellsVertexAttributeStyle() { const { minimum, maximum } = storedConfig return [minimum, maximum] } - function setMeshCellsVertexAttributeRange(id, minimum, maximum) { + async function setMeshCellsVertexAttributeRange(id, minimum, maximum) { const name = meshCellsVertexAttributeName(id) - const storedConfig = meshCellsVertexAttributeStoredConfig(id, name) - storedConfig.minimum = minimum - storedConfig.maximum = maximum - return setMeshCellsVertexAttributeColorMap(id, storedConfig.colorMap) + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + const storedConfig = style.cells.coloring.vertex.storedConfigs[name] + storedConfig.minimum = minimum + storedConfig.maximum = maximum + }) + return setMeshCellsVertexAttributeColorMap( + id, + meshCellsVertexAttributeColorMap(id), + ) } function meshCellsVertexAttributeColorMap(id) { @@ -94,37 +123,46 @@ export function useMeshCellsVertexAttributeStyle() { function setMeshCellsVertexAttributeColorMap(id, colorMap) { const name = meshCellsVertexAttributeName(id) const storedConfig = meshCellsVertexAttributeStoredConfig(id, name) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.cells.coloring.vertex.storedConfigs[name].colorMap = colorMap + }) + console.log( + setMeshCellsVertexAttributeColorMap.name, + { id }, + meshCellsVertexAttributeColorMap(id), + ) + } + if ( storedConfig.minimum === undefined || storedConfig.maximum === undefined || colorMap === undefined ) { - storedConfig.colorMap = colorMap - return + return updateState() } - const points = getRGBPointsFromPreset(colorMap) - const { minimum, maximum } = storedConfig - console.log(setMeshCellsVertexAttributeColorMap.name, { - id, - minimum, - maximum, - colorMap, - }) - return viewerStore.request( - meshCellsVertexAttributeSchemas.color_map, - { id, points, minimum, maximum }, - { - response_function: () => { - storedConfig.colorMap = colorMap - console.log( - setMeshCellsVertexAttributeColorMap.name, - { id }, - meshCellsVertexAttributeColorMap(id), - ) + if (meshCellsVertexAttributeSchemas?.color_map) { + const points = getRGBPointsFromPreset(colorMap) + const { minimum, maximum } = storedConfig + + console.log(setMeshCellsVertexAttributeColorMap.name, { + id, + minimum, + maximum, + colorMap, + }) + return viewerStore.request( + meshCellsVertexAttributeSchemas.color_map, + { id, points, minimum, maximum }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/cells/visibility.js b/internal/stores/data_style/mesh/cells/visibility.js index 76ba11e0..4d22e8f1 100644 --- a/internal/stores/data_style/mesh/cells/visibility.js +++ b/internal/stores/data_style/mesh/cells/visibility.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshCellsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,29 @@ export function useMeshCellsVisibilityStyle() { return meshCellsCommonStyle.meshCellsStyle(id).visibility } function setMeshCellsVisibility(id, visibility) { - return viewerStore.request( - meshCellsVisibilitySchema, - { id, visibility }, - { - response_function: () => { - meshCellsCommonStyle.meshCellsStyle(id).visibility = visibility - console.log( - setMeshCellsVisibility.name, - { id }, - meshCellsVisibility(id), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.cells.visibility = visibility + }) + console.log( + setMeshCellsVisibility.name, + { id }, + meshCellsVisibility(id), + ) + } + + if (meshCellsVisibilitySchema) { + return viewerStore.request( + meshCellsVisibilitySchema, + { id, visibility }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/edges/color.js b/internal/stores/data_style/mesh/edges/color.js index 48a7e036..1f03c44a 100644 --- a/internal/stores/data_style/mesh/edges/color.js +++ b/internal/stores/data_style/mesh/edges/color.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshEdgesCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,29 @@ export function useMeshEdgesColorStyle() { return meshEdgesCommonStyle.meshEdgesColoring(id).color } function setMeshEdgesColor(id, color) { - return viewerStore.request( - meshEdgesColorSchemas, - { id, color }, - { - response_function: () => { - meshEdgesCommonStyle.meshEdgesColoring(id).color = color - console.log( - setMeshEdgesColor.name, - { id }, - JSON.stringify(meshEdgesColor(id)), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.edges.coloring.color = color + }) + console.log( + setMeshEdgesColor.name, + { id }, + JSON.stringify(meshEdgesColor(id)), + ) + } + + if (meshEdgesColorSchemas && color !== undefined) { + return viewerStore.request( + meshEdgesColorSchemas, + { id, color }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/edges/edge.js b/internal/stores/data_style/mesh/edges/edge.js index f4e7aa1a..81efbe4a 100644 --- a/internal/stores/data_style/mesh/edges/edge.js +++ b/internal/stores/data_style/mesh/edges/edge.js @@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" import { useMeshEdgesCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -30,14 +31,20 @@ export function useMeshEdgesEdgeAttributeStyle() { }) } - function setMeshEdgesEdgeAttributeStoredConfig( + async function setMeshEdgesEdgeAttributeStoredConfig( id, name, { minimum, maximum, colorMap }, ) { - const storedConfigs = meshEdgesEdgeAttribute(id).storedConfigs - storedConfigs[name] = { minimum, maximum, colorMap } - return storedConfigs[name] + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.edges.coloring.edge.storedConfigs[name] = { + minimum, + maximum, + colorMap, + } + }) + return meshEdgesEdgeAttributeStoredConfig(id, name) } function meshEdgesEdgeAttributeName(id) { @@ -49,26 +56,39 @@ export function useMeshEdgesEdgeAttributeStyle() { return meshEdgesEdgeAttribute(id).name } function setMeshEdgesEdgeAttributeName(id, name) { - console.log(setMeshEdgesEdgeAttributeName.name, { id, name }) - return viewerStore.request( - meshEdgesEdgeAttributeSchemas.name, - { id, name }, - { - response_function: async () => { - meshEdgesEdgeAttribute(id).name = name - const { minimum, maximum } = meshEdgesEdgeAttributeStoredConfig( - id, - name, - ) - await setMeshEdgesEdgeAttributeRange(id, minimum, maximum) - console.log( - setMeshEdgesEdgeAttributeName.name, - { id }, - meshEdgesEdgeAttributeName(id), - ) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + const edge = style.edges.coloring.edge + edge.name = name + if (!(name in edge.storedConfigs)) { + edge.storedConfigs[name] = { + minimum: undefined, + maximum: undefined, + colorMap: undefined, + } + } + }) + const { minimum, maximum } = meshEdgesEdgeAttributeStoredConfig(id, name) + await setMeshEdgesEdgeAttributeRange(id, minimum, maximum) + console.log( + setMeshEdgesEdgeAttributeName.name, + { id }, + meshEdgesEdgeAttributeName(id), + ) + } + + if (meshEdgesEdgeAttributeSchemas?.name && name !== "") { + return viewerStore.request( + meshEdgesEdgeAttributeSchemas.name, + { id, name }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } function meshEdgesEdgeAttributeRange(id) { @@ -77,12 +97,18 @@ export function useMeshEdgesEdgeAttributeStyle() { const { minimum, maximum } = storedConfig return [minimum, maximum] } - function setMeshEdgesEdgeAttributeRange(id, minimum, maximum) { + async function setMeshEdgesEdgeAttributeRange(id, minimum, maximum) { const name = meshEdgesEdgeAttributeName(id) - const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name) - storedConfig.minimum = minimum - storedConfig.maximum = maximum - return setMeshEdgesEdgeAttributeColorMap(id, storedConfig.colorMap) + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + const storedConfig = style.edges.coloring.edge.storedConfigs[name] + storedConfig.minimum = minimum + storedConfig.maximum = maximum + }) + return setMeshEdgesEdgeAttributeColorMap( + id, + meshEdgesEdgeAttributeColorMap(id), + ) } function meshEdgesEdgeAttributeColorMap(id) { @@ -94,37 +120,46 @@ export function useMeshEdgesEdgeAttributeStyle() { function setMeshEdgesEdgeAttributeColorMap(id, colorMap) { const name = meshEdgesEdgeAttributeName(id) const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.edges.coloring.edge.storedConfigs[name].colorMap = colorMap + }) + console.log( + setMeshEdgesEdgeAttributeColorMap.name, + { id }, + meshEdgesEdgeAttributeColorMap(id), + ) + } + if ( storedConfig.minimum === undefined || storedConfig.maximum === undefined || colorMap === undefined ) { - storedConfig.colorMap = colorMap - return + return updateState() } - const points = getRGBPointsFromPreset(colorMap) - const { minimum, maximum } = storedConfig - console.log(setMeshEdgesEdgeAttributeColorMap.name, { - id, - minimum, - maximum, - colorMap, - }) - return viewerStore.request( - meshEdgesEdgeAttributeSchemas.color_map, - { id, points, minimum, maximum }, - { - response_function: () => { - storedConfig.colorMap = colorMap - console.log( - setMeshEdgesEdgeAttributeColorMap.name, - { id }, - meshEdgesEdgeAttributeColorMap(id), - ) + if (meshEdgesEdgeAttributeSchemas?.color_map) { + const points = getRGBPointsFromPreset(colorMap) + const { minimum, maximum } = storedConfig + + console.log(setMeshEdgesEdgeAttributeColorMap.name, { + id, + minimum, + maximum, + colorMap, + }) + return viewerStore.request( + meshEdgesEdgeAttributeSchemas.color_map, + { id, points, minimum, maximum }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/edges/index.js b/internal/stores/data_style/mesh/edges/index.js index 14df9cc6..e8ad8b07 100644 --- a/internal/stores/data_style/mesh/edges/index.js +++ b/internal/stores/data_style/mesh/edges/index.js @@ -7,6 +7,7 @@ import { useMeshEdgesEdgeAttributeStyle } from "./edge" import { useMeshEdgesVertexAttributeStyle } from "./vertex" import { useMeshEdgesVisibilityStyle } from "./visibility" import { useMeshEdgesWidthStyle } from "./width" +import { useDataStyleStateStore } from "../../state" // Local constants @@ -19,8 +20,10 @@ export function useMeshEdgesStyle() { const meshEdgesEdgeAttributeStyle = useMeshEdgesEdgeAttributeStyle() async function setMeshEdgesActiveColoring(id, type) { - const coloring = meshEdgesCommonStyle.meshEdgesColoring(id) - coloring.active = type + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.edges.coloring.active = type + }) console.log( setMeshEdgesActiveColoring.name, { id }, @@ -31,12 +34,6 @@ export function useMeshEdgesStyle() { id, meshEdgesColorStyle.meshEdgesColor(id), ) - } else if (type === "textures") { - const textures = meshEdgesTexturesStore.meshEdgesTextures(id) - if (textures === undefined) { - return Promise.resolve() - } - return meshEdgesTexturesStore.setMeshEdgesTextures(id, textures) } else if (type === "vertex") { const name = meshEdgesVertexAttributeStyle.meshEdgesVertexAttributeName(id) diff --git a/internal/stores/data_style/mesh/edges/vertex.js b/internal/stores/data_style/mesh/edges/vertex.js index f32ec35e..5b3f0685 100644 --- a/internal/stores/data_style/mesh/edges/vertex.js +++ b/internal/stores/data_style/mesh/edges/vertex.js @@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" import { useMeshEdgesCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -30,14 +31,20 @@ export function useMeshEdgesVertexAttributeStyle() { }) } - function setMeshEdgesVertexAttributeStoredConfig( + async function setMeshEdgesVertexAttributeStoredConfig( id, name, { minimum, maximum, colorMap }, ) { - const storedConfigs = meshEdgesVertexAttribute(id).storedConfigs - storedConfigs[name] = { minimum, maximum, colorMap } - return storedConfigs[name] + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.edges.coloring.vertex.storedConfigs[name] = { + minimum, + maximum, + colorMap, + } + }) + return meshEdgesVertexAttributeStoredConfig(id, name) } function meshEdgesVertexAttributeName(id) { @@ -49,26 +56,42 @@ export function useMeshEdgesVertexAttributeStyle() { return meshEdgesVertexAttribute(id).name } function setMeshEdgesVertexAttributeName(id, name) { - console.log(setMeshEdgesVertexAttributeName.name, { id, name }) - return viewerStore.request( - meshEdgesVertexAttributeSchemas.name, - { id, name }, - { - response_function: async () => { - meshEdgesVertexAttribute(id).name = name - const { minimum, maximum } = meshEdgesVertexAttributeStoredConfig( - id, - name, - ) - await setMeshEdgesVertexAttributeRange(id, minimum, maximum) - console.log( - setMeshEdgesVertexAttributeName.name, - { id }, - meshEdgesVertexAttributeName(id), - ) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + const vertex = style.edges.coloring.vertex + vertex.name = name + if (!(name in vertex.storedConfigs)) { + vertex.storedConfigs[name] = { + minimum: undefined, + maximum: undefined, + colorMap: undefined, + } + } + }) + const { minimum, maximum } = meshEdgesVertexAttributeStoredConfig( + id, + name, + ) + await setMeshEdgesVertexAttributeRange(id, minimum, maximum) + console.log( + setMeshEdgesVertexAttributeName.name, + { id }, + meshEdgesVertexAttributeName(id), + ) + } + + if (meshEdgesVertexAttributeSchemas?.name && name !== "") { + return viewerStore.request( + meshEdgesVertexAttributeSchemas.name, + { id, name }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } function meshEdgesVertexAttributeRange(id) { @@ -77,12 +100,18 @@ export function useMeshEdgesVertexAttributeStyle() { const { minimum, maximum } = storedConfig return [minimum, maximum] } - function setMeshEdgesVertexAttributeRange(id, minimum, maximum) { + async function setMeshEdgesVertexAttributeRange(id, minimum, maximum) { const name = meshEdgesVertexAttributeName(id) - const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name) - storedConfig.minimum = minimum - storedConfig.maximum = maximum - return setMeshEdgesVertexAttributeColorMap(id, storedConfig.colorMap) + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + const storedConfig = style.edges.coloring.vertex.storedConfigs[name] + storedConfig.minimum = minimum + storedConfig.maximum = maximum + }) + return setMeshEdgesVertexAttributeColorMap( + id, + meshEdgesVertexAttributeColorMap(id), + ) } function meshEdgesVertexAttributeColorMap(id) { @@ -94,37 +123,46 @@ export function useMeshEdgesVertexAttributeStyle() { function setMeshEdgesVertexAttributeColorMap(id, colorMap) { const name = meshEdgesVertexAttributeName(id) const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.edges.coloring.vertex.storedConfigs[name].colorMap = colorMap + }) + console.log( + setMeshEdgesVertexAttributeColorMap.name, + { id }, + meshEdgesVertexAttributeColorMap(id), + ) + } + if ( storedConfig.minimum === undefined || storedConfig.maximum === undefined || colorMap === undefined ) { - storedConfig.colorMap = colorMap - return + return updateState() } - const points = getRGBPointsFromPreset(colorMap) - const { minimum, maximum } = storedConfig - console.log(setMeshEdgesVertexAttributeColorMap.name, { - id, - minimum, - maximum, - colorMap, - }) - return viewerStore.request( - meshEdgesVertexAttributeSchemas.color_map, - { id, points, minimum, maximum }, - { - response_function: () => { - storedConfig.colorMap = colorMap - console.log( - setMeshEdgesVertexAttributeColorMap.name, - { id }, - meshEdgesVertexAttributeColorMap(id), - ) + if (meshEdgesVertexAttributeSchemas?.color_map) { + const points = getRGBPointsFromPreset(colorMap) + const { minimum, maximum } = storedConfig + + console.log(setMeshEdgesVertexAttributeColorMap.name, { + id, + minimum, + maximum, + colorMap, + }) + return viewerStore.request( + meshEdgesVertexAttributeSchemas.color_map, + { id, points, minimum, maximum }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/edges/visibility.js b/internal/stores/data_style/mesh/edges/visibility.js index f41e9473..81accbfb 100644 --- a/internal/stores/data_style/mesh/edges/visibility.js +++ b/internal/stores/data_style/mesh/edges/visibility.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshEdgesCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,29 @@ export function useMeshEdgesVisibilityStyle() { return meshEdgesCommonStyle.meshEdgesStyle(id).visibility } function setMeshEdgesVisibility(id, visibility) { - return viewerStore.request( - meshEdgesVisibilitySchema, - { id, visibility }, - { - response_function: () => { - meshEdgesCommonStyle.meshEdgesStyle(id).visibility = visibility - console.log( - setMeshEdgesVisibility.name, - { id }, - meshEdgesVisibility(id), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.edges.visibility = visibility + }) + console.log( + setMeshEdgesVisibility.name, + { id }, + meshEdgesVisibility(id), + ) + } + + if (meshEdgesVisibilitySchema) { + return viewerStore.request( + meshEdgesVisibilitySchema, + { id, visibility }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/edges/width.js b/internal/stores/data_style/mesh/edges/width.js index e6758864..048b64b8 100644 --- a/internal/stores/data_style/mesh/edges/width.js +++ b/internal/stores/data_style/mesh/edges/width.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshEdgesCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,25 @@ export function useMeshEdgesWidthStyle() { return meshEdgesCommonStyle.meshEdgesStyle(id).width } function setMeshEdgesWidth(id, width) { - return viewerStore.request( - meshEdgesWidthSchemas, - { id, width }, - { - response_function: () => { - meshEdgesCommonStyle.meshEdgesStyle(id).width = width - console.log( - setMeshEdgesWidth.name, - { id }, - JSON.stringify(meshEdgesWidth(id)), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.edges.width = width + }) + console.log(setMeshEdgesWidth.name, { id }, meshEdgesWidth(id)) + } + + if (meshEdgesWidthSchemas) { + return viewerStore.request( + meshEdgesWidthSchemas, + { id, width }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/index.js b/internal/stores/data_style/mesh/index.js index c7e00a24..c71ec6bb 100644 --- a/internal/stores/data_style/mesh/index.js +++ b/internal/stores/data_style/mesh/index.js @@ -29,17 +29,41 @@ export default function useMeshStyle() { return dataStyleState.getStyle(id).visibility } function setMeshVisibility(id, visibility) { - return viewerStore.request( - meshSchemas.visibility, - { id, visibility }, - { - response_function: () => { - hybridViewerStore.setVisibility(id, visibility) - dataStyleState.getStyle(id).visibility = visibility - console.log(setMeshVisibility.name, { id }, meshVisibility(id)) - }, - }, - ) + const updateState = async () => { + await dataStyleState.mutateStyle(id, (style) => { + style.visibility = visibility + }) + hybridViewerStore.setVisibility(id, visibility) + console.log(setMeshVisibility.name, { id }, meshVisibility(id)) + } + + if (meshSchemas.visibility) { + return viewerStore.request(meshSchemas.visibility, { id, visibility }, { + response_function: updateState, + }) + } else { + return updateState() + } + } + + function meshColor(id) { + return dataStyleState.getStyle(id).color + } + function setMeshColor(id, color) { + const updateState = async () => { + await dataStyleState.mutateStyle(id, (style) => { + style.color = color + }) + console.log(setMeshColor.name, { id }, meshColor(id)) + } + + if (meshSchemas.color) { + return viewerStore.request(meshSchemas.color, { id, color }, { + response_function: updateState, + }) + } else { + return updateState() + } } function applyMeshStyle(id) { @@ -48,6 +72,8 @@ export default function useMeshStyle() { for (const [key, value] of Object.entries(style)) { if (key === "visibility") { promise_array.push(setMeshVisibility(id, value)) + } else if (key === "color") { + promise_array.push(setMeshColor(id, value)) } else if (key === "points") { promise_array.push(meshPointsStyle.applyMeshPointsStyle(id)) } else if (key === "edges") { @@ -58,7 +84,17 @@ export default function useMeshStyle() { promise_array.push(meshPolygonsStyle.applyMeshPolygonsStyle(id)) } else if (key === "polyhedra") { promise_array.push(meshPolyhedraStyle.applyMeshPolyhedraStyle(id)) - } else if (key !== "attributes") { + } else if ( + key === "corners" || + key === "lines" || + key === "surfaces" || + key === "blocks" || + key === "attributes" || + key === "id" + ) { + // These keys are either handled elsewhere or not applicable to mesh objects + continue + } else { throw new Error(`Unknown mesh key: ${key}`) } } @@ -68,6 +104,8 @@ export default function useMeshStyle() { return { meshVisibility, setMeshVisibility, + meshColor, + setMeshColor, applyMeshStyle, ...meshPointsStyle, ...meshEdgesStyle, diff --git a/internal/stores/data_style/mesh/points/color.js b/internal/stores/data_style/mesh/points/color.js index c1af300b..44e9fab1 100644 --- a/internal/stores/data_style/mesh/points/color.js +++ b/internal/stores/data_style/mesh/points/color.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshPointsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,29 @@ export function useMeshPointsColorStyle() { return meshPointsCommonStyle.meshPointsColoring(id).color } function setMeshPointsColor(id, color) { - return viewerStore.request( - meshPointsColorSchemas, - { id, color }, - { - response_function: () => { - meshPointsCommonStyle.meshPointsColoring(id).color = color - console.log( - setMeshPointsColor.name, - { id }, - JSON.stringify(meshPointsColor(id)), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.points.coloring.color = color + }) + console.log( + setMeshPointsColor.name, + { id }, + JSON.stringify(meshPointsColor(id)), + ) + } + + if (meshPointsColorSchemas && color !== undefined) { + return viewerStore.request( + meshPointsColorSchemas, + { id, color }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/points/index.js b/internal/stores/data_style/mesh/points/index.js index 37610f42..b9a1cd6a 100644 --- a/internal/stores/data_style/mesh/points/index.js +++ b/internal/stores/data_style/mesh/points/index.js @@ -6,6 +6,7 @@ import { useMeshPointsCommonStyle } from "./common" import { useMeshPointsSizeStyle } from "./size" import { useMeshPointsVertexAttributeStyle } from "./vertex" import { useMeshPointsVisibilityStyle } from "./visibility" +import { useDataStyleStateStore } from "../../state" // Local constants @@ -17,8 +18,10 @@ export function useMeshPointsStyle() { const meshPointsVertexAttributeStyle = useMeshPointsVertexAttributeStyle() async function setMeshPointsActiveColoring(id, type) { - const coloring = meshPointsCommonStyle.meshPointsColoring(id) - coloring.active = type + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.points.coloring.active = type + }) console.log( setMeshPointsActiveColoring.name, { id }, @@ -29,12 +32,6 @@ export function useMeshPointsStyle() { id, meshPointsColorStyle.meshPointsColor(id), ) - } else if (type === "textures") { - const textures = meshPointsTexturesStore.meshPointsTextures(id) - if (textures === undefined) { - return Promise.resolve() - } - return meshPointsTexturesStore.setMeshPointsTextures(id, textures) } else if (type === "vertex") { const name = meshPointsVertexAttributeStyle.meshPointsVertexAttributeName(id) @@ -45,16 +42,6 @@ export function useMeshPointsStyle() { id, name, ) - } else if (type === "polygon") { - const name = - meshPointsPolygonAttributeStyleStore.meshPointsPolygonAttributeName(id) - if (name === undefined) { - return Promise.resolve() - } - await meshPointsPolygonAttributeStyleStore.setMeshPointsPolygonAttributeName( - id, - name, - ) } else { throw new Error(`Unknown mesh points coloring type: ${type}`) } diff --git a/internal/stores/data_style/mesh/points/size.js b/internal/stores/data_style/mesh/points/size.js index 4fde288d..ab29a5bf 100644 --- a/internal/stores/data_style/mesh/points/size.js +++ b/internal/stores/data_style/mesh/points/size.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshPointsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,29 @@ export function useMeshPointsSizeStyle() { return meshPointsCommonStyle.meshPointsStyle(id).size } function setMeshPointsSize(id, size) { - return viewerStore.request( - meshPointsSizeSchemas, - { id, size }, - { - response_function: () => { - meshPointsCommonStyle.meshPointsStyle(id).size = size - console.log( - setMeshPointsSize.name, - { id }, - JSON.stringify(meshPointsSize(id)), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.points.size = size + }) + console.log( + setMeshPointsSize.name, + { id }, + JSON.stringify(meshPointsSize(id)), + ) + } + + if (meshPointsSizeSchemas) { + return viewerStore.request( + meshPointsSizeSchemas, + { id, size }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/points/vertex.js b/internal/stores/data_style/mesh/points/vertex.js index 854fda78..5ea76529 100644 --- a/internal/stores/data_style/mesh/points/vertex.js +++ b/internal/stores/data_style/mesh/points/vertex.js @@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" import { useMeshPointsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -30,14 +31,20 @@ export function useMeshPointsVertexAttributeStyle() { }) } - function setMeshPointsVertexAttributeStoredConfig( + async function setMeshPointsVertexAttributeStoredConfig( id, name, { minimum, maximum, colorMap }, ) { - const storedConfigs = meshPointsVertexAttribute(id).storedConfigs - storedConfigs[name] = { minimum, maximum, colorMap } - return storedConfigs[name] + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.points.coloring.vertex.storedConfigs[name] = { + minimum, + maximum, + colorMap, + } + }) + return meshPointsVertexAttributeStoredConfig(id, name) } function meshPointsVertexAttributeName(id) { @@ -49,26 +56,42 @@ export function useMeshPointsVertexAttributeStyle() { return meshPointsVertexAttribute(id).name } function setMeshPointsVertexAttributeName(id, name) { - console.log(setMeshPointsVertexAttributeName.name, { id, name }) - return viewerStore.request( - meshPointsVertexAttributeSchemas.name, - { id, name }, - { - response_function: async () => { - meshPointsVertexAttribute(id).name = name - const { minimum, maximum } = meshPointsVertexAttributeStoredConfig( - id, - name, - ) - await setMeshPointsVertexAttributeRange(id, minimum, maximum) - console.log( - setMeshPointsVertexAttributeName.name, - { id }, - meshPointsVertexAttributeName(id), - ) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + const vertex = style.points.coloring.vertex + vertex.name = name + if (!(name in vertex.storedConfigs)) { + vertex.storedConfigs[name] = { + minimum: undefined, + maximum: undefined, + colorMap: undefined, + } + } + }) + const { minimum, maximum } = meshPointsVertexAttributeStoredConfig( + id, + name, + ) + await setMeshPointsVertexAttributeRange(id, minimum, maximum) + console.log( + setMeshPointsVertexAttributeName.name, + { id }, + meshPointsVertexAttributeName(id), + ) + } + + if (meshPointsVertexAttributeSchemas?.name && name !== "") { + return viewerStore.request( + meshPointsVertexAttributeSchemas.name, + { id, name }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } function meshPointsVertexAttributeRange(id) { @@ -77,12 +100,18 @@ export function useMeshPointsVertexAttributeStyle() { const { minimum, maximum } = storedConfig return [minimum, maximum] } - function setMeshPointsVertexAttributeRange(id, minimum, maximum) { + async function setMeshPointsVertexAttributeRange(id, minimum, maximum) { const name = meshPointsVertexAttributeName(id) - const storedConfig = meshPointsVertexAttributeStoredConfig(id, name) - storedConfig.minimum = minimum - storedConfig.maximum = maximum - return setMeshPointsVertexAttributeColorMap(id, storedConfig.colorMap) + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + const storedConfig = style.points.coloring.vertex.storedConfigs[name] + storedConfig.minimum = minimum + storedConfig.maximum = maximum + }) + return setMeshPointsVertexAttributeColorMap( + id, + meshPointsVertexAttributeColorMap(id), + ) } function meshPointsVertexAttributeColorMap(id) { @@ -94,37 +123,46 @@ export function useMeshPointsVertexAttributeStyle() { function setMeshPointsVertexAttributeColorMap(id, colorMap) { const name = meshPointsVertexAttributeName(id) const storedConfig = meshPointsVertexAttributeStoredConfig(id, name) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.points.coloring.vertex.storedConfigs[name].colorMap = colorMap + }) + console.log( + setMeshPointsVertexAttributeColorMap.name, + { id }, + meshPointsVertexAttributeColorMap(id), + ) + } + if ( storedConfig.minimum === undefined || storedConfig.maximum === undefined || colorMap === undefined ) { - storedConfig.colorMap = colorMap - return + return updateState() } - const points = getRGBPointsFromPreset(colorMap) - const { minimum, maximum } = storedConfig - console.log(setMeshPointsVertexAttributeColorMap.name, { - id, - minimum, - maximum, - colorMap, - }) - return viewerStore.request( - meshPointsVertexAttributeSchemas.color_map, - { id, points, minimum, maximum }, - { - response_function: () => { - storedConfig.colorMap = colorMap - console.log( - setMeshPointsVertexAttributeColorMap.name, - { id }, - meshPointsVertexAttributeColorMap(id), - ) + if (meshPointsVertexAttributeSchemas?.color_map) { + const points = getRGBPointsFromPreset(colorMap) + const { minimum, maximum } = storedConfig + + console.log(setMeshPointsVertexAttributeColorMap.name, { + id, + minimum, + maximum, + colorMap, + }) + return viewerStore.request( + meshPointsVertexAttributeSchemas.color_map, + { id, points, minimum, maximum }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/points/visibility.js b/internal/stores/data_style/mesh/points/visibility.js index a6efb131..62fc73a0 100644 --- a/internal/stores/data_style/mesh/points/visibility.js +++ b/internal/stores/data_style/mesh/points/visibility.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshPointsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,29 @@ export function useMeshPointsVisibilityStyle() { return meshPointsCommonStyle.meshPointsStyle(id).visibility } function setMeshPointsVisibility(id, visibility) { - return viewerStore.request( - meshPointsVisibilitySchema, - { id, visibility }, - { - response_function: () => { - meshPointsCommonStyle.meshPointsStyle(id).visibility = visibility - console.log( - setMeshPointsVisibility.name, - { id }, - meshPointsVisibility(id), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.points.visibility = visibility + }) + console.log( + setMeshPointsVisibility.name, + { id }, + meshPointsVisibility(id), + ) + } + + if (meshPointsVisibilitySchema) { + return viewerStore.request( + meshPointsVisibilitySchema, + { id, visibility }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/polygons/color.js b/internal/stores/data_style/mesh/polygons/color.js index fbfdcb51..c5af6d0e 100644 --- a/internal/stores/data_style/mesh/polygons/color.js +++ b/internal/stores/data_style/mesh/polygons/color.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshPolygonsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,29 @@ export function useMeshPolygonsColorStyle() { return meshPolygonsCommonStyle.meshPolygonsColoring(id).color } function setMeshPolygonsColor(id, color) { - return viewerStore.request( - meshPolygonsColorSchemas, - { id, color }, - { - response_function: () => { - meshPolygonsCommonStyle.meshPolygonsColoring(id).color = color - console.log( - setMeshPolygonsColor.name, - { id }, - JSON.stringify(meshPolygonsColor(id)), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polygons.coloring.color = color + }) + console.log( + setMeshPolygonsColor.name, + { id }, + JSON.stringify(meshPolygonsColor(id)), + ) + } + + if (meshPolygonsColorSchemas && color !== undefined) { + return viewerStore.request( + meshPolygonsColorSchemas, + { id, color }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/polygons/index.js b/internal/stores/data_style/mesh/polygons/index.js index 86c1496b..794202e1 100644 --- a/internal/stores/data_style/mesh/polygons/index.js +++ b/internal/stores/data_style/mesh/polygons/index.js @@ -7,6 +7,7 @@ import { useMeshPolygonsPolygonAttributeStyle } from "./polygon" import { useMeshPolygonsTexturesStyle } from "./textures" import { useMeshPolygonsVertexAttributeStyle } from "./vertex" import { useMeshPolygonsVisibilityStyle } from "./visibility" +import { useDataStyleStateStore } from "../../state" // Local constants @@ -20,8 +21,10 @@ export function useMeshPolygonsStyle() { useMeshPolygonsPolygonAttributeStyle() async function setMeshPolygonsActiveColoring(id, type) { - const coloring = meshPolygonsCommonStyle.meshPolygonsColoring(id) - coloring.active = type + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polygons.coloring.active = type + }) console.log( setMeshPolygonsActiveColoring.name, { id }, diff --git a/internal/stores/data_style/mesh/polygons/polygon.js b/internal/stores/data_style/mesh/polygons/polygon.js index de482105..3ef708b0 100644 --- a/internal/stores/data_style/mesh/polygons/polygon.js +++ b/internal/stores/data_style/mesh/polygons/polygon.js @@ -5,6 +5,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" import { useMeshPolygonsCommonStyle } from "./common" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const meshPolygonsPolygonAttributeSchemas = @@ -30,39 +31,62 @@ export function useMeshPolygonsPolygonAttributeStyle() { }) } - function setMeshPolygonsPolygonAttributeStoredConfig( + async function setMeshPolygonsPolygonAttributeStoredConfig( id, name, { minimum, maximum, colorMap }, ) { - const storedConfigs = meshPolygonsPolygonAttribute(id).storedConfigs - storedConfigs[name] = { minimum, maximum, colorMap } - return storedConfigs[name] + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polygons.coloring.polygon.storedConfigs[name] = { + minimum, + maximum, + colorMap, + } + }) + return meshPolygonsPolygonAttributeStoredConfig(id, name) } function meshPolygonsPolygonAttributeName(id) { return meshPolygonsPolygonAttribute(id).name } function setMeshPolygonsPolygonAttributeName(id, name) { - return viewerStore.request( - meshPolygonsPolygonAttributeSchemas.name, - { id, name }, - { - response_function: async () => { - meshPolygonsPolygonAttribute(id).name = name - const { minimum, maximum } = meshPolygonsPolygonAttributeStoredConfig( - id, - name, - ) - await setMeshPolygonsPolygonAttributeRange(id, minimum, maximum) - console.log( - setMeshPolygonsPolygonAttributeName.name, - { id }, - meshPolygonsPolygonAttributeName(id), - ) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + const polygon = style.polygons.coloring.polygon + polygon.name = name + if (!(name in polygon.storedConfigs)) { + polygon.storedConfigs[name] = { + minimum: undefined, + maximum: undefined, + colorMap: undefined, + } + } + }) + const { minimum, maximum } = meshPolygonsPolygonAttributeStoredConfig( + id, + name, + ) + await setMeshPolygonsPolygonAttributeRange(id, minimum, maximum) + console.log( + setMeshPolygonsPolygonAttributeName.name, + { id }, + meshPolygonsPolygonAttributeName(id), + ) + } + + if (meshPolygonsPolygonAttributeSchemas?.name && name !== "") { + return viewerStore.request( + meshPolygonsPolygonAttributeSchemas.name, + { id, name }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } function meshPolygonsPolygonAttributeRange(id) { const name = meshPolygonsPolygonAttributeName(id) @@ -75,12 +99,18 @@ export function useMeshPolygonsPolygonAttributeStyle() { ) return [minimum, maximum] } - function setMeshPolygonsPolygonAttributeRange(id, minimum, maximum) { + async function setMeshPolygonsPolygonAttributeRange(id, minimum, maximum) { const name = meshPolygonsPolygonAttributeName(id) - const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name) - storedConfig.minimum = minimum - storedConfig.maximum = maximum - return setMeshPolygonsPolygonAttributeColorMap(id, storedConfig.colorMap) + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + const storedConfig = style.polygons.coloring.polygon.storedConfigs[name] + storedConfig.minimum = minimum + storedConfig.maximum = maximum + }) + return setMeshPolygonsPolygonAttributeColorMap( + id, + meshPolygonsPolygonAttributeColorMap(id), + ) } function meshPolygonsPolygonAttributeColorMap(id) { @@ -92,30 +122,39 @@ export function useMeshPolygonsPolygonAttributeStyle() { function setMeshPolygonsPolygonAttributeColorMap(id, colorMap) { const name = meshPolygonsPolygonAttributeName(id) const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polygons.coloring.polygon.storedConfigs[name].colorMap = colorMap + }) + console.log( + setMeshPolygonsPolygonAttributeColorMap.name, + { id }, + meshPolygonsPolygonAttributeColorMap(id), + ) + } + if ( storedConfig.minimum === undefined || storedConfig.maximum === undefined || colorMap === undefined ) { - storedConfig.colorMap = colorMap - return + return updateState() } - const points = getRGBPointsFromPreset(colorMap) - const { minimum, maximum } = storedConfig - return viewerStore.request( - meshPolygonsPolygonAttributeSchemas.color_map, - { id, points, minimum, maximum }, - { - response_function: () => { - storedConfig.colorMap = colorMap - console.log( - setMeshPolygonsPolygonAttributeColorMap.name, - { id }, - meshPolygonsPolygonAttributeColorMap(id), - ) + + if (meshPolygonsPolygonAttributeSchemas?.color_map) { + const points = getRGBPointsFromPreset(colorMap) + const { minimum, maximum } = storedConfig + return viewerStore.request( + meshPolygonsPolygonAttributeSchemas.color_map, + { id, points, minimum, maximum }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/polygons/textures.js b/internal/stores/data_style/mesh/polygons/textures.js index 0a11156b..5cad10b2 100644 --- a/internal/stores/data_style/mesh/polygons/textures.js +++ b/internal/stores/data_style/mesh/polygons/textures.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshPolygonsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -21,8 +22,11 @@ export function useMeshPolygonsTexturesStyle() { meshPolygonsTexturesSchemas, { id, textures }, { - response_function: () => { - meshPolygonsCommonStyle.meshPolygonsColoring(id).textures = textures + response_function: async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polygons.coloring.textures = textures + }) console.log( setMeshPolygonsTextures.name, { id }, diff --git a/internal/stores/data_style/mesh/polygons/vertex.js b/internal/stores/data_style/mesh/polygons/vertex.js index afb0ba02..5832d407 100644 --- a/internal/stores/data_style/mesh/polygons/vertex.js +++ b/internal/stores/data_style/mesh/polygons/vertex.js @@ -5,6 +5,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" import { useMeshPolygonsCommonStyle } from "./common" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const meshPolygonsVertexAttributeSchemas = @@ -30,14 +31,20 @@ export function useMeshPolygonsVertexAttributeStyle() { }) } - function setMeshPolygonsVertexAttributeStoredConfig( + async function setMeshPolygonsVertexAttributeStoredConfig( id, name, { minimum, maximum, colorMap }, ) { - const storedConfigs = meshPolygonsVertexAttribute(id).storedConfigs - storedConfigs[name] = { minimum, maximum, colorMap } - return storedConfigs[name] + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polygons.coloring.vertex.storedConfigs[name] = { + minimum, + maximum, + colorMap, + } + }) + return meshPolygonsVertexAttributeStoredConfig(id, name) } function meshPolygonsVertexAttributeName(id) { @@ -49,26 +56,42 @@ export function useMeshPolygonsVertexAttributeStyle() { return meshPolygonsVertexAttribute(id).name } function setMeshPolygonsVertexAttributeName(id, name) { - console.log(setMeshPolygonsVertexAttributeName.name, { id, name }) - return viewerStore.request( - meshPolygonsVertexAttributeSchemas.name, - { id, name }, - { - response_function: async () => { - meshPolygonsVertexAttribute(id).name = name - const { minimum, maximum } = meshPolygonsVertexAttributeStoredConfig( - id, - name, - ) - await setMeshPolygonsVertexAttributeRange(id, minimum, maximum) - console.log( - setMeshPolygonsVertexAttributeName.name, - { id }, - meshPolygonsVertexAttributeName(id), - ) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + const vertex = style.polygons.coloring.vertex + vertex.name = name + if (!(name in vertex.storedConfigs)) { + vertex.storedConfigs[name] = { + minimum: undefined, + maximum: undefined, + colorMap: undefined, + } + } + }) + const { minimum, maximum } = meshPolygonsVertexAttributeStoredConfig( + id, + name, + ) + await setMeshPolygonsVertexAttributeRange(id, minimum, maximum) + console.log( + setMeshPolygonsVertexAttributeName.name, + { id }, + meshPolygonsVertexAttributeName(id), + ) + } + + if (meshPolygonsVertexAttributeSchemas?.name && name !== "") { + return viewerStore.request( + meshPolygonsVertexAttributeSchemas.name, + { id, name }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } function meshPolygonsVertexAttributeRange(id) { @@ -77,12 +100,18 @@ export function useMeshPolygonsVertexAttributeStyle() { const { minimum, maximum } = storedConfig return [minimum, maximum] } - function setMeshPolygonsVertexAttributeRange(id, minimum, maximum) { + async function setMeshPolygonsVertexAttributeRange(id, minimum, maximum) { const name = meshPolygonsVertexAttributeName(id) - const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name) - storedConfig.minimum = minimum - storedConfig.maximum = maximum - return setMeshPolygonsVertexAttributeColorMap(id, storedConfig.colorMap) + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + const storedConfig = style.polygons.coloring.vertex.storedConfigs[name] + storedConfig.minimum = minimum + storedConfig.maximum = maximum + }) + return setMeshPolygonsVertexAttributeColorMap( + id, + meshPolygonsVertexAttributeColorMap(id), + ) } function meshPolygonsVertexAttributeColorMap(id) { @@ -94,37 +123,46 @@ export function useMeshPolygonsVertexAttributeStyle() { function setMeshPolygonsVertexAttributeColorMap(id, colorMap) { const name = meshPolygonsVertexAttributeName(id) const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polygons.coloring.vertex.storedConfigs[name].colorMap = colorMap + }) + console.log( + setMeshPolygonsVertexAttributeColorMap.name, + { id }, + meshPolygonsVertexAttributeColorMap(id), + ) + } + if ( storedConfig.minimum === undefined || storedConfig.maximum === undefined || colorMap === undefined ) { - storedConfig.colorMap = colorMap - return + return updateState() } - const points = getRGBPointsFromPreset(colorMap) - const { minimum, maximum } = storedConfig - console.log(setMeshPolygonsVertexAttributeColorMap.name, { - id, - minimum, - maximum, - colorMap, - }) - return viewerStore.request( - meshPolygonsVertexAttributeSchemas.color_map, - { id, points, minimum, maximum }, - { - response_function: () => { - storedConfig.colorMap = colorMap - console.log( - setMeshPolygonsVertexAttributeColorMap.name, - { id }, - meshPolygonsVertexAttributeColorMap(id), - ) + if (meshPolygonsVertexAttributeSchemas?.color_map) { + const points = getRGBPointsFromPreset(colorMap) + const { minimum, maximum } = storedConfig + + console.log(setMeshPolygonsVertexAttributeColorMap.name, { + id, + minimum, + maximum, + colorMap, + }) + return viewerStore.request( + meshPolygonsVertexAttributeSchemas.color_map, + { id, points, minimum, maximum }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/polygons/visibility.js b/internal/stores/data_style/mesh/polygons/visibility.js index c875bd77..fcd59751 100644 --- a/internal/stores/data_style/mesh/polygons/visibility.js +++ b/internal/stores/data_style/mesh/polygons/visibility.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshPolygonsCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,29 @@ export function useMeshPolygonsVisibilityStyle() { return meshPolygonsCommonStyle.meshPolygonsStyle(id).visibility } function setMeshPolygonsVisibility(id, visibility) { - return viewerStore.request( - meshPolygonsVisibilitySchema, - { id, visibility }, - { - response_function: () => { - meshPolygonsCommonStyle.meshPolygonsStyle(id).visibility = visibility - console.log( - setMeshPolygonsVisibility.name, - { id }, - meshPolygonsVisibility(id), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polygons.visibility = visibility + }) + console.log( + setMeshPolygonsVisibility.name, + { id }, + meshPolygonsVisibility(id), + ) + } + + if (meshPolygonsVisibilitySchema) { + return viewerStore.request( + meshPolygonsVisibilitySchema, + { id, visibility }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/polyhedra/color.js b/internal/stores/data_style/mesh/polyhedra/color.js index 281e27e9..d20b8ccd 100644 --- a/internal/stores/data_style/mesh/polyhedra/color.js +++ b/internal/stores/data_style/mesh/polyhedra/color.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshPolyhedraCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,20 +18,29 @@ export function useMeshPolyhedraColorStyle() { return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).color } function setMeshPolyhedraColor(id, color) { - return viewerStore.request( - meshPolyhedraColorSchemas, - { id, color }, - { - response_function: () => { - meshPolyhedraCommonStyle.meshPolyhedraColoring(id).color = color - console.log( - setMeshPolyhedraColor.name, - { id }, - JSON.stringify(meshPolyhedraColor(id)), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polyhedra.coloring.color = color + }) + console.log( + setMeshPolyhedraColor.name, + { id }, + JSON.stringify(meshPolyhedraColor(id)), + ) + } + + if (meshPolyhedraColorSchemas && color !== undefined) { + return viewerStore.request( + meshPolyhedraColorSchemas, + { id, color }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/polyhedra/index.js b/internal/stores/data_style/mesh/polyhedra/index.js index d7580561..0e7fa99d 100644 --- a/internal/stores/data_style/mesh/polyhedra/index.js +++ b/internal/stores/data_style/mesh/polyhedra/index.js @@ -6,6 +6,7 @@ import { useMeshPolyhedraCommonStyle } from "./common" import { useMeshPolyhedraPolyhedronAttributeStyle } from "./polyhedron" import { useMeshPolyhedraVertexAttributeStyle } from "./vertex" import { useMeshPolyhedraVisibilityStyle } from "./visibility" +import { useDataStyleStateStore } from "../../state" // Local constants @@ -19,8 +20,10 @@ export function useMeshPolyhedraStyle() { useMeshPolyhedraPolyhedronAttributeStyle() async function setMeshPolyhedraActiveColoring(id, type) { - const coloring = meshPolyhedraCommonStyle.meshPolyhedraColoring(id) - coloring.active = type + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polyhedra.coloring.active = type + }) console.log( setMeshPolyhedraActiveColoring.name, { id }, diff --git a/internal/stores/data_style/mesh/polyhedra/polyhedron.js b/internal/stores/data_style/mesh/polyhedra/polyhedron.js index 20a0e95a..dc5568c2 100644 --- a/internal/stores/data_style/mesh/polyhedra/polyhedron.js +++ b/internal/stores/data_style/mesh/polyhedra/polyhedron.js @@ -5,6 +5,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" import { useMeshPolyhedraCommonStyle } from "./common" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const meshPolyhedraPolyhedronAttributeSchemas = @@ -30,37 +31,60 @@ export function useMeshPolyhedraPolyhedronAttributeStyle() { }) } - function setMeshPolyhedraPolyhedronAttributeStoredConfig( + async function setMeshPolyhedraPolyhedronAttributeStoredConfig( id, name, { minimum, maximum, colorMap }, ) { - const storedConfigs = meshPolyhedraPolyhedronAttribute(id).storedConfigs - storedConfigs[name] = { minimum, maximum, colorMap } - return storedConfigs[name] + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polyhedra.coloring.polyhedron.storedConfigs[name] = { + minimum, + maximum, + colorMap, + } + }) + return meshPolyhedraPolyhedronAttributeStoredConfig(id, name) } function meshPolyhedraPolyhedronAttributeName(id) { return meshPolyhedraPolyhedronAttribute(id).name } function setMeshPolyhedraPolyhedronAttributeName(id, name) { - return viewerStore.request( - meshPolyhedraPolyhedronAttributeSchemas.name, - { id, name }, - { - response_function: async () => { - meshPolyhedraPolyhedronAttribute(id).name = name - const { minimum, maximum } = - meshPolyhedraPolyhedronAttributeStoredConfig(id, name) - await setMeshPolyhedraPolyhedronAttributeRange(id, minimum, maximum) - console.log( - setMeshPolyhedraPolyhedronAttributeName.name, - { id }, - meshPolyhedraPolyhedronAttributeName(id), - ) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + const polyhedron = style.polyhedra.coloring.polyhedron + polyhedron.name = name + if (!(name in polyhedron.storedConfigs)) { + polyhedron.storedConfigs[name] = { + minimum: undefined, + maximum: undefined, + colorMap: undefined, + } + } + }) + const { minimum, maximum } = + meshPolyhedraPolyhedronAttributeStoredConfig(id, name) + await setMeshPolyhedraPolyhedronAttributeRange(id, minimum, maximum) + console.log( + setMeshPolyhedraPolyhedronAttributeName.name, + { id }, + meshPolyhedraPolyhedronAttributeName(id), + ) + } + + if (meshPolyhedraPolyhedronAttributeSchemas?.name && name !== "") { + return viewerStore.request( + meshPolyhedraPolyhedronAttributeSchemas.name, + { id, name }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } function meshPolyhedraPolyhedronAttributeRange(id) { const name = meshPolyhedraPolyhedronAttributeName(id) @@ -68,14 +92,17 @@ export function useMeshPolyhedraPolyhedronAttributeStyle() { const { minimum, maximum } = storedConfig return [minimum, maximum] } - function setMeshPolyhedraPolyhedronAttributeRange(id, minimum, maximum) { + async function setMeshPolyhedraPolyhedronAttributeRange(id, minimum, maximum) { const name = meshPolyhedraPolyhedronAttributeName(id) - const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name) - storedConfig.minimum = minimum - storedConfig.maximum = maximum + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + const storedConfig = style.polyhedra.coloring.polyhedron.storedConfigs[name] + storedConfig.minimum = minimum + storedConfig.maximum = maximum + }) return setMeshPolyhedraPolyhedronAttributeColorMap( id, - storedConfig.colorMap, + meshPolyhedraPolyhedronAttributeColorMap(id), ) } @@ -88,30 +115,40 @@ export function useMeshPolyhedraPolyhedronAttributeStyle() { function setMeshPolyhedraPolyhedronAttributeColorMap(id, colorMap) { const name = meshPolyhedraPolyhedronAttributeName(id) const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polyhedra.coloring.polyhedron.storedConfigs[name].colorMap = + colorMap + }) + console.log( + setMeshPolyhedraPolyhedronAttributeColorMap.name, + { id }, + meshPolyhedraPolyhedronAttributeColorMap(id), + ) + } + if ( storedConfig.minimum === undefined || storedConfig.maximum === undefined || colorMap === undefined ) { - storedConfig.colorMap = colorMap - return + return updateState() } - const points = getRGBPointsFromPreset(colorMap) - const { minimum, maximum } = storedConfig - return viewerStore.request( - meshPolyhedraPolyhedronAttributeSchemas.color_map, - { id, points, minimum, maximum }, - { - response_function: () => { - storedConfig.colorMap = colorMap - console.log( - setMeshPolyhedraPolyhedronAttributeColorMap.name, - { id }, - meshPolyhedraPolyhedronAttributeColorMap(id), - ) + + if (meshPolyhedraPolyhedronAttributeSchemas?.color_map) { + const points = getRGBPointsFromPreset(colorMap) + const { minimum, maximum } = storedConfig + return viewerStore.request( + meshPolyhedraPolyhedronAttributeSchemas.color_map, + { id, points, minimum, maximum }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/polyhedra/vertex.js b/internal/stores/data_style/mesh/polyhedra/vertex.js index d2985935..9f5051c5 100644 --- a/internal/stores/data_style/mesh/polyhedra/vertex.js +++ b/internal/stores/data_style/mesh/polyhedra/vertex.js @@ -5,6 +5,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap" import { useMeshPolyhedraCommonStyle } from "./common" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const meshPolyhedraVertexAttributeSchemas = @@ -30,14 +31,20 @@ export function useMeshPolyhedraVertexAttributeStyle() { }) } - function setMeshPolyhedraVertexAttributeStoredConfig( + async function setMeshPolyhedraVertexAttributeStoredConfig( id, name, { minimum, maximum, colorMap }, ) { - const storedConfigs = meshPolyhedraVertexAttribute(id).storedConfigs - storedConfigs[name] = { minimum, maximum, colorMap } - return storedConfigs[name] + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polyhedra.coloring.vertex.storedConfigs[name] = { + minimum, + maximum, + colorMap, + } + }) + return meshPolyhedraVertexAttributeStoredConfig(id, name) } function meshPolyhedraVertexAttributeName(id) { @@ -49,26 +56,42 @@ export function useMeshPolyhedraVertexAttributeStyle() { return meshPolyhedraVertexAttribute(id).name } function setMeshPolyhedraVertexAttributeName(id, name) { - console.log(setMeshPolyhedraVertexAttributeName.name, { id, name }) - return viewerStore.request( - meshPolyhedraVertexAttributeSchemas.name, - { id, name }, - { - response_function: async () => { - meshPolyhedraVertexAttribute(id).name = name - const { minimum, maximum } = meshPolyhedraVertexAttributeStoredConfig( - id, - name, - ) - await setMeshPolyhedraVertexAttributeRange(id, minimum, maximum) - console.log( - setMeshPolyhedraVertexAttributeName.name, - { id }, - meshPolyhedraVertexAttributeName(id), - ) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + const vertex = style.polyhedra.coloring.vertex + vertex.name = name + if (!(name in vertex.storedConfigs)) { + vertex.storedConfigs[name] = { + minimum: undefined, + maximum: undefined, + colorMap: undefined, + } + } + }) + const { minimum, maximum } = meshPolyhedraVertexAttributeStoredConfig( + id, + name, + ) + await setMeshPolyhedraVertexAttributeRange(id, minimum, maximum) + console.log( + setMeshPolyhedraVertexAttributeName.name, + { id }, + meshPolyhedraVertexAttributeName(id), + ) + } + + if (meshPolyhedraVertexAttributeSchemas?.name && name !== "") { + return viewerStore.request( + meshPolyhedraVertexAttributeSchemas.name, + { id, name }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } function meshPolyhedraVertexAttributeRange(id) { @@ -77,12 +100,18 @@ export function useMeshPolyhedraVertexAttributeStyle() { const { minimum, maximum } = storedConfig return [minimum, maximum] } - function setMeshPolyhedraVertexAttributeRange(id, minimum, maximum) { + async function setMeshPolyhedraVertexAttributeRange(id, minimum, maximum) { const name = meshPolyhedraVertexAttributeName(id) - const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name) - storedConfig.minimum = minimum - storedConfig.maximum = maximum - return setMeshPolyhedraVertexAttributeColorMap(id, storedConfig.colorMap) + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + const storedConfig = style.polyhedra.coloring.vertex.storedConfigs[name] + storedConfig.minimum = minimum + storedConfig.maximum = maximum + }) + return setMeshPolyhedraVertexAttributeColorMap( + id, + meshPolyhedraVertexAttributeColorMap(id), + ) } function meshPolyhedraVertexAttributeColorMap(id) { @@ -94,37 +123,47 @@ export function useMeshPolyhedraVertexAttributeStyle() { function setMeshPolyhedraVertexAttributeColorMap(id, colorMap) { const name = meshPolyhedraVertexAttributeName(id) const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name) + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polyhedra.coloring.vertex.storedConfigs[name].colorMap = + colorMap + }) + console.log( + setMeshPolyhedraVertexAttributeColorMap.name, + { id }, + meshPolyhedraVertexAttributeColorMap(id), + ) + } + if ( storedConfig.minimum === undefined || storedConfig.maximum === undefined || colorMap === undefined ) { - storedConfig.colorMap = colorMap - return + return updateState() } - const points = getRGBPointsFromPreset(colorMap) - const { minimum, maximum } = storedConfig - console.log(setMeshPolyhedraVertexAttributeColorMap.name, { - id, - minimum, - maximum, - colorMap, - }) - return viewerStore.request( - meshPolyhedraVertexAttributeSchemas.color_map, - { id, points, minimum, maximum }, - { - response_function: () => { - storedConfig.colorMap = colorMap - console.log( - setMeshPolyhedraVertexAttributeColorMap.name, - { id }, - meshPolyhedraVertexAttributeColorMap(id), - ) + if (meshPolyhedraVertexAttributeSchemas?.color_map) { + const points = getRGBPointsFromPreset(colorMap) + const { minimum, maximum } = storedConfig + + console.log(setMeshPolyhedraVertexAttributeColorMap.name, { + id, + minimum, + maximum, + colorMap, + }) + return viewerStore.request( + meshPolyhedraVertexAttributeSchemas.color_map, + { id, points, minimum, maximum }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/mesh/polyhedra/visibility.js b/internal/stores/data_style/mesh/polyhedra/visibility.js index 6e79ce2f..945a6df5 100644 --- a/internal/stores/data_style/mesh/polyhedra/visibility.js +++ b/internal/stores/data_style/mesh/polyhedra/visibility.js @@ -3,6 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useMeshPolyhedraCommonStyle } from "./common" +import { useDataStyleStateStore } from "../../state" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -17,21 +18,29 @@ export function useMeshPolyhedraVisibilityStyle() { return meshPolyhedraCommonStyle.meshPolyhedraStyle(id).visibility } function setMeshPolyhedraVisibility(id, visibility) { - return viewerStore.request( - meshPolyhedraVisibilitySchema, - { id, visibility }, - { - response_function: () => { - meshPolyhedraCommonStyle.meshPolyhedraStyle(id).visibility = - visibility - console.log( - setMeshPolyhedraVisibility.name, - { id }, - meshPolyhedraVisibility(id), - ) + const updateState = async () => { + const dataStyleStateStore = useDataStyleStateStore() + await dataStyleStateStore.mutateStyle(id, (style) => { + style.polyhedra.visibility = visibility + }) + console.log( + setMeshPolyhedraVisibility.name, + { id }, + meshPolyhedraVisibility(id), + ) + } + + if (meshPolyhedraVisibilitySchema) { + return viewerStore.request( + meshPolyhedraVisibilitySchema, + { id, visibility }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js index 7892f121..115e75ef 100644 --- a/internal/stores/data_style/model/blocks/color.js +++ b/internal/stores/data_style/model/blocks/color.js @@ -5,6 +5,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { useModelBlocksCommonStyle } from "./common" import { useDataStore } from "@ogw_front/stores/data" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_blocks_schemas = viewer_schemas.opengeodeweb_viewer.model.blocks @@ -12,6 +13,7 @@ const model_blocks_schemas = viewer_schemas.opengeodeweb_viewer.model.blocks export function useModelBlocksColorStyle() { const dataStore = useDataStore() const viewerStore = useViewerStore() + const dataStyleStateStore = useDataStyleStateStore() const modelBlocksCommonStyle = useModelBlocksCommonStyle() function modelBlockColor(id, block_id) { @@ -23,38 +25,42 @@ export function useModelBlocksColorStyle() { } async function setModelBlocksColor(id, block_ids, color) { - if (!block_ids || block_ids.length === 0) { - return - } - const blocks_viewer_ids = await dataStore.getMeshComponentsViewerIds( - id, - block_ids, - ) - if (!blocks_viewer_ids || blocks_viewer_ids.length === 0) { - console.warn( - "[setModelBlocksColor] No viewer IDs found, skipping color request", - { id, block_ids }, + const updateState = async () => { + for (const block_id of block_ids) { + await dataStyleStateStore.mutateComponentStyle(id, block_id, (style) => { + style.color = color + }) + } + console.log( + setModelBlocksColor.name, + { id }, + { block_ids }, + JSON.stringify(modelBlockColor(id, block_ids[0])), ) + } + + if (!block_ids || block_ids.length === 0) { return } - return viewerStore.request( - model_blocks_schemas.color, - { id, block_ids: blocks_viewer_ids, color }, - { - response_function: () => { - for (const block_id of block_ids) { - saveModelBlockColor(id, block_id, color) - } - console.log( - setModelBlocksColor.name, - { id }, - { block_ids }, - JSON.stringify(modelBlockColor(id, block_ids[0])), - ) + if (model_blocks_schemas?.color) { + const blocks_viewer_ids = await dataStore.getMeshComponentsViewerIds( + id, + block_ids, + ) + if (!blocks_viewer_ids || blocks_viewer_ids.length === 0) { + return updateState() + } + return viewerStore.request( + model_blocks_schemas.color, + { id, block_ids: blocks_viewer_ids, color }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/model/blocks/common.js b/internal/stores/data_style/model/blocks/common.js index a57d425c..7ec60e02 100644 --- a/internal/stores/data_style/model/blocks/common.js +++ b/internal/stores/data_style/model/blocks/common.js @@ -4,14 +4,13 @@ export function useModelBlocksCommonStyle() { const dataStyleStateStore = useDataStyleStateStore() function modelBlocksStyle(id) { - return dataStyleStateStore.getStyle(id).blocks + return dataStyleStateStore.styles[id].blocks } function modelBlockStyle(id, block_id) { - if (!modelBlocksStyle(id)[block_id]) { - modelBlocksStyle(id)[block_id] = {} - } - return modelBlocksStyle(id)[block_id] + const groupStyle = modelBlocksStyle(id) + const individualStyle = dataStyleStateStore.getComponentStyle(id, block_id) + return { ...groupStyle, ...individualStyle } } return { diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js index 51968f50..536aebdb 100644 --- a/internal/stores/data_style/model/blocks/index.js +++ b/internal/stores/data_style/model/blocks/index.js @@ -11,19 +11,46 @@ export function useModelBlocksStyle() { const modelBlocksColorStyle = useModelBlocksColorStyle() async function applyModelBlocksStyle(id) { - const style = modelBlocksCommonStyle.modelBlocksStyle(id) - const blocks_ids = await dataStore.getBlocksGeodeIds(id) - return Promise.all([ - modelBlocksVisibilityStyle.setModelBlocksVisibility( - id, - blocks_ids, - style.visibility, - ), - modelBlocksColorStyle.setModelBlocksColor(id, blocks_ids, style.color), - ]) + const block_ids = await dataStore.getBlocksGeodeIds(id) + if (block_ids.length === 0) return + + const visibilityGroups = {} + const colorGroups = {} + + for (const block_id of block_ids) { + const style = modelBlocksCommonStyle.modelBlockStyle(id, block_id) + + const vKey = String(style.visibility) + if (!visibilityGroups[vKey]) visibilityGroups[vKey] = [] + visibilityGroups[vKey].push(block_id) + + const cKey = JSON.stringify(style.color) + if (!colorGroups[cKey]) colorGroups[cKey] = [] + colorGroups[cKey].push(block_id) + } + + const promises = [] + + for (const [vValue, ids] of Object.entries(visibilityGroups)) { + promises.push( + modelBlocksVisibilityStyle.setModelBlocksVisibility( + id, + ids, + vValue === "true", + ), + ) + } + + for (const [cValue, ids] of Object.entries(colorGroups)) { + promises.push( + modelBlocksColorStyle.setModelBlocksColor(id, ids, JSON.parse(cValue)), + ) + } + + return Promise.all(promises) } - async function setModelBlocksDefaultStyle(id) {} + async function setModelBlocksDefaultStyle(id) { } return { applyModelBlocksStyle, diff --git a/internal/stores/data_style/model/blocks/visibility.js b/internal/stores/data_style/model/blocks/visibility.js index 9644cd04..62fff9aa 100644 --- a/internal/stores/data_style/model/blocks/visibility.js +++ b/internal/stores/data_style/model/blocks/visibility.js @@ -5,6 +5,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { useModelBlocksCommonStyle } from "./common" import { useDataStore } from "@ogw_front/stores/data" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_blocks_schemas = viewer_schemas.opengeodeweb_viewer.model.blocks @@ -12,6 +13,7 @@ const model_blocks_schemas = viewer_schemas.opengeodeweb_viewer.model.blocks export function useModelBlocksVisibilityStyle() { const dataStore = useDataStore() const viewerStore = useViewerStore() + const dataStyleStateStore = useDataStyleStateStore() const modelBlocksCommonStyle = useModelBlocksCommonStyle() function modelBlockVisibility(id, block_id) { @@ -23,37 +25,42 @@ export function useModelBlocksVisibilityStyle() { } async function setModelBlocksVisibility(id, block_ids, visibility) { + const updateState = async () => { + for (const block_id of block_ids) { + await dataStyleStateStore.mutateComponentStyle(id, block_id, (style) => { + style.visibility = visibility + }) + } + console.log( + setModelBlocksVisibility.name, + { id }, + { block_ids }, + modelBlockVisibility(id, block_ids[0]), + ) + } + if (!block_ids || block_ids.length === 0) { return } - const blocks_viewer_ids = await dataStore.getMeshComponentsViewerIds( - id, - block_ids, - ) - if (!blocks_viewer_ids || blocks_viewer_ids.length === 0) { - console.warn( - "[setModelBlocksVisibility] No viewer IDs found, skipping visibility request", - { id, block_ids }, + + if (model_blocks_schemas?.visibility) { + const blocks_viewer_ids = await dataStore.getMeshComponentsViewerIds( + id, + block_ids, ) - return - } - return viewerStore.request( - model_blocks_schemas.visibility, - { id, block_ids: blocks_viewer_ids, visibility }, - { - response_function: () => { - for (const block_id of block_ids) { - saveModelBlockVisibility(id, block_id, visibility) - } - console.log( - setModelBlocksVisibility.name, - { id }, - { block_ids }, - modelBlockVisibility(id, block_ids[0]), - ) + if (!blocks_viewer_ids || blocks_viewer_ids.length === 0) { + return updateState() + } + return viewerStore.request( + model_blocks_schemas.visibility, + { id, block_ids: blocks_viewer_ids, visibility }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js index 380aef8b..c1c6ce66 100644 --- a/internal/stores/data_style/model/corners/color.js +++ b/internal/stores/data_style/model/corners/color.js @@ -5,59 +5,61 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { useModelCornersCommonStyle } from "./common" import { useDataStore } from "@ogw_front/stores/data" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_corners_schemas = viewer_schemas.opengeodeweb_viewer.model.corners export function useModelCornersColorStyle() { - const dataStore = useDataStore() - const viewerStore = useViewerStore() - const modelCornersCommonStyle = useModelCornersCommonStyle() + const dataStore = useDataStore() + const viewerStore = useViewerStore() + const modelCornersCommonStyle = useModelCornersCommonStyle() - function modelCornerColor(id, corner_id) { - return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color - } + function modelCornerColor(id, corner_id) { + return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color + } - function saveModelCornerColor(id, corner_id, color) { - modelCornersCommonStyle.modelCornerStyle(id, corner_id).color = color - } + async function setModelCornersColor(id, corner_ids, color) { + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + for (const corner_id of corner_ids) { + await dataStyleStateStore.mutateComponentStyle(id, corner_id, (style) => { + style.color = color + }) + } + console.log( + setModelCornersColor.name, + { id }, + { corner_ids }, + JSON.stringify(modelCornerColor(id, corner_ids[0])), + ) + } - async function setModelCornersColor(id, corner_ids, color) { - if (!corner_ids || corner_ids.length === 0) { - return - } - const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds( - id, - corner_ids, - ) - if (!corner_viewer_ids || corner_viewer_ids.length === 0) { - console.warn( - "[setModelCornersColor] No viewer IDs found, skipping color request", - { id, corner_ids }, - ) - return + if (!corner_ids || corner_ids.length === 0) { + return + } + const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds( + id, + corner_ids, + ) + if (!corner_viewer_ids || corner_viewer_ids.length === 0) { + console.warn( + "[setModelCornersColor] No viewer IDs found, skipping color request", + { id, corner_ids }, + ) + return updateState() + } + return viewerStore.request( + model_corners_schemas.color, + { id, block_ids: corner_viewer_ids, color }, + { + response_function: updateState, + }, + ) } - return viewerStore.request( - model_corners_schemas.color, - { id, block_ids: corner_viewer_ids, color }, - { - response_function: () => { - for (const corner_id of corner_ids) { - saveModelCornerColor(id, corner_id, color) - } - console.log( - setModelCornersColor.name, - { id }, - { corner_ids }, - JSON.stringify(modelCornerColor(id, corner_ids[0])), - ) - }, - }, - ) - } - return { - modelCornerColor, - setModelCornersColor, - } + return { + modelCornerColor, + setModelCornersColor, + } } diff --git a/internal/stores/data_style/model/corners/common.js b/internal/stores/data_style/model/corners/common.js index bba6b013..5ba07b43 100644 --- a/internal/stores/data_style/model/corners/common.js +++ b/internal/stores/data_style/model/corners/common.js @@ -4,14 +4,13 @@ export function useModelCornersCommonStyle() { const dataStyleStateStore = useDataStyleStateStore() function modelCornersStyle(id) { - return dataStyleStateStore.getStyle(id).corners + return dataStyleStateStore.styles[id].corners } function modelCornerStyle(id, corner_id) { - if (!modelCornersStyle(id)[corner_id]) { - modelCornersStyle(id)[corner_id] = {} - } - return modelCornersStyle(id)[corner_id] + const groupStyle = modelCornersStyle(id) + const individualStyle = dataStyleStateStore.getComponentStyle(id, corner_id) + return { ...groupStyle, ...individualStyle } } return { diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js index c62e0c96..97b05bb1 100644 --- a/internal/stores/data_style/model/corners/index.js +++ b/internal/stores/data_style/model/corners/index.js @@ -11,20 +11,55 @@ export function useModelCornersStyle() { const modelCornersColorStyle = useModelCornersColorStyle() async function applyModelCornersStyle(id) { - const style = modelCornersCommonStyle.modelCornersStyle(id) const corner_ids = await dataStore.getCornersGeodeIds(id) - console.log(applyModelCornersStyle.name, { id }, { corner_ids }) - return Promise.all([ - modelCornersVisibilityStyle.setModelCornersVisibility( - id, - corner_ids, - style.visibility, - ), - modelCornersColorStyle.setModelCornersColor(id, corner_ids, style.color), - ]) + if (corner_ids.length === 0) return + + // Group corners by their effective style to minimize RPC calls + const visibilityGroups = {} + const colorGroups = {} + + for (const corner_id of corner_ids) { + const style = modelCornersCommonStyle.modelCornerStyle(id, corner_id) + + // Group by visibility + const vKey = String(style.visibility) + if (!visibilityGroups[vKey]) visibilityGroups[vKey] = [] + visibilityGroups[vKey].push(corner_id) + + // Group by color + const cKey = JSON.stringify(style.color) + if (!colorGroups[cKey]) colorGroups[cKey] = [] + colorGroups[cKey].push(corner_id) + } + + const promises = [] + + // Apply visibility groups + for (const [vValue, ids] of Object.entries(visibilityGroups)) { + promises.push( + modelCornersVisibilityStyle.setModelCornersVisibility( + id, + ids, + vValue === "true", + ), + ) + } + + // Apply color groups + for (const [cValue, ids] of Object.entries(colorGroups)) { + promises.push( + modelCornersColorStyle.setModelCornersColor( + id, + ids, + JSON.parse(cValue), + ), + ) + } + + return Promise.all(promises) } - async function setModelCornersDefaultStyle(id) {} + async function setModelCornersDefaultStyle(id) { } return { applyModelCornersStyle, diff --git a/internal/stores/data_style/model/corners/visibility.js b/internal/stores/data_style/model/corners/visibility.js index 442ac004..2b2c300e 100644 --- a/internal/stores/data_style/model/corners/visibility.js +++ b/internal/stores/data_style/model/corners/visibility.js @@ -5,60 +5,61 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { useModelCornersCommonStyle } from "./common" import { useDataStore } from "@ogw_front/stores/data" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_corners_schemas = viewer_schemas.opengeodeweb_viewer.model.corners export function useModelCornersVisibilityStyle() { - const dataStore = useDataStore() - const viewerStore = useViewerStore() - const modelCornersCommonStyle = useModelCornersCommonStyle() + const dataStore = useDataStore() + const viewerStore = useViewerStore() + const modelCornersCommonStyle = useModelCornersCommonStyle() - function modelCornerVisibility(id, corner_id) { - return modelCornersCommonStyle.modelCornerStyle(id, corner_id).visibility - } + function modelCornerVisibility(id, corner_id) { + return modelCornersCommonStyle.modelCornerStyle(id, corner_id).visibility + } - function saveModelCornerVisibility(id, corner_id, visibility) { - modelCornersCommonStyle.modelCornerStyle(id, corner_id).visibility = - visibility - } + async function setModelCornersVisibility(id, corner_ids, visibility) { + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + for (const corner_id of corner_ids) { + await dataStyleStateStore.mutateComponentStyle(id, corner_id, (style) => { + style.visibility = visibility + }) + } + console.log( + setModelCornersVisibility.name, + { id }, + { corner_ids }, + modelCornerVisibility(id, corner_ids[0]), + ) + } - async function setModelCornersVisibility(id, corner_ids, visibility) { - if (!corner_ids || corner_ids.length === 0) { - return - } - const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds( - id, - corner_ids, - ) - if (!corner_viewer_ids || corner_viewer_ids.length === 0) { - console.warn( - "[setModelCornersVisibility] No viewer IDs found, skipping visibility request", - { id, corner_ids }, - ) - return + if (!corner_ids || corner_ids.length === 0) { + return + } + const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds( + id, + corner_ids, + ) + if (!corner_viewer_ids || corner_viewer_ids.length === 0) { + console.warn( + "[setModelCornersVisibility] No viewer IDs found, skipping visibility request", + { id, corner_ids }, + ) + return updateState() + } + return viewerStore.request( + model_corners_schemas.visibility, + { id, block_ids: corner_viewer_ids, visibility }, + { + response_function: updateState, + }, + ) } - return viewerStore.request( - model_corners_schemas.visibility, - { id, block_ids: corner_viewer_ids, visibility }, - { - response_function: () => { - for (const corner_id of corner_ids) { - saveModelCornerVisibility(id, corner_id, visibility) - } - console.log( - setModelCornersVisibility.name, - { id }, - { corner_ids }, - modelCornerVisibility(id, corner_ids[0]), - ) - }, - }, - ) - } - return { - modelCornerVisibility, - setModelCornersVisibility, - } + return { + modelCornerVisibility, + setModelCornersVisibility, + } } diff --git a/internal/stores/data_style/model/edges/index.js b/internal/stores/data_style/model/edges/index.js index cc5def8f..6c3a2529 100644 --- a/internal/stores/data_style/model/edges/index.js +++ b/internal/stores/data_style/model/edges/index.js @@ -8,7 +8,7 @@ export function useModelEdgesStyle() { function applyModelEdgesStyle(id) { const style = modelEdgesCommonStyle.modelEdgesStyle(id) - return Promise.resolve([ + return Promise.all([ modelEdgesVisibilityStyle.setModelEdgesVisibility(id, style.visibility), ]) } diff --git a/internal/stores/data_style/model/edges/visibility.js b/internal/stores/data_style/model/edges/visibility.js index 86b68aec..3c377ed9 100644 --- a/internal/stores/data_style/model/edges/visibility.js +++ b/internal/stores/data_style/model/edges/visibility.js @@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useModelEdgesCommonStyle } from "./common" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_edges_schemas = viewer_schemas.opengeodeweb_viewer.model.edges @@ -11,26 +12,40 @@ const model_edges_schemas = viewer_schemas.opengeodeweb_viewer.model.edges export function useModelEdgesVisibilityStyle() { const viewerStore = useViewerStore() const modelEdgesCommonStyle = useModelEdgesCommonStyle() + const dataStyleStateStore = useDataStyleStateStore() function modelEdgesVisibility(id) { return modelEdgesCommonStyle.modelEdgesStyle(id).visibility } function setModelEdgesVisibility(id, visibility) { - return viewerStore.request( - model_edges_schemas.visibility, - { id, visibility }, - { - response_function: () => { - modelEdgesCommonStyle.modelEdgesStyle(id).visibility = visibility - console.log( - setModelEdgesVisibility.name, - { id }, - modelEdgesVisibility(id), - ) + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.edges.visibility = visibility + }) + console.log( + setModelEdgesVisibility.name, + { id }, + modelEdgesVisibility(id), + ) + } + + if (model_edges_schemas?.visibility) { + return viewerStore.request( + model_edges_schemas.visibility, + { id, visibility }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } + } + + function applyModelEdgesStyle(id) { + const style = modelEdgesStyle(id) + return Promise.resolve([setModelEdgesVisibility(id, style.visibility)]) } return { diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js index 7a85d417..2f35d8d3 100644 --- a/internal/stores/data_style/model/index.js +++ b/internal/stores/data_style/model/index.js @@ -11,6 +11,7 @@ import { useModelEdgesStyle } from "./edges" import { useModelLinesStyle } from "./lines" import { useModelPointsStyle } from "./points" import { useModelSurfacesStyle } from "./surfaces" +import { ref, watch } from "vue" import { useViewerStore } from "@ogw_front/stores/viewer" // Local constants @@ -32,50 +33,40 @@ export default function useModelStyle() { return dataStyleStateStore.getStyle(id).visibility } function setModelVisibility(id, visibility) { - return viewerStore.request( - model_schemas.visibility, - { id, visibility }, - { - response_function: () => { - dataStyleStateStore.getStyle(id).visibility = visibility - hybridViewerStore.setVisibility(id, visibility) - console.log(setModelVisibility.name, { id }, modelVisibility(id)) - }, - }, - ) - } - - function visibleMeshComponents(id) { - const visible_mesh_components = ref([]) - const styles = dataStyleStateStore.styles[id] - if (!styles) { - return visible_mesh_components - } - - for (const [corner_id, style] of Object.entries(styles.corners || {})) { - if (style.visibility) { - visible_mesh_components.value.push(corner_id) - } - } - - for (const [line_id, style] of Object.entries(styles.lines || {})) { - if (style.visibility) { - visible_mesh_components.value.push(line_id) - } - } - - for (const [surface_id, style] of Object.entries(styles.surfaces || {})) { - if (style.visibility) { - visible_mesh_components.value.push(surface_id) - } + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.visibility = visibility + }) + hybridViewerStore.setVisibility(id, visibility) + console.log(setModelVisibility.name, { id }, modelVisibility(id)) } - for (const [block_id, style] of Object.entries(styles.blocks || {})) { - if (style.visibility) { - visible_mesh_components.value.push(block_id) - } + if (model_schemas.visibility) { + return viewerStore.request(model_schemas.visibility, { id, visibility }, { + response_function: updateState, + }) + } else { + return updateState() } + } + function visibleMeshComponents(id) { + const visible_mesh_components = ref([]) + watch( + () => dataStyleStateStore.componentStyles, + (componentStyles) => { + const new_selection = Object.values(componentStyles) + .filter((style) => style.id_model === id && style.visibility) + .map((style) => style.id_component) + if ( + JSON.stringify(visible_mesh_components.value) !== + JSON.stringify(new_selection) + ) { + visible_mesh_components.value = new_selection + } + }, + { immediate: true, deep: true }, + ) return visible_mesh_components } @@ -96,16 +87,20 @@ export default function useModelStyle() { return dataStyleStateStore.getStyle(id).color } function setModelColor(id, color) { - return viewerStore.request( - model_schemas.color, - { id, color }, - { - response_function: () => { - dataStyleStateStore.styles[id].color = color - console.log(setModelColor.name, { id }, modelColor(id)) - }, - }, - ) + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.color = color + }) + console.log(setModelColor.name, { id }, modelColor(id)) + } + + if (model_schemas.color) { + return viewerStore.request(model_schemas.color, { id, color }, { + response_function: updateState, + }) + } else { + return updateState() + } } async function setModelMeshComponentsVisibility( @@ -152,6 +147,8 @@ export default function useModelStyle() { for (const [key, value] of Object.entries(style)) { if (key === "visibility") { promise_array.push(setModelVisibility(id, value)) + } else if (key === "color") { + promise_array.push(setModelColor(id, value)) } else if (key === "corners") { promise_array.push(modelCornersStyleStore.applyModelCornersStyle(id)) } else if (key === "lines") { @@ -164,6 +161,14 @@ export default function useModelStyle() { promise_array.push(modelPointsStyleStore.applyModelPointsStyle(id)) } else if (key === "edges") { promise_array.push(modelEdgesStyleStore.applyModelEdgesStyle(id)) + } else if ( + key === "cells" || + key === "polygons" || + key === "polyhedra" || + key === "id" + ) { + // Mesh components or record ID style application is handled elsewhere or not needed here + continue } else { throw new Error(`Unknown model key: ${key}`) } @@ -173,6 +178,9 @@ export default function useModelStyle() { async function setModelMeshComponentsDefaultStyle(id) { const item = await dataStore.item(id) + if (!item) { + return [] + } const { mesh_components } = item const promise_array = [] if ("Corner" in mesh_components) { diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js index a8273fc9..9052e844 100644 --- a/internal/stores/data_style/model/lines/color.js +++ b/internal/stores/data_style/model/lines/color.js @@ -5,59 +5,61 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { useModelLinesCommonStyle } from "./common" import { useDataStore } from "@ogw_front/stores/data" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_lines_schemas = viewer_schemas.opengeodeweb_viewer.model.lines export function useModelLinesColorStyle() { - const dataStore = useDataStore() - const viewerStore = useViewerStore() - const modelLinesCommonStyle = useModelLinesCommonStyle() + const dataStore = useDataStore() + const viewerStore = useViewerStore() + const modelLinesCommonStyle = useModelLinesCommonStyle() - function modelLineColor(id, line_id) { - return modelLinesCommonStyle.modelLineStyle(id, line_id).color - } + function modelLineColor(id, line_id) { + return modelLinesCommonStyle.modelLineStyle(id, line_id).color + } - function saveModelLineColor(id, line_id, color) { - modelLinesCommonStyle.modelLineStyle(id, line_id).color = color - } + async function setModelLinesColor(id, line_ids, color) { + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + for (const line_id of line_ids) { + await dataStyleStateStore.mutateComponentStyle(id, line_id, (style) => { + style.color = color + }) + } + console.log( + setModelLinesColor.name, + { id }, + { line_ids }, + JSON.stringify(modelLineColor(id, line_ids[0])), + ) + } - async function setModelLinesColor(id, line_ids, color) { - if (!line_ids || line_ids.length === 0) { - return - } - const line_viewer_ids = await dataStore.getMeshComponentsViewerIds( - id, - line_ids, - ) - if (!line_viewer_ids || line_viewer_ids.length === 0) { - console.warn( - "[setModelLinesColor] No viewer IDs found, skipping color request", - { id, line_ids }, - ) - return + if (!line_ids || line_ids.length === 0) { + return + } + const line_viewer_ids = await dataStore.getMeshComponentsViewerIds( + id, + line_ids, + ) + if (!line_viewer_ids || line_viewer_ids.length === 0) { + console.warn( + "[setModelLinesColor] No viewer IDs found, skipping color request", + { id, line_ids }, + ) + return updateState() + } + return viewerStore.request( + model_lines_schemas.color, + { id, block_ids: line_viewer_ids, color }, + { + response_function: updateState, + }, + ) } - return viewerStore.request( - model_lines_schemas.color, - { id, block_ids: line_viewer_ids, color }, - { - response_function: () => { - for (const line_id of line_ids) { - saveModelLineColor(id, line_id, color) - } - console.log( - setModelLinesColor.name, - { id }, - { line_ids }, - JSON.stringify(modelLineColor(id, line_ids[0])), - ) - }, - }, - ) - } - return { - modelLineColor, - setModelLinesColor, - } + return { + modelLineColor, + setModelLinesColor, + } } diff --git a/internal/stores/data_style/model/lines/common.js b/internal/stores/data_style/model/lines/common.js index d85907a8..c86f4044 100644 --- a/internal/stores/data_style/model/lines/common.js +++ b/internal/stores/data_style/model/lines/common.js @@ -4,14 +4,13 @@ export function useModelLinesCommonStyle() { const dataStyleStateStore = useDataStyleStateStore() function modelLinesStyle(id) { - return dataStyleStateStore.getStyle(id).lines + return dataStyleStateStore.styles[id].lines } function modelLineStyle(id, line_id) { - if (!modelLinesStyle(id)[line_id]) { - modelLinesStyle(id)[line_id] = {} - } - return modelLinesStyle(id)[line_id] + const groupStyle = modelLinesStyle(id) + const individualStyle = dataStyleStateStore.getComponentStyle(id, line_id) + return { ...groupStyle, ...individualStyle } } return { diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js index f1cf8a85..19408c8a 100644 --- a/internal/stores/data_style/model/lines/index.js +++ b/internal/stores/data_style/model/lines/index.js @@ -11,19 +11,46 @@ export function useModelLinesStyle() { const modelLinesColorStyle = useModelLinesColorStyle() async function applyModelLinesStyle(id) { - const style = modelLinesCommonStyle.modelLinesStyle(id) const line_ids = await dataStore.getLinesGeodeIds(id) - return Promise.all([ - modelLinesVisibilityStyle.setModelLinesVisibility( - id, - line_ids, - style.visibility, - ), - modelLinesColorStyle.setModelLinesColor(id, line_ids, style.color), - ]) + if (line_ids.length === 0) return + + const visibilityGroups = {} + const colorGroups = {} + + for (const line_id of line_ids) { + const style = modelLinesCommonStyle.modelLineStyle(id, line_id) + + const vKey = String(style.visibility) + if (!visibilityGroups[vKey]) visibilityGroups[vKey] = [] + visibilityGroups[vKey].push(line_id) + + const cKey = JSON.stringify(style.color) + if (!colorGroups[cKey]) colorGroups[cKey] = [] + colorGroups[cKey].push(line_id) + } + + const promises = [] + + for (const [vValue, ids] of Object.entries(visibilityGroups)) { + promises.push( + modelLinesVisibilityStyle.setModelLinesVisibility( + id, + ids, + vValue === "true", + ), + ) + } + + for (const [cValue, ids] of Object.entries(colorGroups)) { + promises.push( + modelLinesColorStyle.setModelLinesColor(id, ids, JSON.parse(cValue)), + ) + } + + return Promise.all(promises) } - async function setModelLinesDefaultStyle(id) {} + async function setModelLinesDefaultStyle(id) { } return { applyModelLinesStyle, diff --git a/internal/stores/data_style/model/lines/visibility.js b/internal/stores/data_style/model/lines/visibility.js index f93b4917..f715a667 100644 --- a/internal/stores/data_style/model/lines/visibility.js +++ b/internal/stores/data_style/model/lines/visibility.js @@ -5,6 +5,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { useModelLinesCommonStyle } from "./common" import { useDataStore } from "@ogw_front/stores/data" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_lines_schemas = viewer_schemas.opengeodeweb_viewer.model.lines @@ -12,6 +13,7 @@ const model_lines_schemas = viewer_schemas.opengeodeweb_viewer.model.lines export function useModelLinesVisibilityStyle() { const dataStore = useDataStore() const viewerStore = useViewerStore() + const dataStyleStateStore = useDataStyleStateStore() const modelLinesCommonStyle = useModelLinesCommonStyle() function modelLineVisibility(id, line_id) { @@ -23,37 +25,42 @@ export function useModelLinesVisibilityStyle() { } async function setModelLinesVisibility(id, line_ids, visibility) { + const updateState = async () => { + for (const line_id of line_ids) { + await dataStyleStateStore.mutateComponentStyle(id, line_id, (style) => { + style.visibility = visibility + }) + } + console.log( + setModelLinesVisibility.name, + { id }, + { line_ids }, + modelLineVisibility(id, line_ids[0]), + ) + } + if (!line_ids || line_ids.length === 0) { return } - const line_viewer_ids = await dataStore.getMeshComponentsViewerIds( - id, - line_ids, - ) - if (!line_viewer_ids || line_viewer_ids.length === 0) { - console.warn( - "[setModelLinesVisibility] No viewer IDs found, skipping visibility request", - { id, line_ids }, + + if (model_lines_schemas?.visibility) { + const line_viewer_ids = await dataStore.getMeshComponentsViewerIds( + id, + line_ids, ) - return - } - return viewerStore.request( - model_lines_schemas.visibility, - { id, block_ids: line_viewer_ids, visibility }, - { - response_function: () => { - for (const line_id of line_ids) { - saveModelLineVisibility(id, line_id, visibility) - } - console.log( - setModelLinesVisibility.name, - { id }, - { line_ids }, - modelLineVisibility(id, line_ids[0]), - ) + if (!line_viewer_ids || line_viewer_ids.length === 0) { + return updateState() + } + return viewerStore.request( + model_lines_schemas.visibility, + { id, block_ids: line_viewer_ids, visibility }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/model/points/common.js b/internal/stores/data_style/model/points/common.js index ffd5b1e1..1a4df255 100644 --- a/internal/stores/data_style/model/points/common.js +++ b/internal/stores/data_style/model/points/common.js @@ -4,7 +4,7 @@ export function useModelPointsCommonStyle() { const dataStyleStateStore = useDataStyleStateStore() function modelPointsStyle(id) { - return dataStyleStateStore.getStyle(id).points + return dataStyleStateStore.styles[id].points } return { diff --git a/internal/stores/data_style/model/points/size.js b/internal/stores/data_style/model/points/size.js index 3299e9ec..35d1b600 100644 --- a/internal/stores/data_style/model/points/size.js +++ b/internal/stores/data_style/model/points/size.js @@ -4,29 +4,39 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useModelPointsCommonStyle } from "./common" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_points_schemas = viewer_schemas.opengeodeweb_viewer.model.points export function useModelPointsSizeStyle() { const viewerStore = useViewerStore() + const dataStyleStateStore = useDataStyleStateStore() const modelPointsCommonStyle = useModelPointsCommonStyle() function modelPointsSize(id) { return modelPointsCommonStyle.modelPointsStyle(id).size } - function setModelPointsSize(id, size) { - return viewerStore.request( - model_points_schemas.size, - { id, size }, - { - response_function: () => { - modelPointsCommonStyle.modelPointsStyle(id).size = size - console.log(setModelPointsSize.name, { id }, modelPointsSize(id)) + async function setModelPointsSize(id, size) { + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.points.size = size + }) + console.log(setModelPointsSize.name, { id }, modelPointsSize(id)) + } + + if (model_points_schemas?.size) { + return viewerStore.request( + model_points_schemas.size, + { id, size }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/model/points/visibility.js b/internal/stores/data_style/model/points/visibility.js index 0be93261..f1fe2e93 100644 --- a/internal/stores/data_style/model/points/visibility.js +++ b/internal/stores/data_style/model/points/visibility.js @@ -4,33 +4,43 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem // Local imports import { useModelPointsCommonStyle } from "./common" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_points_schemas = viewer_schemas.opengeodeweb_viewer.model.points export function useModelPointsVisibilityStyle() { const viewerStore = useViewerStore() + const dataStyleStateStore = useDataStyleStateStore() const modelPointsCommonStyle = useModelPointsCommonStyle() function modelPointsVisibility(id) { return modelPointsCommonStyle.modelPointsStyle(id).visibility } - function setModelPointsVisibility(id, visibility) { - return viewerStore.request( - model_points_schemas.visibility, - { id, visibility }, - { - response_function: () => { - modelPointsCommonStyle.modelPointsStyle(id).visibility = visibility - console.log( - setModelPointsVisibility.name, - { id }, - modelPointsVisibility(id), - ) + async function setModelPointsVisibility(id, visibility) { + const updateState = async () => { + await dataStyleStateStore.mutateStyle(id, (style) => { + style.points.visibility = visibility + }) + console.log( + setModelPointsVisibility.name, + { id }, + modelPointsVisibility(id), + ) + } + + if (model_points_schemas?.visibility) { + return viewerStore.request( + model_points_schemas.visibility, + { id, visibility }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js index 90fb08a9..e5f74ad0 100644 --- a/internal/stores/data_style/model/surfaces/color.js +++ b/internal/stores/data_style/model/surfaces/color.js @@ -5,58 +5,61 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { useModelSurfacesCommonStyle } from "./common" import { useDataStore } from "@ogw_front/stores/data" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_surfaces_schemas = viewer_schemas.opengeodeweb_viewer.model.surfaces export function useModelSurfacesColorStyle() { - const dataStore = useDataStore() - const viewerStore = useViewerStore() - const modelSurfacesCommonStyle = useModelSurfacesCommonStyle() + const dataStore = useDataStore() + const viewerStore = useViewerStore() + const modelSurfacesCommonStyle = useModelSurfacesCommonStyle() - function modelSurfaceColor(id, surface_id) { - return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color - } - function saveModelSurfaceColor(id, surface_id, color) { - modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color = color - } - - async function setModelSurfacesColor(id, surface_ids, color) { - if (!surface_ids || surface_ids.length === 0) { - return + function modelSurfaceColor(id, surface_id) { + return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color } - const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds( - id, - surface_ids, - ) - if (!surface_viewer_ids || surface_viewer_ids.length === 0) { - console.warn( - "[setModelSurfacesColor] No viewer IDs found, skipping color request", - { id, surface_ids }, - ) - return + + async function setModelSurfacesColor(id, surface_ids, color) { + const dataStyleStateStore = useDataStyleStateStore() + const updateState = async () => { + for (const surface_id of surface_ids) { + await dataStyleStateStore.mutateComponentStyle(id, surface_id, (style) => { + style.color = color + }) + } + console.log( + setModelSurfacesColor.name, + { id }, + { surface_ids }, + JSON.stringify(modelSurfaceColor(id, surface_ids[0])), + ) + } + + if (!surface_ids || surface_ids.length === 0) { + return + } + const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds( + id, + surface_ids, + ) + if (!surface_viewer_ids || surface_viewer_ids.length === 0) { + console.warn( + "[setModelSurfacesColor] No viewer IDs found, skipping color request", + { id, surface_ids }, + ) + return updateState() + } + return viewerStore.request( + model_surfaces_schemas.color, + { id, block_ids: surface_viewer_ids, color }, + { + response_function: updateState, + }, + ) } - return viewerStore.request( - model_surfaces_schemas.color, - { id, block_ids: surface_viewer_ids, color }, - { - response_function: () => { - for (const surface_id of surface_ids) { - saveModelSurfaceColor(id, surface_id, color) - } - console.log( - setModelSurfacesColor.name, - { id }, - { surface_ids }, - JSON.stringify(modelSurfaceColor(id, surface_ids[0])), - ) - }, - }, - ) - } - return { - modelSurfaceColor, - setModelSurfacesColor, - } + return { + modelSurfaceColor, + setModelSurfacesColor, + } } diff --git a/internal/stores/data_style/model/surfaces/common.js b/internal/stores/data_style/model/surfaces/common.js index 9883d623..d9c55305 100644 --- a/internal/stores/data_style/model/surfaces/common.js +++ b/internal/stores/data_style/model/surfaces/common.js @@ -8,10 +8,9 @@ export function useModelSurfacesCommonStyle() { } function modelSurfaceStyle(id, surface_id) { - if (!modelSurfacesStyle(id)[surface_id]) { - modelSurfacesStyle(id)[surface_id] = {} - } - return modelSurfacesStyle(id)[surface_id] + const groupStyle = modelSurfacesStyle(id) + const individualStyle = dataStyleStateStore.getComponentStyle(id, surface_id) + return { ...groupStyle, ...individualStyle } } return { diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js index b35ee80c..681f5725 100644 --- a/internal/stores/data_style/model/surfaces/index.js +++ b/internal/stores/data_style/model/surfaces/index.js @@ -11,23 +11,50 @@ export function useModelSurfacesStyle() { const modelSurfacesColorStyle = useModelSurfacesColorStyle() async function applyModelSurfacesStyle(id) { - const style = modelSurfacesCommonStyle.modelSurfacesStyle(id) const surface_ids = await dataStore.getSurfacesGeodeIds(id) - return Promise.all([ - modelSurfacesVisibilityStyle.setModelSurfacesVisibility( - id, - surface_ids, - style.visibility, - ), - modelSurfacesColorStyle.setModelSurfacesColor( - id, - surface_ids, - style.color, - ), - ]) + if (surface_ids.length === 0) return + + const visibilityGroups = {} + const colorGroups = {} + + for (const surface_id of surface_ids) { + const style = modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id) + + const vKey = String(style.visibility) + if (!visibilityGroups[vKey]) visibilityGroups[vKey] = [] + visibilityGroups[vKey].push(surface_id) + + const cKey = JSON.stringify(style.color) + if (!colorGroups[cKey]) colorGroups[cKey] = [] + colorGroups[cKey].push(surface_id) + } + + const promises = [] + + for (const [vValue, ids] of Object.entries(visibilityGroups)) { + promises.push( + modelSurfacesVisibilityStyle.setModelSurfacesVisibility( + id, + ids, + vValue === "true", + ), + ) + } + + for (const [cValue, ids] of Object.entries(colorGroups)) { + promises.push( + modelSurfacesColorStyle.setModelSurfacesColor( + id, + ids, + JSON.parse(cValue), + ), + ) + } + + return Promise.all(promises) } - async function setModelSurfacesDefaultStyle(id) {} + async function setModelSurfacesDefaultStyle(id) { } return { applyModelSurfacesStyle, diff --git a/internal/stores/data_style/model/surfaces/visibility.js b/internal/stores/data_style/model/surfaces/visibility.js index 2a65f9fc..058fa029 100644 --- a/internal/stores/data_style/model/surfaces/visibility.js +++ b/internal/stores/data_style/model/surfaces/visibility.js @@ -5,6 +5,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem import { useModelSurfacesCommonStyle } from "./common" import { useDataStore } from "@ogw_front/stores/data" import { useViewerStore } from "@ogw_front/stores/viewer" +import { useDataStyleStateStore } from "../../state" // Local constants const model_surfaces_schemas = viewer_schemas.opengeodeweb_viewer.model.surfaces @@ -12,6 +13,7 @@ const model_surfaces_schemas = viewer_schemas.opengeodeweb_viewer.model.surfaces export function useModelSurfacesVisibilityStyle() { const dataStore = useDataStore() const viewerStore = useViewerStore() + const dataStyleStateStore = useDataStyleStateStore() const modelSurfacesCommonStyle = useModelSurfacesCommonStyle() function modelSurfaceVisibility(id, surface_id) { @@ -22,37 +24,46 @@ export function useModelSurfacesVisibilityStyle() { visibility } async function setModelSurfacesVisibility(id, surface_ids, visibility) { + const updateState = async () => { + for (const surface_id of surface_ids) { + await dataStyleStateStore.mutateComponentStyle( + id, + surface_id, + (style) => { + style.visibility = visibility + }, + ) + } + console.log( + setModelSurfacesVisibility.name, + { id }, + { surface_ids }, + modelSurfaceVisibility(id, surface_ids[0]), + ) + } + if (!surface_ids || surface_ids.length === 0) { return } - const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds( - id, - surface_ids, - ) - if (!surface_viewer_ids || surface_viewer_ids.length === 0) { - console.warn( - "[setModelSurfacesVisibility] No viewer IDs found, skipping visibility request", - { id, surface_ids }, + + if (model_surfaces_schemas?.visibility) { + const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds( + id, + surface_ids, ) - return - } - return viewerStore.request( - model_surfaces_schemas.visibility, - { id, block_ids: surface_viewer_ids, visibility }, - { - response_function: () => { - for (const surface_id of surface_ids) { - saveModelSurfaceVisibility(id, surface_id, visibility) - } - console.log( - setModelSurfacesVisibility.name, - { id }, - { surface_ids }, - modelSurfaceVisibility(id, surface_ids[0]), - ) + if (!surface_viewer_ids || surface_viewer_ids.length === 0) { + return updateState() + } + return viewerStore.request( + model_surfaces_schemas.visibility, + { id, block_ids: surface_viewer_ids, visibility }, + { + response_function: updateState, }, - }, - ) + ) + } else { + return updateState() + } } return { diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js index e0b5f2f1..2bbde8c4 100644 --- a/internal/stores/data_style/state.js +++ b/internal/stores/data_style/state.js @@ -1,15 +1,29 @@ +import { liveQuery } from "dexie" +import { useObservable } from "@vueuse/rxjs" +import { database } from "../../database/database" + export const useDataStyleStateStore = defineStore("dataStyleState", () => { - const styles = reactive({}) + const styles = useObservable( + liveQuery(async () => { + const allStyles = await database.data_style.toArray() + return allStyles.reduce((acc, style) => { + acc[style.id] = style + return acc + }, {}) + }), + { initialValue: {} }, + ) const objectVisibility = computed(() => (id) => { - if (styles[id]) { - return styles[id].visibility + if (styles.value[id]) { + return styles.value[id].visibility } return false }) + const selectedObjects = computed(() => { const selection = [] - for (const [id, value] of Object.entries(styles)) { + for (const [id, value] of Object.entries(styles.value)) { if (value.visibility === true) { selection.push(id) } @@ -17,14 +31,113 @@ export const useDataStyleStateStore = defineStore("dataStyleState", () => { return selection }) + const componentStyles = useObservable( + liveQuery(async () => { + const all = await database.model_component_datastyle.toArray() + return all.reduce((acc, style) => { + const key = `${style.id_model}_${style.id_component}` + acc[key] = style + return acc + }, {}) + }), + { initialValue: {} }, + ) + function getStyle(id) { - return styles[id] + const default_style = { + visibility: true, + color: { r: 1, g: 1, b: 1 }, + corners: { visibility: true, color: { r: 1, g: 1, b: 1 } }, + lines: { visibility: true, color: { r: 1, g: 1, b: 1 } }, + surfaces: { visibility: true, color: { r: 1, g: 1, b: 1 } }, + blocks: { visibility: true, color: { r: 1, g: 1, b: 1 } }, + points: { visibility: true, size: 10 }, + edges: { visibility: true }, + cells: { + visibility: true, + coloring: { + active: "color", + color: { r: 1, g: 1, b: 1 }, + cell: { name: "", storedConfigs: {} }, + vertex: { name: "", storedConfigs: {} }, + textures: [], + }, + }, + polygons: { + visibility: true, + coloring: { + active: "color", + color: { r: 1, g: 1, b: 1 }, + polygon: { name: "", storedConfigs: {} }, + vertex: { name: "", storedConfigs: {} }, + textures: [], + }, + }, + polyhedra: { + visibility: true, + coloring: { + active: "color", + color: { r: 1, g: 1, b: 1 }, + polyhedron: { name: "", storedConfigs: {} }, + vertex: { name: "", storedConfigs: {} }, + }, + }, + } + if (styles.value[id]) { + return { ...default_style, ...styles.value[id] } + } + return default_style + } + + async function updateStyle(id, style) { + await database.data_style.put(JSON.parse(JSON.stringify({ id, ...style }))) + } + + async function mutateStyle(id, mutationCallback) { + const style = getStyle(id) + mutationCallback(style) + await updateStyle(id, style) + } + + function getComponentStyle(id_model, id_component) { + const key = `${id_model}_${id_component}` + return componentStyles.value[key] || {} + } + + async function updateComponentStyle(id_model, id_component, style) { + await database.model_component_datastyle.put( + JSON.parse( + JSON.stringify({ + id_model, + id_component, + ...style, + }), + ), + ) + } + + async function mutateComponentStyle(id_model, id_component, mutationCallback) { + const style = getComponentStyle(id_model, id_component) + mutationCallback(style) + await updateComponentStyle(id_model, id_component, style) + } + + async function clear() { + await database.data_style.clear() + await database.model_component_datastyle.clear() } return { getStyle, + updateStyle, + mutateStyle, + getComponentStyle, + updateComponentStyle, + mutateComponentStyle, styles, + componentStyles, objectVisibility, selectedObjects, + clear, } }) diff --git a/internal/utils/viewer_call.js b/internal/utils/viewer_call.js index 632e6169..eb1d6998 100644 --- a/internal/utils/viewer_call.js +++ b/internal/utils/viewer_call.js @@ -40,7 +40,7 @@ export async function viewer_call( .getSession() .call(schema.$id, [params]) if (response_function) { - response_function(value) + await response_function(value) } return value } catch (error) {