fragment-tools 0.1.20 → 0.2.0

package/src/client/app/ui/SketchSelect.svelte

@@ -1,55 +1,20 @@
 <script>
 	import ModuleHeaderAction from './ModuleHeaderAction.svelte';
-	import {
-		sketches,
-		sketchesKeys,
-		sketchesCount,
-	} from '../stores/sketches.js';
-	import { monitors } from '../stores/rendering';
+	import { sketchesManager } from '../state/sketches.svelte';
 
-	export let monitorID;
-	export let selected;
+	let { sketchKey = sketchesManager.keys[0], onchange } = $props();
 
-	$: options = [
-		...$sketchesKeys.map((key) => ({
-			value: key,
-			label:
-				$sketches[key] && $sketches[key].name
-					? $sketches[key].name
-					: key,
-		})),
-	];
-
-	$: {
-		if (
-			$sketchesCount > 1 &&
-			!options.some((opt) => opt.value === 'output')
-		) {
-			options = [...options, { value: 'output', label: 'output' }];
-		}
-
-		if (options.length > 0 && selected === undefined) {
-			selected = options[0].value;
-		}
-	}
-
-	$: {
-		monitors.update((all) => {
-			return all.map((monitor) => {
-				if (monitor.id === monitorID) {
-					monitor.selected = selected;
-				}
-
-				return monitor;
-			});
-		});
-	}
+	let options = $derived(
+		[
+			...sketchesManager.keys.map((key) => {
+				const name = sketchesManager.sketches[key].name ?? key;
+				return { value: key, label: name };
+			}),
+			sketchesManager.count > 1
+				? { value: 'output', label: 'output' }
+				: undefined,
+		].filter((opt) => opt !== undefined),
+	);
 </script>
 
-<ModuleHeaderAction
-	value={selected}
-	permanent
-	border
-	on:change={(event) => (selected = event.detail)}
-	{options}
-/>
+<ModuleHeaderAction value={sketchKey} permanent border {onchange} {options} />

package/src/client/app/ui/fields/ButtonInput.svelte

@@ -1,24 +1,27 @@
 <script>
-	export let value = null;
-	export let label;
-	export let disabled = false;
-	export let showLabel = true;
-	export let title = '';
-	export let context = null;
-	export let key = '';
+	let {
+		label = 'run',
+		disabled = false,
+		showLabel = true,
+		title = '',
+		onclick,
+		onmouseenter,
+		onmouseleave,
+		children,
+	} = $props();
 </script>
 
 <div class="button-container" class:disabled>
 	<button
 		class="button"
 		{disabled}
-		on:click
+		{onclick}
+		{onmouseenter}
+		{onmouseleave}
 		{title}
-		on:mouseenter
-		on:mouseleave
 	>
 		<span class="label" class:visually-hidden={!showLabel}>{label}</span>
-		<slot />
+		{@render children?.()}
 	</button>
 </div>
 

package/src/client/app/ui/fields/CheckboxInput.svelte

@@ -1,16 +1,9 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
+	let { value = $bindable(), context, key = '', disabled = false, onchange } = $props();
 
-	export let value;
-	export let context = null;
-	export let key = '';
-	export let disabled = false;
-
-	const dispatch = createEventDispatcher();
-
-	function handleChange() {
-		dispatch('change', value);
-	}
+	const handleChange = (event) => {
+		onchange(value);
+	};
 </script>
 
 <div class="checkbox">
@@ -18,7 +11,7 @@
 		class="input"
 		bind:checked={value}
 		type="checkbox"
-		on:change={handleChange}
+		onchange={handleChange}
 		disabled={disabled ? 'disabled' : null}
 	/>
 	<div class="checked" />

package/src/client/app/ui/fields/ColorInput.svelte

@@ -1,147 +1,73 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import * as color from '../../utils/color.utils.js';
 	import TextInput from './TextInput.svelte';
 	import Field from '../Field.svelte';
 
-	export let value;
-	export let context = null;
-	export let key = '';
-	export let disabled = false;
+	let { value, context = null, key = '', disabled = false, onchange } = $props();
 
-	const dispatch = createEventDispatcher();
-
-	$: format = color.getColorFormat(value);
-	$: hexValue = color.toHex(value, format);
-	$: textValue = color.toString(value, format);
-	$: alpha = 1;
-	$: hasAlpha = [
+	let format = $derived(color.getColorFormat(value));
+	let hexValue = $derived(color.toHex(value, format));
+	let textValue = $state();
+	let alpha = $state(1);
+	let hasAlpha = $derived([
 		color.FORMATS.RGBA_STRING,
 		color.FORMATS.VEC4_STRING,
 		color.FORMATS.VEC4_ARRAY,
 		color.FORMATS.RGBA_OBJECT,
 		color.FORMATS.HSLA_STRING,
-	].includes(format);
-	$: {
+	].includes(format));
+
+	$effect(() => {
 		if (hasAlpha) {
 			const [r, g, b, a = 1] = color.toComponents(value);
 			alpha = a;
 		} else {
 			alpha = 1;
 		}
-	}
-
-	function dispatchChange() {
-		const [r, g, b] = color.hexToComponents(hexValue);
+	})
 
-		// support THREE.Color
-		switch (format) {
-			case color.FORMATS.VEC3_ARRAY:
-				value[0] = r;
-				value[1] = g;
-				value[2] = b;
-				dispatch('change', value);
-				break;
-			case color.FORMATS.VEC4_ARRAY:
-				value[0] = r;
-				value[1] = g;
-				value[2] = b;
-				value[3] = alpha;
-				dispatch('change', value);
-				break;
-			case color.FORMATS.THREE:
-			case color.FORMATS.RGB_OBJECT:
-				value.r = r;
-				value.g = g;
-				value.b = b;
+	$effect(() => {
+		textValue = color.toString(value, format)?.toLowerCase();
+	});
 
-				dispatch('change', value);
-				break;
-			case color.FORMATS.RGBA_OBJECT:
-				value.r = r;
-				value.g = g;
-				value.b = b;
-				value.a = alpha;
+	function dispatchChange(newColor) {
+		const newFormat = color.getColorFormat(newColor);
 
-				dispatch('change', value);
-				break;
-			default:
-				dispatch('change', textValue);
+		if (format === newFormat) {
+			onchange(newColor);
+		} else {
+			const components = color.toComponents(newColor); 
+			const [r, g, b] = components;
+
+			switch(format) {
+				case color.FORMATS.RGB_OBJECT:
+					onchange({ r, g, b });
+					break;
+				case color.FORMATS.RGBA_OBJECT:
+					onchange({ r, g, b, a: alpha });
+					break;
+				default:
+					onchange(color.componentsToFormat([r, g, b, alpha], format));
+			}
 		}
 	}
 
-	function handleBlur() {
-		dispatchChange();
+	function handleBlur(event) {
+		dispatchChange(event.currentTarget.value);
 	}
 
 	function onChangeText(event) {
-		const newColor = event.detail;
-
-		if (color.isColor(newColor)) {
-			textValue = newColor;
-		} else {
-			// newColor is not a color, reset value
-			textValue = color.toString(value, format);
-		}
-
-		hexValue = color.toHex(textValue);
-		dispatchChange();
+		dispatchChange(event.currentTarget.value);
 	}
 
-	function onChangeAlpha(event) {
-		alpha = event.detail;
-
-		const [r, g, b] = color.hexToComponents(hexValue);
-
-		switch (format) {
-			case color.FORMATS.RGBA_STRING:
-			case color.FORMATS.RGBA_OBJECT:
-				textValue = color.componentsToRGBAString([r, g, b, alpha]);
-				break;
-			case color.FORMATS.VEC4_STRING:
-				textValue = color.componentsToVec4String([r, g, b, alpha]);
-				break;
-			case color.FORMATS.HSLA_STRING:
-				const [h, s, l] = color.hslToHSLComponents(textValue);
-				textValue = color.hslaToHSLAString([h, s, l, alpha]);
-				break;
-		}
+	function onChangeAlpha(newAlpha) {
+		alpha = newAlpha;
 
-		dispatchChange();
+		dispatchChange(color.toHex(value));
 	}
 
 	function onInput(event) {
-		hexValue = event.currentTarget.value;
-
-		const [r, g, b] = color.hexToComponents(hexValue);
-
-		switch (format) {
-			case color.FORMATS.RGBA_STRING:
-			case color.FORMATS.RGBA_OBJECT:
-				textValue = color.toRGBAString({ r, g, b, a: alpha });
-				break;
-			case color.FORMATS.VEC3_STRING:
-				textValue = color.componentsToVec3String([r, g, b]);
-				break;
-			case color.FORMATS.VEC4_STRING:
-				textValue = color.componentsToVec4String([r, g, b, alpha]);
-				break;
-			case color.FORMATS.RGB_STRING:
-			case color.FORMATS.RGB_OBJECT:
-				textValue = color.toRGBString(hexValue);
-				break;
-			case color.FORMATS.HSL_STRING:
-				textValue = color.componentsToHSLString([r, g, b]);
-				break;
-			case color.FORMATS.HSLA_STRING:
-				textValue = color.componentsToHSLAString([r, g, b, alpha]);
-				break;
-			default:
-				textValue = color.toString(hexValue);
-				break;
-		}
-
-		dispatchChange();
+		dispatchChange(event.currentTarget.value);
 	}
 </script>
 
@@ -204,31 +130,30 @@
 					/>
 				</svg>
 			{/if}
-			<!-- svelte-ignore -->
 			<input
 				class="input"
 				type="color"
 				disabled={disabled ? 'disabled' : null}
-				bind:value={hexValue}
-				on:blur={handleBlur}
-				on:input={onInput}
+				value={hexValue}
+				onblur={handleBlur}
+				oninput={onInput}
 			/>
 		</div>
 		<TextInput
 			{context}
 			{key}
 			{disabled}
-			bind:value={textValue}
-			on:change={onChangeText}
+			value={textValue}
+			onchange={onChangeText}
 		/>
 	</div>
 	{#if hasAlpha}
 		<Field
-			key={`${key}.alpha`}
+			key="alpha"
 			value={alpha}
-			params={{ label: 'alpha', min: 0, max: 1, step: 0.01 }}
+			params={{ min: 0, max: 1, step: 0.01 }}
 			{context}
-			on:change={onChangeAlpha}
+			onchange={onChangeAlpha}
 		/>
 	{/if}
 </div>

package/src/client/app/ui/fields/FieldInputRow.svelte

@@ -1,5 +1,9 @@
+<script>
+	let { children } = $props();
+</script>
+
 <div class="row">
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

package/src/client/app/ui/fields/ImageInput.svelte

@@ -1,23 +1,23 @@
 <script>
-	import { onMount } from 'svelte';
 	import { loadImage } from '../../lib/loader/loadImage';
 	import ButtonInput from './ButtonInput.svelte';
 	import FieldInputRow from './FieldInputRow.svelte';
 	import TextInput from './TextInput.svelte';
 
-	export let value;
-	export let context = null;
-	export let key = '';
-	export let disabled = false;
-
-	let img, input, name;
-	$: url = typeof value === HTMLImageElement ? value.src : value;
-	$: displayUrl = name ? name : url.replace(`/@fs${__CWD__}`, '');
-	$: {
-		(async () => {
-			await loadImage(url, { img });
-		})();
-	}
+	let { value, context = null, key = '', disabled = false } = $props();
+
+	/** @type {HTMLImageElement} */
+	let img;
+	/** @type {HTMLInputElement} */
+	let input;
+
+	let name = $state('');
+	let url = $derived(typeof value === HTMLImageElement ? value.src : value);
+	let displayUrl = $derived(name ? name : url.replace(`/@fs${__CWD__}`, ''));
+
+	$effect(async () => {
+		await loadImage(url, { img });
+	});
 
 	function handleClick() {
 		input.click();

package/src/client/app/ui/fields/Input.svelte

@@ -1,45 +1,39 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
-
-	export let label = null;
-	export let value;
-	export let disabled = false;
-	export let context = null;
-	export let key = '';
-
+	let {
+		label,
+		value = $bindable(),
+		disabled = false,
+		oninput,
+		onchange,
+		onkeydown,
+		onfocus,
+		onblur,
+	} = $props();
+
+	/** @type {HTMLInputElement} */
 	let node;
 
-	const dispatch = createEventDispatcher();
-
 	function onKeyPress(event) {
 		if (event.key === 'Enter') {
 			node.blur();
 		}
 	}
-
-	function handleInput(event) {
-		dispatch('input', event.currentTarget.value);
-	}
-
-	function handleChange(event) {
-		dispatch('change', event.currentTarget.value);
-	}
 </script>
 
 <div class="input-container" class:disabled>
-	{#if label}
+	{#if label !== undefined}
 		<span class="label">{label}</span>
 	{/if}
 	<input
 		class="input"
 		bind:this={node}
 		bind:value
-		on:change={handleChange}
-		on:input={handleInput}
-		on:keypress={onKeyPress}
-		on:keydown
-		on:focus
-		on:blur
+		{oninput}
+		{onchange}
+		{onkeydown}
+		{onfocus}
+		{onblur}
+		onkeypress={onKeyPress}
 		disabled={disabled ? 'disabled' : null}
 		autocomplete="off"
 		spellcheck="false"

package/src/client/app/ui/fields/IntervalInput.svelte

@@ -2,19 +2,19 @@
 	import FieldInputRow from './FieldInputRow.svelte';
 	import NumberInput from './NumberInput.svelte';
 	import { map, clamp, roundToStep } from '../../utils/math.utils';
-	import { createEventDispatcher } from 'svelte';
 
-	export let value = null;
-	export let label = '';
-	export let step = 1;
-	export let suffix = '';
-	export let min = -Infinity;
-	export let max = Infinity;
-	export let disabled = false;
-	export let context = null;
-	export let key = '';
-
-	let dispatch = createEventDispatcher();
+	let {
+		value = null,
+		label,
+		step = 1,
+		suffix = '',
+		min = -Infinity,
+		max = Infinity,
+		disabled = false,
+		context,
+		key,
+		onchange,
+	} = $props();
 
 	/** @type {HTMLElement} */
 	let node;
@@ -40,8 +40,8 @@
 
 		let dragValue = computeDrag(event);
 
-		let abs0 = Math.abs(dragValue - min);
-		let abs1 = Math.abs(dragValue - max);
+		let abs0 = Math.abs(dragValue - value[0]);
+		let abs1 = Math.abs(dragValue - value[1]);
 
 		proximityIndex = abs0 < abs1 ? 0 : 1;
 
@@ -80,7 +80,7 @@
 			value[0] = newValues[0];
 			value[1] = newValues[1];
 
-			dispatch('change', value);
+			onchange(value);
 		}
 	}
 
@@ -95,10 +95,10 @@
 	function handleValueChange(index, newValue) {
 		value[index] = newValue;
 
-		dispatch('change', value);
+		onchange(value);
 	}
 
-	$: {
+	$effect(() => {
 		if (value[0] > value[1]) {
 			console.warn(`Values provided for ${key} are in the wrong order. `);
 		}
@@ -110,10 +110,10 @@
 				);
 			}
 		});
-	}
+	});
 
-	$: p1 = map(clamp(value[0], min, max), min, max, 0, 1);
-	$: p2 = map(clamp(value[1], min, max), min, max, 0, 1);
+	let p1 = $derived(map(clamp(value[0], min, max), min, max, 0, 1));
+	let p2 = $derived(map(clamp(value[1], min, max), min, max, 0, 1));
 </script>
 
 <div class="interval-input" class:disabled>
@@ -138,7 +138,7 @@
 				{min}
 				{max}
 				progress={false}
-				bind:value={value[0]}
+				value={value[0]}
 				on:change={(event) => handleValueChange(0, event.detail)}
 			/>
 			<NumberInput
@@ -151,7 +151,7 @@
 				{min}
 				{max}
 				progress={false}
-				bind:value={value[1]}
+				value={value[1]}
 				on:change={(event) => handleValueChange(1, event.detail)}
 			/>
 		</div>