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

docs: Remove next tick cb in Home.vue

Browse Source
This commit is contained in:
Braks
2022-04-11 11:30:10 +02:00
parent c0c67c6ee6
commit 969dd87e71
1 changed files with 54 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/Home.vue
+54 -61
View File
@@ -66,73 +66,66 @@ const init = ref(false)
const edgeId = ref('eintro-documentation') const edgeId = ref('eintro-documentation')
onPaneReady(({ fitView }) => { onPaneReady(({ fitView }) => {
fitView({ fitView({
nodes: ['intro', 'examples', 'documentation'],
duration: 1500, duration: 1500,
}) })
watch( const setNodes = () => {
[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], if (breakpoints.isSmaller('md')) {
() => { getNodes.value.forEach((node) => {
if (breakpoints.isSmaller('md')) { switch (node.id) {
nextTick(() => { case 'intro':
getNodes.value.forEach((node) => { node.position = { x: 0, y: -50 }
switch (node.id) { break
case 'intro': case 'examples':
node.position = { x: 0, y: -50 } node.position = { x: getNode.value('intro')!.dimensions.width / 2 - node.dimensions.width / 2, y: 300 }
break break
case 'examples': case 'documentation':
node.position = { x: getNode.value('intro')!.dimensions.width / 2 - node.dimensions.width / 2, y: 300 } node.position = { x: getNode.value('intro')!.dimensions.width / 2 - node.dimensions.width / 2, y: 500 }
break break
case 'documentation': }
node.position = { x: getNode.value('intro')!.dimensions.width / 2 - node.dimensions.width / 2, y: 500 } })
break
}
})
const newEdge = updateEdge(getEdge.value(edgeId.value)!, { const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
source: 'examples', source: 'examples',
target: 'documentation', target: 'documentation',
sourceHandle: null, sourceHandle: null,
targetHandle: null, targetHandle: null,
}) })
if (newEdge) edgeId.value = newEdge.id if (newEdge) edgeId.value = newEdge.id
}) } else {
} else { getNodes.value.forEach((node) => {
nextTick(() => { switch (node.id) {
getNodes.value.forEach((node) => { case 'intro':
switch (node.id) { node.position = { x: 0, y: 0 }
case 'intro': break
node.position = { x: 0, y: 0 } case 'examples':
break node.position = { x: -node.dimensions.width / 2, y: 400 }
case 'examples': break
node.position = { x: -node.dimensions.width / 2, y: 400 } case 'documentation':
break node.position = { x: getNode.value('intro')!.dimensions.width / 2 + node.dimensions.width / 2, y: 400 }
case 'documentation': break
node.position = { x: getNode.value('intro')!.dimensions.width / 2 + node.dimensions.width / 2, y: 400 } }
break })
}
})
const newEdge = updateEdge(getEdge.value(edgeId.value)!, { const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
source: 'intro', source: 'intro',
target: 'documentation', target: 'documentation',
sourceHandle: null, sourceHandle: null,
targetHandle: null, targetHandle: null,
}) })
if (newEdge) edgeId.value = newEdge.id if (newEdge) edgeId.value = newEdge.id
}) }
}
setTimeout( setTimeout(
() => { () => {
if (!init.value) init.value = true if (!init.value) init.value = true
instance.value?.fitView() else instance.value?.fitView()
}, },
init.value ? 5 : 1505, init.value ? 5 : 1505,
) )
}, }
{ immediate: true },
) watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], setNodes, { immediate: true })
}) })
</script> </script>
<template> <template>