Skip to main content

ItemHandlesDesignLayer

The ItemHandlesDesignLayer is an implementation of IDA Framework's DesignLayer that adds "handles" which are used to control interactions such as resizing and rotating. Each of the interactions within the layer consists of a connected component that tracks temporary changes to the item and persists them once the interaction is complete. The layer requires a panel to be passed in as a prop and for any given item on that panel the handles will be added if it is the only selected item.

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
  • ItemSelectionExtension
  • ItemPermissionsExtension
    • ItemTemplateExtension
    • ItemLocksExtension
    • ItemMetadataExtension
  • ItemAspectRatioLockExtension

Example Usage​

import {
    DesignEngineProvider,
    SelectArea,
    DesignArea,
    ItemHandlesDesignLayer,
    IDAItemLayoutExtension
} from '@design-stack-ct/design-engine-react-components';
import {
    InteractiveDesignEngine,
    ItemSelectionExtension,
    ItemAspectRatioLockExtension,
} from '@design-stack-ct/interactive-design-engine-core';

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

    designEngine.designExtensionSystem.addExtension(IDAItemLayoutExtension);
    designEngine.designExtensionSystem.addExtension(ItemSelectionExtension);
    designEngine.designExtensionSystem.addExtension(ItemAspectRatioLockExtension);

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

Custom Resize Handles Example​

import {
    DesignEngineProvider,
    SelectArea,
    DesignArea,
    ItemHandlesDesignLayer,
    IDAItemLayoutExtension,
    defaultResizeHandlesResolver,
} from '@design-stack-ct/design-engine-react-components';
import {
    InteractiveDesignEngine,
    ItemSelectionExtension,
    ItemAspectRatioLockExtension,
} from '@design-stack-ct/interactive-design-engine-core';
import type { ItemState } from '@design-stack-ct/cimdoc-state-manager';
import {
    Handle,
    HandleFlag,
    HandleShape,
} from '@design-stack-ct/ida-framework';

function customResizeHandlesResolver(item: ItemState, isAspectRatioLocked: boolean): Handle[] {
    if (item.isShapeItem()) {
        return [
            { handle: HandleFlag.Left, shape: HandleShape.Oblong },
            { handle: HandleFlag.Bottom | HandleFlag.Right, shape: HandleShape.Round },
        ];
    }

    return defaultResizeHandlesResolver(item, isAspectRatioLocked);
}

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

    designEngine.designExtensionSystem.addExtension(IDAItemLayoutExtension);
    designEngine.designExtensionSystem.addExtension(ItemSelectionExtension);
    designEngine.designExtensionSystem.addExtension(ItemAspectRatioLockExtension);

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