imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

separately save vertical and horizontal node positions

Browse Source
This commit is contained in:
Cindy Chang
2024-09-05 14:55:14 +08:00
parent b467b82474
commit 322f05de14
2 changed files with 38 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/module/cytoscapeMap.js
View File

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

55
src/stores/cytoscapeStore.ts
View File

@@ -2,15 +2,10 @@ import { defineStore } from 'pinia';
import { SAVE_KEY_NAME } from '@/constants/constants.js';
// nodePositions 結構 {
// graphId: [{
// id,
// position: {
// x,
// y,
// }
// }]
// }
// nodePositions[graphId][direction][id]
// nodePositions[graphId][position]
interface Position {
x: number;
y: number;
@@ -22,9 +17,12 @@ interface Node {
}
interface NodePositions {
[graphId: string]: Node[];
[direction: string]: {
[graphId: string]: Node[];
}
}
export default defineStore('useCytoscapeStore', {
state: () => ({
nodePositions: {} as NodePositions,
@@ -35,29 +33,37 @@ export default defineStore('useCytoscapeStore', {
* 儲存或更新單個節點的位置資訊。
* @param {string} id
* @param {object} position {x, y} position有兩個值，x與y
* @param {string} direction 'TB' 'LR'
*/
saveNodePosition(nodeId: string, position: NodePosition) {
saveNodePosition(nodeId: string, position: NodePosition, direction: string) {
// 若是資訊曾經存在這張圖於localStorage中
if (localStorage.getItem(SAVE_KEY_NAME) && JSON.parse(localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId]) {
const nodeToSave = this.nodePositions[this.currentGraphId].find(node => node.id === nodeId);
if(nodeToSave) {
if (localStorage.getItem(SAVE_KEY_NAME)) {
const nodeToSave = this.nodePositions[this.currentGraphId][direction]
.find(node => node.id === nodeId);
if (nodeToSave) {
nodeToSave.position = position;
} else {
this.nodePositions[this.currentGraphId].push({id: nodeId, position: position});
}
this.nodePositions[this.currentGraphId][direction]
.push({ id: nodeId, position: position });
}
} else {
this.nodePositions[this.currentGraphId] = [];
this.nodePositions[this.currentGraphId].push({id: nodeId, position: position});
this.nodePositions[this.currentGraphId][direction] = [];
this.nodePositions[this.currentGraphId][direction]
.push({ id: nodeId, position: position });
localStorage.setItem(SAVE_KEY_NAME, JSON.stringify(this.nodePositions));
}
this.savePositionsToStorage();
},
/**
* 從本地存儲中加載節點位置資訊。
* @param {string} direction 'TB' TopBotom; 'LR' LeftRight
*/
loadPositionsFromStorage() {
if (localStorage.getItem(SAVE_KEY_NAME)) {
this.nodePositions[this.currentGraphId] = JSON.parse(localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId];
loadPositionsFromStorage(direction: string) {
if (localStorage.getItem(SAVE_KEY_NAME) &&
JSON.parse(
localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId]) {
this.nodePositions[this.currentGraphId][direction] = JSON.parse(
localStorage.getItem(SAVE_KEY_NAME))[this.currentGraphId][direction];
}
},
/**
@@ -68,7 +74,12 @@ export default defineStore('useCytoscapeStore', {
},
setCurrentGraphId(currentGraphId: string) {
this.currentGraphId = currentGraphId;
this.nodePositions = {[this.currentGraphId]: []};
this.nodePositions = {
[this.currentGraphId]: {
'TB': [],
'LR': [],
}
};
},
},
});