Fix undo + force layout

src/components/VizTool.vue

 <template>
   <LoadingMask v-if="loading" class="loadingMask" />
   <div id="networkComponent" class="vizTool">
-		<HeaderBar @panelToOpen="globalProperties.panelToOpen = $event" />
+		<HeaderBar @panelToOpen="properties.panelToOpen = $event" />
     <NetworkComponent v-if="Object.keys(network.nodes).length > 0" :network="network" :graphStyleProperties="networkStyle"
-      :dataConvexhulls="globalProperties.convexhullsData" v-on:contextmenu.prevent @dragEnd="resumeCommit"
+      :dataConvexhulls="properties.convexhullsData" v-on:contextmenu.prevent @dragEnd="resumeCommit"
       @dragStart="stopCommit" @nodeRightClickEvent="openContextMenu" @dblclick.prevent="unselectNodes(network)"
       @nodeLeftClickEvent="selectNode" @initZoom="storeZoomObject($event)">
       <GirInterface v-if="girStatus" :network="network" :networkStyle="networkStyle.nodeStyles"
         @minusAction="minusGirAction($event, network)" @plusAction="plusGirAction($event, network)" />
     </NetworkComponent>
-    <DisplayPanel v-if="Object.keys(network.nodes).length > 0" :panelToOpen="globalProperties.panelToOpen" @convexhulls="globalProperties.convexhullsData = $event" @metadataPanel="globalProperties.metadata = $event" />
-    <ContextualPanel :metadata="globalProperties.metadata" />
+    <DisplayPanel v-if="Object.keys(network.nodes).length > 0" />
+    <ContextualPanel :metadata="properties.metadata" />
     <FooterBar />
   </div>
 </template>
@@ -29,7 +29,7 @@ import { networkStyle, initTheme } from "@/stores/StyleObject";
 import { girStatus } from "@/stores/GirProperties";
 import { mappingData, allowInput } from "@/stores/MappingData";
 import { switchTheme } from '@/stores/StyleObject';
-import { properties } from '@/stores/GlobalProperties'
+import { properties, forceLayout } from '@/stores/GlobalProperties'
 // Components -----------
 import HeaderBar from "./header/HeaderBar.vue";
 import DisplayPanel from "./panel/DisplayPanel.vue";
@@ -38,15 +38,13 @@ import ContextualPanel from "./panel/ContextualPanel.vue";
 
 // Import external resources -----------------
 // Utils ----------------
-import { ref, reactive, watch, PropType, onMounted, onBeforeMount } from "vue";
+import { ref, watch, PropType, onMounted, onBeforeMount } from "vue";
 // Types ----------------
 import type { GraphStyleProperties, Network, Node } from "@metabohub/viz-core/dist/types";
-import type { Convexhulls } from "@metabohub/viz-core/dist/types";
 // Composables ----------
-import { forceObject } from "@metabohub/viz-core";
 import { nodeSelection } from "@metabohub/viz-core";
 import { UseContextMenu } from "@metabohub/viz-context-menu";
-import { createForceLayout, createClusterForceLayout } from "@metabohub/viz-core";
+import { createClusterForceLayout } from "@metabohub/viz-core";
 import { useTheme } from 'vuetify';
 // Components -----------
 import { NetworkComponent } from "@metabohub/viz-core";
@@ -73,13 +71,6 @@ const props = defineProps({
 // Variables --------------
 const loading = ref<boolean>(true);
 
-const globalProperties = reactive({
-	forceLayout: forceObject,
-	convexhullsData: {} as Convexhulls,
-	metadata: {},
-	panelToOpen: ''
-});
-
 const theme = useTheme();
 
 // Emit -------------------
@@ -109,18 +100,6 @@ watch(() => props.network, (newNetwork) => {
 	initialiseGlobalNetwork(newNetwork as Network);
 });
 
-watch(() => network.value, () => {
-	globalProperties.forceLayout.simulation = undefined;
-	globalProperties.forceLayout.isAnim = false;
-	if (props.allowAutoAlgo) {
-		if (Object.keys(network.value.nodes).length > 500) {
-			createClusterForceLayout(network.value);
-		} else {
-			forceLayoutManagement();
-		}
-	}
-});
-
 watch(() => props.networkStyle, (newNetworkStyle) => {
 	initialiseGlobalStyle(newNetworkStyle as GraphStyleProperties);
 });
@@ -155,7 +134,7 @@ onMounted(() => {
 });
 
 function initialiseGlobalStyle(newNetworkStyle: GraphStyleProperties): void {
-	networkStyle.value = newNetworkStyle
+	networkStyle.value = newNetworkStyle;
 	initTheme(networkStyle.value);
 	if (theme.global.current.value.dark) {
 		switchTheme(true);
@@ -166,6 +145,15 @@ function initialiseGlobalNetwork(newNetwork: Network): void {
 	network.value = newNetwork;
 	document.addEventListener('keydown', keydownHandler);
 	callbackFunction(network, networkStyle, loading);
+	forceLayout.value.simulation = undefined;
+	forceLayout.value.isAnim = false;
+	if (props.allowAutoAlgo) {
+		if (Object.keys(network.value.nodes).length > 500) {
+			createClusterForceLayout(network.value);
+		} else {
+			forceLayoutManagement();
+		}
+	}
 }
 
 onBeforeMount(() => {

src/components/panel/DisplayPanel.vue

@@ -37,7 +37,7 @@
         :nodes="network.nodes"
         :attribut="['pathways', 'compartments']" 
         @closePanel="setFalseItem('convexhullsWindow')"
-        @sendConvexhullsData="globalProperties.convexhullsData = $event;" 
+        @sendConvexhullsData="properties.convexhullsData = $event;" 
         @newPanelPosition="changePanelPosition($event, slotProps.position)" />
     </PanelBox>
     <PanelBox v-slot="slotProps">
@@ -121,14 +121,13 @@ import { network } from "@/stores/NetworkObject";
 import { networkStyle } from "@/stores/StyleObject";
 import { panelOpen, setFalseItem } from "@/stores/PanelProperties";
 import { mappingData, allowInput } from "@/stores/MappingData";
+import { properties } from "@/stores/GlobalProperties";
 // Components -----------
 import PanelBox from "./PanelBox.vue";
 
 // Import external resources -----------------
 // Utils ----------------
-import { reactive, watch, computed } from "vue";
-// Types ----------------
-import type { Convexhulls } from "@metabohub/viz-core/dist/types";
+import { watch } from "vue";
 // Composables ----------
 import { forceObject } from "@metabohub/viz-core";
 // Components -----------
@@ -144,36 +143,17 @@ import { useTheme } from 'vuetify';
 
 const theme = useTheme();
 
-const props = defineProps({
-  panelToOpen: String
-});
-
 const emit = defineEmits([
   'convexhulls',
   'metadataPanel'
 ]);
 
-const panelToOpen = computed(() => {
-  return props.panelToOpen;
-});
-
-const globalProperties = reactive({
-	loading: true,
-	convexhullsData: {} as Convexhulls,
-  panelToOpen: panelToOpen
-});
-
 function showMetadataFromList(nodeID: string): void {
 	const selectedNode = network.value.nodes[nodeID];
   const metadata = getMetadata(selectedNode);
 	emit('metadataPanel', metadata);
 }
 
-watch(() => globalProperties.convexhullsData, (newConvexhullsData) => {
-  console.log(newConvexhullsData);
-  emit('convexhulls', newConvexhullsData);
-});
-
 watch(() => theme.global.current.value.dark, () => {
   Object.keys(panelOpen.value).forEach((panel: string) => {
     setFalseItem(panel);

src/composables/utilities/UseGraphManagement.ts

 // ------- Graph Management ------
 import { removeAllNodesByAttribut, duplicateAllNodesByAttribut, removeNode, removeAllSelectedNodes, duplicateNode, unselectAll, verticalNodesAlign, horizontalNodesAlign } from "@metabohub/viz-core";
 import { storeDelNode } from "@/stores/NetworkObject";
+import { forceLayout } from "@/stores/GlobalProperties";
 import type { GraphStyleProperties, Network } from "@metabohub/viz-core/dist/types/index";
 import { resumeCommit, stopCommit } from "./UseUndoFunctions";
 import { createForceLayout, playForceLayout, stopForceLayout } from "@metabohub/viz-core";
@@ -94,4 +95,15 @@ export function forceLayoutManagement() {
 			playForceLayout();
 		}
 	}
+}
+
+export function resetSimulation() {
+	if (forceLayout.value.isAnim) {
+		stopForceLayout();
+		forceLayout.value.simulation = undefined;
+		forceLayout.value.isAnim = false;
+	} else {
+		forceLayout.value.simulation = undefined;
+		forceLayout.value.isAnim = false;
+	}
 }
\ No newline at end of file

src/composables/utilities/UseUndoFunctions.ts

@@ -3,6 +3,7 @@ import { createUndoFunction } from "@metabohub/viz-core";
 import type { Network } from "@metabohub/viz-core/dist/types/index";
 import { reactive } from "vue";
 import type { Ref } from "vue";
+import { resetSimulation } from "./UseGraphManagement";
 
 let undoObject: {[key: string]: Function} = reactive({});
 
@@ -21,8 +22,10 @@ export function resumeCommit() {
 
 export function undoAction() {
 	undoObject.undo();
+	resetSimulation();
 }
 
 export function redoAction() {
 	undoObject.redo();
+	resetSimulation();
 }
\ No newline at end of file

src/stores/GlobalProperties.ts

 import { ref } from "vue";
+import { forceObject } from "@metabohub/viz-core";
+import type { Convexhulls } from "@metabohub/viz-core/dist/types";
 
-export const properties = ref<{[key: string]: string}>({
-  moduleName: ''
-});
\ No newline at end of file
+export const properties = ref({
+  moduleName: '',
+	convexhullsData: {} as Convexhulls,
+	metadata: {},
+	panelToOpen: ''
+});
+
+export const forceLayout = ref<{[key: string]: any}>(forceObject);
\ No newline at end of file