SnappingUIDesignLayer

The SnappingUIDesignLayer is an IDA framework DesignLayer which renders a SnapBox and SnapLines for which a selection of items on the provided panel can snap to. This DesignLayer automatically connects to a registered SnappingExtension for the provided panel and will display the SnappingLines and Boxes based off the results computed by the extension.

Required Extensions

The following extensions should be registerd to the Interactive Design Engine in order for this layer to function as intended:

• SnappingExtension (Direct Dependency of SnappingUIDesignLayer)
  • IDAItemLayoutExtension
    • ItemSelectionExtension
    • ItemPreviewExtension
  • ItemSelectionExtension
  • PanelLayoutExtension
  • ItemTemplateExtension
    • ItemMetadataExtension

Example Usage

import {
    DesignEngineProvider,
    SelectArea,
    DesignArea,
    SnappingUIDesignLayer,
} from '@design-stack-ct/design-engine-react-components';

const extensions = [...];

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

    useEffect(() => {
        extensions.forEach((extension) => designEngine.designExtensionSystem.addExtension(extension));
    }, []);

    return (
        <DesignEngineProvider designEngine={designEngine}>
            <SelectArea>
                {designEngine.layoutStore.visiblePanels.map((panel) => (
                    <DesignArea panel={panel}>
                        <SnappingUIDesignLayer panel={panel} />
                    </DesignArea>
                ))}
            </SelectArea>
        </DesignEngineProvider>
    );
}

Theming

The SnappingUIDesignLayer can be provided a className which can be used to customize styling on the child components SnapBox and SnapLine which handle the display of the lines within the Interactive Design Area. In order to customize these child components you can use CSS specificity to target the following classes:

• dec-snapline--${SnapType}
• dec-snapbox

SnapType: 'item-boundary' | 'panel-center' | 'mask' | 'item-center'.

Example using Emotion

import { css } from 'emotion';

const myCustomStyle = css`
  & > .dec-snapline--item-boundary {
    border-color: red;
  }

  & > .dec-snapbox {
    border-color: green;
  }
`

export function ExampleDesignExperience() {
    return (
        <ExampleProvider>
            <ParentComponent>
                <SnappingUIDesignLayer panel={...} className={myCustomStyle} />
            </ParentComponent>
        </ExampleProvider>
    );
}