mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-07-16 05:13:36 +00:00
v2.3.0
This commit is contained in:
LukeGus
+300
-111
@@ -1,14 +1,13 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import React, { useState, useRef, useEffect, memo, useCallback } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { splitDragState, notifyDragEnd } from "@/lib/splitDragging";
|
||||
import { renderTabContent, tabIcon } from "@/shell/tabUtils";
|
||||
import type { Tab, TabType, Host, SplitMode } from "@/types/ui-types";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
type RowColSizes = number[][];
|
||||
import { tabIcon } from "@/shell/tabUtils";
|
||||
import type { Tab, SplitMode } from "@/types/ui-types";
|
||||
|
||||
// ─── useSplitSizes ────────────────────────────────────────────────────────────
|
||||
|
||||
type RowColSizes = number[][];
|
||||
|
||||
function defaultSizes(mode: SplitMode): {
|
||||
rowSizes: number[];
|
||||
rowColSizes: RowColSizes;
|
||||
@@ -18,6 +17,8 @@ function defaultSizes(mode: SplitMode): {
|
||||
return { rowSizes: [100], rowColSizes: [[50, 50]] };
|
||||
case "3-way":
|
||||
return { rowSizes: [50, 50], rowColSizes: [[50, 50], [100]] };
|
||||
case "3-way-horizontal":
|
||||
return { rowSizes: [50, 50], rowColSizes: [[50, 50], [100]] };
|
||||
case "4-way":
|
||||
return {
|
||||
rowSizes: [50, 50],
|
||||
@@ -58,7 +59,6 @@ function useSplitSizes(splitMode: SplitMode) {
|
||||
const d = defaultSizes(splitMode);
|
||||
setRowSizes(d.rowSizes);
|
||||
setRowColSizes(d.rowColSizes);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [splitMode]);
|
||||
|
||||
function reset() {
|
||||
@@ -71,7 +71,6 @@ function useSplitSizes(splitMode: SplitMode) {
|
||||
splitDragState.active = true;
|
||||
setIsDragging(true);
|
||||
}
|
||||
|
||||
function endDrag() {
|
||||
splitDragState.active = false;
|
||||
setIsDragging(false);
|
||||
@@ -85,11 +84,13 @@ function useSplitSizes(splitMode: SplitMode) {
|
||||
startDrag();
|
||||
const totalH = container.getBoundingClientRect().height;
|
||||
const startY = e.clientY;
|
||||
const a = rowSizes[rowIdx];
|
||||
const b = rowSizes[rowIdx + 1];
|
||||
const a = rowSizes[rowIdx],
|
||||
b = rowSizes[rowIdx + 1];
|
||||
function onMove(ev: MouseEvent) {
|
||||
const delta = ((ev.clientY - startY) / totalH) * 100;
|
||||
const na = Math.max(10, Math.min(a + b - 10, a + delta));
|
||||
const na = Math.max(
|
||||
10,
|
||||
Math.min(a + b - 10, a + ((ev.clientY - startY) / totalH) * 100),
|
||||
);
|
||||
setRowSizes((prev) => {
|
||||
const n = [...prev];
|
||||
n[rowIdx] = na;
|
||||
@@ -112,11 +113,16 @@ function useSplitSizes(splitMode: SplitMode) {
|
||||
startDrag();
|
||||
const totalH = container.getBoundingClientRect().height;
|
||||
const startY = e.touches[0].clientY;
|
||||
const a = rowSizes[rowIdx];
|
||||
const b = rowSizes[rowIdx + 1];
|
||||
const a = rowSizes[rowIdx],
|
||||
b = rowSizes[rowIdx + 1];
|
||||
function onMove(ev: TouchEvent) {
|
||||
const delta = ((ev.touches[0].clientY - startY) / totalH) * 100;
|
||||
const na = Math.max(10, Math.min(a + b - 10, a + delta));
|
||||
const na = Math.max(
|
||||
10,
|
||||
Math.min(
|
||||
a + b - 10,
|
||||
a + ((ev.touches[0].clientY - startY) / totalH) * 100,
|
||||
),
|
||||
);
|
||||
setRowSizes((prev) => {
|
||||
const n = [...prev];
|
||||
n[rowIdx] = na;
|
||||
@@ -141,11 +147,13 @@ function useSplitSizes(splitMode: SplitMode) {
|
||||
const totalW = container.getBoundingClientRect().width;
|
||||
const startX = e.clientX;
|
||||
const cols = rowColSizes[rowIdx];
|
||||
const a = cols[colIdx];
|
||||
const b = cols[colIdx + 1];
|
||||
const a = cols[colIdx],
|
||||
b = cols[colIdx + 1];
|
||||
function onMove(ev: MouseEvent) {
|
||||
const delta = ((ev.clientX - startX) / totalW) * 100;
|
||||
const na = Math.max(10, Math.min(a + b - 10, a + delta));
|
||||
const na = Math.max(
|
||||
10,
|
||||
Math.min(a + b - 10, a + ((ev.clientX - startX) / totalW) * 100),
|
||||
);
|
||||
setRowColSizes((prev) => {
|
||||
const next = prev.map((r) => [...r]);
|
||||
next[rowIdx][colIdx] = na;
|
||||
@@ -173,11 +181,16 @@ function useSplitSizes(splitMode: SplitMode) {
|
||||
const totalW = container.getBoundingClientRect().width;
|
||||
const startX = e.touches[0].clientX;
|
||||
const cols = rowColSizes[rowIdx];
|
||||
const a = cols[colIdx];
|
||||
const b = cols[colIdx + 1];
|
||||
const a = cols[colIdx],
|
||||
b = cols[colIdx + 1];
|
||||
function onMove(ev: TouchEvent) {
|
||||
const delta = ((ev.touches[0].clientX - startX) / totalW) * 100;
|
||||
const na = Math.max(10, Math.min(a + b - 10, a + delta));
|
||||
const na = Math.max(
|
||||
10,
|
||||
Math.min(
|
||||
a + b - 10,
|
||||
a + ((ev.touches[0].clientX - startX) / totalW) * 100,
|
||||
),
|
||||
);
|
||||
setRowColSizes((prev) => {
|
||||
const next = prev.map((r) => [...r]);
|
||||
next[rowIdx][colIdx] = na;
|
||||
@@ -217,12 +230,14 @@ function ColDivider({
|
||||
onTouchStart: (e: React.TouchEvent) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
onMouseDown={onMouseDown}
|
||||
onTouchStart={onTouchStart}
|
||||
className="relative w-3 shrink-0 cursor-col-resize z-10 flex items-center justify-center group"
|
||||
>
|
||||
<div className="w-px h-full bg-border group-hover:bg-accent-brand/60 transition-colors" />
|
||||
<div className="relative w-0 shrink-0 z-10">
|
||||
<div
|
||||
onMouseDown={onMouseDown}
|
||||
onTouchStart={onTouchStart}
|
||||
className="absolute inset-y-0 -left-2 -right-2 cursor-col-resize flex items-center justify-center group"
|
||||
>
|
||||
<div className="w-px h-full bg-border group-hover:bg-accent-brand/60 transition-colors pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -235,12 +250,14 @@ function RowDivider({
|
||||
onTouchStart: (e: React.TouchEvent) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
onMouseDown={onMouseDown}
|
||||
onTouchStart={onTouchStart}
|
||||
className="relative h-3 w-full shrink-0 cursor-row-resize z-10 flex flex-col items-center justify-center group"
|
||||
>
|
||||
<div className="h-px w-full bg-border group-hover:bg-accent-brand/60 transition-colors" />
|
||||
<div className="relative h-0 w-full shrink-0 z-10">
|
||||
<div
|
||||
onMouseDown={onMouseDown}
|
||||
onTouchStart={onTouchStart}
|
||||
className="absolute inset-x-0 -top-2 -bottom-2 cursor-row-resize flex flex-col items-center justify-center group"
|
||||
>
|
||||
<div className="h-px w-full bg-border group-hover:bg-accent-brand/60 transition-colors pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -254,6 +271,7 @@ function PaneHeader({
|
||||
tab: Tab | null;
|
||||
paneIndex: number;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 px-2.5 h-7 shrink-0 bg-sidebar border-b border-border text-xs font-medium text-muted-foreground select-none">
|
||||
{tab ? (
|
||||
@@ -264,13 +282,16 @@ function PaneHeader({
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="opacity-40">Pane {paneIndex + 1} — empty</span>
|
||||
<span className="opacity-40">
|
||||
{t("splitScreen.paneEmpty", { index: paneIndex + 1 })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyPane() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center w-full h-full gap-2 text-muted-foreground/30 bg-background">
|
||||
<div className="grid grid-cols-2 gap-1">
|
||||
@@ -279,30 +300,35 @@ function EmptyPane() {
|
||||
<div className="size-5 border-2 border-current rounded-sm" />
|
||||
<div className="size-5 border-2 border-current rounded-sm" />
|
||||
</div>
|
||||
<span className="text-xs">No tab assigned</span>
|
||||
<span className="text-xs">{t("splitScreen.noTabAssigned")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Pane({
|
||||
const Pane = memo(function Pane({
|
||||
tab,
|
||||
paneIndex,
|
||||
isDragging,
|
||||
onOpenSingletonTab,
|
||||
onOpenTab,
|
||||
onPaneContentRef,
|
||||
}: {
|
||||
tab: Tab | null;
|
||||
paneIndex: number;
|
||||
isDragging: boolean;
|
||||
onOpenSingletonTab: (type: TabType) => void;
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
onPaneContentRef?: (paneIndex: number, el: HTMLDivElement | null) => void;
|
||||
}) {
|
||||
const contentRef = useCallback(
|
||||
(el: HTMLDivElement | null) => {
|
||||
onPaneContentRef?.(paneIndex, el);
|
||||
},
|
||||
[paneIndex, onPaneContentRef],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col w-full h-full min-w-0 min-h-0 overflow-hidden">
|
||||
<PaneHeader tab={tab} paneIndex={paneIndex} />
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<div className="flex-1 min-h-0 overflow-hidden relative">
|
||||
{tab ? (
|
||||
renderTabContent(tab, onOpenSingletonTab, onOpenTab)
|
||||
<div ref={contentRef} className="absolute inset-0" />
|
||||
) : (
|
||||
<EmptyPane />
|
||||
)}
|
||||
@@ -312,22 +338,84 @@ function Pane({
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// ─── Row (top-level so React never sees a new component type) ─────────────────
|
||||
|
||||
const Row = memo(function Row({
|
||||
rowIdx,
|
||||
paneIndices,
|
||||
rowHeight,
|
||||
colWidths,
|
||||
paneTabIds,
|
||||
tabs,
|
||||
isDragging,
|
||||
onColDivider,
|
||||
onColDividerTouch,
|
||||
onPaneContentRef,
|
||||
}: {
|
||||
rowIdx: number;
|
||||
paneIndices: number[];
|
||||
rowHeight: number;
|
||||
colWidths: number[];
|
||||
paneTabIds: (string | null)[];
|
||||
tabs: Tab[];
|
||||
isDragging: boolean;
|
||||
onColDivider: (e: React.MouseEvent, rowIdx: number, colIdx: number) => void;
|
||||
onColDividerTouch: (
|
||||
e: React.TouchEvent,
|
||||
rowIdx: number,
|
||||
colIdx: number,
|
||||
) => void;
|
||||
onPaneContentRef?: (paneIndex: number, el: HTMLDivElement | null) => void;
|
||||
}) {
|
||||
const widths = colWidths ?? [];
|
||||
return (
|
||||
<div className="flex min-h-0 w-full" style={{ height: `${rowHeight}%` }}>
|
||||
{paneIndices.map((pIdx, ci) => {
|
||||
const tabId = paneTabIds[pIdx];
|
||||
const tab =
|
||||
tabId != null ? (tabs.find((t) => t.id === tabId) ?? null) : null;
|
||||
return (
|
||||
<React.Fragment key={pIdx}>
|
||||
<div
|
||||
className="min-w-0 min-h-0 overflow-hidden"
|
||||
style={{ width: `${widths[ci] ?? 100 / paneIndices.length}%` }}
|
||||
>
|
||||
<Pane
|
||||
tab={tab}
|
||||
paneIndex={pIdx}
|
||||
isDragging={isDragging}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
</div>
|
||||
{ci < paneIndices.length - 1 && (
|
||||
<ColDivider
|
||||
onMouseDown={(e) => onColDivider(e, rowIdx, ci)}
|
||||
onTouchStart={(e) => onColDividerTouch(e, rowIdx, ci)}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
// ─── SplitView ────────────────────────────────────────────────────────────────
|
||||
|
||||
export function SplitView({
|
||||
export const SplitView = memo(function SplitView({
|
||||
tabs,
|
||||
paneTabIds,
|
||||
splitMode,
|
||||
onOpenSingletonTab,
|
||||
onOpenTab,
|
||||
onTerminalResize,
|
||||
onPaneContentRef,
|
||||
}: {
|
||||
tabs: Tab[];
|
||||
paneTabIds: (string | null)[];
|
||||
splitMode: SplitMode;
|
||||
onOpenSingletonTab: (type: TabType) => void;
|
||||
onOpenTab: (host: Host, type: TabType) => void;
|
||||
onTerminalResize?: () => void;
|
||||
onPaneContentRef?: (paneIndex: number, el: HTMLDivElement | null) => void;
|
||||
}) {
|
||||
const {
|
||||
rowSizes,
|
||||
@@ -341,55 +429,17 @@ export function SplitView({
|
||||
onColDividerTouch,
|
||||
} = useSplitSizes(splitMode);
|
||||
|
||||
function pane(idx: number) {
|
||||
const tab =
|
||||
paneTabIds[idx] != null
|
||||
? (tabs.find((t) => t.id === paneTabIds[idx]) ?? null)
|
||||
: null;
|
||||
return (
|
||||
<Pane
|
||||
tab={tab}
|
||||
paneIndex={idx}
|
||||
isDragging={isDragging}
|
||||
onOpenSingletonTab={onOpenSingletonTab}
|
||||
onOpenTab={onOpenTab}
|
||||
/>
|
||||
);
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!isDragging) {
|
||||
const id = requestAnimationFrame(() => onTerminalResize?.());
|
||||
return () => cancelAnimationFrame(id);
|
||||
}
|
||||
}, [isDragging, onTerminalResize]);
|
||||
|
||||
function Row({
|
||||
rowIdx,
|
||||
paneIndices,
|
||||
}: {
|
||||
rowIdx: number;
|
||||
paneIndices: number[];
|
||||
}) {
|
||||
const cols = rowColSizes[rowIdx] ?? [];
|
||||
return (
|
||||
<div
|
||||
className="flex min-h-0 w-full"
|
||||
style={{ height: `${rowSizes[rowIdx]}%` }}
|
||||
>
|
||||
{paneIndices.map((pIdx, ci) => (
|
||||
<>
|
||||
<div
|
||||
key={pIdx}
|
||||
className="min-w-0 min-h-0 overflow-hidden"
|
||||
style={{ width: `${cols[ci]}%` }}
|
||||
>
|
||||
{pane(pIdx)}
|
||||
</div>
|
||||
{ci < paneIndices.length - 1 && (
|
||||
<ColDivider
|
||||
key={`cd-${rowIdx}-${ci}`}
|
||||
onMouseDown={(e) => onColDivider(e, rowIdx, ci)}
|
||||
onTouchStart={(e) => onColDividerTouch(e, rowIdx, ci)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
// Inline pane lookup for the non-Row layouts (3-way, 3-way-horizontal)
|
||||
function tab(idx: number): Tab | null {
|
||||
const tabId = paneTabIds[idx];
|
||||
return tabId != null ? (tabs.find((t) => t.id === tabId) ?? null) : null;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -405,7 +455,20 @@ export function SplitView({
|
||||
Reset
|
||||
</button>
|
||||
|
||||
{splitMode === "2-way" && <Row rowIdx={0} paneIndices={[0, 1]} />}
|
||||
{splitMode === "2-way" && (
|
||||
<Row
|
||||
rowIdx={0}
|
||||
paneIndices={[0, 1]}
|
||||
rowHeight={rowSizes[0]}
|
||||
colWidths={rowColSizes[0] ?? []}
|
||||
paneTabIds={paneTabIds}
|
||||
tabs={tabs}
|
||||
isDragging={isDragging}
|
||||
onColDivider={onColDivider}
|
||||
onColDividerTouch={onColDividerTouch}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
)}
|
||||
|
||||
{splitMode === "3-way" && (
|
||||
<div className="flex w-full h-full min-h-0">
|
||||
@@ -413,7 +476,12 @@ export function SplitView({
|
||||
className="min-w-0 min-h-0 overflow-hidden"
|
||||
style={{ width: `${rowColSizes[0][0]}%` }}
|
||||
>
|
||||
{pane(0)}
|
||||
<Pane
|
||||
tab={tab(0)}
|
||||
paneIndex={0}
|
||||
isDragging={isDragging}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
</div>
|
||||
<ColDivider
|
||||
onMouseDown={(e) => onColDivider(e, 0, 0)}
|
||||
@@ -424,7 +492,12 @@ export function SplitView({
|
||||
className="min-h-0 overflow-hidden"
|
||||
style={{ height: `${rowSizes[0]}%` }}
|
||||
>
|
||||
{pane(1)}
|
||||
<Pane
|
||||
tab={tab(1)}
|
||||
paneIndex={1}
|
||||
isDragging={isDragging}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
</div>
|
||||
<RowDivider
|
||||
onMouseDown={(e) => onRowDivider(e, 0)}
|
||||
@@ -434,44 +507,160 @@ export function SplitView({
|
||||
className="min-h-0 overflow-hidden"
|
||||
style={{ height: `${rowSizes[1]}%` }}
|
||||
>
|
||||
{pane(2)}
|
||||
<Pane
|
||||
tab={tab(2)}
|
||||
paneIndex={2}
|
||||
isDragging={isDragging}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{splitMode === "3-way-horizontal" && (
|
||||
<div className="flex flex-col w-full h-full min-h-0">
|
||||
<div
|
||||
className="flex min-h-0 overflow-hidden"
|
||||
style={{ height: `${rowSizes[0]}%` }}
|
||||
>
|
||||
<div
|
||||
className="min-w-0 min-h-0 overflow-hidden"
|
||||
style={{ width: `${rowColSizes[0][0]}%` }}
|
||||
>
|
||||
<Pane
|
||||
tab={tab(0)}
|
||||
paneIndex={0}
|
||||
isDragging={isDragging}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
</div>
|
||||
<ColDivider
|
||||
onMouseDown={(e) => onColDivider(e, 0, 0)}
|
||||
onTouchStart={(e) => onColDividerTouch(e, 0, 0)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0 min-h-0 overflow-hidden">
|
||||
<Pane
|
||||
tab={tab(1)}
|
||||
paneIndex={1}
|
||||
isDragging={isDragging}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<RowDivider
|
||||
onMouseDown={(e) => onRowDivider(e, 0)}
|
||||
onTouchStart={(e) => onRowDividerTouch(e, 0)}
|
||||
/>
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<Pane
|
||||
tab={tab(2)}
|
||||
paneIndex={2}
|
||||
isDragging={isDragging}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{splitMode === "4-way" && (
|
||||
<div className="flex flex-col w-full h-full min-h-0">
|
||||
<Row rowIdx={0} paneIndices={[0, 1]} />
|
||||
<Row
|
||||
rowIdx={0}
|
||||
paneIndices={[0, 1]}
|
||||
rowHeight={rowSizes[0]}
|
||||
colWidths={rowColSizes[0] ?? []}
|
||||
paneTabIds={paneTabIds}
|
||||
tabs={tabs}
|
||||
isDragging={isDragging}
|
||||
onColDivider={onColDivider}
|
||||
onColDividerTouch={onColDividerTouch}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
<RowDivider
|
||||
onMouseDown={(e) => onRowDivider(e, 0)}
|
||||
onTouchStart={(e) => onRowDividerTouch(e, 0)}
|
||||
/>
|
||||
<Row rowIdx={1} paneIndices={[2, 3]} />
|
||||
<Row
|
||||
rowIdx={1}
|
||||
paneIndices={[2, 3]}
|
||||
rowHeight={rowSizes[1]}
|
||||
colWidths={rowColSizes[1] ?? []}
|
||||
paneTabIds={paneTabIds}
|
||||
tabs={tabs}
|
||||
isDragging={isDragging}
|
||||
onColDivider={onColDivider}
|
||||
onColDividerTouch={onColDividerTouch}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{splitMode === "5-way" && (
|
||||
<div className="flex flex-col w-full h-full min-h-0">
|
||||
<Row rowIdx={0} paneIndices={[0, 1, 2]} />
|
||||
<Row
|
||||
rowIdx={0}
|
||||
paneIndices={[0, 1, 2]}
|
||||
rowHeight={rowSizes[0]}
|
||||
colWidths={rowColSizes[0] ?? []}
|
||||
paneTabIds={paneTabIds}
|
||||
tabs={tabs}
|
||||
isDragging={isDragging}
|
||||
onColDivider={onColDivider}
|
||||
onColDividerTouch={onColDividerTouch}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
<RowDivider
|
||||
onMouseDown={(e) => onRowDivider(e, 0)}
|
||||
onTouchStart={(e) => onRowDividerTouch(e, 0)}
|
||||
/>
|
||||
<Row rowIdx={1} paneIndices={[3, 4]} />
|
||||
<Row
|
||||
rowIdx={1}
|
||||
paneIndices={[3, 4]}
|
||||
rowHeight={rowSizes[1]}
|
||||
colWidths={rowColSizes[1] ?? []}
|
||||
paneTabIds={paneTabIds}
|
||||
tabs={tabs}
|
||||
isDragging={isDragging}
|
||||
onColDivider={onColDivider}
|
||||
onColDividerTouch={onColDividerTouch}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{splitMode === "6-way" && (
|
||||
<div className="flex flex-col w-full h-full min-h-0">
|
||||
<Row rowIdx={0} paneIndices={[0, 1, 2]} />
|
||||
<Row
|
||||
rowIdx={0}
|
||||
paneIndices={[0, 1, 2]}
|
||||
rowHeight={rowSizes[0]}
|
||||
colWidths={rowColSizes[0] ?? []}
|
||||
paneTabIds={paneTabIds}
|
||||
tabs={tabs}
|
||||
isDragging={isDragging}
|
||||
onColDivider={onColDivider}
|
||||
onColDividerTouch={onColDividerTouch}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
<RowDivider
|
||||
onMouseDown={(e) => onRowDivider(e, 0)}
|
||||
onTouchStart={(e) => onRowDividerTouch(e, 0)}
|
||||
/>
|
||||
<Row rowIdx={1} paneIndices={[3, 4, 5]} />
|
||||
<Row
|
||||
rowIdx={1}
|
||||
paneIndices={[3, 4, 5]}
|
||||
rowHeight={rowSizes[1]}
|
||||
colWidths={rowColSizes[1] ?? []}
|
||||
paneTabIds={paneTabIds}
|
||||
tabs={tabs}
|
||||
isDragging={isDragging}
|
||||
onColDivider={onColDivider}
|
||||
onColDividerTouch={onColDividerTouch}
|
||||
onPaneContentRef={onPaneContentRef}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user