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:
Braks
2022-04-04 21:42:48 +02:00
parent b47197f498
commit 4cbdf0ccc1
6 changed files with 39 additions and 84 deletions
@@ -165,23 +165,6 @@ export default {
<template>
<div ref="zoomPane" class="vue-flow__renderer vue-flow__container">
<TransformationPane>
<template
v-for="nodeName of Object.keys(store.getNodeTypes)"
#[`node-${nodeName}`]="nodeProps"
:key="`node-${nodeName}-${id}`"
>
<slot :name="`node-${nodeName}`" v-bind="nodeProps" />
</template>
<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>
<slot />
</TransformationPane>
<SelectionPane :key="`selection-pane-${id}`" />