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

refactor(flow)!: properly nest components

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-12-20 19:29:52 +01:00
parent 6bdea72b20
commit c96f62f622
12 changed files with 121 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/VueFlow/VueFlow.vue
+21 -49
View File
@@ -1,10 +1,5 @@
<script lang="ts" setup>
import Renderer from '../Renderer/Renderer.vue'
import ZoomPane from '../ZoomPane/ZoomPane.vue'
import SelectionPane from '../SelectionPane/SelectionPane.vue'
import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
import { createHooks, initFlow } from '../../composables'
import type { FlowProps } from '../../types/flow'
@@ -23,14 +18,13 @@ const props = withDefaults(defineProps<FlowProps>(), {
panOnScroll: false,
paneMoveable: true,
})
const emit = defineEmits([...Object.keys(createHooks()), 'update:nodes', 'update:edges'])
const emit = defineEmits([...Object.keys(createHooks()), 'update:nodes', 'update:edges', 'update:elements', 'update:modelValue'])
const store = initFlow(emit, props.id)
const { nodes, edges } = useVModels(props, emit)
store.setState(props)
nextTick(() => store.setState(props))
watch(
() => props,
() => store.setState(props),
{ flush: 'post', deep: true },
(v) => nextTick(() => store.setState(v)),
{ flush: 'sync', deep: true },
)
</script>
<script lang="ts">
@@ -40,47 +34,25 @@ export default {
</script>
<template>
<div class="vue-flow">
<Suspense timeout="0">
<template #default>
<Renderer :key="`renderer-${store.id}`">
<ZoomPane :key="`zoom-pane-${store.id}`">
<template #default="zoomPaneProps">
<SelectionPane :key="`selection-pane-${store.id}`">
<NodeRenderer :key="`node-renderer-${store.id}`">
<template
v-for="nodeName of Object.keys(store.getNodeTypes)"
#[`node-${nodeName}`]="nodeProps"
:key="`node-${nodeName}-${store.id}`"
>
<slot :name="`node-${nodeName}`" v-bind="nodeProps" />
</template>
</NodeRenderer>
<EdgeRenderer :key="`edge-renderer-${store.id}`">
<template
v-for="edgeName of Object.keys(store.getEdgeTypes)"
#[`edge-${edgeName}`]="edgeProps"
:key="`edge-${edgeName}-${store.id}`"
>
<slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
</template>
<template #custom-connection-line="customConnectionLineProps">
<slot name="custom-connection-line" v-bind="customConnectionLineProps" />
</template>
</EdgeRenderer>
</SelectionPane>
<slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
</template>
</ZoomPane>
</Renderer>
<Renderer :key="`renderer-${store.id}`">
<template
v-for="nodeName of Object.keys(store.getNodeTypes)"
#[`node-${nodeName}`]="nodeProps"
:key="`node-${nodeName}-${store.id}`"
>
<slot :name="`node-${nodeName}`" v-bind="nodeProps" />
</template>
<template #fallback>
<slot name="loading-indicator">
<LoadingIndicator v-if="store.loading && store.loading !== '' && !store.isReady" :label="store.loading">
<slot name="loading-label" />
</LoadingIndicator>
</slot>
<template
v-for="edgeName of Object.keys(store.getEdgeTypes)"
#[`edge-${edgeName}`]="edgeProps"
:key="`edge-${edgeName}-${store.id}`"
>
<slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
</template>
</Suspense>
<template #custom-connection-line="customConnectionLineProps">
<slot name="custom-connection-line" v-bind="customConnectionLineProps" />
</template>
</Renderer>
<slot v-bind="store"></slot>
</div>
</template>