rootandClaude Opus 5
4d84231b9f
Remove comments that only restate the code, keeping the section banners and the notes that carry a reason, a measured fact or an external contract. ButtonOptions.width claimed to be a fixed width but only set minWidth, so the Graph and Texture pickers grew with the name they showed. It is now what it promises, with a separate minWidth for the buttons that have two forms. Narrow buttons shrink their padding, otherwise a 24px icon button had 8px left for its glyph and truncate dropped it entirely. __gm.labelsDropped() guards that class: the overflow guard only saw text that was too wide, never a label truncated to nothing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { type FederatedPointerEvent, Graphics } from 'pixi.js';
|
|
import { Theme } from '../Theme';
|
|
import { Widget } from '../Widget';
|
|
|
|
/** Thin draggable divider between two panes. Reports the drag delta; the parent resizes. */
|
|
export class Splitter extends Widget {
|
|
/** Size across the drag axis; the visible bar fills it, so this is also the grab area. */
|
|
static readonly THICKNESS = 5;
|
|
private readonly bar = new Graphics();
|
|
private dragging = false;
|
|
private last = 0;
|
|
onDrag?: (delta: number) => void;
|
|
|
|
constructor(private readonly axis: 'x' | 'y') {
|
|
super();
|
|
this.cursor = axis === 'x' ? 'col-resize' : 'row-resize';
|
|
this.minWidth = axis === 'x' ? Splitter.THICKNESS : 0;
|
|
this.minHeight = axis === 'y' ? Splitter.THICKNESS : 0;
|
|
this.addChild(this.bar);
|
|
this.trackHover();
|
|
this.on('pointerdown', (e: FederatedPointerEvent) => {
|
|
this.dragging = true;
|
|
this.last = this.axis === 'x' ? e.global.x : e.global.y;
|
|
e.stopPropagation();
|
|
});
|
|
this.on('globalpointermove', (e: FederatedPointerEvent) => {
|
|
if (!this.dragging) return;
|
|
const now = this.axis === 'x' ? e.global.x : e.global.y;
|
|
const delta = now - this.last;
|
|
this.last = now;
|
|
if (delta !== 0) this.onDrag?.(delta);
|
|
});
|
|
this.onPointerRelease(() => {
|
|
this.dragging = false;
|
|
this.invalidate();
|
|
});
|
|
}
|
|
|
|
override redraw(): void {
|
|
this.bar.clear();
|
|
const active = this.hovered || this.dragging;
|
|
this.bar.rect(0, 0, this.w, this.h).fill(active ? Theme.colors.accent : Theme.colors.border);
|
|
}
|
|
}
|