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);
     });
   });