schlechtenburg/packages/core/lib/use-resize-observer.ts

57 lines
1.5 KiB
TypeScript
Raw Normal View History

2021-03-08 15:29:35 +00:00
/// <reference types="resize-observer-browser" />
2020-12-30 01:32:46 +00:00
import {
Ref,
ref,
inject,
watch,
provide,
} from 'vue';
interface BlockRect {
height: number;
width: number;
left: number;
top: number;
}
2021-03-08 15:29:35 +00:00
export const SymBlockDimensions = Symbol('Schlechtenburg block dimensions');
export const SymEditorDimensions = Symbol('Schlechtenburg editor dimensions');
2020-12-30 01:32:46 +00:00
export function useResizeObserver(el: Ref<null|HTMLElement>, symbol: symbol) {
const dimensions: Ref<null|BlockRect> = ref(null);
provide(symbol, dimensions);
const triggerSizeCalculation = () => {
if (!el.value) {
return;
}
const clientRect = el.value.getBoundingClientRect();
dimensions.value = {
width: clientRect.width,
height: clientRect.height,
left: el.value.offsetLeft,
top: el.value.offsetTop,
};
};
const resizeObserver = new ResizeObserver(triggerSizeCalculation);
const mutationObserver = new MutationObserver(triggerSizeCalculation);
watch(el, () => {
if (!el.value) {
return;
}
resizeObserver.observe(el.value);
mutationObserver.observe(el.value, { attributes: true, childList: false, subtree: false });
});
return { triggerSizeCalculation, dimensions };
}
export function useBlockSizing() {
2021-03-08 15:29:35 +00:00
const editorDimensions: Ref<BlockRect|null> = inject(SymEditorDimensions, ref(null));
const blockDimensions: Ref<BlockRect|null> = inject(SymBlockDimensions, ref(null));
2020-12-30 01:32:46 +00:00
return { editorDimensions, blockDimensions };
}