OrnamentsDesignLayer

The OrnamentsDesignLayer can be used to display ornaments (grommets, punch holes, drill holes, etc.) on the design area. Each ornament is displayed as a series of concentric circles with alternating fill colors. The layer requires a panel to be passed in as a prop in order to extract ornaments data from the panel definition. An optional drawInstructions object can be provided as a prop, defining how ornament types should be drawn.

Since ornaments are effectively cut-outs in the design, this layer should be placed on top of any preview layers.

Required Extensions

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

• PanelOrnamentsExtension

Example Usage

import {
    DesignEngineProvider,
    DesignArea,
    OrnamentDrawInstructions,
    OrnamentsDesignLayer,
    PanelOrnamentsExtension,
} from '@design-stack-ct/design-engine-react-components';
import { InteractiveDesignEngine } from '@design-stack-ct/interactive-design-engine-core';

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

    designEngine.designExtensionSystem.addExtension(PanelOrnamentsExtension);

    const ornamentDrawInstructions: OrnamentDrawInstructions = {
        'BrassGrommet-18mm': { radiusInMm: 9 }, // a new ornament type that the layer doesn't know about
        'PunchHole-9mm': undefined, // an ornament type that we don't want to display
    };

    return (
        <DesignEngineProvider designEngine={designEngine}>
            {designEngine.layoutStore.visiblePanels.map((panel) => (
                <DesignArea panel={panel}>
                    <OrnamentsDesignLayer panel={panel} drawInstructions={ornamentDrawInstructions} />
                </DesignArea>
            ))}
        </DesignEngineProvider>
    );
}