fragment-tools 0.2.11 → 0.2.13

package/src/client/app/state/exports.svelte.js

@@ -1,3 +1,4 @@
+import { saveFiles } from '@fragment/utils/file.utils';
 import { screenshotCanvas, recordCanvas } from '../utils/canvas.utils';
 import { hydrate, persist } from './utils.svelte';
 
@@ -58,6 +59,7 @@ class Exports {
 	imageCount = $state(1);
 	recording = $state(false);
 	capturing = $state(false);
+	committing = $state(false);
 	imageCollapsed = $state(false);
 	videoCollapsed = $state(false);
 
@@ -96,6 +98,8 @@ class Exports {
 			quality = this.imageQuality,
 			pixelsPerInch = this.pixelsPerInch,
 			filename,
+			files = [],
+			commit = false,
 			pattern,
 			exportDir,
 			params = {},
@@ -117,7 +121,7 @@ class Exports {
 		for (let i = 0; i < count; i++) {
 			onBeforeCapture(captureParams);
 
-			await screenshotCanvas(canvas, {
+			const file = screenshotCanvas(canvas, {
 				filename,
 				pattern,
 				exportDir,
@@ -128,10 +132,19 @@ class Exports {
 				pixelsPerInch,
 			});
 
+			files.push(file);
+
 			onAfterCapture(captureParams);
 		}
 
 		onComplete(captureParams);
+
+		try {
+			await saveFiles(files, [], { commit });
+		} catch (error) {
+			console.error(`[fragment] Error while saving screenshot.`);
+			console.log(error);
+		}
 	}
 
 	record(

package/src/client/app/state/rendering.svelte.js

@@ -12,6 +12,11 @@ import { layout } from './layout.svelte.js';
 import { persist, hydrate } from './utils.svelte';
 import presets from '../lib/presets';
 import { client } from '../client.js';
+import { saveFiles } from '@fragment/utils/file.utils.js';
+import {
+	defaultFilenamePattern,
+	getFilenameParams,
+} from '@fragment/utils/canvas.utils.js';
 
 export const SIZES = {
 	FIXED: 'fixed',
@@ -94,6 +99,10 @@ class Rendering {
 		this.estimateRefreshRate();
 	}
 
+	/**
+	 *
+	 * @param {string} renderingMode
+	 */
 	loadRenderer(renderingMode) {
 		if (__THREE_RENDERER__ && renderingMode === 'three') {
 			return import('../renderers/THREERenderer.js');
@@ -321,7 +330,8 @@ export class Render {
 		this.time = 0;
 		this.recording = false;
 
-		let resizeTimeout;
+		/** @type {number|null} */
+		let resizeTimeout = null;
 
 		$effect.pre(() => {
 			const { width, height, pixelRatio } = rendering;
@@ -330,7 +340,10 @@ export class Render {
 				if (resizeTimeout) clearTimeout(resizeTimeout);
 
 				resizeTimeout = setTimeout(() => {
-					clearTimeout(resizeTimeout);
+					if (resizeTimeout) {
+						clearTimeout(resizeTimeout);
+					}
+
 					resizeTimeout = null;
 
 					this.resize(width, height, pixelRatio);
@@ -399,6 +412,7 @@ export class Render {
 		this.then = performance.now();
 
 		this.playhead = 0;
+		this.playheadLast = 0;
 		this.playcount = 0;
 		this.frame = 0;
 
@@ -443,24 +457,23 @@ export class Render {
 				return;
 			}
 
-			let playhead = time / 1000 / duration;
-			playhead %= 1;
-			let playcount = 0;
+			let totalPlayhead = time / 1000 / duration;
+			let playhead = fps === 0 ? 0 : totalPlayhead % 1;
+
+			if (playhead < this.playheadLast) {
+				this.playcount++;
+			}
+			this.playheadLast = playhead;
+
 			if (isFinite(interval)) {
 				// round values for low framerates
 				playhead = Math.floor(playhead / interval) * interval;
 			}
-			if (isFinite(duration)) {
-				playcount = Math.floor(this.timeTotal / 1000 / duration);
-			}
-			if (fps === 0) {
-				playhead = 0;
-			}
+
 			const now = performance.now();
 			const deltaTime = now - this.thenLoop;
 
 			this.playhead = playhead;
-			this.playcount = playcount;
 			this.frame = Math.floor(map(playhead, 0, 1, 1, frameCount + 1));
 			if (
 				this.elapsed === 0 ||
@@ -499,6 +512,9 @@ export class Render {
 
 				this.raf = requestAnimationFrame(() => {
 					this.time = new Date().getTime() - rendering.today;
+					this.initialTime = this.time;
+					this.playheadLast = 0;
+					this.playcount = 0;
 					this.then = this.time;
 					this.thenLoop = performance.now();
 					this.update(this.time);
@@ -522,6 +538,14 @@ export class Render {
 		});
 	}
 
+	/**
+	 *
+	 * @param {Object} params
+	 * @param {HTMLElement} params.container
+	 * @param {HTMLCanvasElement} [params.canvas]
+	 * @param {string} params.context
+	 * @returns
+	 */
 	createCanvas({
 		container,
 		canvas = document.createElement('canvas'),
@@ -543,6 +567,10 @@ export class Render {
 		return canvas;
 	}
 
+	/**
+	 *
+	 * @param {HTMLCanvasElement} canvas
+	 */
 	destroyCanvas(canvas) {
 		if (canvas) {
 			this.observer.disconnect();
@@ -551,7 +579,6 @@ export class Render {
 			canvas.onmousemove = null;
 			canvas.onmouseup = null;
 			canvas.onclick = null;
-			canvas = null;
 		}
 	}
 
@@ -559,6 +586,8 @@ export class Render {
 		filename = this.sketch.key,
 		pattern = this.sketch.filenamePattern,
 		exportDir = this.sketch.exportDir,
+		files = [],
+		commit = false,
 	} = {}) {
 		const { sketch } = this;
 
@@ -569,6 +598,8 @@ export class Render {
 			params: {
 				props: sketch.props,
 			},
+			files,
+			commit,
 			onBeforeCapture: (params) => {
 				sketch.beforeCapture.forEach((fn) => fn(params));
 				this.renderSketch();
@@ -580,6 +611,44 @@ export class Render {
 		});
 	}
 
+	async commit({
+		filename = this.sketch.key,
+		pattern = this.sketch.filenamePattern ?? defaultFilenamePattern,
+		exportDir = this.sketch.exportDir,
+	} = {}) {
+		const { sketch } = this;
+		const { props } = sketch;
+
+		const data = {};
+
+		for (const key in props) {
+			data[key] = { value: props[key].value };
+		}
+
+		let patternParams = getFilenameParams();
+		let name = pattern({
+			filename,
+			params: { props },
+			...patternParams,
+		});
+
+		let files = [
+			{
+				filename: `${name}.props.json`,
+				exportDir,
+				data: JSON.stringify(data),
+			},
+		];
+
+		await this.screenshot({
+			filename,
+			pattern,
+			exportDir,
+			files,
+			commit: true,
+		});
+	}
+
 	get params() {
 		return {
 			...this.mountParams,
@@ -616,6 +685,8 @@ export class Render {
 			onStart: (params) => {
 				this.time = 0;
 				this.elapsed = 0;
+				this.playcount = 0;
+				this.playheadLast = 0;
 				this.thenLoop = performance.now();
 
 				sketch.beforeRecord.forEach((fn) => fn(params));
@@ -686,6 +757,10 @@ export class Render {
 		}
 	}
 
+	/**
+	 *
+	 * @param {number} time
+	 */
 	update(time) {
 		if (!this.paused) {
 			const deltaTime = time - this.then;
@@ -705,6 +780,8 @@ export class Render {
 	invalidate() {
 		this.time = 0;
 		this.elapsed = 0;
+		this.playcount = 0;
+		this.playheadLast = 0;
 	}
 
 	dispose() {

package/src/client/app/state/sketches.svelte.js

@@ -6,11 +6,28 @@ import Sketch from './Sketch.svelte.js';
 import { rendering } from './rendering.svelte.js';
 import { removeHotListeners } from '../triggers/index.js';
 
+/**
+ * @typedef {Object} SketchInstance
+ * @property {string} [rendering]
+ * @property {any} [renderer]
+ */
+
+/**
+ * @typedef {Record<string, () => Promise<SketchInstance>>} SketchCollection
+ */
+
 class SketchesManager {
+	/** @type {Record<string, Sketch>} */
 	sketches = $state({});
 	keys = $derived(Object.keys(this.sketches));
 	count = $derived(this.keys.length);
 
+	/**
+	 * Load a single sketch from a collection
+	 * @param {SketchCollection} collection - The collection of sketches
+	 * @param {string} key - The key of the sketch to load
+	 * @returns {Promise<SketchInstance | undefined>}
+	 */
 	async loadSketch(collection, key) {
 		try {
 			let sketch = await collection[key]();
@@ -27,6 +44,11 @@ class SketchesManager {
 		}
 	}
 
+	/**
+	 * Load all sketches from a collection
+	 * @param {SketchCollection} collection - The collection of sketches to load
+	 * @returns {Promise<void>}
+	 */
 	async loadAll(collection) {
 		const keys = [...Object.keys(collection)];
 
@@ -42,16 +64,30 @@ class SketchesManager {
 			keys.map((key) => this.loadSketch(collection, key)),
 		);
 
-		const newSketches = keys.reduce((all, key, index) => {
-			if (loadedSketches[index]) {
-				all[key] = loadedSketches[index];
-			}
+		/** @type {Record<string, SketchInstance>} */
+		const newSketches = keys.reduce(
+			/**
+			 * @param {Record<string, SketchInstance>} all
+			 * @param {string} key
+			 * @param {number} index
+			 */
+			(all, key, index) => {
+				if (loadedSketches[index]) {
+					all[key] = loadedSketches[index];
+				}
 
-			return all;
-		}, {});
+				return all;
+			},
+			{},
+		);
 
+		/** @type {Record<string, Sketch>} */
 		const newInstancedSketches = Object.keys(newSketches).reduce(
-			(all, key, index) => {
+			/**
+			 * @param {Record<string, Sketch>} all
+			 * @param {string} key
+			 */
+			(all, key) => {
 				const prevSketch = this.sketches[key];
 
 				const instanced = new Sketch({

package/src/client/app/state/utils.svelte.js

@@ -1,3 +1,9 @@
+/**
+ * Persists data to localStorage with a "fragment." prefix
+ * @param {string} key - The storage key (will be prefixed with "fragment.")
+ * @param {any} data - The data to store (will be JSON stringified)
+ * @throws {Error} If localStorage operation fails
+ */
 export function persist(key, data) {
 	try {
 		window.localStorage.setItem(`fragment.${key}`, JSON.stringify(data));
@@ -6,6 +12,13 @@ export function persist(key, data) {
 	}
 }
 
+/**
+ * Retrieves and optionally merges data from localStorage
+ * @param {string} key - The storage key (will be prefixed with "fragment.")
+ * @param {Record<string, any>} [target={}] - Optional target object to merge data into
+ * @param {any} [defaultValue={}] - Default value to return if no data found
+ * @returns {any} The retrieved data, defaultValue if not found, or undefined on error
+ */
 export function hydrate(key, target = {}, defaultValue = {}) {
 	try {
 		const storageKey = `fragment.${key}`;
@@ -31,14 +44,39 @@ export function hydrate(key, target = {}, defaultValue = {}) {
 	}
 }
 
+/**
+ * Checks if a value is an object
+ * @param {any} item - The value to check
+ * @returns {boolean} True if the value is an object
+ */
 export function isObject(item) {
 	return item && typeof item === 'object';
 }
 
+/**
+ * Checks if a value is a function
+ * @param {any} item - The value to check
+ * @returns {boolean} True if the value is a function
+ */
 export function isFunction(item) {
 	return item && typeof item === 'function';
 }
 
+/**
+ * Returns true if the given cache key contains the data:image scheme.
+ * @param {any} value
+ * @return {boolean} Whether the given cache url contains the blob: scheme or not.
+ */
+export function isDataURL(value) {
+	return typeof value === 'string' && value.startsWith('data:image/');
+}
+
+/**
+ * Recursively assigns properties from source to target
+ * @param {Record<string, any>} target - The target object to assign to
+ * @param {Record<string, any>} source - The source object to assign from
+ * @returns {void}
+ */
 export function deepAssign(target, source) {
 	for (const key in source) {
 		if (isObject(source[key]) && isObject(target[key])) {
@@ -49,6 +87,12 @@ export function deepAssign(target, source) {
 	}
 }
 
+/**
+ * Recursively compares two values for deep equality
+ * @param {any} target - The first value to compare
+ * @param {any} source - The second value to compare
+ * @returns {boolean} True if the values are deeply equal
+ */
 export function deepEqual(target, source) {
 	if (isObject(target) && isObject(source)) {
 		let isEqual = true;
@@ -75,6 +119,11 @@ export function deepEqual(target, source) {
 	return target === source;
 }
 
+/**
+ * Creates a deep clone of a value
+ * @param {any} value - The value to clone
+ * @returns {any} A deep clone of the value, or the original value if cloning fails
+ */
 export function deepClone(value) {
 	if (isFunction(value)) {
 		return value;

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

@@ -4,11 +4,14 @@
 	import CheckboxInput from './fields/CheckboxInput.svelte';
 	import VectorInput from './fields/VectorInput.svelte';
 	import TextInput from './fields/TextInput.svelte';
+	import TextareaInput from './fields/TextareaInput.svelte';
 	import ColorInput from './fields/ColorInput.svelte';
 	import ListInput from './fields/ListInput.svelte';
 	import ButtonInput from './fields/ButtonInput.svelte';
 	import ImageInput from './fields/ImageInput.svelte';
 	import IntervalInput from './fields/IntervalInput.svelte';
+	import PaletteInput from './fields/PaletteInput.svelte';
+	import GradientInput from './fields/GradientInput.svelte';
 	import { fieldTypes } from '../utils/fields.utils.js';
 
 	const fields = {
@@ -17,13 +20,17 @@
 		[`${fieldTypes.VEC}`]: VectorInput,
 		[`${fieldTypes.CHECKBOX}`]: CheckboxInput,
 		[`${fieldTypes.TEXT}`]: TextInput,
+		[`${fieldTypes.TEXTAREA}`]: TextareaInput,
 		[`${fieldTypes.LIST}`]: ListInput,
 		[`${fieldTypes.COLOR}`]: ColorInput,
+		[`${fieldTypes.PALETTE}`]: PaletteInput,
 		[`${fieldTypes.BUTTON}`]: ButtonInput,
 		[`${fieldTypes.DOWNLOAD}`]: ButtonInput,
 		[`${fieldTypes.IMPORT}`]: ImportInput,
 		[`${fieldTypes.IMAGE}`]: ImageInput,
 		[`${fieldTypes.INTERVAL}`]: IntervalInput,
+		[`${fieldTypes.GRADIENT}`]: GradientInput,
+		[`${fieldTypes.WRAPPER}`]: null,
 	};
 </script>
 
@@ -52,6 +59,7 @@
 		onchange,
 		onclick = () => {},
 		children,
+		trackChanges = false,
 		triggers = $bindable([]),
 	} = $props();
 
@@ -63,10 +71,18 @@
 
 			onchange(value);
 		},
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
 		button: (event) => {
 			value(event);
 			onclick(event);
 		},
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
 		download: async (event) => {
 			try {
 				let [data, filename] = await value(event);
@@ -105,7 +121,12 @@
 				fieldType === fieldTypes.BUTTON),
 	);
 	let triggersActive = $derived(triggers.length > 0);
+	let changed = $derived(trackChanges && !deepEqual(value, initialValue));
 
+	/**
+	 *
+	 * @param {MouseEvent} event
+	 */
 	function toggleTriggers(event) {
 		event.preventDefault();
 
@@ -123,16 +144,15 @@
 		};
 	}
 
-	function hasChanged(current, next) {
-		const changed = !deepEqual(current, next);
-		return changed;
+	function restoreInitialValue() {
+		onchange($state.snapshot(initialValue));
 	}
 </script>
 
 <div
 	class="field"
 	class:disabled
-	class:changed={!disabled && hasChanged(value, initialValue)}
+	class:changed={!disabled && changed}
 	style="--index: {index};"
 >
 	<FieldSection
@@ -166,6 +186,15 @@
 		<Component {value} {...fieldProps} {onchange} onclick={onTrigger} />
 		{@render children?.()}
 	</FieldSection>
+	{#if changed}
+		<button
+			class="field__changed"
+			onclick={restoreInitialValue}
+			title="Restore initial value"
+		>
+			<span class="visually-hidden">Restore initial value</span>
+		</button>
+	{/if}
 	{#if triggerable}
 		<FieldSection {key} visible={showTriggers} secondary>
 			<FieldTriggers
@@ -192,28 +221,45 @@
 		border-bottom: 1px solid var(--fragment-spacing-color);
 	}
 
-	.field.changed:before {
-		content: '';
-
+	.field__changed {
 		position: absolute;
 		top: 0px;
 		left: 0px;
 		bottom: 0px;
 		z-index: 1;
 
-		width: 4px;
+		width: 13px;
 		/* height: 4px; */
 		/* border-radius: 2px; */
 
-		--stripes-offset: calc(var(--index) * 1.9px);
+		background: transparent;
+		cursor: pointer;
+
+		&:before {
+			content: '';
+
+			position: absolute;
+			top: 0;
+			left: 0;
+
+			display: block;
+			width: 4px;
+			height: 100%;
+
+			--stripes-offset: calc(var(--index) * 1.9px);
+
+			background: repeating-linear-gradient(
+				45deg,
+				var(--fragment-accent-color) calc(0px + var(--stripes-offset)),
+				var(--fragment-accent-color) calc(2px + var(--stripes-offset)),
+				transparent calc(2px + var(--stripes-offset)),
+				transparent calc(4px + var(--stripes-offset))
+			);
+		}
 
-		background: repeating-linear-gradient(
-			45deg,
-			var(--fragment-accent-color) calc(0px + var(--stripes-offset)),
-			var(--fragment-accent-color) calc(2px + var(--stripes-offset)),
-			transparent calc(2px + var(--stripes-offset)),
-			transparent calc(4px + var(--stripes-offset))
-		);
+		&:hover:before {
+			width: 7px;
+		}
 	}
 
 	:global(.field__input .field) {
@@ -229,6 +275,7 @@
 	.field__actions {
 		display: flex;
 		align-items: center;
+		gap: var(--column-gap);
 	}
 
 	.field__action {

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

@@ -2,13 +2,13 @@
 	let {
 		key,
 		visible = true,
-		secondary,
-		interactive,
+		secondary = false,
+		interactive = false,
 		displayName = undefined,
 		disabled = false,
 		children,
-		infos,
-		onclick,
+		infos = undefined,
+		onclick = () => {},
 	} = $props();
 </script>
 

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

@@ -101,8 +101,8 @@
 		}}
 	/>
 {/if}
-<!-- {#if rendering.resizing === SIZES.PRESET}
-	<Field key="preset">
+{#if rendering.resizing === SIZES.PRESET}
+	<Field key="preset" type="wrapper" value={`${rendering.preset}-${rendering.presetOrientation}`}>
 		<FieldInputRow --grid-template-columns="1fr 1fr">
 			<Select
 				value={rendering.preset}
@@ -123,18 +123,20 @@
 			/>
 		</FieldInputRow>
 	</Field>
-{/if} -->
-
+{/if}
 {#if rendering.resizing !== SIZES.PRESET}
 	<Field
 		key="pixelRatio"
 		value={Number(rendering.pixelRatio)}
-		onchange={(pixelRatio) => (rendering.pixelRatio = pixelRatio)}
+		onchange={(pixelRatio) => {
+			rendering.pixelRatio = pixelRatio;
+		}}
 		params={{
 			step: 0.1,
 		}}
 	/>
 {/if}
+
 <!-- {#if $sketchesCount > 1 && $monitors.length > 1}
 	<ParamsMultisampling />
 {/if} -->

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

@@ -69,6 +69,16 @@
 		} else if (render?.recording && !exports.recording) {
 			render.stopRecording();
 		}
+
+		if (exports.capturing) {
+			render.screenshot();
+			exports.capturing = false;
+		}
+
+		if (exports.committing) {
+			render.commit();
+			exports.committing = false;
+		}
 	});
 
 	function checkForRefresh(event) {
@@ -108,6 +118,16 @@
 		}
 	}
 
+	function checkForCommit(event) {
+		if (event.metaKey || event.ctrlKey) {
+			event.preventDefault();
+
+			if (!exports.committing) {
+				render.commit();
+			}
+		}
+	}
+
 	let backgroundColor = $derived.by(() => {
 		if (layout.previewing) {
 			return (
@@ -149,6 +169,7 @@
 <KeyBinding type="down" key=" " onTrigger={checkForPause} />
 <KeyBinding type="down" key="s" onTrigger={checkForScreenshot} />
 <KeyBinding type="down" key="S" onTrigger={checkForRecord} />
+<KeyBinding type="down" key="k" onTrigger={checkForCommit} />
 
 <style>
 	.sketch-renderer {

package/src/client/app/ui/fields/ButtonInput.svelte

@@ -32,6 +32,8 @@
 	}
 
 	.button {
+		position: relative;
+
 		display: flex;
 		width: 100%;
 		min-width: var(--fragment-input-height);