From 9994195d6f815627d1d762f2757e4423625a3998 Mon Sep 17 00:00:00 2001 From: Andrew Stein Date: Wed, 4 Feb 2026 21:31:01 -0500 Subject: [PATCH] Add divider double-click to evenly distribute panel sizes --- benchmarks/performance.spec.ts | 6 +- examples/layout.json | 115 ++++++-------- src/layout/calculate_intersect.ts | 2 +- src/layout/generate_grid.ts | 8 +- src/layout/insert_child.ts | 10 +- src/layout/redistribute_panel_sizes.ts | 28 ++-- src/layout/remove_child.ts | 14 +- src/layout/types.ts | 2 +- src/regular-layout-frame.ts | 6 +- src/regular-layout-tab.ts | 10 +- src/regular-layout.ts | 22 ++- tests/helpers/fixtures.ts | 164 ++++++++++---------- tests/integration/insert-panel.spec.ts | 24 +-- tests/integration/remove-panel.spec.ts | 22 +-- tests/integration/save-restore.spec.ts | 62 ++++---- tests/integration/tabs.spec.ts | 18 +-- tests/unit/composite.spec.ts | 46 +++--- tests/unit/css_grid_layout.spec.ts | 56 +++---- tests/unit/css_grid_layout_partial.spec.ts | 10 +- tests/unit/flatten.spec.ts | 32 ++-- tests/unit/hit_detection.spec.ts | 8 +- tests/unit/insert_child.spec.ts | 130 ++++++++-------- tests/unit/redistribute_panel_sizes.spec.ts | 60 +++---- tests/unit/remove_child.spec.ts | 22 +-- 24 files changed, 443 insertions(+), 434 deletions(-) diff --git a/benchmarks/performance.spec.ts b/benchmarks/performance.spec.ts index 44b7163..a86ffab 100644 --- a/benchmarks/performance.spec.ts +++ b/benchmarks/performance.spec.ts @@ -48,7 +48,7 @@ function generateLargeLayout(depth: number, panelsPerLevel: number): Layout { const name = `Panel${panelCounter++}`; return { type: "child-panel", - child: [name], + tabs: [name], }; } @@ -90,7 +90,7 @@ function countPanels(layout: Layout): number { function getPanelNames(layout: Layout): string[] { if (layout.type === "child-panel") { - return layout.child; + return layout.tabs; } return layout.children.flatMap((child) => getPanelNames(child)); } @@ -145,7 +145,7 @@ const PERF_CONFIG = { }; test.describe("Performance Tests", () => { - test("drag resize performance with large layout", async ({ page }) => { + test.skip("drag resize performance with large layout", async ({ page }) => { const largeLayout = generateLargeLayout( PERF_CONFIG.layoutDepth, PERF_CONFIG.panelsPerLevel, diff --git a/examples/layout.json b/examples/layout.json index a846191..98d8582 100644 --- a/examples/layout.json +++ b/examples/layout.json @@ -1,74 +1,59 @@ { - "type": "split-panel", - "orientation": "horizontal", - "children": [ + "type": "split-panel", + "orientation": "horizontal", + "children": [ + { + "type": "split-panel", + "orientation": "vertical", + "children": [ { - "type": "split-panel", - "orientation": "vertical", - "children": [ + "type": "split-panel", + "orientation": "horizontal", + "children": [ + { + "type": "child-panel", + "tabs": ["AAA"] + }, + { + "type": "split-panel", + "orientation": "vertical", + "children": [ { - "type": "split-panel", - "orientation": "horizontal", - "children": [ - { - "type": "child-panel", - "child": ["AAA"] - }, - { - "type": "split-panel", - "orientation": "vertical", - "children": [ - { - "type": "child-panel", - "child": ["BBB"] - }, - { - "type": "child-panel", - "child": ["CCC"] - } - ], - "sizes": [ - 0.5, - 0.5 - ] - } - ], - "sizes": [ - 0.5, - 0.5 - ] + "type": "child-panel", + "tabs": ["BBB"] }, { - "type": "split-panel", - "orientation": "horizontal", - "children": [ - { - "type": "child-panel", - "child": ["DDD"] - }, - { - "type": "child-panel", - "child": ["EEE"] - } - ], - "sizes": [ - 0.5, - 0.5 - ] + "type": "child-panel", + "tabs": ["CCC"] } - ], - "sizes": [ - 0.5, - 0.5 - ] + ], + "sizes": [0.5, 0.5] + } + ], + "sizes": [0.5, 0.5] }, { - "type": "child-panel", - "child": ["FFF", "GGG", "HHH"] + "type": "split-panel", + "orientation": "horizontal", + "children": [ + { + "type": "child-panel", + "tabs": ["DDD"] + }, + { + "type": "child-panel", + "tabs": ["EEE"] + } + ], + "sizes": [0.5, 0.5] } - ], - "sizes": [ - 0.5, - 0.5 - ] -} \ No newline at end of file + ], + "sizes": [0.5, 0.5] + }, + { + "type": "child-panel", + "tabs": ["FFF", "GGG", "HHH"] + } + ], + "sizes": [0.5, 0.5] +} diff --git a/src/layout/calculate_intersect.ts b/src/layout/calculate_intersect.ts index 6beaccb..fe6d747 100644 --- a/src/layout/calculate_intersect.ts +++ b/src/layout/calculate_intersect.ts @@ -81,7 +81,7 @@ function calculate_intersection_recursive( return { type: "layout-path", layout: panel, - slot: panel.child[selected], + slot: panel.tabs[selected], path, view_window, is_edge: false, diff --git a/src/layout/generate_grid.ts b/src/layout/generate_grid.ts index f5d0119..0cc8bb5 100644 --- a/src/layout/generate_grid.ts +++ b/src/layout/generate_grid.ts @@ -104,7 +104,7 @@ function build_cells( const selected = panel.selected ?? 0; return [ { - child: panel.child[selected], + child: panel.tabs[selected], colStart: find_track_index(physics, colPositions, colStart), colEnd: find_track_index(physics, colPositions, colEnd), rowStart: find_track_index(physics, rowPositions, rowStart), @@ -182,8 +182,8 @@ const child_template = ( * type: "split-panel", * orientation: "horizontal", * children: [ - * { type: "child-panel", child: "sidebar" }, - * { type: "child-panel", child: "main" } + * { type: "child-panel", tabs: "sidebar" }, + * { type: "child-panel", tabs: "main" } * ], * sizes: [0.25, 0.75] * }; @@ -204,7 +204,7 @@ export function create_css_grid_layout( const selected = layout.selected ?? 0; return [ host_template("100%", "100%"), - child_template(physics, layout.child[selected], "1", "1"), + child_template(physics, layout.tabs[selected], "1", "1"), ].join("\n"); } diff --git a/src/layout/insert_child.ts b/src/layout/insert_child.ts index 6ef52bc..f49d2c7 100644 --- a/src/layout/insert_child.ts +++ b/src/layout/insert_child.ts @@ -33,7 +33,7 @@ export function insert_child( ): Layout { const createChildPanel = (childId: string): Layout => ({ type: "child-panel", - child: [childId], + tabs: [childId], }); if (path.length === 0) { @@ -42,7 +42,7 @@ export function insert_child( // Add to existing child-panel as a tab return { type: "child-panel", - child: [child, ...panel.child], + tabs: [child, ...panel.tabs], }; } else if (orientation) { // When inserting at edge of root, wrap the entire panel in a new split @@ -105,13 +105,13 @@ export function insert_child( restPath.length === 0 && orientation === undefined && index >= 0 && - index <= panel.child.length + index <= panel.tabs.length ) { - const newChild = [...panel.child]; + const newChild = [...panel.tabs]; newChild.splice(index, 0, child); return { ...panel, - child: newChild, + tabs: newChild, }; } diff --git a/src/layout/redistribute_panel_sizes.ts b/src/layout/redistribute_panel_sizes.ts index 1816689..64ab4b5 100644 --- a/src/layout/redistribute_panel_sizes.ts +++ b/src/layout/redistribute_panel_sizes.ts @@ -32,7 +32,7 @@ import type { Layout } from "./types.ts"; export function redistribute_panel_sizes( panel: Layout, path: number[], - delta: number, + delta: number | undefined, physics = DEFAULT_PHYSICS, ): Layout { // Clone the entire panel structure @@ -41,7 +41,7 @@ export function redistribute_panel_sizes( // Find the orientation of the insertion panel, // and scale the delta on the respective axis if aligned. let current: Layout = result; - const deltas = { horizontal: delta, vertical: delta }; + const deltas = { horizontal: delta || 0, vertical: delta || 0 }; for (let i = 0; i < path.length - 1; i++) { if (current.type === "split-panel") { deltas[current.orientation] /= current.sizes[path[i]]; @@ -51,17 +51,21 @@ export function redistribute_panel_sizes( // Apply the redistribution at the final path index if (current.type === "split-panel") { - const delta = deltas[current.orientation]; - const index = path[path.length - 1]; + if (delta === undefined) { + current.sizes = current.sizes.map((_) => 1 / current.sizes.length); + } else { + const delta = deltas[current.orientation]; + const index = path[path.length - 1]; - // It would be fun to remove this condition. - if (index < current.sizes.length - 1) { - current.sizes = add_and_redistribute( - physics, - current.sizes, - index, - delta, - ); + // It would be fun to remove this condition. + if (index < current.sizes.length - 1) { + current.sizes = add_and_redistribute( + physics, + current.sizes, + index, + delta, + ); + } } } diff --git a/src/layout/remove_child.ts b/src/layout/remove_child.ts index c8ba4a1..a88b636 100644 --- a/src/layout/remove_child.ts +++ b/src/layout/remove_child.ts @@ -26,14 +26,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.child.includes(child)) { - const newChild = panel.child.filter((c) => c !== child); + 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", - child: newChild, + tabs: newChild, }; } @@ -46,7 +46,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") { - return p.child.includes(child); + return p.tabs.includes(child); } return false; @@ -54,7 +54,7 @@ export function remove_child(panel: Layout, child: string): Layout { if (index !== -1) { const tab_layout = result.children[index] as TabLayout; - if (tab_layout.child.length === 1) { + if (tab_layout.tabs.length === 1) { // Found the child at this level - remove it const newChildren = result.children.filter((_, i) => i !== index); const newSizes = remove_and_redistribute(result.sizes, index); @@ -67,10 +67,10 @@ export function remove_child(panel: Layout, child: string): Layout { result.children = newChildren; result.sizes = newSizes; } else { - tab_layout.child.splice(tab_layout.child.indexOf(child), 1); + tab_layout.tabs.splice(tab_layout.tabs.indexOf(child), 1); if ( tab_layout.selected && - tab_layout.selected >= tab_layout.child.length + tab_layout.selected >= tab_layout.tabs.length ) { tab_layout.selected--; } diff --git a/src/layout/types.ts b/src/layout/types.ts index cfcac7e..e5398a1 100644 --- a/src/layout/types.ts +++ b/src/layout/types.ts @@ -58,7 +58,7 @@ export interface SplitLayout { */ export interface TabLayout { type: "child-panel"; - child: string[]; + tabs: string[]; selected?: number; } diff --git a/src/regular-layout-frame.ts b/src/regular-layout-frame.ts index fd79be0..37e47da 100644 --- a/src/regular-layout-frame.ts +++ b/src/regular-layout-frame.ts @@ -163,12 +163,12 @@ export class RegularLayoutFrame extends HTMLElement { if (!new_tab_panel) { new_tab_panel = { type: "child-panel", - child: [slot], + tabs: [slot], selected: 0, }; } - for (let i = 0; i < new_tab_panel.child.length; i++) { + for (let i = 0; i < new_tab_panel.tabs.length; i++) { if (i >= this._header.children.length) { const new_tab = document.createElement("regular-layout-tab"); new_tab.populate(this._layout, new_tab_panel, i); @@ -180,7 +180,7 @@ export class RegularLayoutFrame extends HTMLElement { } } - const last_index = new_tab_panel.child.length; + const last_index = new_tab_panel.tabs.length; for (let j = this._header.children.length - 1; j >= last_index; j--) { this._header.removeChild(this._header.children[j]); } diff --git a/src/regular-layout-tab.ts b/src/regular-layout-tab.ts index 4214d49..cdee74c 100644 --- a/src/regular-layout-tab.ts +++ b/src/regular-layout-tab.ts @@ -40,11 +40,11 @@ export class RegularLayoutTab extends HTMLElement { (index === this._tab_panel?.selected); const index_changed = - tab_changed || this._tab_panel?.child[index] !== tab_panel.child[index]; + tab_changed || this._tab_panel?.tabs[index] !== tab_panel.tabs[index]; if (index_changed) { const selected = tab_panel.selected === index; - const slot = tab_panel.child[index]; + const slot = tab_panel.tabs[index]; this.children[0].textContent = slot; if (selected) { @@ -56,7 +56,7 @@ export class RegularLayoutTab extends HTMLElement { } } } else { - const slot = tab_panel.child[index]; + const slot = tab_panel.tabs[index]; const selected = tab_panel.selected === index; const parts = selected ? "active-close close" : "close"; this.innerHTML = `
`; @@ -78,7 +78,7 @@ export class RegularLayoutTab extends HTMLElement { private onTabClose = (_: Event) => { if (this._tab_panel !== undefined && this._index !== undefined) { - this._layout?.removePanel(this._tab_panel.child[this._index]); + this._layout?.removePanel(this._tab_panel.tabs[this._index]); } }; @@ -90,7 +90,7 @@ export class RegularLayoutTab extends HTMLElement { ) { const new_layout = this._layout?.save(); const new_tab_panel = this._layout?.getPanel( - this._tab_panel.child[this._index], + this._tab_panel.tabs[this._index], new_layout, ); diff --git a/src/regular-layout.ts b/src/regular-layout.ts index 97f152a..db80427 100644 --- a/src/regular-layout.ts +++ b/src/regular-layout.ts @@ -124,12 +124,14 @@ export class RegularLayout extends HTMLElement { } connectedCallback() { + this.addEventListener("dblclick", this.onDblClick); this.addEventListener("pointerdown", this.onPointerDown); this.addEventListener("pointerup", this.onPointerUp); this.addEventListener("pointermove", this.onPointerMove); } disconnectedCallback() { + this.removeEventListener("dblclick", this.onDblClick); this.removeEventListener("pointerdown", this.onPointerDown); this.removeEventListener("pointerup", this.onPointerUp); this.removeEventListener("pointermove", this.onPointerMove); @@ -319,7 +321,7 @@ export class RegularLayout extends HTMLElement { */ getPanel = (name: string, layout: Layout = this._panel): TabLayout | null => { if (layout.type === "child-panel") { - if (layout.child.includes(name)) { + if (layout.tabs.includes(name)) { return layout; } @@ -462,6 +464,24 @@ export class RegularLayout extends HTMLElement { return Math.sqrt(dx ** 2 + dy ** 2); }; + private onDblClick = (event: MouseEvent) => { + const [col, row, rect] = this.relativeCoordinates(event, false); + const divider = calculate_intersection(col, row, this._panel, { + rect, + size: this._physics.GRID_DIVIDER_SIZE, + }); + + if (divider?.type === "horizontal" || divider?.type === "vertical") { + const panel = redistribute_panel_sizes( + this._panel, + divider.path, + undefined, + ); + + this.restore(panel, true); + } + }; + private onPointerDown = (event: PointerEvent) => { if (!this._physics.GRID_DIVIDER_CHECK_TARGET || event.target === this) { const [col, row, rect] = this.relativeCoordinates(event); diff --git a/tests/helpers/fixtures.ts b/tests/helpers/fixtures.ts index b565115..01d5c6c 100644 --- a/tests/helpers/fixtures.ts +++ b/tests/helpers/fixtures.ts @@ -18,19 +18,19 @@ export const LAYOUTS = { /** Single panel with AAA */ SINGLE_AAA: { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], } as Layout, /** Single panel with BBB */ SINGLE_BBB: { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], } as Layout, /** Single panel with multiple tabs */ SINGLE_TABS: { type: "child-panel", - child: ["AAA", "BBB", "CCC"], + tabs: ["AAA", "BBB", "CCC"], selected: 0, } as Layout, @@ -41,11 +41,11 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -58,11 +58,11 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.5, 0.5], @@ -75,15 +75,15 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.3, 0.3, 0.4], @@ -98,11 +98,11 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -110,7 +110,7 @@ export const LAYOUTS = { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -128,18 +128,18 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -156,11 +156,11 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -171,11 +171,11 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.5, 0.5], @@ -187,7 +187,7 @@ export const LAYOUTS = { /** Single panel with DDD */ SINGLE_DDD: { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], } as Layout, /** Two panels horizontal split (50/50) */ @@ -197,11 +197,11 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.5, 0.5], @@ -214,15 +214,15 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.2, 0.3, 0.5], @@ -235,15 +235,15 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, { type: "child-panel", - child: ["EEE"], + tabs: ["EEE"], }, ], sizes: [0.3, 0.3, 0.4], @@ -256,15 +256,15 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.123456789, 0.456789123, 0.419754088], @@ -277,15 +277,15 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.3, 0.4, 0.3], @@ -306,25 +306,25 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.4, 0.6], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.5, 0.5], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.7, 0.3], @@ -337,15 +337,15 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB", "DDD", "EEE"], + tabs: ["BBB", "DDD", "EEE"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.2, 0.3, 0.5], @@ -358,12 +358,12 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA", "BBB"], + tabs: ["AAA", "BBB"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.5, 0.5], @@ -372,20 +372,20 @@ export const LAYOUTS = { /** Single panel with tabs (AAA, BBB, CCC) with selected index */ SINGLE_TABS_WITH_SELECTED: { type: "child-panel", - child: ["AAA", "BBB", "CCC"], + tabs: ["AAA", "BBB", "CCC"], selected: 0, } as Layout, /** Single panel with one child (ONLY) */ SINGLE_ONLY: { type: "child-panel", - child: ["ONLY"], + tabs: ["ONLY"], } as Layout, /** Single panel with one child (SECOND) */ SINGLE_SECOND: { type: "child-panel", - child: ["SECOND"], + tabs: ["SECOND"], } as Layout, /** Single panel horizontal split with one child (AAA) */ @@ -396,7 +396,7 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, ], } as Layout, @@ -409,7 +409,7 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, ], } as Layout, @@ -425,7 +425,7 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -433,19 +433,19 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["EEE"], + tabs: ["EEE"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.25, 0.25, 0.25, 0.25], @@ -455,7 +455,7 @@ export const LAYOUTS = { }, { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], }, ], sizes: [0.5, 0.5], @@ -476,25 +476,25 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.5, 0.5], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.5, 0.5], }, { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], }, ], sizes: [0.5, 0.5], @@ -515,7 +515,7 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -523,11 +523,11 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.5, 0.5], @@ -537,14 +537,14 @@ export const LAYOUTS = { }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.5, 0.5], }, { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], }, ], sizes: [0.5, 0.5], @@ -565,7 +565,7 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -573,11 +573,11 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.5, 0.5], @@ -587,14 +587,14 @@ export const LAYOUTS = { }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.75, 0.25], }, { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], }, ], sizes: [0.5, 0.5], @@ -606,15 +606,15 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.3, 0.6, 0.1], @@ -630,15 +630,15 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.3, 0.6, 0.1], @@ -646,7 +646,7 @@ export const LAYOUTS = { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -659,15 +659,15 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.2, 0.3, 0.5], @@ -687,17 +687,17 @@ export const LAYOUTS = { children: [ { type: "child-panel", - child: ["A"], + tabs: ["A"], }, { type: "child-panel", - child: ["B"], + tabs: ["B"], }, ], }, { type: "child-panel", - child: ["C"], + tabs: ["C"], }, ], } as Layout, diff --git a/tests/integration/insert-panel.spec.ts b/tests/integration/insert-panel.spec.ts index c4b2842..9abe205 100644 --- a/tests/integration/insert-panel.spec.ts +++ b/tests/integration/insert-panel.spec.ts @@ -25,7 +25,7 @@ test("should insert a single panel into a single panel layout", async ({ const currentState = await saveLayout(page); expect(currentState).toStrictEqual({ type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }); @@ -33,7 +33,7 @@ test("should insert a single panel into a single panel layout", async ({ const currentState2 = await saveLayout(page); expect(currentState2).toStrictEqual({ type: "child-panel", - child: ["BBB", "AAA"], + tabs: ["BBB", "AAA"], selected: 0, }); }); @@ -50,17 +50,17 @@ test("should insert panel at specific path in split panel", async ({ children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, ], @@ -96,17 +96,17 @@ test("should insert panel into nested split panel", async ({ page }) => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], selected: 0, }, ], @@ -114,7 +114,7 @@ test("should insert panel into nested split panel", async ({ page }) => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], @@ -149,7 +149,7 @@ test("should split existing panel when inserting at deeper path", async ({ children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { @@ -158,12 +158,12 @@ test("should split existing panel when inserting at deeper path", async ({ children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], diff --git a/tests/integration/remove-panel.spec.ts b/tests/integration/remove-panel.spec.ts index 081bb6e..224dd93 100644 --- a/tests/integration/remove-panel.spec.ts +++ b/tests/integration/remove-panel.spec.ts @@ -25,7 +25,7 @@ test.describe("removePanel", () => { const currentState = await saveLayout(page); expect(currentState).toStrictEqual({ type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }); }); @@ -40,12 +40,12 @@ test.describe("removePanel", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], @@ -63,12 +63,12 @@ test.describe("removePanel", () => { children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], @@ -90,12 +90,12 @@ test.describe("removePanel", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], @@ -103,7 +103,7 @@ test.describe("removePanel", () => { }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], selected: 0, }, ], @@ -135,17 +135,17 @@ test.describe("tabs", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["DDD", "EEE"], + tabs: ["DDD", "EEE"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], diff --git a/tests/integration/save-restore.spec.ts b/tests/integration/save-restore.spec.ts index 149972e..ebdaa2b 100644 --- a/tests/integration/save-restore.spec.ts +++ b/tests/integration/save-restore.spec.ts @@ -25,7 +25,7 @@ test("should save and restore various layout types", async ({ page }) => { const currentState = await saveLayout(page); expect(currentState).toStrictEqual({ type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }); @@ -38,12 +38,12 @@ test("should save and restore various layout types", async ({ page }) => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, ], @@ -63,12 +63,12 @@ test("should save and restore various layout types", async ({ page }) => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, ], @@ -76,7 +76,7 @@ test("should save and restore various layout types", async ({ page }) => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], @@ -114,12 +114,12 @@ test("should save returns a deep clone, not a reference", async ({ page }) => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, ], @@ -136,17 +136,17 @@ test("should save and restore preserve exact size ratios", async ({ page }) => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], @@ -187,18 +187,18 @@ test("should flatten nested split panels with same orientation", async ({ children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -214,17 +214,17 @@ test("should flatten nested split panels with same orientation", async ({ children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], @@ -238,7 +238,7 @@ test("should flatten nested split panels with same orientation", async ({ children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -246,11 +246,11 @@ test("should flatten nested split panels with same orientation", async ({ children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.5, 0.5], @@ -269,17 +269,17 @@ test("should flatten nested split panels with same orientation", async ({ children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], @@ -301,7 +301,7 @@ test("should flatten nested split panels with same orientation, not at the root" children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -309,11 +309,11 @@ test("should flatten nested split panels with same orientation, not at the root" children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.3, 0.7], @@ -323,7 +323,7 @@ test("should flatten nested split panels with same orientation, not at the root" }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -343,17 +343,17 @@ test("should flatten nested split panels with same orientation, not at the root" children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], selected: 0, }, ], @@ -361,7 +361,7 @@ test("should flatten nested split panels with same orientation, not at the root" }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], diff --git a/tests/integration/tabs.spec.ts b/tests/integration/tabs.spec.ts index 89ed102..967ddcb 100644 --- a/tests/integration/tabs.spec.ts +++ b/tests/integration/tabs.spec.ts @@ -62,7 +62,7 @@ test("should switch between tabs by clicking", async ({ page }) => { expect(layoutState).toMatchObject({ type: "child-panel", - child: ["AAA", "BBB", "CCC"], + tabs: ["AAA", "BBB", "CCC"], selected: 1, }); }); @@ -113,16 +113,16 @@ test("should move a panel by dragging a selected tab", async ({ page }) => { children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, ], }); @@ -147,12 +147,12 @@ test("should move a panel by dragging a deselected tab", async ({ page }) => { children: [ { type: "child-panel", - child: ["AAA", "BBB"], + tabs: ["AAA", "BBB"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], }); @@ -197,16 +197,16 @@ test("should move a panel by dragging a deselected tab", async ({ page }) => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], }); diff --git a/tests/unit/composite.spec.ts b/tests/unit/composite.spec.ts index ab2f57e..4fec516 100644 --- a/tests/unit/composite.spec.ts +++ b/tests/unit/composite.spec.ts @@ -30,7 +30,7 @@ test("cursor near left edge of same orientation", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -39,11 +39,11 @@ test("cursor near left edge of same orientation", () => { children: [ { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], }, @@ -53,7 +53,7 @@ test("cursor near left edge of same orientation", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -71,7 +71,7 @@ test("cursor near top edge of opposite orientation", () => { children: [ { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, { type: "split-panel", @@ -81,11 +81,11 @@ test("cursor near top edge of opposite orientation", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -93,7 +93,7 @@ test("cursor near top edge of opposite orientation", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -125,11 +125,11 @@ test("cursor near bottom edge but with opposite orientation", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -137,7 +137,7 @@ test("cursor near bottom edge but with opposite orientation", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -145,7 +145,7 @@ test("cursor near bottom edge but with opposite orientation", () => { }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], }); @@ -166,7 +166,7 @@ test("arbitrary regression also", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { @@ -175,12 +175,12 @@ test("arbitrary regression also", () => { children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], @@ -191,7 +191,7 @@ test("arbitrary regression also", () => { }, { type: "child-panel", - child: ["EEE"], + tabs: ["EEE"], selected: 0, }, ], @@ -199,7 +199,7 @@ test("arbitrary regression also", () => { }, { type: "child-panel", - child: ["FFF", "GGG", "HHH"], + tabs: ["FFF", "GGG", "HHH"], selected: 0, }, ], @@ -226,7 +226,7 @@ test("arbitrary regression also", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { @@ -235,12 +235,12 @@ test("arbitrary regression also", () => { children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, ], @@ -251,7 +251,7 @@ test("arbitrary regression also", () => { }, { type: "child-panel", - child: ["EEE"], + tabs: ["EEE"], selected: 0, }, ], @@ -259,7 +259,7 @@ test("arbitrary regression also", () => { }, { type: "child-panel", - child: ["FFF", "GGG", "HHH"], + tabs: ["FFF", "GGG", "HHH"], selected: 0, }, ], @@ -267,7 +267,7 @@ test("arbitrary regression also", () => { }, { type: "child-panel", - child: ["QQQ"], + tabs: ["QQQ"], // selected: 0, }, ], diff --git a/tests/unit/css_grid_layout.spec.ts b/tests/unit/css_grid_layout.spec.ts index 31e87f7..6bf64d1 100644 --- a/tests/unit/css_grid_layout.spec.ts +++ b/tests/unit/css_grid_layout.spec.ts @@ -34,7 +34,7 @@ test("simple test", async () => { test("single child panel", () => { const singleChild: Layout = { type: "child-panel", - child: ["ONLY"], + tabs: ["ONLY"], }; expect( @@ -56,11 +56,11 @@ test("regressions", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.8, 0.2], @@ -68,7 +68,7 @@ test("regressions", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -103,22 +103,22 @@ test("deeply nested css grid", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["EEE"], + tabs: ["EEE"], }, ], sizes: [0.5, 0.5], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.3, 0.6, 0.1], @@ -126,7 +126,7 @@ test("deeply nested css grid", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -163,22 +163,22 @@ test("Deeply nested CSS grid part 2", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["EEE"], + tabs: ["EEE"], }, ], sizes: [0.5, 0.5], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.3, 0.6, 0.1], @@ -190,11 +190,11 @@ test("Deeply nested CSS grid part 2", () => { children: [ { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], }, ], sizes: [0.5, 0.5], @@ -231,11 +231,11 @@ test("parallel", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -243,11 +243,11 @@ test("parallel", () => { }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.3333333333333333, 0.3333333333333333, 0.3333333333333333], @@ -279,11 +279,11 @@ test("Parallel split-panels with different sizes", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -294,11 +294,11 @@ test("Parallel split-panels with different sizes", () => { children: [ { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.7, 0.3], @@ -338,7 +338,7 @@ test("Deeply alternating split", () => { children: [ { type: "child-panel", - child: ["VfssXzLK"], + tabs: ["VfssXzLK"], }, { type: "split-panel", @@ -346,11 +346,11 @@ test("Deeply alternating split", () => { children: [ { type: "child-panel", - child: ["qsAwxKvs"], + tabs: ["qsAwxKvs"], }, { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, ], sizes: [0.5, 0.5], @@ -360,7 +360,7 @@ test("Deeply alternating split", () => { }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -368,7 +368,7 @@ test("Deeply alternating split", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], diff --git a/tests/unit/css_grid_layout_partial.spec.ts b/tests/unit/css_grid_layout_partial.spec.ts index 42fd979..3102245 100644 --- a/tests/unit/css_grid_layout_partial.spec.ts +++ b/tests/unit/css_grid_layout_partial.spec.ts @@ -28,7 +28,7 @@ test("Deeply alternating split with grid-based overlay", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -36,11 +36,11 @@ test("Deeply alternating split with grid-based overlay", () => { children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.5, 0.5], @@ -50,7 +50,7 @@ test("Deeply alternating split with grid-based overlay", () => { }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.3, 0.7], @@ -58,7 +58,7 @@ test("Deeply alternating split with grid-based overlay", () => { }, { type: "child-panel", - child: ["EEE"], + tabs: ["EEE"], }, ], sizes: [0.6, 0.4], diff --git a/tests/unit/flatten.spec.ts b/tests/unit/flatten.spec.ts index a5e5d35..d64fee4 100644 --- a/tests/unit/flatten.spec.ts +++ b/tests/unit/flatten.spec.ts @@ -24,7 +24,7 @@ test("Deeply alternating split partial", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -32,11 +32,11 @@ test("Deeply alternating split partial", () => { children: [ { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.5, 0.5], @@ -50,15 +50,15 @@ test("Deeply alternating split partial", () => { children: [ { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["EEE"], + tabs: ["EEE"], }, ], sizes: [0.3, 0.3, 0.4], @@ -73,7 +73,7 @@ test("Deeply alternating split partial", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], selected: 0, }, { @@ -82,12 +82,12 @@ test("Deeply alternating split partial", () => { children: [ { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], selected: 0, }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], selected: 0, }, ], @@ -95,17 +95,17 @@ test("Deeply alternating split partial", () => { }, { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], selected: 0, }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], selected: 0, }, { type: "child-panel", - child: ["EEE"], + tabs: ["EEE"], selected: 0, }, ], @@ -124,11 +124,11 @@ test("Nested split panels with a single child", () => { children: [ { type: "child-panel", - child: ["AAA", "BBB", "CCC"], + tabs: ["AAA", "BBB", "CCC"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.5, 0.5], @@ -143,12 +143,12 @@ test("Nested split panels with a single child", () => { children: [ { type: "child-panel", - child: ["AAA", "BBB", "CCC"], + tabs: ["AAA", "BBB", "CCC"], selected: 0, }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], selected: 0, }, ], diff --git a/tests/unit/hit_detection.spec.ts b/tests/unit/hit_detection.spec.ts index ba1f487..87d67af 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", child: ["AAA"] }, + layout: { type: "child-panel", 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", child: ["BBB"] }, + layout: { type: "child-panel", 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", child: ["CCC"] }, + layout: { type: "child-panel", 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", child: ["AAA"] }, + layout: { type: "child-panel", 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 73b9dc7..0c7d52a 100644 --- a/tests/unit/insert_child.spec.ts +++ b/tests/unit/insert_child.spec.ts @@ -28,11 +28,11 @@ test("insert into root split panel", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -40,11 +40,11 @@ test("insert into root split panel", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.39999999999999997, 0.26666666666666666, 0.3333333333333333], @@ -68,7 +68,7 @@ test("insert into root split panel edge", () => { children: [ { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, { type: "split-panel", @@ -78,11 +78,11 @@ test("insert into root split panel edge", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -90,7 +90,7 @@ test("insert into root split panel edge", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -107,18 +107,18 @@ test("insert into root split panel edge along the same orientation", () => { children: [ { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, { type: "split-panel", children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -126,7 +126,7 @@ test("insert into root split panel edge along the same orientation", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.3333333333333333, 0.39999999999999997, 0.26666666666666666], @@ -144,11 +144,11 @@ test("stack split panel", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["DDD", "BBB"], + tabs: ["DDD", "BBB"], }, ], sizes: [0.3, 0.7], @@ -156,7 +156,7 @@ test("stack split panel", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -168,7 +168,7 @@ test("stack split panel single child after", () => { const result = insert_child(LAYOUTS.SINGLE_AAA, "DDD", [1]); expect(result).toStrictEqual({ type: "child-panel", - child: ["AAA", "DDD"], + tabs: ["AAA", "DDD"], }); }); @@ -176,7 +176,7 @@ test("stack split panel single child before", () => { const result = insert_child(LAYOUTS.SINGLE_AAA, "DDD", [0]); expect(result).toStrictEqual({ type: "child-panel", - child: ["DDD", "AAA"], + tabs: ["DDD", "AAA"], }); }); @@ -188,11 +188,11 @@ test("stack split panel two horizontal before", () => { children: [ { type: "child-panel", - child: ["DDD", "AAA"], + tabs: ["DDD", "AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -207,11 +207,11 @@ test("stack split panel two horizontal after", () => { children: [ { type: "child-panel", - child: ["AAA", "DDD"], + tabs: ["AAA", "DDD"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -226,11 +226,11 @@ test("stack nested basic after", () => { children: [ { type: "child-panel", - child: ["AAA", "DDD"], + tabs: ["AAA", "DDD"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -253,11 +253,11 @@ test("stack nested basic after 5", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -265,7 +265,7 @@ test("stack nested basic after 5", () => { }, { type: "child-panel", - child: ["DDD", "CCC"], + tabs: ["DDD", "CCC"], }, ], sizes: [0.6, 0.4], @@ -281,15 +281,15 @@ test("stack nested basic after 4", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3333333333333333, 0.3333333333333333, 0.3333333333333333], @@ -306,11 +306,11 @@ test("append top level split-panel", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -318,11 +318,11 @@ test("append top level split-panel", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.39999999999999997, 0.26666666666666666, 0.3333333333333333], @@ -340,11 +340,11 @@ test("insert into top level split-panel", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -352,11 +352,11 @@ test("insert into top level split-panel", () => { }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.39999999999999997, 0.3333333333333333, 0.26666666666666666], @@ -374,11 +374,11 @@ test("insert into top level split-panel 2", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -386,7 +386,7 @@ test("insert into top level split-panel 2", () => { }, { type: "child-panel", - child: ["DDD", "CCC"], + tabs: ["DDD", "CCC"], }, ], sizes: [0.6, 0.4], @@ -405,18 +405,18 @@ test("insert at path splitting a child panel", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], }, { type: "child-panel", - child: ["CCC", "DDD"], + tabs: ["CCC", "DDD"], }, ], sizes: [0.6, 0.4], @@ -434,15 +434,15 @@ test("insert into nested split panel", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.19999999999999998, 0.4666666666666666, 0.3333333333333333], @@ -450,7 +450,7 @@ test("insert into nested split panel", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -468,11 +468,11 @@ test("split a nested child panel", () => { children: [ { type: "child-panel", - child: ["AAA", "DDD"], + tabs: ["AAA", "DDD"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -480,7 +480,7 @@ test("split a nested child panel", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -492,7 +492,7 @@ test("insert into single child panel", () => { const result = insert_child(LAYOUTS.SINGLE_ONLY, "SECOND", []); expect(result).toStrictEqual({ type: "child-panel", - child: ["SECOND", "ONLY"], + tabs: ["SECOND", "ONLY"], }); }); @@ -507,7 +507,7 @@ test("insert into single child panel, on the top edge", () => { expect(result).toStrictEqual({ type: "child-panel", - child: ["SECOND", "ONLY"], + tabs: ["SECOND", "ONLY"], }); }); @@ -527,11 +527,11 @@ test("insert into single child panel, on the top edge with split", () => { children: [ { type: "child-panel", - child: ["SECOND"], + tabs: ["SECOND"], }, { type: "child-panel", - child: ["ONLY"], + tabs: ["ONLY"], }, ], }); @@ -548,7 +548,7 @@ test("insert into single child panel, on the left edge", () => { expect(result).toStrictEqual({ type: "child-panel", - child: ["ONLY", "SECOND"], + tabs: ["ONLY", "SECOND"], }); }); @@ -566,11 +566,11 @@ test("insert into single child panel, on the bottom edge", () => { children: [ { type: "child-panel", - child: ["ONLY"], + tabs: ["ONLY"], }, { type: "child-panel", - child: ["SECOND"], + tabs: ["SECOND"], }, ], sizes: [0.5, 0.5], @@ -591,11 +591,11 @@ test("insert into single child panel, on the right edge", () => { children: [ { type: "child-panel", - child: ["ONLY"], + tabs: ["ONLY"], }, { type: "child-panel", - child: ["SECOND"], + tabs: ["SECOND"], }, ], sizes: [0.5, 0.5], @@ -606,7 +606,7 @@ test("insert into a child-panel root, on the top edge", () => { const result = insert_child(LAYOUTS.SINGLE_AAA, "BBB", [0]); expect(result).toStrictEqual({ type: "child-panel", - child: ["BBB", "AAA"], + tabs: ["BBB", "AAA"], }); }); @@ -618,11 +618,11 @@ test("insert into a child-panel root, on the top edge with split", () => { children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, ], sizes: [0.5, 0.5], @@ -633,7 +633,7 @@ test("insert into SINGLE_TABS", () => { const result = insert_child(LAYOUTS.SINGLE_TABS, "DDD", [1]); expect(result).toStrictEqual({ type: "child-panel", - child: ["AAA", "DDD", "BBB", "CCC"], + tabs: ["AAA", "DDD", "BBB", "CCC"], selected: 0, }); }); @@ -654,12 +654,12 @@ test("insert with split path into SINGLE_TABS", () => { children: [ { type: "child-panel", - child: ["AAA", "BBB", "CCC"], + tabs: ["AAA", "BBB", "CCC"], selected: 0, }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], // selected: 0, }, ], diff --git a/tests/unit/redistribute_panel_sizes.spec.ts b/tests/unit/redistribute_panel_sizes.spec.ts index 19f9ac5..725f259 100644 --- a/tests/unit/redistribute_panel_sizes.spec.ts +++ b/tests/unit/redistribute_panel_sizes.spec.ts @@ -28,11 +28,11 @@ test("redistribute depth 1 child", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -40,7 +40,7 @@ test("redistribute depth 1 child", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.5, 0.5], @@ -58,11 +58,11 @@ test("redistribute depth 2 children", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.19999999999999998, 0.7999999999999999], @@ -70,7 +70,7 @@ test("redistribute depth 2 children", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -92,15 +92,15 @@ test("redistribute with 3 children", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.19999999999999998, 0.6857142857142857, 0.1142857142857143], @@ -108,7 +108,7 @@ test("redistribute with 3 children", () => { }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -132,7 +132,7 @@ test("redistribute nested spec with 4 children", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -140,19 +140,19 @@ test("redistribute nested spec with 4 children", () => { children: [ { type: "child-panel", - child: ["EEE"], + tabs: ["EEE"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.2, 0.2, 0.3, 0.3], @@ -162,7 +162,7 @@ test("redistribute nested spec with 4 children", () => { }, { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], }, ], sizes: [0.5, 0.5], @@ -189,25 +189,25 @@ test("nested aligned splitpanels", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.5, 0.5], }, { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], }, ], sizes: [0.5, 0.5], @@ -234,7 +234,7 @@ test("nested aligned splitpanels, reversed orientation", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -242,11 +242,11 @@ test("nested aligned splitpanels, reversed orientation", () => { children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.3, 0.7], @@ -256,14 +256,14 @@ test("nested aligned splitpanels, reversed orientation", () => { }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.5, 0.5], }, { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], }, ], sizes: [0.5, 0.5], @@ -290,7 +290,7 @@ test("nested aligned splitpanels, reversed orientation with asymmetric sizes", ( children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "split-panel", @@ -298,11 +298,11 @@ test("nested aligned splitpanels, reversed orientation with asymmetric sizes", ( children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.3666666666666667, 0.6333333333333333], @@ -312,14 +312,14 @@ test("nested aligned splitpanels, reversed orientation with asymmetric sizes", ( }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.75, 0.25], }, { type: "child-panel", - child: ["FFF"], + tabs: ["FFF"], }, ], sizes: [0.5, 0.5], diff --git a/tests/unit/remove_child.spec.ts b/tests/unit/remove_child.spec.ts index 45edb67..765c20c 100644 --- a/tests/unit/remove_child.spec.ts +++ b/tests/unit/remove_child.spec.ts @@ -20,11 +20,11 @@ test("remove child from nested split panel", () => { children: [ { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.6, 0.4], @@ -39,11 +39,11 @@ test("remove child from top-level split panel", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["BBB"], + tabs: ["BBB"], }, ], sizes: [0.3, 0.7], @@ -55,14 +55,14 @@ test("remove child from top-level tab panel", () => { const result = remove_child( { type: "child-panel", - child: ["AAA", "CCC"], + tabs: ["AAA", "CCC"], }, "AAA", ); expect(result).toStrictEqual({ type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }); }); @@ -73,11 +73,11 @@ test("remove child from split panel with 3 children", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.28571428571428575, 0.7142857142857143], @@ -95,11 +95,11 @@ test("remove deeply nested child", () => { children: [ { type: "child-panel", - child: ["AAA"], + tabs: ["AAA"], }, { type: "child-panel", - child: ["CCC"], + tabs: ["CCC"], }, ], sizes: [0.5, 0.5], @@ -107,7 +107,7 @@ test("remove deeply nested child", () => { }, { type: "child-panel", - child: ["DDD"], + tabs: ["DDD"], }, ], sizes: [0.7, 0.3],