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

Merge remote-tracking branch 'origin/main' into feat/remove-wasm-bindgen

Browse Source
This commit is contained in:
max_richter
2026-01-20 18:04:56 +01:00
parent 1ea7d6629f 8693c63d16
commit bd0c2eaacd
31 changed files with 1450 additions and 2128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/ui/package.json
View File

@@ -2,7 +2,7 @@
"name": "@nodarium/ui",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"dev": "chokidar './src/**' --initial -c 'pnpm build'",
"build": "vite build && npm run package",
"preview": "vite preview",
"package": "svelte-kit sync && svelte-package && publint",
@@ -37,6 +37,7 @@
"@types/three": "^0.182.0",
"@typescript-eslint/eslint-plugin": "^8.53.0",
"@typescript-eslint/parser": "^8.53.0",
"chokidar-cli": "^3.0.0",
"eslint": "^9.39.2",
"eslint-plugin-svelte": "^3.14.0",
"publint": "^0.3.16",

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

@@ -1,28 +1,28 @@
<script lang="ts">
import Checkbox from './inputs/Checkbox.svelte';
import Float from './inputs/Float.svelte';
import Integer from './inputs/Integer.svelte';
import Select from './inputs/Select.svelte';
import type { NodeInput } from '@nodarium/types';
import Checkbox from './inputs/Checkbox.svelte';
import Number from './inputs/Number.svelte';
import Select from './inputs/Select.svelte';
import Vec3 from './inputs/Vec3.svelte';
interface Props {
input: NodeInput;
value: any;
id?: string;
}
let { input, value = $bindable() }: Props = $props();
let { input, value = $bindable(), id }: Props = $props();
</script>
{#if input.type === 'float'}
<Float bind:value min={input?.min} max={input?.max} />
<Number bind:value min={input?.min} max={input?.max} step={0.01} />
{:else if input.type === 'integer'}
<Integer bind:value min={input?.min} max={input?.max} />
<Number bind:value min={input?.min} max={input?.max} />
{:else if input.type === 'boolean'}
<Checkbox bind:value />
<Checkbox bind:value {id} />
{:else if input.type === 'select'}
<Select bind:value options={input.options} />
<Select bind:value options={input.options} {id} />
{:else if input.type === 'vec3'}
<Vec3 bind:value />
<Vec3 bind:value {id} />
{/if}

4
packages/ui/src/lib/inputs/Checkbox.svelte
View File

@@ -1,9 +1,10 @@
<script lang="ts">
interface Props {
value: boolean;
id?: string;
}
let { value = $bindable(false) }: Props = $props();
let { value = $bindable(false), id }: Props = $props();
$effect(() => {
if (typeof value === 'string') {
@@ -23,6 +24,7 @@
type="checkbox"
bind:checked={value}
class="peer absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
{id}
/>
<span
class="absolute opacity-0 peer-checked:opacity-100 transition-opacity duration-100 flex w-full h-full items-center justify-center"

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

@@ -4,13 +4,15 @@
step?: number;
min?: number;
max?: number;
id?: string;
}
let {
value = $bindable(0.5),
step = 0.01,
min = $bindable(0),
max = $bindable(1)
max = $bindable(1),
id
}: Props = $props();
if (min > max) {
@@ -110,6 +112,7 @@
<input
bind:value
bind:this={inputEl}
{id}
{step}
{max}
{min}

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

@@ -1,41 +1,48 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
interface Props {
value?: number;
step?: number;
min?: number | undefined;
max?: number | undefined;
step?: number;
value?: number;
id?: string;
change?: (arg: number) => void;
}
let {
min = undefined,
max = undefined,
step = 1,
value = $bindable(0),
id = ''
step = 1,
min = $bindable(0),
max = $bindable(1),
id,
change
}: Props = $props();
if (!value) {
value = 0;
if (min > max) {
[min, max] = [max, min];
}
if (value > max) {
max = value;
}
let inputEl: HTMLInputElement | undefined = $state();
let wrapper: HTMLDivElement | undefined = $state();
function strip(input: number) {
return +parseFloat(input + '').toPrecision(2);
}
let inputEl = $state() as HTMLInputElement;
let wrapper = $state() as HTMLDivElement;
let prev = -1;
function update() {
if (prev === value) return;
prev = value;
dispatch('change', parseFloat(value + ''));
change?.(value);
}
function handleChange(change: number) {
value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
}
let isMouseDown = $state(false);
let downX = 0;
let downV = 0;
let rect: DOMRect;
@@ -65,6 +72,13 @@
window.removeEventListener('mousemove', handleMouseMove);
}
function handleKeyDown(ev: KeyboardEvent) {
if (ev.key === 'Escape' || ev.key === 'Enter') {
handleMouseUp();
inputEl?.blur();
}
}
function handleMouseMove(ev: MouseEvent) {
if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
const vx = (ev.clientX - rect.left) / rect.width;
@@ -76,8 +90,12 @@
}
$effect(() => {
if ((value || 0).toString().length > 5) {
value = strip(value || 0);
}
value !== undefined && update();
});
let width = $derived(
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
);
@@ -86,29 +104,33 @@
<div
class="component-wrapper"
bind:this={wrapper}
class:is-down={isMouseDown}
role="slider"
tabindex="0"
aria-valuenow={value}
onkeydown={handleKeyDown}
onmousedown={handleMouseDown}
onmouseup={handleMouseUp}
>
<div class="">
<button onclick={() => handleChange(-step)}>-</button>
<input
bind:value
bind:this={inputEl}
{id}
{step}
{max}
{min}
type="number"
style={`width:${width};`}
/>
<button onclick={() => handleChange(+step)}>+</button>
</div>
{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
></span>
{/if}
<button onclick={() => handleChange(-step)}>-</button>
<input
bind:value
bind:this={inputEl}
{id}
{step}
{max}
{min}
type="number"
style={`width:${width};`}
/>
<button onclick={() => handleChange(+step)}>+</button>
</div>
<style>
@@ -124,21 +146,32 @@
border-radius: var(--border-radius, 2px);
}
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-size: 1em;
font-family: var(--font-family);
padding-top: 8px;
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%;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
.is-down > input {
cursor: ew-resize !important;
}
.overlay {
@@ -151,6 +184,10 @@
pointer-events: none;
}
.is-down > .overlay {
transition: none !important;
}
button {
background-color: transparent;
border: none;

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

@@ -0,0 +1,177 @@
<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>