fragment-tools 0.1.13 → 0.1.14

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

@@ -1,106 +1,105 @@
 <script>
-import { onMount } from "svelte";
-import Module from "../ui/Module.svelte";
-import Field from "../ui/Field.svelte";
-import MIDI from "../inputs/MIDI.js";
-
-export let mID;
-export let hasHeader;
-
-let input, output;
-let inputs = [], outputs = [];
-
-function createDeviceOptions(deviceMap = new Map()) {
-    let options = [];
-
-    if (deviceMap.size !== 0) {
-        options.push({ value: "none", label: "No device selected." });
-    }
-
-    for (let entry of deviceMap) {
-        let device = entry[1];
-        const { id, name, manufacturer } = device;
-
-        options.push({ value: id, label: `${manufacturer} ${name} – id: ${id}` });
-    }
-
-    if (options.length === 0) {
-        options = [
-            { value: "none", label: "No device detected."}
-        ];
-    }
-
-    return options;
-}
-
-let messages = [];
-
-$: {
-    MIDI.selectedInputID = input;
-}
-
-$: {
-    MIDI.selectedOutputID = output;
-}
-
-onMount(async () => {
-    await MIDI.request();
-
-    function refresh() {
-        inputs = createDeviceOptions(MIDI.inputs);
-        outputs = createDeviceOptions(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);
-    }
-
-    MIDI.addEventListener("connected", refresh);
-    MIDI.addEventListener("disconnected", () => {
-        refresh();
-    });
-
-    MIDI.addEventListener("message", (event) => {
-        const { type, note, channel, value } = event;
-        let date = new Date();
-        let time = `${date.getHours()}:${String(date.getMinutes()).padStart(2, "0")}:${String(date.getSeconds()).padStart(2, "0")}`;
-
-        let noteLog = ["noteon", "noteoff"].includes(type) ? ` note:${note.name}` : ``; 
-
-        messages = [
-            ...messages,
-            `${time} ${type} number:${note.number}${noteLog}`,
-        ]
-    });
-
-    refresh();
-});
-
+	import { onMount } from 'svelte';
+	import Module from '../ui/Module.svelte';
+	import Field from '../ui/Field.svelte';
+	import MIDI from '../inputs/MIDI.js';
+
+	export let mID;
+	export let hasHeader;
+
+	let input, output;
+	let inputs = [],
+		outputs = [];
+
+	function createDeviceOptions(deviceMap = new Map()) {
+		let options = [];
+
+		if (deviceMap.size !== 0) {
+			options.push({ value: 'none', label: 'No device selected.' });
+		}
+
+		for (let entry of deviceMap) {
+			let device = entry[1];
+			const { id, name, manufacturer } = device;
+
+			options.push({
+				value: id,
+				label: `${manufacturer} ${name} – id: ${id}`,
+			});
+		}
+
+		if (options.length === 0) {
+			options = [{ value: 'none', label: 'No device detected.' }];
+		}
+
+		return options;
+	}
+
+	let messages = [];
+
+	$: {
+		MIDI.selectedInputID = input;
+	}
+
+	$: {
+		MIDI.selectedOutputID = output;
+	}
+
+	onMount(async () => {
+		await MIDI.request();
+
+		function refresh() {
+			inputs = createDeviceOptions(MIDI.inputs);
+			outputs = createDeviceOptions(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;
+		}
+
+		MIDI.addEventListener('connected', refresh);
+		MIDI.addEventListener('disconnected', () => {
+			refresh();
+		});
+
+		MIDI.addEventListener('message', (event) => {
+			const { type, note, channel, value } = event;
+			let date = new Date();
+			let time = `${date.getHours()}:${String(date.getMinutes()).padStart(
+				2,
+				'0',
+			)}:${String(date.getSeconds()).padStart(2, '0')}`;
+
+			let noteLog = ['noteon', 'noteoff'].includes(type)
+				? ` note:${note.name}`
+				: ``;
+
+			messages = [
+				...messages,
+				`${time} ${type} number:${note.number}${noteLog}`,
+			];
+		});
+
+		refresh();
+	});
 </script>
 
 <Module {mID} {hasHeader} name="MIDI" {...$$props} slug="midi">
-    <Field
-        key="inputs"
-        value={input}
-        on:change={(event) => input = event.detail}
-        params={{
-            options: inputs,
-        }}
-    />
-    <Field
-        key="outputs"
-        value={output}
-        on:change={(event) => output = event.detail}
-        params={{
-            options: outputs,
-        }}
-    />
-    <Field
-        key="messages"
-        value={messages}
-        type="list"
-        params={{
-            disabled: true
-        }}
-    />
+	<Field
+		key="inputs"
+		value={input}
+		on:change={(event) => (input = event.detail)}
+		params={{
+			options: inputs,
+		}}
+	/>
+	<Field
+		key="outputs"
+		value={output}
+		on:change={(event) => (output = event.detail)}
+		params={{
+			options: outputs,
+		}}
+	/>
+	<Field key="messages" value={messages} type="list" disabled />
 </Module>

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

@@ -1,112 +1,125 @@
 <script context="module">
-import { writable } from "svelte/store";
+	import { writable } from 'svelte/store';
 
-export const params = writable([]);
-
-let ID = 0;
+	export const params = writable([]);
 
+	let ID = 0;
 </script>
 
 <script>
-import { onMount, onDestroy } from "svelte";
-import { props } from "../stores";
-import { sketches } from "../stores/sketches.js";
-import { monitors } 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";
-
-export let mID;
-export let hasHeader = true;
-export let output = true;
-
-let id = ID++;
-let selected = id;
-let sketch, sketchKey, sketchProps = {};
-let monitor, showOutputParams;
-
-onMount(() => {
-    $params = [
-        ...$params,
-        {
-            id,
-        }
-    ];
-});
-
-onDestroy(() => {
-    $params = $params.filter((p) => p.id !== id);
-});
-
-$: options = [
-    ...$monitors.map((monitor, index) => {
-        return { value: index, label: `monitor ${index + 1}`}
-    }),
-    ...$params.length > 1 ? [{ value: "output", label: "output"}] : [],
-];
-
-monitors.subscribe((value) => {
-    monitor = $monitors[Math.min(selected, $monitors.length - 1)];
-    sketchKey = monitor ? monitor.selected : undefined;
-});
-
-$: {
-    sketch = $sketches[sketchKey];
-    sketchProps = $props[sketchKey];
-}
-
-$: showOutputParams = (monitor && monitor.selected === "output") ||
-        ($params.length === 1) ||
-        (selected === "output");
-
+	import { onMount, onDestroy } from 'svelte';
+	import { sketches } from '../stores/sketches.js';
+	import { monitors } 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';
+
+	export let mID;
+	export let hasHeader = true;
+	export let output = true;
+
+	let id = ID++;
+	let selected = id;
+	let sketch,
+		sketchKey,
+		sketchProps = {};
+	let monitor, showOutputParams;
+
+	onMount(() => {
+		$params = [
+			...$params,
+			{
+				id,
+			},
+		];
+	});
+
+	onDestroy(() => {
+		$params = $params.filter((p) => p.id !== id);
+	});
+
+	$: options = [
+		...$monitors.map((monitor, index) => {
+			return { value: index, label: `monitor ${index + 1}` };
+		}),
+		...($params.length > 1 ? [{ value: 'output', label: 'output' }] : []),
+	];
+
+	monitors.subscribe((value) => {
+		monitor = $monitors[Math.min(selected, $monitors.length - 1)];
+		sketchKey = monitor ? monitor.selected : undefined;
+	});
+
+	$: {
+		sketch = $sketches[sketchKey];
+		sketchProps = $props[sketchKey];
+	}
+
+	$: showOutputParams =
+		(monitor && monitor.selected === 'output') ||
+		$params.length === 1 ||
+		selected === 'output';
 </script>
 
-<Module {mID} {hasHeader} name={`Parameters`} slug="params" >
-    <div slot="header-right">
-        {#if options.length > 1 }
-        <ModuleHeaderAction
-            value={selected}
-            permanent
-            border
-            on:change={(event) => selected = event.detail}
-            options={options}
-        />
-        {/if }
-    </div>
-    {#if showOutputParams && output }
-        <OutputParams />
-    {/if}
-
-    {#if sketch }
-        {#if typeof props === "object"}
-            {#if output}
-                <Field key="framerate" value={isFinite(sketch.fps) ? sketch.fps : 60} params={{disabled: true}}/>
-            {/if}
-            {#if sketch.duration && sketch.duration > 0 && output }
-                <Field key="duration" value={sketch.duration} params={{disabled: true, suffix: "s"}}/>
-            {/if }
-            {#each Object.keys(sketchProps) as key, i}
-                {#if !sketchProps[key].hidden}
-                <Field
-                    context={sketchKey}
-                    key={key}
-                    value={sketchProps[key].value}
-                    type={sketchProps[key].type}
-                    bind:params={sketchProps[key].params}
-                    on:click={() => {
-                        $props[sketchKey][key].value._refresh = true;
-                    }}
-                    on:change={(event) => {
-                        $props[sketchKey][key].value = event.detail;
-
-                        if (typeof $props[sketchKey][key].onChange === 'function') {
-                            $props[sketchKey][key].onChange($props[sketchKey][key]);
-                        }
-                    }}
-                />
-                {/if}
-            {/each}
-        {/if}
-    {/if}
+<Module {mID} {hasHeader} name={`Parameters`} slug="params">
+	<div slot="header-right">
+		{#if options.length > 1}
+			<ModuleHeaderAction
+				value={selected}
+				permanent
+				border
+				on:change={(event) => (selected = event.detail)}
+				{options}
+			/>
+		{/if}
+	</div>
+	{#if showOutputParams && output}
+		<OutputParams />
+	{/if}
+
+	{#if sketch}
+		{#if typeof props === 'object'}
+			{#if output}
+				<Field
+					key="framerate"
+					value={isFinite(sketch.fps) ? sketch.fps : 60}
+					disabled
+				/>
+			{/if}
+			{#if sketch.duration && sketch.duration > 0 && output}
+				<Field
+					key="duration"
+					value={sketch.duration}
+					params={{ suffix: 's' }}
+					disabled
+				/>
+			{/if}
+			{#each Object.keys(sketchProps) as key, i (key)}
+				{@const sketchProp = sketchProps[key]}
+				{@const { hidden, displayName, value, type, disabled } =
+					sketchProp}
+				{@const isDisabled =
+					typeof disabled === 'function' ? disabled() : disabled}
+				{#if typeof hidden === 'function' ? !hidden() : !hidden}
+					<Field
+						context={sketchKey}
+						{key}
+						{displayName}
+						{value}
+						{type}
+						disabled={isDisabled}
+						bind:params={sketchProps[key].params}
+						on:click={() => {
+							$props[sketchKey][key].value._refresh = true;
+						}}
+						on:change={(event) => {
+							updateProp(sketchKey, key, event.detail);
+						}}
+					/>
+				{/if}
+			{/each}
+		{/if}
+	{/if}
 </Module>

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

@@ -1,5 +1,5 @@
 export let onMountPreview = ({ canvas }) => {
-    return {
-        context: canvas.getContext("2d"),
-    }
+	return {
+		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 { fragment } from '../lib/gl';
+import { client } from '@fragment/client';
+import { getShaderPath } from '../utils/glsl.utils';
+import { clearError } from '../stores/errors';
 
 let frags = [];
 
@@ -19,44 +19,51 @@ export let onMountPreview = ({ canvas, id }) => {
 };
 
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {
-	let { frag } = frags.find(f => f.id === id);
+	let { frag } = frags.find((f) => f.id === id);
 
 	frag.resize({ width, height, pixelRatio });
 };
 
 export let onDestroyPreview = ({ canvas, id }) => {
-	let fragIndex = frags.findIndex(f => f.id === id);
+	let fragIndex = frags.findIndex((f) => f.id === id);
 	let { frag } = frags[fragIndex];
-	
+
 	clearError(frag.gl.__uuid);
 
 	frag.destroy();
 	frags.splice(fragIndex, 1);
 };
 
-client.on('shader-update', (data) => {
+client.on('shader-update', (shaderUpdates) => {
 	frags.forEach(({ frag }) => clearError(frag.gl.__uuid));
 
-	const { filepath, source } = data;
+	shaderUpdates.forEach((shaderUpdate) => {
+		const { filepath, source } = shaderUpdate;
 
-	const programs = frags.map(({ frag }) => frag.program);
+		const programs = frags.map(({ frag }) => frag.program);
 
-	programs.forEach((program) => {
-		const { fragment, vertex } = program;
+		programs.forEach((program) => {
+			const { fragment, vertex } = program;
 
-		const shaders = {
-			vertexShader: vertex,
-			fragmentShader: fragment
-		};
+			const shaders = {
+				vertexShader: vertex,
+				fragmentShader: fragment,
+			};
 
-		Object.keys(shaders).forEach((key) => {
-			const shaderPath = getShaderPath(shaders[key]);
+			Object.keys(shaders).forEach((key) => {
+				const shaderPath = getShaderPath(shaders[key]);
 
-			if (shaderPath === filepath) {
-				console.log(`[fragment] shader update ${shaderPath.replace(__CWD__, "")}`);
-				program[key] = source;
-				program.needsUpdate = true;
-			}
+				if (shaderPath === filepath) {
+					console.log(
+						`[fragment-plugin-hsr] hsr update ${shaderPath.replace(
+							__CWD__,
+							'',
+						)}`,
+					);
+					program[key] = source;
+					program.needsUpdate = true;
+				}
+			});
 		});
 	});
 });

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

@@ -1,4 +1,4 @@
-import p5 from "p5";
+import p5 from 'p5';
 
 let previews = [];
 
@@ -6,7 +6,7 @@ export let onMountPreview = ({ id, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
 			sketch.createCanvas(width, height);
-		}
+		};
 	});
 
 	const preview = {
@@ -15,15 +15,15 @@ export let onMountPreview = ({ id, width, height }) => {
 	};
 
 	previews.push(preview);
-	
-    return {
+
+	return {
 		canvas: p.canvas,
 		p,
-    };
+	};
 };
 
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {
-	const preview = previews.find(p => p.id === id);
+	const preview = previews.find((p) => p.id === id);
 
 	if (preview) {
 		preview.p.resizeCanvas(width * pixelRatio, height * pixelRatio, false);
@@ -31,9 +31,12 @@ export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 };
 
 export let onDestroyPreview = ({ id }) => {
-	const preview = previews.find(p => p.id === id);
+	const previewIndex = previews.find((p) => p.id === id);
+	const preview = previews[previewIndex];
 
 	if (preview) {
 		preview.p.remove();
 	}
+
+	previews.splice(previewIndex, 1);
 };