docs: fit view on features flows on wrapper resize

This commit is contained in:
bcakmakoglu
2022-06-13 20:17:55 +02:00
committed by Braks
parent 2bd81fe173
commit 14000111f9
+7 -4
View File
@@ -4,6 +4,7 @@ import type { VueFlowStore } from '@braks/vue-flow'
const breakpoints = useBreakpoints(breakpointsTailwind)
const el = ref()
const instances: VueFlowStore[] = []
const onLoad = (instance: VueFlowStore) => {
@@ -15,13 +16,15 @@ const fitViews = () => {
instances.forEach((i) => i.fitView())
}
watchDebounced([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], () => fitViews(), {
debounce: 50,
})
const { stop } = useResizeObserver(
el,
useDebounceFn(() => fitViews(), 5),
)
onBeforeUnmount(stop)
</script>
<template>
<div class="w-full dark:(bg-black text-white)">
<div ref="el" class="w-full dark:(bg-black text-white)">
<div
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
>