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

fix: gravity node
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 2m35s
Details

Browse Source
This commit is contained in:
max_richter
2024-05-02 18:49:08 +02:00
parent dca4469f55
commit 26d3f6a2f1
31 changed files with 1557 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ui/histoire.config.ts Normal file
View File

@ -0,0 +1,12 @@
import { defineConfig } from 'histoire'
import { HstSvelte } from '@histoire/plugin-svelte'
export default defineConfig({
setupFile: '/src/histoire.setup.ts',
storyMatch: [
'./src/lib/**/*.story.svelte',
],
plugins: [
HstSvelte(),
],
})

56
packages/ui/package.json
View File

@ -9,8 +9,11 @@
"prepublishOnly": "npm run package",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
"test": "vitest",
"lint": "eslint .",
"story:dev": "histoire dev",
"story:build": "histoire build",
"story:preview": "histoire preview"
},
"exports": {
".": {
@ -24,35 +27,36 @@
"!dist/**/*.test.*",
"!dist/**/*.spec.*"
],
"dependencies": {
"@nodes/types": "link:../types"
},
"peerDependencies": {
"svelte": "^5.0.0-next.1"
"svelte": "^4.0.0"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@histoire/plugin-svelte": "^0.17.17",
"@sveltejs/adapter-auto": "^3.2.0",
"@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/package": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^8.56.0",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.36.0-next.4",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"publint": "^0.1.9",
"svelte": "^5.0.0-next.1",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.11",
"vitest": "^1.5.3"
"@sveltejs/kit": "^2.5.7",
"@sveltejs/package": "^2.3.1",
"@sveltejs/vite-plugin-svelte": "^3.1.0",
"@types/eslint": "^8.56.10",
"@typescript-eslint/eslint-plugin": "^7.7.1",
"@typescript-eslint/parser": "^7.7.1",
"eslint": "^9.1.1",
"eslint-plugin-svelte": "^2.38.0",
"histoire": "^0.17.17",
"publint": "^0.2.7",
"svelte": "^4.2.15",
"svelte-check": "^3.7.0",
"tslib": "^2.6.2",
"typescript": "^5.4.5",
"vite": "^5.2.10",
"vitest": "^1.5.2"
},
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
"type": "module"
"type": "module",
"dependencies": {
"@nodes/types": "link:../types",
"@threlte/core": "^7.3.0",
"@threlte/extras": "^8.11.2"
}
}

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

@ -10,21 +10,6 @@
export let input: NodeInput;
export let value: any;
export let id: string;
$: if (value === undefined || value === null) {
switch (input.type) {
case 'float':
value = 0;
case 'integer':
value = 0;
case 'boolean':
value = false;
case 'select':
value = 0;
case 'vec3':
value = [0, 0, 0];
}
}
</script>
{#if input.type === 'float'}
@ -34,7 +19,8 @@
{:else if input.type === 'boolean'}
<Checkbox {id} bind:value />
{:else if input.type === 'select'}
<Select {id} bind:value options={input?.options || []} />
<Select {id} bind:value options={input.options} />
{:else if input.type === 'vec3'}
<Vec3 {id} bind:value />
{/if}

1
packages/ui/src/lib/elements/Checkbox.svelte
View File

@ -94,3 +94,4 @@
display: block;
}
</style>

17
packages/ui/src/lib/elements/Float.story.svelte Normal file
View File

@ -0,0 +1,17 @@
<script lang="ts">
import type { Hst } from '@histoire/plugin-svelte';
export let Hst: Hst;
import Float from './Float.svelte';
import StoryContent from '$lib/helpers/StoryContent.svelte';
import StorySettings from '$lib/helpers/StorySettings.svelte';
let theme = 'dark';
</script>
<Hst.Story>
<StoryContent {theme}>
<Float value={0} min={0} max={6.9} />
</StoryContent>
<svelte:fragment slot="controls">
<StorySettings bind:theme />
</svelte:fragment>
</Hst.Story>

52
packages/ui/src/lib/elements/Float.svelte
View File

@ -1,19 +1,9 @@
<script lang="ts">
let {
onchange,
value = $bindable(0),
id,
step = 0.01,
min = 0,
max = 1
}: {
onchange?: (num: number) => void;
value?: number;
id?: string;
step?: number;
min?: number;
max?: number;
} = $props();
export let value = 0.5;
export let step = 0.01;
export let min = 0;
export let max = 1;
export let id = '';
if (min > max) {
[min, max] = [max, min];
@ -28,28 +18,21 @@
let inputEl: HTMLInputElement;
$effect(() => {
if ((value || 0).toString().length > 5) {
value = strip(value || 0);
}
});
$effect(() => {
if (value !== undefined) handleChange();
});
$: if ((value || 0).toString().length > 5) {
value = strip(value || 0);
}
$: value !== undefined && handleChange();
let oldValue: number;
function handleChange() {
if (value === oldValue) return;
oldValue = value;
onchange?.(value);
}
let width = $derived(
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px' : '20px'
);
$: width = Number.isFinite(value)
? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px'
: '20px';
let isMouseDown = $state(false);
let isMouseDown = false;
let downV = 0;
let vx = 0;
let rect: DOMRect;
@ -57,6 +40,8 @@
function handleMouseDown(ev: MouseEvent) {
ev.preventDefault();
inputEl.focus();
isMouseDown = true;
downV = value;
@ -97,7 +82,6 @@
function handleMouseMove(ev: MouseEvent) {
vx = (ev.clientX - rect.left) / rect.width;
/* vy = ev.clientY - downY; */
if (ev.ctrlKey) {
let v = min + (max - min) * vx;
@ -117,9 +101,9 @@
{step}
{max}
{min}
onkeydown={handleKeyDown}
onmousedown={handleMouseDown}
onmouseup={handleMouseUp}
on:keydown={handleKeyDown}
on:mousedown={handleMouseDown}
on:mouseup={handleMouseUp}
type="number"
style={`width:${width};`}
/>

18
packages/ui/src/lib/elements/Integer.story.svelte Normal file
View File

@ -0,0 +1,18 @@
<script lang="ts">
import type { Hst } from '@histoire/plugin-svelte';
export let Hst: Hst;
import Integer from './Integer.svelte';
import StorySettings from '../helpers/StorySettings.svelte';
import StoryContent from '$lib/helpers/StoryContent.svelte';
let theme = 'dark';
</script>
<Hst.Story>
<StoryContent {theme}>
<Integer value={5} min={0} max={42} />
</StoryContent>
<svelte:fragment slot="controls">
<StorySettings bind:theme />
</svelte:fragment>
</Hst.Story>

50
packages/ui/src/lib/elements/Integer.svelte
View File

@ -1,19 +1,13 @@
<script lang="ts">
let {
min = 0,
max = 10,
step = 1,
value = $bindable(0),
id,
onchange
}: {
min?: number;
max?: number;
step?: number;
value?: number;
id?: string;
onchange?: (num: number) => void;
} = $props();
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
// Styling
export let min: number | undefined = undefined;
export let max: number | undefined = undefined;
export let step = 1;
export let value = 0;
export let id = '';
if (!value) {
value = 0;
@ -21,22 +15,18 @@
let inputEl: HTMLInputElement;
let wrapper: HTMLDivElement;
$effect(() => {
if (value !== undefined) {
update();
}
});
$: value !== undefined && update();
let prev = -1;
function update() {
if (prev === value) return;
prev = value;
onchange?.(value);
dispatch('change', parseFloat(value + ''));
}
let width = $derived(
Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
);
$: width = Number.isFinite(value)
? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px'
: '20px';
function handleChange(change: number) {
value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
@ -88,14 +78,13 @@
role="slider"
tabindex="0"
aria-valuenow={value}
onmousedown={handleMouseDown}
onmouseup={handleMouseUp}
on:mousedown={handleMouseDown}
on:mouseup={handleMouseUp}
>
{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
></span>
<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`} />
{/if}
<button onclick={() => handleChange(-step)}>-</button>
<button on:click={() => handleChange(-step)}>-</button>
<input
bind:value
bind:this={inputEl}
@ -107,7 +96,7 @@
style={`width:${width};`}
/>
<button onclick={() => handleChange(+step)}>+</button>
<button on:click={() => handleChange(+step)}>+</button>
</div>
<style>
@ -170,3 +159,4 @@
border-style: none;
}
</style>

18
packages/ui/src/lib/elements/Select.story.svelte Normal file
View File

@ -0,0 +1,18 @@
<script lang="ts">
import type { Hst } from '@histoire/plugin-svelte';
export let Hst: Hst;
import Select from './Select.svelte';
import StoryContent from '$lib/helpers/StoryContent.svelte';
import StorySettings from '$lib/helpers/StorySettings.svelte';
let theme = 'dark';
</script>
<Hst.Story>
<StoryContent {theme}>
<Select id="" options={['strawberry', 'apple', 'banana']} />
</StoryContent>
<svelte:fragment slot="controls">
<StorySettings bind:theme />
</svelte:fragment>
</Hst.Story>

9
packages/ui/src/lib/elements/Select.svelte
View File

@ -1,9 +1,7 @@
<script lang="ts">
let {
id,
value = $bindable(0),
options
}: { id: string; value: number; options: string[] } = $props();
export let options: string[] = [];
export let value: number = 0;
export let id = '';
</script>
<select {id} bind:value>
@ -23,3 +21,4 @@
border: none;
}
</style>

18
packages/ui/src/lib/elements/Vec3.story.svelte Normal file
View File

@ -0,0 +1,18 @@
<script lang="ts">
import type { Hst } from '@histoire/plugin-svelte';
export let Hst: Hst;
import Vec3 from './Vec3.svelte';
import StoryContent from '$lib/helpers/StoryContent.svelte';
import StorySettings from '$lib/helpers/StorySettings.svelte';
let theme = 'dark';
</script>
<Hst.Story>
<StoryContent {theme}>
<Vec3 value={[0.2, 0.4, 0.6]} />
</StoryContent>
<svelte:fragment slot="controls">
<StorySettings bind:theme />
</svelte:fragment>
</Hst.Story>

4
packages/ui/src/lib/elements/Vec3.svelte
View File

@ -1,7 +1,9 @@
<script lang="ts">
import Float from './Float.svelte';
let { value = $bindable([0, 0, 0]), id }: { value: number[]; id: string } = $props();
export let value = [0, 0, 0];
export let id = '';
$: console.log(value);
</script>
<div>

24
packages/ui/src/lib/helpers/StoryContent.svelte Normal file
View File

@ -0,0 +1,24 @@
<script lang="ts">
export let theme = 'dark';
$: if (theme !== undefined) {
const classes = document.body.classList;
const newClassName = `theme-${theme}`;
for (const className of classes) {
if (className.startsWith('theme-') && className !== newClassName) {
classes.remove(className);
}
}
document.body.classList.add(newClassName);
}
</script>
<div>
<slot />
</div>
<style>
div {
padding: 1em;
}
</style>

23
packages/ui/src/lib/helpers/StorySettings.svelte Normal file
View File

@ -0,0 +1,23 @@
<script lang="ts">
import { Select } from '$lib/index.js';
const themes = ['dark', 'light', 'catppuccin', 'solarized', 'high-contrast', 'nord', 'dracula'];
let value = 0;
export let theme = themes[value];
$: theme = themes[value];
</script>
<div>
<label for="theme-select"> Select Theme </label>
<Select id="" bind:value options={themes} />
</div>
<style>
div {
display: flex;
flex-direction: column;
gap: 1em;
padding: 1em;
}
</style>

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

@ -4,9 +4,9 @@
import Integer from '$lib/elements/Integer.svelte';
import Vec3 from '$lib/elements/Vec3.svelte';
let intValue = $state(0);
let floatValue = $state(0.2);
let vecValue = $state([0.2, 0.3, 0.4]);
let intValue = 0;
let floatValue = 0.2;
let vecValue = [0.2, 0.3, 0.4];
</script>
<main>