From 09e63e0ad676c753addbe45e1f5ac828bbb64beb Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Thu, 11 May 2023 14:44:34 +0200 Subject: [PATCH] chore(docs): avoid jumping intro Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- docs/components/home/flows/Intro.vue | 206 ++++++++++++++------------- 1 file changed, 105 insertions(+), 101 deletions(-) diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue index abd4b481..5408f9ad 100644 --- a/docs/components/home/flows/Intro.vue +++ b/docs/components/home/flows/Intro.vue @@ -2,6 +2,7 @@ import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core' import { breakpointsTailwind, useBreakpoints } from '@vueuse/core' import { Background } from '@vue-flow/background' +import { onBeforeUnmount } from 'vue' import Heart from '~icons/mdi/heart' const breakpoints = useBreakpoints(breakpointsTailwind) @@ -56,7 +57,7 @@ const initialEdges = [ style: { strokeWidth: 4, stroke: '#0ea5e9' }, }, ] -const { getNodes, findNode, setEdges, updateNodeInternals, dimensions } = useVueFlow({ +const { getNodes, findNode, setEdges, updateNodeInternals, dimensions, nodes } = useVueFlow({ nodes: [ { id: 'intro', type: 'box', position: { x: 0, y: 0 } }, { id: 'examples', type: 'box', position: { x: -50, y: 400 } }, @@ -75,111 +76,114 @@ const { getNodes, findNode, setEdges, updateNodeInternals, dimensions } = useVue const el = templateRef('el', null) -const setElements = useDebounceFn(() => { - const offsetX = dimensions.value.width / 2 - const offsetY = dimensions.value.height / 4 +const setElements = useDebounceFn( + () => { + const offsetX = dimensions.value.width / 2 + const offsetY = dimensions.value.height / 4 - if (breakpoints.isSmaller('md') && currentBreakpoint.value !== 'sm') { - const mainNode = findNode('intro')! - - currentBreakpoint.value = 'sm' - - getNodes.value.forEach((node) => { - 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: offsetX - node.dimensions.width / 2, - y: mainNode.position.y + mainNode.dimensions.height * 1.5, - } - break - case 'documentation': - node.position = { - x: offsetX - node.dimensions.width / 2, - y: mainNode.position.y + mainNode.dimensions.height * 2 + 50, - } - break - case 'acknowledgement': - node.position = { - x: offsetX - node.dimensions.width / 2, - y: mainNode.position.y + mainNode.dimensions.height * 3, - } - 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) => { + if (breakpoints.isSmaller('md') && currentBreakpoint.value !== 'sm') { 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 - } + + currentBreakpoint.value = 'sm' + + getNodes.value.forEach((node) => { + 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: offsetX - node.dimensions.width / 2, + y: mainNode.position.y + mainNode.dimensions.height * 1.5, + } + break + case 'documentation': + node.position = { + x: offsetX - node.dimensions.width / 2, + y: mainNode.position.y + mainNode.dimensions.height * 2 + 50, + } + break + case 'acknowledgement': + node.position = { + x: offsetX - node.dimensions.width / 2, + y: mainNode.position.y + mainNode.dimensions.height * 3, + } + 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), +) - setEdges(initialEdges) - } +const { stop } = useResizeObserver(el, setElements) - nextTick(() => { - updateNodeInternals() - }) -}, 50) - -onMounted(() => { - watch(dimensions, setElements, { deep: true, immediate: true }) -}) +onBeforeUnmount(stop) function scrollTo() { const el = document.getElementById('acknowledgement')