fragment-tools 0.1.19 → 0.2.0

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

@@ -1,103 +1,126 @@
-<script context="module">
-	import { writable } from 'svelte/store';
-
-	export const params = writable([]);
-
-	let ID = 0;
-</script>
-
 <script>
-	import { onMount, onDestroy } from 'svelte';
-	import { sketches } from '../stores/sketches.js';
-	import { monitors, rendering } from '../stores/rendering';
 	import Module from '../ui/Module.svelte';
 	import Field from '../ui/Field.svelte';
 	import OutputParams from '../ui/ParamsOutput.svelte';
 	import ModuleHeaderAction from '../ui/ModuleHeaderAction.svelte';
-	import { updateProp, props } from '../stores/props';
+	import { rendering } from '../state/rendering.svelte.js';
+	import { layout } from '../state/layout.svelte';
+	import FieldGroup from '../ui/FieldGroup.svelte';
+	import { sketchesManager } from '../state/sketches.svelte';
 
-	export let mID;
-	export let hasHeader = true;
-	export let output = true;
+	let {
+		id = layout.getID(),
+		headless = false,
+		output = true,
+		params = $bindable({}),
+	} = $props();
 
-	let id = ID++;
-	let selected = id;
-	let sketch,
-		sketchKey,
-		sketchProps = {};
-	let monitor, showOutputParams;
+	let key = $derived(sketchesManager.keys[0]);
+	let sketch = $derived(sketchesManager.sketches[key]);
+	let sketchProps = $derived(sketch?.props ?? {});
 
-	onMount(() => {
-		$params = [
-			...$params,
-			{
-				id,
-			},
-		];
-	});
+	let sketchPropsGroups = $derived(sketch?.propsGroups ?? []);
+	let framerate = $derived(
+		isFinite(sketch.fps) ? sketch.fps : rendering.refreshRate,
+	);
 
-	onDestroy(() => {
-		$params = $params.filter((p) => p.id !== id);
-	});
+	let sketchGroupOptions = $derived(
+		[
+			{ value: '', label: 'all ' },
+			sketchPropsGroups.length > 0 && output
+				? { value: 'output', label: 'output' }
+				: undefined,
+			...sketchPropsGroups.map((group) => ({
+				value: group,
+				label: group,
+			})),
+		].filter((group) => group !== undefined),
+	);
+	let sketchPropGroup = $derived(
+		sketchGroupOptions
+			.map((opt) => opt.value)
+			.includes(params.sketchPropGroup)
+			? params.sketchPropGroup
+			: sketchGroupOptions[0].value,
+	);
 
-	$: options = [
-		...$monitors.map((monitor, index) => {
-			return { value: index, label: `monitor ${index + 1}` };
-		}),
-		...($params.length > 1 ? [{ value: 'output', label: 'output' }] : []),
-	];
+	let sketchPropsTree = $derived.by(() => {
+		const tree = [];
 
-	monitors.subscribe((value) => {
-		monitor = $monitors[Math.min(selected, $monitors.length - 1)];
-		sketchKey = monitor ? monitor.selected : undefined;
-	});
+		Object.keys(sketchProps).forEach((key) => {
+			const { folder, group } = sketchProps[key];
+
+			if (!sketchPropGroup || group === sketchPropGroup) {
+				if (folder) {
+					const fieldgroup = sketch?.propsFolders.find(
+						(f) => f.id === folder,
+					);
+
+					if (fieldgroup) {
+						const { depth, root } = fieldgroup;
 
-	$: {
-		sketch = $sketches[sketchKey];
-		sketchProps = $props[sketchKey];
-	}
+						if (depth === 0 && !tree.includes(fieldgroup)) {
+							tree.push(fieldgroup);
+						} else if (root && !tree.includes(root)) {
+							tree.push(root);
+						}
+					} else {
+						console.warn(
+							'Prop cannot be render in undefined fielgroup',
+						);
+					}
+				} else {
+					tree.push({
+						type: 'field',
+						key,
+					});
+				}
+			}
+		});
 
-	$: showOutputParams =
-		(monitor && monitor.selected === 'output') ||
-		$params.length === 1 ||
-		selected === 'output';
+		return tree;
+	});
 </script>
 
-<Module {mID} {hasHeader} name={`Parameters`} slug="params">
-	<div slot="header-right">
-		{#if options.length > 1}
+<Module {id} {headless} name={`Parameters`} slug="params">
+	{#snippet headerRight()}
+		{#if sketchGroupOptions.length > 1}
 			<ModuleHeaderAction
-				value={selected}
+				value={sketchPropGroup}
 				permanent
 				border
-				on:change={(event) => (selected = event.detail)}
-				{options}
+				onchange={(event) => {
+					params.sketchPropGroup = event.currentTarget.value;
+				}}
+				options={sketchGroupOptions}
 			/>
 		{/if}
-	</div>
-	{#if showOutputParams && output}
+	{/snippet}
+	{#if (!sketchPropGroup || sketchPropGroup === 'output') && output}
 		<OutputParams />
 	{/if}
 
 	{#if sketch}
-		{#if typeof props === 'object'}
-			{#if output}
-				<Field
-					key="framerate"
-					value={isFinite(sketch.fps) ? sketch.fps : 60}
-					disabled
-				/>
-			{/if}
+		{#if !sketchPropGroup && output && sketch}
+			<Field
+				key="framerate"
+				value={framerate}
+				disabled
+				params={{
+					suffix: isFinite(sketch.fps) ? undefined : ' (native)',
+				}}
+			/>
 			{#if sketch.duration && sketch.duration > 0 && output}
 				<Field
 					key="duration"
 					value={sketch.duration}
-					params={{ suffix: 's' }}
+					params={{ suffix: 's', step: 0.1 }}
 					disabled
 				/>
 			{/if}
-			{#each Object.keys(sketchProps) as key, index (key)}
-				{@const sketchProp = sketchProps[key]}
+		{/if}
+		{#if typeof sketchProps === 'object'}
+			{#snippet sketchField(index, key, prop)}
 				{@const {
 					hidden,
 					displayName,
@@ -105,12 +128,12 @@
 					type,
 					disabled,
 					__initialValue: initialValue,
-				} = sketchProp}
+				} = prop}
 				{@const isDisabled =
 					typeof disabled === 'function' ? disabled() : disabled}
-				{#if typeof hidden === 'function' ? !hidden() : !hidden}
+				{#if !hidden}
 					<Field
-						context={sketchKey}
+						context={sketch.key}
 						{key}
 						{displayName}
 						{value}
@@ -119,18 +142,42 @@
 						{index}
 						disabled={isDisabled}
 						bind:params={sketchProps[key].params}
-						on:click={() => {
-							$props[sketchKey][key].value._refresh = true;
+						triggers={prop.triggers}
+						onclick={(event) => {
+							sketch.version++;
+							// value(event, sketch.params);
 						}}
-						on:change={(event) => {
-							updateProp(sketchKey, key, event.detail, {
-								width: $rendering.width,
-								height: $rendering.height,
-								pixelRatio: $rendering.pixelRatio,
-							});
+						onchange={(v) => {
+							sketch.updateProp(key, v);
 						}}
 					/>
 				{/if}
+			{/snippet}
+			{#snippet sketchPropItem(index, item)}
+				{#if item.type === 'field'}
+					{@render sketchField(
+						index,
+						item.key,
+						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}
+			{/snippet}
+			{#each sketchPropsTree as sketchPropsTreeItem, index}
+				{@render sketchPropItem(index, sketchPropsTreeItem)}
 			{/each}
 		{/if}
 	{/if}

package/src/client/app/renderers/2DRenderer.js

@@ -15,6 +15,7 @@
  */
 export let onMountPreview = ({ canvas }) => {
 	return {
+		canvas,
 		context: canvas.getContext('2d'),
 	};
 };

package/src/client/app/renderers/FragmentRenderer.js

@@ -1,7 +1,7 @@
 import { fragment } from '../lib/gl';
 import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
-import { clearError } from '../stores/errors';
+import { clearError } from '../state/errors';
 
 let frags = [];
 

package/src/client/app/renderers/P5GLRenderer.js

@@ -1,7 +1,7 @@
 import p5 from 'p5';
 import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
-import { clearError } from '../stores/errors';
+import { clearError } from '../state/errors.svelte';
 
 /**
  * @typedef {object} PreviewP5GLRenderer
@@ -66,7 +66,8 @@ export let onBeforeUpdatePreview = ({ id }) => {
 
 	if (preview) {
 		preview.rendered = false;
-		preview.p.resetMatrix();
+
+		preview.p?.resetMatrix();
 	}
 };
 
@@ -91,9 +92,13 @@ export let onAfterUpdatePreview = ({ id }) => {
 /**
  * @param {PreviewParamsP5GLRenderer} params
  */
-export let onResizePreview = ({ p, width, height, pixelRatio }) => {
-	p.pixelDensity(pixelRatio);
-	p.resizeCanvas(width, height, false);
+export let onResizePreview = ({ id, width, height, pixelRatio }) => {
+	const preview = previews.find((p) => p.id === id);
+
+	if (preview) {
+		preview.p.pixelDensity(pixelRatio);
+		preview.p.resizeCanvas(width, height, false);
+	}
 };
 
 /**
@@ -180,6 +185,7 @@ if (import.meta.hot) {
 
 client.on('shader-update', (shaderUpdates) => {
 	previews.forEach(({ p }) => {
+		console.log('clear error', p._renderer.GL.__uuid);
 		clearError(p._renderer.GL.__uuid);
 	});
 

package/src/client/app/renderers/P5Renderer.js

@@ -30,9 +30,13 @@ export let onBeforeUpdatePreview = ({ id }) => {
 	}
 };
 
-export let onResizePreview = ({ p, width, height, pixelRatio }) => {
-	p.pixelDensity(pixelRatio);
-	p.resizeCanvas(width, height, false);
+export let onResizePreview = ({ id, width, height, pixelRatio }) => {
+	const preview = previews.find((p) => p.id === id);
+
+	if (preview) {
+		preview.p.pixelDensity(pixelRatio);
+		preview.p.resizeCanvas(width, height, false);
+	}
 };
 
 export let onDestroyPreview = ({ id }) => {

package/src/client/app/renderers/THREERenderer.js

@@ -1,27 +1,12 @@
 import { WebGLRenderer, Scene } from 'three';
-import { Texture, fragment } from '@fragment/lib/gl';
 import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
-import { clearError } from '../stores/errors';
+import { clearError } from '../state/errors.svelte';
 
 let previews = [];
 
-/** @type {WebGLRenderer} */
-let renderer;
-
-let fragmentShader = /* glsl */ `
-    precision highp float;
-    uniform sampler2D uSampler;
-    varying vec2 vUv;
-
-    void main() {
-        vec3 mapTexel = texture2D(uSampler, vUv).rgb;
-        gl_FragColor = vec4(mapTexel, 1.);
-    }
-`;
-
-export let init = ({ canvas }) => {
-	renderer = new WebGLRenderer({ antialias: true });
+export let onMountPreview = ({ id, canvas }) => {
+	let renderer = new WebGLRenderer({ antialias: true, canvas });
 
 	const render = renderer.render;
 
@@ -31,41 +16,19 @@ export let init = ({ canvas }) => {
 		render.call(renderer, scene, camera);
 	};
 
-	return {
-		renderer,
-	};
-};
-
-export let onMountPreview = ({ id, canvas, width, height, pixelRatio }) => {
-	let { gl, render, resize, uniforms, destroy } = fragment({
-		canvas,
-		shader: fragmentShader,
-		uniforms: {
-			uSampler: { value: null, type: 'sampler2D' },
-		},
-	});
-
-	let texture = new Texture(gl, {
-		image: renderer.domElement,
-	});
-
-	uniforms.uSampler.value = texture;
-
 	let scene = new Scene();
 
 	previews.push({
 		id,
 		scene,
-		texture,
-		render,
-		resize,
-		destroy,
+		renderer,
 		rendered: false,
 	});
 
 	return {
 		scene,
 		renderer,
+		canvas: renderer.domElement,
 	};
 };
 
@@ -73,11 +36,10 @@ export let onDestroyPreview = ({ id }) => {
 	const previewIndex = previews.findIndex((p) => p.id === id);
 	const preview = previews[previewIndex];
 
-	clearError(renderer.getContext().__uuid);
-
 	if (preview) {
-		preview.texture.destroy();
-		preview.destroy();
+		const { renderer } = preview;
+		clearError(renderer.getContext().__uuid);
+		renderer.dispose();
 		previews.splice(previewIndex, 1);
 	}
 };
@@ -94,8 +56,6 @@ export let onAfterUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
 
 	if (preview) {
-		preview.texture.needsUpdate = true;
-		preview.render();
 		preview.rendered = true;
 	}
 
@@ -107,16 +67,13 @@ export let onAfterUpdatePreview = ({ id }) => {
 	}
 };
 
-export let resize = ({ width, height, pixelRatio }) => {
-	renderer.setPixelRatio(pixelRatio);
-	renderer.setSize(width, height);
-};
-
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 	const preview = previews.find((p) => p.id === id);
 
 	if (preview) {
-		preview.resize({ width, height, pixelRatio });
+		const { renderer } = preview;
+		renderer.setPixelRatio(pixelRatio);
+		renderer.setSize(width, height);
 	}
 };
 
@@ -125,34 +82,38 @@ let _shaderUpdates = [];
 
 function handleHotShaderUpdate(scene) {
 	if (_shaderUpdates.length > 0) {
+		const verifyMaterial = (material) => {
+			if (!material) return;
+
+			const { vertexShader = '', fragmentShader = '' } = material;
+
+			Object.keys({ vertexShader, fragmentShader }).forEach((key) => {
+				const shader = material[key];
+				const shaderPath = getShaderPath(shader);
+				const shaderUpdate = _shaderUpdates.find(
+					(shaderUpdate) => shaderUpdate.filepath === shaderPath,
+				);
+
+				if (shaderUpdate) {
+					console.log(
+						`[fragment-plugin-hsr] hsr update ${shaderPath.replace(
+							__CWD__,
+							'',
+						)}`,
+					);
+					material[key] = shaderUpdate.source;
+					material.needsUpdate = true;
+				}
+			});
+		};
 		scene.traverse((child) => {
 			if (child.material) {
 				const { material } = child;
 
-				if (material.isShaderMaterial || material.isRawShaderMaterial) {
-					const { vertexShader, fragmentShader } = material;
-
-					Object.keys({ vertexShader, fragmentShader }).forEach(
-						(key) => {
-							const shader = material[key];
-							const shaderPath = getShaderPath(shader);
-							const shaderUpdate = _shaderUpdates.find(
-								(shaderUpdate) =>
-									shaderUpdate.filepath === shaderPath,
-							);
-
-							if (shaderUpdate) {
-								console.log(
-									`[fragment-plugin-hsr] hsr update ${shaderPath.replace(
-										__CWD__,
-										'',
-									)}`,
-								);
-								material[key] = shaderUpdate.source;
-								material.needsUpdate = true;
-							}
-						},
-					);
+				if (Array.isArray(material)) {
+					material.forEach((m) => verifyMaterial(m));
+				} else {
+					verifyMaterial(material);
 				}
 			}
 		});
@@ -170,7 +131,9 @@ if (import.meta.hot) {
 }
 
 client.on('shader-update', (shaderUpdates) => {
-	clearError(renderer.getContext().__uuid);
+	previews.forEach((preview) => {
+		clearError(preview.renderer.getContext().__uuid);
+	});
 
 	_shaderUpdates = shaderUpdates;
 });