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
via a pseudo-element so the grab area is generous while the visual
stays thin. */
/* The hitbox is invisible (14px wide); we render a 4px visible line in
the middle via a pseudo-element so the grab area is generous while the
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 {
background: transparent;
user-select: none;
@ -9,7 +11,7 @@
.gutter::before {
content: "";
position: absolute;
background: #1a1a1a;
background: #2f2f2f;
transition: background 0.12s;
}
.gutter-h::before {
@ -26,7 +28,9 @@
height: 4px;
transform: translateY(-50%);
}
.gutter:hover::before,
.gutter.active::before {
background: #3a5a8c;
.gutter:hover::before {
background: #6a8bc0;
}
.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.
* 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
* direction) to arm the promote gesture. 0.5 = middle of the sibling. */
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
// 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) {
const armed = 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)}`,
});
setArmed(isArmed(info.promote, xFrac, yFrac));
}
},
[containerRef, info, flushPending, setArmed],
@ -172,7 +152,7 @@ export default function Gutter({
height: `${info.box.height * 100}%`,
width: `${HITBOX_PX}px`,
cursor: "col-resize",
zIndex: 10,
zIndex: 100,
}
: {
position: "absolute",
@ -181,7 +161,7 @@ export default function Gutter({
width: `${info.box.width * 100}%`,
height: `${HITBOX_PX}px`,
cursor: "row-resize",
zIndex: 10,
zIndex: 100,
};
return (