34 lines
995 B
TypeScript
34 lines
995 B
TypeScript
import { createEventHook, MaybeRef, unrefElement, until, useEventListener, useResizeObserver } from '@vueuse/core'
|
|
import { getDimensions } from '../utils'
|
|
import { Dimensions } from '../types'
|
|
|
|
export default (rendererNode: MaybeRef<HTMLDivElement>, updateSize: (size: Dimensions) => any) => {
|
|
const resizeHandlerHook = createEventHook()
|
|
const updateDimensions = () => {
|
|
if (!unrefElement(rendererNode)) {
|
|
return
|
|
}
|
|
|
|
const size = getDimensions(unrefElement(rendererNode))
|
|
|
|
if (size.height === 0 || size.width === 0) {
|
|
console.log('The revue Flow parent container needs a width and a height to render the graph.')
|
|
}
|
|
|
|
updateSize(size)
|
|
}
|
|
|
|
until(rendererNode)
|
|
.toBeTruthy()
|
|
.then(() => {
|
|
updateDimensions()
|
|
useEventListener(window, 'resize', updateDimensions)
|
|
useResizeObserver(unrefElement(rendererNode), () => updateDimensions())
|
|
resizeHandlerHook.trigger(true)
|
|
})
|
|
|
|
return {
|
|
onReady: resizeHandlerHook.on
|
|
}
|
|
}
|