Skip to content

Commit b5050ed

Browse files
aleksanderkatanaleksanderkatan
authored
feat: Add ExampleOptions to common (#2145)
1 parent 706187e commit b5050ed

61 files changed

Lines changed: 534 additions & 430 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/typegpu-docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"scripts": {
77
"dev": "astro dev",
88
"build": "astro check && astro build",
9+
"test:types": "astro check",
910
"preview": "astro preview",
1011
"astro": "astro"
1112
},

‎apps/typegpu-docs/src/components/ControlPanel.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,15 @@ import { TextArea } from './design/TextArea.tsx';
1919
import { Toggle } from './design/Toggle.tsx';
2020
import { VectorSlider } from './design/VectorSlider.tsx';
2121
import { FPSCounter } from './FpsCounter.tsx';
22+
import type { d } from 'typegpu';
2223

2324
function ToggleRow({
2425
label,
2526
initial = false,
2627
onChange,
2728
}: {
2829
label: string;
29-
initial?: boolean;
30+
initial: boolean;
3031
onChange: (value: boolean) => void;
3132
}) {
3233
const [value, setValue] = useState(initial);
@@ -64,7 +65,7 @@ function SliderRow({
6465
onChange,
6566
}: {
6667
label: string;
67-
initial?: number;
68+
initial: number;
6869
min?: number;
6970
max?: number;
7071
step?: number;
@@ -100,7 +101,7 @@ function VectorSliderRow({
100101
onChange,
101102
}: {
102103
label: string;
103-
initial?: number[];
104+
initial: number[];
104105
min: number[];
105106
max: number[];
106107
step: number[];
@@ -133,12 +134,10 @@ function ColorPickerRow({
133134
onChange,
134135
}: {
135136
label: string;
136-
initial?: readonly [number, number, number];
137-
onChange: (value: readonly [number, number, number]) => void;
137+
initial: d.v3f;
138+
onChange: (value: d.v3f) => void;
138139
}) {
139-
const [value, setValue] = useState<readonly [number, number, number]>(
140-
initial ?? [0, 0, 0],
141-
);
140+
const [value, setValue] = useState<d.v3f>(initial);
142141
const runWithCatch = useSetAtom(runWithCatchAtom);
143142

144143
return (
@@ -162,7 +161,7 @@ function TextAreaRow({
162161
onChange,
163162
}: {
164163
label: string;
165-
initial?: string;
164+
initial: string;
166165
onChange: (value: string) => void;
167166
}) {
168167
const [value, setValue] = useState(initial ?? '');
@@ -190,7 +189,7 @@ function SelectRow({
190189
onChange,
191190
}: {
192191
label: string;
193-
initial?: string;
192+
initial: string;
194193
options: string[];
195194
onChange: (value: string) => void;
196195
}) {

‎apps/typegpu-docs/src/components/design/ColorPicker.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import { d } from 'typegpu';
2+
13
function hexToRgb(hex: string) {
2-
return [
4+
return d.vec3f(
35
Number.parseInt(hex.slice(1, 3), 16) / 255,
46
Number.parseInt(hex.slice(3, 5), 16) / 255,
57
Number.parseInt(hex.slice(5, 7), 16) / 255,
6-
] as const;
8+
);
79
}
810

911
function componentToHex(c: number) {
@@ -19,8 +21,8 @@ type Props = {
1921
/**
2022
* RGB 0-1
2123
*/
22-
value: readonly [number, number, number];
23-
onChange: (value: readonly [number, number, number]) => void;
24+
value: d.v3f;
25+
onChange: (value: d.v3f) => void;
2426
};
2527

2628
export function ColorPicker({ value, onChange }: Props) {

‎apps/typegpu-docs/src/components/stackblitz/stackBlitzIndex.ts‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ for (const controls of Object.values(example)) {
113113
select.innerHTML = params.options
114114
.map((option) => `<option value="${option}">${option}</option>`)
115115
.join('');
116-
select.value = params.initial ?? params.options[0];
116+
select.value = params.initial;
117117

118118
select.addEventListener('change', () => {
119119
params.onSelectChange(select.value);
@@ -129,9 +129,7 @@ for (const controls of Object.values(example)) {
129129
sliderContainer.style.flexDirection = 'column';
130130
sliderContainer.style.gap = '0.2rem';
131131

132-
const currentValues = params.initial
133-
? [...params.initial]
134-
: [...params.min];
132+
const currentValues = params.initial;
135133
const length = params.min.length;
136134
const labels = ['x', 'y', 'z', 'w'];
137135

@@ -212,34 +210,34 @@ for (const controls of Object.values(example)) {
212210

213211
type SelectControlParam = {
214212
onSelectChange: (newValue: string) => void;
215-
initial?: string;
213+
initial: string;
216214
options: string[];
217215
};
218216

219217
type ToggleControlParam = {
220218
onToggleChange: (newValue: boolean) => void;
221-
initial?: boolean;
219+
initial: boolean;
222220
};
223221

224222
type SliderControlParam = {
225223
onSliderChange: (newValue: number) => void;
226-
initial?: number;
224+
initial: number;
227225
min?: number;
228226
max?: number;
229227
step?: number;
230228
};
231229

232230
type VectorSliderControlParam = {
233231
onVectorSliderChange: (newValue: number[]) => void;
234-
initial?: number[];
232+
initial: number[];
235233
min: number[];
236234
max: number[];
237235
step: number[];
238236
};
239237

240238
type ColorPickerControlParam = {
241239
onColorChange: (newValue: readonly [number, number, number]) => void;
242-
initial?: readonly [number, number, number];
240+
initial: readonly [number, number, number];
243241
};
244242

245243
type ButtonControlParam = {
@@ -248,7 +246,7 @@ type ButtonControlParam = {
248246

249247
type TextAreaControlParam = {
250248
onTextChange: (newValue: string) => void;
251-
initial?: string;
249+
initial: string;
252250
};
253251

254252
type ExampleControlParam =

‎apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
SampleResult,
1616
VisualizationParams,
1717
} from './types.ts';
18+
import { defineControls } from '../../common/defineControls.ts';
1819

1920
const root = await tgpu.init();
2021

@@ -468,7 +469,7 @@ function updateBrushSize() {
468469
});
469470
}
470471

471-
export const controls = {
472+
export const controls = defineControls({
472473
Clear: {
473474
onButtonClick: clearCanvas,
474475
},
@@ -490,6 +491,7 @@ export const controls = {
490491
},
491492
},
492493
'Show negative distance': {
494+
initial: false,
493495
onToggleChange(value: boolean) {
494496
paramsUniform.writePartial({ showInside: value ? 1 : 0 });
495497
render();
@@ -505,7 +507,7 @@ export const controls = {
505507
updateBrushSize();
506508
},
507509
},
508-
};
510+
});
509511

510512
export function onCleanup() {
511513
clearTimeout(resizeTimeout);

‎apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { randf } from '@typegpu/noise';
22
import tgpu, { common, d, std } from 'typegpu';
33
import type { SampledFlag, StorageFlag, TgpuTexture } from 'typegpu';
4+
import { defineControls } from '../../common/defineControls.ts';
45

56
const root = await tgpu.init();
67

@@ -296,7 +297,7 @@ const resizeObserver = new ResizeObserver(() => {
296297
});
297298
resizeObserver.observe(canvas);
298299

299-
export const controls = {
300+
export const controls = defineControls({
300301
'Run Algorithm': {
301302
onButtonClick: () => {
302303
currentRunId++;
@@ -311,7 +312,7 @@ export const controls = {
311312
min: 0,
312313
max: 1,
313314
step: 0.01,
314-
onSliderChange(value: number) {
315+
onSliderChange(value) {
315316
const density = 10 ** (-5 + 4 * value);
316317
seedThreshold = 1 - density;
317318
seedThresholdUniform.write(seedThreshold);
@@ -323,19 +324,19 @@ export const controls = {
323324
min: 0,
324325
max: 1000,
325326
step: 50,
326-
onSliderChange(value: number) {
327+
onSliderChange(value) {
327328
stepDelayMs = value;
328329
},
329330
},
330331
Range: {
331332
initial: '100%',
332333
options: ['100%', '50%', '20%', '10%', '1%'],
333-
onSelectChange(value: string) {
334+
onSelectChange(value) {
334335
startingRangePercent = Number.parseFloat(value) / 100;
335336
reset();
336337
},
337338
},
338-
};
339+
});
339340

340341
export function onCleanup() {
341342
clearTimeout(resizeTimeout);

‎apps/typegpu-docs/src/examples/algorithms/matrix-multiplication/index.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import tgpu, { d } from 'typegpu';
2+
import { defineControls } from '../../common/defineControls.ts';
23

34
const WORKGROUP_SIZE = [8, 8] as [number, number];
45
const MAX_MATRIX_SIZE = 6;
@@ -148,7 +149,7 @@ const paramSettings = {
148149
step: 1,
149150
};
150151

151-
export const controls = {
152+
export const controls = defineControls({
152153
Reshuffle: {
153154
onButtonClick: () => {
154155
run();
@@ -158,7 +159,7 @@ export const controls = {
158159
'#1 rows': {
159160
initial: firstRowCount,
160161
...paramSettings,
161-
onSliderChange: (value: number) => {
162+
onSliderChange: (value) => {
162163
firstRowCount = value;
163164
run();
164165
},
@@ -167,7 +168,7 @@ export const controls = {
167168
'#1 columns': {
168169
initial: firstColumnCount,
169170
...paramSettings,
170-
onSliderChange: (value: number) => {
171+
onSliderChange: (value) => {
171172
firstColumnCount = value;
172173
run();
173174
},
@@ -176,12 +177,12 @@ export const controls = {
176177
'#2 columns': {
177178
initial: secondColumnCount,
178179
...paramSettings,
179-
onSliderChange: (value: number) => {
180+
onSliderChange: (value) => {
180181
secondColumnCount = value;
181182
run();
182183
},
183184
},
184-
};
185+
});
185186

186187
export function onCleanup() {
187188
root.destroy();

‎apps/typegpu-docs/src/examples/algorithms/matrix-next/index.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
import { computeSharedMemory } from './computeShared.ts';
1010
import { computeSimple } from './computeSimple.ts';
1111
import { multiplyMatricesCPU } from './computeCpu.ts';
12+
import { defineControls } from '../../common/defineControls.ts';
1213

1314
const state = {
1415
dimensions: { firstRowCount: 3, firstColumnCount: 4, secondColumnCount: 2 },
@@ -299,41 +300,41 @@ function printMatrixToHtml(
299300

300301
const paramSettings = { min: 1, max: 512, step: 1 };
301302

302-
export const controls = {
303+
export const controls = defineControls({
303304
Reshuffle: { onButtonClick: () => generateMatrices() },
304305
Compute: { onButtonClick: () => compute() },
305306
strategy: {
306307
initial: 'gpu-optimized',
307308
options: ['gpu-optimized', 'gpu-simple', 'cpu'],
308-
onSelectChange: (value: CalculationStrategy) => {
309+
onSelectChange: (value) => {
309310
state.strategy = value;
310311
},
311312
},
312313
'#1 rows': {
313314
initial: state.dimensions.firstRowCount,
314315
...paramSettings,
315-
onSliderChange: (value: number) => {
316+
onSliderChange: (value) => {
316317
state.dimensions.firstRowCount = value;
317318
generateMatrices();
318319
},
319320
},
320321
'#1 columns': {
321322
initial: state.dimensions.firstColumnCount,
322323
...paramSettings,
323-
onSliderChange: (value: number) => {
324+
onSliderChange: (value) => {
324325
state.dimensions.firstColumnCount = value;
325326
generateMatrices();
326327
},
327328
},
328329
'#2 columns': {
329330
initial: state.dimensions.secondColumnCount,
330331
...paramSettings,
331-
onSliderChange: (value: number) => {
332+
onSliderChange: (value) => {
332333
state.dimensions.secondColumnCount = value;
333334
generateMatrices();
334335
},
335336
},
336-
};
337+
});
337338

338339
export function onCleanup() {
339340
root.destroy();

‎apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
weightsBiasesLayout,
77
} from './data.ts';
88
import { downloadLayers } from './helpers.ts';
9+
import { defineControls } from '../../common/defineControls.ts';
910

1011
const SIZE = 28;
1112

@@ -409,7 +410,7 @@ canvas.addEventListener('touchmove', (event) => {
409410
handleDrawing(x, y);
410411
}, { passive: false });
411412

412-
export const controls = {
413+
export const controls = defineControls({
413414
Reset: {
414415
onButtonClick: resetDrawing,
415416
},
@@ -426,7 +427,7 @@ export const controls = {
426427
.map((fn) => tgpu.resolve([fn], { enableExtensions: ['subgroups'] }))
427428
.map((r) => root.device.createShaderModule({ code: r })),
428429
},
429-
};
430+
});
430431

431432
export function onCleanup() {
432433
disposed = true;

0 commit comments

Comments
 (0)