docs: fitview mixing edges up on resize
This commit is contained in:
@@ -2,8 +2,6 @@
|
|||||||
import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
|
import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
|
||||||
import Blobity from 'blobity'
|
import Blobity from 'blobity'
|
||||||
import Intro from './flows/Intro.vue'
|
import Intro from './flows/Intro.vue'
|
||||||
import ArrowLeft from '~icons/carbon/arrow-left'
|
|
||||||
import ArrowRight from '~icons/carbon/arrow-right'
|
|
||||||
|
|
||||||
const dark = useDark({
|
const dark = useDark({
|
||||||
selector: 'html',
|
selector: 'html',
|
||||||
|
|||||||
@@ -42,10 +42,6 @@ const edgeId = ref('eintro-documentation')
|
|||||||
const el = templateRef<HTMLDivElement>('el', null)
|
const el = templateRef<HTMLDivElement>('el', null)
|
||||||
|
|
||||||
onPaneReady(({ fitView }) => {
|
onPaneReady(({ fitView }) => {
|
||||||
fitView({
|
|
||||||
duration: 1500,
|
|
||||||
})
|
|
||||||
|
|
||||||
const setNodes = () => {
|
const setNodes = () => {
|
||||||
if (breakpoints.isSmaller('md')) {
|
if (breakpoints.isSmaller('md')) {
|
||||||
const mainNode = getNode.value('intro')!
|
const mainNode = getNode.value('intro')!
|
||||||
@@ -69,14 +65,24 @@ onPaneReady(({ fitView }) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
|
nextTick(() => {
|
||||||
source: 'examples',
|
const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
|
||||||
target: 'documentation',
|
source: 'examples',
|
||||||
targetHandle: null,
|
target: 'documentation',
|
||||||
sourceHandle: null,
|
targetHandle: null,
|
||||||
|
sourceHandle: null,
|
||||||
|
})
|
||||||
|
if (newEdge) edgeId.value = newEdge.id
|
||||||
|
|
||||||
|
fitView({
|
||||||
|
duration: 1500,
|
||||||
|
})
|
||||||
})
|
})
|
||||||
if (newEdge) edgeId.value = newEdge.id
|
|
||||||
} else {
|
} else {
|
||||||
|
fitView({
|
||||||
|
duration: 1500,
|
||||||
|
})
|
||||||
|
|
||||||
getNodes.value.forEach((node) => {
|
getNodes.value.forEach((node) => {
|
||||||
const mainNode = getNode.value('intro')!
|
const mainNode = getNode.value('intro')!
|
||||||
switch (node.id) {
|
switch (node.id) {
|
||||||
@@ -95,13 +101,15 @@ onPaneReady(({ fitView }) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
|
nextTick(() => {
|
||||||
source: 'intro',
|
const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
|
||||||
target: 'documentation',
|
source: 'intro',
|
||||||
targetHandle: null,
|
target: 'documentation',
|
||||||
sourceHandle: null,
|
targetHandle: null,
|
||||||
|
sourceHandle: null,
|
||||||
|
})
|
||||||
|
if (newEdge) edgeId.value = newEdge.id
|
||||||
})
|
})
|
||||||
if (newEdge) edgeId.value = newEdge.id
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(
|
setTimeout(
|
||||||
|
|||||||
Reference in New Issue
Block a user