fragment-tools 0.1.19 → 0.2.0

package/src/client/app/modules/Exports.svelte

@@ -2,90 +2,90 @@
 	import Module from '../ui/Module.svelte';
 	import Field from '../ui/Field.svelte';
 	import FieldGroup from '../ui/FieldGroup.svelte';
-	import { exports } from '../stores';
+	import { layout } from '../state/layout.svelte';
 	import {
-		recording,
-		capturing,
 		IMAGE_ENCODINGS,
 		VIDEO_FORMATS,
-	} from '../stores/exports';
+		exports,
+	} from '../state/exports.svelte';
 
-	export let mID;
-	export let hasHeader = true;
+	let { id = layout.getID(), headless = false } = $props();
 
 	const LABEL_RECORD = 'start';
 	const LABEL_RECORDING = 'stop';
 
-	function record() {
-		$recording = !$recording;
-	}
-
-	function capture() {
-		$capturing = !$capturing;
-	}
-
-	$: recordLabel = $recording ? LABEL_RECORDING : LABEL_RECORD;
+	let recordLabel = $derived(
+		exports.recording ? LABEL_RECORDING : LABEL_RECORD,
+	);
 </script>
 
-<Module {mID} {hasHeader} name="exports">
-	<FieldGroup name="image">
+<Module {id} {headless} name="exports">
+	<FieldGroup
+		name="image"
+		collapsed={exports.imageCollapsed}
+		onchange={(collapsed) => (exports.imageCollapsed = collapsed)}
+	>
 		<Field
 			key="encoding"
-			value={$exports.imageEncoding}
+			value={exports.imageEncoding}
 			params={{ options: IMAGE_ENCODINGS }}
-			on:change={(e) => {
-				$exports.imageEncoding = e.detail;
+			onchange={(value) => {
+				exports.imageEncoding = value;
 			}}
 		/>
 		<Field
 			key="quality"
-			value={$exports.imageQuality}
+			value={exports.imageQuality}
 			params={{ min: 1, max: 100, suffix: '%', triggerable: false }}
-			on:change={(e) => {
-				$exports.imageQuality = e.detail;
+			onchange={(value) => {
+				exports.imageQuality = value;
 			}}
 		/>
 		<Field
 			key="pixelsPerInch"
-			value={$exports.pixelsPerInch}
+			value={exports.pixelsPerInch}
 			params={{ step: 1 }}
-			on:change={(e) => {
-				$exports.pixelsPerInch = e.detail;
+			onchange={(value) => {
+				exports.pixelsPerInch = value;
 			}}
 		/>
 		<Field
 			key="count"
-			value={$exports.imageCount || 1}
+			value={exports.imageCount || 1}
 			params={{ step: 1 }}
-			on:change={(e) => {
-				$exports.imageCount = e.detail;
+			onchange={(value) => {
+				exports.imageCount = value;
 			}}
 		/>
 		<Field
 			key="screenshot"
-			value={capture}
+			value={() => (exports.capturing = !exports.capturing)}
 			params={{ label: 'capture', triggerable: false }}
 		/>
 	</FieldGroup>
-	<FieldGroup name="video">
+	<FieldGroup
+		name="video"
+		collapsed={exports.videoCollapsed}
+		onchange={(collapsed) => (exports.videoCollapsed = collapsed)}
+	>
 		<Field
 			key="framerate"
-			value={$exports.framerate}
-			on:change={(e) => {
-				$exports.framerate = e.detail;
+			value={exports.framerate}
+			onchange={(value) => {
+				exports.framerate = value;
 			}}
 		/>
 		<Field
 			key="format"
-			value={$exports.videoFormat}
+			value={exports.videoFormat}
 			params={{ options: Object.values(VIDEO_FORMATS) }}
-			on:change={(e) => {
-				$exports.videoFormat = e.detail;
+			onchange={(value) => {
+				exports.videoFormat = value;
 			}}
 		/>
 		<Field
 			key="quality"
-			value={$exports.videoQuality}
+			value={exports.videoQuality}
 			params={{
 				min: 1,
 				max: 100,
@@ -93,30 +93,30 @@
 				suffix: '%',
 				triggerable: false,
 			}}
-			on:change={(e) => {
-				$exports.videoQuality = e.detail;
+			onchange={(value) => {
+				exports.videoQuality = value;
 			}}
 		/>
 		<Field
 			key="useDuration"
-			value={$exports.useDuration}
-			on:change={(e) => {
-				$exports.useDuration = e.detail;
+			value={exports.useDuration}
+			onchange={(value) => {
+				exports.useDuration = value;
 			}}
 		/>
-		{#if $exports.useDuration}
+		{#if exports.useDuration}
 			<Field
 				key="loopCount"
-				value={$exports.loopCount}
+				value={exports.loopCount}
 				params={{ step: 1 }}
-				on:change={(e) => {
-					$exports.loopCount = e.detail;
+				onchange={(value) => {
+					exports.loopCount = value;
 				}}
 			/>
 		{/if}
 		<Field
 			key="record"
-			value={record}
+			value={() => (exports.recording = !exports.recording)}
 			params={{ label: recordLabel, triggerable: false }}
 		/>
 	</FieldGroup>

package/src/client/app/modules/MidiPanel.svelte

@@ -4,12 +4,13 @@
 	import Field from '../ui/Field.svelte';
 	import MIDI from '../inputs/MIDI.js';
 
-	export let mID;
-	export let hasHeader;
+	let { mID, headless = false, ...restProps } = $props();
 
-	let input, output;
-	let inputs = [],
-		outputs = [];
+	let input = $state(null);
+	let output = $state(null);
+	let inputs = $state([]);
+	let outputs = $state([]);
+	let messages = $state([]);
 
 	function createDeviceOptions(deviceMap = new Map()) {
 		let options = [];
@@ -35,15 +36,10 @@
 		return options;
 	}
 
-	let messages = [];
-
-	$: {
+	$effect(() => {
 		MIDI.selectedInputID = input;
-	}
-
-	$: {
 		MIDI.selectedOutputID = output;
-	}
+	});
 
 	onMount(async () => {
 		await MIDI.request();
@@ -74,21 +70,18 @@
 				? ` note:${note.name}`
 				: ``;
 
-			messages = [
-				...messages,
-				`${time} ${type} number:${note.number}${noteLog}`,
-			];
+			messages.push(`${time} ${type} number:${note.number}${noteLog}`);
 		});
 
 		refresh();
 	});
 </script>
 
-<Module {mID} {hasHeader} name="MIDI" {...$$props} slug="midi">
+<Module {headless} name="MIDI" {...restProps} slug="midi">
 	<Field
 		key="inputs"
 		value={input}
-		on:change={(event) => (input = event.detail)}
+		onchange={(value) => (input = value)}
 		params={{
 			options: inputs,
 		}}
@@ -96,7 +89,7 @@
 	<Field
 		key="outputs"
 		value={output}
-		on:change={(event) => (output = event.detail)}
+		onchange={(value) => (output = value)}
 		params={{
 			options: outputs,
 		}}

package/src/client/app/modules/Monitor.svelte

@@ -1,74 +1,166 @@
-<script context="module">
-	let ID = 0;
-</script>
-
 <script>
-	import { onMount, onDestroy } from 'svelte';
 	import Module from '../ui/Module.svelte';
 	import SketchRenderer from '../ui/SketchRenderer.svelte';
-	import OutputRenderer from '../ui/OutputRenderer.svelte';
 	import SketchSelect from '../ui/SketchSelect.svelte';
-	import { sketchesKeys } from '../stores/sketches.js';
-	import { monitors, preview } from '../stores/rendering';
-
-	export let mID;
-	export let hasHeader = true;
-	export let sketchKey = null;
-
-	let id = ID++;
-	let name = 'monitor';
-	let selected = sketchKey
-		? sketchKey
-		: $preview
-			? $preview
-			: $sketchesKeys[Math.min(id, $sketchesKeys.length - 1)];
-
-	sketchesKeys.subscribe((keys) => {
-		if (!selected && keys.length > 0) {
-			$monitors = $monitors.map((monitor) => {
-				if (monitor.id === id) {
-					monitor.selected =
-						$sketchesKeys[Math.min(id, $sketchesKeys.length - 1)];
-				}
 
-				return monitor;
-			});
-		}
+	import ErrorOverlay from '../ui/ErrorOverlay.svelte';
+	import { errors } from '../state/errors.svelte.js';
+	import { onMount } from 'svelte';
+	import { layout } from '../state/layout.svelte';
+	import { rendering, SIZES } from '../state/rendering.svelte.js';
+	import ModuleHeaderAction from '../ui/ModuleHeaderAction.svelte';
+	import { sketchesManager } from '../state/sketches.svelte';
+
+	let { id = layout.getID(), headless = false, params } = $props();
+
+	let key = $derived(
+		sketchesManager.keys.includes(params.selected) ||
+			(params.selected === 'output' && sketchesManager.keys.length > 1)
+			? params.selected
+			: sketchesManager.keys[0],
+	);
+
+	let monitors = $derived(rendering.monitors);
+	let monitorID = rendering.getMonitorID();
+	let index = $derived(monitors.findIndex((m) => m.id === monitorID));
+	let name = $derived(
+		`Monitor ${monitors.length > 1 ? index + 1 : ''}`.trim(),
+	);
+	let monitor = $derived(monitors[index]);
+
+	// display error if error context match current key
+	// or if an error doesn't match any params from monitor
+	let error = $derived(
+		errors.has(key)
+			? errors.get(key)
+			: monitors.length === 1 ||
+				  !monitors.some(
+						(m) => m.selected === errors.keys().next().value,
+				  )
+				? errors.values().next().value
+				: null,
+	);
+
+	let dimensions = $state({
+		width: undefined,
+		height: undefined,
 	});
+	let node;
+	let zoomLevel = $derived.by(() => {
+		const zx = dimensions.width / rendering.width;
+		const zy = dimensions.height / rendering.height;
 
-	onMount(() => {
-		$monitors = [
-			...$monitors,
-			{
-				id,
-				selected,
-			},
-		];
+		if (zx >= 1 && zy >= 1) {
+			return 100;
+		} else {
+			return Math.round(Math.min(zx, zy) * 100);
+		}
 	});
 
-	monitors.subscribe((all) => {
-		const current = all.find((monitor) => monitor.id === id);
+	function checkForResize(resizing, { width, height }) {
+		if (isFinite(width) && isFinite(height)) {
+			let isWindowResize = resizing === SIZES.WINDOW;
+			let isAspectResize = resizing === SIZES.ASPECT_RATIO;
+			let canUpdate = isWindowResize || isAspectResize;
+
+			if (canUpdate) {
+				let newWidth, newHeight;
+
+				if (isWindowResize) {
+					newWidth = Math.round(width);
+					newHeight = Math.round(height);
+				} else if (isAspectResize) {
+					const { offsetWidth, offsetHeight } = node;
+					const aspectRatio = rendering.aspectRatio;
+					const monitorRatio = offsetWidth / offsetHeight;
 
-		if (current && current.selected !== selected) {
-			selected = current.selected;
+					if (aspectRatio < monitorRatio) {
+						newHeight = offsetHeight;
+						newWidth = Math.round(newHeight * aspectRatio);
+					} else {
+						newWidth = offsetWidth;
+						newHeight = Math.round(newWidth / aspectRatio);
+					}
+				}
+
+				let needsUpdate =
+					newWidth !== rendering.width ||
+					newHeight !== rendering.height;
+
+				if (needsUpdate) {
+					rendering.width = newWidth;
+					rendering.height = newHeight;
+				}
+			}
 		}
+	}
+
+	onMount(() => {
+		rendering.monitors.push({
+			id: monitorID,
+			dimensions,
+		});
+
+		return () => {
+			const monitorIndex = rendering.monitors.findIndex(
+				(m) => m.id === monitorID,
+			);
+			rendering.monitors.splice(monitorIndex, 1);
+		};
 	});
 
-	onDestroy(() => {
-		$monitors = $monitors.filter((m) => m.id !== id);
+	$effect(() => {
+		if (index === 0) {
+			checkForResize(rendering.resizing, dimensions);
+		}
 	});
 
-	$: index = $monitors.findIndex((monitor) => monitor.id === id);
-	$: moduleName = `${name} ${$monitors.length > 1 ? index + 1 : ''}`;
+	/**
+	 *
+	 * @param {ResizeObserverEntry[]} event
+	 */
+	function onresize(event) {
+		const { contentRect, target } = event[0];
+
+		if (!node) node = target;
+
+		dimensions.width = contentRect.width;
+		dimensions.height = contentRect.height;
+	}
 </script>
 
-<Module {hasHeader} {mID} slug="monitor" name={moduleName} scrollable={false}>
-	<svelte:fragment slot="header-left">
-		<SketchSelect monitorID={id} {selected} />
-	</svelte:fragment>
-	{#if selected && selected !== 'output'}
-		<SketchRenderer key={selected} {id} />
-	{:else if selected}
-		<OutputRenderer />
+{#snippet headerLeft()}
+	<SketchSelect
+		monitorID={id}
+		sketchKey={key}
+		onchange={(event) => {
+			params.selected = event.target.value;
+		}}
+	/>
+{/snippet}
+
+{#snippet headerRight()}
+	<ModuleHeaderAction
+		value={zoomLevel}
+		permanent
+		border
+		options={[{ value: zoomLevel, label: `${zoomLevel}%` }]}
+	/>
+{/snippet}
+
+<Module
+	{id}
+	{headless}
+	slug="monitor"
+	{name}
+	scrollable={false}
+	{headerLeft}
+	{headerRight}
+	{onresize}
+>
+	<!-- {#if selected && selected !== 'output'} -->
+	<SketchRenderer {key} {id} />
+	{#if error}
+		<ErrorOverlay {error} />
 	{/if}
 </Module>