fragment-tools 0.1.13 → 0.1.15

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

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

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/Monitor.svelte

@@ -1,74 +1,74 @@
 <script context="module">
-let ID = 0;
+	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";
+	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;
+	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)]);
+	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)];
-            }
+	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;
-        });
-    }
-});
+				return monitor;
+			});
+		}
+	});
 
-onMount(() => {
-    $monitors = [
-        ...$monitors,
-        {
-            id,
-            selected,
-        }
-    ];
-});
+	onMount(() => {
+		$monitors = [
+			...$monitors,
+			{
+				id,
+				selected,
+			},
+		];
+	});
 
-monitors.subscribe((all) => {
-    const current = all.find((monitor) => monitor.id === id);
+	monitors.subscribe((all) => {
+		const current = all.find((monitor) => monitor.id === id);
 
-    if (current && current.selected !== selected) {
-        selected = current.selected;
-    }
-})
+		if (current && current.selected !== selected) {
+			selected = current.selected;
+		}
+	});
 
-onDestroy(() => {
-    $monitors = $monitors.filter((m) => m.id !== id);
-});
+	onDestroy(() => {
+		$monitors = $monitors.filter((m) => m.id !== id);
+	});
 
-$: index = $monitors.findIndex(monitor => monitor.id === id);
-$: moduleName = `${name} ${$monitors.length > 1 ? (index + 1) : ""}`;
+	$: index = $monitors.findIndex((monitor) => monitor.id === id);
+	$: moduleName = `${name} ${$monitors.length > 1 ? index + 1 : ''}`;
 </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 />
-    {/if}
+	<svelte:fragment slot="header-left">
+		<SketchSelect monitorID={id} {selected} />
+	</svelte:fragment>
+	{#if selected && selected !== 'output'}
+		<SketchRenderer key={selected} {id} />
+	{:else if selected}
+		<OutputRenderer />
+	{/if}
 </Module>