imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

force-directed layout

Browse Source
This commit is contained in:
Cindy Chang
2024-08-23 11:19:46 +08:00
parent ab15087c2d
commit b5d5b1456d
5 changed files with 105 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
package-lock.json generated
View File

@@ -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",
"resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.0.tgz",
"integrity": "sha512-l590mjTHT6/Cbxp13dGPC2Y7VXdgc+rUeF8AnF/JPzhjNevbDJfObnJgaSjlldOgBQZbue+X6IUZ7r5GAgvauQ==",
"version": "3.30.2",
"resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz",
"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",
"resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.0.tgz",
"integrity": "sha512-l590mjTHT6/Cbxp13dGPC2Y7VXdgc+rUeF8AnF/JPzhjNevbDJfObnJgaSjlldOgBQZbue+X6IUZ7r5GAgvauQ=="
"version": "3.30.2",
"resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz",
"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",

3
package.json
View File

@@ -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",

29
src/module/cytoscapeMap.js
View File

@@ -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();
// 按下線條，線條及線條上數字有光暈效果

2
src/views/Discover/Map/Map.vue
View File

@@ -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,

27
yarn.lock
View File

@@ -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:
version "3.30.0"
resolved "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.0.tgz"
integrity sha512-l590mjTHT6/Cbxp13dGPC2Y7VXdgc+rUeF8AnF/JPzhjNevbDJfObnJgaSjlldOgBQZbue+X6IUZ7r5GAgvauQ==
cytoscape@^3.0.0, cytoscape@^3.2.0, cytoscape@^3.2.22, cytoscape@^3.30.2:
version "3.30.2"
resolved "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz"
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"