Useful hooks for item interactions

This package offers a lot of hooks that provides recipes for enabling basic interactions on items on a DesignArea. These could be used in your own custom hooks or directly on components to wire up your components to state and drive interactions.

useSelectedItems

This hook solves the use case of retrieving the currently selected items or selected ids.

You could also use the same for common use cases like checking for multi-selection or checking if an item of a particular type is selected as well as setting selected item Ids on IdaStore.

const { selectedItemIds, selectedItems, setSelectedIds } = useSelectedItems();

useAspectRatioLock

This hook is useful for checking if an item is aspect ratio locked and gives a method to lock the aspect ratio.
This hooks expects the ItemAspectRatioLockExtension to be registered with the DesignExtensionSystem.

const { isEnabled, isAspectRatioLocked, toggleAspectRatioLock } = useAspectRatioLock();

{
    isEnabled && (
        <IconButton onClick={() => toggleAspectRatioLock(!isAspectRatioLocked)}>
            <Icon content={aspectRatioLockIcon} /> Lock aspect ratio
        </IconButton>
    );
}

useOpacity

The useOpacity hook provides useful functionality for allowing interactions that sets opacityMultiplier on the selected item.

Requires ItemOpacityExtension to be registered with the DesignExtensionSystem to use this hook.

const { isEnabled, opacity, onChange, onCommit } = useOpacity();

if (!isEnabled) {
    return null;
}

return (
    <div>
        <Slider
            value={currentItemOpacity ?? 1}
            min={0}
            max={1}
            step={0.1}
            tooltip={{ formatter: (value) => `${(value * 100).toFixed()}%` }}
            onChange={onChangingOpacity}
            onRelease={onCommitOpacity}
        />
    </div>
);

Hooks for moving, resizing and rotating items

These are hooks that provide useful recipes for moving, resizing and rotating items and thus help wire up basic item interactions.
All these hooks require IDAItemLayoutExtension and ItemPermissionsExtension on the DesignExtensionSystem.

useDimensionsControls

The useDimensionsControls hook is useful for wiring up item resizing interactions.

const { isEnabled, dimensions, onChange, onCommit, isLocked } = useDimensionsControls();

usePositionControls

Similar to the above hook, the usePositionControls hook provides functionality for moving items on a design area.

const { isEnabled, x, y, onChange, onCommit, isLocked } = usePositionControls();

useRotationControls

The useRotationControls hook is for adding rotation interaction to individual items

const { isEnabled, rotation, onChange, onCommit, isLocked } = useRotationControls();

useDragMove

The useDragMove hook provides the functionality to move all selected items by dragging the provided item. This is useful for creating custom drag handles for your items.
This hook requires an additional extension to be registered with the DesignExtensionSystem: ItemPermissionsExtension.
This hook optionally integrates with SnappingExtension and ItemMoveExtension.

const { isEnabled, onStart, onMove, onEnd } = useDragMove({ item });