Vue uses GraphVis to develop an infinitely expanded relationship graph
|
1. Go to the GraphVis official website to download the corresponding js. The new version and the old version of js are different. It depends on your needs to introduce the old version or the new version (GraphVis official website: http://www.graphvis.cn/)
2. Introduce js files into the required vue files
import VisGraph from '@/assets/js/GraphVis/old/visgraph.min.js' // Your own corresponding js file locationimport LayoutFactory from '@/assets/js/GraphVis/old/visgraph-layout.min.js' // Your own corresponding js file locationexport default { components: { VisGraph, LayoutFactory } }3. Load canvas and configuration Configuration (modify the configuration according to your needs):
config: {
// Node configuration node: {
label: { // Label configuration show: true, // Whether to display color: '250,250,250', // Font color font: 'normal 14px Microsoft YaHei', // Font size and type textPosition: 'Middle_Center', // Font position wrapText: true // Node wrap text (this property is only valid when the font position is Middle_Center when it is true)
},
shape: 'circle', // node shape circle,rect,square,ellipse,triangle,star,polygon,text
// width: 60, // node width (only valid when shape is rect)
// height: 60, // Node height (valid only when shape is rect)
color: '62,160,250', // Node colorborderColor: '62,160,250', // Node border colorborderWidth: 0, // Node border widthborderRadius: 0, // Node rounded cornerslineDash: [0], // Node border line type[0] indicates a solid line[5,8] indicates a dotted lineborderWidth > 0Validalpha: 1, // Node transparencysize: 60, // Node sizeselected: { // Node selected styleborderColor: '136,198,255', // Border color when selectedborderAlpha: 1, // Border transparency when selectedborderWidth: 3, // Border width when selectedshowShadow: true, // Whether to show shadowshadowColor: '136,198,255' // Shadow color when selected}
},
// Line configuration link: {
label: { // Label configuration show: true, // Whether to display color: '100,100,200', // Label color font: 'normal 10px Arial' // Label text size and type},
lineType: 'direct', // line type direct,curver,vlink,hlink,bezier,vbezier,hbezier
colorType: 'defined', // Line color typesource: inherits source color, target: inherits target colorboth: use bilateral color, defined: custom color: '200,200,200', // Line coloralpha: 1, // Line transparencylineWidth: 1, // Line widthlineDash: [0], // Dashed line spacing style such as: [5,8]
showArrow: true, // Show arrow selected: { // Style setting when selected color: '20,250,50', // Color when selected alpha: 1, // Transparency when selected lineWidth: 4, // Selected line width showShadow: true, // Show shadow shadowColor: '50,250,50' // Shadow color }
},
highLightNeiber: true, // Adjacent node height mark wheelZoom: 0.8 // Wheel zoom switch, do not set [0,1] when not in use
}Load the canvas:
this.visgraph = new VisGraph(
document.getElementById(this.canvasId),
this.canvasConfig
)
this.visgraph.clearAll()
this.visgraph.drawData(this.graphData)4. Extended functions: Unlimited expansion of sub-nodes, double-click the node to trigger (ondblClick):
this.visgraph.restoreHightLight() // Cancel highlight const allNodes = this.visgraph.getVisibleData()
this.currentNode.push(node.id)
allNodes.nodes.forEach(item => {
if (this.currentNode.indexOf(item.id) === (-1)) {
this.visgraph.deleteNode(item)
}
})
const findNodeNum = Math.round(Math.random() * 50)
const increamData = this.buildIncreamData(node, findNodeNum)
this.visgraph.activeAddNodeLinks(increamData.nodes, increamData.links)
this.visgraph.translateToCenter()Full code (relation.vue):
<!--
* @Author: CarlYang
* @Date: 2021-07-23 15:31:51
* @LastEditTime: 2021-07-30 09:46:05
* @LastEditors: Please set LastEditors
* @Description: Relationship graph* @FilePath: \vue-g6\src\views\GraphVis\company.vue
-->
<template>
<div id="container">
<!-- ============================================== Canvas View================================================ -->
<div
id="graph-panel"
ref="graphpanel"
@contextmenu="globalClickedDispatch"
></div>
<!-- ================================================ Left toolbar================================================= -->
<div class="left-toolbar">
<ul>
<li @click="setZoomOut" title="Zoom Out">
<i class="iconfont icon-zoomin"></i>
</li>
<li @click="setZoomIn" title="Zoom Out">
<i class="iconfont icon-zoomout"></i>
</li>
<li @click="saveImage" title="Save Image">
<i class="iconfont icon-baocun-"></i>
</li>
<li @click="exportJson" title="Export JSON">
<i class="iconfont icon-json"></i>
</li>
<li @click="showOverView" title="Thumbnail">
<i class="iconfont icon-suolvetu" style="font-size: 14px"></i>
</li>
<li @click="clockwiseRotate" title="Rotate clockwise">
<i class="iconfont icon-shunshizhenfangxiangclockwise4" style="font-size: 14px"></i>
</li>
<li @click="counterclockwiseRotate" title="CounterclockwiseRotate">
<i class="iconfont icon-nishizhencounterclockwise3" style="font-size: 14px"></i>
</li>
<li @click="setMouseModel('normal')" title="Normal mode">
<i class="iconfont icon-pointer-up"></i>
</li>
<li @click="setMouseModel('drag')" title="Drag mode">
<i class="iconfont icon-line-dragmovetuozhuai-01"></i>
</li>
<li @click="setMouseModel('select')" title="Selection Mode">
<i class="iconfont icon-kuangxuan1"></i>
</li>
<li @click="fullScreen" title="Full screen display">
<i class="iconfont icon-quanping" style="font-size: 20px"></i>
</li>
</ul>
</div>
<!-- ================================================= Right-click menu=============================================== -->
<div id="nodeMenuDialog" class="nodeMenuDialog">
<ul>
<li @click="clickNodeInfo">Node information</li>
<li @click="settingNode">Configure node</li>
<li @click="selectRelation">Select the relation</li>
<li @click="deleteNode">Delete node</li>
<li @click="contractNode">Collapse node</li>
<li @click="expandedNode">Expanded node</li>
</ul>
</div>
<!-- ================================================ Node information pop-up box================================================ -->
<el-drawer
title="Node Information"
:visible.sync="nodeInfoDrawer"
direction="rtl"
:modal="false"
size="20%"
>
<div class="nodeInfo">
<el-form class="nodeInfoForm" ref="nodeInfoForm" :model="nodeInfoForm" label-width="80px">
<el-form-item label="node name">
<el-input v-model="nodeInfoForm.label"></el-input>
</el-form-item>
<el-form-item label="Node ID">
<el-input v-model="nodeInfoForm.id"></el-input>
</el-form-item>
</el-form>
<el-tabs v-model="nodeInfoActiveName" :stretch="true" class="nodeInfoTabs">
<el-tab-pane label="Relationship" name="first">
<div class="nodeInfoRelation">
<el-collapse v-model="nodeInfoRelationActive">
<el-collapse-item title="Target node" name="1">
<template slot="title">
<el-badge :value="nodeInfoSourceList.length">Target node</el-badge>
</template>
<table
border="0"
cellspacing="0"
cellpadding="0"
class="nodeInfo-table"
v-if="nodeInfoSourceList.length > 0"
>
<thead>
<tr>
<th>Entity object</th>
<th>Relationship Type</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in nodeInfoSourceList" :key="index">
<td
:style="{ color: item.color }"
style="cursor: pointer;"
@click="moveCenterThisNode(item.id)"
>{{ item.label }}</td>
<td>{{ item.relationType }}</td>
</tr>
</tbody>
</table>
<p v-else>No data</p>
</el-collapse-item>
<el-collapse-item title="Source node" name="2">
<template slot="title">
<el-badge :value="nodeInfoTargetList.length">Source node</el-badge>
</template>
<table
border="0"
cellspacing="0"
cellpadding="0"
class="nodeInfo-table"
v-if="nodeInfoTargetList.length > 0"
>
<thead>
<tr>
<th>Entity object</th>
<th>Relationship Type</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in nodeInfoTargetList" :key="index">
<td
:style="{ color: item.color }"
style="cursor: pointer;"
@click="moveCenterThisNode(item.id)"
>{{ item.label }}</td>
<td>{{ item.relationType }}</td>
</tr>
</tbody>
</table>
<p v-else>No data</p>
</el-collapse-item>
</el-collapse>
</div>
</el-tab-pane>
<el-tab-pane label="Attributes" name="second">
<div class="nodeInfoAttribute">
<el-table :data="nodeInfoAttributeList" border style="width: 100%">
<el-table-column prop="name" label="property name"></el-table-column>
<el-table-column prop="value" label="property value"></el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-drawer>
<!-- ================================================ Node Configuration============================================== -->
<el-drawer
title="Node Configuration"
:visible.sync="nodeConfigDrawer"
direction="rtl"
:modal="false"
size="20%"
>
<div class="nodeConfig">
<el-form ref="form" :model="nodeConfigForm" label-width="80px" label-position="left">
<el-form-item label="Name">
<el-input v-model="nodeConfigForm.label" placeholder="Please enter the node name"></el-input>
</el-form-item>
<el-form-item label="Type">
<el-select v-model="nodeConfigForm.shape" placeholder="Please select node type">
<el-option
v-for="(item, index) in nodeTypeList"
:key="'node' + index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="color">
<div class="form-color">
<el-input
v-model="nodeConfigForm.fillColor"
class="form-input"
placeholder="Please select a color"
readonly
></el-input>
<el-color-picker
v-model="nodeConfigForm.hexColor"
class="form-color-select"
@change="colorChange(nodeConfigForm.hexColor, 'fillColor')"
></el-color-picker>
</div>
</el-form-item>
<el-form-item label="size">
<el-input v-model="nodeConfigForm.size" placeholder="Please enter the node size" type="number"></el-input>
</el-form-item>
<el-form-item label="border width">
<el-input v-model="nodeConfigForm.borderWidth" placeholder="Please enter border width" type="number"></el-input>
</el-form-item>
<el-form-item label="border dashed line">
<el-select v-model="nodeConfigForm.borderDash" placeholder="Please select border dashed line">
<el-option label="No" :value="false"></el-option>
<el-option label="yes" :value="true"></el-option>
</el-select>
</el-form-item>
<el-form-item label="border color">
<div class="form-color">
<el-input
v-model="nodeConfigForm.borderColor"
class="form-input"
placeholder="Please select a border color"
readonly
></el-input>
<el-color-picker
v-model="nodeConfigForm.borderHexColor"
class="form-color-select"
@change="colorChange(nodeConfigForm.borderHexColor, 'borderColor')"
></el-color-picker>
</div>
</el-form-item>
<el-form-item label="font position">
<el-select v-model="nodeConfigForm.textPosition" placeholder="Please select the font position">
<el-option
v-for="(item, index) in textPositionList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="font style">
<el-input v-model="nodeConfigForm.font" placeholder="Please enter the font style"></el-input>
</el-form-item>
<el-form-item label="font color">
<div class="form-color">
<el-input
v-model="nodeConfigForm.fontColor"
class="form-input"
placeholder="Please select font color"
readonly
></el-input>
<el-color-picker
v-model="nodeConfigForm.fontHexColor"
class="form-color-select"
@change="colorChange(nodeConfigForm.fontHexColor, 'fontColor')"
></el-color-picker>
</div>
</el-form-item>
<el-form-item label="font background">
<div class="form-color">
<el-input
v-model="nodeConfigForm.fontBgColor"
class="form-input"
placeholder="Please select font background"
readonly
></el-input>
<el-color-picker
v-model="nodeConfigForm.fontBgHexColor"
class="form-color-select"
@change="colorChange(nodeConfigForm.fontBgHexColor, 'fontBgColor')"
></el-color-picker>
</div>
</el-form-item>
<el-form-item label="font offset">
<el-input
v-model="nodeConfigForm.textOffset"
placeholder="Please enter the font offset"
type="number"
max="100"
min="-100"
></el-input>
</el-form-item>
</el-form>
<div class="save-setting">
<el-button type="primary" @click="saveSetting">Save configuration</el-button>
</div>
</div>
</el-drawer>
</div>
</template>
<script>
import VisGraph from '@/assets/js/GraphVis/old/visgraph.min.js'
import LayoutFactory from '@/assets/js/GraphVis/old/visgraph-layout.min.js'
import screenfull from 'screenfull'
import {
company
} from '@/assets/js/company.js'
export default {
name: 'DesignGraph',
components:
VisGraph,
LayoutFactory
},
data() {
return {
//Canvas instance visgraph: null,
// Center Node centerNode: null,
//Selected node currentNode: [],
// Selected node information checkedNodeInfo: {},
// Graph configuration config: {
node: {
label: {
show: true,
color: '250,250,250',
font: 'normal 14px Microsoft YaHei',
textPosition: 'Middle_Center',
borderWidth: 0,
wrapText: true
},
shape: 'circle',
width: 60,
height: 60,
color: '62,160,250',
borderColor: '62,160,250',
borderWidth: 0,
borderRadius: 0,
lineDash: [0],
alpha: 1,
selected: {
borderColor: '136,198,255',
borderAlpha: 1,
borderWidth: 3,
showShadow: true,
shadowColor: '136,198,255'
},
onClick: (event, node) => {
// this.visgraph.highLightNeiberNodes(node, 1) // Highlight},
ondblClick: (event, node) => {
this.visgraph.restoreHightLight() // Cancel highlight const allNodes = this.visgraph.getVisibleData()
this.currentNode.push(node.id)
allNodes.nodes.forEach(item => {
if (this.currentNode.indexOf(item.id) === (-1)) {
this.visgraph.deleteNode(item)
}
})
const findNodeNum = Math.round(Math.random() * 50)
const increamData = this.buildIncreamData(node, findNodeNum)
this.visgraph.activeAddNodeLinks(increamData.nodes, increamData.links)
this.visgraph.translateToCenter()
},
onMouseOver: (event, node) => { },
onMouseOut: (event, node) => { }
},
link:
label: {
show: true,
color: '100,100,200',
font: 'normal 10px Arial'
},
lineType: 'direct',
colorType: 'defined',
color: '200,200,200',
alpha: 1,
lineWidth: 1,
lineDash: [0],
showArrow: true,
selected: {
color: '20,250,50',
alpha: 1,
lineWidth: 4,
showShadow: true,
shadowColor: '50,250,50'
}
},
highLightNeiber: true,
wheelZoom: 0.8,
noElementClick: (event, _graphvis) => {
// Click somewhere else on the canvas to hide the popup this.nodeMenuDialogClose()
}
},
// Node information pop-up box nodeInfoDrawer: false,
// Node information form nodeInfoForm: {
label: '',
id: ''
},
// Node information pop-up box tab option name nodeInfoActiveName: 'first',
// Relationship nodeInfoRelationActive: ['1', '2'],
// Target node list nodeInfoTargetList: [],
// Source node list nodeInfoSourceList: [],
// Node attribute list nodeInfoAttributeList: [],
// Node configuration pop-up box nodeConfigDrawer: false,
// Node configuration form nodeConfigForm: {
label: '',
shape: '',
fillColor: '',
hexColor: '',
size: '',
borderWidth: '',
borderDash: '',
borderColor: '',
borderHexColor: '',
textPosition: '',
font: '',
fontColor: '',
fontHexColor: '',
fontBgColor: '',
fontBgHexColor: '',
textOffset: ''
},
// Node type list nodeTypeList: [
{ value: 'circle', label: 'Circle' },
{ value: 'rect', label: 'Rectangle' },
{ value: 'ellipse', label: 'Ellipse' },
{ value: 'star', label: 'Pentagon' },
{ value: 'triangle', label: 'Triangle' },
{ value: 'polygon', label: 'Hexagon' }
],
// Font position list textPositionList: [
{ value: 'Middle_Center', label: 'Center' },
{ value: 'Bottom_Center', label: 'Bottom' },
{ value: 'top_Center', label: 'Top' },
{ value: 'Middle_Left', label: 'Left' },
{ value: 'Middle_right', label: 'Right' },
]
}
},
mounted() {
this.handleData(company)
window.onresize = () => {
if (this.visgraph) {
this.visgraph.moveCenter()
}
}
},
methods: {
/**
* Processing data * @date 2021-07-23
* @param {Object} data
*/
handleData(data) {
const obj = {
nodes: [],
links: []
}
const nodes = data.nodes
nodes.forEach(item => {
if (item.label === 'Headquarters') {
const nodeObj = {
id: item.id,
label: item.label,
properties: item,
color: '38,186,191',
selectedBorderColor: '131,218,228',
shadowColor: '131,218,228'
}
nodeObj.size = 80
nodeObj.x = 250
nodeObj.y = 250
this.centerNode = nodeObj
this.currentNode.push(item.id)
} else {
const nodeObj = {
id: item.id,
label: item.label,
properties: item,
size: 60
}
switch (item.type) {
case 1:
nodeObj.color = '242,105,97'
nodeObj.selectedBorderColor = '249,179,157'
nodeObj.shadowColor = '249,179,157'
break
}
obj.nodes.push(nodeObj)
}
})
const links = data.edges
links.forEach(item => {
const linkObj = {
id: item.id,
target: item.to,
source: item.from,
label: item.label,
properties: item
// strokeColor: this.getRandomColor()
}
switch (item.type) {
case 11:
linkObj.color = '40,194,199'
linkObj.selectedColor = '40,194,199'
linkObj.shadowColor = '40,194,199'
break
case 12:
linkObj.color = '250,108,100'
linkObj.selectedColor = '250,108,100'
linkObj.shadowColor = '250,108,100'
break
case 13:
linkObj.color = '0,132,255'
linkObj.selectedColor = '0,132,255'
linkObj.shadowColor = '0,132,255'
break
case 15:
linkObj.color = '250,108,100'
linkObj.selectedColor = '250,108,100'
linkObj.shadowColor = '250,108,100'
break
}
obj.links.push(linkObj)
})
this.buildData(obj)
},
/**
* Build an example * @date 2021-07-23
* @param {Object} gxData
*/
buildData(gxData) {
this.visgraph = new VisGraph(document.getElementById('graph-panel'), this.config)
const nodeCount = gxData.nodes.length
const xyArr = this.getXY(this.centerNode, nodeCount, nodeCount * 20)
gxData.nodes.forEach((n, i) => {
nx = xyArr[i].x
ny = xyArr[i].y
n.size = 60
})
gxData.nodes.push(this.centerNode)
this.visgraph.drawData(gxData)
this.visgraph.setZoom()
},
/**
* Point coordinates around the selected node* @date 2021-07-23
* @param {center node} centerNode
* @param {number of nodes} nodeCount
* @param {distance from the center point} raduis
* @returns {Array}
*/
getXY(centerNode, nodeCount, raduis) {
const aop = 360.0 / nodeCount
const arr = []
for (let i = 0; i < nodeCount; i++) {
let r1 = raduis
if (nodeCount > 10) {
r1 = (i % 2 === 0 ? raduis + 35 : raduis - 35)
}
const ao = i * aop
const o1 = {}
o1.x = centerNode.x + r1 * Math.cos(ao * Math.PI / 180)
o1.y = centerNode.y + r1 * Math.sin(ao * Math.PI / 180)
arr[i] = o1
}
return arr
},
/**
* Randomly generate nodes * @date 2021-07-23
* @param {currently selected node} centerNode
* @param {number of nodes} nodeNum
* @returns {Object}
*/
buildIncreamData(centerNode, nodeNum) {
const gxData = {
nodes: [],
links: []
}
const count = nodeNum
const nodeIdPrefix = 'node_' + Math.round(Math.random() * 1000) + '_'
for (let i = 0; i < count; i++) {
gxData.nodes.push({
id: nodeIdPrefix + i,
label: 'child node+' + i,
size: 60
// color: this.getRandomColor()
})
gxData.links.push({
source: centerNode.id,
target: nodeIdPrefix + i,
label: 'relationship' + i
})
}
return gxData
},
/**
* Canvas right click event * @date 2021-07-26
* @param {Object} event
*/
globalClickedDispatch(event) {
if (event.button === 2) {
if (this.visgraph.currentNode) {
this.nodeMenuDialogOpen(event, this.visgraph.currentNode)
}
}
},
/**
* Right-click node menu display * @date 2021-07-26
* @param {Object} event
* @param {Object} node
*/
nodeMenuDialogOpen(event, node) {
let nodeMenuDialog = document.getElementById("nodeMenuDialog");
nodeMenuDialog.style.left = event.clientX + "px";
nodeMenuDialog.style.top = (event.clientY - 76) + "px";
nodeMenuDialog.style.display = "block";
this.checkedNodeInfo = node;
event.stopPropagation();
},
/**
* Close node menu * @date 2021-07-26
*/
nodeMenuDialogClose() {
let nodeMenuDialog = document.getElementById("nodeMenuDialog");
nodeMenuDialog.style.display = "none";
},
/**
* Click node information * @date 2021-07-26
*/
clickNodeInfo() {
this.nodeInfoDrawer = true
// Assignment form this.nodeInfoForm = this.checkedNodeInfo
// Associated node // Outgoing node const k = this.checkedNodeInfo
const g = (k.outLinks || []).map((link) => {
return {
id: link.target.id,
label: link.target.label,
type: link.target.type,
color: 'rgb(' + link.target.fillColor + ')',
relationType: link.type || link.label || '--'
}
})
// Incoming node const h = (k.inLinks || []).map((link) => {
return {
id: link.source.id,
label: link.source.label,
type: link.source.type,
color: 'rgb(' + link.source.fillColor + ')',
relationType: link.type || link.label || '--'
}
})
this.nodeInfoTargetList = h
this.nodeInfoSourceList = g
// Attribute assignment const list = []
const nameList = ['id', 'label', 'type', 'cluster', 'fillColor', 'shape', 'size', 'font', 'fontColor', 'x', 'y']
nameList.forEach(item => {
const obj = {
name: item,
value: this.checkedNodeInfo[item]
}
list.push(obj)
})
this.nodeInfoAttributeList = list
this.nodeMenuDialogClose()
},
/**
* Select the associated operation * @date 2021-07-26
*/
selectRelation() {
this.visgraph.rightMenuOprate('selRelate')
},
/**
* Delete the specified node* @date 2021-07-26
* @returns {any}
*/
deleteNode() {
this.visgraph.deleteNode(this.visgraph.currentNode)
this.nodeMenuDialogClose()
},
/**
* Collapse the specified node * @date 2021-07-26
* @returns {any}
*/
contractNode() {
if (this.visgraph.currentNode.outLinks.length > 0) {
this.visgraph.contract(this.visgraph.currentNode)
this.nodeMenuDialogClose()
} else {
this.$message.warning('The current node has no child nodes and cannot be collapsed')
}
},
/**
* Expand the specified node * @date 2021-07-26
* @returns {any}
*/
expandedNode() {
if (this.visgraph.currentNode.outLinks.length > 0) {
this.visgraph.expanded(this.visgraph.currentNode)
this.nodeMenuDialogClose()
} else {
this.$message.warning('The current node has no child nodes and cannot be expanded')
}
},
/**
* Move around the specified node* @date 2021-07-26
* @param {String} id
*/
moveCenterThisNode(id) {
const node = this.visgraph.findNodeById(id)
this.visgraph.moveNodeToCenter(node)
},
/**
* Node configuration * @date 2021-07-30
* @returns {any}
*/
settingNode () {
this.nodeMenuDialogClose()
const {
id,
label,
shape,
fillColor,
size,
borderWidth,
lineDash,
borderColor,
textPosition,
font,
fontColor,
labelBackGround,
textOffsetX
} = this.visgraph.currentNode
this.nodeConfigForm.id = id
this.nodeConfigForm.label = label
this.nodeConfigForm.shape = shape
this.nodeConfigForm.fillColor = 'rgb(' + fillColor + ')'
this.nodeConfigForm.hexColor = this.rgbToHex('rgb(' + fillColor + ')')
this.nodeConfigForm.size = size
this.nodeConfigForm.borderWidth = borderWidth
this.nodeConfigForm.borderDash = lineDash.length === 2
this.nodeConfigForm.borderColor = 'rgb(' + borderColor + ')'
this.nodeConfigForm.borderHexColor = this.rgbToHex('rgb(' + borderColor + ')')
this.nodeConfigForm.textPosition = textPosition
this.nodeConfigForm.font = font
this.nodeConfigForm.fontColor = 'rgb(' + fontColor + ')'
this.nodeConfigForm.fontHexColor = this.rgbToHex('rgb(' + fontColor + ')')
this.nodeConfigForm.fontBgColor = labelBackGround ? 'rgb(' + labelBackGround + ')' : ''
this.nodeConfigForm.fontBgHexColor = labelBackGround ? this.rgbToHex('rgb(' + labelBackGround + ')') : ''
this.nodeConfigForm.textOffset = textOffsetX
this.nodeConfigDrawer = true
},
/**
* Save node configuration * @date 2021-07-30
* @returns {any}
*/
saveSetting () {
const {
id,
label,
shape,
fillColor,
hexColor,
size,
borderWidth,
borderDash,
borderColor,
borderHexColor,
textPosition,
font,
fontColor,
fontHexColor,
fontBgColor,
fontBgHexColor,
textOffset
} = this.nodeConfigForm
const b = this.visgraph.findNodeByAttr('id', id)
if (b) {
b.label = label
b.size = size
b.shape = shape
b.fillColor = this.getColorRgb(fillColor)
b.textPosition = textPosition
b.fontColor = this.getColorRgb(fontColor)
b.labelBackGround = this.getColorRgb(fontBgColor)
b.font = font;
b.textOffsetY = Number(textOffset) || 2
b.borderWidth = Number(borderWidth) || 2
b.borderColor = this.getColorRgb(borderColor)
b.lineDash = (borderDash ? [8, 5] : [0])
this.visgraph.refresh()
this.$message({
message: 'Configuration modified successfully!',
type: 'success',
duration: 2000
})
this.nodeConfigDrawer = false
} else {
this.$message({
message: 'Cannot find the selected node!',
type: 'error',
duration: 2000
})
}
},
/**
* Get random color * @date 2021-07-20
* @returns {String} style */
getRandomColor() {
const r = Math.floor(Math.random() * 256)
const g = Math.floor(Math.random() * 256)
const b = Math.floor(Math.random() * 256)
return 'rgb(' + r + ',' + g + ',' + b + ')'
},
/**
* Color selection box change assignment * @date 2021-07-26
* @param {String} val
* @param {String} kay
*/
colorChange(val, key) {
this.nodeConfigForm[key] = this.hexToRgba(val)
},
/**
* Convert hexadecimal color value to RGB
* @date 2021-07-26
* @param {String} hex
* @returns {String}
*/
hexToRgba(hex) {
return "rgb(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + ")"
},
/**
* Convert RGB color value to hexadecimal * @date 2021-07-26
* @param {String} color
* @returns {String}
*/
rgbToHex(color) {
const rgb = color.split(',');
const r = parseInt(rgb[0].split('(')[1]);
const g = parseInt(rgb[1]);
const b = parseInt(rgb[2].split(')')[0]);
const hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return hex;
},
/**
* Remove RGB
* @date 2021-07-30
* @param {String} a
* @returns {String}
*/
getColorRgb(a) {
if (a && a.length > 0) {
a = a.replace('rgb(', '').replace(')', '')
} else {
a = null
}
return a
},
/**
* Save image * @date 2021-07-23
*/
saveImage() {
this.visgraph.saveImage()
},
/**
* Export json
* @date 2021-07-30
*/
exportJson() {
this.visgraph.exportJsonFile()
},
/**
* Open thumbnail * @date 2021-07-23
*/
showOverView() {
console.log(this.showOverViewFlag)
this.showOverViewFlag = !this.showOverViewFlag
this.visgraph.showOverView(this.showOverView)
},
/**
* Zoom out * @date 2021-07-23
*/
setZoomIn() {
this.visgraph.setZoom('zoomIn')
},
/**
* Zoom in * @date 2021-07-23
*/
setZoomOut() {
this.visgraph.setZoom('zoomOut')
},
/**
* Clockwise rotation * @date 2021-07-23
*/
clockwiseRotate() {
this.visgraph.rotateGraph(-10)
},
/**
*Counterclockwise* @date 2021-07-23
*/
counterclockwiseRotate() {
this.visgraph.rotateGraph(10)
},
/**
* Set mouse mode * @date 2021-07-23
* @param {String} type drag: drag mode select: box selection mode normal: normal mode */
setMouseModel(type) {
this.visgraph.setMouseModel(type)
},
/**
* Full screen display * @date 2021-07-23
*/
fullScreen() {
screenfull.request(this.$refs.graphpanel)
}
}
}
</script>
<style lang="scss" scoped>
#container {
width: 100%;
position: relative;
#graph-panel {
width:100%;
height:100%;
background:#9dadc1;
position: absolute;
z-index: 1;
}
/* Test menu bar */
.left-toolbar {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 45px;
height: 100%;
background-color: #fafafa;
border-right: 1px solid #e5e2e2;
ul {
li {
text-align: center;
height: 35px;
color: #066fba;
line-height: 35px;
cursor: pointer;
padding: 0;
i {
font-size: 18px;
}
&:hover {
background-color: #6ea36d;
color: #fff;
}
}
}
}
/* Right click popup style*/
.nodeMenuDialog {
display: none;
position: absolute;
min-width: 100px;
padding: 2px 3px;
margin: 0;
border: 1px solid #e3e6eb;
background: #f9f9f9;
color: #333;
z-index: 100;
border-radius: 5px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
transform: translate(0, 15px) scale(0.95);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
overflow: hidden;
cursor: pointer;
li {
display: block;
position: relative;
margin: 0;
padding: 0 10px;
border-radius: 5px;
white-space: nowrap;
line-height: 30px;
text-align: center;
&:hover {
background-color: #c3e5fd;
}
}
}
/* Node information pop-up box*/
.nodeInfo {
.nodeInfoForm {
padding: 20px 20px 0 20px;
border: solid 1px #dcdfe6;
border-left: none;
border-right: none;
margin: 20px 0;
}
.nodeInfoRelation {
padding: 0 20px;
.nodeInfo-table {
width: 100%;
overflow-y: scroll;
th {
width: 50%;
border: 1px solid #ebeef5;
padding: 9px 0 9px 9px;
text-align: left;
&:first-child {
border-right: none;
}
}
td {
width: 50%;
border: 1px solid #ebeef5;
border-top: none;
padding: 9px 0 9px 9px;
&:first-child {
border-right: none;
}
}
}
/deep/ .el-badge__content.is-fixed {
top: 24px;
right: -7px;
}
p {
text-align: center;
padding: 20px 0;
}
}
.nodeInfoAttribute {
padding: 0 20px;
}
}
/* Node configuration pop-up window*/
.nodeConfig {
padding: 20px 20px 0 20px;
border: solid 1px #dcdfe6;
border-left: none;
border-right: none;
margin: 20px 0;
.form-color {
display: flex;
justify-content: space-between;
.form-input {
width: calc(100% - 50px);
}
}
.save-setting {
width: 100%;
margin-bottom: 20px;
.el-button {
width: 100%;
}
}
}
}
</style>Note: ESLint will report an error when two JS files are introduced. You can ignore this file. If you don't use ESLint, you can ignore it. At the same time, the project is also developed based on element-ui, introducing the screenfull full-screen plug-in and the Ali icon library icons, which can be introduced as needed. Demo:
This is the end of this article about how to use GraphVis in vue to develop an infinitely expandable relationship graph. For more relevant vue GraphVis relationship graph content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of long transaction examples in MySQL
>>: Solve the problem of running node process in Linux system but unable to kill the process
Recommend
How to deploy MySQL master and slave in Docker
Download image Selecting a MySQL Image docker sea...
Using CSS3 to create header animation effects
Netease Kanyouxi official website (http://kanyoux...
How to Develop a Progressive Web App (PWA)
Table of contents Overview Require URL of the app...
Solve MySQL deadlock routine by updating different indexes
The previous articles introduced how to debug loc...
Detailed explanation of Nginx timed log cutting
Preface By default, Nginx logs are written to a f...
3 ways to create JavaScript objects
Table of contents 1. Object literals 2. The new k...
JavaScript to achieve simple drag effect
This article shares the specific code of JavaScri...
Detailed tutorial on distributed operation of jmeter in docker environment
1. Build the basic image of jmeter The Dockerfile...
Complete tutorial on installing Apache, MySQL, PHP, LAMP on Ubuntu 18.04
1. Install Apache $ sudo apt update && su...
HTML web page image tag
Insert image tag <IMG> The colorful web page...
Vue integrates Tencent Map to implement API (with DEMO)
Table of contents Writing Background Project Desc...
Vue3+script setup+ts+Vite+Volar project
Table of contents Create a vue + ts project using...
Detailed explanation of JavaScript BOM composition and common events
Table of contents 1. BOM 2. Composition of BOM 2....
Summary of tips for making web pages
Preface This article mainly summarizes some of th...
Complete step-by-step record of MySQL 8.0.26 installation and uninstallation
Table of contents Preface 1. Installation 1. Down...