root
0f9e1611d1
game-maker / suite (push) Failing after 4m22s
The asset type `particles` is placeable and carries a graph at the same time — `behavior` was the blueprint. Because a continuous emitter gives birth to particle n at time n/rate, the whole field is a function of the clock rather than of the frames: no ring-buffer bookkeeping, exact time jumps, reproducibility as a measurable property. compile.ts follows compileShader's frame but emits JS closures into a Float64Array instead of GLSL, and without eval; a node with two consumers is evaluated once. Drawing is one Pixi ParticleContainer per source, so one draw call. Collision, wind and braking in flight are out for good — that is the price of the formula model, not an omission. The tab count goes from nine to ten, which is exactly the case #84 was built for one day earlier: at 1280 px the row no longer holds every tab, so guard 14b now asks for hidden.length > 0 instead of === 0.
85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import { type FederatedPointerEvent, Graphics } from 'pixi.js';
|
|
import { clamp, centreY } from '../math';
|
|
import { Theme } from '../Theme';
|
|
import { Widget } from '../Widget';
|
|
|
|
const TRACK_HEIGHT = 4;
|
|
const KNOB_RADIUS = 6;
|
|
|
|
/** A value picked by dragging along a track. Reports every step of the drag, not just the end. */
|
|
export class Slider extends Widget {
|
|
private readonly bar = new Graphics();
|
|
private dragging = false;
|
|
onChange?: (value: number) => void;
|
|
|
|
constructor(
|
|
private value = 0,
|
|
private min = 0,
|
|
private max = 1,
|
|
width = 160,
|
|
) {
|
|
super();
|
|
this.focusable = true;
|
|
this.cursor = Theme.hoverCursor;
|
|
this.minWidth = width;
|
|
this.minHeight = Theme.controlHeight;
|
|
this.addChild(this.bar);
|
|
this.trackHover();
|
|
this.on('pointerdown', (e: FederatedPointerEvent) => {
|
|
this.dragging = true;
|
|
this.pick(e);
|
|
e.stopPropagation();
|
|
});
|
|
this.on('globalpointermove', (e: FederatedPointerEvent) => {
|
|
if (this.dragging) this.pick(e);
|
|
});
|
|
this.onPointerRelease(() => {
|
|
this.dragging = false;
|
|
this.invalidate();
|
|
});
|
|
}
|
|
|
|
/** Does not fire `onChange`, unlike a drag. */
|
|
setValue(value: number): void {
|
|
const next = clamp(value, this.min, this.max);
|
|
if (next === this.value) return;
|
|
this.value = next;
|
|
this.invalidate();
|
|
}
|
|
|
|
setRange(min: number, max: number): void {
|
|
this.min = min;
|
|
this.max = max > min ? max : min + 1;
|
|
this.setValue(this.value);
|
|
this.invalidate();
|
|
}
|
|
|
|
get currentValue(): number {
|
|
return this.value;
|
|
}
|
|
|
|
private pick(e: FederatedPointerEvent): void {
|
|
const span = Math.max(1, this.w - KNOB_RADIUS * 2);
|
|
const at = clamp((e.global.x - this.getGlobalPosition().x - KNOB_RADIUS) / span, 0, 1);
|
|
const next = this.min + at * (this.max - this.min);
|
|
if (next === this.value) return;
|
|
this.value = next;
|
|
this.invalidate();
|
|
this.onChange?.(next);
|
|
}
|
|
|
|
override redraw(): void {
|
|
const c = Theme.colors;
|
|
const y = centreY(this.h, TRACK_HEIGHT);
|
|
const span = Math.max(1, this.w - KNOB_RADIUS * 2);
|
|
const at = KNOB_RADIUS + ((this.value - this.min) / (this.max - this.min)) * span;
|
|
this.bar.clear();
|
|
this.bar.rect(KNOB_RADIUS, y, span, TRACK_HEIGHT).fill(c.control);
|
|
this.bar.rect(KNOB_RADIUS, y, at - KNOB_RADIUS, TRACK_HEIGHT).fill(c.accent);
|
|
this.bar
|
|
.circle(at, this.h / 2, KNOB_RADIUS)
|
|
.fill(this.hovered || this.dragging ? c.controlHover : c.control)
|
|
.stroke({ width: 1, color: this.focused ? c.accent : c.border });
|
|
}
|
|
}
|