useGroup

Provides access to group operations on the canvas — creating permanent groups and ungrouping them, along with utilities for querying group membership.

Import

import { useGroup } from '@asset-studio/core'

Usage

function GroupControls() {
  const { createGroup, unGroup, groupLeafItemsMap } = useGroup()

  const handleGroup = (group: GroupItemType) => {
    createGroup(group)
  }

  const handleUngroup = (group: GroupItemType) => {
    unGroup(group)
  }

  return (
    <div>
      <button onClick={() => handleGroup(selectedGroup)}>Lock Group</button>
      <button onClick={() => handleUngroup(selectedGroup)}>Ungroup</button>
    </div>
  )
}

Return Value

Property / Function	Type	Description
createGroup	(group: GroupItemType) => void	Marks a group as permanent so it persists when the user clicks outside it.
unGroup	(group: GroupItemType) => void	Removes the permanent flag so the group dissolves back to individual items when the user clicks elsewhere.
groupLeafItemsMap	Record<string, Item[]>	Maps each group ID to its direct leaf (non-group) descendant items.
collectAllDescendantIds	(groupId: string) => string[]	Recursively collects the IDs of all descendants in the group tree.

Notes

• createGroup and unGroup control the isPermanent flag on the group's itemProps. A permanent group stays intact when the user clicks outside it; a non-permanent group dissolves back to individual items on outside click.
• groupLeafItemsMap is pre-computed and updates reactively whenever items change. Use it for rendering group-related UI without traversing the item tree yourself.
• collectAllDescendantIds performs a full recursive traversal and is useful when you need to operate on all nested items inside deeply nested groups.

Related

• GroupItem Type
• useStudio
• Keyboard Shortcuts