From 305771ce5aa7f44d8a7ae82f815687597c553de4 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Thu, 15 Aug 2024 14:26:08 +0800
Subject: [PATCH] WIP: level capsule. However, one capsule is failed

---
 src/views/Discover/Map/Map.vue | 35 ++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue
index 7a2bb14..3ef3f5d 100644
--- a/src/views/Discover/Map/Map.vue
+++ b/src/views/Discover/Map/Map.vue
@@ -72,6 +72,8 @@ import ImgCapsule2 from '@/assets/capsule2.svg';
 import ImgCapsule3 from '@/assets/capsule3.svg';
 import ImgCapsule4 from '@/assets/capsule4.svg';
 
+const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
+
 export default {
   setup() {
     const loadingStore = LoadingStore();
@@ -351,7 +353,6 @@ export default {
                   shape:"round-rectangle",
                   freq:node.freq,
                   duration:node.duration,
-                  nodeImageUrl: ImgCapsule1,
                   backgroundOpacity: 0,
                   borderOpacity: 0,
                 }
@@ -399,12 +400,42 @@ export default {
       let graphId = document.getElementById('cy');
       let mapData = type === 'processMap'? this.processMapData: this.bpmnData;
 
-      if(this[type].vertices.length !== 0){
+      if(this[type].vertices.length !== 0){        
         this.setNodesData(mapData);
         this.setEdgesData(mapData);
+        this.setActivityBgImage(mapData);       
         this.cytoscapeGraph = cytoscapeMap(mapData, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
       };
     },
+    setActivityBgImage(mapData) {
+      const nodes = mapData.nodes;
+      const groupSize = Math.floor(nodes.length / ImgCapsules.length);
+      let nodeOptionArr = [];
+      const leveledGroups = []; // 每一個level會使用不同的膠囊圖片
+      // 設定除了 start, end 的 node 顏色
+      // 找出 type activity's node
+      const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
+      // 找出除了 start, end 以外所有的 node 的 option value
+      activityNodeArray.map(node => nodeOptionArr.push(node.data[this.dataLayerType][this.dataLayerOption]));
+      // 刪掉重複的元素，將node的option值從小到大排序(映對色階淺到深)
+      nodeOptionArr = [...new Set(nodeOptionArr)].sort((a, b) => a - b);
+
+      for(let i = 0; i < ImgCapsules.length; i++) {
+        const startIdx = i * groupSize;
+        const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
+        leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
+      }
+      for(let level = 0; level < leveledGroups.length; level++) {
+        leveledGroups[level].map(option => {
+          const curNode = activityNodeArray.find(activityNode => activityNode.data[this.dataLayerType][this.dataLayerOption] === option);
+          curNode.data = {
+            ...curNode.data,
+            nodeImageUrl: ImgCapsules[level],
+          }
+        })
+      }
+      
+    },
   },
   async created() {
     const routeParams = this.$route.params;