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

dualonNodeClickHighlightEdges and onEdgeClickHighlightNodes

Browse Source
This commit is contained in:
Cindy Chang
2024-08-21 15:10:50 +08:00
parent c3c2861a8f
commit 85b8536f3a
2 changed files with 47 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/stores/mapPathStore.ts
View File

@@ -14,20 +14,8 @@ import ImgCapsule4 from '@/assets/capsule4.svg';
const ImgCapsulesGlow = [ImgCapsuleGlow1, ImgCapsuleGlow2, ImgCapsuleGlow3, ImgCapsuleGlow4];
const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
interface MapPathStoreState {
clickedPath: string[];
insights: Record<string, any[]>; // Replace `any` with the correct type if available
cytoscape: cytoscape.Core | null;
allPaths: NodeSingular[][];
allPathsByEdge: EdgeSingular[][];
startNode: NodeSingular | null;
mapGraphPathToInsight: Record<string, { [key: string]: number; pathByNode: NodeSingular[]; pathByEdge: EdgeSingular[] }>;
activeTrace: number;
activeListIndex: number;
}
export default defineStore('useMapPathStore', {
state: (): MapPathStoreState => ({
state: () => ({
clickedPath: [],
insights: {},
cytoscape: null,
@@ -37,6 +25,7 @@ export default defineStore('useMapPathStore', {
mapGraphPathToInsight: {},
activeTrace: 0,
activeListIndex: 0,
lastClickedNode: null,
}),
actions: {
setCytoscape(cytoscape) {
@@ -165,10 +154,33 @@ export default defineStore('useMapPathStore', {
})
},
clearAllHighlight() {
this.cytoscape.edges().removeClass('highlight-edge');
this.cytoscape.nodes().forEach(nodeToReset => {
this.cytoscape?.edges().removeClass('highlight-edge');
this.cytoscape?.nodes().removeClass('highlight-node');
this.cytoscape?.nodes().forEach(nodeToReset => {
nodeToReset.data('nodeImageUrl', ImgCapsules[nodeToReset.data('level')])
})
},
onNodeClickHighlightEdges(clickedNode) {
this.clearAllHighlight();
clickedNode.addClass('highlight-node');
clickedNode.data('nodeImageUrl', ImgCapsulesGlow[clickedNode.data('level')]);
clickedNode.outgoers('edge').forEach(edgeToHighlight => edgeToHighlight.addClass('highlight-edge'));
clickedNode.incomers('edge').forEach(edgeToHighlight => edgeToHighlight.addClass('highlight-edge'));
this.lastClickedNode = clickedNode;
},
onEdgeClickHighlightNodes(clickedEdge) {
this.clearAllHighlight();
const sourceNode = clickedEdge.source();
const targetNode = clickedEdge.target();
sourceNode.addClass('highlight-node');
targetNode.addClass('highlight-node');
sourceNode.data('nodeImageUrl', ImgCapsulesGlow[sourceNode.data('level')]);
targetNode.data('nodeImageUrl', ImgCapsulesGlow[targetNode.data('level')]);
clickedEdge.addClass('highlight-edge');
},
},
});