fragment-tools 0.2.2 → 0.2.4

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

@@ -9,7 +9,7 @@
 	import ButtonInput from './fields/ButtonInput.svelte';
 	import ImageInput from './fields/ImageInput.svelte';
 	import IntervalInput from './fields/IntervalInput.svelte';
-	import { fieldTypes, hasChanged } from '../utils/fields.utils.js';
+	import { fieldTypes } from '../utils/fields.utils.js';
 
 	const fields = {
 		[`${fieldTypes.SELECT}`]: Select,
@@ -21,6 +21,7 @@
 		[`${fieldTypes.COLOR}`]: ColorInput,
 		[`${fieldTypes.BUTTON}`]: ButtonInput,
 		[`${fieldTypes.DOWNLOAD}`]: ButtonInput,
+		[`${fieldTypes.IMPORT}`]: ImportInput,
 		[`${fieldTypes.IMAGE}`]: ImageInput,
 		[`${fieldTypes.INTERVAL}`]: IntervalInput,
 	};
@@ -35,10 +36,12 @@
 	import { inferFieldType } from '../utils/fields.utils.js';
 	import IconTriggers from '../components/IconTriggers.svelte';
 	import IconLocked from '../components/IconLocked.svelte';
+	import ImportInput from './fields/ImportInput.svelte';
+	import { deepEqual } from '../state/utils.svelte';
 
 	let {
 		key,
-		value = null,
+		value,
 		initialValue = value,
 		context = null,
 		params = $bindable({}),
@@ -89,7 +92,7 @@
 	let fieldType = $derived(inferFieldType({ type, value, params, key }));
 	let fieldProps = $derived(composeFieldProps(params, disabled));
 	let onTrigger = $derived(frameDebounce(onTriggers[fieldType]));
-	let input = $derived(fields[fieldType]);
+	let Component = $derived(fields[fieldType]);
 	let triggerable = $derived(
 		params.triggerable !== false &&
 			((fieldType === fieldTypes.NUMBER &&
@@ -115,12 +118,17 @@
 			context,
 		};
 	}
+
+	function hasChanged(current, next) {
+		const changed = !deepEqual(current, next);
+		return changed;
+	}
 </script>
 
 <div
 	class="field"
 	class:disabled
-	class:changed={!disabled && hasChanged(initialValue, value)}
+	class:changed={!disabled && hasChanged(value, initialValue)}
 	style="--index: {index};"
 >
 	<FieldSection
@@ -151,13 +159,7 @@
 				{/if}
 			</div>
 		{/snippet}
-		<svelte:component
-			this={input}
-			{value}
-			{...fieldProps}
-			{onchange}
-			onclick={onTrigger}
-		/>
+		<Component {value} {...fieldProps} {onchange} onclick={onTrigger} />
 		{@render children?.()}
 	</FieldSection>
 	{#if triggerable}

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

@@ -79,7 +79,8 @@
 		transition: opacity 0.1s ease;
 	}
 
-	.header__action:hover .header__icon {
+	:global(body:not(.fragment-dragging)) .header__action:hover .header__icon,
+	.header__action:focus-visible .header__icon {
 		opacity: 1;
 	}
 
@@ -98,7 +99,9 @@
 		transition: opacity 0.1s ease;
 	}
 
-	.header__action:hover .field-group__name,
+	:global(body:not(.fragment-dragging))
+		.header__action:hover
+		.field-group__name,
 	.header__action:focus-visible .field-group__name {
 		opacity: 1;
 	}

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

@@ -48,7 +48,7 @@
 		grid-template-columns: 1fr;
 	}
 
-	.field__section:hover .field__label,
+	:global(body:not(.fragment-dragging)) .field__section:hover .field__label,
 	.field__section:focus-within .field__label {
 		opacity: 1;
 	}
@@ -102,9 +102,9 @@
 	}
 
 	.field__label:focus-visible {
-		outline: 0;
-		box-shadow: 0 0 0 2px var(--color-text);
-		border-radius: 2px;
+		outline: 2px var(--color-active) solid;
+		outline-offset: 2px;
+		border-radius: 1px;
 	}
 
 	.field__section.secondary {

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

@@ -1,7 +1,7 @@
 <script>
 	import Root from './LayoutRoot.svelte';
 	import Column from './LayoutColumn.svelte';
-	import Build from './Build.svelte';
+	import Build from '../components/Build.svelte';
 	import Row from './LayoutRow.svelte';
 	import ModuleRenderer from './ModuleRenderer.svelte';
 	import { layout } from '../state/layout.svelte.js';

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

@@ -0,0 +1,54 @@
+<script>
+	import Monitor from '../modules/Monitor.svelte';
+	import Params from '../modules/Params.svelte';
+	import FloatingParams from './FloatingParams.svelte';
+	import Column from './LayoutColumn.svelte';
+	import Row from './LayoutRow.svelte';
+
+	let { buildConfig = {}, sketch, sketchKey } = $props();
+
+	let gui = $derived(buildConfig.gui ?? {});
+	let layout = $derived(buildConfig.layout ?? {});
+	let headless = $derived(layout.headless ?? false);
+	let resizable = $derived(layout.resizable ?? false);
+
+	let guiOutput = $derived(gui.output ?? true);
+	let guiAlign = $derived(gui.align ?? 'right');
+	let guiHidden = $derived(gui?.hidden);
+	let guiSize = $derived(gui?.size ?? 0.25);
+	let guiMinimize = $derived(gui?.minimize);
+	let guiPosition = $derived(gui?.position);
+</script>
+
+{#if guiPosition === 'fixed'}
+	<Row>
+		{#if guiAlign === 'left'}
+			<Column size={guiSize} {resizable}>
+				<Params {headless} />
+			</Column>
+			<Column size={1 - guiSize} {resizable}>
+				<Monitor {headless} params={{ selected: sketchKey }} />
+			</Column>
+		{:else}
+			<Column size={1 - guiSize} {resizable}>
+				<Monitor {headless} params={{ selected: sketchKey }} />
+			</Column>
+			<Column size={guiSize} {resizable}>
+				<Params {headless} />
+			</Column>
+		{/if}
+	</Row>
+{:else}
+	<Row>
+		<Monitor {headless} {sketchKey} params={{ selected: sketchKey }} />
+		{#if gui}
+			<FloatingParams
+				output={guiOutput}
+				align={guiAlign}
+				size={guiSize}
+				hidden={guiHidden}
+				minimize={guiMinimize}
+			/>
+		{/if}
+	</Row>
+{/if}

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

@@ -1,9 +1,9 @@
 <script>
 	import LayoutComponent from './LayoutComponent.svelte';
 
-	let { size = 1, children } = $props();
+	let { size = 1, children, resizable = true } = $props();
 </script>
 
-<LayoutComponent {size} type="column">
+<LayoutComponent type="column" {size} {resizable}>
 	{@render children?.()}
 </LayoutComponent>

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

@@ -4,10 +4,16 @@
 	import Toolbar from './LayoutToolbar.svelte';
 	import Resizer from './LayoutResizer.svelte';
 	import ModuleRenderer from './ModuleRenderer.svelte';
-	import Preview from './Preview.svelte';
+	import Preview from '../components/Preview.svelte';
 	import LayoutComponent from './LayoutComponent.svelte';
 
-	let { id = layout.getID(), size = 1, type = 'column', children } = $props();
+	let {
+		id = layout.getID(),
+		size = 1,
+		type = 'column',
+		children,
+		resizable = true,
+	} = $props();
 
 	let parent = getContext('parent');
 	let isColumn = $derived(type === 'column');
@@ -120,7 +126,7 @@
 			{/if}
 		{/each}
 	{:else}
-		{@render children()}
+		{@render children?.()}
 	{/if}
 	{#if layout.editing && (isRoot || (childComponents.length === 1 && childComponents[0].type === 'module') || childComponents.length === 0)}
 		<Toolbar
@@ -134,7 +140,11 @@
 	{/if}
 </div>
 {#if !isRoot}
-	<Resizer direction={isColumn ? 'vertical' : 'horizontal'} {current} />
+	<Resizer
+		direction={isColumn ? 'vertical' : 'horizontal'}
+		{current}
+		disabled={!resizable}
+	/>
 {/if}
 
 <style>

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

@@ -11,7 +11,11 @@
 	import { layout } from '../state/layout.svelte.js';
 	import { clamp, map } from '../utils/math.utils.js';
 
-	let { direction = DIRECTIONS.HORIZONTAL, current } = $props();
+	let {
+		direction = DIRECTIONS.HORIZONTAL,
+		current,
+		disabled = false,
+	} = $props();
 
 	let visible = $state(false);
 	let isDragging = $state(false);
@@ -133,6 +137,7 @@
 	class="resizer resizer--{direction}"
 	class:dragging={isDragging}
 	class:editing={layout.editing}
+	class:disabled
 >
 	<div
 		class="resizer-hover"
@@ -150,6 +155,10 @@
 		position: relative;
 	}
 
+	.resizer.disabled {
+		pointer-events: none;
+	}
+
 	[class~='resizer']:last-of-type {
 		display: none;
 	}
@@ -177,7 +186,7 @@
 		opacity: 0.1;
 	}
 
-	.resizer .resizer-hover:hover:before {
+	:global(body:not(.fragment-dragging)) .resizer .resizer-hover:hover:before {
 		opacity: 0.25;
 	}
 

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

@@ -1,9 +1,9 @@
 <script>
 	import LayoutComponent from './LayoutComponent.svelte';
 
-	let { size = 1, children } = $props();
+	let { size = 1, children, resizable = true } = $props();
 </script>
 
-<LayoutComponent {size} type="row">
+<LayoutComponent type="row" {size} {resizable}>
 	{@render children?.()}
 </LayoutComponent>

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

@@ -57,15 +57,15 @@
 		color: var(--color-text-input-disabled);
 	}
 
-	.button:hover {
+	:global(body:not(.fragment-dragging)) .button:hover {
 		color: var(--color-text);
 
 		box-shadow: inset 0 0 0 1px
 			var(--box-shadow-color-active, var(--color-active));
 	}
 
-	.button:active,
-	.button:focus-visible {
+	:global(body:not(.fragment-dragging)) .button:active,
+	:global(body:not(.fragment-dragging)) .button:focus-visible {
 		box-shadow: 0 0 0 2px
 			var(--box-shadow-color-active, var(--color-active));
 	}

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

@@ -3,19 +3,27 @@
 	import TextInput from './TextInput.svelte';
 	import Field from '../Field.svelte';
 
-	let { value, context = null, key = '', disabled = false, onchange } = $props();
+	let {
+		value,
+		context = null,
+		key = '',
+		disabled = false,
+		onchange,
+	} = $props();
 
 	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));
+	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),
+	);
 
 	$effect(() => {
 		if (hasAlpha) {
@@ -24,7 +32,7 @@
 		} else {
 			alpha = 1;
 		}
-	})
+	});
 
 	$effect(() => {
 		textValue = color.toString(value, format)?.toLowerCase();
@@ -36,10 +44,10 @@
 		if (format === newFormat) {
 			onchange(newColor);
 		} else {
-			const components = color.toComponents(newColor); 
+			const components = color.toComponents(newColor);
 			const [r, g, b] = components;
 
-			switch(format) {
+			switch (format) {
 				case color.FORMATS.RGB_OBJECT:
 					onchange({ r, g, b });
 					break;
@@ -47,7 +55,9 @@
 					onchange({ r, g, b, a: alpha });
 					break;
 				default:
-					onchange(color.componentsToFormat([r, g, b, alpha], format));
+					onchange(
+						color.componentsToFormat([r, g, b, alpha], format),
+					);
 			}
 		}
 	}
@@ -207,7 +217,7 @@
 		pointer-events: none;
 	}
 
-	.mirror:hover {
+	:global(body:not(.fragment-dragging)) .mirror:hover {
 		box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
 	}
 

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

@@ -0,0 +1,52 @@
+<script>
+	import ButtonInput from './ButtonInput.svelte';
+
+	let {
+		value,
+		label = 'import',
+		disabled = false,
+		title = '',
+		accept,
+		readAs = 'readAsText',
+		children,
+	} = $props();
+
+	/** @type {HTMLInputElement}*/
+	let input;
+
+	let fileReader = new FileReader();
+	fileReader.onload = (event) => {
+		value(event);
+	};
+
+	function handleClick(event) {
+		event.preventDefault();
+		input.click();
+	}
+
+	function handleChange(event) {
+		if (event.target.files.length > 0) {
+			const readAsFn = fileReader[readAs];
+
+			if (!readAsFn) {
+				console.error(
+					`readAs: '${readAs}' is not a function of FileReader.`,
+				);
+				return;
+			}
+
+			readAsFn.call(fileReader, event.target.files[0]);
+		}
+	}
+</script>
+
+<ButtonInput onclick={handleClick} {disabled} {label} {title}>
+	{@render children?.()}
+</ButtonInput>
+<input
+	class="visually-hidden"
+	onchange={handleChange}
+	type="file"
+	bind:this={input}
+	{accept}
+/>

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

@@ -53,11 +53,13 @@
 		box-shadow: inset 0 0 0 1px var(--color-border-input);
 	}
 
-	.input-container:not(.disabled):hover {
+	:global(body:not(.fragment-dragging))
+		.input-container:not(.disabled):hover {
 		box-shadow: inset 0 0 0 1px var(--color-active);
 	}
 
-	.input-container:not(.disabled):focus-within {
+	:global(body:not(.fragment-dragging))
+		.input-container:not(.disabled):focus-within {
 		box-shadow: 0 0 0 2px var(--color-active);
 	}
 

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

@@ -21,7 +21,7 @@
 	/** @type {DOMRect}*/
 	let rect;
 	/** @type {boolean}*/
-	let isDragging = false;
+	let isDragging = $state(false);
 
 	let proximityIndex = -1;
 
@@ -30,7 +30,8 @@
 	 * @param {MouseEvent} event
 	 */
 	function handleMouseDown(event) {
-		document.body.style.userSelect = 'none';
+		document.body.classList.add('fragment-dragging');
+
 		document.addEventListener('mousemove', handleMouseMove);
 		document.addEventListener('mouseup', handleMouseUp);
 
@@ -85,7 +86,7 @@
 	}
 
 	function handleMouseUp() {
-		document.body.style.userSelect = null;
+		document.body.classList.remove('fragment-dragging');
 		document.removeEventListener('mousemove', handleMouseMove);
 		document.removeEventListener('mouseup', handleMouseUp);
 
@@ -119,9 +120,10 @@
 <div class="interval-input" class:disabled>
 	<FieldInputRow --grid-template-columns="1fr 0.5fr">
 		<div
-			class="range {isDragging ? 'dragging' : ''} "
+			class="range"
+			class:dragging={isDragging}
 			bind:this={node}
-			on:mousedown={handleMouseDown}
+			onmousedown={handleMouseDown}
 		>
 			<div class="handler" style="--position: {p1};" />
 			<div class="filler" style="--p1: {p1}; --p2: {p2};"></div>
@@ -189,7 +191,7 @@
 		container-type: size;
 	}
 
-	.range:hover {
+	:global(body:not(.fragment-dragging)) .range:hover {
 		box-shadow: inset 0 0 0 1px var(--color-active);
 	}
 

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

@@ -1,25 +1,18 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
+	import Keyboard from '../../inputs/Keyboard.js';
 	import { map, clamp, roundToStep } from '../../utils/math.utils.js';
 
-	let {
-		value,
-		min,
-		max,
-		step,
-		context = null,
-		key = '',
-		disabled = false,
-		onchange,
-	} = $props();
+	let { value, min, max, step, disabled = false, onchange } = $props();
 
 	let node;
 	let rect;
 
-	let isDragging = false;
+	let isDragging = $state(false);
+	let steppedValue = $derived(roundToStep(value, step));
 
 	// handlers
 	function handleMouseDown(event) {
+		document.body.classList.add('fragment-dragging');
 		document.addEventListener('mousemove', handleMouseMove);
 		document.addEventListener('mouseup', handleMouseUp);
 
@@ -47,24 +40,59 @@
 		}
 	}
 
+	function handleKeyDown(event) {
+		const direction = ['ArrowUp', 'ArrowRight'].includes(event.key)
+			? 1
+			: ['ArrowDown', 'ArrowLeft'].includes(event.key)
+				? -1
+				: 0;
+
+		const diff = Keyboard.getStepFromEvent(event) * step;
+
+		if (direction !== 0) {
+			const newValue = clamp(
+				roundToStep(value + direction * diff, step),
+				min,
+				max,
+			);
+
+			if (newValue !== value) {
+				onchange(newValue);
+			}
+		}
+	}
+
 	function handleMouseUp() {
+		document.body.classList.remove('fragment-dragging');
 		document.removeEventListener('mousemove', handleMouseMove);
 		document.removeEventListener('mouseup', handleMouseUp);
 
 		isDragging = false;
 	}
 
-	let progress = $derived(clamp(map(value, min, max, 0, 1), 0.0001, 1));
+	let progress = $derived(
+		clamp(map(steppedValue, min, max, 0, 1), 0.0001, 1),
+	);
 	let opacity = $derived(progress > 0 ? 1 : 0);
 </script>
 
 <div
-	class="progress {isDragging ? 'dragging' : ''} "
+	class="progress"
 	bind:this={node}
 	onmousedown={handleMouseDown}
+	onkeydown={handleKeyDown}
 	class:disabled
+	class:dragging={isDragging}
+	role="slider"
+	aria-valuemin={min}
+	aria-valuemax={max}
+	aria-valuenow={value}
+	tabindex="0"
 >
-	<div class="fill" style="--progress: {progress}; --opacity: {opacity};" />
+	<div
+		class="fill"
+		style="--progress: {progress}; --opacity: {opacity};"
+	></div>
 </div>
 
 <style>
@@ -78,13 +106,15 @@
 		background: var(--color-background-input);
 		cursor: ew-resize;
 		container-type: size;
+		outline: 0;
 	}
 
-	.progress:hover {
+	:global(body:not(.fragment-dragging)) .progress:hover {
 		box-shadow: inset 0 0 0 1px var(--color-active);
 	}
 
-	.progress.dragging {
+	.progress.dragging,
+	:global(body:not(.fragment-dragging)) .progress:focus-visible {
 		box-shadow: 0 0 0 2px var(--color-active);
 	}