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

chore(docs): update home page

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-03-03 13:02:10 +01:00
parent 4bfd89bca5
commit 6d19bb165b
5 changed files with 57 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/flows/Intro.vue
+34 -18
View File
@@ -53,7 +53,7 @@ const initialEdges = [
style: { strokeWidth: 4, stroke: '#0ea5e9' },
},
]
const { onNodeClick, getNodes, findNode, setEdges, updateNodeInternals, fitView } = useVueFlow({
const { onNodeClick, getNodes, findNode, setEdges, updateNodeInternals, dimensions, onNodesInitialized } = useVueFlow({
nodes: [
{ id: 'intro', type: 'box', position: { x: 0, y: 0 } },
{ id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -115,33 +115,47 @@ onNodeClick(async ({ node }) => {
}
})
onNodesInitialized(setElements)
const el = templateRef<HTMLDivElement>('el', null)
const setNodes = () => {
function setElements() {
const offsetX = dimensions.value.width / 2
const offsetY = dimensions.value.height / 4
if (breakpoints.isSmaller('md')) {
const mainNode = findNode('intro')!
getNodes.value.forEach((node) => {
switch (node.id) {
case 'intro':
node.position = { x: 0, y: 0 }
if (node.dimensions.width >= dimensions.value.width) {
node.width = dimensions.value.width - 50
} else {
node.width = node.dimensions.width
}
node.position = {
x: offsetX - ((node.width as number) ?? node.dimensions.width) / 2,
y: offsetY - node.dimensions.height / 2,
}
break
case 'examples':
node.position = {
x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
y: mainNode.dimensions.height * 1.5,
x: offsetX - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 1.5,
}
break
case 'documentation':
node.position = {
x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
y: mainNode.dimensions.height * 2 + 50,
x: offsetX - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 2 + 50,
}
break
case 'acknowledgement':
node.position = {
x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
y: mainNode.dimensions.height * 3,
x: offsetX - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 3,
}
break
}
@@ -178,21 +192,25 @@ const setNodes = () => {
const mainNode = findNode('intro')!
switch (node.id) {
case 'intro':
node.position = { x: 0, y: 0 }
node.width = undefined
node.position = { x: offsetX - node.dimensions.width / 2, y: offsetY - node.dimensions.height / 2 }
break
case 'examples':
node.position = { x: -node.dimensions.width / 2, y: mainNode.dimensions.height * 1.5 }
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.dimensions.width - node.dimensions.width / 2,
y: mainNode.dimensions.height * 1.5,
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: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
y: mainNode.dimensions.height * 2,
x: offsetX - node.dimensions.width / 2,
y: mainNode.position.y + mainNode.dimensions.height * 2,
}
break
}
@@ -203,11 +221,9 @@ const setNodes = () => {
nextTick(() => {
updateNodeInternals()
fitView()
})
}
const { stop } = useResizeObserver(el, useDebounceFn(setNodes, 5))
const { stop } = useResizeObserver(el, useDebounceFn(setElements, 5))
onBeforeUnmount(stop)
const scrollTo = () => {