PanelPreview

The PanelPreview is a component that can be connected to an active PanelState from the current Interactive Design Engine.

name	type	required	comment
panel	PanelState	yes	The PanelState to be previewed
className	string	no	Optional class name to be added to the preview canvas

Required Extensions

You will need to add the following extensions to your Interactive Design Engine in order for this component to function as intended:

• PanelPreviewExtension

Example Usage

The following example is for an active panel switcher, similar to the one found in the Demo Experience.

import { PanelPreview, useDesignEngine, useFocus } from '@design-stack-ct/design-engine-react-components';

export function PanelSwitcher() {
    const { layoutStore, idaStore } = useDesignEngine();
    const { focusDesignArea } = useFocus();

    if (!cimDocStore || !layoutStore || !idaStore) {
        return null;
    }

    const { visiblePanels } = layoutStore;
    const { setActiveDesignPanelId, activeDesignPanelId, setSelectedIds } = idaStore;

    const onPreviewClick = (panelId: string) => {
        setActiveDesignPanelId(panelId);
        if (activeDesignPanelId !== panelId) setSelectedIds([]);
        focusDesignArea(panelId);
    };

    return (
        <div>
            {visiblePanels.map((panelState) => (
                <button onClick={() => onPreviewClick(panelState.id)} key={panelState.id}>
                    <PanelPreview panel={panelState} pixelSize={2} />
                </button>
            ))}
        </div>
    );
}