diff --git a/src/components/EvConfigCanvas.vue b/src/components/EvConfigCanvas.vue index 7769d25e..1f4afc20 100644 --- a/src/components/EvConfigCanvas.vue +++ b/src/components/EvConfigCanvas.vue @@ -42,6 +42,7 @@ import EVConfigModel from "@/modules/evbc/config_model"; import EVBackendClient from "@/modules/evbc/client"; import {Notyf} from "notyf"; import ConfigPreview from "@/components/ConfigPreview.vue"; +import {storeToRefs} from "pinia"; export default defineComponent({ components: {ConfigPreview}, @@ -51,6 +52,7 @@ export default defineComponent({ const evbc = inject('evbc'); const selected_interface: string | null = null; const notyf = inject('notyf'); + const { current_config: current_config } = storeToRefs(evbcStore); ref(false); @@ -75,8 +77,6 @@ export default defineComponent({ }); - const current_config: ComputedRef = computed(evbcStore.get_current_config); - const reset_view = () => { stage.reset_view(); }; @@ -93,7 +93,7 @@ export default defineComponent({ }); }; - watch(current_config, (new_config, old_config) => { + watch(current_config, (new_config: EVConfigModel, old_config: EVConfigModel) => { if (old_config) { // FIXME (aw): should we ask for something here? } diff --git a/src/components/EvModuleInfo.vue b/src/components/EvModuleInfo.vue index 20117a5c..921890ac 100644 --- a/src/components/EvModuleInfo.vue +++ b/src/components/EvModuleInfo.vue @@ -100,10 +100,10 @@ import { defineComponent, computed } from "vue"; import { Vjsf } from "@koumoul/vjsf"; import IconButtonWithTooltip from "./IconButtonWithTooltip.vue"; -import { ModuleInstanceModel, Terminal, ConnectionID, ModuleInstanceID } from "@/modules/evbc"; -import EVConfigModel from "@/modules/evbc/config_model"; +import { ConnectionID, ModuleInstanceID } from "@/modules/evbc"; import ConfigStageContext from "@/modules/evconf_konva/stage_context"; import { useEvbcStore } from "@/store/evbc"; +import {storeToRefs} from "pinia"; export default defineComponent({ components: { @@ -112,13 +112,14 @@ export default defineComponent({ }, setup() { const evbcStore = useEvbcStore(); + const { current_config } = storeToRefs(evbcStore); const module_node = computed(() => { const instance_id = evbcStore.get_selected_module_instance(); if (instance_id === null) { return null; } - const instance = evbcStore.get_current_config().get_module_instance(instance_id); + const instance = current_config.value.get_module_instance(instance_id); return { instance_id, instance, @@ -129,18 +130,14 @@ export default defineComponent({ return evbcStore.get_selected_terminal(); }); - const config_model = computed((): EVConfigModel => { - return evbcStore.get_current_config(); - }); - const connection = computed(() => { const connection_id = evbcStore.get_selected_connection(); if (connection_id === null) { return null; } - const cxn = config_model.value.get_connection(connection_id); - const requiring_module = config_model.value.get_module_instance(cxn.requiring_instance_id); - const implementing_module = config_model.value.get_module_instance(cxn.providing_instance_id); + const cxn = current_config.value.get_connection(connection_id); + const requiring_module = current_config.value.get_module_instance(cxn.requiring_instance_id); + const implementing_module = current_config.value.get_module_instance(cxn.providing_instance_id); return { from: { @@ -165,24 +162,24 @@ export default defineComponent({ return [ (v: string) => { const instance_id = module_node.value.instance_id; - const result = config_model.value.update_module_id(instance_id, v); + const result = current_config.value.update_module_id(instance_id, v); return result || "This module id is not available"; }, ]; }); function delete_connection(id: ConnectionID) { - config_model.value.delete_connection(id); + current_config.value.delete_connection(id); } function delete_module_instance(id: ModuleInstanceID) { - config_model.value.delete_module_instance(id); + current_config.value.delete_module_instance(id); } return { module_node, terminal, - config_model, + current_config, connection, context, moduleIDRules, diff --git a/src/components/EvModuleList.vue b/src/components/EvModuleList.vue index 493853bd..975c6aca 100644 --- a/src/components/EvModuleList.vue +++ b/src/components/EvModuleList.vue @@ -109,7 +109,7 @@ export default defineComponent({ components: {EvDialog}, computed: { current_config(): EVConfigModel | null { - return evbcStore.get_current_config(); + return evbcStore.current_config; }, show_search(): boolean { return !evbcStore.get_selected_terminal(); @@ -150,8 +150,8 @@ export default defineComponent({ methods: { add_module_to_config(type: string) { let added_module_id: number; - if (evbcStore.get_current_config()) { - added_module_id = evbcStore.get_current_config()!.add_new_module_instance(type); + if (evbcStore.current_config) { + added_module_id = evbcStore.current_config.add_new_module_instance(type); } else { const new_config = evbc.create_empty_config("test_config"); added_module_id = new_config.add_new_module_instance(type); @@ -159,7 +159,7 @@ export default defineComponent({ } if (evbcStore.get_selected_terminal()) { const selectedTerminal = evbcStore.get_selected_terminal(); - const addedModuleInstance = evbcStore.get_current_config().get_module_instance(added_module_id); + const addedModuleInstance = evbcStore.current_config.get_module_instance(added_module_id); const terminals = Object.values(addedModuleInstance.view_config.terminals).flat(); let terminalToClick; if (selectedTerminal.type === "requirement") { diff --git a/src/store/evbc.ts b/src/store/evbc.ts index 7a28e3ad..805bf8d6 100644 --- a/src/store/evbc.ts +++ b/src/store/evbc.ts @@ -9,9 +9,8 @@ import ConfigStageContext, {SelectionType} from "@/modules/evconf_konva/stage_co import {ConnectionID, ModuleInstanceID, Terminal} from "@/modules/evbc"; export const useEvbcStore = defineStore('evbc', () => { - const config_opened = ref(false); const selection = ref({ type: "NONE" } as SelectionType); - const config_model = ref(null); + const current_config = ref(null); const config_context = reactive(new ConfigStageContext()); config_context.add_observer((ev) => { @@ -21,40 +20,22 @@ export const useEvbcStore = defineStore('evbc', () => { }); function setOpenedConfig(model: EVConfigModel) { - if (config_opened.value) { - config_opened.value = false; - } - - config_model.value = model; - config_opened.value = true; - } - - function resetOpenedConfig() { - config_model.value = null; - config_opened.value = false; - } - - function setCurrentSelection(sel: SelectionType) { - selection.value = sel; + current_config.value = model; } // Getters + const get_is_config_opened = (): boolean => !!current_config.value; const get_config_context = (): ConfigStageContext => config_context; - const get_current_config = (): EVConfigModel | null => config_opened.value ? config_model.value : null; - const get_selected_module_instance = (): ModuleInstanceID | null => config_opened.value && selection.value.type === "MODULE_INSTANCE" ? selection.value.id : null; - const get_selected_terminal = (): Terminal | null => config_opened.value && selection.value.type === "TERMINAL" ? selection.value.terminal : null; - const get_selected_connection = (): ConnectionID | null => config_opened.value && selection.value.type === "CONNECTION" ? selection.value.id : null; + const get_selected_module_instance = (): ModuleInstanceID | null => get_is_config_opened() && selection.value.type === "MODULE_INSTANCE" ? selection.value.id : null; + const get_selected_terminal = (): Terminal | null => get_is_config_opened() && selection.value.type === "TERMINAL" ? selection.value.terminal : null; + const get_selected_connection = (): ConnectionID | null => get_is_config_opened() && selection.value.type === "CONNECTION" ? selection.value.id : null; return { - config_opened, selection, - config_model, + current_config, config_context, setOpenedConfig, - resetOpenedConfig, - setCurrentSelection, get_config_context, - get_current_config, get_selected_module_instance, get_selected_terminal, get_selected_connection