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) { function(node) {
return node.data('type') === 'activity' ? '1' : '2'; 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)', 'shape':'data(shape)',
'text-wrap': 'wrap', 'text-wrap': 'wrap',
'text-max-width': 'data(width)', // 在 div 內換行 'text-max-width': 'data(width)', // 在 div 內換行

36
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 SidebarState from '@/components/Discover/Map/SidebarState.vue';
import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue'; import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
import SidebarFilter from '@/components/Discover/Map/SidebarFilter.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 { export default {
setup() { setup() {
@@ -335,21 +339,23 @@ export default {
break; break;
// add type of 'activity' node // add type of 'activity' node
default: default:
mapData.nodes.push({ mapData.nodes.push({
data:{ data:{
id:node.id, id:node.id,
type:node.type, type:node.type,
label:node.label, label:node.label,
height: 48, height: 48,
width: 216, width: 216,
backgroundColor:'#FFFFFF', backgroundColor:'rgba(0, 0, 0, 0)',
bordercolor:'#64748B', borderradius: 999,
radius: '999px', shape:"round-rectangle",
shape:"round-rectangle", freq:node.freq,
freq:node.freq, duration:node.duration,
duration:node.duration, nodeImageUrl: ImgCapsule1,
} backgroundOpacity: 0,
}) borderOpacity: 0,
}
})
break; break;
} }
}); });