Recently, the company needed to make a flow chart. After looking at antv/X6, I felt it was very appropriate, so I studied it for half a month. There is no information on the Internet, and I'm afraid I'll forget. I'll record some events and methods I use, so that I can check them later.
1: The most important thing to implement the flow chart is the canvas. There are documents on the official website, which can easily implement the canvas. Let's take a look at the canvas code I wrote with VUE.
First, the most important thing is to download dependencies. If x6 is downloaded in vue, you need to download two dependencies;
npm install @antv/x6 --save
npm install @antv/x6-vue-shape
Download these two dependencies and you can vue Used in X6 Yes
First, introduce dependencies in the page
import "@antv/x6-vue-shape";
import { Graph } from '@antv/x6';
Let's start writing code
stay methods Define a initX6 Method, and then get mounted Call in
initX6() {
this.graph = new Graph({
container: document.getElementById("containerChart"), //This is the ID name that the canvas needs to be mounted
width: 1000, //Canvas width
height: 500, //Canvas height
grid: this.grid, //The canvas style is defined in the modou layer and called with this
autoResize: true, //Automatically change size with the window
});
},If you need to define the canvas background grid, you can define it yourself. The following is a background grid I defined myself. You can call it directly with this. Name after the grid.
data(){
return{
grid: {
// grid settings
size: 20, // Grid size 10px
visible: true, // Render mesh background
type: "mesh",
args: {
color: "#D0D0D0",
thickness: 1, // Grid line width / grid point size
factor: 10,
},
},
}
}At this time, define a width and height for your mount container in css, and you can see a canvas on the page. Adjust his position and start writing nodes.
Create a new JS file to define nodes and write drag and drop code.
import '@antv/x6-vue-shape';
import { Addon} from '@antv/x6';
// Drag to generate quadrilateral
export const startDragToGraph = (graph,type,e) =>{
const node =
graph.createNode({
width: 100, //Width of node
height: 60, //Height of node
attrs: {
label: {
text: type,
fill: '#000000',
fontSize: 14,
textWrap: {
width: -10 ,
height: -10,
ellipsis: true,
},
},
body: {
stroke: '#000000',
strokeWidth: 1,
fill: '#ffffff',
}
},
ports: ports
})
const dnd = new Addon.Dnd({target:graph})
dnd.start(node,e)
}
//The following is the code of the anchor point. Just know, I won't write them one by one.
const ports = {
groups: {
// Enter linked pile group definition
top: {
position: 'top',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#2D8CF0',
strokeWidth: 2,
fill: '#fff',
},
},
},
// Output link pile group definition
bottom: {
position: 'bottom',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#2D8CF0',
strokeWidth: 2,
fill: '#fff',
},
},
},
left: {
position: 'left',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#2D8CF0',
strokeWidth: 2,
fill: '#fff',
},
},
},
right: {
position: 'right',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#2D8CF0',
strokeWidth: 2,
fill: '#fff',
},
},
},
},
items: [
{
id: 'port1',
group: 'top',
},
{
id: 'port2',
group: 'bottom',
},
{
id: 'port3',
group: 'left',
},
{
id: 'port4',
group: 'right',
}
],
}After defining the nodes and anchors, return to the vue page and import the JS file
import { startDragToGraph } from "../methods.js"; //Import the defined JS file
go HTML Add manually dragged node content to the layer.
<template>
<div class="warp">
<div id="containerchart"></div>
<div
v-for="(item, index) in List"
:key="index"
class="btn"
:title="item"
@mousedown="startDrag(item, $event)"
>
<span>
{{ item }}
</span>
</div>
</div>
</template>
//The list of loops is written by yourself
data() {
return {
List: ["Built in node"],
grid: {
// grid settings
size: 20, // Grid size 10px
visible: true, // Render mesh background
type: "mesh",
args: {
color: "#D0D0D0",
thickness: 1, // Grid line width / grid point size
factor: 10,
},
},
};
},
Then in methods Define the method in the type Spread js In the file.
startDrag(type, e) {
startDragToGraph(this.graph, type, e);
},
After completing the above, you can get the following effects. Drag the node from the right to the canvas to display it.
But now there are still problems with dragging and lines. Next, solve the connection problem.
data() {
return {
List: ["Built in node"],
grid: {
// grid settings
size: 20, // Grid size 10px
visible: true, // Render mesh background
type: "mesh",
args: {
color: "#D0D0D0",
thickness: 1, // Grid line width / grid point size
factor: 10,
},
},
connectEdgeType: {
//Connection mode
connector: "normal",
router: {
name: "",
},
},
//First, define the following three contents in data, which need to be used below
graph: "",
type: "grid",
selectCell: "",
};
},
//Then add the following methods to the initX6 method in methods
connecting: {
// Node connection
anchor: "center",
connectionPoint: "anchor",
allowBlank: false,
snap: true,
},
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: "#1890ff",
strokeWidth: 1,
targetMarker: {
name: "classic",
size: 8,
},
strokeDasharray: 0, //Dotted line
style: {
animation: "ant-line 30s infinite linear",
},
},
},
label: {
text: "",
},
connector: _that.connectEdgeType.connector,
router: {
name: _that.connectEdgeType.router.name || "",
},
zIndex: 0,
});
},
//Note that these two methods are written to the Graph instance of new.
//Then write a drag event to the node. This method is written to the initX6 method, outside the Graph instance of new.
this.graph.on("selection:changed", (args) => {
args.added.forEach((cell) => {
this.selectCell = cell;
if (cell.isEdge()) {
cell.isEdge() && cell.attr("line/strokeDasharray", 5); //Dotted ant line
cell.addTools([
{
name: "vertices",
args: {
padding: 4,
attrs: {
strokeWidth: 0.1,
stroke: "#2d8cf0",
fill: "#ffffff",
},
},
},
]);
}
});
args.removed.forEach((cell) => {
cell.isEdge() && cell.attr("line/strokeDasharray", 0); //normal line
cell.removeTools();
});
});
Now you can see that the anchor point on the built-in node on the canvas is always displayed. Let's deal with it.
//You need to add a method to the introduced X6 method first
import { Graph,FunctionExt } from "@antv/x6";
stay methods Define a traversal method in and call it when the mouse moves in and out..
showPorts(ports, show) {
for (let i = 0, len = ports.length; i < len; i = i + 1) {
ports[i].style.visibility = show ? "visible" : "hidden";
}
},
Then give it in the method this.garph.on()Add two mouse in and out events. Move in to make the anchor visible and move out to make the anchor hidden. This will make the nodes of the canvas look better.
//Mouse in
this.graph.on(
"node:mouseenter",
FunctionExt.debounce(() => {
const container = document.getElementById("containerchart");
const ports = container.querySelectorAll(".x6-port-body");
this.showPorts(ports, true);
}),
500
);
//Mouse out
this.graph.on("node:mouseleave", () => {
const container = document.getElementById("containerchart");
const ports = container.querySelectorAll(".x6-port-body");
this.showPorts(ports, false);
});
Here's all the code
<template>
<div class="container_warp">
<div id="containerChart"></div>
<div
v-for="(item, index) in List"
:key="index"
class="btn"
:title="item"
@mousedown="startDrag(item, $event)"
>
<span>
{{ item }}
</span>
</div>
</div>
</template>
<script>
import "@antv/x6-vue-shape";
import { Graph, Shape, FunctionExt } from "@antv/x6";
import { startDragToGraph } from "../methods.js";
export default {
data() {
return {
List: [
"Directory listening",
"data organization ",
"Image Publishing",
"object detection ",
"change detection ",
"Feature classification",
"Expert pending trial",
"Sample warehousing",
"Image storage",
"Target warehousing",
"Sheet finishing",
"Package download",
],
graph: "",
type: "grid",
selectCell: "",
connectEdgeType: {
//Connection mode
connector: "normal",
router: {
name: "",
},
},
grid: {
// grid settings
size: 20, // Grid size 10px
visible: true, // Render mesh background
type: "mesh",
args: {
color: "#D0D0D0",
thickness: 1, // Grid line width / grid point size
factor: 10,
},
},
};
},
methods: {
initX6() {
this.graph = new Graph({
container: document.getElementById("containerChart"),
width: 1000,
height: 500,
grid: this.grid,
connecting: {
// Node connection
anchor: "center",
connectionPoint: "anchor",
allowBlank: false,
snap: true,
},
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: "#1890ff",
strokeWidth: 1,
targetMarker: {
name: "classic",
size: 8,
},
strokeDasharray: 0, //Dotted line
style: {
animation: "ant-line 30s infinite linear",
},
},
},
label: {
text: "",
},
connector: _that.connectEdgeType.connector,
router: {
name: _that.connectEdgeType.router.name || "",
},
zIndex: 0,
});
},
});
// Move the mouse in and out of the node
this.graph.on(
"node:mouseenter",
FunctionExt.debounce(() => {
const container = document.getElementById("containerChart");
const ports = container.querySelectorAll(".x6-port-body");
this.showPorts(ports, true);
}),
500
);
this.graph.on("node:mouseleave", () => {
const container = document.getElementById("containerChart");
const ports = container.querySelectorAll(".x6-port-body");
this.showPorts(ports, false);
});
this.graph.on("selection:changed", (args) => {
args.added.forEach((cell) => {
this.selectCell = cell;
if (cell.isEdge()) {
cell.isEdge() && cell.attr("line/strokeDasharray", 5); //Dotted ant line
cell.addTools([
{
name: "vertices",
args: {
padding: 4,
attrs: {
strokeWidth: 0.1,
stroke: "#2d8cf0",
fill: "#ffffff",
},
},
},
]);
}
});
args.removed.forEach((cell) => {
cell.isEdge() && cell.attr("line/strokeDasharray", 0); //normal line
cell.removeTools();
});
});
},
showPorts(ports, show) {
for (let i = 0, len = ports.length; i < len; i = i + 1) {
ports[i].style.visibility = show ? "visible" : "hidden";
}
},
// Drag to generate a square or circle
startDrag(type, e) {
console.log(type, e);
console.log(this.graph);
startDragToGraph(this.graph, type, e);
},
},
mounted() {
this.initX6();
},
};
</script>
<style lang="less">
#containerChart {
width: 1000px;
height: 500px;
border: 1px solid red;
float: left;
}
.btn {
width: 400px;
float: right;
margin-right: 500px;
}
</style>This completes an X6 that manually generates nodes to the canvas What's left is some CSS problems. Here are a few X6 events. Convenient for later use or reference
this.garph.on('node:click',()=>{
//This is the click node event
})
this.graph.on("blank:click", () => {
//This is the background event of clicking on the canvas
});
this.graph.on("cell:click", () => {
//This is a click on the connector event
});
// Delete node
deleteNode() {
const cell = this.graph.getSelectedCells();
this.graph.removeCells(cell);
this.type = "grid";
},
//Empty canvas
deleteAll() {
this.graph.clearCells();
},
//Destroy canvas
GraphDelete() {
this.graph.dispose();
},
// Save png
saveToPNG() {
//Save the picture below
this.$nextTick(() => {
this.graph.toPNG(
(dataUri) => {
console.log(dataUri);
// download
DataUri.downloadDataUri(dataUri, "Asset topology.png");
},
{
backgroundColor: "white",
padding: {
top: 50,
right: 50,
bottom: 50,
left: 50,
},
quality: 1,
copyStyles: false,
}
);
});
},
this.graph.toJSON()Get all the contents of the node in the current canvas
JSON.stringify(this.graph.toJSON())You can convert all the node contents of the current canvas into JSON String save to local or background
JSON.parse(json); hold json The data is shaped into a data format and then passed fromJSON Method is then rendered onto the canvas.
this.graph.fromJSON(json); You can get it from the background or locally json The data is shaped and rendered on the canvas.
The following is some personal experience. Due to the limited information on the Internet, record it for easy reference in the future. Don't spray it if it's not well written. If you have any questions, you can also leave a message to me.