alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove node/edge-renderer slots

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-22 17:42:00 +01:00
parent c7dca2cbd0
commit 0b57ee167e
1 changed files with 55 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/VueFlow/VueFlow.vue
+55 -59
View File
@@ -206,66 +206,62 @@ const transitionName = computed(() => {
:multi-selection-key-code="store.multiSelectionKeyCode" :multi-selection-key-code="store.multiSelectionKeyCode"
:selection-key-code="store.selectionKeyCode" :selection-key-code="store.selectionKeyCode"
> >
<slot name="node-renderer" v-bind="{ nodes: store.getNodes, nodeTypes: store.getNodeTypes }"> <NodeRenderer
<NodeRenderer :key="`node-renderer-${store.$id}`"
:key="`node-renderer-${store.$id}`" :nodes="store.getNodes"
:nodes="store.getNodes" :node-types="store.getNodeTypes"
:node-types="store.getNodeTypes" :snap-to-grid="store.snapToGrid"
:snap-to-grid="store.snapToGrid" :snap-grid="store.snapGrid"
:snap-grid="store.snapGrid" :select-nodes-on-drag="store.selectNodesOnDrag"
:select-nodes-on-drag="store.selectNodesOnDrag" :transform="store.transform"
:transform="store.transform" :elements-selectable="store.elementsSelectable"
:elements-selectable="store.elementsSelectable" :nodes-draggable="store.nodesDraggable"
:nodes-draggable="store.nodesDraggable" :nodes-connectable="store.nodesConnectable"
:nodes-connectable="store.nodesConnectable" >
<template
v-for="nodeName of Object.keys(store.getNodeTypes)"
#[`node-${nodeName}`]="nodeProps"
:key="`node-${nodeName}-${store.$id}`"
> >
<template <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
v-for="nodeName of Object.keys(store.getNodeTypes)" </template>
#[`node-${nodeName}`]="nodeProps" </NodeRenderer>
:key="`node-${nodeName}-${store.$id}`" <EdgeRenderer
> :key="`edge-renderer-${store.$id}`"
<slot :name="`node-${nodeName}`" v-bind="nodeProps" /> :transform="store.transform"
</template> :dimensions="store.dimensions"
</NodeRenderer> :edges="store.getEdges"
</slot> :edge-types="store.getEdgeTypes"
<slot name="edge-renderer" v-bind="{ edges: store.getEdges, edgeTypes: store.getEdgeTypes }"> :nodes="store.getNodes"
<EdgeRenderer :selected-elements="store.selectedElements"
:key="`edge-renderer-${store.$id}`" :elements-selectable="store.elementsSelectable"
:transform="store.transform" :connection-node-id="store.connectionNodeId"
:dimensions="store.dimensions" :connction-handle-id="store.connectionHandleId"
:edges="store.getEdges" :connection-handle-type="store.connectionHandleType"
:edge-types="store.getEdgeTypes" :connection-position="store.connectionPosition"
:nodes="store.getNodes" :connection-mode="store.connectionMode"
:selected-elements="store.selectedElements" :nodes-connectable="store.nodesConnectable"
:elements-selectable="store.elementsSelectable" :connection-line-type="store.connectionLineType"
:connection-node-id="store.connectionNodeId" :connection-line-style="store.connectionLineStyle"
:connction-handle-id="store.connectionHandleId" :arrow-head-color="store.arrowHeadColor"
:connection-handle-type="store.connectionHandleType" :marker-end-id="store.markerEndId"
:connection-position="store.connectionPosition" :only-render-visible-elements="store.onlyRenderVisibleElements"
:connection-mode="store.connectionMode" >
:nodes-connectable="store.nodesConnectable" <template
:connection-line-type="store.connectionLineType" v-for="edgeName of Object.keys(store.getEdgeTypes)"
:connection-line-style="store.connectionLineStyle" #[`edge-${edgeName}`]="edgeProps"
:arrow-head-color="store.arrowHeadColor" :key="`edge-${edgeName}-${store.$id}`"
:marker-end-id="store.markerEndId"
:only-render-visible-elements="store.onlyRenderVisibleElements"
> >
<template <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
v-for="edgeName of Object.keys(store.getEdgeTypes)" </template>
#[`edge-${edgeName}`]="edgeProps" <template #custom-connection-line="customConnectionLineProps">
:key="`edge-${edgeName}-${store.$id}`" <slot
> :key="`connection-line-${store.$id}`"
<slot :name="`edge-${edgeName}`" v-bind="edgeProps" /> name="custom-connection-line"
</template> v-bind="customConnectionLineProps"
<template #custom-connection-line="customConnectionLineProps"> />
<slot </template>
:key="`connection-line-${store.$id}`" </EdgeRenderer>
name="custom-connection-line"
v-bind="customConnectionLineProps"
/>
</template>
</EdgeRenderer>
</slot>
</SelectionPane> </SelectionPane>
<slot name="zoom-pane" v-bind="zoomPaneProps"></slot> <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
</template> </template>
@@ -280,7 +276,7 @@ const transitionName = computed(() => {
</template> </template>
</Suspense> </Suspense>
</Transition> </Transition>
<slot v-bind="{ store }"></slot> <slot v-bind="store"></slot>
</div> </div>
</template> </template>
<style> <style>