SelectAndMoveDesignLayer

The SelectAndMoveDesignLayer is an IDA framework DesignLayer which renders ClickHandlerBoxes for all items on the provided panel. Each SelectAndMoveInteraction component within SelectAndMoveDesignLayer wires up all event handlers for click and drag to manage selection and movement of items.

Required Extensions

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

• ItemSelectionExtension
• ItemPermissionsExtension
  • ItemTemplateExtension
  • ItemLocksExtension
  • ItemMetadataExtension
• IDAItemLayoutExtension (Needed for the connected ItemPosition component)

Example Usage

import {
    DesignEngineProvider,
    SelectArea,
    DesignArea,
    SelectAndMoveDesignLayer,
    IDAItemLayoutExtension
} from '@design-stack-ct/design-engine-react-components';
import {
    InteractiveDesignEngine
    ItemSelectionExtension,
    ItemPermissionsExtension,
    ItemTemplateExtension,
    ItemLocksExtension,
    ItemMetadataExtension,
} from '@design-stack-ct/interactive-design-engine-core';

const extensions = [ItemSelectionExtension, ItemPermissionsExtension, ItemTemplateExtension, ItemLocksExtension, ItemMetadataExtension, IDAItemLayoutExtension];

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}>
                        <SelectAndMoveDesignLayer panel={panel} />
                    </DesignArea>
                ))}
            </SelectArea>
        </DesignEngineProvider>
    );
}