Introduction

Design Layers are state-connected observer components that offer the ability to interactively apply or reflect changes to items on a panel. A design layer will take some reference to a panel and then map the specific interactions it provides to that panel's contents. For example, the ItemPreviewDesignLayer will render preview images for every item on the panel it is observing.

Setup

The design layers exported from this library require a few things to function properly:

• Access to the design engine via a DesignEngineProvider higher in the component tree.
• The design layer components should be initiated and rendered as children of a DesignArea.
• All of the above wrapped in the LayoutContainersProvider(ida-framework), SelectArea and PanArea components to ensure proper visual layout.

Design layers can be stacked together as sibling components. It is important to note that the order in which layers are stacked is important, as layers will render their children on top of the contents of layers placed before them.

caution

Individual design layers may depend on the presence of additional providers or design extensions. If you encounter issues when adding design layers, check that you have provided their specific requirements.

Example

As a quick example, the following is the default design area and design layers used for the core functionalities of the demo experience in this documentation:

import React from 'react';
import type { PanelState } from '@design-stack-ct/cimdoc-state-manager';
import {
    DesignArea,
    ItemHandlesDesignLayer,
    ItemPreviewDesignLayer,
    SelectAndMoveDesignLayer,
    TextEditingLayer,
} from '@design-stack-ct/design-engine-react-components';
import { observer } from 'mobx-react-lite';
import { css } from '@emotion/css';

// Basic style to provide an outline around the panel
const underlayStyle = css`
    background: white;
    outline: 1px solid black;
`;

export interface DefaultDesignAreaProps {
    panel: PanelState;
}

// Wrapped in mobx observer component to optimize rerenders
export const DefaultDesignArea = observer(({ panel }: DefaultDesignAreaProps) => (
    <DesignArea panel={panel} className={underlayStyle}>
        <ItemPreviewDesignLayer panel={panel} />
        <SelectAndMoveDesignLayer panel={panel} />
        <ItemHandlesDesignLayer panel={panel} />
        <TextEditingLayer panel={panel} />;
    </DesignArea>
));