useSelectedItems

The useSelectedItems hook provides a simple way to interact with everything needed to manage item selection, instead of accessing the IDAStore directly. The hook provides a way to control the selection with setSelectedIds, the selectedItemIds, as well as a list of the selectedItems. These values can be used to enable any behavior needed that may need to depend on selection.

const Selection = observer(({ panel }: { panel: PanelState }) => {
    const { selectedItemIds, selectedItems, setSelectedIds } = useSelectedItems();
    const designEngine = useDesignEngine();

    const onClick = (id: string, e: PointerEventValues) => {
        const isSelected = selectedItemIds.includes(id);
        if (isSelected && (e.event.ctrlKey || e.event.metaKey)) {
            setSelectedIds(selectedItemIds).filter((itemId) => itemId !== id));
        } else if (!isSelected && (e.event.ctrlKey || e.event.metaKey)) {
            setSelectedIds([id]);
        } else {
            setSelectedIds([id], !(e.event.ctrlKey || e.event.metaKey));
        }
    }

    return (
        <div>
            panel.items.map((item) => {
                const isSelected = selectedItemIds.includes(item.itemId);
                return (
                    <div
                        className={cx('dec-item-select', `item-${item.itemId}`, { [dec-item-selected]: isSelected })}
                        onClick={(event) => onClick(item.itemId, event)}
                    >
                    </div>
                );
            })
        </div>
    );
});