diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js index 6a736de..aca353e 100644 --- a/src/module/cytoscapeMap.js +++ b/src/module/cytoscapeMap.js @@ -227,25 +227,27 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu }); const cytoscapeStore = CytoscapeStore(); - cy.ready(() => { cytoscapeStore.loadPositionsFromStorage(); + localStorage.getItem(SAVE_KEY_NAME) && console.log(JSON.parse(localStorage.getItem(SAVE_KEY_NAME))); // 判斷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 currentGraphNodesRemembered = allGraphsRemembered[cytoscapeStore.currentGraphId]; // 可能是undefined + if(currentGraphNodesRemembered) { + 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); + cytoscapeStore.saveNodePosition(nodeFirstlySave.id(), nodeFirstlySave.position()); }); // 在改變節點位置後,盡可能地記錄節點線條的位置情報 diff --git a/src/stores/cytoscapeStore.js b/src/stores/cytoscapeStore.ts similarity index 56% rename from src/stores/cytoscapeStore.js rename to src/stores/cytoscapeStore.ts index b0d2870..384b399 100644 --- a/src/stores/cytoscapeStore.js +++ b/src/stores/cytoscapeStore.ts @@ -1,11 +1,33 @@ -import { el } from 'date-fns/locale'; 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: {}, + nodePositions: {} as NodePositions, currentGraphId: "", }), actions: { @@ -14,16 +36,23 @@ export default defineStore('useCytoscapeStore', { * @param {string} id * @param {object} position {x, y} position有兩個值,x與y */ - saveNodePosition(nodeId, position) { + 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(); }, /** @@ -40,9 +69,9 @@ export default defineStore('useCytoscapeStore', { savePositionsToStorage() { localStorage.setItem(SAVE_KEY_NAME, JSON.stringify(this.nodePositions)); }, - setCurrentGraphId(currentGraphId) { + setCurrentGraphId(currentGraphId: string) { this.currentGraphId = currentGraphId; - this.nodePositions[currentGraphId] = []; + this.nodePositions = {[this.currentGraphId]: []}; }, }, }); \ No newline at end of file diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue index cc744a4..dde02b9 100644 --- a/src/views/Discover/Map/Map.vue +++ b/src/views/Discover/Map/Map.vue @@ -53,14 +53,15 @@