fix: #310 keep loading animation bug is related to cytoscape undefined bug. And cytoscape node position remembering feature is not actually finished correctly yet before. Now remembering feature is done.

2024-07-04 11:07:25 +08:00
parent 8a77df285b
commit d8d70f01f3
3 changed files with 67 additions and 17 deletions
--- a/src/stores/cytoscapeStore.ts
+++ b/src/stores/cytoscapeStore.ts
@@ -0,0 +1,77 @@
+import { defineStore } from 'pinia';
+
+import { SAVE_KEY_NAME } from '@/constants/constants.js';
+
+// nodePositions 結構 {
+//  graphId: [{
+//               id,
+//               position: {
+//                             x,
+//                             y,
+//                          }
+//           }]
+// }
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface Node {
+  id: string;
+  position: Position;
+}
+
+interface NodePositions {
+  [graphId: string]: Node[];
+}
+
+export default defineStore('useCytoscapeStore', {
+  state: () => ({
+    nodePositions: {} as NodePositions,
+    currentGraphId: "",
+  }),
+  actions: {
+    /**
+     * 儲存或更新單個節點的位置資訊。
+     * @param {string} id 
+     * @param {object} position {x, y} position有兩個值，x與y
+     */
+    saveNodePosition(nodeId: string, position: NodePosition) {
+      // 若是資訊曾經存在這張圖於localStorage中
+      if (localStorage.getItem(SAVE_KEY_NAME) && JSON.parse(localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId]) {
+        console.log('saveNodePosition ---- this.nodePositions[this.currentGraphId]',this.nodePositions[this.currentGraphId] );
+        const nodeToSave = this.nodePositions[this.currentGraphId].find(node => node.id === nodeId);
+        if(nodeToSave) {
+          nodeToSave.position = position;
+        } else {
+          console.log('aaaa this.nodePositions[this.currentGraphId]',this.nodePositions[this.currentGraphId] );
+          this.nodePositions[this.currentGraphId].push({id: nodeId, position: position});
+        }       
+      } else {
+        this.nodePositions[this.currentGraphId] = [];
+        this.nodePositions[this.currentGraphId].push({id: nodeId, position: position});
+        localStorage.setItem(SAVE_KEY_NAME, JSON.stringify(this.nodePositions));
+      }
+      console.log('', );
+      this.savePositionsToStorage();
+    },
+    /**
+     * 從本地存儲中加載節點位置資訊。
+     */
+    loadPositionsFromStorage() {
+      if (localStorage.getItem(SAVE_KEY_NAME)) {
+        this.nodePositions[this.currentGraphId] = JSON.parse(localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId];
+      }
+    },
+    /**
+     * 將節點位置資訊儲存到本地存儲中。
+     */
+    savePositionsToStorage() {
+      localStorage.setItem(SAVE_KEY_NAME, JSON.stringify(this.nodePositions));
+    },
+    setCurrentGraphId(currentGraphId: string) {
+      this.currentGraphId = currentGraphId;
+      this.nodePositions = {[this.currentGraphId]: []};
+    },
+  },
+});