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

chore(docs): cleanup intro

Browse Source
This commit is contained in:
braks
2024-01-29 21:56:44 +01:00
committed by Braks
parent e427e21c28
commit 5d2427ec2e
1 changed files with 100 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/flows/Intro.vue
+100 -105
View File
@@ -56,7 +56,7 @@ const initialEdges = [
style: { strokeWidth: 4, stroke: '#0ea5e9' }, style: { strokeWidth: 4, stroke: '#0ea5e9' },
}, },
] ]
const { getNodes, findNode, setEdges, updateNodeInternals, dimensions, onNodesInitialized } = useVueFlow({ const { getNodes, findNode, setEdges, updateNodeInternals, dimensions, onPaneReady } = useVueFlow({
nodes: [ nodes: [
{ id: 'intro', type: 'box', position: { x: 0, y: 0 } }, { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
{ id: 'examples', type: 'box', position: { x: -50, y: 400 } }, { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -75,117 +75,112 @@ const { getNodes, findNode, setEdges, updateNodeInternals, dimensions, onNodesIn
const el = templateRef<HTMLDivElement>('el', null) const el = templateRef<HTMLDivElement>('el', null)
const setElements = useDebounceFn( const setElements = useDebounceFn(() => {
() => { const offsetX = dimensions.value.width / 2
const offsetX = dimensions.value.width / 2 const offsetY = dimensions.value.height / 4
const offsetY = dimensions.value.height / 4
if (breakpoints.isSmaller('md') && currentBreakpoint.value !== 'sm') { if (breakpoints.isSmaller('md') && currentBreakpoint.value !== 'sm') {
const mainNode = findNode('intro')! const mainNode = findNode('intro')!
currentBreakpoint.value = 'sm' currentBreakpoint.value = 'sm'
getNodes.value.forEach((node) => { getNodes.value.forEach((node) => {
switch (node.id) { switch (node.id) {
case 'intro': case 'intro':
node.position = { node.position = {
x: offsetX - node.dimensions.width / 2, x: offsetX - node.dimensions.width / 2,
y: offsetY - node.dimensions.height / 2, y: offsetY - node.dimensions.height / 2,
} }
break break
case 'examples': case 'examples':
node.position = { node.position = {
x: offsetX - node.dimensions.width / 2, x: offsetX - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 1.5, y: mainNode.position.y + mainNode.dimensions.height * 1.5,
} }
break break
case 'documentation': case 'documentation':
node.position = { node.position = {
x: offsetX - node.dimensions.width / 2, x: offsetX - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 2 + 50, y: mainNode.position.y + mainNode.dimensions.height * 2 + 50,
} }
break break
case 'acknowledgement': case 'acknowledgement':
node.position = { node.position = {
x: offsetX - node.dimensions.width / 2, x: offsetX - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 3, y: mainNode.position.y + mainNode.dimensions.height * 3,
} }
break break
} }
})
setEdges(() => {
return [
{
id: 'eintro-examples',
sourceHandle: 'a',
source: 'intro',
target: 'examples',
animated: true,
style: { strokeWidth: 4, stroke: '#ef467e' },
},
{
id: 'eexamples-documentation',
source: 'examples',
target: 'documentation',
animated: true,
style: { strokeWidth: 4, stroke: '#f97316' },
},
{
id: 'edocumentation-acknowledgement',
source: 'documentation',
target: 'acknowledgement',
animated: true,
style: { strokeWidth: 4, stroke: '#0ea5e9' },
},
]
})
} else if (!breakpoints.isSmaller('md')) {
currentBreakpoint.value = 'md'
getNodes.value.forEach((node) => {
const mainNode = findNode('intro')!
switch (node.id) {
case 'intro':
node.position = { x: offsetX - node.dimensions.width / 2, y: offsetY - node.dimensions.height / 2 }
break
case 'examples':
node.position = {
x: mainNode.position.x - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 1.5,
}
break
case 'documentation':
node.position = {
x: mainNode.position.x + mainNode.dimensions.width - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 1.5,
}
break
case 'acknowledgement':
node.position = {
x: offsetX - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 2,
}
break
}
})
setEdges(initialEdges)
}
nextTick(() => {
updateNodeInternals()
}) })
},
() => (currentBreakpoint.value === null ? 5 : 50),
)
onNodesInitialized(() => { setEdges(() => {
setElements() return [
{
id: 'eintro-examples',
sourceHandle: 'a',
source: 'intro',
target: 'examples',
animated: true,
style: { strokeWidth: 4, stroke: '#ef467e' },
},
{
id: 'eexamples-documentation',
source: 'examples',
target: 'documentation',
animated: true,
style: { strokeWidth: 4, stroke: '#f97316' },
},
{
id: 'edocumentation-acknowledgement',
source: 'documentation',
target: 'acknowledgement',
animated: true,
style: { strokeWidth: 4, stroke: '#0ea5e9' },
},
]
})
} else if (!breakpoints.isSmaller('md')) {
currentBreakpoint.value = 'md'
getNodes.value.forEach((node) => {
const mainNode = findNode('intro')!
switch (node.id) {
case 'intro':
node.position = { x: offsetX - node.dimensions.width / 2, y: offsetY - node.dimensions.height / 2 }
break
case 'examples':
node.position = {
x: mainNode.position.x - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 1.5,
}
break
case 'documentation':
node.position = {
x: mainNode.position.x + mainNode.dimensions.width - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 1.5,
}
break
case 'acknowledgement':
node.position = {
x: offsetX - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 2,
}
break
}
})
setEdges(initialEdges)
}
nextTick(() => {
updateNodeInternals()
})
}, 1)
onMounted(() => {
useResizeObserver(el, setElements)
}) })
useResizeObserver(el, setElements)
function scrollTo() { function scrollTo() {
const el = document.getElementById('acknowledgement') const el = document.getElementById('acknowledgement')