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

Map. dagre and spread algorithm

Browse Source
This commit is contained in:
Cindy Chang
2024-08-15 10:54:04 +08:00
parent ffe97ed63f
commit fb335f996d
5 changed files with 63 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
package-lock.json generated
View File

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

1
package.json
View File

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

13
src/module/cytoscapeMap.js
View File

@@ -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) {

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

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

14
yarn.lock
View File

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