Skip to main content

ItemPreviewDesignLayer

The ItemPreviewDesignLayer is an implementation of IDA Framework's DesignLayer that renders previews for all items on the provided panel. The previews are rendered using the Fusion rendering libraries which generate item previews client side with automatic fallbacks to server side rendering when required. The extension represents the current state of the items on the panel as they are in CimDocStore but overrides are possible via a pattern documented below.

Required Extensions​

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

  • IDAItemLayoutExtension
  • ItemPreviewExtension

For added control over the rendering behavior of each item, you can use the DesignLayerItemVisibilityExtension with the layer name of "item-preview" to set the visibility of the ItemPreviewLayer programatically.

Example Usage​

import {
    DesignEngineProvider,
    SelectArea,
    DesignArea,
    ItemPreviewDesignLayer,
    IDAItemLayoutExtension
} from '@design-stack-ct/design-engine-react-components';
import {
    InteractiveDesignEngine
    ItemPreviewExtension,
    DesignLayerItemVisibilityExtension,
} from '@design-stack-ct/interactive-design-engine-core';

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

    designEngine.designExtensionSystem.addExtension(IDAItemLayoutExtension);
    designEngine.designExtensionSystem.addExtension(ItemPreviewExtension);

    // Recommended if you need to selectively show/hide an item's preview
    designEngine.designExtensionSystem.addExtension(DesignLayerItemVisibilityExtension);

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

Temporarily override an Item's preview​

Sometimes its necessary to override an item preview from the current state persisted on the CimDocStore.

Recolorization Use Case​

A particular example of this is with the ability to modify an Image's colors with the colorAdjustment properties. In a design experience, modification of the colorAdjustment property is typically presented as sliders for HSL. If every change by the user was recorded to history while interacting with the sliders then there would be a history step at every slider step. Most commonly, its undesired for these partial updates and you simply want to override the current visual until the user stops interacting. Upon completion of the interaction (slider drag) you may want to commit the change with an executeCommand. The ImageColorsExtension can be referred to within this repository as an example.

Override Example​

The ItemPreviewLayer finds all extensions for an item that contain a particular symbol which can be used to implement an interface for informing the ItemPreviewLayer that a decorator function on the extension is available to override the item's model. The usage for a custom extension would be represented as:

import { BaseExtension } from `@design-stack-ct/interactive-design-engine`;
import type { ItemPreviewModelDecorator } from '@design-stack-ct/design-engine-react-components';
import { decorateItemPreviewModel } from '@design-stack-ct/design-engine-react-components`;

export class MyCustomExtension extends BaseExtension implements ItemPreviewModelDecorator<Item> {
    declare: ItemState;

    @observable
    isUserInteracting: boolean;

    @observable
    temporaryItemValues: Partial<Item>;

    constructor(designState: DesignState) {
        super(designState);
        makeObservable(this);
    }

    [decorateItemPreviewModel](previewModel: Item): void {
        if(this.isUserInteracting) {
            Object.assign(previewModel, this.temporaryItemValues);
        }
    }

    @action
    setIsUserInteracting(value: boolean) {
        isUserInteracting = value;
    }
}