separately save vertical and horizontal node positions

src/module/cytoscapeMap.js

@@ -263,15 +263,12 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
   // here we remember and recall positions
   const cytoscapeStore = CytoscapeStore();
   cy.ready(() => {
-    if (rank === 'TB') {
-      return; // early return; only handle 'LR' (horizontal) case
-    }
-    cytoscapeStore.loadPositionsFromStorage();
+    cytoscapeStore.loadPositionsFromStorage(rank);
     // 判斷localStorage是否儲存過拜訪資訊
     // 若曾經儲存過拜訪後的座標位置，則restore位置來渲染出來
     if (localStorage.getItem(SAVE_KEY_NAME) && JSON.parse(localStorage.getItem(SAVE_KEY_NAME))) {
       const allGraphsRemembered = JSON.parse(localStorage.getItem(SAVE_KEY_NAME));
-      const currentGraphNodesRemembered = allGraphsRemembered[cytoscapeStore.currentGraphId]; // 可能是undefined
+      const currentGraphNodesRemembered = allGraphsRemembered[cytoscapeStore.currentGraphId][rank]; // 可能是undefined
       if (currentGraphNodesRemembered) {
         currentGraphNodesRemembered.forEach(nodeRemembered => {
           const nodeToDecide = cy.getElementById(nodeRemembered.id);
@@ -284,13 +281,14 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     //存下此刻剛進入畫面時當前所有節點的座標位置
     const allNodes = cy.nodes();
     allNodes.map(nodeFirstlySave => {
-      cytoscapeStore.saveNodePosition(nodeFirstlySave.id(), nodeFirstlySave.position());
+      cytoscapeStore.saveNodePosition(nodeFirstlySave.id(), nodeFirstlySave.position(), rank);
     });
 
     // 在改變節點位置後，盡可能地記錄節點線條的位置情報
+    // rank 代表現在使用者切換的是水平方向還是垂直方向模式
     cy.on('dragfree', 'node', (event) => {
       const nodeToSave = event.target;
-      cytoscapeStore.saveNodePosition(nodeToSave.id(), nodeToSave.position());
+      cytoscapeStore.saveNodePosition(nodeToSave.id(), nodeToSave.position(), rank);
     });
   });
 

src/stores/cytoscapeStore.ts

@@ -2,15 +2,10 @@ import { defineStore } from 'pinia';
 
 import { SAVE_KEY_NAME } from '@/constants/constants.js';
 
-// nodePositions 結構 {
-//  graphId: [{
-//               id,
-//               position: {
-//                             x,
-//                             y,
-//                          }
-//           }]
-// }
+// nodePositions[graphId][direction][id] 
+// nodePositions[graphId][position]
+
+
 interface Position {
   x: number;
   y: number;
@@ -22,9 +17,12 @@ interface Node {
 }
 
 interface NodePositions {
+  [direction: string]: {
     [graphId: string]: Node[];
+  }
 }
 
+
 export default defineStore('useCytoscapeStore', {
   state: () => ({
     nodePositions: {} as NodePositions,
@@ -35,29 +33,37 @@ export default defineStore('useCytoscapeStore', {
      * 儲存或更新單個節點的位置資訊。
      * @param {string} id 
      * @param {object} position {x, y} position有兩個值，x與y
+     * @param {string} direction 'TB' 'LR'
      */
-    saveNodePosition(nodeId: string, position: NodePosition) {
+    saveNodePosition(nodeId: string, position: NodePosition, direction: string) {
       // 若是資訊曾經存在這張圖於localStorage中
-      if (localStorage.getItem(SAVE_KEY_NAME) && JSON.parse(localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId]) {
-        const nodeToSave = this.nodePositions[this.currentGraphId].find(node => node.id === nodeId);
-        if(nodeToSave) {
+      if (localStorage.getItem(SAVE_KEY_NAME)) {
+        const nodeToSave = this.nodePositions[this.currentGraphId][direction]
+          .find(node => node.id === nodeId);
+        if (nodeToSave) {
           nodeToSave.position = position;
         } else {
-          this.nodePositions[this.currentGraphId].push({id: nodeId, position: position});
+          this.nodePositions[this.currentGraphId][direction]
+            .push({ id: nodeId, position: position });
         }
       } else {
-        this.nodePositions[this.currentGraphId] = [];
-        this.nodePositions[this.currentGraphId].push({id: nodeId, position: position});
+        this.nodePositions[this.currentGraphId][direction] = [];
+        this.nodePositions[this.currentGraphId][direction]
+          .push({ id: nodeId, position: position });
         localStorage.setItem(SAVE_KEY_NAME, JSON.stringify(this.nodePositions));
       }
       this.savePositionsToStorage();
     },
     /**
      * 從本地存儲中加載節點位置資訊。
+     * @param {string} direction 'TB' TopBotom; 'LR' LeftRight
      */
-    loadPositionsFromStorage() {
-      if (localStorage.getItem(SAVE_KEY_NAME)) {
-        this.nodePositions[this.currentGraphId] = JSON.parse(localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId];
+    loadPositionsFromStorage(direction: string) {
+      if (localStorage.getItem(SAVE_KEY_NAME) &&
+        JSON.parse(
+          localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId]) {
+        this.nodePositions[this.currentGraphId][direction] = JSON.parse(
+          localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId][direction];
       }
     },
     /**
@@ -68,7 +74,12 @@ export default defineStore('useCytoscapeStore', {
     },
     setCurrentGraphId(currentGraphId: string) {
       this.currentGraphId = currentGraphId;
-      this.nodePositions = {[this.currentGraphId]: []};
+      this.nodePositions = {
+        [this.currentGraphId]: {
+          'TB': [],
+          'LR': [],
+        }
+      };
     },
   },
 });