diff --git a/src/assets/capsule.svg b/src/assets/capsule.svg
new file mode 100644
index 0000000..b3ffaf2
--- /dev/null
+++ b/src/assets/capsule.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/assets/capsule1.svg b/src/assets/capsule1.svg
new file mode 100644
index 0000000..1ad628d
--- /dev/null
+++ b/src/assets/capsule1.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/capsule2.svg b/src/assets/capsule2.svg
new file mode 100644
index 0000000..a6eab35
--- /dev/null
+++ b/src/assets/capsule2.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/assets/capsule3.svg b/src/assets/capsule3.svg
new file mode 100644
index 0000000..08ab252
--- /dev/null
+++ b/src/assets/capsule3.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/assets/capsule4.svg b/src/assets/capsule4.svg
new file mode 100644
index 0000000..c157e01
--- /dev/null
+++ b/src/assets/capsule4.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js
index a03adcd..a3f93b9 100644
--- a/src/module/cytoscapeMap.js
+++ b/src/module/cytoscapeMap.js
@@ -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 內換行
diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue
index 3a2c723..7a2bb14 100644
--- a/src/views/Discover/Map/Map.vue
+++ b/src/views/Discover/Map/Map.vue
@@ -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() {
@@ -335,21 +339,23 @@ export default {
break;
// add type of 'activity' node
default:
- mapData.nodes.push({
- data:{
- id:node.id,
- type:node.type,
- label:node.label,
- height: 48,
- width: 216,
- backgroundColor:'#FFFFFF',
- bordercolor:'#64748B',
- radius: '999px',
- shape:"round-rectangle",
- freq:node.freq,
- duration:node.duration,
- }
- })
+ mapData.nodes.push({
+ data:{
+ id:node.id,
+ type:node.type,
+ label:node.label,
+ height: 48,
+ width: 216,
+ backgroundColor:'rgba(0, 0, 0, 0)',
+ borderradius: 999,
+ shape:"round-rectangle",
+ freq:node.freq,
+ duration:node.duration,
+ nodeImageUrl: ImgCapsule1,
+ backgroundOpacity: 0,
+ borderOpacity: 0,
+ }
+ })
break;
}
});