Interface LayoutStrategy<TState, TId, TMeta>

OptionalcanAccept

• canAccept?(items: LayoutItem[], options: Record<string, unknown>): boolean

  Optional hook used by DnD to reject drops the strategy can't lay out. Receives the prospective post-drop items list. Return false to reject. Strategies that don't implement it are treated as accept-all.

  Parameters

  • items: LayoutItem[]
  • options: Record<string, unknown>

  Returns boolean

OptionaldispatchAffordance

• dispatchAffordance?(
      ctx: {
          affordance: Affordance<TMeta>;
          container: Size;
          event: LayoutEvent;
          items: LayoutItem[];
          options: Record<string, unknown>;
          parentId: NodeId;
          store: Store;
      },
  ): void

  Optional store-mutating dispatch path for affordances that change per-child placement (e.g. resize edges) rather than container state. Called by the React layer's useContainerLayout BEFORE reduce, so the strategy can choose to handle a given affordance here, in reduce, or in both.

  Parameters

  • ctx: {
        affordance: Affordance<TMeta>;
        container: Size;
        event: LayoutEvent;
        items: LayoutItem[];
        options: Record<string, unknown>;
        parentId: NodeId;
        store: Store;
    }

  Returns void

OptionalgetDropPreview

• getDropPreview?(
      input: {
          container: Size;
          cursor: { x: number; y: number };
          insertId: TId;
          insertIndex: number | undefined;
          items: LayoutItem[];
          options: Record<string, unknown>;
      },
  ): { accepted: boolean; placements: Map<TId, Rect> }
  | null

  Optional fast-path preview. When defined and returns non-null, the host uses this instead of calling .layout({ preview }). Useful when preview placements are cheap to compute directly (e.g. grid cells given an index). Return null to delegate to the canonical .layout() path.

  Parameters

  • input: {
        container: Size;
        cursor: { x: number; y: number };
        insertId: TId;
        insertIndex: number | undefined;
        items: LayoutItem[];
        options: Record<string, unknown>;
    }

  Returns { accepted: boolean; placements: Map<TId, Rect> } | null

OptionalinitialState

• initialState?(items: LayoutItem[]): TState

  Parameters

  • items: LayoutItem[]

  Returns TState

layout

• layout(
      input: {
          container: Size;
          items: LayoutItem[];
          options: Record<string, unknown>;
          preview?: LayoutPreview;
          state: TState;
      },
  ): LayoutResult<TId, TMeta>

  Parameters

  • input: {
        container: Size;
        items: LayoutItem[];
        options: Record<string, unknown>;
        preview?: LayoutPreview;
        state: TState;
    }

    • container: Size

    • items: LayoutItem[]

    • options: Record<string, unknown>

    • Optionalpreview?: LayoutPreview

      When set, the strategy should lay out as if preview.insertId were inserted at preview.insertIndex (or at the cursor when index is undefined). The strategy MAY ignore this and return the regular layout — the host falls back gracefully. When honored, set result.isPreview = true.

    • state: TState

  Returns LayoutResult<TId, TMeta>

Optionalreduce

• reduce?(
      state: TState,
      event: LayoutEvent,
      context: {
          container: Size;
          items: LayoutItem[];
          options: Record<string, unknown>;
      },
  ): TState

  Parameters

  • state: TState
  • event: LayoutEvent
  • context: { container: Size; items: LayoutItem[]; options: Record<string, unknown> }

  Returns TState

name