Map. dagre and spread algorithm

package-lock.json

@@ -17,6 +17,7 @@
         "cytoscape": "^3.30.0",
         "cytoscape-dagre": "^2.5.0",
         "cytoscape-popper": "^2.0.0",
+        "cytoscape-spread": "^3.0.0",
         "date-fns": "^2.30.0",
         "decimal.js": "^10.4.3",
         "i18next": "^23.11.5",
@@ -2352,6 +2353,17 @@
         "cytoscape": "^3.2.0"
       }
     },
+    "node_modules/cytoscape-spread": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-spread/-/cytoscape-spread-3.0.0.tgz",
+      "integrity": "sha512-ekuo4ByFRTZ4TOJylE2bPOMcVVyi8rD+qjvEjMWS2BHcyan40pmhlA4ramz/nTxZR+EtlxEa1asnmfiN8R5HyQ==",
+      "dependencies": {
+        "weaverjs": "^1.2.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.0.0"
+      }
+    },
     "node_modules/d3-dispatch": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
@@ -13950,6 +13962,14 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/weaverjs": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/weaverjs/-/weaverjs-1.2.0.tgz",
+      "integrity": "sha512-X+nDGl5mrc8ysArmafu6dD3GNFP2r+NdV6L/PiWac8TpH4BVODO/HMaPLhrXmOZhdI3XM0LVxW5ZrAbwKqkkmw==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -15929,6 +15949,14 @@
         "@popperjs/core": "^2.0.0"
       }
     },
+    "cytoscape-spread": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-spread/-/cytoscape-spread-3.0.0.tgz",
+      "integrity": "sha512-ekuo4ByFRTZ4TOJylE2bPOMcVVyi8rD+qjvEjMWS2BHcyan40pmhlA4ramz/nTxZR+EtlxEa1asnmfiN8R5HyQ==",
+      "requires": {
+        "weaverjs": "^1.2.0"
+      }
+    },
     "d3-dispatch": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
@@ -24287,6 +24315,11 @@
         "graceful-fs": "^4.1.2"
       }
     },
+    "weaverjs": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/weaverjs/-/weaverjs-1.2.0.tgz",
+      "integrity": "sha512-X+nDGl5mrc8ysArmafu6dD3GNFP2r+NdV6L/PiWac8TpH4BVODO/HMaPLhrXmOZhdI3XM0LVxW5ZrAbwKqkkmw=="
+    },
     "webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "cytoscape": "^3.30.0",
     "cytoscape-dagre": "^2.5.0",
     "cytoscape-popper": "^2.0.0",
+    "cytoscape-spread": "^3.0.0",
     "date-fns": "^2.30.0",
     "decimal.js": "^10.4.3",
     "i18next": "^23.11.5",

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,
+                height: 48,
-                width:100,
+                width: 216,
-                backgroundColor:'#FFCCCC',
+                backgroundColor:'#FFFFFF',
-                bordercolor:'#003366',
+                bordercolor:'#64748B',
+                radius: '999px',
                 shape:"round-rectangle",
                 freq:node.freq,
                 duration:node.duration,

yarn.lock

@@ -1819,7 +1819,14 @@ cytoscape-popper@^2.0.0:
   dependencies:
     "@popperjs/core" "^2.0.0"
 
-cytoscape@^3.2.0, cytoscape@^3.2.22, cytoscape@^3.30.0:
+cytoscape-spread@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/cytoscape-spread/-/cytoscape-spread-3.0.0.tgz"
+  integrity sha512-ekuo4ByFRTZ4TOJylE2bPOMcVVyi8rD+qjvEjMWS2BHcyan40pmhlA4ramz/nTxZR+EtlxEa1asnmfiN8R5HyQ==
+  dependencies:
+    weaverjs "^1.2.0"
+
+cytoscape@^3.0.0, cytoscape@^3.2.0, cytoscape@^3.2.22, cytoscape@^3.30.0:
   version "3.30.0"
   resolved "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.0.tgz"
   integrity sha512-l590mjTHT6/Cbxp13dGPC2Y7VXdgc+rUeF8AnF/JPzhjNevbDJfObnJgaSjlldOgBQZbue+X6IUZ7r5GAgvauQ==
@@ -6565,6 +6572,11 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
+weaverjs@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/weaverjs/-/weaverjs-1.2.0.tgz"
+  integrity sha512-X+nDGl5mrc8ysArmafu6dD3GNFP2r+NdV6L/PiWac8TpH4BVODO/HMaPLhrXmOZhdI3XM0LVxW5ZrAbwKqkkmw==
+
 webidl-conversions@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz"