feature: cytoscape node positions are remembered

src/module/cytoscapeMap.js

@@ -4,6 +4,7 @@ import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import Gradient from 'javascript-color-gradient'; // 多個色階產生器
 import { getTimeLabel } from '@/module/timeLabel.js'; // 時間格式轉換器
+import CytoscapeStore from '@/stores/cytoscapeStore';
 
 cytoscape.use( dagre );
 
@@ -19,6 +20,7 @@ cytoscape.use( dagre );
  * @param {string} dataLayerOption DataLayer's options
  * @param {string} curve Curve's type
  * @param {string} graphId cytoscape's container
+ * @return {cytoscape.Core} cy
  */
 export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, curveStyle, rank, graphId) {
   // create color Gradient
@@ -217,8 +219,29 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           content:content
        });
       if(node.data("label").length > 10) tip.show();
-  })
+  });
   cy.on('mouseout', 'node', function(event) {
       tip.hide();
-  })
+  });
+
+  const cytoscapeStore = CytoscapeStore();
+
+  cy.ready(() => {
+    cytoscapeStore.nodePositions.forEach(pos => {
+      const node = cy.getElementById(pos.id);
+      if (node) {
+        node.position(pos.position);
+      }
+    });
+
+    // 在改變節點位置後，盡可能地記錄節點線條的位置情報
+    cy.on('dragfree', 'node', (event) => {
+      const node = event.target;
+      const position = node.position();
+      cytoscapeStore.saveNodePosition(node.id(), position);
+      cytoscapeStore.savePositionsToStorage();
+    });
+  });
+
+  return cy;
 }