Add M2 splits-tree layout
- src/lib/layout/tree.ts: pure helpers + types (newLeaf, splitLeaf, closeLeaf, replaceById, serialize/deserialize with shape-checking). - SplitNode.svelte: flex container with pointer-captured gutter drag. - LeafPane.svelte: per-pane toolbar (split-right ⇥, split-down ⇣, close ×) over the existing XtermPane. - Pane.svelte: recursive dispatcher between SplitNode and LeafPane, keyed on leaf.id so swaps unmount XtermPane cleanly (kills PTY). - App.svelte: tree-as-state with split/close handlers, auto-save to localStorage on every \$effect tick. Titlebar shows clickable distro buttons setting the default for new panes; existing panes keep theirs. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
9beab64e00
commit
efcdf6a9ce
7 changed files with 531 additions and 59 deletions
137
src/App.svelte
137
src/App.svelte
|
|
@ -1,35 +1,87 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import XtermPane from "./components/XtermPane.svelte";
|
||||
import { listDistros } from "./ipc";
|
||||
import Pane from "./lib/layout/Pane.svelte";
|
||||
import {
|
||||
type TreeNode,
|
||||
type NodeId,
|
||||
type Orientation,
|
||||
newLeaf,
|
||||
splitLeaf,
|
||||
closeLeaf,
|
||||
leafCount,
|
||||
serialize,
|
||||
deserialize,
|
||||
} from "./lib/layout/tree";
|
||||
|
||||
const STORAGE_KEY = "tiletopia.tree.v1";
|
||||
|
||||
let distros = $state<string[]>([]);
|
||||
let selected = $state<string | undefined>(undefined);
|
||||
let status = $state("starting…");
|
||||
let statusOk = $state(true);
|
||||
let loadError = $state<string | null>(null);
|
||||
let defaultDistro = $state<string | undefined>(undefined);
|
||||
let ready = $state(false);
|
||||
let tree = $state<TreeNode>(newLeaf());
|
||||
|
||||
function isInteractiveDistro(name: string): boolean {
|
||||
return !name.toLowerCase().startsWith("docker-desktop");
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// Restore saved layout, if any.
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
if (saved) {
|
||||
const t = deserialize(saved);
|
||||
if (t) tree = t;
|
||||
}
|
||||
|
||||
// Resolve default distro.
|
||||
try {
|
||||
const d = await listDistros();
|
||||
console.log("listDistros() returned:", d);
|
||||
distros = d;
|
||||
// Pick fresh every mount (HMR can preserve $state across reloads).
|
||||
selected = d.find(isInteractiveDistro) ?? d[0] ?? undefined;
|
||||
console.log("default selected:", selected);
|
||||
distros = await listDistros();
|
||||
defaultDistro = distros.find(isInteractiveDistro) ?? distros[0];
|
||||
} catch (e) {
|
||||
console.warn("list_distros failed:", e);
|
||||
loadError = String(e);
|
||||
}
|
||||
|
||||
// If any leaf in the (possibly-restored) tree has no distro, fill in the default.
|
||||
// Handles first launch and trees saved before defaults were set.
|
||||
if (defaultDistro) backfillDistro(tree, defaultDistro);
|
||||
|
||||
ready = true;
|
||||
});
|
||||
|
||||
function backfillDistro(node: TreeNode, fallback: string) {
|
||||
if (node.kind === "leaf") {
|
||||
if (!node.distro) node.distro = fallback;
|
||||
} else {
|
||||
backfillDistro(node.a, fallback);
|
||||
backfillDistro(node.b, fallback);
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-save on every change. $effect re-runs whenever the proxied tree
|
||||
// mutates anywhere (deep reactivity).
|
||||
$effect(() => {
|
||||
if (!ready) return;
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, serialize(tree));
|
||||
} catch (e) {
|
||||
console.warn("localStorage save failed:", e);
|
||||
}
|
||||
});
|
||||
|
||||
function pick(d: string) {
|
||||
console.log("user picked distro:", d);
|
||||
selected = d;
|
||||
function handleSplit(leafId: NodeId, orientation: Orientation) {
|
||||
tree = splitLeaf(tree, leafId, orientation, { distro: defaultDistro });
|
||||
}
|
||||
|
||||
function handleClose(leafId: NodeId) {
|
||||
const next = closeLeaf(tree, leafId);
|
||||
tree = next ?? newLeaf({ distro: defaultDistro });
|
||||
}
|
||||
|
||||
function resetLayout() {
|
||||
if (!confirm("Replace current layout with a single pane? This kills all open shells.")) {
|
||||
return;
|
||||
}
|
||||
tree = newLeaf({ distro: defaultDistro });
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -41,34 +93,29 @@
|
|||
{#if distros.length === 0}
|
||||
<span class="muted">no distros enumerated</span>
|
||||
{:else}
|
||||
<span class="muted">default:</span>
|
||||
{#each distros as d}
|
||||
<button
|
||||
class="distro-btn"
|
||||
class:active={d === selected}
|
||||
onclick={() => pick(d)}
|
||||
>
|
||||
{d}
|
||||
</button>
|
||||
class:active={d === defaultDistro}
|
||||
onclick={() => (defaultDistro = d)}
|
||||
title="Set default distro for new panes"
|
||||
>{d}</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span class="status {statusOk ? 'ok' : 'err'}">{status}</span>
|
||||
<span class="layout-info">
|
||||
{leafCount(tree)} pane{leafCount(tree) === 1 ? "" : "s"}
|
||||
</span>
|
||||
<button class="reset-btn" onclick={resetLayout} title="Reset to a single pane">
|
||||
Reset
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="pane-wrap">
|
||||
{#if loadError}
|
||||
<pre class="err-pre">listDistros failed: {loadError}</pre>
|
||||
{:else if selected !== undefined || distros.length === 0}
|
||||
{#key selected}
|
||||
<XtermPane
|
||||
distro={selected}
|
||||
onStatus={(msg, ok) => {
|
||||
status = msg;
|
||||
statusOk = ok;
|
||||
}}
|
||||
/>
|
||||
{/key}
|
||||
{#if ready}
|
||||
<Pane node={tree} onSplit={handleSplit} onClose={handleClose} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -103,10 +150,24 @@
|
|||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
.err-pre {
|
||||
color: #d66;
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
.layout-info {
|
||||
margin-left: auto;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
color: #777;
|
||||
font-size: 11px;
|
||||
}
|
||||
.reset-btn {
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
background: #2a2a2a;
|
||||
color: #aaa;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 3px;
|
||||
padding: 2px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.reset-btn:hover {
|
||||
background: #3a3a3a;
|
||||
color: #ddd;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
125
src/lib/layout/LeafPane.svelte
Normal file
125
src/lib/layout/LeafPane.svelte
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<script lang="ts">
|
||||
import type { LeafNode, NodeId, Orientation } from "./tree";
|
||||
import XtermPane from "../../components/XtermPane.svelte";
|
||||
|
||||
let {
|
||||
leaf,
|
||||
onSplit,
|
||||
onClose,
|
||||
}: {
|
||||
leaf: LeafNode;
|
||||
onSplit: (leafId: NodeId, orientation: Orientation) => void;
|
||||
onClose: (leafId: NodeId) => void;
|
||||
} = $props();
|
||||
|
||||
let status = $state("starting…");
|
||||
let statusOk = $state(true);
|
||||
</script>
|
||||
|
||||
<div class="leaf">
|
||||
<div class="pane-toolbar">
|
||||
<span class="pane-label">
|
||||
{leaf.label ?? leaf.distro ?? "(default)"}
|
||||
</span>
|
||||
<span class="pane-status {statusOk ? 'ok' : 'err'}">{status}</span>
|
||||
<span class="pane-actions">
|
||||
<button
|
||||
class="pane-btn"
|
||||
title="Split right"
|
||||
onclick={() => onSplit(leaf.id, "h")}
|
||||
aria-label="Split right"
|
||||
>⇥</button>
|
||||
<button
|
||||
class="pane-btn"
|
||||
title="Split down"
|
||||
onclick={() => onSplit(leaf.id, "v")}
|
||||
aria-label="Split down"
|
||||
>⇣</button>
|
||||
<button
|
||||
class="pane-btn close"
|
||||
title="Close pane"
|
||||
onclick={() => onClose(leaf.id)}
|
||||
aria-label="Close pane"
|
||||
>×</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="xterm-wrap">
|
||||
<XtermPane
|
||||
distro={leaf.distro}
|
||||
cwd={leaf.cwd}
|
||||
onStatus={(msg, ok) => {
|
||||
status = msg;
|
||||
statusOk = ok;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.leaf {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.pane-toolbar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 2px 8px;
|
||||
background: #181818;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
user-select: none;
|
||||
min-height: 22px;
|
||||
}
|
||||
.pane-label {
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-weight: 600;
|
||||
color: #ccc;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.pane-status {
|
||||
margin-left: auto;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
color: #777;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pane-status.ok { color: #6c6; }
|
||||
.pane-status.err { color: #d66; }
|
||||
.pane-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
.pane-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pane-btn:hover {
|
||||
background: #2a2a2a;
|
||||
color: #ddd;
|
||||
}
|
||||
.pane-btn.close:hover {
|
||||
background: #5a1a1a;
|
||||
color: #fcc;
|
||||
}
|
||||
.xterm-wrap {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
23
src/lib/layout/Pane.svelte
Normal file
23
src/lib/layout/Pane.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script lang="ts">
|
||||
import type { TreeNode, NodeId, Orientation } from "./tree";
|
||||
import SplitNode from "./SplitNode.svelte";
|
||||
import LeafPane from "./LeafPane.svelte";
|
||||
|
||||
let {
|
||||
node,
|
||||
onSplit,
|
||||
onClose,
|
||||
}: {
|
||||
node: TreeNode;
|
||||
onSplit: (leafId: NodeId, orientation: Orientation) => void;
|
||||
onClose: (leafId: NodeId) => void;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if node.kind === "split"}
|
||||
<SplitNode {node} {onSplit} {onClose} />
|
||||
{:else}
|
||||
{#key node.id}
|
||||
<LeafPane leaf={node} {onSplit} {onClose} />
|
||||
{/key}
|
||||
{/if}
|
||||
106
src/lib/layout/SplitNode.svelte
Normal file
106
src/lib/layout/SplitNode.svelte
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<script lang="ts">
|
||||
import type { SplitNode, NodeId, Orientation } from "./tree";
|
||||
import Pane from "./Pane.svelte";
|
||||
|
||||
let {
|
||||
node,
|
||||
onSplit,
|
||||
onClose,
|
||||
}: {
|
||||
node: SplitNode;
|
||||
onSplit: (leafId: NodeId, orientation: Orientation) => void;
|
||||
onClose: (leafId: NodeId) => void;
|
||||
} = $props();
|
||||
|
||||
let containerEl: HTMLDivElement;
|
||||
let dragging = $state(false);
|
||||
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
(e.target as HTMLElement).setPointerCapture(e.pointerId);
|
||||
dragging = true;
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function onPointerMove(e: PointerEvent) {
|
||||
if (!dragging || !containerEl) return;
|
||||
const rect = containerEl.getBoundingClientRect();
|
||||
const isH = node.orientation === "h";
|
||||
const pos = isH ? e.clientX - rect.left : e.clientY - rect.top;
|
||||
const size = isH ? rect.width : rect.height;
|
||||
if (size <= 0) return;
|
||||
// Account for the gutter being centered on the cursor.
|
||||
const r = Math.max(0.05, Math.min(0.95, pos / size));
|
||||
node.ratio = r;
|
||||
}
|
||||
|
||||
function onPointerUp(e: PointerEvent) {
|
||||
if (!dragging) return;
|
||||
(e.target as HTMLElement).releasePointerCapture(e.pointerId);
|
||||
dragging = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="split"
|
||||
class:horizontal={node.orientation === "h"}
|
||||
class:vertical={node.orientation === "v"}
|
||||
bind:this={containerEl}
|
||||
>
|
||||
<div class="side" style="flex: {node.ratio}">
|
||||
<Pane node={node.a} {onSplit} {onClose} />
|
||||
</div>
|
||||
<div
|
||||
class="gutter"
|
||||
class:active={dragging}
|
||||
role="separator"
|
||||
aria-orientation={node.orientation === "h" ? "vertical" : "horizontal"}
|
||||
aria-valuenow={Math.round(node.ratio * 100)}
|
||||
tabindex="-1"
|
||||
onpointerdown={onPointerDown}
|
||||
onpointermove={onPointerMove}
|
||||
onpointerup={onPointerUp}
|
||||
onpointercancel={onPointerUp}
|
||||
></div>
|
||||
<div class="side" style="flex: {1 - node.ratio}">
|
||||
<Pane node={node.b} {onSplit} {onClose} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.split {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.split.horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
.split.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.side {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
flex: 0 0 4px;
|
||||
background: #1a1a1a;
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.split.vertical > .gutter {
|
||||
cursor: row-resize;
|
||||
}
|
||||
.gutter:hover,
|
||||
.gutter.active {
|
||||
background: #3a5a8c;
|
||||
}
|
||||
</style>
|
||||
146
src/lib/layout/tree.ts
Normal file
146
src/lib/layout/tree.ts
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
//! Splits-tree layout model.
|
||||
//!
|
||||
//! The workspace is a binary tree of splits. Internal nodes are HSplit or
|
||||
//! VSplit with a ratio; leaves are terminal panes. This is the same model
|
||||
//! tmux / i3 / Zellij use — dragging a gutter mutates one parent ratio,
|
||||
//! both sibling subtrees reflow automatically.
|
||||
|
||||
export type NodeId = string;
|
||||
|
||||
/** 'h' = side-by-side (a on left, b on right). 'v' = stacked (a on top, b below). */
|
||||
export type Orientation = "h" | "v";
|
||||
|
||||
export interface LeafNode {
|
||||
kind: "leaf";
|
||||
id: NodeId;
|
||||
/** WSL distro the pane was spawned against. */
|
||||
distro?: string;
|
||||
/** Working directory the pane was started in. Not currently used at spawn time but preserved for future. */
|
||||
cwd?: string;
|
||||
/** Optional user label shown in the pane toolbar. */
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export interface SplitNode {
|
||||
kind: "split";
|
||||
id: NodeId;
|
||||
orientation: Orientation;
|
||||
/** Size of `a` divided by total. Kept in (0, 1) — clamped on drag. */
|
||||
ratio: number;
|
||||
a: TreeNode;
|
||||
b: TreeNode;
|
||||
}
|
||||
|
||||
export type TreeNode = LeafNode | SplitNode;
|
||||
|
||||
function newId(): NodeId {
|
||||
return (
|
||||
globalThis.crypto?.randomUUID?.() ??
|
||||
Math.random().toString(36).slice(2, 12)
|
||||
);
|
||||
}
|
||||
|
||||
export function newLeaf(props: Partial<Omit<LeafNode, "kind" | "id">> = {}): LeafNode {
|
||||
return { kind: "leaf", id: newId(), ...props };
|
||||
}
|
||||
|
||||
export function newSplit(
|
||||
orientation: Orientation,
|
||||
a: TreeNode,
|
||||
b: TreeNode,
|
||||
ratio = 0.5,
|
||||
): SplitNode {
|
||||
return { kind: "split", id: newId(), orientation, ratio, a, b };
|
||||
}
|
||||
|
||||
/** Walk the tree, replacing the node with the given id via `produce`. Returns a new tree. */
|
||||
export function replaceById(
|
||||
root: TreeNode,
|
||||
targetId: NodeId,
|
||||
produce: (node: TreeNode) => TreeNode,
|
||||
): TreeNode {
|
||||
if (root.id === targetId) return produce(root);
|
||||
if (root.kind === "leaf") return root;
|
||||
const a = replaceById(root.a, targetId, produce);
|
||||
const b = replaceById(root.b, targetId, produce);
|
||||
if (a === root.a && b === root.b) return root;
|
||||
return { ...root, a, b };
|
||||
}
|
||||
|
||||
/** Split the leaf with the given id. New pane goes on side `b`. */
|
||||
export function splitLeaf(
|
||||
root: TreeNode,
|
||||
leafId: NodeId,
|
||||
orientation: Orientation,
|
||||
newLeafProps: Partial<Omit<LeafNode, "kind" | "id">> = {},
|
||||
): TreeNode {
|
||||
return replaceById(root, leafId, (node) => {
|
||||
if (node.kind !== "leaf") return node;
|
||||
return newSplit(orientation, node, newLeaf(newLeafProps));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the leaf with the given id. The other child of its parent split
|
||||
* takes the parent's place in the tree. Returns null if the closed leaf
|
||||
* was the entire tree (caller should create a fresh leaf).
|
||||
*/
|
||||
export function closeLeaf(root: TreeNode, leafId: NodeId): TreeNode | null {
|
||||
if (root.id === leafId) return null;
|
||||
if (root.kind === "leaf") return root;
|
||||
// If a direct child is the target leaf, collapse this split to the sibling.
|
||||
if (root.a.kind === "leaf" && root.a.id === leafId) return root.b;
|
||||
if (root.b.kind === "leaf" && root.b.id === leafId) return root.a;
|
||||
// Recurse.
|
||||
const newA = closeLeaf(root.a, leafId);
|
||||
const newB = closeLeaf(root.b, leafId);
|
||||
// If either side collapsed to null somehow (target was a split, shouldn't
|
||||
// happen with current callers but defensive), fall back to the other side.
|
||||
if (newA === null) return newB ?? root;
|
||||
if (newB === null) return newA;
|
||||
if (newA === root.a && newB === root.b) return root;
|
||||
return { ...root, a: newA, b: newB };
|
||||
}
|
||||
|
||||
/** Find a leaf by id. Returns null if not found. */
|
||||
export function findLeaf(root: TreeNode, leafId: NodeId): LeafNode | null {
|
||||
if (root.kind === "leaf") return root.id === leafId ? root : null;
|
||||
return findLeaf(root.a, leafId) ?? findLeaf(root.b, leafId);
|
||||
}
|
||||
|
||||
/** Number of leaves in the tree. */
|
||||
export function leafCount(root: TreeNode): number {
|
||||
if (root.kind === "leaf") return 1;
|
||||
return leafCount(root.a) + leafCount(root.b);
|
||||
}
|
||||
|
||||
export function serialize(root: TreeNode): string {
|
||||
return JSON.stringify(root);
|
||||
}
|
||||
|
||||
/** Parse JSON back to a tree. Returns null on invalid input. */
|
||||
export function deserialize(json: string): TreeNode | null {
|
||||
try {
|
||||
const parsed = JSON.parse(json);
|
||||
if (!isTreeNode(parsed)) return null;
|
||||
return parsed;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function isTreeNode(x: unknown): x is TreeNode {
|
||||
if (typeof x !== "object" || x === null) return false;
|
||||
const o = x as Record<string, unknown>;
|
||||
if (typeof o.id !== "string") return false;
|
||||
if (o.kind === "leaf") return true;
|
||||
if (o.kind === "split") {
|
||||
return (
|
||||
(o.orientation === "h" || o.orientation === "v") &&
|
||||
typeof o.ratio === "number" &&
|
||||
isTreeNode(o.a) &&
|
||||
isTreeNode(o.b)
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue