EyeDropperDesignLayer

The EyeDropperDesignLayer is the visual component of the "eye dropping" process, in which a user can extract a custom color from the design area. When this layer is rendered, a magnifier component will be displayed to the user upon hovering/touching the design area. The magnifier will display a small part of the design area, magnified so that individual pixels are discernible. The user will then be able to select the currently highlighted pixel, which will cause the layer to "dispense" the pixel's color through the useEyeDropper hook. The layer requires a panel to be passed in as a prop in order to generate a panel preview for magnification purposes.

This layer does not display anything to the user except for the magnifier. It is up to you to ensure that your design experience includes a preview design layer, and that all non-preview layers are hidden while eye dropping is in progress.

Before using this layer, be sure to include the EyeDropperProvider from this package in your component tree.

The procedural control of the eye dropping process is provided by the useEyeDropper hook from this package.

Required Extensions

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

• EyeDropperPreviewExtension

Example Usage

import {
    DesignEngineProvider,
    EyeDropperProvider,
    DesignArea,
    EyeDropperDesignLayer,
    ItemHandlesDesignLayer,
    ItemPreviewDesignLayer,
    SelectAndMoveDesignLayer,
    EyeDropperPreviewExtension,
    useEyeDropper,
} 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(...));
    const { isOpen: isEyeDropperOpen } = useEyeDropper();

    designEngine.designExtensionSystem.addExtension(EyeDropperPreviewExtension);
    // + all extensions required by other layers

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

                        {isEyeDropperOpen ? (
                            <EyeDropperDesignLayer panel={panel} />
                        ) : (
                            <SelectAndMoveDesignLayer panel={panel} />
                            <ItemHandlesDesignLayer panel={panel} />
                        )}
                    </DesignArea>
                ))}
            </EyeDropperProvider>
        </DesignEngineProvider>
    );
}