X6
X6 copied to clipboard
Published
20 hours ago •
antvis
antvis
使用fromJSON加载画布的时候，有时不能正常显示节点
问题描述
- 我是自定义的节点，然后将画布数据toJSON()导出后，转成字符串传给后台，就是这个 JSON.stringify(this.graph.toJSON())。
- 后台再将这个数据给我，我再this.graph.fromJSON(JSON.parse(res.data.content))加载出来。
- 但是它有的时候可以正常显示，有的时候节点不能正常显示，控制台也没报错，所以我不清楚是什么原因 。我将截图和 JSON 数据贴在下面
重现链接
无
重现步骤
{
"cells": [
{
"position": {
"x": 240,
"y": 120
},
"size": {
"width": 180,
"height": 40
},
"view": "vue-shape-view",
"shape": "dag-node",
"component": {
"template": "<database />",
"components": {
"database": {
"name": "database",
"inject": [
"getGraph",
"getNode"
],
"staticRenderFns": [],
"_compiled": true,
"_scopeId": "data-v-1e3ecc9e",
"_Ctor": {}
}
}
},
"ports": {
"groups": {
"left": {
"position": "left",
"attrs": {
"circle": {
"r": 4,
"magnet": true,
"stroke": "#C2C8D5",
"strokeWidth": 1,
"fill": "#fff"
}
}
},
"right": {
"position": "right",
"attrs": {
"circle": {
"r": 4,
"magnet": true,
"stroke": "#C2C8D5",
"strokeWidth": 1,
"fill": "#fff"
}
}
}
},
"items": [
{
"id": "in-1663807820263",
"group": "left"
},
{
"id": "out-1663807820263",
"group": "right"
}
]
},
"id": "bf92bf9d-4a3d-4e93-bfa7-7a7ebe220203",
"data": {
"type": "node-input",
"label": "库表输入",
"status": "default",
"tableName": "",
"param": ""
},
"zIndex": 1
}
]
}
预期行为
我想看到那个正常的图片的效果，但是时不时会出现那个异常效果。
平台
- 操作系统: [macOS]
- 网页浏览器: [Google Chrome]
- "@antv/x6": "^1.33.0", "@antv/x6-vue-shape": "^1.4.2",
屏幕截图或视频（可选）
这是异常的截图
这是正常的截图
补充说明（可选）
No response
👋 @zhoupIT
Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
![x6-bot[bot] avatar](https://avatars.githubusercontent.com/in/81133?v=4 "Published by a pub.dev verified publisher"){kind=small}
注册节点的代码是
// 节点
Graph.registerNode(
"dag-node",
{
inherit: "vue-shape",
width: 180,
height: 36,
component: {
template: `<database />`,
components: {
database,
},
},
ports: {
groups: {
left: {
position: "left",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#C2C8D5",
strokeWidth: 1,
fill: "#fff",
},
},
},
right: {
position: "right",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#C2C8D5",
strokeWidth: 1,
fill: "#fff",
},
},
},
},
},
},
true
);
// 边
Graph.registerEdge(
"dag-edge",
{
inherit: "edge",
attrs: {
line: {
stroke: "#C2C8D5",
strokeWidth: 2,
targetMarker: {
name: "block",
width: 12,
height: 8,
// d: 'M 20 -10 0 0 20 10 Z',
},
},
},
},
true
);
const graph = new Graph({
interacting: {
nodeMovable: false,
},
grid: {
size: 10,
visible: true,
type: "dot", // 'dot' | 'fixedDot' | 'mesh'
args: {
color: "#a05410", // 网格线/点颜色
thickness: 1, // 网格线宽度/网格点大小
},
},
background: {
color: "#fffbe6", // 设置画布背景颜色
},
container: document.getElementById("graph-container"),
panning: {
enabled: false,
eventTypes: ["leftMouseDown", "mouseWheel"],
},
mousewheel: {
enabled: false,
modifiers: "ctrl",
factor: 1.1,
maxScale: 1.5,
minScale: 0.5,
},
highlighting: {
magnetAdsorbed: {
name: "stroke",
args: {
attrs: {
fill: "#fff",
stroke: "#31d0c6",
strokeWidth: 4,
},
},
},
},
connecting: {
snap: false,
allowBlank: false,
allowLoop: false,
highlight: false,
// connector: "algo-connector",
connector: {
name: "smooth",
// name: 'rounded',
// args: {
// radius: 8,
// },
},
connectionPoint: "anchor", // 连接点 ConnectionPoint 与锚点 Anchor 共同确定了边的起点或终点。
anchor: "center",
validateMagnet({ magnet }) {
// return magnet.getAttribute('port-group') !== 'top'
// 限制连线配置
return true;
},
createEdge() {
return graph.createEdge({
shape: "dag-edge",
attrs: {
line: {
strokeDasharray: "5 5",
targetMarker: {
name: "block",
width: 12,
height: 8,
},
},
},
zIndex: -1,
});
},
},
selecting: {
enabled: false,
multiple: false,
rubberEdge: false,
rubberNode: false,
modifiers: "shift",
rubberband: false,
},
keyboard: false,
clipboard: false,
history: false,
});
this.graph = graph;
database组件代码是
<template>
<div class="node " :class="status">
<img :src="imgCot.logo" alt="">
<span class="label">{{label}}</span>
<span class="status">
<img :src="imgCot[status]" alt="">
</span>
</div>
</template>
<script>
export default {
name: 'database',
inject: ['getGraph', 'getNode'],
data() {
return {
status: 'default',
imgCot: {
default: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
logo: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
success:
'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ',
failed:
'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ',
running:
'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ'
},
label: '',
}
},
mounted() {
const self = this
const node = this.getNode()
this.label = node.data.label
// 监听数据改变事件
node.on('change:data', ({current}) => {
self.label = current.label
self.status = current.status
})
}
}
</script>
<style lang="scss" scoped>
.node {
display: flex;
align-items: center;
width: 100%;
height: 100%;
background-color: #fff;
border: 1px solid #c2c8d5;
border-left: 4px solid #5F95FF;
border-radius: 4px;
box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
}
.node img {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-left: 8px;
}
.node .label {
display: inline-block;
flex-shrink: 0;
width: 104px;
margin-left: 8px;
color: #666;
font-size: 12px;
}
.node .status {
flex-shrink: 0;
}
.node.success {
border-left: 4px solid #52c41a;
}
.node.failed {
border-left: 4px solid #ff4d4f;
}
.node.running .status img {
animation: spin 1s linear infinite;
}
.x6-node-selected .node {
border-color: #1890ff;
border-radius: 2px;
box-shadow: 0 0 0 4px #d4e8fe;
}
.x6-node-selected .node.success {
border-color: #52c41a;
border-radius: 2px;
box-shadow: 0 0 0 4px #ccecc0;
}
.x6-node-selected .node.failed {
border-color: #ff4d4f;
border-radius: 2px;
box-shadow: 0 0 0 4px #fedcdc;
}
.x6-edge:hover path:nth-child(2) {
stroke: #1890ff;
stroke-width: 1px;
}
.x6-edge-selected path:nth-child(2) {
stroke: #1890ff;
stroke-width: 1.5px !important;
}
@keyframes running-line {
to {
stroke-dashoffset: -1000;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
已解决，因为当 component 为 Vue 组件或函数时，将不能通过 graph.JSON()和graph.fromJSON() 方法正确导出和导入画布数据，得换Graph.registerVueComponent(...) 注册来解决
This thread has been automatically locked because it has not had recent activity.
Please open a new issue for related bugs and link to relevant comments in this thread.