adminandClaude Opus 5
73a71473f1
A shader could only be judged by placing it on a sprite and running the scene. The shader tab now shows its effect next to the graph, on the image the user picked last, without a picker to maintain. - The preview follows the last selection that has an image: a placed sprite with its overrides, size and tint, a sprite asset, a texture or a frame. Clicking the shader, a node, a behavior or a scene keeps the picture. - Without such a selection, or when the picked image is deleted, a built-in 64 px test image is shown. Its colour runs with u and v, a checkerboard shows where a UV lands and the border fades for alpha. - Each property gets a slider. The sliders belong to the preview and never write to the project. They start at the sprite's values when it carries this shader, otherwise at the default. - The preview has its own clock. Hold and Restart are only enabled when a Time node is in the graph. - The graph | splitter | panel layout of the particles tab moves into PreviewSplit, and both tabs use it. - A nine-sliced frame is previewed unsliced. This is documented. Findings: - The slider row stayed squeezed to a few pixels when the properties changed while the tab was hidden. The layout was triggered one level too high. The slider check in block 28n holds this. - The graph canvas is narrower now, 385 px at a 1280 px window, the same as in the particles tab. Block 28b clicked at a fixed x+420 and now uses the measured width. Tests: - ./check.sh: 132 files, 1952 tests (was 131 / 1941), exit 0 - npm run build: exit 0 - GM_STEPS=28,31 freshly seeded: ALL PASSED, 105 checks - 11 new unit tests in tests/editor/shader-preview.test.ts - 7 new e2e checks in block 28n - Counter-probes: start values ignoring the sprite fail 1 unit test, a preview ignoring the selection fails 2 e2e checks - Check total 1209 in README is computed (1202 + 7), CI measures it Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { clamp, HStack, Splitter, type Widget } from '../ui';
|
|
|
|
/** The panel can be dragged in to the width of its own controls, and open to most of a wide window. */
|
|
const MIN_PREVIEW = 200;
|
|
const MAX_PREVIEW = 640;
|
|
|
|
/**
|
|
* A graph with its preview panel right of it, the two dragged apart like the console: how much of
|
|
* the tab is graph and how much is picture depends on what is being worked on, and on a narrow
|
|
* window a fixed panel eats the canvas. The Particles and Shader tabs (#86, #168).
|
|
*/
|
|
export class PreviewSplit extends HStack {
|
|
readonly splitter = new Splitter('x');
|
|
private panelWidth = 280;
|
|
|
|
constructor(canvas: Widget, side: Widget) {
|
|
super();
|
|
side.minWidth = this.panelWidth;
|
|
this.splitter.onDrag = (delta) => {
|
|
this.panelWidth = clamp(this.panelWidth - delta, MIN_PREVIEW, MAX_PREVIEW);
|
|
side.minWidth = this.panelWidth;
|
|
// The row keeps its own size, so resizing it would not lay out again: ask it directly.
|
|
this.relayout();
|
|
};
|
|
this.add(canvas, 1);
|
|
this.add(this.splitter);
|
|
this.add(side);
|
|
}
|
|
}
|