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

docs: fit view on features flows on wrapper resize

Browse Source
This commit is contained in:
bcakmakoglu
2022-06-13 20:17:55 +02:00
committed by Braks
parent 2bd81fe173
commit 14000111f9
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/Features.vue
+7 -4
View File
@@ -4,6 +4,7 @@ import type { VueFlowStore } from '@braks/vue-flow'
const breakpoints = useBreakpoints(breakpointsTailwind) const breakpoints = useBreakpoints(breakpointsTailwind)
const el = ref()
const instances: VueFlowStore[] = [] const instances: VueFlowStore[] = []
const onLoad = (instance: VueFlowStore) => { const onLoad = (instance: VueFlowStore) => {
@@ -15,13 +16,15 @@ const fitViews = () => {
instances.forEach((i) => i.fitView()) instances.forEach((i) => i.fitView())
} }
watchDebounced([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], () => fitViews(), { const { stop } = useResizeObserver(
debounce: 50, el,
}) useDebounceFn(() => fitViews(), 5),
)
onBeforeUnmount(stop)
</script> </script>
<template> <template>
<div class="w-full dark:(bg-black text-white)"> <div ref="el" class="w-full dark:(bg-black text-white)">
<div <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" 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"
> >