force-directed layout

package-lock.json

@@ -14,8 +14,9 @@
         "chartjs-adapter-date-fns": "^3.0.0",
         "chartjs-plugin-datalabels": "^2.2.0",
         "chartjs-plugin-dragdata": "^1.1.3",
-        "cytoscape": "^3.30.0",
+        "cytoscape": "^3.30.2",
         "cytoscape-dagre": "^2.5.0",
+        "cytoscape-fcose": "^2.2.0",
         "cytoscape-popper": "^2.0.0",
         "cytoscape-spread": "^3.0.0",
         "date-fns": "^2.30.0",
@@ -2163,6 +2164,14 @@
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
       "dev": true
     },
+    "node_modules/cose-base": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
+      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+      "dependencies": {
+        "layout-base": "^2.0.0"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -2324,9 +2333,9 @@
       "dev": true
     },
     "node_modules/cytoscape": {
-      "version": "3.30.0",
+      "version": "3.30.2",
-      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.0.tgz",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz",
-      "integrity": "sha512-l590mjTHT6/Cbxp13dGPC2Y7VXdgc+rUeF8AnF/JPzhjNevbDJfObnJgaSjlldOgBQZbue+X6IUZ7r5GAgvauQ==",
+      "integrity": "sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw==",
       "engines": {
         "node": ">=0.10"
       }
@@ -2342,6 +2351,17 @@
         "cytoscape": "^3.2.22"
       }
     },
+    "node_modules/cytoscape-fcose": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
+      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
+      "dependencies": {
+        "cose-base": "^2.2.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
     "node_modules/cytoscape-popper": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/cytoscape-popper/-/cytoscape-popper-2.0.0.tgz",
@@ -4363,6 +4383,11 @@
         "verror": "1.10.0"
       }
     },
+    "node_modules/layout-base": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
+      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="
+    },
     "node_modules/lazy-ass": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
@@ -15793,6 +15818,14 @@
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
       "dev": true
     },
+    "cose-base": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
+      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+      "requires": {
+        "layout-base": "^2.0.0"
+      }
+    },
     "create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -15929,9 +15962,9 @@
       "dev": true
     },
     "cytoscape": {
-      "version": "3.30.0",
+      "version": "3.30.2",
-      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.0.tgz",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz",
-      "integrity": "sha512-l590mjTHT6/Cbxp13dGPC2Y7VXdgc+rUeF8AnF/JPzhjNevbDJfObnJgaSjlldOgBQZbue+X6IUZ7r5GAgvauQ=="
+      "integrity": "sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw=="
     },
     "cytoscape-dagre": {
       "version": "2.5.0",
@@ -15941,6 +15974,14 @@
         "dagre": "^0.8.5"
       }
     },
+    "cytoscape-fcose": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
+      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
+      "requires": {
+        "cose-base": "^2.2.0"
+      }
+    },
     "cytoscape-popper": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/cytoscape-popper/-/cytoscape-popper-2.0.0.tgz",
@@ -17440,6 +17481,11 @@
         "verror": "1.10.0"
       }
     },
+    "layout-base": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
+      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="
+    },
     "lazy-ass": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",

package.json

@@ -21,8 +21,9 @@
     "chartjs-adapter-date-fns": "^3.0.0",
     "chartjs-plugin-datalabels": "^2.2.0",
     "chartjs-plugin-dragdata": "^1.1.3",
-    "cytoscape": "^3.30.0",
+    "cytoscape": "^3.30.2",
     "cytoscape-dagre": "^2.5.0",
+    "cytoscape-fcose": "^2.2.0",
     "cytoscape-popper": "^2.0.0",
     "cytoscape-spread": "^3.0.0",
     "date-fns": "^2.30.0",

src/module/cytoscapeMap.js

@@ -1,6 +1,7 @@
 import cytoscape from 'cytoscape';
 import spread from 'cytoscape-spread';
 import dagre from 'cytoscape-dagre';
+import fcose from 'cytoscape-fcose';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import MapPathStore from '@/stores/mapPathStore';
@@ -22,6 +23,7 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sona
 // 註冊布局演算法
 cytoscape.use(dagre);
 cytoscape.use(spread);
+cytoscape.use(fcose);
 
 /**
  * @param {object}  mapData processMapData | bpmnData，可選以上任一。
@@ -169,13 +171,19 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'text-margin-x': function(node) {
             return node.data('type') === 'activity' ? -5 : 0;
           },
+          'text-margin-y': function(node) {
+            return node.data('type') === 'activity' ? 0 : 0;
+          },
+          'padding':  function(node) {
+            return node.data('type') === 'activity' ? 0 : 0;
+          },          
           // 'text-justification': 'left',
           'text-halign': 'center',
           'text-valign': 'center',
           'height': 'data(height)',
           'width': 'data(width)',
           'color': 'data(textColor)',
-          'line-height': '0.7rem',
+          'line-height': '1',
           'font-size':
           function(node) {
             return node.data('type') === 'activity' ? 16 : 14;
@@ -226,7 +234,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           //'control-point-step-size':100, // 從點到點的垂直線，指定貝茲取線邊緣間的距離
           'width':'data(lineWidth)',
           'line-style':'data(style)',
-          "text-margin-y": "15rem",
+          "text-margin-y": "0.9rem",
           //"text-rotation": "autorotate",
         }
       },{
@@ -252,7 +260,22 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
   // 讓節點不要左右重疊的演算法
   cy.layout({
     name: 'spread',
-    minDist: 40, // 設置最小節點間距
+    minDist: 60, // 設置最小節點間距
+  }).run();
+
+  cy.layout({
+    name: 'fcose',
+    randomize: false,
+    padding: 60,
+    // nodeRepulsion: 100000,
+    idealEdgeLength: 300,
+    // edgeElasticity: 0.7,
+    // gravity: 5,
+    nestingFactor: 5,
+    gravityCompound: 20,
+    // gravityRangeCompound: 30,
+    // nodeDimensionsIncludeLabels: true,
+    fit: true,
   }).run();
 
   // 按下線條，線條及線條上數字有光暈效果

src/views/Discover/Map/Map.vue

@@ -350,7 +350,7 @@ export default {
                   type:node.type,
                   label:node.label,
                   height: 60,
-                  width: 242,
+                  width: 226,
                   textColor: '#0F172A',
                   backgroundColor:'rgba(0, 0, 0, 0)',
                   borderradius: 999,

yarn.lock

@@ -1656,6 +1656,13 @@ core-util-is@1.0.2:
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
   integrity sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==
 
+cose-base@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz"
+  integrity sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==
+  dependencies:
+    layout-base "^2.0.0"
+
 create-error-class@^3.0.0:
   version "3.0.2"
   dependencies:
@@ -1812,6 +1819,13 @@ cytoscape-dagre@^2.5.0:
   dependencies:
     dagre "^0.8.5"
 
+cytoscape-fcose@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz"
+  integrity sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==
+  dependencies:
+    cose-base "^2.2.0"
+
 cytoscape-popper@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/cytoscape-popper/-/cytoscape-popper-2.0.0.tgz"
@@ -1826,10 +1840,10 @@ cytoscape-spread@^3.0.0:
   dependencies:
     weaverjs "^1.2.0"
 
-cytoscape@^3.0.0, cytoscape@^3.2.0, cytoscape@^3.2.22, cytoscape@^3.30.0:
+cytoscape@^3.0.0, cytoscape@^3.2.0, cytoscape@^3.2.22, cytoscape@^3.30.2:
-  version "3.30.0"
+  version "3.30.2"
-  resolved "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.0.tgz"
+  resolved "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz"
-  integrity sha512-l590mjTHT6/Cbxp13dGPC2Y7VXdgc+rUeF8AnF/JPzhjNevbDJfObnJgaSjlldOgBQZbue+X6IUZ7r5GAgvauQ==
+  integrity sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw==
 
 d3-dispatch@1:
   version "1.0.6"
@@ -3657,6 +3671,11 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
+layout-base@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz"
+  integrity sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==
+
 lazy-ass@^1.6.0, lazy-ass@1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz"