sdk.stateapi.implementsubstate

Home > @kittl/sdk > StateAPI > implementSubState

StateAPI.implementSubState() method

Implements a sub-state into the main design by duplicating it with new unique IDs

This function takes a partial design state (sub-state) and integrates it into the current design by creating a complete copy with newly generated UUIDs for all boards and group structures. This is useful for duplicating, importing, or cloning portions of a design without ID conflicts.

**Key Features:** - **ID Regeneration**: Generates new UUIDs for all boards and group structures - **Deep Reference Updates**: Updates all ID references throughout the state tree - **Key Transformation**: Updates object keys to match new IDs - **Immutability**: Original input state remains unchanged - **Patch Integration**: Automatically generates patches for state updates

**What Gets Transformed:** - Board IDs and all references to them - Group structure IDs and their relationships - Object keys in boards and groupStructures collections - Keys in boardsIndices and groupStructuresIndices - All string references throughout nested objects (boardId, groupStructureId, parentId, etc.)

**Processing Steps:** 1. Creates a deep clone of the input state 2. Generates new UUIDs for all boards and group structures 3. Traverses and replaces all ID values in properties 4. Traverses and replaces all object keys that match old IDs 5. Builds UPSERT patches for all transformed entities 6. Returns the transformed state with new IDs

This is particularly useful for operations like: - Duplicating pages or artboards - Importing design templates - Copying design elements between projects - Cloning group structures with all relationships intact

Signature:

implementSubState(params: Partial<NormalizedDesignState>, opts?: DesignApiOptions): Partial<NormalizedDesignState>;

Parameters

Parameter	Type	Description
params	Partial<NormalizedDesignState>	Partial design state to implement (boards, objects, groupStructures, etc.)
opts	DesignApiOptions	(Optional) Additional options for the design API operation

Returns:

Partial<NormalizedDesignState>

Transformed state with new IDs for boards and group structures

Example

const stateApi = new StateAPI(projectManager, store);

// Duplicate a board with all its objects
const subState = {
  boards: {
    'board-1': { id: 'board-1', floating: false }
  },
  boardsIndices: {
    'board-1': 'a0'
  },
  objects: {
    'obj-1': { id: 'obj-1', type: 'rect', boardId: 'board-1' }
  }
};

const result = stateApi.implementSubState(subState);
// result.boards now has a new UUID key (e.g., 'uuid-abc-123')
// result.boards['uuid-abc-123'].id === 'uuid-abc-123'
// result.objects['obj-1'].boardId === 'uuid-abc-123' (updated reference)
// result.boardsIndices['uuid-abc-123'] === 'a0' (key updated)
// Original subState remains unchanged

// Import a template with group structures
const template = {
  groupStructures: {
    'gs-1': { id: 'gs-1', parentId: 'root' },
    'gs-2': { id: 'gs-2', parentId: 'gs-1' }
  },
  groupStructuresIndices: {
    'gs-1': 'a0',
    'gs-2': 'a1'
  }
};

const imported = stateApi.implementSubState(template);
// All group structure IDs are regenerated
// Parent-child relationships are preserved with new IDs