max/nodarium
1
0
Fork 0
Code Issues 12 Pull Requests 2 Actions Packages Projects Releases 3 Wiki Activity

feat: unmigrate number into universal float, inherit step if unset
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 2m1s
Details

Browse Source
This commit is contained in:
Felix Hungenberg
2026-01-22 23:57:56 +01:00
parent 8c1ba2ee65
commit 5570d975f5
8 changed files with 345 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/src/lib/sidebar/panels/BenchmarkPanel.svelte
View File

@@ -5,17 +5,17 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { humanizeDuration } from "$lib/helpers"; import { humanizeDuration } from '$lib/helpers';
import { localState } from "$lib/helpers/localState.svelte"; import { localState } from '$lib/helpers/localState.svelte';
import Monitor from "$lib/performance/Monitor.svelte"; import Monitor from '$lib/performance/Monitor.svelte';
import { Number } from "@nodarium/ui"; import { Number } from '@nodarium/ui';
import { writable } from "svelte/store"; import { writable } from 'svelte/store';
function calculateStandardDeviation(array: number[]) { function calculateStandardDeviation(array: number[]) {
const n = array.length; const n = array.length;
const mean = array.reduce((a, b) => a + b) / n; const mean = array.reduce((a, b) => a + b) / n;
return Math.sqrt( return Math.sqrt(
array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n, array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n
); );
} }
type Props = { type Props = {
@@ -25,21 +25,21 @@
const { run }: Props = $props(); const { run }: Props = $props();
let isRunning = $state(false); let isRunning = $state(false);
let amount = localState<number>("nodes.benchmark.samples", 500); let amount = localState<number>('nodes.benchmark.samples', 500);
let samples = $state(0); let samples = $state(0);
let warmUp = writable(0); let warmUp = writable(0);
let warmUpAmount = 10; let warmUpAmount = 10;
let status = ""; let status = '';
const copyContent = async (text?: string | number) => { const copyContent = async (text?: string | number) => {
if (!text) return; if (!text) return;
if (typeof text !== "string") { if (typeof text !== 'string') {
text = (Math.floor(text * 100) / 100).toString(); text = (Math.floor(text * 100) / 100).toString();
} }
try { try {
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(text);
} catch (err) { } catch (err) {
console.error("Failed to copy: ", err); console.error('Failed to copy: ', err);
} }
}; };
@@ -74,7 +74,7 @@
stdev: calculateStandardDeviation(results), stdev: calculateStandardDeviation(results),
samples: results, samples: results,
duration: performance.now() - a, duration: performance.now() - a,
avg: results.reduce((a, b) => a + b) / results.length, avg: results.reduce((a, b) => a + b) / results.length
}; };
} }
</script> </script>
@@ -90,38 +90,39 @@
<label for="bench-avg">Average </label> <label for="bench-avg">Average </label>
<button <button
id="bench-avg" id="bench-avg"
onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)} onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
onclick={() => copyContent(result?.avg)} onclick={() => copyContent(result?.avg)}
>{Math.floor(result.avg * 100) / 100}</button
> >
{Math.floor(result.avg * 100) / 100}
</button>
<i <i
role="button" role="button"
tabindex="0" tabindex="0"
onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)} onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
onclick={() => copyContent(result?.avg)}>(click to copy)</i onclick={() => copyContent(result?.avg)}
> >(click to copy)</i>
<label for="bench-stdev">Standard Deviation σ</label> <label for="bench-stdev">Standard Deviation σ</label>
<button id="bench-stdev" onclick={() => copyContent(result?.stdev)} <button id="bench-stdev" onclick={() => copyContent(result?.stdev)}>
>{Math.floor(result.stdev * 100) / 100}</button {Math.floor(result.stdev * 100) / 100}
> </button>
<i <i
role="button" role="button"
tabindex="0" tabindex="0"
onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)} onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
onclick={() => copyContent(result?.stdev + "")}>(click to copy)</i onclick={() => copyContent(result?.stdev + '')}
> >(click to copy)</i>
<div> <div>
<button onclick={() => (isRunning = false)}>reset</button> <button onclick={() => (isRunning = false)}>reset</button>
</div> </div>
{:else if isRunning} {:else if isRunning}
<p>WarmUp ({$warmUp}/{warmUpAmount})</p> <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
<progress value={$warmUp} max={warmUpAmount} <progress value={$warmUp} max={warmUpAmount}>
>{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress {Math.floor(($warmUp / warmUpAmount) * 100)}%
> </progress>
<p>Progress ({samples}/{amount.value})</p> <p>Progress ({samples}/{amount.value})</p>
<progress value={samples} max={amount.value} <progress value={samples} max={amount.value}>
>{Math.floor((samples / amount.value) * 100)}%</progress {Math.floor((samples / amount.value) * 100)}%
> </progress>
{:else} {:else}
<label for="bench-samples">Samples</label> <label for="bench-samples">Samples</label>
<Number id="bench-sample" bind:value={amount.value} max={1000} /> <Number id="bench-sample" bind:value={amount.value} max={1000} />

7
packages/ui/src/lib/Input.svelte
View File

@@ -1,10 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { NodeInput } from '@nodarium/types'; import type { NodeInput } from '@nodarium/types';
import Checkbox from './inputs/Checkbox.svelte'; import { Checkbox, Number, Select, Vec3 } from './index.js';
import Number from './inputs/Number.svelte';
import Select from './inputs/Select.svelte';
import Vec3 from './inputs/Vec3.svelte';
interface Props { interface Props {
input: NodeInput; input: NodeInput;
@@ -16,7 +13,7 @@
</script> </script>
{#if input.type === 'float'} {#if input.type === 'float'}
<Number bind:value min={input?.min} max={input?.max} step={0.01} /> <Number bind:value min={input?.min} max={input?.max} step={input?.step} />
{:else if input.type === 'integer'} {:else if input.type === 'integer'}
<Number bind:value min={input?.min} max={input?.max} /> <Number bind:value min={input?.min} max={input?.max} />
{:else if input.type === 'boolean'} {:else if input.type === 'boolean'}

3
packages/ui/src/lib/index.ts
View File

@@ -1,8 +1,7 @@
export { default as Input } from './Input.svelte'; export { default as Input } from './Input.svelte';
export { default as Checkbox } from './inputs/Checkbox.svelte'; export { default as Checkbox } from './inputs/Checkbox.svelte';
export { default as Float } from './inputs/Float.svelte'; export { default as Float, default as Number } from './inputs/Float.svelte';
export { default as Integer } from './inputs/Integer.svelte'; export { default as Integer } from './inputs/Integer.svelte';
export { default as Number } from './inputs/Number.svelte';
export { default as Select } from './inputs/Select.svelte'; export { default as Select } from './inputs/Select.svelte';
export { default as Vec3 } from './inputs/Vec3.svelte'; export { default as Vec3 } from './inputs/Vec3.svelte';

27
packages/ui/src/lib/inputs/Float.svelte
View File

@@ -9,7 +9,7 @@
let { let {
value = $bindable(0.5), value = $bindable(0.5),
step = 0.01, step,
min = $bindable(0), min = $bindable(0),
max = $bindable(1), max = $bindable(1),
id id
@@ -22,8 +22,11 @@
max = value; max = value;
} }
// svelte-ignore state_referenced_locally only use initial values
const precision = ((step || value).toString().split('.')[1] || '').length;
function strip(input: number) { function strip(input: number) {
return +parseFloat(input + '').toPrecision(2); return +parseFloat(input + '').toFixed(precision);
} }
let inputEl: HTMLInputElement | undefined = $state(); let inputEl: HTMLInputElement | undefined = $state();
@@ -94,14 +97,22 @@
} else { } else {
value = Math.max(Math.min(min + (max - min) * vx, max), min); value = Math.max(Math.min(min + (max - min) * vx, max), min);
} }
(ev.target as HTMLElement)?.blur();
value = strip(value);
// With ctrl + outside of input ev.target becomes HTMLDocument
if (ev.target instanceof HTMLElement) {
ev.target?.blur();
} }
}
$effect(() => { $effect(() => {
if ((value || 0).toString().length > 5) { if (value.toString().length > 5) {
value = strip(value || 0); value = strip(value);
} }
value !== undefined && handleChange(); value !== undefined && handleChange();
}); });
let width = $derived( let width = $derived(
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px' : '20px' Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px' : '20px'
); );
@@ -137,12 +148,12 @@
border-radius: var(--border-radius, 2px); border-radius: var(--border-radius, 2px);
} }
input[type='number']::-webkit-inner-spin-button, input[type="number"]::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
input[type='number'] { input[type="number"] {
box-sizing: border-box; box-sizing: border-box;
-webkit-appearance: textfield; -webkit-appearance: textfield;
-moz-appearance: textfield; -moz-appearance: textfield;

5
packages/ui/src/lib/inputs/Integer.svelte
View File

@@ -1,3 +1,8 @@
<!--
@component
@deprecated use Float.svelte
-->
<script lang="ts"> <script lang="ts">
interface Props { interface Props {
value?: number; value?: number;

177
packages/ui/src/lib/inputs/Number.svelte
View File

@@ -1,177 +0,0 @@
<script lang="ts">
interface Props {
value?: number;
step?: number;
min?: number;
max?: number;
id?: string;
}
let {
value = $bindable(1),
step = 1,
min = $bindable(0),
max = $bindable(1),
id: _id
}: Props = $props();
const uid = $props.id();
const id = $derived(_id || uid);
if (min > max) {
[min, max] = [max, min];
}
if (value > max) {
max = value;
}
function strip(input: number) {
return +parseFloat(input + '').toPrecision(2);
}
let inputEl = $state() as HTMLInputElement;
let prev = -1;
function update() {
if (prev === value) return;
if (value.toString().length > 5) {
value = strip(value);
}
prev = value;
}
function handleChange(change: number) {
value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
}
function handleKeyDown(ev: KeyboardEvent) {
if (ev.key === 'Escape' || ev.key === 'Enter') {
inputEl?.blur();
}
}
$effect(() => {
update();
});
let ratio = $derived(((value - min) / (max - min)) * 100);
</script>
<div>
<div class="component-wrapper">
<button onclick={() => handleChange(-step)}>-</button>
<input
bind:value
bind:this={inputEl}
{id}
{step}
{max}
{min}
type="number"
onkeydown={handleKeyDown}
/>
<button onclick={() => handleChange(+step)}>+</button>
</div>
<div class="slider">
<input
type="range"
bind:value
{min}
{max}
{step}
style={`background: linear-gradient(90deg, var(--text-color) ${ratio}%, var(--layer-2, #4b4b4b) ${ratio}%)`}
/>
</div>
</div>
<style>
:root {
--slider-height: 4px;
}
.component-wrapper {
display: flex;
background-color: var(--layer-2, #4b4b4b);
user-select: none;
transition: box-shadow 0.3s ease;
border: solid 1px var(--outline);
overflow: hidden;
border-radius: 0 var(--border-radius, 2px); /* only top */
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type='number'] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
cursor: pointer;
font-family: var(--font-family);
font-variant-numeric: tabular-nums;
color: var(--text-color);
background-color: transparent;
padding: var(--padding, 6px);
font-size: 1em;
padding-inline: 10px;
text-align: center;
border: none;
border-style: none;
flex: 1;
width: 72%;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
line-height: 0px;
margin: 0;
color: var(--text-color);
margin-inline: 6px;
}
div input[type='number'] {
color: var(--text-color);
background-color: transparent;
padding: var(--padding, 6px);
padding-inline: 0px;
text-align: center;
border: none;
border-style: none;
}
.slider {
position: relative;
margin-top: -1px; /* hide edge */
}
input[type='range'] {
position: absolute;
appearance: none;
width: 100%;
height: var(--slider-height);
background: var(--layer-2, #4b4b4b);
cursor: pointer;
}
/* Thumb: for Chrome, Safari, Edge */
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: var(--slider-height);
background: var(--text-color);
box-shadow: none;
}
/* Thumb: for Firefox */
input[type='range']::-moz-range-thumb {
border: none;
width: 12px;
height: var(--slider-height);
background: var(--text-color);
box-shadow: none;
}
</style>

2
packages/ui/src/lib/inputs/Vec3.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import Number from './Number.svelte'; import { Number } from '$lib/index.js';
interface Props { interface Props {
value?: any; value?: any;

26
packages/ui/src/routes/+page.svelte
View File

@@ -1,10 +1,12 @@
<script lang="ts"> <script lang="ts">
import '$lib/app.css'; import '$lib/app.css';
import { Checkbox, Details, Float, Integer, Number, Select, ShortCut, Vec3 } from '$lib/index.js'; import { Checkbox, Details, Number, Select, ShortCut, Vec3 } from '$lib/index.js';
import Section from './Section.svelte'; import Section from './Section.svelte';
let intValue = $state(0); let intValue = $state(0);
let floatValue = $state(0.2); let floatValue = $state(0.2);
let float2Value = $state(0.02);
let float3Value = $state(1);
let vecValue = $state([0.2, 0.3, 0.4]); let vecValue = $state([0.2, 0.3, 0.4]);
const options = ['strawberry', 'raspberry', 'chickpeas']; const options = ['strawberry', 'raspberry', 'chickpeas'];
let selectValue = $state(0); let selectValue = $state(0);
@@ -30,22 +32,22 @@
<Select bind:value={themeIndex} options={themes}></Select> <Select bind:value={themeIndex} options={themes}></Select>
</div> </div>
<Section title="Integer" value={intValue}> <Section title="Integer (step inherit)" value={intValue}>
<Integer bind:value={intValue} /> <Number bind:value={intValue} max={2} />
</Section> </Section>
<Section title="Float" value={floatValue}> <Section title="Float (step inherit)" value={floatValue}>
<Float bind:value={floatValue} />
</Section>
<Section title="Number" value={intValue}>
<Number bind:value={intValue} />
</Section>
<Section title="Number (float)" value={floatValue}>
<Number bind:value={floatValue} /> <Number bind:value={floatValue} />
</Section> </Section>
<Section title="Float 2 (step inherit)" value={intValue}>
<Number bind:value={float2Value} />
</Section>
<Section title="Float (0.01 step)" value={floatValue}>
<Number bind:value={float3Value} step={0.01} max={3} />
</Section>
<Section title="Vec3" value={JSON.stringify(vecValue)}> <Section title="Vec3" value={JSON.stringify(vecValue)}>
<Vec3 bind:value={vecValue} /> <Vec3 bind:value={vecValue} />
</Section> </Section>