fragment-tools 0.2.12 → 0.2.14

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

@@ -10,6 +10,8 @@
 	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 = {
@@ -21,11 +23,14 @@
 		[`${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>
 
@@ -140,7 +145,7 @@
 	}
 
 	function restoreInitialValue() {
-		onchange(initialValue);
+		onchange($state.snapshot(initialValue));
 	}
 </script>
 

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

@@ -102,7 +102,7 @@
 	/>
 {/if}
 {#if rendering.resizing === SIZES.PRESET}
-	<Field key="preset">
+	<Field key="preset" type="wrapper" value={`${rendering.preset}-${rendering.presetOrientation}`}>
 		<FieldInputRow --grid-template-columns="1fr 1fr">
 			<Select
 				value={rendering.preset}

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

@@ -74,6 +74,11 @@
 			render.screenshot();
 			exports.capturing = false;
 		}
+
+		if (exports.committing) {
+			render.commit();
+			exports.committing = false;
+		}
 	});
 
 	function checkForRefresh(event) {
@@ -113,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 (
@@ -154,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);

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

@@ -1,15 +1,17 @@
 <script>
-	let {
-		value = $bindable(),
-		context,
-		key = '',
-		disabled = false,
-		onchange,
-	} = $props();
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} value
+	 * @property {boolean} disabled
+	 * @property {(value: boolean) => void|undefined} onchange
+	 */
 
-	const handleChange = (event) => {
-		onchange(value);
-	};
+	/** @type {Props} */
+	let { value = $bindable(), disabled = false, onchange } = $props();
+
+	function handleChange() {
+		onchange?.(value);
+	}
 </script>
 
 <div class="checkbox" class:disabled>
@@ -18,7 +20,7 @@
 		bind:checked={value}
 		type="checkbox"
 		onchange={handleChange}
-		disabled={disabled ? 'disabled' : null}
+		{disabled}
 	/>
 </div>
 

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

@@ -16,18 +16,21 @@
 	let textValue = $state();
 	let alpha = $state(1);
 	let hasAlpha = $derived(
-		[
-			color.FORMATS.RGBA_STRING,
-			color.FORMATS.VEC4_STRING,
-			color.FORMATS.VEC4_ARRAY,
-			color.FORMATS.RGBA_OBJECT,
-			color.FORMATS.HSLA_STRING,
-		].includes(format),
+		format &&
+			[
+				color.FORMATS.RGBA_STRING,
+				color.FORMATS.VEC4_STRING,
+				color.FORMATS.VEC4_ARRAY,
+				color.FORMATS.RGBA_OBJECT,
+				color.FORMATS.RGBA_OBJECT_STRING,
+				color.FORMATS.HSLA_STRING,
+			].includes(format),
 	);
 
 	$effect(() => {
 		if (hasAlpha) {
-			const [r, g, b, a = 1] = color.toComponents(value);
+			const components = color.toComponents(value);
+			const a = components[3] ?? 1;
 			alpha = a;
 		} else {
 			alpha = 1;
@@ -143,7 +146,7 @@
 			<input
 				class="input"
 				type="color"
-				disabled={disabled ? 'disabled' : null}
+				{disabled}
 				value={hexValue}
 				onblur={handleBlur}
 				oninput={onInput}
@@ -212,7 +215,7 @@
 		bottom: var(--gap);
 
 		background-color: var(--currentColor);
-		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
+		border-radius: calc(var(--fragment-input-border-radius) - var(--gap));
 		opacity: var(--opacity, 1);
 		pointer-events: none;
 	}
@@ -224,7 +227,9 @@
 			var(--box-shadow-color, var(--fragment-accent-color));
 	}
 
-	.mirror:focus-within {
+	:global(body:not(.fragment-dragging))
+		.color-input:not(.disabled)
+		.mirror:focus-within {
 		box-shadow: 0 0 0 2px
 			var(--box-shadow-color, var(--fragment-accent-color));
 	}