fragment-tools 0.1.13 → 0.1.15

package/src/client/app/triggers/Trigger.js

@@ -1,71 +1,72 @@
 let ID = 0;
 
 class Trigger {
-    /**
-     * 
-     * @param {string} inputType 
-     * @param {string} eventName 
-     * @param {function} fn 
-     * @param {object} params 
-     */
-    constructor({
-        inputType,
-        eventName,
-        fn,
-        context,
-        params = { key: [] },
-        destroy = () => {},
-        enabled = typeof inputType === "string" && typeof eventName === "string",
-        hot = true,
-    } = {}) {
-        this.id = ID++;
-        this.inputType = inputType;
-        this.eventName = eventName;
-        this.fn = fn;
-        this.context = context;
-        this.params = params;
-        this.enabled = enabled;
-        this.hot = hot;
-        this._destroy = destroy;
-    }
+	/**
+	 *
+	 * @param {string} inputType
+	 * @param {string} eventName
+	 * @param {function} fn
+	 * @param {object} params
+	 */
+	constructor({
+		inputType,
+		eventName,
+		fn,
+		context,
+		params = { key: [] },
+		destroy = () => {},
+		enabled = typeof inputType === 'string' &&
+			typeof eventName === 'string',
+		hot = true,
+	} = {}) {
+		this.id = ID++;
+		this.inputType = inputType;
+		this.eventName = eventName;
+		this.fn = fn;
+		this.context = context;
+		this.params = params;
+		this.enabled = enabled;
+		this.hot = hot;
+		this._destroy = destroy;
+	}
 
-    assign(fn) {
-        this.fn = fn;
-    }
+	assign(fn) {
+		this.fn = fn;
+	}
 
-    enable() {
-        this.enabled = true;
-    }
+	enable() {
+		this.enabled = true;
+	}
 
-    disable() {
-        this.enabled = false;
-    }
+	disable() {
+		this.enabled = false;
+	}
 
-    run(...args) {
-        if (this.enabled) {
-            this.fn(...args);
-        }
-    }
+	run(...args) {
+		if (this.enabled) {
+			this.fn(...args);
+		}
+	}
 
-    destroy() {
-        this._destroy();
+	destroy() {
+		this._destroy();
 
-        this.inputType = null;
-        this.eventName = null;
-        this.fn = null;
-        this.params = null;
-        this.enabled = null;
-        this._destroy = null;
-    }
+		this.inputType = null;
+		this.eventName = null;
+		this.fn = null;
+		this.params = null;
+		this.enabled = null;
+		this._destroy = null;
+	}
 
-    toJSON() {
-        return {
-            inputType: this.inputType,
-            eventName: this.eventName,
-            enabled: this.enabled,
-            params: this.params,
-        };
-    }
+	toJSON() {
+		return {
+			inputType: this.inputType,
+			eventName: this.eventName,
+			enabled: this.enabled,
+			params: this.params,
+		};
+	}
 }
 
 export default Trigger;

package/src/client/app/triggers/index.js

@@ -1,16 +1,16 @@
-import * as Mouse from "./Mouse.js";
-import * as Keyboard from "./Keyboard.js";
-import * as MIDI from "./MIDI.js";
+import * as Mouse from './Mouse.js';
+import * as Keyboard from './Keyboard.js';
+import * as MIDI from './MIDI.js';
 
-export * from "./Mouse.js";
-export * from "./Keyboard.js";
-export * from "./MIDI.js";
+export * from './Mouse.js';
+export * from './Keyboard.js';
+export * from './MIDI.js';
 
 export { Mouse, Keyboard, MIDI };
 
 /**
  * Remove all listeners for all kinds of inputs for a specific context
- * @param {string} context 
+ * @param {string} context
  */
 export const removeHotListeners = (context) => {
 	Mouse.removeHotListeners(context);

package/src/client/app/triggers/shared.js

@@ -1,13 +1,13 @@
-export const wildcard = "*";
+export const wildcard = '*';
 export let sketchFiles = [];
 
 export function assignSketchFiles(files) {
-    sketchFiles.push(...files);
-};
+	sketchFiles.push(...files);
+}
 
 export function getContext() {
 	let context;
-	
+
 	const { stack } = new Error();
 	const { url } = import.meta;
 
@@ -34,4 +34,4 @@ export function getContext() {
 	}
 
 	return context;
-};
+}

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

@@ -1,90 +1,89 @@
 <script>
-import { onDestroy } from "svelte";
+	import { onDestroy } from 'svelte';
 
-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 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';
 
-console.log(`Made with Fragment. https://fragment.tools`);
+	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 gui, style, head;
+	let defaultGUIConfig = {
+		position: 'float',
+		align: 'right',
+		size: 0.3,
+		output: false,
+		hidden: false,
+	};
 
-let guiConfig = defaultGUIConfig;
-$: sketchKey = ($layout.previewing && $preview) ? $preview : $sketchesKeys[0];
-$: sketch = $sketches[sketchKey];
+	let guiConfig = defaultGUIConfig;
+	$: sketchKey = $layout.previewing && $preview ? $preview : $sketchesKeys[0];
+	$: sketch = $sketches[sketchKey];
 
-$: {
-	if (sketch) {
-		if (sketch.buildConfig) {
-			override(sketch.buildConfig);
-		}
+	$: {
+		if (sketch) {
+			if (sketch.buildConfig) {
+				override(sketch.buildConfig);
+			}
 
-		const config = sketch.buildConfig ? sketch.buildConfig : {};
-		gui = config.gui;
+			const config = sketch.buildConfig ? sketch.buildConfig : {};
+			gui = config.gui;
 
-		if (gui && typeof gui === "object") {
-			guiConfig = {
-				...defaultGUIConfig,
-				...gui,
-			};
-		}
+			if (gui && typeof gui === 'object') {
+				guiConfig = {
+					...defaultGUIConfig,
+					...gui,
+				};
+			}
 
-		const { styles = "" } = config;
+			const { styles = '' } = config;
 
-		if (styles !== "") {
-			head = document.getElementsByTagName('head')[0];
+			if (styles !== '') {
+				head = document.getElementsByTagName('head')[0];
 
-			if (style) {
-				head.removeChild(style);
-			}
+				if (style) {
+					head.removeChild(style);
+				}
 
-			style = document.createElement('style');
-			style.setAttribute('type', 'text/css');
-			style.appendChild(document.createTextNode(styles));
-			head.appendChild(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);
-	}
-});
+	onDestroy(() => {
+		if (style && head) {
+			head.removeChild(style);
+		}
+	});
 </script>
 
 {#if gui}
-	{#if guiConfig.position === "fixed"}
-	<Row>
-		{#if guiConfig.align === "right"}
-			<Column size={1 - guiConfig.size}>
-				<Monitor hasHeader={false}  {sketchKey} />
-			</Column>
-			<Column size={guiConfig.size}>
-				<Params hasHeader={false} {output}/>
-			</Column>
-		{:else}
-			<Column size={guiConfig.size}>
-				<Params hasHeader={false} {output}/>
-			</Column>
-			<Column size={1 - guiConfig.size}>
-				<Monitor hasHeader={false}  {sketchKey} />
-			</Column>
-		{/if}
-	</Row>
+	{#if guiConfig.position === 'fixed'}
+		<Row>
+			{#if guiConfig.align === 'right'}
+				<Column size={1 - guiConfig.size}>
+					<Monitor hasHeader={false} {sketchKey} />
+				</Column>
+				<Column size={guiConfig.size}>
+					<Params hasHeader={false} />
+				</Column>
+			{:else}
+				<Column size={guiConfig.size}>
+					<Params hasHeader={false} />
+				</Column>
+				<Column size={1 - guiConfig.size}>
+					<Monitor hasHeader={false} {sketchKey} />
+				</Column>
+			{/if}
+		</Row>
 	{:else}
 		<Monitor hasHeader={false} {sketchKey} />
 		<FloatingParams
@@ -94,6 +93,6 @@ onDestroy(() => {
 			hidden={guiConfig.hidden}
 		/>
 	{/if}
-{:else }
-	<Monitor hasHeader={false}/>
+{:else}
+	<Monitor hasHeader={false} />
 {/if}

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

@@ -1,37 +1,45 @@
 <script>
-import { clearErrors } from "../stores/errors";
+	import { clearErrors } from '../stores/errors';
 
-export let error;
+	export let error;
 
-export function getLineAndColNumber(stack) {
-	const match = stack.match(/(:([0-9]+)\:([0-9]+))/);
+	export function getLineAndColNumber(stack) {
+		const match = stack.match(/(:([0-9]+)\:([0-9]+))/);
 
-	let lineNumber, colNumber;
+		let lineNumber, colNumber;
 
-	if (match && match[2] && match[3]) {
-		lineNumber = match[2];
-		colNumber = match[3];
+		if (match && match[2] && match[3]) {
+			lineNumber = match[2];
+			colNumber = match[3];
+		}
+
+		return { lineNumber, colNumber };
 	}
 
-	return { lineNumber, colNumber };
-}
-
-$: stackLines = error.stack ?
-	error.stack.split('\n')
-		.filter((line, i, s) => s.length === 1 ? true : i !== 0)
-		.filter((line) => !line.includes('/app'))
-		.map((line) => {
-			// remove path to file in URL
-			line = line.replace(`${window.location.origin}/@fs${__CWD__}/`, "");
-			// remove vite injected params in URL
-			line = line.replace(/\?.+?\:/g, ":");
-
-			return line;
-		}) :
-	null;
-
-$: extract = error.source ?
-	error.source.split("\n").map((text, index) => ({ text, highlighted: text.includes(`> ${error.lineNumber}:`) })) : [];
+	$: stackLines = error.stack
+		? error.stack
+				.split('\n')
+				.filter((line, i, s) => (s.length === 1 ? true : i !== 0))
+				.filter((line) => !line.includes('/app'))
+				.map((line) => {
+					// remove path to file in URL
+					line = line.replace(
+						`${window.location.origin}/@fs${__CWD__}/`,
+						'',
+					);
+					// remove vite injected params in URL
+					line = line.replace(/\?.+?\:/g, ':');
+
+					return line;
+				})
+		: null;
+
+	$: extract = error.source
+		? error.source.split('\n').map((text, index) => ({
+				text,
+				highlighted: text.includes(`> ${error.lineNumber}:`),
+			}))
+		: [];
 </script>
 
 <div class="error-overlay" on:click={() => clearErrors()}>
@@ -45,86 +53,92 @@ $: extract = error.source ?
 			</p>
 		{/if}
 		{#if extract.length > 0}
-		<div class="extract">
-			{#each extract as line}
-				<span class="extract-line" class:highlighted={line.highlighted}>{line.text}</span>
-			{/each}
-		</div>
+			<div class="extract">
+				{#each extract as line}
+					<span
+						class="extract-line"
+						class:highlighted={line.highlighted}>{line.text}</span
+					>
+				{/each}
+			</div>
 		{/if}
 	</div>
-	<span class="console">Open your browser's console to further inspect this error. Click to dismiss.</span>
+	<span class="console"
+		>Open your browser's console to further inspect this error. Click to
+		dismiss.</span
+	>
 </div>
 
 <style>
-.error-overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	width: 100%;
-	height: 100%;
-	padding: 12px 18px;
-
-	color: #FF8081;
-
-	background-color: #2A0000;
-}
-
-h2 {
-	color: #FF8081;
-	font-size: 1rem;
-}
-
-.stack {
-	padding-left: 18px;
-	font-size: 13px;
-}
-
-.stack span {
-	display: block;
-}
-
-.extract {
-	display: flex;
-	flex-direction: column;
-	justify-content: stretch;
-	color: #2A0000;
-	padding: 12px 0;
-	font-size: var(--font-size-input);
-	background-color: #FF8081;
-	border-radius: var(--border-radius-input);
-	overflow-x: auto;
-}
-
-.extract::-webkit-scrollbar {
-    height: 5px;               /* width of the entire scrollbar */
-}
-
-.extract::-webkit-scrollbar-track {
-    background-color: #5C0000;
-}
-
-.extract::-webkit-scrollbar-thumb {
-    background-color: #f0f0f0;    /* color of the scroll thumb */
-    border-radius: 20px;       /* roundness of the scroll thumb */
-}
-
-.extract-line {
-	display: block;
-	white-space: pre;
-	padding: 0 12px;
-	width: 100%;
-}
-
-.extract-line.highlighted {
-	background-color: rgba(0, 0, 0, 0.1);
-	border-radius: 1px;
-}
-
-.console {
-	font-size: var(--font-size-input);
-}
+	.error-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		width: 100%;
+		height: 100%;
+		padding: 12px 18px;
+
+		color: #ff8081;
+
+		background-color: #2a0000;
+	}
+
+	h2 {
+		color: #ff8081;
+		font-size: 1rem;
+	}
+
+	.stack {
+		padding-left: 18px;
+		font-size: 13px;
+	}
+
+	.stack span {
+		display: block;
+	}
+
+	.extract {
+		display: flex;
+		flex-direction: column;
+		justify-content: stretch;
+		color: #2a0000;
+		padding: 12px 0;
+		font-size: var(--font-size-input);
+		background-color: #ff8081;
+		border-radius: var(--border-radius-input);
+		overflow-x: auto;
+	}
+
+	.extract::-webkit-scrollbar {
+		height: 5px; /* width of the entire scrollbar */
+	}
+
+	.extract::-webkit-scrollbar-track {
+		background-color: #5c0000;
+	}
+
+	.extract::-webkit-scrollbar-thumb {
+		background-color: #f0f0f0; /* color of the scroll thumb */
+		border-radius: 20px; /* roundness of the scroll thumb */
+	}
+
+	.extract-line {
+		display: block;
+		white-space: pre;
+		padding: 0 12px;
+		width: 100%;
+	}
+
+	.extract-line.highlighted {
+		background-color: rgba(0, 0, 0, 0.1);
+		border-radius: 1px;
+	}
+
+	.console {
+		font-size: var(--font-size-input);
+	}
 </style>