fragment-tools 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {

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

@@ -0,0 +1,64 @@
+<script>
+	import { onDestroy } from 'svelte';
+	import { sketchesManager } from '../state/sketches.svelte';
+	import { rendering } from '../state/rendering.svelte';
+	import { layout } from '../state/layout.svelte';
+	import LayoutBuild from '../ui/LayoutBuild.svelte';
+
+	console.log(`Made with Fragment. https://fragment.tools`);
+
+	let sketchKey = $derived(sketchesManager.keys[0]);
+	let sketch = $derived(sketchesManager.sketches[sketchKey]);
+	let buildConfig = $derived(sketch?.buildConfig ?? {});
+	let persistent = $derived(buildConfig.layout?.persistent ?? false);
+	let styles = $derived(buildConfig?.styles ?? '');
+
+	/** @type {HTMLHeadElement} */
+	let head;
+	/** @type {HTMLStyleElement} */
+	let style;
+
+	$effect(() => {
+		if (__BUILD__) {
+			layout.persistent = persistent;
+		} else if (persistent && layout.previewing) {
+			console.warn(`Layout is not preserved while previewing`);
+		}
+	});
+
+	$effect(() => {
+		rendering.override(sketch?.buildConfig);
+	});
+
+	$effect(() => {
+		if (styles !== '') {
+			head = document.getElementsByTagName('head')[0];
+
+			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) {
+			head.removeChild(style);
+		}
+	});
+</script>
+
+{#if sketch}
+	{#if buildConfig.layout?.component}
+		{#await buildConfig.layout.component() then layoutModule}
+			{@const LayoutBuildCustom = layoutModule.default}
+			<LayoutBuildCustom {sketchKey} {buildConfig} {sketch} />
+		{/await}
+	{:else}
+		<LayoutBuild {sketchKey} {sketch} {buildConfig} />
+	{/if}
+{/if}

package/src/client/app/{ui → components}/Preview.svelte

@@ -1,7 +1,6 @@
 <script>
-	import { onDestroy, onMount } from 'svelte';
-
 	import { rendering } from '../state/rendering.svelte';
+	import { onDestroy } from 'svelte';
 	import Build from './Build.svelte';
 
 	const { resizing, width, height, pixelRatio, aspectRatio, scale, preset } =

package/src/client/app/inputs/MIDI.js

@@ -125,7 +125,6 @@ class MIDI extends Input {
 	}
 
 	async request() {
-		console.log('MIDI :: request!');
 		try {
 			if (!this.requesting && !this.access) {
 				localStorage.setItem(LOCAL_STORAGE_KEY, true);

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

@@ -6,17 +6,19 @@
 
 	let { mID, headless = false, ...restProps } = $props();
 
-	let input = $state(null);
-	let output = $state(null);
-	let inputs = $state([]);
-	let outputs = $state([]);
+	let input = $state(undefined);
+	let output = $state(undefined);
+	let inputs = $state(MIDI.inputs);
+	let outputs = $state(MIDI.outputs);
+	let inputOptions = $derived.by(() => createDeviceOptions(inputs));
+	let outputOptions = $derived.by(() => createDeviceOptions(outputs));
 	let messages = $state([]);
 
 	function createDeviceOptions(deviceMap = new Map()) {
 		let options = [];
 
 		if (deviceMap.size !== 0) {
-			options.push({ value: 'none', label: 'No device selected.' });
+			options.push({ value: undefined, label: 'No device selected.' });
 		}
 
 		for (let entry of deviceMap) {
@@ -30,7 +32,7 @@
 		}
 
 		if (options.length === 0) {
-			options = [{ value: 'none', label: 'No device detected.' }];
+			options.push({ value: undefined, label: 'No device detected.' });
 		}
 
 		return options;
@@ -45,15 +47,23 @@
 		await MIDI.request();
 
 		function refresh() {
-			inputs = createDeviceOptions(MIDI.inputs);
-			outputs = createDeviceOptions(MIDI.outputs);
+			inputs = MIDI.inputs;
+			outputs = MIDI.outputs;
 
 			// if a single device is connected, select it by default
-			input = inputs.length === 2 ? inputs[1].value : inputs[0].value;
-			output = outputs.length === 2 ? outputs[1].value : outputs[0].value;
+			input =
+				inputs.size === 1
+					? MIDI.inputs.values().next().value.id
+					: undefined;
+			output =
+				outputs.size === 1
+					? MIDI.outputs.values().next().value.id
+					: undefined;
 		}
 
-		MIDI.addEventListener('connected', refresh);
+		MIDI.addEventListener('connected', () => {
+			refresh();
+		});
 		MIDI.addEventListener('disconnected', () => {
 			refresh();
 		});
@@ -83,7 +93,7 @@
 		value={input}
 		onchange={(value) => (input = value)}
 		params={{
-			options: inputs,
+			options: inputOptions,
 		}}
 	/>
 	<Field
@@ -91,7 +101,7 @@
 		value={output}
 		onchange={(value) => (output = value)}
 		params={{
-			options: outputs,
+			options: outputOptions,
 		}}
 	/>
 	<Field key="messages" value={messages} type="list" disabled />

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

@@ -7,6 +7,7 @@
 	import { layout } from '../state/layout.svelte';
 	import FieldGroup from '../ui/FieldGroup.svelte';
 	import { sketchesManager } from '../state/sketches.svelte';
+	import { parseFolder } from '../utils/fields.utils';
 
 	let {
 		id = layout.getID(),
@@ -52,16 +53,25 @@
 
 			if (!sketchPropGroup || group === sketchPropGroup) {
 				if (folder) {
+					const parsed = parseFolder(folder);
+					const current = parsed.find((m) => m.isCurrent);
+
 					const fieldgroup = sketch?.propsFolders.find(
-						(f) => f.id === folder,
+						(f) => f.id === current.id,
 					);
 
 					if (fieldgroup) {
-						const { depth, root } = fieldgroup;
+						const { depth, rootId } = fieldgroup;
+						const root =
+							rootId &&
+							sketch?.propsFolders.find((f) => f.id === rootId);
 
 						if (depth === 0 && !tree.includes(fieldgroup)) {
 							tree.push(fieldgroup);
-						} else if (root && !tree.includes(root)) {
+						} else if (
+							root &&
+							!tree.some((fieldgroup) => fieldgroup.id === rootId)
+						) {
 							tree.push(root);
 						}
 					} else {
@@ -148,6 +158,9 @@
 							// value(event, sketch.params);
 						}}
 						onchange={(v) => {
+							if (v?.currentTarget && v?.type === 'change') {
+								v = v.currentTarget.value;
+							}
 							sketch.updateProp(key, v);
 						}}
 					/>
@@ -161,19 +174,21 @@
 						sketchProps[item.key],
 					)}
 				{:else if item.type === 'fieldgroup'}
-					<FieldGroup
-						name={item.displayName}
-						collapsed={item.collapsed}
-						onchange={(collapsed) => {
-							sketch.updateFolder(item, collapsed);
-						}}
-					>
-						{#if item.children.length > 0}
-							{#each item.children as child, childIndex}
-								{@render sketchPropItem(childIndex, child)}
-							{/each}
-						{/if}
-					</FieldGroup>
+					{#if !item.hidden}
+						<FieldGroup
+							name={item.displayName}
+							collapsed={item.collapsed}
+							onchange={(collapsed) => {
+								sketch.updateFolder(item, collapsed);
+							}}
+						>
+							{#if item.children.length > 0}
+								{#each item.children as child, childIndex}
+									{@render sketchPropItem(childIndex, child)}
+								{/each}
+							{/if}
+						</FieldGroup>
+					{/if}
 				{/if}
 			{/snippet}
 			{#each sketchPropsTree as sketchPropsTreeItem, index}

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

@@ -1,6 +1,8 @@
+import { parseFolder } from '../utils/fields.utils';
 import { rendering } from './rendering.svelte';
 import {
 	deepAssign,
+	deepClone,
 	deepEqual,
 	hydrate,
 	isFunction,
@@ -46,7 +48,10 @@ class Sketch {
 
 	reset() {
 		Object.keys(this.props).forEach((key) => {
-			this.updateProp(key, this.props[key].__initialValue);
+			this.updateProp(
+				key,
+				$state.snapshot(this.props[key].__initialValue),
+			);
 		});
 
 		this.propsFolders.forEach((fieldgroup) => {
@@ -89,12 +94,16 @@ class Sketch {
 						) {
 							deepAssign(newProp.value, prevProp.value);
 							deepAssign(instanceProp.value, prevProp.value);
-							newProp.__currentValue = newProp.value;
+							newProp.__currentValue = deepClone(
+								$state.snapshot(newProp.value),
+							);
 						} else if (
 							newProp.__initialValue === prevProp.__initialValue
 						) {
 							newProp.value = prevProp.value;
-							newProp.__currentValue = newProp.value;
+							newProp.__currentValue = deepClone(
+								$state.snapshot(newProp.value),
+							);
 							instanceProp.value = prevProp.value;
 						}
 
@@ -164,36 +173,25 @@ class Sketch {
 		propsFoldersCollection,
 		propsGroupsCollection,
 	) {
-		const duplicateInitialValue = (value) => {
-			if (isFunction(value)) {
-				return value;
-			}
-
-			if (isObject(value)) {
-				return structuredClone(value);
-			}
-
-			return value;
-		};
-
 		let {
 			value,
 			params = {},
 			triggers = [],
 			group,
+			type,
 			folder,
 			displayName,
 		} = instanceProp;
 
-		if (value.isColor) {
+		if (value?.isColor) {
 			value = { r: value.r, g: value.g, b: value.b };
-		} else if (value.isVector2) {
+		} else if (value?.isVector2) {
 			value = { x: value.x, y: value.y };
-		} else if (value.isVector3) {
+		} else if (value?.isVector3) {
 			value = { x: value.x, y: value.y, z: value.z };
-		} else if (value.isVector4) {
+		} else if (value?.isVector4) {
 			value = { x: value.x, y: value.y, z: value.z, w: value.w };
-		} else if (value.isQuaternion) {
+		} else if (value?.isQuaternion) {
 			value = { x: value.x, y: value.y, z: value.z, w: value.w };
 		}
 
@@ -202,7 +200,7 @@ class Sketch {
 				? instanceProp.hidden
 				: () => instanceProp.hidden;
 
-		let initialValue = duplicateInitialValue(value);
+		let initialValue = deepClone(value);
 
 		if (group && !propsGroupsCollection.includes(group)) {
 			propsGroupsCollection.push(group);
@@ -215,8 +213,9 @@ class Sketch {
 		let prop = {
 			value,
 			__initialValue: initialValue,
-			__currentValue: value,
+			__currentValue: deepClone(value),
 			__hidden,
+			type,
 			params: structuredClone(params),
 			triggers,
 			group,
@@ -235,14 +234,16 @@ class Sketch {
 
 		if (prop) {
 			prop.value = newValue;
-			prop.__currentValue = newValue;
+			prop.__currentValue = deepClone(newValue);
 		}
 
 		if (instanceProp) {
-			if (isObject(instanceProp.value)) {
-				deepAssign(instanceProp.value, newValue);
-			} else {
-				instanceProp.value = newValue;
+			if (!deepEqual(instanceProp.value, newValue)) {
+				if (isObject(instanceProp.value) && isObject(newValue)) {
+					deepAssign(instanceProp.value, newValue);
+				} else {
+					instanceProp.value = newValue;
+				}
 			}
 
 			instanceProp.onChange?.(instanceProp, {
@@ -264,21 +265,24 @@ class Sketch {
 		if (!folder) return undefined;
 
 		let propFolder;
-		let names = folder.split('.');
 
-		if (names.length > 0) {
-			let root;
-			let collapsedRegex = /^(.*?)(?:\[collapsed=(true|false)\])?$/;
+		const parsed = parseFolder(folder);
 
-			for (let i = 0; i < names.length; i++) {
-				let name = names[i];
-				let match = name.match(collapsedRegex);
-				let displayName = match[1];
-				let collapsed = match[2] ? match[2] === 'true' : false;
+		if (parsed.length > 0) {
+			for (let i = 0; i < parsed.length; i++) {
+				let match = parsed[i];
+				let {
+					depth,
+					id,
+					parentId,
+					rootId,
+					isCurrent,
+					name,
+					attributes = {},
+				} = match;
+				let { collapsed = false } = attributes;
+				let displayName = name;
 
-				let depth = i;
-				let id = [...names].slice(0, i + 1).join('.');
-				let parentId = [...names].slice(0, i).join('.');
 				let parent =
 					depth > 0
 						? collection.find((f) => f.id === parentId)
@@ -296,7 +300,8 @@ class Sketch {
 						children: [],
 						parent,
 						depth,
-						root,
+						rootId,
+						hidden: false,
 					};
 
 					if (parent) {
@@ -306,11 +311,7 @@ class Sketch {
 					collection.push(fieldgroup);
 				}
 
-				if (i === 0) {
-					root = fieldgroup;
-				}
-
-				if (i === names.length - 1) {
+				if (isCurrent) {
 					fieldgroup.children.push({
 						type: 'field',
 						key,
@@ -326,7 +327,7 @@ class Sketch {
 
 	updateFolder(folder, collapsed) {
 		this.propsFolders.forEach((f, index) => {
-			if (f === folder) {
+			if (f.id === folder.id) {
 				this.propsFolders[index].collapsed = collapsed;
 			}
 		});
@@ -365,7 +366,10 @@ class Sketch {
 					!isFunction(instanceProp.value) &&
 					!deepEqual(instanceProp.value, prop.__currentValue)
 				) {
-					this.updateProp(key, structuredClone(instanceProp.value));
+					this.updateProp(key, instanceProp.value);
+					prop.__initialValue = deepClone(
+						$state.snapshot(prop.value),
+					);
 				}
 
 				// sync displayName
@@ -440,34 +444,11 @@ class Sketch {
 					for (const paramKey in instanceProp.params) {
 						const instanceParam = instanceProp.params[paramKey];
 						const param = prop.params[paramKey];
-						let needsUpdate = false;
-
-						if (isObject(instanceParam)) {
-							Object.keys(instanceParam).forEach((key) => {
-								if (isObject(instanceParam[key])) {
-									Object.keys(instanceParam[key]).forEach(
-										(k) => {
-											if (
-												instanceParam[key][k] !==
-												param[key][k]
-											) {
-												needsUpdate = true;
-											}
-										},
-									);
-								} else if (instanceParam[key] !== param[key]) {
-									needsUpdate = true;
-								}
-							});
-						} else if (instanceParam !== param) {
-							needsUpdate = true;
-						}
+						let needsUpdate = !deepEqual(instanceParam, param);
 
 						if (needsUpdate) {
-							if (needsUpdate) {
-								prop.params[paramKey] =
-									structuredClone(instanceParam);
-							}
+							prop.params[paramKey] =
+								structuredClone(instanceParam);
 						}
 					}
 				}
@@ -485,6 +466,29 @@ class Sketch {
 				delete this.props[key];
 			}
 		});
+
+		const fieldgroups = [...this.propsFolders].sort(
+			(a, b) => b.depth - a.depth,
+		);
+
+		fieldgroups.forEach((fieldgroup) => {
+			const hasAllFieldsHidden = fieldgroup.children
+				.filter((child) => child.type === 'field')
+				.every((child) => this.props[child.key].__hidden());
+			const hasAllFieldgroupsHidden = fieldgroup.children
+				.filter((child) => child.type === 'fieldgroup')
+				.every((child) => child.hidden);
+
+			if (hasAllFieldsHidden && hasAllFieldgroupsHidden) {
+				if (!fieldgroup.hidden) {
+					fieldgroup.hidden = true;
+				}
+			} else {
+				if (fieldgroup.hidden) {
+					fieldgroup.hidden = false;
+				}
+			}
+		});
 	}
 
 	onBeforeCapture(fn) {

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

@@ -6,17 +6,22 @@ class Layout {
 	components = $state([]);
 	editing = $state(false);
 	previewing = $state(false);
+	persistent = $state(true);
 
 	getID() {
 		return COMPONENT_ID++;
 	}
 
 	constructor() {
-		this.key = 'layout';
+		this.key = __BUILD__ ? `layout${__START_TIME__}` : `layout`;
 
 		$effect.root(() => {
 			$effect(() => {
-				if (!this.previewing && !__BUILD__) {
+				const isPersistent = __BUILD__
+					? this.persistent
+					: !this.previewing;
+
+				if (isPersistent) {
 					this.persist($state.snapshot(this.components));
 				}
 			});
@@ -156,6 +161,7 @@ class Layout {
 			type: source.type,
 			name: source.name,
 			minimized: source.minimized,
+			headless: source.headless,
 			params: source.params,
 			children: [...source.children],
 		}));

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

@@ -320,12 +320,27 @@ export class Render {
 		this.time = 0;
 		this.recording = false;
 
-		$effect(() => {
+		let resizeTimeout;
+
+		$effect.pre(() => {
 			const { width, height, pixelRatio } = rendering;
 
 			if (this.loaded) {
-				this.resize(width, height, pixelRatio);
-			} else {
+				if (resizeTimeout) clearTimeout(resizeTimeout);
+
+				resizeTimeout = setTimeout(() => {
+					clearTimeout(resizeTimeout);
+					resizeTimeout = null;
+
+					this.resize(width, height, pixelRatio);
+				}, 0);
+			}
+		});
+
+		$effect(() => {
+			const { width, height, pixelRatio } = rendering;
+
+			if (!this.loaded) {
 				this.width = width;
 				this.height = height;
 				this.pixelRatio = pixelRatio;
@@ -361,7 +376,7 @@ export class Render {
 
 				if (needsUpdate) {
 					console.warn(
-						`Canvas ${attributeName} was changed from sketch to ${dimension}px to previous  ${rendering[attributeName]}`,
+						`Canvas ${attributeName} was changed from sketch from ${rendering[attributeName]}px to ${dimension}px.`,
 					);
 					rendering[attributeName] = dimension;
 
@@ -460,6 +475,8 @@ export class Render {
 		};
 
 		this.init = async () => {
+			if (this.errored) return;
+
 			clearError(this.sketch.key);
 			this.mountParams = this.renderer?.onMountPreview?.(this.params);
 			if (this.mountParams && this.mountParams.canvas !== this.canvas) {
@@ -599,7 +616,8 @@ export class Render {
 				sketch.beforeRecord.forEach((fn) => fn(params));
 			},
 			onTick: ({ time, deltaTime }) => {
-				this.loop(time);
+				this.time += deltaTime;
+				this.loop(this.time);
 			},
 			onComplete: (params) => {
 				sketch.afterRecord.forEach((fn) => fn(params));

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

@@ -50,11 +50,22 @@ export function deepAssign(target, source) {
 }
 
 export function deepEqual(target, source) {
-	if (isObject(target) && isObject(target)) {
+	if (isObject(target) && isObject(source)) {
 		let isEqual = true;
-		for (const key in source) {
-			if (isEqual) {
-				isEqual = deepEqual(target[key], source[key]);
+
+		if (
+			Array.isArray(target) &&
+			Array.isArray(source) &&
+			target.length !== source.length
+		) {
+			isEqual = false;
+		}
+
+		if (isEqual) {
+			for (const key in source) {
+				if (isEqual) {
+					isEqual = deepEqual(target[key], source[key]);
+				}
 			}
 		}
 
@@ -63,3 +74,16 @@ export function deepEqual(target, source) {
 
 	return target === source;
 }
+
+export function deepClone(value) {
+	if (isFunction(value)) {
+		return value;
+	}
+
+	if (isObject(value)) {
+		const clone = structuredClone(value);
+		return clone;
+	}
+
+	return value;
+}