fragment-tools 0.1.19 → 0.2.0

package/src/client/app/state/sketches.svelte.js

@@ -0,0 +1,73 @@
+import { displayError } from '../state/errors.svelte.js';
+import { sketches as all } from '@fragment/sketches';
+import Sketch from './Sketch.svelte.js';
+import { rendering } from './rendering.svelte.js';
+import { removeHotListeners } from '../triggers/index.js';
+
+class SketchesManager {
+	sketches = $state({});
+	keys = $derived(Object.keys(this.sketches));
+	count = $derived(this.keys.length);
+
+	async loadSketch(collection, key) {
+		try {
+			let sketch = await collection[key]();
+
+			await rendering.preloadRenderer({
+				renderingMode: sketch.rendering,
+				renderer: sketch.renderer,
+			});
+
+			return sketch;
+		} catch (error) {
+			console.error(error);
+			displayError(error, key);
+		}
+	}
+
+	async loadAll(collection) {
+		const keys = [...Object.keys(collection)];
+
+		Object.keys(this.sketches).forEach((key) => {
+			removeHotListeners(key);
+
+			if (!keys.includes(key)) {
+				delete this.sketches[key];
+			}
+		});
+
+		const loadedSketches = await Promise.all(
+			keys.map((key) => this.loadSketch(collection, key)),
+		);
+
+		const newSketches = keys.reduce((all, key, index) => {
+			if (loadedSketches[index]) {
+				all[key] = loadedSketches[index];
+			}
+
+			return all;
+		}, {});
+
+		const newInstancedSketches = Object.keys(newSketches).reduce(
+			(all, key, index) => {
+				const prevSketch = this.sketches[key];
+
+				const instanced = new Sketch({
+					key,
+					instance: newSketches[key],
+					previous: prevSketch,
+				});
+
+				all[key] = instanced;
+
+				return all;
+			},
+			{},
+		);
+
+		this.sketches = newInstancedSketches;
+	}
+}
+
+export let sketchesManager = new SketchesManager();
+sketchesManager.loadAll(all);

package/src/client/app/state/utils.svelte.js

@@ -0,0 +1,65 @@
+export function persist(key, data) {
+	try {
+		window.localStorage.setItem(`fragment.${key}`, JSON.stringify(data));
+	} catch (err) {
+		throw err;
+	}
+}
+
+export function hydrate(key, target = {}, defaultValue = {}) {
+	try {
+		const storageKey = `fragment.${key}`;
+		const item = window.localStorage.getItem(storageKey);
+
+		if (item) {
+			const data = JSON.parse(item);
+
+			if (target && typeof data === 'object') {
+				Object.keys(data).forEach((key) => {
+					if (target[key] !== undefined) {
+						target[key] = data[key];
+					}
+				});
+			}
+
+			return data;
+		}
+
+		return defaultValue;
+	} catch (err) {
+		console.error(err);
+	}
+}
+
+export function isObject(item) {
+	return item && typeof item === 'object';
+}
+
+export function isFunction(item) {
+	return item && typeof item === 'function';
+}
+
+export function deepAssign(target, source) {
+	for (const key in source) {
+		if (isObject(source[key]) && isObject(target[key])) {
+			deepAssign(target[key], source[key]);
+		} else {
+			Object.assign(target, { [key]: source[key] });
+		}
+	}
+}
+
+export function deepEqual(target, source) {
+	if (isObject(target) && isObject(target)) {
+		let isEqual = true;
+		for (const key in source) {
+			if (isEqual) {
+				isEqual = deepEqual(target[key], source[key]);
+			}
+		}
+
+		return isEqual;
+	}
+
+	return target === source;
+}

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

@@ -3,60 +3,50 @@
 
 	import Monitor from '../modules/Monitor.svelte';
 	import Params from '../modules/Params.svelte';
-	import { layout } from '../stores/layout';
-	import { override, preview } from '../stores/rendering';
-	import { sketches, sketchesKeys } from '../stores/sketches';
 	import FloatingParams from './FloatingParams.svelte';
 	import Column from './LayoutColumn.svelte';
 	import Row from './LayoutRow.svelte';
+	import { sketchesManager } from '../state/sketches.svelte';
+	import { rendering } from '../state/rendering.svelte';
 
 	console.log(`Made with Fragment. https://fragment.tools`);
 
-	let gui, style, head;
-	let defaultGUIConfig = {
-		position: 'float',
-		align: 'right',
-		size: 0.3,
-		output: false,
-		hidden: false,
-	};
+	let sketchKey = $derived(sketchesManager.keys[0]);
 
-	let guiConfig = defaultGUIConfig;
-	$: sketchKey = $layout.previewing && $preview ? $preview : $sketchesKeys[0];
-	$: sketch = $sketches[sketchKey];
+	let sketch = $derived(sketchesManager.sketches[sketchKey]);
 
-	$: {
-		if (sketch) {
-			if (sketch.buildConfig) {
-				override(sketch.buildConfig);
-			}
-
-			const config = sketch.buildConfig ? sketch.buildConfig : {};
-			gui = config.gui;
+	let gui = $derived(sketch?.buildConfig?.gui);
+	let guiOutput = $derived(gui?.output);
+	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);
+	let styles = $derived(sketch?.buildConfig?.styles ?? '');
 
-			if (gui && typeof gui === 'object') {
-				guiConfig = {
-					...defaultGUIConfig,
-					...gui,
-				};
-			}
+	/** @type {HTMLHeadElement} */
+	let head;
+	/** @type {HTMLStyleElement} */
+	let style;
 
-			const { styles = '' } = config;
-
-			if (styles !== '') {
-				head = document.getElementsByTagName('head')[0];
+	$effect(() => {
+		rendering.override(sketch?.buildConfig);
+	});
 
-				if (style) {
-					head.removeChild(style);
-				}
+	$effect(() => {
+		if (styles !== '') {
+			head = document.getElementsByTagName('head')[0];
 
-				style = document.createElement('style');
-				style.setAttribute('type', 'text/css');
-				style.appendChild(document.createTextNode(styles));
-				head.appendChild(style);
+			if (style) {
+				head.removeChild(style);
 			}
+
+			style = document.createElement('style');
+			style.setAttribute('type', 'text/css');
+			style.appendChild(document.createTextNode(styles));
+			head.appendChild(style);
 		}
-	}
+	});
 
 	onDestroy(() => {
 		if (style && head) {
@@ -65,34 +55,37 @@
 	});
 </script>
 
-{#if gui}
-	{#if guiConfig.position === 'fixed'}
+{#if sketch}
+	{#if guiPosition === 'fixed'}
 		<Row>
-			{#if guiConfig.align === 'right'}
-				<Column size={1 - guiConfig.size}>
-					<Monitor hasHeader={false} {sketchKey} />
+			{#if guiAlign === 'left'}
+				<Column size={guiSize}>
+					<Params />
 				</Column>
-				<Column size={guiConfig.size}>
-					<Params hasHeader={false} />
+				<Column size={1 - guiSize}>
+					<Monitor params={{ selected: sketchKey }} />
 				</Column>
 			{:else}
-				<Column size={guiConfig.size}>
-					<Params hasHeader={false} />
+				<Column size={1 - guiSize}>
+					<Monitor params={{ selected: sketchKey }} />
 				</Column>
-				<Column size={1 - guiConfig.size}>
-					<Monitor hasHeader={false} {sketchKey} />
+				<Column size={guiSize}>
+					<Params />
 				</Column>
 			{/if}
 		</Row>
 	{:else}
-		<Monitor hasHeader={false} {sketchKey} />
-		<FloatingParams
-			output={guiConfig.output}
-			align={guiConfig.align}
-			size={guiConfig.size}
-			hidden={guiConfig.hidden}
-		/>
+		<Row>
+			<Monitor headless {sketchKey} params={{ selected: sketchKey }} />
+			{#if gui}
+				<FloatingParams
+					output={guiOutput}
+					align={guiAlign}
+					size={guiSize}
+					hidden={guiHidden}
+					minimize={guiMinimize}
+				/>
+			{/if}
+		</Row>
 	{/if}
-{:else}
-	<Monitor hasHeader={false} />
 {/if}

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

@@ -1,5 +1,5 @@
 <script>
-	import { clearErrors } from '../stores/errors';
+	import { clearErrors } from '../state/errors.svelte';
 
 	export let error;
 
@@ -20,7 +20,7 @@
 		? error.stack
 				.split('\n')
 				.filter((line, i, s) => (s.length === 1 ? true : i !== 0))
-				.filter((line) => !line.includes('/app'))
+				.filter((line) => !line.includes('/app/'))
 				.map((line) => {
 					// remove path to file in URL
 					line = line.replace(

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

@@ -27,66 +27,42 @@
 </script>
 
 <script>
-	import { createEventDispatcher } from 'svelte';
-
 	import FieldSection from './FieldSection.svelte';
 	import FieldTriggers from './FieldTriggers.svelte';
 	import { download } from '../utils/file.utils.js';
 	import { map } from '../utils/math.utils';
 	import frameDebounce from '../lib/helpers/frameDebounce.js';
-	import { getStore } from '../stores/utils';
-	import { writable } from 'svelte/store';
 	import { inferFieldType } from '../utils/fields.utils.js';
-
-	export let key = '';
-	export let value = null;
-	export let initialValue = value;
-	export let context = null;
-	export let params = {};
-	export let type = null;
-	export let disabled = false;
-	export let displayName = undefined;
-	export let index = null;
-
-	let offsetWidth;
-	let showTriggers = false;
-
-	const store = getStore(
-		context,
-		{ props: {} },
-		{
-			persist: context !== null,
-		},
-	);
-
-	if (!$store.props[key]) {
-		$store.props[key] = { triggers: [] };
-	}
-
-	let triggers = writable(
-		$store.props[key].triggers.filter(
-			(trigger) => trigger.inputType !== undefined,
-		),
-	);
-	triggers.subscribe((all) => {
-		store.update((curr) => {
-			curr.props[key].triggers = all;
-
-			return curr;
-		});
-	});
-
-	const dispatch = createEventDispatcher();
+	import IconTriggers from '../components/IconTriggers.svelte';
+	import IconLocked from '../components/IconLocked.svelte';
+
+	let {
+		key,
+		value = null,
+		initialValue = value,
+		context = null,
+		params = $bindable({}),
+		type = null,
+		disabled = false,
+		displayName = undefined,
+		index = null,
+		onchange,
+		onclick = () => {},
+		children,
+		triggers = [],
+	} = $props();
+
+	let showTriggers = $state(false);
 
 	const onTriggers = {
 		checkbox: () => {
 			value = !value;
 
-			dispatch('change', value);
+			onchange(value);
 		},
 		button: (event) => {
 			value(event);
-			dispatch('click', event);
+			onclick(event);
 		},
 		download: (event) => {
 			let [data, filename] = value(event);
@@ -105,32 +81,23 @@
 				let step = params.step ? params.step : 1;
 				let value = Math.round(v * (1 / step)) / (1 / step);
 
-				dispatch('change', value);
+				onchange(value);
 			}
 		},
 	};
 
-	$: fieldType = inferFieldType({ type, value, params, key });
-	$: fieldProps = composeFieldProps(params, disabled);
-	$: onTrigger = frameDebounce(onTriggers[fieldType]);
-	$: input = fields[fieldType];
-	$: triggerable =
+	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 triggerable = $derived(
 		params.triggerable !== false &&
-		((fieldType === fieldTypes.NUMBER &&
-			isFinite(params.min) &&
-			isFinite(params.max)) ||
-			fieldType === fieldTypes.BUTTON);
-	$: {
-		const isDownload = fieldType === fieldTypes.DOWNLOAD;
-		const isButton = fieldType === fieldTypes.BUTTON;
-		if ((isDownload || isButton) && params.label == undefined) {
-			fieldProps.label = isDownload ? 'download' : 'run';
-		}
-	}
-	$: xxsmall = offsetWidth < 200;
-	$: xsmall = !xxsmall && offsetWidth < 260;
-	$: small = !xxsmall && !xsmall && offsetWidth < 320;
-	$: triggersActive = $triggers.length > 0;
+			((fieldType === fieldTypes.NUMBER &&
+				isFinite(params.min) &&
+				isFinite(params.max)) ||
+				fieldType === fieldTypes.BUTTON),
+	);
+	let triggersActive = $derived(triggers.length > 0);
 
 	function toggleTriggers(event) {
 		event.preventDefault();
@@ -153,140 +120,45 @@
 <div
 	class="field"
 	class:disabled
-	class:xxsmall
-	class:xsmall
-	class:small
 	class:changed={!disabled && hasChanged(initialValue, value)}
-	bind:offsetWidth
 	style="--index: {index};"
 >
 	<FieldSection
 		{key}
 		{displayName}
 		interactive={triggerable}
-		on:click={toggleTriggers}
+		onclick={toggleTriggers}
 		{disabled}
 	>
-		<div slot="infos" class="field__actions">
-			{#if triggerable && !disabled}
-				<button
-					on:click={toggleTriggers}
-					class="field__action field__action--triggers"
-					class:active={triggersActive}
-				>
-					<svg width="16" height="16" fill="none" viewBox="0 0 24 24">
-						<path
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="1.5"
-							d="M4.75 8H7.25"
-						/>
-						<path
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="1.5"
-							d="M12.75 8H19.25"
-						/>
-						<path
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="1.5"
-							d="M4.75 16H12.25"
-						/>
-						<path
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="1.5"
-							d="M17.75 16H19.25"
-						/>
-						<circle
-							cx="10"
-							cy="8"
-							r="2.25"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="1.5"
-						/>
-						<circle
-							cx="15"
-							cy="16"
-							r="2.25"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="1.5"
-						/>
-					</svg>
-				</button>
-			{/if}
-			{#if fieldType === 'vec' && !disabled}
-				<button
-					class="field__action field__action--lock"
-					on:click={() => (params.locked = !params.locked)}
-				>
-					{#if params.locked}
-						<svg
-							class="action__icon"
-							width="16"
-							height="16"
-							fill="none"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="1.5"
-								d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"
-							/>
-							<path
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="1.5"
-								d="M7.75 10.5V10.3427C7.75 8.78147 7.65607 7.04125 8.74646 5.9239C9.36829 5.2867 10.3745 4.75 12 4.75C13.6255 4.75 14.6317 5.2867 15.2535 5.9239C16.3439 7.04125 16.25 8.78147 16.25 10.3427V10.5"
-							/>
-						</svg>
-					{:else}
-						<svg
-							class="action__icon"
-							width="16"
-							height="16"
-							fill="none"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="1.5"
-								d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"
-							/>
-							<path
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="1.5"
-								d="M7.75 10.5V9.84343C7.75 8.61493 7.70093 7.29883 8.42416 6.30578C8.99862 5.51699 10.0568 4.75 12 4.75C14 4.75 15.25 6.25 15.25 6.25"
-							/>
-						</svg>
-					{/if}
-				</button>
-			{/if}
-		</div>
+		{#snippet infos()}
+			<div class="field__actions">
+				{#if triggerable && !disabled}
+					<button
+						onclick={toggleTriggers}
+						class="field__action field__action--triggers"
+						class:active={triggersActive}
+					>
+						<IconTriggers />
+					</button>
+				{/if}
+				{#if fieldType === fieldTypes.VEC && !disabled}
+					<button
+						class="field__action field__action--lock"
+						onclick={() => (params.locked = !params.locked)}
+					>
+						<IconLocked locked={params.locked} />
+					</button>
+				{/if}
+			</div>
+		{/snippet}
 		<svelte:component
 			this={input}
 			{value}
 			{...fieldProps}
-			on:change
-			on:click={onTrigger}
+			{onchange}
+			onclick={onTrigger}
 		/>
-		<slot />
+		{@render children?.()}
 	</FieldSection>
 	{#if triggerable}
 		<FieldSection {key} visible={showTriggers} secondary>
@@ -294,8 +166,8 @@
 				{triggers}
 				{onTrigger}
 				{context}
-				triggerable={fieldType === 'button'}
-				controllable={fieldType === 'number'}
+				triggerable={fieldType === fieldTypes.BUTTON}
+				controllable={fieldType === fieldTypes.NUMBER}
 			/>
 		</FieldSection>
 	{/if}
@@ -306,6 +178,8 @@
 		--column-gap: 3px;
 		--padding: 6px;
 
+		position: relative;
+
 		width: 100%;
 
 		padding: 3px 6px 3px 12px;

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

@@ -1,16 +1,15 @@
 <script>
-	export let name;
-
-	export let collapsed = false;
+	let { name, collapsed = false, children, onchange = () => {} } = $props();
 
 	function handleClick() {
 		collapsed = !collapsed;
+		onchange(collapsed);
 	}
 </script>
 
 <div class="field-group {collapsed ? 'collapsed' : ''}">
 	<header class="header">
-		<button class="header__action" on:click={handleClick}>
+		<button class="header__action" onclick={handleClick}>
 			<svg
 				class="header__icon"
 				width="24"
@@ -30,7 +29,7 @@
 		</button>
 	</header>
 	<div class="content">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>