megaproxy/tiletopia
1
0
Fork 0
Code Issues Pull requests Projects Releases 8 Packages Wiki Activity Actions

Make gutters discoverable: bigger hitbox, visible line color, higher z-index

Browse source
This commit is contained in:
megaproxy 2026-05-25 20:48:50 +01:00
parent d757117f95
commit 8e4a358aa8
2 changed files with 15 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/lib/layout/Gutter.css
View file

@ -1,6 +1,8 @@
/* The hitbox is invisible; we render a 4px visible line in the middle /* The hitbox is invisible (14px wide); we render a 4px visible line in
via a pseudo-element so the grab area is generous while the visual the middle via a pseudo-element so the grab area is generous while the
stays thin. */ visual stays thin. Color is bumped above the terminal background so the
line is actually visible — at #1a1a1a on #0c0c0c it was nearly invisible
and users couldn't find inner gutters. */
.gutter { .gutter {
background: transparent; background: transparent;
user-select: none; user-select: none;
@ -9,7 +11,7 @@
.gutter::before { .gutter::before {
content: ""; content: "";
position: absolute; position: absolute;
background: #1a1a1a; background: #2f2f2f;
transition: background 0.12s; transition: background 0.12s;
} }
.gutter-h::before { .gutter-h::before {
@ -26,7 +28,9 @@
height: 4px; height: 4px;
transform: translateY(-50%); transform: translateY(-50%);
} }
.gutter:hover::before, .gutter:hover::before {
.gutter.active::before { background: #6a8bc0;
background: #3a5a8c; }
.gutter.active::before {
background: #5a8cd8;
} }

28
src/lib/layout/Gutter.tsx
View file

@ -17,7 +17,7 @@ import { type Box, type GutterInfo, MIN_PANE_PX } from "./tree";
* `onArmedChange` is called with the would-be box of the promoted pane. * `onArmedChange` is called with the would-be box of the promoted pane.
* On release while armed, `onPromote` fires. * On release while armed, `onPromote` fires.
*/ */
const HITBOX_PX = 8; const HITBOX_PX = 14;
/** Cursor must reach this fraction across the sibling pane (in the exit /** Cursor must reach this fraction across the sibling pane (in the exit
* direction) to arm the promote gesture. 0.5 = middle of the sibling. */ * direction) to arm the promote gesture. 0.5 = middle of the sibling. */
const PROMOTE_TRIGGER_FRAC = 0.5; const PROMOTE_TRIGGER_FRAC = 0.5;
@ -105,28 +105,8 @@ export default function Gutter({
// Promote gesture: armed iff cursor is inside the sibling box AND // Promote gesture: armed iff cursor is inside the sibling box AND
// past PROMOTE_TRIGGER_FRAC along the exit direction. // past PROMOTE_TRIGGER_FRAC along the exit direction.
// TEMP DEBUG: trace which gutter is being dragged + the eval result.
// Remove once the issue is diagnosed.
if (info.promote) { if (info.promote) {
const armed = isArmed(info.promote, xFrac, yFrac); setArmed(isArmed(info.promote, xFrac, yFrac));
console.log("[gutter-drag]", {
orient: info.orientation,
gutterAt: info.orientation === "h"
? `x=${info.box.left.toFixed(2)}`
: `y=${info.box.top.toFixed(2)}`,
cursor: { x: xFrac.toFixed(3), y: yFrac.toFixed(3) },
siblingBox: info.promote.siblingBox,
exitDirection: info.promote.exitDirection,
armed,
});
setArmed(armed);
} else {
console.log("[gutter-drag] NO promote (root split)", {
orient: info.orientation,
gutterAt: info.orientation === "h"
? `x=${info.box.left.toFixed(2)}`
: `y=${info.box.top.toFixed(2)}`,
});
} }
}, },
[containerRef, info, flushPending, setArmed], [containerRef, info, flushPending, setArmed],
@ -172,7 +152,7 @@ export default function Gutter({
height: `${info.box.height * 100}%`, height: `${info.box.height * 100}%`,
width: `${HITBOX_PX}px`, width: `${HITBOX_PX}px`,
cursor: "col-resize", cursor: "col-resize",
zIndex: 10, zIndex: 100,
} }
: { : {
position: "absolute", position: "absolute",
@ -181,7 +161,7 @@ export default function Gutter({
width: `${info.box.width * 100}%`, width: `${info.box.width * 100}%`,
height: `${HITBOX_PX}px`, height: `${HITBOX_PX}px`,
cursor: "row-resize", cursor: "row-resize",
zIndex: 10, zIndex: 100,
}; };
return ( return (