feat(nodes): Pass node slots as injections to wrapper
* Avoids drilling slots which causes huge performance issues when 100+ nodes are present due to re-binding of props on each level
This commit is contained in:
@@ -34,26 +34,8 @@ const transform = computed(() => `translate(${store.transform[0]}px,${store.tran
|
||||
</script>
|
||||
<template>
|
||||
<div :key="`transformation-pane-${id}`" class="vue-flow__transformation-pane vue-flow__container" :style="{ transform }">
|
||||
<NodeRenderer v-if="store.getNodes.length" :key="`node-renderer-${id}`">
|
||||
<template
|
||||
v-for="nodeName of Object.keys(store.getNodeTypes)"
|
||||
#[`node-${nodeName}`]="nodeProps"
|
||||
:key="`node-${nodeName}-${id}`"
|
||||
>
|
||||
<slot :name="`node-${nodeName}`" v-bind="nodeProps" />
|
||||
</template>
|
||||
</NodeRenderer>
|
||||
<NodeRenderer v-if="store.getNodes.length" :key="`node-renderer-${id}`" />
|
||||
<EdgeRenderer :key="`edge-renderer-${id}`">
|
||||
<template
|
||||
v-for="edgeName of Object.keys(store.getEdgeTypes)"
|
||||
#[`edge-${edgeName}`]="edgeProps"
|
||||
:key="`edge-${edgeName}-${id}`"
|
||||
>
|
||||
<slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
|
||||
</template>
|
||||
<template #connection-line="customConnectionLineProps">
|
||||
<slot name="connection-line" v-bind="customConnectionLineProps" />
|
||||
</template>
|
||||
</EdgeRenderer>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user