IDA Framework Components Connected to Design State

This project empowers many of the react components provided from @design-stack-ct/ida-framework by wiring up state from @design-stack-ct/interactive-design-engine-core to these components. The following list of components are provided by this project, already connected to the design state.

• SelectArea
• PanArea
• DesignArea
• ItemPosition

SelectArea

The SelectArea component from design-engine-react-components uses the base SelectArea from ida-framework and connects it to the InteractiveDesignEngine through the DesignEngineProvider. The component connects functionality from both the idaStore and layoutStore on the InteractiveDesignEngine so that users don't have to wire up each of the interactions themselves.

Instead, you can follow this example to get a working SelectArea.

import {
    DesignEngineProvider,
    SelectArea,
} from '@design-stack-ct/design-engine-react-components`;
import { InteractiveDesignEngine } from '@design-stack-ct/interactive-design-engine-core';

function CustomDesignExperience() {
    const [designEngine, setDesignEngine] = useState(() => new InteractiveDesignEngine(...));

    return (
        <DesignEngineProvider designEngine={designEngine}>
            <SelectArea>
                {...CustomChildComponents}
            </SelectArea>
        </DesignEngineProvider>
    );
}

PanArea

This library's PanArea component wraps ida-framework's PanArea component with a connection to the DesignEngineProvider, LayoutContainersProvider, and GlobalRotationProvider. The PanArea uses the layoutStore on the InteractiveDesignEngine to track all panning values. PanArea automatically handles wiring up setting the pan container for enabling our focus utilities to retrieve the correct bounding rectangle.

Example Component tree for PanArea:

import {
    DesignEngineProvider,
    PanArea,
    SelectArea,
} from '@design-stack-ct/design-engine-react-components`;
import { InteractiveDesignEngine } from '@design-stack-ct/interactive-design-engine-core';
import { LayoutContainersProvider, GlobalRotationProvider } from '@design-stack-ct/ida-framework';

function CustomDesignExperience() {
    const [designEngine, setDesignEngine] = useState(() => new InteractiveDesignEngine(...));

    return (
        <DesignEngineProvider designEngine={designEngine}>
            <LayoutContainersProvider>
                <GlobalRotationProvider>
                    <SelectArea>
                        <PanArea>
                            {...CustomChildComponents}
                        </PanArea>
                    </SelectArea>
                </GlobalRotationProvider>
            </LayoutContainersProvider>
        </DesignEngineProvider>
    );
}

DesignArea

design-engine-react-components also provides a connected DesignArea component using the underlying ida-framework DesignArea. This component only requires a DesignEngineProvider so that it can grab a PanelLayoutExtenson for the provided panel passed into the DesignArea. A PanelLayoutExtenson must be registered for the DesignArea to render correctly.

Example Component tree for DesignArea:

import {
    DesignEngineProvider,
    PanArea,
    SelectArea,
    PanelLayoutExtenson,
} from '@design-stack-ct/design-engine-react-components`;
import { InteractiveDesignEngine } from '@design-stack-ct/interactive-design-engine-core';
import { LayoutContainersProvider, GlobalRotationProvider } from '@design-stack-ct/ida-framework';

function CustomDesignExperience() {
    const [designEngine, setDesignEngine] = useState(() => new InteractiveDesignEngine(...));

    useEffect(() => {
        designEngine.designExtensionSystem.addExtension(PanelLayoutExtenson);
    }, []);

    return (
        <DesignEngineProvider designEngine={designEngine}>
            <LayoutContainersProvider>
                <GlobalRotationProvider>
                    <SelectArea>
                        <PanArea>
                            {
                                designEngine.cimDocStore.panels.map((panel) => (
                                    <DesignArea panel={panel} key={panel.id}>
                                        {...CustomChildComponents}
                                    </DesignArea>
                                ))
                            }
                        </PanArea>
                    </SelectArea>
                </GlobalRotationProvider>
            </LayoutContainersProvider>
        </DesignEngineProvider>
    );
}

ItemPosition

The ItemPosition component provided by this library wraps the ida-framework ItemPosition component and connects it to the provided item's IDAItemLayoutExtension in order to provide layouting capabilities for the items on each DesignLayer. In order to use this component, it must be an descendant of a DesignEngineProvider and the IDAItemLayoutExtension must be registered with the DesignExtensionSystem.

Example ItemPosition Usage:

// In CustomDesignLayer.tsx
import { DesignLayer } from '@design-stack-ct/ida-framework';
import { observer } from 'mobx-react-lite';

export const CustomDesignLayer = observer(({ panel }) => {
    return (
        <DesignLayer shouldOverflow={true} name="custom-layer">
            {panel.items.map((item) => (
                <ItemPosition item={item} key={item.id}>
                    {...CustomChildComponents}
                </ItemPosition>
            ))}
        </DesignLayer>
    )
});

// In a different file

import { useDesignEngine } from '@design-stack-ct/design-engine-react-components';
import { observer } from 'mobx-react-lite';
import { CustomDesignLayer } from './CustomDesignLayer';

const CustomDesignArea = observer(() {
    const designEngine = useDesignEngine();

    return (
        <SelectArea>
            <PanArea>
                {
                    designEngine.cimDocStore.panels.map((panel) => (
                        <DesignArea panel={panel} key={panel.id}>
                            <CustomDesignLayer panel={panel} />
                        </DesignArea>
                    ))
                }
            </PanArea>
        </SelectArea>
    );
});