SceneLayer
In many cases, a scene beneath the design area helps the customer understand the size of their design and have more context. With the connected component you can take a properly configured underlay scene via url and position it as a DesignLayer amongst other IDA Framework components. If instead you would like to manage your own data sources and positioning you can use the prop driven component.
import { ConnectedSceneLayer } from '@design-stack-ct/design-engine-react-components';
| name | type | required | comment |
|---|---|---|---|
panelId | string | yes | Id of panel which is represented by scene (and for look up of slot number within scene) |
allowUnsafePositioning | boolean | no | An optional prop to allow unsafe positioning of the scene when no slot information is available. When set to true and no slot information is available the dimensions of the panel will be used. Default value: false |
backgroundColor | string | no | An optional background color to use for the Scene preview. Will only be used with transparent scenes. |
className | string | no | Custom class name for component |
defaultToFirstSlot | boolean | no | If a matching slot isn't found for the given scene URL and panel ID, then default to the first slot. Default value: false |
name | string | no | Name to embed within bem class name template ( |
renderingTenant | string | no | The renderTenant used for requests. Defaults to dsc. |
sceneUrl | string | no | Url to scene which should be used. Will be inspected for slots to ensure compatibility with provided panelId |
transparent | boolean | no | Whether the resulting preview should contain transparency Warning: This will result in a larger payload size for customers as the image will be a png Default value: false |
import { SceneLayer } from '@design-stack-ct/design-engine-react-components';
| name | type | required | comment |
|---|---|---|---|
position | { height: number; width: number; x: number; y: number } | yes | Pixel position of scene preview image within design layer Used to align scene preview image with IDA design area |
scenePreviewUrl | string | yes | Url to rendered image on scene which should be used |
className | string | no | Custom class name for component |
name | string | no | Name to embed within bem class name template ( |