From c3c2861a8fccfc693b238435a0a4c7c76d29fe7d Mon Sep 17 00:00:00 2001 From: Cindy Chang Date: Wed, 21 Aug 2024 14:45:59 +0800 Subject: [PATCH] highlight node and edge --- src/assets/capsule1-glow.svg | 20 ++++++++++++++++++++ src/assets/capsule2-glow.svg | 21 +++++++++++++++++++++ src/assets/capsule3-glow.svg | 22 ++++++++++++++++++++++ src/assets/capsule4-glow.svg | 22 ++++++++++++++++++++++ src/stores/mapPathStore.ts | 19 ++++++++++++++++++- src/views/Discover/Map/Map.vue | 2 ++ 6 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 src/assets/capsule1-glow.svg create mode 100644 src/assets/capsule2-glow.svg create mode 100644 src/assets/capsule3-glow.svg create mode 100644 src/assets/capsule4-glow.svg diff --git a/src/assets/capsule1-glow.svg b/src/assets/capsule1-glow.svg new file mode 100644 index 0000000..cca4da3 --- /dev/null +++ b/src/assets/capsule1-glow.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/capsule2-glow.svg b/src/assets/capsule2-glow.svg new file mode 100644 index 0000000..7eac7b2 --- /dev/null +++ b/src/assets/capsule2-glow.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/capsule3-glow.svg b/src/assets/capsule3-glow.svg new file mode 100644 index 0000000..9c25642 --- /dev/null +++ b/src/assets/capsule3-glow.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/capsule4-glow.svg b/src/assets/capsule4-glow.svg new file mode 100644 index 0000000..42837e1 --- /dev/null +++ b/src/assets/capsule4-glow.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts index 4860962..660379e 100644 --- a/src/stores/mapPathStore.ts +++ b/src/stores/mapPathStore.ts @@ -2,6 +2,17 @@ import { defineStore } from 'pinia'; import AllMapData from '@/stores/allMapData.js'; import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants'; import cytoscape, { EdgeSingular, NodeSingular } from 'cytoscape'; +import ImgCapsuleGlow1 from '@/assets/capsule1-glow.svg'; +import ImgCapsuleGlow2 from '@/assets/capsule2-glow.svg'; +import ImgCapsuleGlow3 from '@/assets/capsule3-glow.svg'; +import ImgCapsuleGlow4 from '@/assets/capsule4-glow.svg'; +import ImgCapsule1 from '@/assets/capsule1.svg'; +import ImgCapsule2 from '@/assets/capsule2.svg'; +import ImgCapsule3 from '@/assets/capsule3.svg'; +import ImgCapsule4 from '@/assets/capsule4.svg'; + +const ImgCapsulesGlow = [ImgCapsuleGlow1, ImgCapsuleGlow2, ImgCapsuleGlow3, ImgCapsuleGlow4]; +const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4]; interface MapPathStoreState { clickedPath: string[]; @@ -105,7 +116,6 @@ export default defineStore('useMapPathStore', { } // end third for } // end second for } // end first for - console.log('this.mapGraphPathToInsight[0][0]', this.mapGraphPathToInsight[0][0]); }, depthFirstSearchMatchTwoPaths(curPath, curPathIndex, curButton, listIndex, nodeIndex){ if(listIndex >= curButton.length) { // 邊界條件檢查，防止超出範圍 @@ -149,9 +159,16 @@ export default defineStore('useMapPathStore', { .forEach(pathToHighlight => { pathToHighlight.addClass('highlight-edge'); }); + this.mapGraphPathToInsight[clickedActiveTraceIndex][clickedPathListIndex].pathByNode + .forEach(nodeToHighlight => { + nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]); + }) }, clearAllHighlight() { this.cytoscape.edges().removeClass('highlight-edge'); + this.cytoscape.nodes().forEach(nodeToReset => { + nodeToReset.data('nodeImageUrl', ImgCapsules[nodeToReset.data('level')]) + }) }, }, }); \ No newline at end of file diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue index 8b51a04..6e0438e 100644 --- a/src/views/Discover/Map/Map.vue +++ b/src/views/Discover/Map/Map.vue @@ -411,6 +411,7 @@ export default { }, setActivityBgImage(mapData) { const nodes = mapData.nodes; + // 一組有多少個activities const groupSize = Math.floor(nodes.length / ImgCapsules.length); let nodeOptionArr = []; const leveledGroups = []; // 每一個level會使用不同的膠囊圖片 @@ -434,6 +435,7 @@ export default { curNode.data = { ...curNode.data, nodeImageUrl: ImgCapsules[level], + level, }; }); });