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

WIP: map with transparent default bg

Browse Source
This commit is contained in:
Cindy Chang
2024-08-15 13:46:33 +08:00
parent fb335f996d
commit 9a7442b4ef
7 changed files with 63 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/capsule.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

6
src/assets/capsule1.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="216" height="48" viewBox="0 0 216 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" fill="white"/>
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" stroke="#64748B"/>
<rect x="4" y="4" width="40" height="40" rx="20" fill="white"/>
<rect x="19" y="19" width="10" height="10" rx="5" fill="#BFE5FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 382 B

7
src/assets/capsule2.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="216" height="48" viewBox="0 0 216 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" fill="white"/>
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" stroke="#64748B"/>
<rect x="4" y="4" width="40" height="40" rx="20" fill="white"/>
<rect x="14" y="14" width="20" height="20" rx="10" fill="#BFE5FF"/>
<rect x="19" y="19" width="10" height="10" rx="5" fill="#80CCFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 450 B

8
src/assets/capsule3.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="216" height="48" viewBox="0 0 216 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" fill="white"/>
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" stroke="#64748B"/>
<rect x="4" y="4" width="40" height="40" rx="20" fill="white"/>
<rect x="9" y="9" width="30" height="30" rx="15" fill="#BFE5FF"/>
<rect x="14" y="14" width="20" height="20" rx="10" fill="#80CCFF"/>
<rect x="19" y="19" width="10" height="10" rx="5" fill="#0099FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

8
src/assets/capsule4.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="216" height="48" viewBox="0 0 216 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" fill="white"/>
<rect x="0.5" y="0.5" width="215" height="47" rx="23.5" stroke="#64748B"/>
<rect x="4" y="4" width="40" height="40" rx="20" fill="#BFE5FF"/>
<rect x="9" y="9" width="30" height="30" rx="15" fill="#80CCFF"/>
<rect x="14" y="14" width="20" height="20" rx="10" fill="#0099FF"/>
<rect x="19" y="19" width="10" height="10" rx="5" fill="#0073BF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 518 B

4
src/module/cytoscapeMap.js
View File

@@ -157,7 +157,9 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
function(node) {
return node.data('type') === 'activity' ? '1' : '2';
},
'background-image': 'url(capsule.svg)',
'background-image': 'data(nodeImageUrl)',
'background-opacity': 'data(backgroundOpacity)', // 透明背景
'border-opacity': 'data(borderOpacity)', // 透明邊框
'shape':'data(shape)',
'text-wrap': 'wrap',
'text-max-width': 'data(width)', // 在 div 內換行

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

@@ -67,6 +67,10 @@ import SidebarView from '@/components/Discover/Map/SidebarView.vue';
import SidebarState from '@/components/Discover/Map/SidebarState.vue';
import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
import ImgCapsule1 from '@/assets/capsule1.svg';
import ImgCapsule2 from '@/assets/capsule2.svg';
import ImgCapsule3 from '@/assets/capsule3.svg';
import ImgCapsule4 from '@/assets/capsule4.svg';
export default {
setup() {
@@ -342,12 +346,14 @@ export default {
label:node.label,
height: 48,
width: 216,
backgroundColor:'#FFFFFF',
bordercolor:'#64748B',
radius: '999px',
backgroundColor:'rgba(0, 0, 0, 0)',
borderradius: 999,
shape:"round-rectangle",
freq:node.freq,
duration:node.duration,
nodeImageUrl: ImgCapsule1,
backgroundOpacity: 0,
borderOpacity: 0,
}
})
break;