Function splitHorizontal

frontend/layout/lib/layoutTree.ts:454–493

(layoutState: LayoutTreeState, action: LayoutTreeSplitHorizontalAction)

// ─── SPLIT HORIZONTAL ─────────────────────────────────────────────────────────────

export function splitHorizontal(layoutState: LayoutTreeState, action: LayoutTreeSplitHorizontalAction) {
    const { targetNodeId, newNode, position } = action;
    const targetNode = findNode(layoutState.rootNode, targetNodeId);
    if (!targetNode) {
        console.error("splitHorizontal: Target node not found", targetNodeId);
        return;
    }

    const parent = findParent(layoutState.rootNode, targetNodeId);
    if (parent && parent.flexDirection === FlexDirection.Row) {
        const index = parent.children.findIndex((child) => child.id === targetNodeId);
        if (index === -1) {
            console.error("splitHorizontal: Target node not found in parent's children", targetNodeId);
            return;
        }
        const insertIndex = position === "before" ? index : index + 1;
        // Directly splice in the new node instead of calling addChildAt (which may flatten nodes)
        parent.children.splice(insertIndex, 0, newNode);
    } else {
        // Otherwise, if no parent or parent's flexDirection is not Row, we need to wrap
        // Create a new group node with horizontal layout.
        // IMPORTANT: pass an initial children array so the new node is valid.
        const groupNode = newLayoutNode(FlexDirection.Row, targetNode.size, [targetNode], undefined);
        // Now decide the ordering based on the "position"
        groupNode.children = position === "before" ? [newNode, targetNode] : [targetNode, newNode];
        if (parent) {
            const index = parent.children.findIndex((child) => child.id === targetNodeId);
            if (index === -1) {
                console.error("splitHorizontal (wrap): Target node not found in parent's children", targetNodeId);
                return;
            }
            parent.children[index] = groupNode;
        } else {
            layoutState.rootNode = groupNode;
        }
    }
    if (action.focused) {
        layoutState.focusedNodeId = newNode.id;
    }
}

// ─── SPLIT VERTICAL ─────────────────────────────────────────────────────────────