fragment-tools 0.1.20 → 0.2.1

package/src/client/app/helpers.js

@@ -1,42 +1,6 @@
-import { props } from './stores/props';
-
-const propHandler = {
-	set: function (target, key, value, receiver) {
-		Reflect.set(target, key, value, receiver);
-
-		if (key === 'value') {
-			props.update((currentProps) => currentProps);
-		}
-
-		return true;
-	},
-};
-
-const propsHandler = {
-	get: (target, key) => {
-		if (typeof target[key] === 'object' && target[key] !== null) {
-			return new Proxy(target[key], propHandler);
-		}
-	},
-	set: (target, key, value) => {
-		console.log('new set', target, key, value);
-
-		target[key] = value;
-
-		props.update((currentProps) => currentProps);
-
-		return true;
-	},
-	deleteProperty: (target, prop) => {
-		if (prop in target) {
-			delete target[prop];
-			props.update((currentProps) => currentProps);
-
-			return true;
-		}
-	},
-};
-
 export function reactiveProps(props = {}) {
-	return new Proxy(props, propsHandler);
+	console.warn(
+		`reactiveProps has been deprecated. Props are now reactive by default.`,
+	);
+	return props;
 }

package/src/client/app/hooks.js

@@ -1,20 +1,44 @@
-import {
-	removeBeforeCaptureFrom,
-	removeAfterCaptureFrom,
-	removeBeforeRecordFrom,
-	removeAfterRecordFrom,
-} from './stores/exports';
+import { rendering } from './state/rendering.svelte';
+import { sketchesManager } from './state/sketches.svelte';
+import { getContext } from './triggers/shared';
 
-export {
-	onBeforeCapture,
-	onAfterCapture,
-	onBeforeRecord,
-	onAfterRecord,
-} from './stores/exports';
+export let onBeforeCapture = (listener, context = getContext()) => {
+	sketchesManager.sketches[context]?.onBeforeCapture(listener);
+};
 
-export function removeHooksFrom(context) {
-	removeBeforeCaptureFrom(context);
-	removeAfterCaptureFrom(context);
-	removeBeforeRecordFrom(context);
-	removeAfterRecordFrom(context);
+export let onAfterCapture = (listener, context = getContext()) => {
+	sketchesManager.sketches[context]?.onAfterCapture(listener);
+};
+
+export let onBeforeRecord = (listener, context = getContext()) => {
+	sketchesManager.sketches[context]?.onBeforeRecord(listener);
+};
+
+export let onAfterRecord = (listener, context = getContext()) => {
+	sketchesManager.sketches[context]?.onAfterRecord(listener);
+};
+
+/**
+ * Screenshot the sketch it is called from
+ * @param {object} options
+ * @param {string} [options.filename]
+ * @param {function} [options.pattern]
+ * @param {exportDir} [options.pattern ]
+ */
+export async function screenshot({ filename, pattern, exportDir } = {}) {
+	const context = getContext();
+
+	const renders = rendering.renders.filter(
+		(render) => render.sketch.key === context,
+	);
+
+	if (renders.length > 0) {
+		for (let i = 0; i < renders.length; i++) {
+			await renders[i].screenshot({
+				filename,
+				pattern,
+				exportDir,
+			});
+		}
+	}
 }

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

@@ -8,7 +8,7 @@ const commands = {
 
 const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
 
-const LOCAL_STORAGE_KEY = 'midi.requested';
+const LOCAL_STORAGE_KEY = 'fragment.midi.requested';
 
 class MIDI extends Input {
 	constructor() {
@@ -125,6 +125,7 @@ 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/lib/canvas-recorder/CanvasRecorder.js

@@ -29,11 +29,14 @@ class CanvasRecorder {
 			: Infinity;
 		this.started = false;
 		this.stopped = false;
+
+		this.startTime = 0;
 	}
 
 	async load() {}
 
 	async start() {
+		this.startTime = performance.now();
 		this.onStart();
 
 		await this.load();
@@ -96,7 +99,9 @@ class CanvasRecorder {
 	tick() {}
 
 	end() {
-		console.log(`CanvasRecorder - compiled ${this.frameCount + 1} frames`);
+		console.log(
+			`CanvasRecorder - compiled ${this.frameCount + 1} frames in ${(performance.now() - this.startTime) / 1000}s`,
+		);
 		this.onComplete(this.result);
 	}
 

package/src/client/app/lib/gl/Renderer.js

@@ -20,6 +20,7 @@ class Renderer {
 		};
 
 		this.canvas = canvas;
+		this.canvas.setAttribute('data-engine', `fragment-gl`);
 
 		if (webgl === 2) gl = canvas.getContext('webgl2', attributes);
 		if (!gl) {

package/src/client/app/lib/svelte-json-tree/ErrorNode.svelte

@@ -0,0 +1,28 @@
+<script>
+	import ErrorStack from './ErrorStack.svelte';
+	import JSONNested from './JSONNested.svelte';
+	import JSONNode from './JSONNode.svelte';
+
+	let { value } = $props();
+
+	let stack = $derived(value.stack.split('\n'));
+</script>
+
+<JSONNested keys={['message', 'stack']}>
+	{#snippet summary()}
+		<span class="label">Error: {String(value.message)}</span>
+	{/snippet}
+	{#snippet preview()}
+		<span class="label">Error: {String(value.message)}</span>
+	{/snippet}
+	{#snippet itemKey(key)}
+		<span class="property">{key}</span>
+	{/snippet}
+	{#snippet itemValue(key)}
+		{#if key === 'stack'}
+			<ErrorStack {stack} />
+		{:else}
+			<JSONNode value={value[key]} />
+		{/if}
+	{/snippet}
+</JSONNested>

package/src/client/app/lib/svelte-json-tree/ErrorStack.svelte

@@ -0,0 +1,31 @@
+<script>
+	import JsonNode from './JSONNode.svelte';
+	import { useState } from './utils.js';
+
+	let { stack } = $props();
+
+	const { expanded, expandable, toggleExpand } = useState();
+	//expandable = true;
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events a11y-no-static-element-interactions -->
+<span onclick={(e) => toggleExpand(e)} role="button">
+	{#if expanded}
+		{#each stack as line, index}
+			{@const appendNewLine = index < stack.length - 1}
+			<span class:indent={index > 0}
+				><JsonNode value={line + (appendNewLine ? '\\n' : '')} /><span
+					class="operator">{appendNewLine ? ' +' : ''}</span
+				></span
+			><br />
+		{/each}
+	{:else}
+		<span><JsonNode value={stack[0] + '…'} /></span>
+	{/if}
+</span>
+
+<style>
+	.indent {
+		padding-left: var(--li-identation);
+	}
+</style>

package/src/client/app/lib/svelte-json-tree/Expandable.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { useState } from './utils.js';
+
+	let { key, children } = $props();
+
+	// const expandable = $state(false);
+	// setContext('expandable', false);
+	// useState(({ keyPath, level }) => {
+	// 	if (key !== '[[Entries]]') {
+	// 		keyPath = [...keyPath, key];
+	// 		level = level + 1;
+	// 	}
+	// 	return {
+	// 		keyPath,
+	// 		level,
+	// 		expanded,
+	// 		expandable,
+	// 		toggle: () => {
+	// 			expanded = !expanded;
+	// 		},
+	// 	};
+	// });
+</script>
+
+{@render children?.()}

package/src/client/app/lib/svelte-json-tree/JSONArrayNode.svelte

@@ -0,0 +1,38 @@
+<script>
+	import JSONArrow from './JSONArrow.svelte';
+	import JSONNested from './JSONNested.svelte';
+	import JSONNode from './JSONNode.svelte';
+	import PreviewList from './PreviewList.svelte';
+
+	let { value } = $props();
+
+	let keys = $derived(Object.getOwnPropertyNames(value));
+	let previewList = $derived(value.slice(0, 5));
+</script>
+
+<JSONNested {keys}>
+	{#snippet summary()}
+		<span class="label">Array({value.length})</span>
+	{/snippet}
+
+	{#snippet preview(root)}
+		<PreviewList
+			list={previewList}
+			hasMore={previewList.length < value.length}
+			label="({value.length}) "
+			prefix="["
+			postfix="]"
+			{root}
+		>
+			{#snippet item(node)}
+				<JSONNode value={node} />
+			{/snippet}
+		</PreviewList>
+	{/snippet}
+	{#snippet itemKey(key)}
+		<span class="property">{String(key)}</span>
+	{/snippet}
+	{#snippet itemValue(key)}
+		<JSONNode value={value[key]} />
+	{/snippet}
+</JSONNested>

package/src/client/app/lib/svelte-json-tree/JSONArrow.svelte

@@ -0,0 +1,47 @@
+<script>
+	import { useState } from './utils';
+
+	let {
+		expandable: _expandable,
+		expanded: _expanded,
+		toggleExpand,
+	} = useState();
+	let { expanded = _expanded, expandable = _expandable } = $props();
+</script>
+
+{#if expandable}
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<span class="json-arrow" class:expanded>
+		<span class="char">{'\u25B6'}</span>
+	</span>
+{/if}
+
+<style>
+	.json-arrow {
+		display: inline-flex;
+		transition: 150ms;
+		line-height: 1.1em;
+
+		transform-origin: 2px 50%;
+	}
+
+	.json-arrow.expanded {
+		transform: rotateZ(90deg);
+	}
+
+	.char {
+		transform-origin: 25% 50%;
+		position: relative;
+		font-size: 0.75em;
+		margin-left: 0;
+		color: var(--arrow-color);
+		user-select: none;
+		font-family: 'Courier New', Courier, monospace;
+		display: block;
+		margin-top: 1px;
+	}
+
+	/* .expanded {
+		transform: rotateZ(90deg) translateX(-3px);
+	} */
+</style>

package/src/client/app/lib/svelte-json-tree/JSONFunctionNode.svelte

@@ -0,0 +1,114 @@
+<script>
+	import JSONNested from './JSONNested.svelte';
+	import JSONNode from './JSONNode.svelte';
+	import JsonObjectNode from './JSONObjectNode.svelte';
+
+	let { value = () => {} } = $props();
+
+	let str = $derived(toString(value));
+	let ctx = $derived(parseFunction(str));
+
+	function parseFunction(str) {
+		const match = str.match(
+			/^(?:(async)\s+)?(?:function)?(\*)?\s*([^(]+)?(\([^)]*\))\s*(=>)?/,
+		);
+		const isAsync = match?.[1];
+		const isGenerator = match?.[2];
+		const fnName = match?.[3];
+		const args = match?.[4];
+		const isArrow = match?.[5];
+		const classMatch = str.match(/^class\s+([^\s]+)/);
+		const isClass = classMatch?.[1];
+
+		return {
+			args,
+			isAsync,
+			isGenerator,
+			fnName,
+			isArrow,
+			isClass,
+		};
+	}
+
+	function getPreview1({ isGenerator, isAsync, isClass }) {
+		if (isClass) return `class ${isClass}`;
+		return (isAsync ? 'async ' : '') + 'ƒ' + (isGenerator ? '*' : '');
+	}
+
+	function getPreview2({ isAsync, isArrow, fnName, args }) {
+		return (
+			(isArrow && isAsync ? 'async' : '') +
+			' ' +
+			(fnName ?? '') +
+			args +
+			(isArrow ? ' => …' : '')
+		);
+	}
+
+	const FUNCTION = '[[Function]]';
+	const PROTO = '[[Prototype]]';
+
+	function getValue(key) {
+		if (key === PROTO) return value.__proto__;
+		return value[key];
+	}
+
+	function filterKeys(key) {
+		if (key === FUNCTION) return true;
+		return getValue(key);
+	}
+
+	function toString(value = () => {}) {
+		try {
+			return value.toString();
+		} catch {
+			switch (value.constructor.name) {
+				case 'AsyncFunction':
+					return 'async function () {}';
+				case 'AsyncGeneratorFunction':
+					return 'async function * () {}';
+				case 'GeneratorFunction:':
+					return 'function * () {}';
+				default:
+					return 'function () {}';
+			}
+		}
+	}
+
+	let keys = $derived(
+		['length', 'name', 'prototype', FUNCTION, PROTO].filter(filterKeys),
+	);
+</script>
+
+<JSONNested {keys}>
+	{#snippet summary()}
+		<span class="i">ƒ</span>
+	{/snippet}
+	{#snippet preview()}
+		{#if !ctx.isArrow}<span class="fn i">{getPreview1(ctx)}</span
+			>{/if}{#if !ctx.isClass}<span class="i">{getPreview2(ctx)}</span
+			>{/if}
+	{/snippet}
+	{#snippet itemKey(key)}
+		<span
+			class={key === FUNCTION || key === PROTO ? 'internal' : 'property'}
+			>{key}</span
+		>
+	{/snippet}
+	{#snippet itemValue(key)}
+		{#if key === FUNCTION}<span class="i">{str}</span
+			>{:else if key === 'prototype'}<JsonObjectNode
+				value={getValue(key)}
+			/>{:else}<JSONNode value={getValue(key)} />{/if}
+	{/snippet}
+</JSONNested>
+
+<style>
+	.i {
+		font-style: italic;
+	}
+	.fn,
+	.i {
+		color: var(--function-color);
+	}
+</style>

package/src/client/app/lib/svelte-json-tree/JSONIterableArrayNode.svelte

@@ -0,0 +1,60 @@
+<script>
+	import JSONNested from './JSONNested.svelte';
+	import JSONNode from './JSONNode.svelte';
+	import PreviewList from './PreviewList.svelte';
+
+	let { value, nodeType } = $props();
+
+	let [indexes, items] = $derived.by(() => {
+		let _indexes = [];
+		let _items = [];
+		let i = 0;
+		for (const entry of value) {
+			_indexes.push(i++);
+			_items.push(entry);
+		}
+
+		return [_indexes, _items];
+	});
+
+	let previewItems = $derived(items.slice(0, 5));
+
+	const ENTRIES = '[[Entries]]';
+</script>
+
+<JSONNested keys={[ENTRIES, 'size']} shouldShowColon={(key) => key !== ENTRIES}>
+	{#snippet summary()}
+		<span class="label">{nodeType}({indexes.length})</span>
+	{/snippet}
+	{#snippet preview(root)}
+		<PreviewList
+			list={previewItems}
+			hasMore={previewItems.length < items.length}
+			label={`${nodeType}(${indexes.length}) `}
+			prefix={'{'}
+			postfix="}"
+			{root}
+		>
+			{#snippet item(value)}
+				<JSONNode {value} />
+			{/snippet}
+		</PreviewList>
+	{/snippet}
+	{#snippet itemKey(key)}
+		<span class={key === ENTRIES ? 'internal' : 'property'}>{key}</span>
+	{/snippet}
+	{#snippet itemValue(key)}
+		{#if key === ENTRIES}
+			<JSONNested keys={indexes} defaultExpanded>
+				{#snippet itemKey(index)}
+					<span class="property">{index}</span>
+				{/snippet}
+				{#snippet itemValue(index)}
+					<JSONNode value={items[index]} />
+				{/snippet}
+			</JSONNested>
+		{:else}
+			<JSONNode value={value[key]} />
+		{/if}
+	{/snippet}
+</JSONNested>

package/src/client/app/lib/svelte-json-tree/JSONIterableMapNode.svelte

@@ -0,0 +1,87 @@
+<script>
+	import { useState } from './utils.js';
+	import JSONNested from './JSONNested.svelte';
+	import JSONNode from './JSONNode.svelte';
+	import PreviewList from './PreviewList.svelte';
+
+	let { value } = $props();
+	useState();
+
+	let [indexes, keys, values] = $derived.by(() => {
+		let _indexes = [];
+		let _keys = [];
+		let _values = [];
+		let i = 0;
+		for (const entry of value) {
+			_indexes.push(i++);
+			_keys.push(entry[0]);
+			_values.push(entry[1]);
+		}
+
+		return [_indexes, _keys, _values];
+	});
+
+	let previewKeys = $derived(Array.from(value.keys()).slice(0, 5));
+
+	const ENTRIES = '[[Entries]]';
+</script>
+
+<JSONNested keys={[ENTRIES, 'size']} shouldShowColon={(key) => key !== ENTRIES}>
+	{#snippet summary()}
+		<span color="label">Map({keys.length})</span>
+	{/snippet}
+	{#snippet preview(root)}
+		<PreviewList
+			list={previewKeys}
+			hasMore={previewKeys.length < value.size}
+			label={`Map(${keys.length}) `}
+			prefix={`{`}
+			postfix="}"
+			{root}
+		>
+			{#snippet item(key)}
+				<JSONNode value={key} /><span class="operator">{' => '}</span
+				><JSONNode value={value.get(key)} />
+			{/snippet}
+		</PreviewList>
+	{/snippet}
+	{#snippet itemKey(key)}
+		<span class={key === ENTRIES ? 'internal' : 'property'}>{key}</span>
+	{/snippet}
+	{#snippet itemValue(key)}
+		{#if key === ENTRIES}
+			<JSONNested
+				keys={indexes}
+				expandKey={(index) => keys[index]}
+				defaultExpanded
+			>
+				{#snippet itemKey(index)}
+					<span class="property">{index}</span>
+				{/snippet}
+				{#snippet itemValue(index)}
+					<JSONNested keys={['key', 'value']}>
+						{#snippet preview()}
+							<span class="operator">{'{ '}</span><JSONNode
+								value={keys[index]}
+							/><span class="operator">{' => '}</span><JSONNode
+								value={values[index]}
+							/><span class="operator">{' }'}</span>
+						{/snippet}
+						{#snippet itemKey(name)}
+							<span class="property">{name}</span>
+						{/snippet}
+						{#snippet itemValue(name)}
+							<JSONNode
+								value={name === 'key'
+									? keys[index]
+									: values[index]}
+							/>
+						{/snippet}
+					</JSONNested>
+				{/snippet}
+			</JSONNested>
+		{:else}
+			<JSONNode value={value[key]} />
+		{/if}
+	{/snippet}
+</JSONNested>

package/src/client/app/lib/svelte-json-tree/JSONNested.svelte

@@ -0,0 +1,94 @@
+<script>
+	/* eslint-disable @typescript-eslint/no-empty-function */
+	import { getContext, onMount, setContext } from 'svelte';
+	import JSONArrow from './JSONArrow.svelte';
+	import { useState } from './utils.js';
+	import Summary from './Summary.svelte';
+	import Expandable from './Expandable.svelte';
+
+	let {
+		keys,
+		shouldShowColon = undefined,
+		expandKey = (key) => key,
+		defaultExpanded = false,
+		summary,
+		preview,
+		itemKey,
+		itemValue,
+	} = $props();
+
+	let expanded = $state(defaultExpanded);
+	let expandable = $state(false);
+	let displayMode = getContext('displayMode');
+	let root = getContext('root');
+	let toggleExpand = (e) => {
+		e?.preventDefault();
+		e.stopPropagation();
+
+		expanded = !expanded;
+	};
+
+	$effect(() => {
+		setContext('expandable', expandable);
+		setContext('expanded', expanded);
+	});
+
+	setContext('root', false);
+	setContext('toggleExpand', toggleExpand);
+</script>
+
+{#if displayMode === 'summary'}
+	{@render summary?.()}
+{:else}
+	<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+	<span class="root jsonnested" onclick={(e) => toggleExpand(e)}>
+		<!-- {#if root}
+			<JSONArrow {expanded} {expandable} />
+		{/if} -->
+		<Summary>
+			{@render preview?.(root)}
+		</Summary>
+	</span>
+
+	{#if expanded}
+		<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+		<ul
+			onclick={(e) => {
+				e.stopPropagation();
+				toggleExpand(e);
+			}}
+		>
+			{#each keys as key, index}
+				<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+				<li class:indent={expanded}>
+					<Expandable key={expandKey(key)}>
+						<span class="label">
+							<!-- <JSONArrow /> -->
+							{@render itemKey?.(key)}
+							{#if !shouldShowColon || shouldShowColon(key)}
+								<span class="operator">{': '}</span>
+							{/if}
+						</span>
+						{@render itemValue?.(key)}
+					</Expandable>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+{/if}
+
+<style>
+	.root {
+		display: inline-flex;
+		position: relative;
+		flex-wrap: wrap;
+		white-space: pre-wrap;
+	}
+	.indent {
+		padding-left: var(--li-identation);
+	}
+	.label {
+		position: relative;
+		display: inline-flex;
+	}
+</style>