Comments (4)
不是很明白
能弄一个在线的,能复现问题的demo吗?放到codesandbox上面
from antv-x6-vue.
不是很明白
能弄一个在线的,能复现问题的demo吗?放到codesandbox上面
等我研究下codesandbox,其实就是把你sandbox上的代码抄到项目里,然后发现每次刷新页面,你那个页面都会刷新四次,效果就是上面那个refresh那个地方,向下四次
<template>
<div class="container">
<!-- <div ref="stencil" class="stencil"/>-->
<Graph
:panning="{ enabled: true, eventTypes: ['leftMouseDown', 'mouseWheel'] }"
:highlighting="highlighting"
:connecting="connecting"
:height="600"
>
<TeleportContainer />
<Stencil :container="stencil" :layoutOptions="{columns: 1, columnWidth: 200, rowHeight: 60}" :stencilGraphWidth="200" :validateNode="validateNode" :groups="[{name: 'group1', graphHeight: 160}, {name: 'group2', graphHeight: 160}]">
<StencilGroup name="group1" :graphHeight="160" :graphWidth="200">
<!-- <Node id="1" label="group node1" :width="160" />-->
<!-- <Node id="2" label="group node2" :width="160" />-->
</StencilGroup>
<StencilGroup name="group2" :graphHeight="200" :graphWidth="200">
<!-- <Node id="3" label="group2 node3" :width="160" />-->
<!-- <Node id="4" label="group2 node4" :width="160" />-->
</StencilGroup>
</Stencil>
<div>refresh</div>
<Grid />
<Background />
<Connecting/>
<MouseWheel
modifiers="ctrl"
:factor="1.1"
:maxScale="1.5"
:minScale="1.5"
/>
<Clipboard />
<Selection
:multiple="true"
:rubberEdge="true"
:rubberNode="true"
:modifiers='["shift"]'
:rubberband="true"
/>
<Keyboard />
<MiniMap/>
<VueShape
v-for="node in nodes"
:id="node.id"
:key="node.id"
:autoResize="true"
shape="dag-node"
:ports="{ ...portConfig, items: node.ports }"
:data="{ ...node.data }"
:component="AlgoNode"
:x="node.x"
:y="node.y"
/>
<Edge
v-for="edge in edges"
:key="edge.id"
shape="dag-edge"
:source="edge.source"
:target="edge.target"
:zIndex="edge.zIndex"
/>
</Graph>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted, ref } from "vue";
import Graph, {
Grid,
Background,
Clipboard,
Selection,
Keyboard,
MouseWheel,
Edge,
VueShape,
MiniMap,
TeleportContainer,
Stencil, StencilGroup,
} from "antv-x6-vue";
import "../data/x6";
import AlgoNode from "./node.vue";
import { dagdata, statusList } from "../data/data";
// hotfix
// window.Fragment = Fragment;
export default defineComponent({
name: "x6graph",
components: {
Graph,
Grid,
Background,
Clipboard,
Selection,
Keyboard,
MouseWheel,
Edge,
VueShape,
TeleportContainer,
Stencil, StencilGroup,
},
setup(props) {
const state = reactive({
nodes: dagdata.filter((i) => i.shape === "dag-node"),
edges: dagdata.filter((i) => i.shape === "dag-edge"),
});
const timer = ref();
const stencil = ref()
const showNodeStatus = () => {
const status = statusList.shift();
// console.log('showNodeStatus', status)
if (!status) {
clearInterval(timer.value);
return;
}
status.forEach((item) => {
const { id, status } = item;
state.nodes = state.nodes.map((node) => {
if (node.id === id) {
node.data = { ...node.data, status };
}
return node;
});
// console.log('nodes', newNodes, newNodes.map(i => i.data.status))
});
};
onMounted(() => {
showNodeStatus();
timer.value = setInterval(showNodeStatus, 3000);
return () => {
clearInterval(timer.value);
};
});
return {
...toRefs(state),
AlgoNode,
MiniMap,
stencil,
highlighting: {
magnetAdsorbed: {
name: "stroke",
args: {
attrs: {
fill: "#fff",
stroke: "#31d0c6",
strokeWidth: 4,
},
},
},
},
connecting: {
snap: true,
allowBlank: false,
allowLoop: false,
highlight: true,
connector: "algo-connector",
connectionPoint: "anchor",
anchor: "center",
validateMagnet({ magnet }) {
return magnet.getAttribute("port-group") !== "top";
},
createEdge({ sourceCell }) {
return sourceCell.model.graph.createEdge({
shape: "dag-edge",
attrs: {
line: {
strokeDasharray: "5 5",
},
},
zIndex: -1,
});
},
},
portConfig: {
groups: {
top: {
position: "top",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#C2C8D5",
strokeWidth: 1,
fill: "#fff",
},
},
},
bottom: {
position: "bottom",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#C2C8D5",
strokeWidth: 1,
fill: "#fff",
},
},
},
},
},
};
},
});
</script>
<style>
* {
box-sizing: content-box;
}
.App {
font-family: sans-serif;
text-align: center;
height: 600px;
min-height: 600px;
}
.node {
display: flex;
align-items: center;
width: 100%;
height: 45px;
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;
}
.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>
from antv-x6-vue.
不是很明白
能弄一个在线的,能复现问题的demo吗?放到codesandbox上面
应该是我onmount有什么东西没加载,但不知道咋搞了
from antv-x6-vue.
不好弄codesandbox,也可以把一些无关的或者涉密的内容去掉,放一个公开的github项目给我。
也可以创建私有的项目,把我加成协作者,我拉取代码来看问题
from antv-x6-vue.
Related Issues (14)
- demo HOT 4
- 支持Teleport HOT 4
- 更新demo HOT 1
- 增加tools
- vue-shape teleport渲染问题 HOT 3
- typescript
- [email protected]
- 节点更新数据逻辑 HOT 2
- vue shape
- vue-x6 HOT 1
- 切换到x6-html-shape
- Components HOT 2
- 支持群组
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from antv-x6-vue.