fragment-tools 0.1.20 → 0.2.0

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

@@ -1,49 +1,44 @@
-<script context="module">
-	let MODULE_ID = 0;
-
-	export let getModuleID = () => {
-		return MODULE_ID++;
-	};
-</script>
-
 <script>
 	import { getContext } from 'svelte';
-	import { layout } from '../stores/layout.js';
-
-	export let mID = undefined;
-	export let name;
-	export let slug = name;
-	export let scrollable = true;
-	export let hasHeader = true;
+	import { layout } from '../state/layout.svelte.js';
+	import { resize } from '../actions/resize.js';
+
+	let {
+		id,
+		name,
+		slug = name,
+		scrollable = true,
+		headless = false,
+		children,
+		headerLeft,
+		headerRight,
+		onresize,
+	} = $props();
 
 	const parent = getContext('parent');
+	const minimize = getContext('minimize');
 
-	const current = {
-		mID: !isNaN(mID) ? mID : MODULE_ID++,
+	const current = layout.createComponent({
+		id,
 		type: 'module',
 		name: slug,
-		hasHeader,
-	};
-
-	MODULE_ID = Math.max(MODULE_ID, !isNaN(current.mID) ? current.mID + 1 : 0);
-
-	parent.registerChild(current);
-
-	const m = getContext('module');
-	m.set(current);
+		headless,
+		origin: parent,
+	});
 </script>
 
 <div
 	class="module module--{slug}"
 	class:scrollable
-	class:no-header={!hasHeader}
-	class:editing={$layout.editing}
+	class:headless
+	class:editing={layout.editing}
+	bind:this={current.node}
 >
-	{#if hasHeader && name}
-		<header class="module__header">
+	{#if !headless && name}
+		<header class="module__header" onclick={minimize}>
 			<div class="header__col">
 				<div class="slot slot--left">
-					<slot name="header-left" />
+					{@render headerLeft?.()}
 				</div>
 			</div>
 			<div class="header__col">
@@ -51,13 +46,14 @@
 			</div>
 			<div class="header__col">
 				<div class="slot slot--right">
-					<slot name="header-right" />
+					{@render headerRight?.()}
+					<!-- <slot name="header-right" /> -->
 				</div>
 			</div>
 		</header>
 	{/if}
-	<div class="module__container">
-		<slot />
+	<div class="module__container" use:resize={onresize}>
+		{@render children?.()}
 	</div>
 </div>
 
@@ -71,7 +67,7 @@
 		align-items: stretch;
 	}
 
-	.module.no-header {
+	.module.headless {
 		--header-height: 0px;
 		grid-template-rows: minmax(0px, auto);
 	}

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

@@ -2,14 +2,20 @@
 	import ModuleHeaderSelect from './ModuleHeaderSelect.svelte';
 	import ModuleHeaderButton from './ModuleHeaderButton.svelte';
 
-	export let label = '';
-	export let permanent = false;
-	export let value = null;
-	export let border = false;
-	export let margin = true;
-	export let options = [];
-
-	$: disabled = options.length === 1;
+	let {
+		label = '',
+		permanent = false,
+		value,
+		border = false,
+		margin = true,
+		options = [],
+		onchange,
+		onclick,
+		children,
+		icon,
+	} = $props();
+
+	let disabled = $derived(options.length === 1);
 </script>
 
 <div
@@ -20,15 +26,16 @@
 	class:disabled
 >
 	{#if options.length > 0}
-		<ModuleHeaderSelect {options} {value} {disabled} on:change />
+		<ModuleHeaderSelect {options} {value} {disabled} {onchange} />
 	{:else}
-		<ModuleHeaderButton {label} on:click>
-			<slot name="text">
-				<div class="text">
-					<slot />
-				</div>
-			</slot>
-			<slot name="icon" />
+		<ModuleHeaderButton {label} {onclick}>
+			{#snippet text()}{/snippet}
+			{#if icon}
+				{@render icon?.()}
+			{/if}
+			<div class="text">
+				{@render children?.()}
+			</div>
 		</ModuleHeaderButton>
 	{/if}
 </div>

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

@@ -1,9 +1,9 @@
 <script>
-	export let label;
+	let { label, children, onclick } = $props();
 </script>
 
-<button class="module-header-action__button" aria-label={label} on:click>
-	<slot />
+<button class="module-header-action__button" aria-label={label} {onclick}>
+	{@render children?.()}
 </button>
 
 <style>

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

@@ -1,23 +1,15 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
-
 	import SelectChevrons from './SelectChevrons.svelte';
 
-	export let value;
-	export let options = [];
-	export let disabled = false;
-
-	const dispatch = createEventDispatcher();
-
-	function handleChange(event) {
-		dispatch('change', event.currentTarget.value);
-	}
+	let { value, options = [], disabled = false, onchange } = $props();
 </script>
 
 <div class="module-header-select">
 	<select
 		class="select"
-		on:change={handleChange}
+		{value}
+		{onchange}
+		onclick={(e) => e.stopPropagation()}
 		class:single={options.length === 1}
 		{disabled}
 	>

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

@@ -9,29 +9,91 @@
 </script>
 
 <script>
-	import Module from './Module.svelte';
-
-	export let mID = undefined;
-	export let name;
-	export let hasHeader = true;
-
-	const moduleList = {
-		monitor: () => import('../modules/Monitor.svelte'),
-		params: () => import('../modules/Params.svelte'),
-		midi: () => import('../modules/MidiPanel.svelte'),
-		console: () => import('../modules/Console.svelte'),
-		exports: () => import('../modules/Exports.svelte'),
-	};
+	import Monitor from '../modules/Monitor.svelte';
+	import Exports from '../modules/Exports.svelte';
+	import MidiPanel from '../modules/MidiPanel.svelte';
+	import Console from '../modules/Console.svelte';
+	import Params from '../modules/Params.svelte';
+	let { id, name, headless = false, params = {} } = $props();
+
+	// const moduleList = {
+	// 	monitor: () => import('../modules/Monitor.svelte'),
+	// 	params: () => import('../modules/Params.svelte'),
+	// };
+
+	// if (!__BUILD__) {
+	// 	Object.assign(moduleList, {
+	// 		midi: () => import('../modules/MidiPanel.svelte'),
+	// 		console: () => import('../modules/Console.svelte'),
+	// 		exports: () => import('../modules/Exports.svelte'),
+	// 	});
+	// }
 </script>
 
-{#if moduleList[name]}
-	{#await moduleList[name]()}
-		<Module {hasHeader} {mID} {name} />
-	{:then value}
-		<svelte:component this={value.default} {mID} {hasHeader} />
-	{:catch error}
-		<p>Something went wrong: {error.message}</p>
-	{/await}
+{#if name === 'monitor'}
+	<Monitor {id} {headless} {params} />
+{:else if name === 'exports'}
+	<Exports {id} {headless} {params} />
+{:else if name === 'console'}
+	<Console {id} {headless} {params} />
+{:else if name === 'params'}
+	<Params {id} {headless} {params} />
+{:else if name === 'midi'}
+	<MidiPanel {id} {headless} {params} />
 {:else}
-	<Module {hasHeader} {mID} {name} />
+	<div class="module-renderer">
+		<header class="module-renderer-header">
+			<span>Error</span>
+		</header>
+		<div class="module-renderer-error">
+			<div>
+				<p class="message">
+					Something went wrong while loading module:
+					<span class="module-name">{name}</span>
+				</p>
+				<p class="error">{error.message}</p>
+			</div>
+		</div>
+	</div>
 {/if}
+
+<style>
+	.module-renderer {
+		display: grid;
+		grid-template-rows: 25px 1fr;
+	}
+
+	.module-renderer-header {
+		display: flex;
+		height: 25px;
+		flex-shrink: 0;
+		justify-content: center;
+		align-items: center;
+
+		color: white;
+		font-size: 10px;
+		text-transform: capitalize;
+		user-select: none;
+
+		background-color: var(--color-lightblack);
+	}
+
+	.module-renderer-error {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		color: var(--color-red);
+		font-size: 11px;
+		text-align: center;
+		background: #2a0000;
+		border-color: #5c0000;
+	}
+
+	.message {
+		color: var(--color-text);
+	}
+
+	.module-name {
+		text-transform: capitalize;
+	}
+</style>

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

@@ -1,156 +1,140 @@
 <script>
-	import { rendering, SIZES, monitors } from '../stores/rendering.js';
-	import { sketchesCount } from '../stores/sketches.js';
+	import { SIZES, rendering } from '../state/rendering.svelte';
 	import Field from './Field.svelte';
 	import presets, {
 		PRESET_ORIENTATIONS,
 		getDimensionsForPreset,
 	} from '../lib/presets';
-	import { exports } from '../stores';
-	import ParamsMultisampling from './ParamsMultisampling.svelte';
+	import { exports } from '../state/exports.svelte';
+	// import ParamsMultisampling from './ParamsMultisampling.svelte';
 	import Select from './fields/Select.svelte';
 	import FieldInputRow from './fields/FieldInputRow.svelte';
 
-	let canvasWidth = $rendering.width;
-	let canvasHeight = $rendering.height;
-
-	function handleChangeDimensions(event) {
-		const [width, height] = event.detail;
-		const needsUpdate = canvasWidth !== width || canvasHeight !== height;
+	function handleChangeDimensions({ width, height }) {
+		const needsUpdate =
+			rendering.width !== width || rendering.height !== height;
 
 		if (needsUpdate) {
-			canvasWidth = width;
-			canvasHeight = height;
+			rendering.width = width;
+			rendering.height = height;
 
-			rendering.update((curr) => {
-				return {
-					...curr,
-					width,
-					height,
-				};
-			});
+			if (rendering.resizing === SIZES.FIXED) {
+				rendering.fixedWidth = width;
+				rendering.fixedHeight = height;
+			}
 		}
 	}
 
 	let sizes = Object.values(SIZES);
-	$: dimensionsEnabled = [SIZES.FIXED, SIZES.SCALE].includes(
-		$rendering.resizing,
+	let dimensions = $derived({
+		width: rendering.width,
+		height: rendering.height,
+	});
+	let dimensionsEnabled = $derived(
+		[SIZES.FIXED, SIZES.SCALE].includes(rendering.resizing),
 	);
+	let dimensionsParams = $state({
+		step: 1,
+		suffix: 'px',
+		locked: false,
+	});
 
-	$: {
-		if ($rendering.resizing === SIZES.PRESET) {
-			const { preset } = $rendering;
+	$effect(() => {
+		if (rendering.resizing === SIZES.PRESET) {
+			const { preset } = rendering;
 			const [width, height] = getDimensionsForPreset(preset, {
 				pixelsPerInch: 300,
-				orientation: $rendering.presetOrientation,
+				orientation: rendering.presetOrientation,
 			});
 
-			rendering.update((curr) => {
-				return {
-					...curr,
-					width,
-					height,
-				};
-			});
+			rendering.width = width;
+			rendering.height = height;
 		}
-	}
+	});
 </script>
 
 <Field
 	key="dimensions"
-	value={[$rendering.width, $rendering.height]}
-	on:change={handleChangeDimensions}
-	params={{
-		step: 1,
-		suffix: 'px',
-		locked: false,
-	}}
+	value={dimensions}
+	onchange={handleChangeDimensions}
+	bind:params={dimensionsParams}
 	disabled={!dimensionsEnabled}
 />
 <Field
 	key="canvasSize"
-	value={$rendering.resizing}
-	on:change={(event) => {
-		const resizing = event.detail;
-		let aspectRatio = 1;
+	value={rendering.resizing}
+	onchange={(resizing) => {
+		exports.pixelsPerInch = resizing === SIZES.PRESET ? 300 : 72;
 
-		if (resizing === SIZES.ASPECT_RATIO) {
-			// compute aspect ratio based on previous props
-			aspectRatio = $rendering.width / $rendering.height;
+		if (rendering.resizing !== SIZES.FIXED && resizing === SIZES.FIXED) {
+			rendering.width = rendering.fixedWidth;
+			rendering.height = rendering.fixedHeight;
 		}
 
-		$exports.pixelsPerInch = resizing === SIZES.PRESET ? 300 : 72;
-
-		rendering.update((curr) => {
-			return {
-				...curr,
-				resizing,
-				aspectRatio,
-			};
-		});
+		rendering.resizing = resizing;
 	}}
 	params={{
 		options: sizes,
 	}}
 />
-{#if $rendering.resizing === SIZES.ASPECT_RATIO}
+{#if rendering.resizing === SIZES.ASPECT_RATIO}
 	<Field
 		key="aspectRatio"
-		value={$rendering.aspectRatio}
-		on:change={(event) => {
-			$rendering.aspectRatio = event.detail;
+		value={rendering.aspectRatio}
+		onchange={(aspectRatio) => {
+			rendering.aspectRatio = aspectRatio;
 		}}
 		params={{
 			step: 0.01,
 		}}
 	/>
 {/if}
-{#if $rendering.resizing === SIZES.SCALE}
+{#if rendering.resizing === SIZES.SCALE}
 	<Field
 		key="zoom"
-		value={$rendering.scale}
-		on:change={(event) => {
-			$rendering.scale = event.detail;
+		value={rendering.scale}
+		onchange={(event) => {
+			rendering.scale = event;
 		}}
 		params={{
 			step: 0.01,
 		}}
 	/>
 {/if}
-{#if $rendering.resizing === SIZES.PRESET}
+<!-- {#if rendering.resizing === SIZES.PRESET}
 	<Field key="preset">
 		<FieldInputRow --grid-template-columns="1fr 1fr">
 			<Select
-				value={$rendering.preset}
+				value={rendering.preset}
 				options={presets}
-				on:change={(event) => {
-					$rendering.preset = event.detail;
+				onchange={(preset) => {
+					rendering.preset = preset;
 				}}
 			/>
 			<Select
-				value={$rendering.presetOrientation}
+				value={rendering.presetOrientation}
 				options={[
 					PRESET_ORIENTATIONS.PORTRAIT,
 					PRESET_ORIENTATIONS.LANDSCAPE,
 				]}
-				on:change={(event) => {
-					$rendering.presetOrientation = event.detail;
+				onchange={(presetOrientation) => {
+					rendering.presetOrientation = presetOrientation;
 				}}
 			/>
 		</FieldInputRow>
 	</Field>
-{/if}
+{/if} -->
 
-{#if $rendering.resizing !== SIZES.PRESET}
+{#if rendering.resizing !== SIZES.PRESET}
 	<Field
 		key="pixelRatio"
-		value={Number($rendering.pixelRatio)}
-		on:change={(event) => ($rendering.pixelRatio = event.detail)}
+		value={Number(rendering.pixelRatio)}
+		onchange={(pixelRatio) => (rendering.pixelRatio = pixelRatio)}
 		params={{
 			step: 0.1,
 		}}
 	/>
 {/if}
-{#if $sketchesCount > 1 && $monitors.length > 1}
+<!-- {#if $sketchesCount > 1 && $monitors.length > 1}
 	<ParamsMultisampling />
-{/if}
+{/if} -->

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

@@ -1,13 +1,24 @@
 <script>
-	import { onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
-	import { rendering } from '../stores/rendering';
+	import { rendering } from '../state/rendering.svelte';
 	import Build from './Build.svelte';
 
-	let saved = $rendering;
+	const { resizing, width, height, pixelRatio, aspectRatio, scale, preset } =
+		rendering;
 
 	onDestroy(() => {
-		$rendering = saved;
+		const prevRendering = {
+			resizing,
+			width,
+			height,
+			pixelRatio,
+			aspectRatio,
+			scale,
+			preset,
+		};
+
+		rendering.override(prevRendering);
 	});
 </script>
 

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

@@ -1,6 +1,5 @@
 <script>
-	export let width = 24;
-	export let height = 24;
+	let { width = 24, height = width } = $props();
 </script>
 
 <div class="chevrons" style={`width: ${width}px;`}>