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

highlight node and edge

Browse Source
This commit is contained in:
Cindy Chang
2024-08-21 14:45:59 +08:00
parent d56ea98780
commit c3c2861a8f
6 changed files with 105 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/assets/capsule1-glow.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg width="232" height="64" viewBox="0 0 232 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_7652_5408)">
<rect x="8" y="8" width="216" height="48" rx="24" fill="white" shape-rendering="crispEdges"/>
<rect x="8.5" y="8.5" width="215" height="47" rx="23.5" stroke="#0099FF" shape-rendering="crispEdges"/>
<rect x="12" y="12" width="40" height="40" rx="20" fill="white"/>
<rect x="27" y="27" width="10" height="10" rx="5" fill="#BFE5FF"/>
</g>
<defs>
<filter id="filter0_d_7652_5408" x="0" y="0" width="232" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7652_5408"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7652_5408" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

21
src/assets/capsule2-glow.svg Normal file
View File

@@ -0,0 +1,21 @@
<svg width="232" height="64" viewBox="0 0 232 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_7652_5399)">
<rect x="8" y="8" width="216" height="48" rx="24" fill="white"/>
<rect x="8.5" y="8.5" width="215" height="47" rx="23.5" stroke="#0099FF"/>
<rect x="12" y="12" width="40" height="40" rx="20" fill="white"/>
<rect x="22" y="22" width="20" height="20" rx="10" fill="#BFE5FF"/>
<rect x="27" y="27" width="10" height="10" rx="5" fill="#80CCFF"/>
</g>
<defs>
<filter id="filter0_d_7652_5399" x="0" y="0" width="232" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7652_5399"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7652_5399" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

22
src/assets/capsule3-glow.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="232" height="64" viewBox="0 0 232 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_7652_5381)">
<rect x="8" y="8" width="216" height="48" rx="24" fill="white"/>
<rect x="8.5" y="8.5" width="215" height="47" rx="23.5" stroke="#0099FF"/>
<rect x="12" y="12" width="40" height="40" rx="20" fill="white"/>
<rect x="17" y="17" width="30" height="30" rx="15" fill="#BFE5FF"/>
<rect x="22" y="22" width="20" height="20" rx="10" fill="#80CCFF"/>
<rect x="27" y="27" width="10" height="10" rx="5" fill="#0099FF"/>
</g>
<defs>
<filter id="filter0_d_7652_5381" x="0" y="0" width="232" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7652_5381"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7652_5381" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

22
src/assets/capsule4-glow.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="232" height="64" viewBox="0 0 232 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_7652_5390)">
<rect x="8" y="8" width="216" height="48" rx="24" fill="white"/>
<rect x="8.5" y="8.5" width="215" height="47" rx="23.5" stroke="#0099FF"/>
<rect x="12" y="12" width="40" height="40" rx="20" fill="#BFE5FF"/>
<rect x="17" y="17" width="30" height="30" rx="15" fill="#80CCFF"/>
<rect x="22" y="22" width="20" height="20" rx="10" fill="#0099FF"/>
<rect x="27" y="27" width="10" height="10" rx="5" fill="#0073BF"/>
</g>
<defs>
<filter id="filter0_d_7652_5390" x="0" y="0" width="232" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7652_5390"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7652_5390" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

19
src/stores/mapPathStore.ts
View File

@@ -2,6 +2,17 @@ import { defineStore } from 'pinia';
import AllMapData from '@/stores/allMapData.js'; import AllMapData from '@/stores/allMapData.js';
import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants'; import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
import cytoscape, { EdgeSingular, NodeSingular } from 'cytoscape'; 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 { interface MapPathStoreState {
clickedPath: string[]; clickedPath: string[];
@@ -105,7 +116,6 @@ export default defineStore('useMapPathStore', {
} // end third for } // end third for
} // end second for } // end second for
} // end first for } // end first for
console.log('this.mapGraphPathToInsight[0][0]', this.mapGraphPathToInsight[0][0]);
}, },
depthFirstSearchMatchTwoPaths(curPath, curPathIndex, curButton, listIndex, nodeIndex){ depthFirstSearchMatchTwoPaths(curPath, curPathIndex, curButton, listIndex, nodeIndex){
if(listIndex >= curButton.length) { // 邊界條件檢查，防止超出範圍 if(listIndex >= curButton.length) { // 邊界條件檢查，防止超出範圍
@@ -149,9 +159,16 @@ export default defineStore('useMapPathStore', {
.forEach(pathToHighlight => { .forEach(pathToHighlight => {
pathToHighlight.addClass('highlight-edge'); pathToHighlight.addClass('highlight-edge');
}); });
this.mapGraphPathToInsight[clickedActiveTraceIndex][clickedPathListIndex].pathByNode
.forEach(nodeToHighlight => {
nodeToHighlight.data('nodeImageUrl', ImgCapsulesGlow[nodeToHighlight.data('level')]);
})
}, },
clearAllHighlight() { clearAllHighlight() {
this.cytoscape.edges().removeClass('highlight-edge'); this.cytoscape.edges().removeClass('highlight-edge');
this.cytoscape.nodes().forEach(nodeToReset => {
nodeToReset.data('nodeImageUrl', ImgCapsules[nodeToReset.data('level')])
})
}, },
}, },
}); });

2
src/views/Discover/Map/Map.vue
View File

@@ -411,6 +411,7 @@ export default {
}, },
setActivityBgImage(mapData) { setActivityBgImage(mapData) {
const nodes = mapData.nodes; const nodes = mapData.nodes;
// 一組有多少個activities
const groupSize = Math.floor(nodes.length / ImgCapsules.length); const groupSize = Math.floor(nodes.length / ImgCapsules.length);
let nodeOptionArr = []; let nodeOptionArr = [];
const leveledGroups = []; // 每一個level會使用不同的膠囊圖片 const leveledGroups = []; // 每一個level會使用不同的膠囊圖片
@@ -434,6 +435,7 @@ export default {
curNode.data = { curNode.data = {
...curNode.data, ...curNode.data,
nodeImageUrl: ImgCapsules[level], nodeImageUrl: ImgCapsules[level],
level,
}; };
}); });
}); });