fragment-tools 0.1.20 → 0.2.0

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

@@ -1,10 +1,15 @@
 <script>
-	export let key;
-	export let visible = true;
-	export let secondary = false;
-	export let interactive = false;
-	export let displayName = undefined;
-	export let disabled = false;
+	let {
+		key,
+		visible = true,
+		secondary,
+		interactive,
+		displayName = undefined,
+		disabled = false,
+		children,
+		infos,
+		onclick,
+	} = $props();
 </script>
 
 <div
@@ -16,17 +21,17 @@
 	<div class="field__infos">
 		{#if displayName !== null}
 			{#if interactive}
-				<button class="field__label" {disabled} on:click
+				<button class="field__label" {disabled} {onclick}
 					>{displayName ?? key}</button
 				>
 			{:else}
 				<span class="field__label">{displayName ?? key}</span>
 			{/if}
 		{/if}
-		<slot name="infos" />
+		{@render infos?.()}
 	</div>
 	<div class="field__input">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 

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

@@ -1,5 +1,5 @@
 <script>
-	export let height = 20;
+	let { height = 20 } = $props();
 </script>
 
 <div class="field-space" style="height: {height}px"></div>

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

@@ -38,25 +38,67 @@
 	import Select from './fields/Select.svelte';
 	import TextInput from './fields/TextInput.svelte';
 	import * as triggersMap from '../triggers/index.js';
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-
-	export let index;
-	export let inputType = undefined;
-	export let eventName = undefined;
-	export let enabled = true;
-	export let controllable = false;
-	export let triggerable = false;
-	export let context;
-	export let onTrigger = () => {};
-	export let params = { key: [] };
-
+	import { onMount } from 'svelte';
+
+	let {
+		index,
+		inputType,
+		eventName,
+		enabled,
+		controllable = false,
+		triggerable = false,
+		context,
+		onchange = () => {},
+		onTrigger = () => {},
+		onDelete = () => {},
+		params = { key: [] },
+	} = $props();
+
+	let validInputs = $derived.by(() =>
+		[...Object.keys(inputs)].reduce((all, inputName) => {
+			const input = inputs[inputName];
+			const { disabled, events } = input;
+			const filteredEvents = events.filter((event) => {
+				return (
+					event.triggerable === triggerable &&
+					event.controllable === controllable
+				);
+			});
+
+			if (filteredEvents.length > 0) {
+				all[inputName] = { events: filteredEvents, disabled };
+			}
+
+			return all;
+		}, {}),
+	);
+
+	let inputOptions = $derived([
+		{ label: 'Select input', value: undefined, disabled: true },
+		...Object.keys(validInputs).map((inputName) => ({
+			value: inputName,
+			disabled: validInputs[inputName].disabled,
+		})),
+	]);
+
+	let eventOptions = $derived(
+		inputType
+			? [
+					{ label: '-', value: undefined, disabled: true },
+					...validInputs[inputType].events.map((event) => ({
+						value: event.name,
+					})),
+				]
+			: [],
+	);
+
+	let isValid = $derived(inputType && eventName);
+	let key = $derived(params.key);
 	let trigger;
-	let dispatch = createEventDispatcher();
 
 	function registerTrigger() {
+		let wasEnabled = trigger?.enabled;
 		if (trigger) {
-			enabled = trigger.enabled;
-
 			trigger.destroy();
 			trigger = null;
 		}
@@ -64,15 +106,17 @@
 		const createTrigger = triggersMap[eventName];
 
 		trigger = createTrigger(onTrigger, {
-			...params,
+			...$state.snapshot(params),
 			context,
 			hot: false,
-			enabled,
+			enabled: wasEnabled,
 		});
+
+		onchange(index, trigger);
 	}
 
-	function onTypeChange(event) {
-		inputType = event.detail;
+	function onTypeChange(value) {
+		inputType = value;
 
 		if (!eventOptions.includes(eventName)) {
 			eventName = undefined;
@@ -85,93 +129,51 @@
 		}
 	}
 
-	function onEventChange(event) {
+	function onEventChange(value) {
 		const clearParams =
 			inputType === 'MIDI' &&
 			eventName !== undefined &&
-			((eventName.includes('Number') && event.detail.includes('Note')) ||
-				(eventName.includes('Note') &&
-					event.detail.includes('Number')));
+			((eventName.includes('Number') && value.includes('Note')) ||
+				(eventName.includes('Note') && value.includes('Number')));
 
-		eventName = event.detail;
+		eventName = value;
 
 		if (clearParams) {
 			params.key = '';
 		}
 
-		if (inputType === 'Mouse') {
+		if (inputType === 'Mouse' || inputType === 'Keyboard') {
 			registerTrigger();
 		}
 	}
 
-	function onTextChange(e) {
-		params.key = e.detail;
+	function onTextChange(event) {
+		params.key = event.currentTarget.value;
 
 		registerTrigger();
 	}
 
 	function handleClickDelete() {
-		dispatch('delete', index);
+		onDelete(index);
 	}
 
 	function toggleTrigger() {
 		if (trigger) {
 			trigger.enabled = !trigger.enabled;
+			registerTrigger();
 		}
 	}
 
 	onMount(() => {
-		if (
-			(inputType === 'Mouse' && eventName) ||
-			(inputType && eventName && params.key)
-		) {
+		if (isValid) {
 			registerTrigger();
 		}
-	});
 
-	onDestroy(() => {
-		if (trigger) {
-			trigger.destroy();
+		return () => {
+			trigger?.destroy();
 			trigger = null;
-		}
+		};
 	});
-
-	$: validInputs = [...Object.keys(inputs)].reduce((all, inputName) => {
-		const input = inputs[inputName];
-		const { disabled, events } = input;
-		const filteredEvents = events.filter((event) => {
-			return (
-				event.triggerable === triggerable &&
-				event.controllable === controllable
-			);
-		});
-
-		if (filteredEvents.length > 0) {
-			all[inputName] = { events: filteredEvents, disabled };
-		}
-
-		return all;
-	}, {});
-
-	$: inputOptions = [
-		{ label: 'Select input', value: undefined, disabled: true },
-		...Object.keys(validInputs).map((inputName) => ({
-			value: inputName,
-			disabled: validInputs[inputName].disabled,
-		})),
-	];
-
-	$: eventOptions = inputType
-		? [
-				{ label: '-', value: undefined, disabled: true },
-				...validInputs[inputType].events.map((event) => ({
-					value: event.name,
-				})),
-			]
-		: [];
-
-	$: isValid = inputType && eventName;
-	$: key = params.key;
 </script>
 
 <div class="field-trigger {inputType ? inputType.toLowerCase() : ''}">
@@ -181,40 +183,40 @@
 		<button
 			class="activity"
 			class:valid={isValid}
-			class:enabled={trigger && trigger.enabled}
-			class:disabled={!trigger || !trigger.enabled}
-			on:click={toggleTrigger}
+			class:enabled
+			class:disabled={!enabled}
+			onclick={toggleTrigger}
 		></button>
 		<Select
 			name="trigger-input"
 			value={inputType}
 			options={inputOptions}
-			on:change={onTypeChange}
+			onchange={onTypeChange}
 		/>
 		{#if inputType}
 			<Select
 				options={eventOptions}
-				bind:value={eventName}
+				value={eventName}
 				disabled={inputType === undefined}
-				on:change={onEventChange}
+				onchange={onEventChange}
 			/>
 		{/if}
 		{#if inputType === 'Keyboard'}
-			<TextInput bind:value={key} label="key" on:input={onTextChange} />
+			<TextInput value={key} label="key" oninput={onTextChange} />
 		{/if}
 		{#if inputType === 'MIDI'}
 			<TextInput
-				bind:value={key}
+				value={key}
 				label={['onNoteOn', 'onNoteOff'].includes(eventName)
 					? 'note'
 					: 'number'}
-				on:input={onTextChange}
+				oninput={onTextChange}
 			/>
 		{/if}
 		<ButtonInput
 			label="delete"
 			showLabel={false}
-			on:click={handleClickDelete}
+			onclick={handleClickDelete}
 			--color-text="white"
 			--background-color="var(--color-red)"
 			--box-shadow-color-active="var(--color-lightred)"

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

@@ -2,46 +2,47 @@
 	import FieldTrigger from './FieldTrigger.svelte';
 	import ButtonInput from './fields/ButtonInput.svelte';
 
-	export let context;
-	export let onTrigger;
-	export let triggers;
-	export let triggerable = false;
-	export let controllable = false;
+	let {
+		context,
+		onTrigger,
+		triggers = $bindable(),
+		triggerable = false,
+		controllable = false,
+	} = $props();
 
-	function onTriggerDelete(e) {
-		const triggerIndex = e.detail;
-
-		$triggers = $triggers.filter((t, i) => i !== triggerIndex);
+	function onTriggerDelete(triggerIndex) {
+		triggers.splice(triggerIndex, 1);
+		// triggers = triggers.filter((t, i) => i !== triggerIndex);
 	}
 
 	function handleClickAdd() {
-		triggers.update((current) => {
-			return [
-				...current,
-				{
-					inputType: undefined,
-					eventName: undefined,
-				},
-			];
+		triggers.push({
+			inputType: undefined,
+			eventName: undefined,
+			enabled: false,
+			params: {},
 		});
 	}
 </script>
 
 {#if onTrigger}
-	<ButtonInput label="add trigger" on:click={handleClickAdd} />
+	<ButtonInput label="add trigger" onclick={handleClickAdd} />
 	<div class="field-triggers">
-		{#each $triggers as trigger, index}
+		{#each triggers as trigger, index}
 			<FieldTrigger
 				{index}
-				bind:inputType={trigger.inputType}
-				bind:eventName={trigger.eventName}
-				bind:params={trigger.params}
-				bind:enabled={trigger.enabled}
+				inputType={trigger.inputType}
+				eventName={trigger.eventName}
+				params={trigger.params}
+				enabled={trigger.enabled}
 				{onTrigger}
 				{context}
 				{controllable}
 				{triggerable}
-				on:delete={onTriggerDelete}
+				onchange={(index, trigger) => {
+					triggers[index] = trigger;
+				}}
+				onDelete={onTriggerDelete}
 			/>
 		{/each}
 	</div>

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

@@ -1,29 +1,54 @@
 <script>
 	import KeyBinding from '../components/KeyBinding.svelte';
 	import Params from '../modules/Params.svelte';
+	import { setContext } from 'svelte';
 
-	export let size = 0.3;
-	export let align = 'right';
-	export let output = false;
-	export let hidden = false;
+	let {
+		size = '340px',
+		align = 'right',
+		output = false,
+		hidden = false,
+		minimize = false,
+	} = $props();
 
-	$: visible = !hidden;
-	$: width = typeof size === 'number' ? `${size * 100}%` : size;
+	let visible = $state(!hidden);
+	let width = $derived(typeof size === 'number' ? `${size * 100}%` : size);
+	let current = $state({
+		minimized: minimize,
+	});
+
+	let minimizedSave = minimize;
+	let minimizedProp = $derived(minimize);
+	let minimized = $derived(current.minimized);
+
+	$effect(() => {
+		// override current.minimized state if prop changes
+		if (minimizedProp !== minimizedSave) {
+			current.minimized = minimizedProp;
+			minimizedSave = minimizedProp;
+		}
+	});
+
+	setContext('parent', current);
+	setContext('minimize', () => {
+		current.minimized = !current.minimized;
+	});
 </script>
 
 <div
-	class="container"
+	class="floating-params"
 	class:hidden={!visible}
 	class:align-left={align === 'left'}
 	class:align-right={align === 'right'}
+	class:minimized
 	style={`width: ${width};`}
 >
 	<Params {output} />
 </div>
-<KeyBinding key="h" on:trigger={() => (visible = !visible)} />
+<KeyBinding key="h" onTrigger={() => (visible = !visible)} />
 
 <style>
-	.container {
+	.floating-params {
 		--padding: 16px;
 		position: absolute;
 		top: var(--padding);
@@ -34,15 +59,28 @@
 		overflow: hidden;
 	}
 
-	.container.hidden {
+	.floating-params > :global(*) {
+		height: auto;
+		max-height: calc(100vh - 2 * var(--padding));
+	}
+
+	.floating-params :global(.module__container) {
+		max-height: calc(100vh - 2 * var(--padding) - var(--header-height));
+	}
+
+	.floating-params.minimized {
+		height: 25px;
+	}
+
+	.floating-params.hidden {
 		display: none;
 	}
 
-	.container.align-left {
+	.floating-params.align-left {
 		left: var(--padding);
 	}
 
-	.container.align-right {
+	.floating-params.align-right {
 		right: var(--padding);
 	}
 </style>

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

@@ -4,32 +4,43 @@
 	import Build from './Build.svelte';
 	import Row from './LayoutRow.svelte';
 	import ModuleRenderer from './ModuleRenderer.svelte';
-	import { layout } from '../stores/layout.js';
+	import { layout } from '../state/layout.svelte.js';
 	import KeyBinding from '../components/KeyBinding.svelte';
-	import { monitors, preview } from '../stores/rendering';
 
 	function toggleEdition() {
-		$layout.editing = !$layout.editing;
+		layout.editing = !layout.editing;
 	}
 
+	let components = [];
+
 	function togglePreview() {
-		if ($monitors.length === 1 && !$layout.previewing) {
-			$preview = $monitors[0].selected;
+		if (!layout.previewing) {
+			components = [...layout.components];
+			layout.components = layout.components
+				.filter((c) => c.root)
+				.map((root) => {
+					return {
+						...root,
+						children: [],
+					};
+				});
+		} else {
+			layout.components = components;
 		}
 
-		$layout.previewing = !$layout.previewing;
+		layout.previewing = !layout.previewing;
 	}
 </script>
 
 <Root>
-	{#if __BUILD__ || $layout.previewing}
+	{#if __BUILD__ || layout.previewing}
 		<Build />
 	{:else}
 		<Row size={1}>
-			<Column size={0.65}>
+			<Column size={1.5}>
 				<ModuleRenderer name="monitor" />
 			</Column>
-			<Column size={0.35}>
+			<Column size={1}>
 				<Row size={1}>
 					<ModuleRenderer name="exports" />
 				</Row>
@@ -41,9 +52,9 @@
 	{/if}
 </Root>
 {#if !__BUILD__}
-	<KeyBinding key="w" on:trigger={toggleEdition} />
-	<KeyBinding key="p" on:trigger={togglePreview} />
+	<KeyBinding key="w" onTrigger={toggleEdition} />
+	<KeyBinding key="p" onTrigger={togglePreview} />
 {/if}
-{#if $layout.editing}
-	<KeyBinding key="Escape" type="down" on:trigger={toggleEdition} />
+{#if layout.editing}
+	<KeyBinding key="Escape" type="down" onTrigger={toggleEdition} />
 {/if}

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

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