106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
import cytoscape from 'cytoscape';
|
|
import dagre from 'cytoscape-dagre';
|
|
import tippy from 'tippy.js';
|
|
import 'tippy.js/dist/tippy.css';
|
|
|
|
cytoscape.use( dagre );
|
|
|
|
/**
|
|
* draw processmap for trace
|
|
* @param {array} nodes array of an object, it contains
|
|
* data:{
|
|
* backgroundColor: string
|
|
* bordercolor: string
|
|
* height: number
|
|
* id: number
|
|
* label: string
|
|
* shape: string
|
|
* width: number
|
|
* }
|
|
* @param {array} edges it's similar to nodes
|
|
* @param {string} graphId graph Id
|
|
*/
|
|
export default function cytoscapeMapTrace(nodes, edges, graphId) {
|
|
// create Cytoscape
|
|
let cy = cytoscape({
|
|
container: graphId,
|
|
elements: {
|
|
nodes: nodes, // 節點的資料
|
|
edges: edges, // 關係線的資料
|
|
},
|
|
layout: {
|
|
name: 'dagre',
|
|
rankDir: 'LR' // 直向 TB | 橫向 LR, 'cytoscape-dagre' 套件裡的變數
|
|
},
|
|
style: [
|
|
// node 節點的樣式
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'label':
|
|
function(node) { // 節點要顯示的文字
|
|
let text = '';
|
|
|
|
// node.data('label') 為原先陣列 node.data.label
|
|
text = node.data('label').length > 18 ? `${node.data('label').substr(0,15)}...` : `${node.data('label')}`;
|
|
|
|
return text
|
|
},
|
|
'text-opacity': 0.7,
|
|
'background-color': 'data(backgroundColor)',
|
|
'border-color': 'data(bordercolor)',
|
|
'border-width': '1',
|
|
'shape': 'data(shape)',
|
|
'text-wrap': 'wrap',
|
|
'text-max-width': 75,
|
|
'text-halign': 'center',
|
|
'text-valign': 'center',
|
|
'height': 'data(height)',
|
|
'width': 'data(width)',
|
|
'color': '#001933',
|
|
'font-size': 14,
|
|
}
|
|
},
|
|
// edge 關係線的樣式
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'curve-style': 'taxi', // unbundled-bezier | taxi
|
|
'target-arrow-shape': 'triangle', // 指向目標的箭頭形狀: 三角形
|
|
'color': 'gray', //#0066cc
|
|
'width': 'data(lineWidth)',
|
|
'line-style': 'data(style)',
|
|
}
|
|
},
|
|
// 點擊 node 後改變的樣式
|
|
{
|
|
selector: 'node:selected',
|
|
style:{
|
|
'border-color': 'red',
|
|
'border-width': '3',
|
|
}
|
|
},
|
|
],
|
|
});
|
|
|
|
// creat tippy.js
|
|
let tip;
|
|
cy.on('mouseover', 'node', function(event) {
|
|
var node = event.target
|
|
let ref = node.popperRef()
|
|
let dummyDomEle = document.createElement('div');
|
|
let content = document.createElement('div');
|
|
content.innerHTML = node.data("label")
|
|
tip = new tippy(dummyDomEle, { // tippy props:
|
|
getReferenceClientRect: ref.getBoundingClientRect,
|
|
trigger: 'manual',
|
|
content:content
|
|
});
|
|
tip.show();
|
|
// if(node.data("label").length > 18) tip.show();
|
|
})
|
|
cy.on('mouseout', 'node', function(event) {
|
|
tip.hide();
|
|
});
|
|
}
|