单击选中瞄点？尝试锚点连出时不成功，尝试锚点连入时则成功

[zhongxi-tech]

如何选择瞄点呢？
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>