feat: unmigrate number into universal float, inherit step if unset
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 2m1s
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 2m1s
This commit is contained in:
Felix Hungenberg
@@ -1,147 +1,148 @@
|
|||||||
<script lang="ts" module>
|
<script lang="ts" module>
|
||||||
let result:
|
let result:
|
||||||
| { stdev: number; avg: number; duration: number; samples: number[] }
|
| { stdev: number; avg: number; duration: number; samples: number[] }
|
||||||
| undefined = $state();
|
| undefined = $state();
|
||||||
</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 = {
|
||||||
run: () => Promise<any>;
|
run: () => Promise<any>;
|
||||||
};
|
};
|
||||||
|
|
||||||
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);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
async function benchmark() {
|
async function benchmark() {
|
||||||
if (isRunning) return;
|
if (isRunning) return;
|
||||||
isRunning = true;
|
isRunning = true;
|
||||||
result = undefined;
|
result = undefined;
|
||||||
samples = 0;
|
samples = 0;
|
||||||
$warmUp = 0;
|
$warmUp = 0;
|
||||||
|
|
||||||
await new Promise((r) => setTimeout(r, 50));
|
await new Promise((r) => setTimeout(r, 50));
|
||||||
|
|
||||||
// warm up
|
// warm up
|
||||||
for (let i = 0; i < warmUpAmount; i++) {
|
for (let i = 0; i < warmUpAmount; i++) {
|
||||||
await run();
|
await run();
|
||||||
$warmUp = i + 1;
|
$warmUp = i + 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
let a = performance.now();
|
let a = performance.now();
|
||||||
let results = [];
|
let results = [];
|
||||||
|
|
||||||
// perform run
|
// perform run
|
||||||
for (let i = 0; i < amount.value; i++) {
|
for (let i = 0; i < amount.value; i++) {
|
||||||
const a = performance.now();
|
const a = performance.now();
|
||||||
await run();
|
await run();
|
||||||
samples = i;
|
samples = i;
|
||||||
const b = performance.now();
|
const b = performance.now();
|
||||||
await new Promise((r) => setTimeout(r, 20));
|
await new Promise((r) => setTimeout(r, 20));
|
||||||
results.push(b - a);
|
results.push(b - a);
|
||||||
}
|
}
|
||||||
result = {
|
result = {
|
||||||
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>
|
||||||
|
|
||||||
{status}
|
{status}
|
||||||
|
|
||||||
<div class="wrapper" class:running={isRunning}>
|
<div class="wrapper" class:running={isRunning}>
|
||||||
{#if result}
|
{#if result}
|
||||||
<h3>Finished ({humanizeDuration(result.duration)})</h3>
|
<h3>Finished ({humanizeDuration(result.duration)})</h3>
|
||||||
<div class="monitor-wrapper">
|
<div class="monitor-wrapper">
|
||||||
<Monitor points={result.samples} />
|
<Monitor points={result.samples} />
|
||||||
</div>
|
</div>
|
||||||
<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}
|
||||||
<i
|
</button>
|
||||||
role="button"
|
<i
|
||||||
tabindex="0"
|
role="button"
|
||||||
onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
|
tabindex="0"
|
||||||
onclick={() => copyContent(result?.avg)}>(click to copy)</i
|
onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
|
||||||
>
|
onclick={() => copyContent(result?.avg)}
|
||||||
<label for="bench-stdev">Standard Deviation σ</label>
|
>(click to copy)</i>
|
||||||
<button id="bench-stdev" onclick={() => copyContent(result?.stdev)}
|
<label for="bench-stdev">Standard Deviation σ</label>
|
||||||
>{Math.floor(result.stdev * 100) / 100}</button
|
<button id="bench-stdev" onclick={() => copyContent(result?.stdev)}>
|
||||||
>
|
{Math.floor(result.stdev * 100) / 100}
|
||||||
<i
|
</button>
|
||||||
role="button"
|
<i
|
||||||
tabindex="0"
|
role="button"
|
||||||
onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
|
tabindex="0"
|
||||||
onclick={() => copyContent(result?.stdev + "")}>(click to copy)</i
|
onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
|
||||||
>
|
onclick={() => copyContent(result?.stdev + '')}
|
||||||
<div>
|
>(click to copy)</i>
|
||||||
<button onclick={() => (isRunning = false)}>reset</button>
|
<div>
|
||||||
</div>
|
<button onclick={() => (isRunning = false)}>reset</button>
|
||||||
{:else if isRunning}
|
</div>
|
||||||
<p>WarmUp ({$warmUp}/{warmUpAmount})</p>
|
{:else if isRunning}
|
||||||
<progress value={$warmUp} max={warmUpAmount}
|
<p>WarmUp ({$warmUp}/{warmUpAmount})</p>
|
||||||
>{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress
|
<progress value={$warmUp} max={warmUpAmount}>
|
||||||
>
|
{Math.floor(($warmUp / warmUpAmount) * 100)}%
|
||||||
<p>Progress ({samples}/{amount.value})</p>
|
</progress>
|
||||||
<progress value={samples} max={amount.value}
|
<p>Progress ({samples}/{amount.value})</p>
|
||||||
>{Math.floor((samples / amount.value) * 100)}%</progress
|
<progress value={samples} max={amount.value}>
|
||||||
>
|
{Math.floor((samples / amount.value) * 100)}%
|
||||||
{:else}
|
</progress>
|
||||||
<label for="bench-samples">Samples</label>
|
{:else}
|
||||||
<Number id="bench-sample" bind:value={amount.value} max={1000} />
|
<label for="bench-samples">Samples</label>
|
||||||
<button onclick={benchmark} disabled={isRunning}> start </button>
|
<Number id="bench-sample" bind:value={amount.value} max={1000} />
|
||||||
{/if}
|
<button onclick={benchmark} disabled={isRunning}>start</button>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.wrapper {
|
.wrapper {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
.monitor-wrapper {
|
.monitor-wrapper {
|
||||||
border: solid thin var(--outline);
|
border: solid thin var(--outline);
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
i {
|
i {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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'}
|
||||||
|
|||||||
@@ -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';
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -1,210 +1,215 @@
|
|||||||
|
<!--
|
||||||
|
@component
|
||||||
|
@deprecated use Float.svelte
|
||||||
|
-->
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
interface Props {
|
interface Props {
|
||||||
value?: number;
|
value?: number;
|
||||||
step?: number;
|
step?: number;
|
||||||
min?: number | undefined;
|
min?: number | undefined;
|
||||||
max?: number | undefined;
|
max?: number | undefined;
|
||||||
id?: string;
|
id?: string;
|
||||||
change?: (arg: number) => void;
|
change?: (arg: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
value = $bindable(0),
|
value = $bindable(0),
|
||||||
step = 1,
|
step = 1,
|
||||||
min = $bindable(0),
|
min = $bindable(0),
|
||||||
max = $bindable(1),
|
max = $bindable(1),
|
||||||
id,
|
id,
|
||||||
change
|
change
|
||||||
}: Props = $props();
|
}: Props = $props();
|
||||||
|
|
||||||
if (min > max) {
|
if (min > max) {
|
||||||
[min, max] = [max, min];
|
[min, max] = [max, min];
|
||||||
}
|
}
|
||||||
if (value > max) {
|
if (value > max) {
|
||||||
max = value;
|
max = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
function strip(input: number) {
|
function strip(input: number) {
|
||||||
return +parseFloat(input + '').toPrecision(2);
|
return +parseFloat(input + '').toPrecision(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
let inputEl = $state() as HTMLInputElement;
|
let inputEl = $state() as HTMLInputElement;
|
||||||
let wrapper = $state() as HTMLDivElement;
|
let wrapper = $state() as HTMLDivElement;
|
||||||
|
|
||||||
let prev = -1;
|
let prev = -1;
|
||||||
function update() {
|
function update() {
|
||||||
if (prev === value) return;
|
if (prev === value) return;
|
||||||
prev = value;
|
prev = value;
|
||||||
change?.(value);
|
change?.(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleChange(change: number) {
|
function handleChange(change: number) {
|
||||||
value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
|
value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
|
||||||
}
|
}
|
||||||
|
|
||||||
let isMouseDown = $state(false);
|
let isMouseDown = $state(false);
|
||||||
let downX = 0;
|
let downX = 0;
|
||||||
let downV = 0;
|
let downV = 0;
|
||||||
let rect: DOMRect;
|
let rect: DOMRect;
|
||||||
|
|
||||||
function handleMouseDown(ev: MouseEvent) {
|
function handleMouseDown(ev: MouseEvent) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
|
|
||||||
downV = value;
|
downV = value;
|
||||||
downX = ev.clientX;
|
downX = ev.clientX;
|
||||||
rect = wrapper.getBoundingClientRect();
|
rect = wrapper.getBoundingClientRect();
|
||||||
|
|
||||||
window.removeEventListener('mousemove', handleMouseMove);
|
window.removeEventListener('mousemove', handleMouseMove);
|
||||||
window.addEventListener('mousemove', handleMouseMove);
|
window.addEventListener('mousemove', handleMouseMove);
|
||||||
window.addEventListener('mouseup', handleMouseUp);
|
window.addEventListener('mouseup', handleMouseUp);
|
||||||
document.body.style.cursor = 'ew-resize';
|
document.body.style.cursor = 'ew-resize';
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleMouseUp() {
|
function handleMouseUp() {
|
||||||
if (downV === value) {
|
if (downV === value) {
|
||||||
inputEl.focus();
|
inputEl.focus();
|
||||||
} else {
|
} else {
|
||||||
inputEl.blur();
|
inputEl.blur();
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.style.cursor = 'unset';
|
document.body.style.cursor = 'unset';
|
||||||
window.removeEventListener('mouseup', handleMouseUp);
|
window.removeEventListener('mouseup', handleMouseUp);
|
||||||
window.removeEventListener('mousemove', handleMouseMove);
|
window.removeEventListener('mousemove', handleMouseMove);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleKeyDown(ev: KeyboardEvent) {
|
function handleKeyDown(ev: KeyboardEvent) {
|
||||||
if (ev.key === 'Escape' || ev.key === 'Enter') {
|
if (ev.key === 'Escape' || ev.key === 'Enter') {
|
||||||
handleMouseUp();
|
handleMouseUp();
|
||||||
inputEl?.blur();
|
inputEl?.blur();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleMouseMove(ev: MouseEvent) {
|
function handleMouseMove(ev: MouseEvent) {
|
||||||
if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
|
if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
|
||||||
const vx = (ev.clientX - rect.left) / rect.width;
|
const vx = (ev.clientX - rect.left) / rect.width;
|
||||||
value = Math.max(Math.min(Math.round(min + (max - min) * vx), max), min);
|
value = Math.max(Math.min(Math.round(min + (max - min) * vx), max), min);
|
||||||
} else {
|
} else {
|
||||||
const vx = ev.clientX - downX;
|
const vx = ev.clientX - downX;
|
||||||
value = downV + Math.round(vx / 10);
|
value = downV + Math.round(vx / 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if ((value || 0).toString().length > 5) {
|
if ((value || 0).toString().length > 5) {
|
||||||
value = strip(value || 0);
|
value = strip(value || 0);
|
||||||
}
|
}
|
||||||
value !== undefined && update();
|
value !== undefined && update();
|
||||||
});
|
});
|
||||||
|
|
||||||
let width = $derived(
|
let width = $derived(
|
||||||
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
|
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="component-wrapper"
|
class="component-wrapper"
|
||||||
bind:this={wrapper}
|
bind:this={wrapper}
|
||||||
class:is-down={isMouseDown}
|
class:is-down={isMouseDown}
|
||||||
role="slider"
|
role="slider"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
aria-valuenow={value}
|
aria-valuenow={value}
|
||||||
onkeydown={handleKeyDown}
|
onkeydown={handleKeyDown}
|
||||||
onmousedown={handleMouseDown}
|
onmousedown={handleMouseDown}
|
||||||
onmouseup={handleMouseUp}
|
onmouseup={handleMouseUp}
|
||||||
>
|
>
|
||||||
<button onclick={() => handleChange(-step)}>-</button>
|
<button onclick={() => handleChange(-step)}>-</button>
|
||||||
<input
|
<input
|
||||||
bind:value
|
bind:value
|
||||||
bind:this={inputEl}
|
bind:this={inputEl}
|
||||||
{id}
|
{id}
|
||||||
{step}
|
{step}
|
||||||
{max}
|
{max}
|
||||||
{min}
|
{min}
|
||||||
type="number"
|
type="number"
|
||||||
style={`width:${width};`}
|
style={`width:${width};`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<button onclick={() => handleChange(+step)}>+</button>
|
<button onclick={() => handleChange(+step)}>+</button>
|
||||||
{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
|
{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
|
||||||
<span
|
<span
|
||||||
class="overlay"
|
class="overlay"
|
||||||
style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
|
style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
|
||||||
></span>
|
></span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.component-wrapper {
|
.component-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: var(--layer-2, #4b4b4b);
|
background-color: var(--layer-2, #4b4b4b);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: box-shadow 0.3s ease;
|
transition: box-shadow 0.3s ease;
|
||||||
outline: solid 1px var(--outline);
|
outline: solid 1px var(--outline);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
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"] {
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
appearance: textfield;
|
appearance: textfield;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: var(--padding, 6px);
|
padding: var(--padding, 6px);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
padding-inline: 10px;
|
padding-inline: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: none;
|
border: none;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 72%;
|
width: 72%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-down > input {
|
.is-down > input {
|
||||||
cursor: ew-resize !important;
|
cursor: ew-resize !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--layer-3);
|
background-color: var(--layer-3);
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-down > .overlay {
|
.is-down > .overlay {
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 0px;
|
line-height: 0px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
margin-inline: 6px;
|
margin-inline: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div input[type="number"] {
|
div input[type="number"] {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: var(--padding, 6px);
|
padding: var(--padding, 6px);
|
||||||
padding-inline: 0px;
|
padding-inline: 0px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: none;
|
border: none;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user