Support for Multiple Source and Target Positions?

[pjatx]

Hey There,

Thanks for the amazing library! Wondering if it's possible to allow edges to connect to more than one position / side of a node. I have a complex workflow where I want nodes coming in and exiting from both the tops / bottoms and sides and am unsure how to accomplish that currently.

Any help would be greatly appreciated.

[bcakmakoglu]

You can implement custom nodes that have as many handles as you want on whatever side you want.
Check the Custom Node Example. In that example there is a node with 2 handles on the right side.
Also read this part of the docs if you plan on adding handles dynamically.

If you want edges to be able to fork, you'll have to implement your own custom edges as the built-in ones only handle connection from one handle to another.

[pjatx]

Ok thanks - yeah, the handles were just rendering in a weird way when enclosing in a div - even if I make the div fill it's parent container, but will keep playing around with this.

[bcakmakoglu]

Can you give me a screenshot of what you mean?

[pjatx]

Yeah, sure thing. I'll just setup a sandbox and see if I can reproduce.

Other weird thing is that I have tried default values and they still return undefined. Still getting up to speed with the composition API after being mostly in Vue 2.

[bcakmakoglu]

const props = withDefaults(
  defineProps({
    data: {
      type: Object,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
  }),
  {
    data: () => ({}),
  },
)

This would be how you define defaults for defineProps in composition API.
If you want to destructure props (similar to React) you'll have to enable reactivityTransform.

Then you could just do this

<script setup>
const { data = {} } = defineProps({
  data: {
    type: Object,
    required: true,
  },
  label: {
    type: String,
    required: true,
  },
})
</script>

But without reactivityTransform destructuring props makes them lose their reactivity.

[pjatx]

Ah that makes sense. I actually realized I was accessing the props incorrectly - thought they would be available under the data key but they are in props.data instead. Unstuck now and no more v-if. Thank you : )