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

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': [],
}
};
},
},
});