Merge pull request #5 from BLaZeKiLL/wip/data-inputs

Data inputs

package.json

@@ -20,6 +20,7 @@
 		"@skeletonlabs/tw-plugin": "^0.3.1",
 		"@sveltejs/adapter-static": "2.0.3",
 		"@sveltejs/kit": "^1.27.4",
+		"@tailwindcss/forms": "^0.5.7",
 		"@types/node": "^20.11.5",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",

src/app.pcss

@@ -6,13 +6,41 @@
 html,
 body {
 	@apply h-full overflow-hidden;
+	font-size: 0.8rem;
 }
 
 /* Chrome, Safari and Opera */
 ::-webkit-scrollbar {
 	width: 2px;
 }
 
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+	-moz-appearance: textfield;
+}
+
+.input[type='color'] {
+	width: 2.5rem;
+	height: 2.5rem;
+}
+
+.webray-input {
+	height: 2.5rem;
+}
+
+.btn-icon {
+	width: 36px;
+}
+
 .region-height {
 	height: calc(100% - 36.8px - 16px);
-}
+}
+
+

src/lib/components/data/WebrayDataView.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { WebrayEditor } from '../../editor';
+	import WebrayProperty from './WebrayProperty.svelte';
+
+	export let data_type: string;
+    export let card_type: string = 'bg-initial';
+
+	$: _data_type = WebrayEditor.getDataType(data_type);
+</script>
+
+{#if _data_type.properties.length !== 0}
+	<div class="card flex snap-start flex-col gap-2 p-2 {card_type}">
+		{#each _data_type.properties as property}
+			<WebrayProperty
+				label={property.label}
+				type={property.type}
+				tooltip={property.tooltip}
+				initial={property.initial}
+				meta={property.meta}
+			/>
+		{/each}
+	</div>
+{/if}

src/lib/components/data/WebrayProperty.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import DataSelect from './inputs/data_select.svelte';
+	import F32 from './inputs/f32.svelte';
+	import Rgb from './inputs/rgb.svelte';
+	import Str from './inputs/str.svelte';
+	import U32 from './inputs/u32.svelte';
+	import Vec3f from './inputs/vec3f.svelte';
+
+	export let label: string;
+	export let type: string;
+	export let tooltip: string;
+	export let initial: any;
+	export let meta: any;
+
+	let comp: any;
+
+	$: switch (type) {
+		case 'f32':
+			comp = F32;
+			break;
+		case 'rgb':
+			comp = Rgb;
+			break;
+		case 'u32':
+			comp = U32;
+			break;
+		case 'vec3f':
+			comp = Vec3f;
+			break;
+		case 'str':
+			comp = Str;
+			break;
+		case 'data_select':
+			console.log('beep');
+			comp = DataSelect;
+			break;
+		default:
+			console.error('Invalid input type: ' + type);
+			break;
+	}
+</script>
+
+<svelte:component this={comp} {label} {tooltip} {initial} {meta} />

src/lib/components/data/inputs/data_select.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import WebrayDataView from '../WebrayDataView.svelte';
+
+    export let label: string;
+	export let tooltip: string;
+	export let initial: any;
+    export let meta: {options: { label: string; value: string }[]};
+
+	$: data_type_value = initial;
+</script>
+
+<div class="flex flex-col">
+	<span class="flex flex-row items-center justify-stretch gap-1">
+		<p class="mr-1 text-surface-200 w-1/5">{label}</p>
+		<select class="select webray-input w-4/5 text-surface-300" bind:value={data_type_value}>
+			{#each meta.options as option}
+				<option value={option.value}>{option.label}</option>
+			{/each}
+		</select>
+	</span>
+
+	<div class="mt-2">
+        <WebrayDataView data_type={data_type_value} card_type="variant-filled-surface"/>
+    </div>
+</div>

src/lib/components/data/inputs/f32.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let label: string;
+	export let tooltip: string;
+	export let initial: any;
+	export let meta: any;
+
+	$: value = initial;
+</script>
+
+<span class="flex flex-row items-center justify-stretch gap-1">
+	<p class="mr-1 text-surface-200 w-1/5">{label}</p>
+	<input class="webray-input input text-center text-surface-300 w-4/5" type="number" placeholder="f32" bind:value={value}/>
+</span>

src/lib/components/data/inputs/rgb.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	export let label: string;
+	export let tooltip: string;
+	export let initial: any;
+	export let meta: any;
+
+	$: colorValue = initial;
+</script>
+
+<span class="flex flex-row items-center justify-stretch gap-1">
+	<p class="mr-1 text-surface-200 w-1/5">{label}</p>
+	<div class="w-4/5 flex flex-row items-center justify-stretch gap-2">
+		<input
+			class="webray-input input text-center text-surface-300"
+			type="color"
+			bind:value={colorValue}
+		/>
+		<input
+			class="webray-input input grow text-center text-surface-300"
+			type="text"
+			bind:value={colorValue}
+			readonly
+			tabindex="-1"
+			placeholder="#hex"
+		/>
+	</div>
+</span>

src/lib/components/data/inputs/str.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let label: string;
+	export let tooltip: string;
+	export let initial: any;
+	export let meta: any;
+
+	$: value = initial;
+</script>
+
+<span class="flex flex-row items-center justify-stretch gap-1">
+	<p class="mr-1 text-surface-200 w-1/5">{label}</p>
+	<input class="webray-input input text-center text-surface-300 w-4/5" type="text" placeholder="name" bind:value={value}/>
+</span>

src/lib/components/data/inputs/u32.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	export let label: string;
+	export let tooltip: string;
+	export let initial: any;
+	export let meta: any;
+
+	$: value = initial;
+
+	function validator(node: HTMLInputElement, _: number) {
+		return {
+			update(val: string) {
+				value = Math.max(parseInt(node.min), Math.floor(parseFloat(val)));
+			}
+		};
+	}
+</script>
+
+<span class="flex flex-row items-center justify-stretch gap-1">
+	<p class="mr-1 text-surface-200 w-1/5">{label}</p>
+	<input
+		class="webray-input input text-center text-surface-300 w-4/5"
+		type="number"
+		min="0"
+		use:validator={value}
+		bind:value={value}
+		placeholder="u32"
+	/>
+</span>

src/lib/components/data/inputs/vec3f.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let label: string;
+	export let tooltip: string;
+	export let initial: any;
+	export let meta: any;
+
+	$: x_val = initial.x;
+	$: y_val = initial.y;
+	$: z_val = initial.z;
+</script>
+
+<span class="flex flex-row items-center justify-stretch gap-1">
+	<p class="mr-1 text-surface-200 w-1/5">{label}</p>
+	<div class="flex w-4/5 flex-row gap-1">
+		<input class="webray-input input text-center text-surface-300" type="number" placeholder="X" bind:value={x_val}/>
+		<input class="webray-input input text-center text-surface-300" type="number" placeholder="Y" bind:value={y_val}/>
+		<input class="webray-input input text-center text-surface-300" type="number" placeholder="Z" bind:value={z_val}/>
+	</div>
+</span>

src/lib/components/drawer/WebrayDrawer.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Tab, TabGroup } from '@skeletonlabs/skeleton';
 	import { WebrayEditor } from '../../editor';
-	
-	import WebrayIconButton from '../ui/WebrayIconButton.svelte';
+
+	import WebrayIcon from '../ui/WebrayIcon.svelte';
 	import WebrayWindow from '../window/WebrayWindow.svelte';
 
 	export let windows: string[];
@@ -14,21 +14,19 @@
 
 <TabGroup
 	class="h-full"
-	active="variant-filled-primary"
+	active="variant-ghost-primary"
 	hover="hover:variant-soft-primary"
-	regionPanel="region-height !my-2 px-2 flex flex-col gap-4 snap-y snap-mandatory overflow-y-scroll scroll-smooth"
-	padding="p-1"
+	regionPanel="region-height !my-2"
+	padding="p-2"
 	rounded=""
-	border=""
-
 >
 	{#each _windows as win, i}
 		<Tab bind:group={tab} name={win.icon} value={i}>
-			<WebrayIconButton icon={win.icon} tooltip={win.tooltip} />
+			<WebrayIcon icon={win.icon} tooltip={win.tooltip} />
 		</Tab>
 	{/each}
 
 	<svelte:fragment slot="panel">
-		<WebrayWindow win={_windows[tab]}/>
+		<WebrayWindow win={_windows[tab]} />
 	</svelte:fragment>
-</TabGroup>
+</TabGroup>

src/lib/components/layout/WebrayAppBar.svelte

@@ -3,7 +3,11 @@
 </script>
 
 <AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
-	<svelte:fragment slot="lead">File</svelte:fragment>
-	<span>WebRay</span>
-	<svelte:fragment slot="trail">GitHub</svelte:fragment>
+	<svelte:fragment slot="lead">
+		<span class="h4">File</span>
+	</svelte:fragment>
+	<span class="h2">WebRay</span>
+	<svelte:fragment slot="trail">
+		<span class="h4">GitHub</span>
+	</svelte:fragment>
 </AppBar>

src/lib/components/layout/WebrayImageBar.svelte

@@ -1,23 +1,25 @@
 <script lang="ts">
 	import WebrayToolbar from '../toolbar/WebrayToolbar.svelte';
 
-	import { WebrayEditor, ID, Icons } from '../../editor';
-	import WebrayIconButton from '../ui/WebrayIconButton.svelte';
+	import { WebrayEditor, ID } from '../../editor';
+	import WebrayIcon from '../ui/WebrayIcon.svelte';
 
 	const imageToolbar = WebrayEditor.getToolbar(ID.t_image_bar);
-	const renderIcon = Icons.getIcon(imageToolbar.lead[0].icon);
-	const downloadIcon = Icons.getIcon(imageToolbar.trail[0].icon);
 </script>
 
 <WebrayToolbar>
-	<span slot="lead">
+	<div slot="lead" class="variant-ghost-surface btn-group rounded-none">
 		{#each imageToolbar.lead as tool}
-			<WebrayIconButton icon={tool.icon} tooltip={tool.tooltip} />
+			<button class="!p-2">
+				<WebrayIcon icon={tool.icon} tooltip={tool.tooltip} />
+			</button>
 		{/each}
-	</span>
-	<span slot="trail">
+	</div>
+	<div slot="trail" class="variant-ghost-surface btn-group rounded-none">
 		{#each imageToolbar.trail as tool}
-			<WebrayIconButton icon={tool.icon} tooltip={tool.tooltip} />
+			<button class="!p-2">
+				<WebrayIcon icon={tool.icon} tooltip={tool.tooltip} />
+			</button>
 		{/each}
-	</span>
+	</div>
 </WebrayToolbar>

src/lib/components/layout/WebrayRightBar.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
-	import WebrayField from '../fields/WebrayField.svelte';
 	import WebrayDrawer from '../drawer/WebrayDrawer.svelte';
 
-	import { WebrayEditor, ID } from '../../editor';
-	import WebrayIconButton from '../ui/WebrayIconButton.svelte';
-
-	const cameraWindow = WebrayEditor.getWindow(ID.w_camera);
-	const renderSettingsWindow = WebrayEditor.getWindow(ID.w_render_settings);
+	import { ID } from '../../editor';
 </script>
 
 <div class="flex h-full flex-col border-l border-surface-600">

src/lib/components/toolbar/WebrayToolbar.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 </script>
 
-<div class="flex flex-row p-2">
-	<span><slot name="lead" /></span>
+<div class="flex flex-row">
+	<slot name="lead" />
 	<span class="grow"></span>
-	<span><slot name="center" /></span>
+	<slot name="center" />
 	<span class="grow"></span>
-	<span><slot name="trail" /></span>
+	<slot name="trail" />
 </div>