Map. dagre and spread algorithm

src/module/cytoscapeMap.js

@@ -1,4 +1,5 @@
 import cytoscape from 'cytoscape';
+import spread from 'cytoscape-spread';
 import dagre from 'cytoscape-dagre';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
@@ -16,7 +17,9 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sona
   return text;
 };
 
+// 註冊布局演算法
 cytoscape.use( dagre );
+cytoscape.use(spread);
 
 /**
  * @param {object}  mapData processMapData | bpmnData，可選以上任一。
@@ -55,7 +58,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
 
   // 產生 node 色階
   gradientArray = new Gradient()
-    .setColorGradient("#CCE5FF", "#66b2ff")
+    .setColorGradient("#FFFFFF", "#FFFFFF")
     .setMidpoint(nodeOption.length)
     .getColors();
 
@@ -154,7 +157,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           function(node) {
             return node.data('type') === 'activity' ? '1' : '2';
           },
-          //'border-radius': '5',
+          'background-image': 'url(capsule.svg)',
           'shape':'data(shape)',
           'text-wrap': 'wrap',
           'text-max-width': 'data(width)', // 在 div 內換行
@@ -220,6 +223,12 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     ],
   });
 
+  // 讓節點不要左右重疊的演算法
+  cy.layout({
+    name: 'spread',
+    minDist: 40, // 設置最小節點間距
+  }).run();
+
   // creat tippy.js
   let tip;
   cy.on('mouseover', 'node', function(event) {

src/views/Discover/Map/Map.vue

@@ -340,10 +340,11 @@ export default {
                 id:node.id,
                 type:node.type,
                 label:node.label,
-                height:80,
-                width:100,
-                backgroundColor:'#FFCCCC',
-                bordercolor:'#003366',
+                height: 48,
+                width: 216,
+                backgroundColor:'#FFFFFF',
+                bordercolor:'#64748B',
+                radius: '999px',
                 shape:"round-rectangle",
                 freq:node.freq,
                 duration:node.duration,