diff --git a/benchmarks/performance.spec.ts b/benchmarks/performance.spec.ts index a86ffab..4c25f44 100644 --- a/benchmarks/performance.spec.ts +++ b/benchmarks/performance.spec.ts @@ -47,7 +47,7 @@ function generateLargeLayout(depth: number, panelsPerLevel: number): Layout { function generatePanel(): TabLayout { const name = `Panel${panelCounter++}`; return { - type: "child-panel", + type: "tab-layout", tabs: [name], }; } @@ -71,7 +71,7 @@ function generateLargeLayout(depth: number, panelsPerLevel: number): Layout { } return { - type: "split-panel", + type: "split-layout", orientation, children, sizes, @@ -82,14 +82,14 @@ function generateLargeLayout(depth: number, panelsPerLevel: number): Layout { } function countPanels(layout: Layout): number { - if (layout.type === "child-panel") { + if (layout.type === "tab-layout") { return 1; } return layout.children.reduce((sum, child) => sum + countPanels(child), 0); } function getPanelNames(layout: Layout): string[] { - if (layout.type === "child-panel") { + if (layout.type === "tab-layout") { return layout.tabs; } return layout.children.flatMap((child) => getPanelNames(child)); diff --git a/examples/layout.json b/examples/layout.json index 98d8582..96a2e45 100644 --- a/examples/layout.json +++ b/examples/layout.json @@ -1,29 +1,29 @@ { - "type": "split-panel", + "type": "split-layout", "orientation": "horizontal", "children": [ { - "type": "split-panel", + "type": "split-layout", "orientation": "vertical", "children": [ { - "type": "split-panel", + "type": "split-layout", "orientation": "horizontal", "children": [ { - "type": "child-panel", + "type": "tab-layout", "tabs": ["AAA"] }, { - "type": "split-panel", + "type": "split-layout", "orientation": "vertical", "children": [ { - "type": "child-panel", + "type": "tab-layout", "tabs": ["BBB"] }, { - "type": "child-panel", + "type": "tab-layout", "tabs": ["CCC"] } ], @@ -33,15 +33,15 @@ "sizes": [0.5, 0.5] }, { - "type": "split-panel", + "type": "split-layout", "orientation": "horizontal", "children": [ { - "type": "child-panel", + "type": "tab-layout", "tabs": ["DDD"] }, { - "type": "child-panel", + "type": "tab-layout", "tabs": ["EEE"] } ], @@ -51,7 +51,7 @@ "sizes": [0.5, 0.5] }, { - "type": "child-panel", + "type": "tab-layout", "tabs": ["FFF", "GGG", "HHH"] } ], diff --git a/src/layout/calculate_edge.ts b/src/layout/calculate_edge.ts index 3e79e35..e3fc39b 100644 --- a/src/layout/calculate_edge.ts +++ b/src/layout/calculate_edge.ts @@ -11,11 +11,17 @@ import { DEFAULT_PHYSICS, type Physics } from "./constants"; import { insert_child } from "./insert_child"; -import type { Layout, LayoutPath, Orientation, ViewWindow } from "./types"; +import type { + Layout, + LayoutPath, + LayoutPathTraversal, + Orientation, + ViewWindow, +} from "./types"; /** * Calculates an insertion point (which may involve splitting a single - * `"child-panel"` into a new `"split-panel"`), based on the cursor position. + * `"tab-layout"` into a new `"split-layout"`), based on the cursor position. * * * @param col - The cursor column. * @param row - The cursor row. @@ -23,7 +29,7 @@ import type { Layout, LayoutPath, Orientation, ViewWindow } from "./types"; * @param slot - The slot identifier where the insert should occur * @param drop_target - The `LayoutPath` (from `calculateIntersect`) of the * panel to either insert next to, or split by. - * @returns A new `LayoutPath` reflecting the updated (maybe) `"split-panel"`, + * @returns A new `LayoutPath` reflecting the updated (maybe) `"split-layout"`, * which is enough to draw the overlay. */ export function calculate_edge( @@ -133,7 +139,7 @@ function insert_root_edge( panel: Layout, slot: string, drop_target: LayoutPath, - path: number[], + path: LayoutPathTraversal, is_before: boolean, orientation: Orientation, ): LayoutPath { @@ -153,7 +159,7 @@ function insert_axis( is_before: boolean, axis_orientation: Orientation, ): LayoutPath { - let result_path: number[]; + let result_path: LayoutPathTraversal; if (drop_target.orientation === axis_orientation) { // Same orientation - insert into existing split @@ -183,7 +189,10 @@ function insert_axis( }; } -function calculate_view_window(panel: Layout, path: number[]): ViewWindow { +function calculate_view_window( + panel: Layout, + path: LayoutPathTraversal, +): ViewWindow { let view_window: ViewWindow = { row_start: 0, row_end: 1, @@ -193,7 +202,7 @@ function calculate_view_window(panel: Layout, path: number[]): ViewWindow { let current_panel = panel; for (const step of path) { - if (current_panel.type === "child-panel") { + if (current_panel.type === "tab-layout") { break; } diff --git a/src/layout/calculate_intersect.ts b/src/layout/calculate_intersect.ts index fe6d747..c17198c 100644 --- a/src/layout/calculate_intersect.ts +++ b/src/layout/calculate_intersect.ts @@ -9,7 +9,13 @@ // ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃ // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ -import type { LayoutPath, LayoutDivider, Layout, ViewWindow } from "./types.ts"; +import type { + LayoutPath, + LayoutDivider, + Layout, + ViewWindow, + LayoutPathTraversal, +} from "./types.ts"; const VIEW_WINDOW = { row_start: 0, @@ -67,14 +73,14 @@ function calculate_intersection_recursive( check_dividers: { rect: DOMRect; size: number } | null, parent_orientation: "horizontal" | "vertical" | null = null, view_window: ViewWindow = structuredClone(VIEW_WINDOW), - path: number[] = [], + path: LayoutPathTraversal = [], ): LayoutPath | null | LayoutDivider { if (column < 0 || row < 0 || column > 1 || row > 1) { return null; } // Base case: if this is a child panel, return its name - if (panel.type === "child-panel") { + if (panel.type === "tab-layout") { const selected = panel.selected ?? 0; const col_width = view_window.col_end - view_window.col_start; const row_height = view_window.row_end - view_window.row_start; diff --git a/src/layout/calculate_path.ts b/src/layout/calculate_path.ts index 50e1c12..6cbe0e1 100644 --- a/src/layout/calculate_path.ts +++ b/src/layout/calculate_path.ts @@ -9,7 +9,7 @@ // ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃ // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ -import type { Layout } from "./types.ts"; +import type { Layout, LayoutPathTraversal } from "./types.ts"; /** * Calculates the index path for a panel with the given name. @@ -28,9 +28,9 @@ export function calculate_path(name: string, layout: Layout): number[] | null { function calculate_path_recursive( name: string, panel: Layout, - path: number[], + path: LayoutPathTraversal, ): number[] | null { - if (panel.type === "child-panel") { + if (panel.type === "tab-layout") { if (!panel.tabs.includes(name)) { return null; } diff --git a/src/layout/flatten.ts b/src/layout/flatten.ts index cc99e0d..cd390eb 100644 --- a/src/layout/flatten.ts +++ b/src/layout/flatten.ts @@ -23,7 +23,7 @@ import type { Layout } from "./types.ts"; * @returns A new flattened layout tree (original is not mutated). */ export function flatten(layout: Layout): Layout { - if (layout.type === "child-panel") { + if (layout.type === "tab-layout") { layout.selected = layout.selected || 0; return layout; } @@ -36,7 +36,7 @@ export function flatten(layout: Layout): Layout { const flattenedChild = flatten(child); if ( - flattenedChild.type === "split-panel" && + flattenedChild.type === "split-layout" && flattenedChild.orientation === layout.orientation ) { for (let j = 0; j < flattenedChild.children.length; j++) { @@ -54,7 +54,7 @@ export function flatten(layout: Layout): Layout { } return { - type: "split-panel", + type: "split-layout", orientation: layout.orientation, children: flattenedChildren, sizes: flattenedSizes, diff --git a/src/layout/generate_grid.ts b/src/layout/generate_grid.ts index 0cc8bb5..fb67243 100644 --- a/src/layout/generate_grid.ts +++ b/src/layout/generate_grid.ts @@ -44,7 +44,7 @@ function collect_track_positions( end: number, physics: Physics, ): number[] { - if (panel.type === "child-panel") { + if (panel.type === "tab-layout") { return [start, end]; } @@ -100,7 +100,7 @@ function build_cells( rowEnd: number, physics: Physics, ): GridCell[] { - if (panel.type === "child-panel") { + if (panel.type === "tab-layout") { const selected = panel.selected ?? 0; return [ { @@ -179,11 +179,11 @@ const child_template = ( * @example * ```typescript * const layout = { - * type: "split-panel", + * type: "split-layout", * orientation: "horizontal", * children: [ - * { type: "child-panel", tabs: "sidebar" }, - * { type: "child-panel", tabs: "main" } + * { type: "tab-layout", tabs: "sidebar" }, + * { type: "tab-layout", tabs: "main" } * ], * sizes: [0.25, 0.75] * }; @@ -200,7 +200,7 @@ export function create_css_grid_layout( overlay?: [string, string], physics: Physics = DEFAULT_PHYSICS, ): string { - if (layout.type === "child-panel") { + if (layout.type === "tab-layout") { const selected = layout.selected ?? 0; return [ host_template("100%", "100%"), diff --git a/src/layout/insert_child.ts b/src/layout/insert_child.ts index f49d2c7..d009942 100644 --- a/src/layout/insert_child.ts +++ b/src/layout/insert_child.ts @@ -9,7 +9,7 @@ // ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃ // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ -import type { Layout } from "./types.ts"; +import type { Layout, LayoutPathTraversal } from "./types.ts"; /** * Inserts a new child panel into the layout tree at a specified location. @@ -28,32 +28,32 @@ import type { Layout } from "./types.ts"; export function insert_child( panel: Layout, child: string, - path: number[], + path: LayoutPathTraversal, orientation?: "horizontal" | "vertical", ): Layout { const createChildPanel = (childId: string): Layout => ({ - type: "child-panel", + type: "tab-layout", tabs: [childId], }); if (path.length === 0) { // Insert at root level - if (panel.type === "child-panel") { - // Add to existing child-panel as a tab + if (panel.type === "tab-layout") { + // Add to existing tab-layout as a tab return { - type: "child-panel", + type: "tab-layout", tabs: [child, ...panel.tabs], }; } else if (orientation) { // When inserting at edge of root, wrap the entire panel in a new split return { - type: "split-panel", + type: "split-layout", orientation: orientation, children: [createChildPanel(child), panel], sizes: [0.5, 0.5], }; } else { - // Append to existing split-panel + // Append to existing split-layout const newChildren = [...panel.children, createChildPanel(child)]; const newSizes = [...panel.sizes, 1 / (newChildren.length - 1)]; return { @@ -69,8 +69,8 @@ export function insert_child( // Special case: when orientation is provided and restPath is empty, handle edge insertion if (orientation && restPath.length === 0) { - // If panel is a split-panel with the same orientation, insert into its children - if (panel.type === "split-panel" && panel.orientation === orientation) { + // If panel is a split-layout with the same orientation, insert into its children + if (panel.type === "split-layout" && panel.orientation === orientation) { const newChildren = [...panel.children]; newChildren.splice(index, 0, createChildPanel(child)); const newSizes = [...panel.sizes]; @@ -89,14 +89,14 @@ export function insert_child( : [panel, createChildPanel(child)]; return { - type: "split-panel", + type: "split-layout", orientation: orientation, children, sizes: [0.5, 0.5], }; } - if (panel.type === "child-panel") { + if (panel.type === "tab-layout") { // Stack into child array only when ALL of these conditions are met: // 1. Path has exactly one element (restPath is empty) // 2. Orientation was NOT explicitly provided (orientation is undefined) @@ -117,7 +117,7 @@ export function insert_child( // Otherwise, wrap in a split panel and recurse const newPanel: Layout = { - type: "split-panel", + type: "split-layout", orientation: orientation || "horizontal", children: [panel], sizes: [1], @@ -130,7 +130,7 @@ export function insert_child( if (orientation && panel.children[index]) { // When inserting at an edge, create a split panel with the new child and existing child const newSplitPanel: Layout = { - type: "split-panel", + type: "split-layout", orientation: orientation, children: [createChildPanel(child), panel.children[index]], sizes: [0.5, 0.5], @@ -159,9 +159,9 @@ export function insert_child( const targetChild = panel.children[index]; - // Determine the orientation to pass down when navigating into a child-panel + // Determine the orientation to pass down when navigating into a tab-layout const childOrientation = - targetChild.type === "child-panel" && + targetChild.type === "tab-layout" && restPath.length > 0 && orientation !== undefined ? panel.orientation === "horizontal" diff --git a/src/layout/redistribute_panel_sizes.ts b/src/layout/redistribute_panel_sizes.ts index 64ab4b5..4c206e5 100644 --- a/src/layout/redistribute_panel_sizes.ts +++ b/src/layout/redistribute_panel_sizes.ts @@ -10,7 +10,7 @@ // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ import { DEFAULT_PHYSICS } from "./constants.ts"; -import type { Layout } from "./types.ts"; +import type { Layout, LayoutPathTraversal } from "./types.ts"; /** * Adjusts panel sizes during a drag operation on a divider. @@ -31,7 +31,7 @@ import type { Layout } from "./types.ts"; */ export function redistribute_panel_sizes( panel: Layout, - path: number[], + path: LayoutPathTraversal, delta: number | undefined, physics = DEFAULT_PHYSICS, ): Layout { @@ -43,14 +43,14 @@ export function redistribute_panel_sizes( let current: Layout = result; const deltas = { horizontal: delta || 0, vertical: delta || 0 }; for (let i = 0; i < path.length - 1; i++) { - if (current.type === "split-panel") { + if (current.type === "split-layout") { deltas[current.orientation] /= current.sizes[path[i]]; current = current.children[path[i]]; } } // Apply the redistribution at the final path index - if (current.type === "split-panel") { + if (current.type === "split-layout") { if (delta === undefined) { current.sizes = current.sizes.map((_) => 1 / current.sizes.length); } else { diff --git a/src/layout/remove_child.ts b/src/layout/remove_child.ts index a88b636..4c698ee 100644 --- a/src/layout/remove_child.ts +++ b/src/layout/remove_child.ts @@ -25,14 +25,14 @@ import { EMPTY_PANEL } from "./types.ts"; */ export function remove_child(panel: Layout, child: string): Layout { // If this is a child panel, handle tab removal - if (panel.type === "child-panel") { + if (panel.type === "tab-layout") { if (panel.tabs.includes(child)) { const newChild = panel.tabs.filter((c) => c !== child); if (newChild.length === 0) { return structuredClone(EMPTY_PANEL); } return { - type: "child-panel", + type: "tab-layout", tabs: newChild, }; } @@ -45,7 +45,7 @@ export function remove_child(panel: Layout, child: string): Layout { // Try to remove the child from this split panel's children const index = result.children.findIndex((p) => { - if (p.type === "child-panel") { + if (p.type === "tab-layout") { return p.tabs.includes(child); } @@ -82,7 +82,7 @@ export function remove_child(panel: Layout, child: string): Layout { // Child not found at this level - recursively search children let modified = false; const newChildren = result.children.map((p) => { - if (p.type === "split-panel") { + if (p.type === "split-layout") { const updated = remove_child(p, child); if (updated !== p) { modified = true; diff --git a/src/layout/types.ts b/src/layout/types.ts index e5398a1..76d2be3 100644 --- a/src/layout/types.ts +++ b/src/layout/types.ts @@ -47,7 +47,7 @@ export interface ViewWindow { * opposite `orientation` as its parent. */ export interface SplitLayout { - type: "split-panel"; + type: "split-layout"; children: Layout[]; sizes: number[]; orientation: Orientation; @@ -57,18 +57,23 @@ export interface SplitLayout { * A leaf panel node that contains a single named child element. */ export interface TabLayout { - type: "child-panel"; + type: "tab-layout"; tabs: string[]; selected?: number; } +/** + * Represents a panel location relative to a `Layout` struct. + */ +export type LayoutPathTraversal = number[]; + /** * Represents a draggable divider between two panels in the layout. * * Used for hit detection. */ export interface LayoutDivider { - path: number[]; + path: LayoutPathTraversal; view_window: ViewWindow; type: Orientation; } @@ -79,7 +84,7 @@ export interface LayoutDivider { export interface LayoutPath { type: "layout-path"; slot: string; - path: number[]; + path: LayoutPathTraversal; view_window: ViewWindow; column: number; row: number; @@ -94,7 +99,7 @@ export interface LayoutPath { * An empty `Layout` with no panels. */ export const EMPTY_PANEL: Layout = { - type: "split-panel", + type: "split-layout", orientation: "horizontal", sizes: [], children: [], diff --git a/src/regular-layout-frame.ts b/src/regular-layout-frame.ts index 37e47da..a5fc585 100644 --- a/src/regular-layout-frame.ts +++ b/src/regular-layout-frame.ts @@ -162,7 +162,7 @@ export class RegularLayoutFrame extends HTMLElement { let new_tab_panel = this._layout.getPanel(slot, new_panel); if (!new_tab_panel) { new_tab_panel = { - type: "child-panel", + type: "tab-layout", tabs: [slot], selected: 0, }; diff --git a/src/regular-layout.ts b/src/regular-layout.ts index d958b4f..39275f7 100644 --- a/src/regular-layout.ts +++ b/src/regular-layout.ts @@ -25,6 +25,7 @@ import type { TabLayout, OverlayMode, Orientation, + LayoutPathTraversal, } from "./layout/types.ts"; import { calculate_intersection } from "./layout/calculate_intersect.ts"; import { remove_child } from "./layout/remove_child.ts"; @@ -301,7 +302,7 @@ export class RegularLayout extends HTMLElement { */ insertPanel = ( name: string, - path: number[] = [], + path: LayoutPathTraversal = [], split?: boolean | Orientation, ) => { let orientation: Orientation | undefined; @@ -331,7 +332,7 @@ export class RegularLayout extends HTMLElement { * @returns The TabLayout containing the panel if found, null otherwise. */ getPanel = (name: string, layout: Layout = this._panel): TabLayout | null => { - if (layout.type === "child-panel") { + if (layout.type === "tab-layout") { if (layout.tabs.includes(name)) { return layout; } diff --git a/tests/helpers/fixtures.ts b/tests/helpers/fixtures.ts index 01d5c6c..0956d50 100644 --- a/tests/helpers/fixtures.ts +++ b/tests/helpers/fixtures.ts @@ -17,34 +17,34 @@ import type { Layout } from "../../src/layout/types.ts"; export const LAYOUTS = { /** Single panel with AAA */ SINGLE_AAA: { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], } as Layout, /** Single panel with BBB */ SINGLE_BBB: { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], } as Layout, /** Single panel with multiple tabs */ SINGLE_TABS: { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "BBB", "CCC"], selected: 0, } as Layout, /** Two panels horizontal split (30/70) */ TWO_HORIZONTAL: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -53,15 +53,15 @@ export const LAYOUTS = { /** Two panels vertical split (50/50) */ TWO_VERTICAL: { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -70,19 +70,19 @@ export const LAYOUTS = { /** Three panels horizontal split */ THREE_HORIZONTAL: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -91,17 +91,17 @@ export const LAYOUTS = { /** Nested layout: horizontal split with left side vertical split (60/40 outer, 30/70 inner) */ NESTED_BASIC: { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -109,7 +109,7 @@ export const LAYOUTS = { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -119,26 +119,26 @@ export const LAYOUTS = { /** Nested layout: vertical split with nested horizontal */ NESTED_VERTICAL_OUTER: { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], sizes: [0.3, 0.7], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -147,34 +147,34 @@ export const LAYOUTS = { /** Deeply nested layout with alternating orientations */ DEEPLY_NESTED: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], sizes: [0.3, 0.7], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -186,21 +186,21 @@ export const LAYOUTS = { /** Single panel with DDD */ SINGLE_DDD: { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], } as Layout, /** Two panels horizontal split (50/50) */ TWO_HORIZONTAL_EQUAL: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -209,19 +209,19 @@ export const LAYOUTS = { /** Three panels horizontal split with custom sizes */ THREE_HORIZONTAL_CUSTOM: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -230,19 +230,19 @@ export const LAYOUTS = { /** Three panels vertical split (CCC, DDD, EEE) */ THREE_VERTICAL_CDE: { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["EEE"], }, ], @@ -251,19 +251,19 @@ export const LAYOUTS = { /** Three panels horizontal with precise custom sizes */ THREE_HORIZONTAL_PRECISE: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -272,19 +272,19 @@ export const LAYOUTS = { /** Three panels horizontal with different sizes (30/40/30) */ THREE_HORIZONTAL_304030: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -293,37 +293,37 @@ export const LAYOUTS = { /** Deeply nested layout: vertical outer with horizontal inner */ DEEPLY_NESTED_ALT: { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], sizes: [0.4, 0.6], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -332,19 +332,19 @@ export const LAYOUTS = { /** Three panels with tabs in middle */ THREE_HORIZONTAL_WITH_TABS: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB", "DDD", "EEE"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -353,16 +353,16 @@ export const LAYOUTS = { /** Two panels horizontal with tabs (AAA, BBB) and CCC */ TWO_HORIZONTAL_WITH_TABS: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -371,31 +371,31 @@ export const LAYOUTS = { /** Single panel with tabs (AAA, BBB, CCC) with selected index */ SINGLE_TABS_WITH_SELECTED: { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "BBB", "CCC"], selected: 0, } as Layout, /** Single panel with one child (ONLY) */ SINGLE_ONLY: { - type: "child-panel", + type: "tab-layout", tabs: ["ONLY"], } as Layout, /** Single panel with one child (SECOND) */ SINGLE_SECOND: { - type: "child-panel", + type: "tab-layout", tabs: ["SECOND"], } as Layout, /** Single panel horizontal split with one child (AAA) */ SINGLE_SPLIT_HORIZONTAL: { - type: "split-panel", + type: "split-layout", sizes: [1], orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, ], @@ -403,12 +403,12 @@ export const LAYOUTS = { /** Single panel vertical split with one child (AAA) */ SINGLE_SPLIT_VERTICAL: { - type: "split-panel", + type: "split-layout", orientation: "vertical", sizes: [1], children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, ], @@ -416,35 +416,35 @@ export const LAYOUTS = { /** Complex nested layout with 4 children */ COMPLEX_FOUR_CHILDREN: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["EEE"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -454,7 +454,7 @@ export const LAYOUTS = { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], }, ], @@ -463,37 +463,37 @@ export const LAYOUTS = { /** Nested aligned split panels */ NESTED_ALIGNED: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], }, ], @@ -502,31 +502,31 @@ export const LAYOUTS = { /** Nested aligned reversed orientation */ NESTED_ALIGNED_REVERSED: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -536,14 +536,14 @@ export const LAYOUTS = { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], }, ], @@ -552,31 +552,31 @@ export const LAYOUTS = { /** Nested aligned reversed with asymmetric sizes */ NESTED_ALIGNED_ASYMMETRIC: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -586,14 +586,14 @@ export const LAYOUTS = { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], sizes: [0.75, 0.25], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], }, ], @@ -602,18 +602,18 @@ export const LAYOUTS = { /** Three children with DDD (vertical) */ THREE_VERTICAL_WITH_DDD: { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -623,21 +623,21 @@ export const LAYOUTS = { /** Nested horizontal with vertical inner (AAA, BBB, DDD) and CCC */ NESTED_HORIZONTAL_WITH_VERTICAL_DDD: { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -645,7 +645,7 @@ export const LAYOUTS = { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -655,18 +655,18 @@ export const LAYOUTS = { /** Three children horizontal (AAA, BBB, CCC) */ THREE_HORIZONTAL_ABC: { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -676,27 +676,27 @@ export const LAYOUTS = { /** Complex nested layout (horizontal outer, vertical inner with A and B, and C) */ COMPLEX_NESTED_ABC: { - type: "split-panel", + type: "split-layout", orientation: "horizontal", sizes: [0.5, 0.5], children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", sizes: [0.5, 0.5], children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["A"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["B"], }, ], }, { - type: "child-panel", + type: "tab-layout", tabs: ["C"], }, ], diff --git a/tests/helpers/integration.ts b/tests/helpers/integration.ts index 04d8515..ee3e125 100644 --- a/tests/helpers/integration.ts +++ b/tests/helpers/integration.ts @@ -70,7 +70,7 @@ export async function dragMouse( export async function insertPanel( page: Page, panelName: string, - path: number[], + path: LayoutPathTraversal, ): Promise { await page.evaluate( ({ name, p }) => { diff --git a/tests/integration/insert-panel.spec.ts b/tests/integration/insert-panel.spec.ts index 9abe205..714d9ca 100644 --- a/tests/integration/insert-panel.spec.ts +++ b/tests/integration/insert-panel.spec.ts @@ -24,7 +24,7 @@ test("should insert a single panel into a single panel layout", async ({ await setupLayout(page, LAYOUTS.SINGLE_AAA); const currentState = await saveLayout(page); expect(currentState).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }); @@ -32,7 +32,7 @@ test("should insert a single panel into a single panel layout", async ({ await insertPanel(page, "BBB", []); const currentState2 = await saveLayout(page); expect(currentState2).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["BBB", "AAA"], selected: 0, }); @@ -45,21 +45,21 @@ test("should insert panel at specific path in split panel", async ({ await insertPanel(page, "CCC", [1]); const afterInsert = await saveLayout(page); expect(afterInsert).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, @@ -87,25 +87,25 @@ test("should insert panel into nested split panel", async ({ page }) => { }); expect(afterInsert).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], selected: 0, }, @@ -113,7 +113,7 @@ test("should insert panel into nested split panel", async ({ page }) => { sizes: [0.19999999999999998, 0.4666666666666666, 0.3333333333333333], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, @@ -144,25 +144,25 @@ test("should split existing panel when inserting at deeper path", async ({ }); expect(afterInsert).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, diff --git a/tests/integration/remove-panel.spec.ts b/tests/integration/remove-panel.spec.ts index 224dd93..b99d9d8 100644 --- a/tests/integration/remove-panel.spec.ts +++ b/tests/integration/remove-panel.spec.ts @@ -24,7 +24,7 @@ test.describe("removePanel", () => { const currentState = await saveLayout(page); expect(currentState).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }); @@ -35,16 +35,16 @@ test.describe("removePanel", () => { await removePanel(page, "BBB"); const currentState = await saveLayout(page); expect(currentState).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, @@ -58,16 +58,16 @@ test.describe("removePanel", () => { await removePanel(page, "AAA"); const currentState = await saveLayout(page); expect(currentState).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, @@ -81,20 +81,20 @@ test.describe("removePanel", () => { await removePanel(page, "BBB"); const currentState = await saveLayout(page); expect(currentState).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, @@ -102,7 +102,7 @@ test.describe("removePanel", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], selected: 0, }, @@ -130,21 +130,21 @@ test.describe("tabs", () => { await removePanel(page, "BBB"); const currentState = await saveLayout(page); expect(currentState).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD", "EEE"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, diff --git a/tests/integration/resize.spec.ts b/tests/integration/resize.spec.ts index 939a8f8..a539c38 100644 --- a/tests/integration/resize.spec.ts +++ b/tests/integration/resize.spec.ts @@ -22,7 +22,7 @@ test("should resize panels by dragging dividers and preserve state with save/res }) => { await setupLayout(page); const initialState = await saveLayout(page); - expect(initialState).toHaveProperty("type", "split-panel"); + expect(initialState).toHaveProperty("type", "split-layout"); expect(initialState).toHaveProperty("children"); expect(initialState).toHaveProperty("sizes"); const layoutBox = await page.locator("regular-layout").boundingBox(); @@ -35,7 +35,7 @@ test("should resize panels by dragging dividers and preserve state with save/res await dragMouse(page, dividerX, dividerY, dividerX + dragDistance, dividerY); const resizedState = await saveLayout(page); expect(resizedState).not.toEqual(initialState); - expect(resizedState).toHaveProperty("type", "split-panel"); + expect(resizedState).toHaveProperty("type", "split-layout"); expect(resizedState).toHaveProperty("sizes"); await restoreLayout(page, initialState); const restored1 = await saveLayout(page); diff --git a/tests/integration/save-restore.spec.ts b/tests/integration/save-restore.spec.ts index ebdaa2b..e93fd75 100644 --- a/tests/integration/save-restore.spec.ts +++ b/tests/integration/save-restore.spec.ts @@ -24,7 +24,7 @@ test("should save and restore various layout types", async ({ page }) => { await setupLayout(page, LAYOUTS.SINGLE_AAA); const currentState = await saveLayout(page); expect(currentState).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }); @@ -33,16 +33,16 @@ test("should save and restore various layout types", async ({ page }) => { await restoreLayout(page, LAYOUTS.TWO_HORIZONTAL); const currentState2 = await saveLayout(page); expect(currentState2).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, @@ -54,20 +54,20 @@ test("should save and restore various layout types", async ({ page }) => { await restoreLayout(page, LAYOUTS.NESTED_BASIC); const currentState3 = await saveLayout(page); expect(currentState3).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, @@ -75,7 +75,7 @@ test("should save and restore various layout types", async ({ page }) => { sizes: [0.3, 0.7], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, @@ -109,16 +109,16 @@ test("should save returns a deep clone, not a reference", async ({ page }) => { const afterModification = await saveLayout(page); expect(afterModification).not.toStrictEqual(saved); expect(saved).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, @@ -131,21 +131,21 @@ test("should save and restore preserve exact size ratios", async ({ page }) => { await setupLayout(page, LAYOUTS.THREE_HORIZONTAL_PRECISE); const saved = await saveLayout(page); expect(saved).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, @@ -178,26 +178,26 @@ test("should flatten nested split panels with same orientation", async ({ }) => { // Test horizontal panels nested within horizontal parent const nestedHorizontal: Layout = { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], sizes: [0.3, 0.7], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -209,21 +209,21 @@ test("should flatten nested split panels with same orientation", async ({ // Should be flattened to a single horizontal split with 3 children expect(saved).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, @@ -233,23 +233,23 @@ test("should flatten nested split panels with same orientation", async ({ // Test vertical panels nested within vertical parent const nestedVertical: Layout = { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -264,21 +264,21 @@ test("should flatten nested split panels with same orientation", async ({ // Should be flattened to a single vertical split with 3 children expect(saved2).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, @@ -292,27 +292,27 @@ test("should flatten nested split panels with same orientation, not at the root" }) => { // Test horizontal panels nested within horizontal parent const nestedHorizontal: Layout = { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -322,7 +322,7 @@ test("should flatten nested split panels with same orientation, not at the root" sizes: [0.3, 0.7], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -334,25 +334,25 @@ test("should flatten nested split panels with same orientation, not at the root" // Should be flattened to a single horizontal split with 3 children expect(saved).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], selected: 0, }, @@ -360,7 +360,7 @@ test("should flatten nested split panels with same orientation, not at the root" sizes: [0.3, 0.21, 0.48999999999999994], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, diff --git a/tests/integration/tabs.spec.ts b/tests/integration/tabs.spec.ts index 967ddcb..04173bf 100644 --- a/tests/integration/tabs.spec.ts +++ b/tests/integration/tabs.spec.ts @@ -61,7 +61,7 @@ test("should switch between tabs by clicking", async ({ page }) => { }); expect(layoutState).toMatchObject({ - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "BBB", "CCC"], selected: 1, }); @@ -108,20 +108,20 @@ test("should move a panel by dragging a selected tab", async ({ page }) => { }); expect(layoutAfter).toMatchObject({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, ], @@ -142,16 +142,16 @@ test("should move a panel by dragging a deselected tab", async ({ page }) => { }); expect(layoutBefore).toMatchObject({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -192,20 +192,20 @@ test("should move a panel by dragging a deselected tab", async ({ page }) => { }); expect(layoutAfter).toMatchObject({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], diff --git a/tests/unit/calculate_path.spec.ts b/tests/unit/calculate_path.spec.ts index 42f4b1e..102f8a8 100644 --- a/tests/unit/calculate_path.spec.ts +++ b/tests/unit/calculate_path.spec.ts @@ -20,7 +20,7 @@ test("returns null for a name not in the layout", () => { test("returns null for an empty layout", () => { const result = calculate_path("AAA", { - type: "split-panel", + type: "split-layout", orientation: "horizontal", sizes: [], children: [], diff --git a/tests/unit/composite.spec.ts b/tests/unit/composite.spec.ts index 4fec516..58ff85e 100644 --- a/tests/unit/composite.spec.ts +++ b/tests/unit/composite.spec.ts @@ -23,26 +23,26 @@ test("cursor near left edge of same orientation", () => { ); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "horizontal", sizes: [0.5, 0.5], children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -52,7 +52,7 @@ test("cursor near left edge of same orientation", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -65,26 +65,26 @@ test("cursor near top edge of opposite orientation", () => { const result = insert_child(LAYOUTS.NESTED_BASIC, "DDD", [0], "vertical"); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", sizes: [0.5, 0.5], orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -92,7 +92,7 @@ test("cursor near top edge of opposite orientation", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -113,22 +113,22 @@ test("cursor near bottom edge but with opposite orientation", () => { ); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", sizes: [0.5, 0.5], orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -136,7 +136,7 @@ test("cursor near bottom edge but with opposite orientation", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -144,7 +144,7 @@ test("cursor near bottom edge but with opposite orientation", () => { orientation: "horizontal", }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -153,33 +153,33 @@ test("cursor near bottom edge but with opposite orientation", () => { test("arbitrary regression also", () => { const PANEL: Layout = { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, @@ -190,7 +190,7 @@ test("arbitrary regression also", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["EEE"], selected: 0, }, @@ -198,7 +198,7 @@ test("arbitrary regression also", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF", "GGG", "HHH"], selected: 0, }, @@ -209,37 +209,37 @@ test("arbitrary regression also", () => { const result = insert_child(PANEL, "QQQ", [1], "vertical"); expect(result).toStrictEqual({ sizes: [0.5, 0.5], - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, @@ -250,7 +250,7 @@ test("arbitrary regression also", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["EEE"], selected: 0, }, @@ -258,7 +258,7 @@ test("arbitrary regression also", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF", "GGG", "HHH"], selected: 0, }, @@ -266,7 +266,7 @@ test("arbitrary regression also", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["QQQ"], // selected: 0, }, diff --git a/tests/unit/css_grid_layout.spec.ts b/tests/unit/css_grid_layout.spec.ts index 6bf64d1..4c37c4c 100644 --- a/tests/unit/css_grid_layout.spec.ts +++ b/tests/unit/css_grid_layout.spec.ts @@ -33,7 +33,7 @@ test("simple test", async () => { test("single child panel", () => { const singleChild: Layout = { - type: "child-panel", + type: "tab-layout", tabs: ["ONLY"], }; @@ -49,17 +49,17 @@ test("single child panel", () => { test("regressions", () => { const test: Layout = { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -67,7 +67,7 @@ test("regressions", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -92,32 +92,32 @@ test("regressions", () => { test("deeply nested css grid", () => { const test: Layout = { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["EEE"], }, ], sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -125,7 +125,7 @@ test("deeply nested css grid", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -152,32 +152,32 @@ test("deeply nested css grid", () => { test("Deeply nested CSS grid part 2", () => { const test: Layout = { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["EEE"], }, ], sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -185,15 +185,15 @@ test("Deeply nested CSS grid part 2", () => { orientation: "vertical", }, { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], }, ], @@ -224,17 +224,17 @@ test("Deeply nested CSS grid part 2", () => { test("parallel", () => { const test: Layout = { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -242,11 +242,11 @@ test("parallel", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -270,19 +270,19 @@ test("parallel", () => { ); }); -test("Parallel split-panels with different sizes", () => { +test("Parallel split-layouts with different sizes", () => { const test: Layout = { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -290,14 +290,14 @@ test("Parallel split-panels with different sizes", () => { orientation: "vertical", }, { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -327,29 +327,29 @@ test("Parallel split-panels with different sizes", () => { test("Deeply alternating split", () => { const test: Layout = { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["VfssXzLK"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["qsAwxKvs"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, ], @@ -359,7 +359,7 @@ test("Deeply alternating split", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -367,7 +367,7 @@ test("Deeply alternating split", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], diff --git a/tests/unit/css_grid_layout_partial.spec.ts b/tests/unit/css_grid_layout_partial.spec.ts index 3102245..b031802 100644 --- a/tests/unit/css_grid_layout_partial.spec.ts +++ b/tests/unit/css_grid_layout_partial.spec.ts @@ -17,29 +17,29 @@ import { DEFAULT_PHYSICS } from "../../src/layout/constants.ts"; test("Deeply alternating split with grid-based overlay", () => { const test: Layout = { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -49,7 +49,7 @@ test("Deeply alternating split with grid-based overlay", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -57,7 +57,7 @@ test("Deeply alternating split with grid-based overlay", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["EEE"], }, ], diff --git a/tests/unit/flatten.spec.ts b/tests/unit/flatten.spec.ts index d64fee4..f46466c 100644 --- a/tests/unit/flatten.spec.ts +++ b/tests/unit/flatten.spec.ts @@ -15,27 +15,27 @@ import type { Layout } from "../../src/layout/types.ts"; test("Deeply alternating split partial", () => { const test: Layout = { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -45,19 +45,19 @@ test("Deeply alternating split partial", () => { sizes: [0.5, 0.5], }, { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["EEE"], }, ], @@ -68,25 +68,25 @@ test("Deeply alternating split partial", () => { }; expect(flatten(test)).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], selected: 0, }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], selected: 0, }, @@ -94,17 +94,17 @@ test("Deeply alternating split partial", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["EEE"], selected: 0, }, @@ -115,19 +115,19 @@ test("Deeply alternating split partial", () => { test("Nested split panels with a single child", () => { const test: Layout = { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "BBB", "CCC"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -138,16 +138,16 @@ test("Nested split panels with a single child", () => { }; expect(flatten(test)).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "BBB", "CCC"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], selected: 0, }, diff --git a/tests/unit/hit_detection.spec.ts b/tests/unit/hit_detection.spec.ts index 87d67af..f4bad83 100644 --- a/tests/unit/hit_detection.spec.ts +++ b/tests/unit/hit_detection.spec.ts @@ -19,7 +19,7 @@ test("AAA", () => { expect(result).toStrictEqual({ slot: "AAA", path: [0, 0], - layout: { type: "child-panel", tabs: ["AAA"] }, + layout: { type: "tab-layout", tabs: ["AAA"] }, type: "layout-path", is_edge: false, orientation: "vertical", @@ -41,7 +41,7 @@ test("BBB", () => { expect(result).toStrictEqual({ slot: "BBB", path: [0, 1], - layout: { type: "child-panel", tabs: ["BBB"] }, + layout: { type: "tab-layout", tabs: ["BBB"] }, type: "layout-path", is_edge: false, orientation: "vertical", @@ -63,7 +63,7 @@ test("CCC", () => { expect(result).toStrictEqual({ slot: "CCC", path: [1], - layout: { type: "child-panel", tabs: ["CCC"] }, + layout: { type: "tab-layout", tabs: ["CCC"] }, type: "layout-path", is_edge: false, orientation: "horizontal", @@ -130,7 +130,7 @@ test("single AAA", () => { } as DOMRect, }); expect(result).toStrictEqual({ - layout: { type: "child-panel", tabs: ["AAA"] }, + layout: { type: "tab-layout", tabs: ["AAA"] }, column: 0.1, column_offset: 0.1, is_edge: false, diff --git a/tests/unit/insert_child.spec.ts b/tests/unit/insert_child.spec.ts index 0c7d52a..819e6af 100644 --- a/tests/unit/insert_child.spec.ts +++ b/tests/unit/insert_child.spec.ts @@ -13,7 +13,7 @@ import { expect, test } from "@playwright/test"; import { LAYOUTS } from "../helpers/fixtures.ts"; import { insert_child } from "../../src/layout/insert_child.ts"; -// - If the last index of the path is a split-panel, insert at that point. +// - If the last index of the path is a split-layout, insert at that point. // - If the last index of the path is a child panel, stack at the last position in the tab // - If the second to last position is a child panel, stack in the position of the last index. // - if _edge_mode_ is set, always insert in a split panel at the second to last index @@ -21,17 +21,17 @@ import { insert_child } from "../../src/layout/insert_child.ts"; test("insert into root split panel", () => { const result = insert_child(LAYOUTS.NESTED_BASIC, "DDD", []); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -39,11 +39,11 @@ test("insert into root split panel", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -62,26 +62,26 @@ test("insert into root split panel edge", () => { ); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "vertical", sizes: [0.5, 0.5], children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, { - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -89,7 +89,7 @@ test("insert into root split panel edge", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -103,21 +103,21 @@ test("insert into root split panel edge", () => { test("insert into root split panel edge along the same orientation", () => { const result = insert_child(LAYOUTS.NESTED_BASIC, "DDD", [0]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -125,7 +125,7 @@ test("insert into root split panel edge along the same orientation", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -137,17 +137,17 @@ test("insert into root split panel edge along the same orientation", () => { test("stack split panel", () => { const result = insert_child(LAYOUTS.NESTED_BASIC, "DDD", [0, 1, 0]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD", "BBB"], }, ], @@ -155,7 +155,7 @@ test("stack split panel", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -167,7 +167,7 @@ test("stack split panel", () => { test("stack split panel single child after", () => { const result = insert_child(LAYOUTS.SINGLE_AAA, "DDD", [1]); expect(result).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "DDD"], }); }); @@ -175,7 +175,7 @@ test("stack split panel single child after", () => { test("stack split panel single child before", () => { const result = insert_child(LAYOUTS.SINGLE_AAA, "DDD", [0]); expect(result).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["DDD", "AAA"], }); }); @@ -183,15 +183,15 @@ test("stack split panel single child before", () => { test("stack split panel two horizontal before", () => { const result = insert_child(LAYOUTS.TWO_HORIZONTAL, "DDD", [0, 0]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["DDD", "AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -202,15 +202,15 @@ test("stack split panel two horizontal before", () => { test("stack split panel two horizontal after", () => { const result = insert_child(LAYOUTS.TWO_HORIZONTAL, "DDD", [0, 1]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "DDD"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -221,15 +221,15 @@ test("stack split panel two horizontal after", () => { test("stack nested basic after", () => { const result = insert_child(LAYOUTS.TWO_HORIZONTAL, "DDD", [0, 1]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "DDD"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -246,17 +246,17 @@ test("stack nested basic after 5", () => { // false, ); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -264,7 +264,7 @@ test("stack nested basic after 5", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD", "CCC"], }, ], @@ -276,19 +276,19 @@ test("stack nested basic after 5", () => { test("stack nested basic after 4", () => { const result = insert_child(LAYOUTS.TWO_HORIZONTAL_EQUAL, "DDD", [1]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -296,20 +296,20 @@ test("stack nested basic after 4", () => { }); }); -test("append top level split-panel", () => { +test("append top level split-layout", () => { const result = insert_child(LAYOUTS.NESTED_BASIC, "DDD", [2]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -317,11 +317,11 @@ test("append top level split-panel", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -330,20 +330,20 @@ test("append top level split-panel", () => { }); }); -test("insert into top level split-panel", () => { +test("insert into top level split-layout", () => { const result = insert_child(LAYOUTS.NESTED_BASIC, "DDD", [1]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -351,11 +351,11 @@ test("insert into top level split-panel", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -364,20 +364,20 @@ test("insert into top level split-panel", () => { }); }); -test("insert into top level split-panel 2", () => { +test("insert into top level split-layout 2", () => { const result = insert_child(LAYOUTS.NESTED_BASIC, "DDD", [1, 0]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -385,7 +385,7 @@ test("insert into top level split-panel 2", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD", "CCC"], }, ], @@ -397,25 +397,25 @@ test("insert into top level split-panel 2", () => { test("insert at path splitting a child panel", () => { const result = insert_child(LAYOUTS.NESTED_BASIC, "DDD", [1, 1]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], sizes: [0.3, 0.7], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC", "DDD"], }, ], @@ -427,21 +427,21 @@ test("insert at path splitting a child panel", () => { test("insert into nested split panel", () => { const result = insert_child(LAYOUTS.NESTED_BASIC, "DDD", [0, 2]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -449,7 +449,7 @@ test("insert into nested split panel", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -461,17 +461,17 @@ test("insert into nested split panel", () => { test("split a nested child panel", () => { const result = insert_child(LAYOUTS.NESTED_BASIC, "DDD", [0, 0, 1]); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "DDD"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -479,7 +479,7 @@ test("split a nested child panel", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -491,7 +491,7 @@ test("split a nested child panel", () => { test("insert into single child panel", () => { const result = insert_child(LAYOUTS.SINGLE_ONLY, "SECOND", []); expect(result).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["SECOND", "ONLY"], }); }); @@ -506,7 +506,7 @@ test("insert into single child panel, on the top edge", () => { ); expect(result).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["SECOND", "ONLY"], }); }); @@ -521,16 +521,16 @@ test("insert into single child panel, on the top edge with split", () => { ); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", sizes: [0.5, 0.5], orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["SECOND"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["ONLY"], }, ], @@ -547,7 +547,7 @@ test("insert into single child panel, on the left edge", () => { ); expect(result).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["ONLY", "SECOND"], }); }); @@ -561,15 +561,15 @@ test("insert into single child panel, on the bottom edge", () => { // true, ); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["ONLY"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["SECOND"], }, ], @@ -586,15 +586,15 @@ test("insert into single child panel, on the right edge", () => { // true, ); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["ONLY"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["SECOND"], }, ], @@ -602,26 +602,26 @@ test("insert into single child panel, on the right edge", () => { }); }); -test("insert into a child-panel root, on the top edge", () => { +test("insert into a tab-layout root, on the top edge", () => { const result = insert_child(LAYOUTS.SINGLE_AAA, "BBB", [0]); expect(result).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["BBB", "AAA"], }); }); -test("insert into a child-panel root, on the top edge with split", () => { +test("insert into a tab-layout root, on the top edge with split", () => { const result = insert_child(LAYOUTS.SINGLE_AAA, "BBB", [0], "vertical"); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, ], @@ -632,7 +632,7 @@ test("insert into a child-panel root, on the top edge with split", () => { test("insert into SINGLE_TABS", () => { const result = insert_child(LAYOUTS.SINGLE_TABS, "DDD", [1]); expect(result).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "DDD", "BBB", "CCC"], selected: 0, }); @@ -648,17 +648,17 @@ test("insert with split path into SINGLE_TABS", () => { ); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", sizes: [0.5, 0.5], orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "BBB", "CCC"], selected: 0, }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], // selected: 0, }, diff --git a/tests/unit/redistribute_panel_sizes.spec.ts b/tests/unit/redistribute_panel_sizes.spec.ts index 725f259..bdb7a7c 100644 --- a/tests/unit/redistribute_panel_sizes.spec.ts +++ b/tests/unit/redistribute_panel_sizes.spec.ts @@ -21,17 +21,17 @@ test("redistribute depth 1 child", () => { ); expect(clone).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -39,7 +39,7 @@ test("redistribute depth 1 child", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -51,17 +51,17 @@ test("redistribute depth 1 child", () => { test("redistribute depth 2 children", () => { const clone = redistribute_panel_sizes(LAYOUTS.NESTED_BASIC, [0, 0], 0.1); expect(clone).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -69,7 +69,7 @@ test("redistribute depth 2 children", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -85,21 +85,21 @@ test("redistribute with 3 children", () => { 0.1, ); expect(clone).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], @@ -107,7 +107,7 @@ test("redistribute with 3 children", () => { orientation: "vertical", }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -123,35 +123,35 @@ test("redistribute nested spec with 4 children", () => { 0.1, ); expect(clone).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["EEE"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -161,7 +161,7 @@ test("redistribute nested spec with 4 children", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], }, ], @@ -176,37 +176,37 @@ test("nested aligned splitpanels", () => { 0.1, ); expect(clone).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], sizes: [0.3, 0.7], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], }, ], @@ -221,31 +221,31 @@ test("nested aligned splitpanels, reversed orientation", () => { 0.1, ); expect(clone).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -255,14 +255,14 @@ test("nested aligned splitpanels, reversed orientation", () => { sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], }, ], @@ -277,31 +277,31 @@ test("nested aligned splitpanels, reversed orientation with asymmetric sizes", ( 0.1, ); expect(clone).toStrictEqual({ - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "split-panel", + type: "split-layout", orientation: "horizontal", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "split-panel", + type: "split-layout", orientation: "vertical", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -311,14 +311,14 @@ test("nested aligned splitpanels, reversed orientation with asymmetric sizes", ( sizes: [0.5, 0.5], }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ], sizes: [0.75, 0.25], }, { - type: "child-panel", + type: "tab-layout", tabs: ["FFF"], }, ], diff --git a/tests/unit/remove_child.spec.ts b/tests/unit/remove_child.spec.ts index 765c20c..a47ee03 100644 --- a/tests/unit/remove_child.spec.ts +++ b/tests/unit/remove_child.spec.ts @@ -16,14 +16,14 @@ import { remove_child } from "../../src/layout/remove_child.ts"; test("remove child from nested split panel", () => { const result = remove_child(LAYOUTS.NESTED_BASIC, "AAA"); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -35,14 +35,14 @@ test("remove child from nested split panel", () => { test("remove child from top-level split panel", () => { const result = remove_child(LAYOUTS.NESTED_BASIC, "CCC"); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["BBB"], }, ], @@ -54,14 +54,14 @@ test("remove child from top-level split panel", () => { test("remove child from top-level tab panel", () => { const result = remove_child( { - type: "child-panel", + type: "tab-layout", tabs: ["AAA", "CCC"], }, "AAA", ); expect(result).toStrictEqual({ - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }); }); @@ -69,14 +69,14 @@ test("remove child from top-level tab panel", () => { test("remove child from split panel with 3 children", () => { const result = remove_child(LAYOUTS.THREE_HORIZONTAL_CUSTOM, "BBB"); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -88,17 +88,17 @@ test("remove child from split panel with 3 children", () => { test("remove deeply nested child", () => { const result = remove_child(LAYOUTS.DEEPLY_NESTED_ALT, "BBB"); expect(result).toStrictEqual({ - type: "split-panel", + type: "split-layout", children: [ { - type: "split-panel", + type: "split-layout", children: [ { - type: "child-panel", + type: "tab-layout", tabs: ["AAA"], }, { - type: "child-panel", + type: "tab-layout", tabs: ["CCC"], }, ], @@ -106,7 +106,7 @@ test("remove deeply nested child", () => { orientation: "horizontal", }, { - type: "child-panel", + type: "tab-layout", tabs: ["DDD"], }, ],