91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import { useRef } from "react";
|
|
import { TerminalView } from "./TerminalView";
|
|
import type { LayoutNode } from "./layoutTypes";
|
|
import { setRatios, restartSurface } from "./socketBridge";
|
|
|
|
interface Props {
|
|
workspaceId: string;
|
|
layout: LayoutNode | null;
|
|
/** surface_id -> running flag, from the latest status/events. */
|
|
running: Record<string, boolean>;
|
|
}
|
|
|
|
export function LayoutEngine({ workspaceId, layout, running }: Props) {
|
|
if (!layout) {
|
|
return <div style={{ color: "#666", padding: 24 }}>Empty workspace — apply a preset to add panels.</div>;
|
|
}
|
|
return <Node workspaceId={workspaceId} node={layout} path={[]} running={running} />;
|
|
}
|
|
|
|
function Node({ workspaceId, node, path, running }: { workspaceId: string; node: LayoutNode; path: number[]; running: Record<string, boolean> }) {
|
|
if ("leaf" in node) {
|
|
const id = node.leaf.surface_id;
|
|
if (running[id] === false) {
|
|
return (
|
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", width: "100%", background: "#0A0D12", color: "#8B97A6", flexDirection: "column", gap: 10 }}>
|
|
<div style={{ fontFamily: "monospace", fontSize: 13 }}>Process exited</div>
|
|
<button onClick={() => void restartSurface(id)} style={{ padding: "6px 14px" }}>⏎ Restart</button>
|
|
</div>
|
|
);
|
|
}
|
|
return <TerminalView key={id} surfaceId={id} />;
|
|
}
|
|
|
|
const { orient, ratios, children } = node.split;
|
|
const dir = orient === "h" ? "row" : "column";
|
|
return (
|
|
<div style={{ display: "flex", flexDirection: dir, width: "100%", height: "100%" }}>
|
|
{children.map((child, i) => (
|
|
<Pane key={i} grow={ratios[i] ?? 1} isLast={i === children.length - 1} orient={orient}
|
|
onResize={(deltaFrac) => {
|
|
const next = [...ratios];
|
|
next[i] = Math.max(0.05, next[i] + deltaFrac);
|
|
next[i + 1] = Math.max(0.05, (next[i + 1] ?? 1) - deltaFrac);
|
|
void setRatios(workspaceId, path, next);
|
|
}}>
|
|
<Node workspaceId={workspaceId} node={child} path={[...path, i]} running={running} />
|
|
</Pane>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Pane({ grow, isLast, orient, onResize, children }: { grow: number; isLast: boolean; orient: "h" | "v"; onResize: (deltaFrac: number) => void; children: React.ReactNode }) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const startDrag = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
const parent = ref.current?.parentElement;
|
|
if (!parent) return;
|
|
const total = orient === "h" ? parent.clientWidth : parent.clientHeight;
|
|
const start = orient === "h" ? e.clientX : e.clientY;
|
|
let last = start;
|
|
const move = (ev: MouseEvent) => {
|
|
const cur = orient === "h" ? ev.clientX : ev.clientY;
|
|
const delta = (cur - last) / total;
|
|
last = cur;
|
|
onResize(delta);
|
|
};
|
|
const up = () => {
|
|
window.removeEventListener("mousemove", move);
|
|
window.removeEventListener("mouseup", up);
|
|
};
|
|
window.addEventListener("mousemove", move);
|
|
window.addEventListener("mouseup", up);
|
|
};
|
|
return (
|
|
<>
|
|
<div ref={ref} style={{ flexGrow: grow, flexBasis: 0, minWidth: 0, minHeight: 0, overflow: "hidden", position: "relative" }}>
|
|
{children}
|
|
</div>
|
|
{!isLast && (
|
|
<div onMouseDown={startDrag}
|
|
style={{
|
|
flex: "0 0 4px",
|
|
cursor: orient === "h" ? "col-resize" : "row-resize",
|
|
background: "#232A33",
|
|
}} />
|
|
)}
|
|
</>
|
|
);
|
|
}
|