feature: remember node positions after refreshing pages

src/module/cytoscapeMap.js

@@ -5,6 +5,8 @@ import 'tippy.js/dist/tippy.css';
 import Gradient from 'javascript-color-gradient'; // 多個色階產生器
 import { getTimeLabel } from '@/module/timeLabel.js'; // 時間格式轉換器
 import CytoscapeStore from '@/stores/cytoscapeStore';
+import { SAVE_KEY_NAME } from '@/constants/constants.js';
+
 
 cytoscape.use( dagre );
 
@@ -227,19 +229,29 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
   const cytoscapeStore = CytoscapeStore();
 
   cy.ready(() => {
-    cytoscapeStore.nodePositions.forEach(pos => {
-      const node = cy.getElementById(pos.id);
-      if (node) {
-        node.position(pos.position);
-      }
+    cytoscapeStore.loadPositionsFromStorage();
+    // 判斷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];
+      currentGraphNodesRemembered.forEach(nodeRemembered => {
+        const nodeToDecide = cy.getElementById(nodeRemembered.id);
+        if (nodeToDecide) {
+          nodeToDecide.position(nodeRemembered.position);
+        }
+      });
+    } 
+    //存下此刻剛進入畫面時當前所有節點的座標位置
+    const allNodes = cy.nodes();
+    allNodes.map(nodeFirstlySave => {
+      cytoscapeStore.saveNodePosition(nodeFirstlySave.id(), nodeFirstlySave.position);
     });
 
     // 在改變節點位置後，盡可能地記錄節點線條的位置情報
     cy.on('dragfree', 'node', (event) => {
-      const node = event.target;
-      const position = node.position();
-      cytoscapeStore.saveNodePosition(node.id(), position);
-      cytoscapeStore.savePositionsToStorage();
+      const nodeToSave = event.target;
+      cytoscapeStore.saveNodePosition(nodeToSave.id(),  nodeToSave.position());
     });
   });