如何选择瞄点呢?
1.目前可以实现点击选择节点,无法选择锚点
2.尝试锚点连出,不成功,尝试锚点连入,成功
app.vue如下:
添加节点
添加区域
自动布局
Hi, {{ node.id }}
Hi, {{ node.name }}
{{ edge.label }}
<script>
import { ref, shallowRef,getCurrentInstance,onMounted, onUpdated} from 'vue'
import { DotGrid, DragonflyCanvas, DragonflyEndpoint, StraightLine, } from '../build'
import CanvasConfig from './CanvasConfig.vue';
import CanvasData from './CanvasData.vue';
import './components/dragonfly-dag.less'
export default {
name: 'App',
components: {
DragonflyEndpoint,
CanvasData,
CanvasConfig,
DragonflyCanvas
},
data() {
return {
config: {
zoomScale: ref(1),
minZoomScale: ref(0.1),
maxZoomScale: ref(5),
zoomSensitivity: ref(0.001),
layout: {
rankdir: 'TB',
marginx: 40,
marginy: 40,
},
showArrow: ref(false),
arrowZoomRatio: ref(1),
arrowPosition: ref(100),
canvasDragging: ref('select'),
nodeDragging: ref('move'),
endpointDragging: true,
canvasWheeling: ref('zoom'),
//endpointDragging: ref('on'),
endpointDragging: true,
lineShape: shallowRef(StraightLine),
showEdgeLabels: ref(true),
gridSize: ref(20),
maxGridScale: ref(2),
minGridScale: ref(0.5),
gridShape: shallowRef(DotGrid)
},
feed: 1,
nodes: [
{
id: 's1',
status: 'queueing',
czw:{
"a":1
} ,
name:"test",
movable:true,
linkable:true,
/*endpoints:[
{
id:"test1",
label:"a",
orientation:"left", //String Y - 锚点显示位置,可选值为top、bottom、left、right
linkable:true,// Boolean N true 锚点是否可连线(无论连入还是连出)
group:{
linkIn:undefined,
linkOut:undefined
}
}
]
*/
},
{ id: 's2', status: 'queueing' ,
/*endpoints:[
{
id:"test2",
label:"a",
orientation:"right", //String Y - 锚点显示位置,可选值为top、bottom、left、right
linkable:true,// Boolean N true 锚点是否可连线(无论连入还是连出)
group:{
//name:undefined,// String N undefined 当前节点/锚点所属组名
linkIn:undefined,
linkOut:undefined
}
}
]
*/
}],
edges: [{ id: "s1-succeeded-s2", "source": "s1", "target": "s2" },
{ "id": "s2-test1", "source": "s2", "target": "s1", "targetEndpoint": "test1" }],
zones: [],
layout: {"s1": { "x": 240, "y": 140, "width": 64, "height": 50 }, "s2": { "x": 99, "y": 135, "width": 64, "height": 50 } },
}
},
emits:{
showSYCM: val => {
console.log(val);
this.autoLayout();
return true;
}
},
setup() {
// getCurrentInstance()可以获取组件实例
const instance = getCurrentInstance()
//console.log(instance);
//onMounted()
onMounted(()=>{
// 组件实例的上下文才是我们熟悉的this
//instance.ctx.autoLayout(); // 'foo'
instance.ctx.$nextTick(() => {
let my = { "s1": { "x": 240, "y": 43, "width": 135, "height": 50 }, "s2": { "x": 137, "y": 176, "width": 109, "height": 50 } }
instance.ctx.$refs.canvas.initLayout(my)
// instance.ctx.layout =
console.log("instance.ctx.layout-----)"); // '我是bar方法'
})
console.log(" onMounted:",instance.ctx.layout); // '我是bar方法'
})
return {}
},
methods: {
addNode() {
// DON'T DO THIS
this.nodes.push({ id: `${this.feed}` })
// DO THIS
// this.nodes = [...this.nodes, {id: `${this.feed}`}]
this.feed++
},
addZone() {
this.zones.push({ id: `${this.feed}` })
this.feed++
},
async onAddingEdge({ source, target, sourceEndpoint, targetEndpoint }) {
return new Promise(resolve => {
setTimeout(() => {
resolve({
id: `${sourceEndpoint ?? source}-${targetEndpoint ?? target}`,
source,
target,
sourceEndpoint,
targetEndpoint,
label: (sourceEndpoint ?? source).split('-')[1]
}) // 用自定义数据连接
// resolve(false) // 取消连接
// resolve(undefined) // 用默数据连接
}, 100)
})
},
autoLayout() {
let my = { "s1": { "x": 182, "y": 43, "width": 135, "height": 50 }, "s2": { "x": 137, "y": 176, "width": 109, "height": 50 } }
//this.layout = { "s1": { "x": 182, "y": 43, "width": 135, "height": 50 }, "s2": { "x": 137, "y": 176, "width": 109, "height": 50 } }
this.$refs.canvas.initLayout(my)
//this.layout = { "s1": { "x": 182, "y": 43, "width": 135, "height": 50 }, "s2": { "x": 137, "y": 176, "width": 109, "height": 50 } }
alert(123);
//this.$refs.canvas.resetLayout()
},
onDblClick(event) {
const axis = this.$refs.canvas.translateMouseEvent(event)
if (axis) {
this.nodes = [...this.nodes, { id: 's3' }]
this.$nextTick(() => {
this.layout['s3'] = { ...this.layout['s3'], ...axis }
})
}
}
}
}
</script>
<style lang="less">
.node {
padding: 1em;
background-color: #9cdfff;
}
.succeeded-label {
background-color: #e6ffe6;
border-radius: 4px;
color: #bbb;
line-height: 1em;
padding: 2px 2px;
left: 10px;
top: -15px;
}
.failed-label {
background-color: #ffe6e6;
border-radius: 4px;
color: #bbb;
line-height: 1em;
padding: 2px 2px;
left: 10px;
top: 5px;
}
.succeeded-endpoint {
border-color: #7acc7a !important;
}
.failed-endpoint {
border-color: #cc7a7a !important;
}
.edge-label-succeeded {
position: relative;
top: -1em;
background-color: #7acc7a;
border-radius: 4px;
color: #fff;
line-height: 1em;
padding: 2px 2px;
}
.edge-label-failed {
position: relative;
top: -1em;
background-color: #cc7a7a;
border-radius: 4px;
color: #fff;
line-height: 1em;
padding: 2px 2px;
}
</style>