LayoutContainersProvider

The LayoutContainersProvider component is used at the top-level of your design experience to give child components access to the LayoutContainers context.

import { LayoutContainersProvider } from '@design-stack-ct/ida-framework';

export function CustomDesignExperience() {
    return (
        <LayoutContainersProvider>
            {/* Your components here */}
        </LayoutContainersProvider>;
    );
}

The LayoutContainersProvider is meant to be used in conjuction with the useLayoutContainers hook to register and access the viewport and pan containers provided by the LayoutContainers context.

import { LayoutContainersProvider, useLayoutContainers, PanArea, Viewport } from '@design-stack-ct/ida-framework';

export function CustomPanArea() {
    const { setPanContainer } = useLayoutContainers();

    return (
        <PanArea registerPanContainer={setPanContainer} />
    );
}

export function CustomViewport()) {
    const { setViewportContainer } = useLayoutContainers();

    return (
        <Viewport registerViewport={setViewportContainer} />
    );
}

export function useExampleHook() {
    const { panContainer, viewportContainer } = useLayoutContainers();

    console.log('Pan container bounds: ', panContainer.getBoundingClientRect());
    console.log('Viewport container bounds: ', viewportContainer.getBoundingClientRect());
}

export function CustomDesignExperience() {
    return (
        <LayoutContainersProvider>
            <CustomPanArea />
            <CustomViewport />
        </LayoutContainersProvider>
    );
}