fragment-tools 0.2.11 → 0.2.13

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

@@ -8,14 +8,18 @@
 		onkeydown,
 		onfocus,
 		onblur,
+		node = $bindable(),
 	} = $props();
 
-	/** @type {HTMLInputElement} */
-	let node;
-
+	/**
+	 * @param {KeyboardEvent} event
+	 */
 	function onKeyPress(event) {
-		if (event.key === 'Enter') {
-			node.blur();
+		if (
+			event.currentTarget instanceof HTMLInputElement &&
+			event.key === 'Enter'
+		) {
+			event.currentTarget.blur();
 		}
 	}
 </script>
@@ -34,7 +38,7 @@
 		{onfocus}
 		{onblur}
 		onkeypress={onKeyPress}
-		disabled={disabled ? 'disabled' : null}
+		{disabled}
 		autocomplete="off"
 		spellcheck="false"
 	/>

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

@@ -2,6 +2,7 @@
 	import FieldInputRow from './FieldInputRow.svelte';
 	import NumberInput from './NumberInput.svelte';
 	import { map, clamp, roundToStep } from '../../utils/math.utils';
+	import { draggable } from '../../attachments/draggable.js';
 
 	let {
 		value = null,
@@ -21,51 +22,49 @@
 	/** @type {DOMRect}*/
 	let rect;
 	/** @type {boolean}*/
-	let isDragging = $state(false);
+	let dragging = $state(false);
 
 	let proximityIndex = -1;
 
 	/**
 	 *
 	 * @param {MouseEvent} event
+	 * @param {DOMRect}
 	 */
-	function handleMouseDown(event) {
-		document.body.classList.add('fragment-dragging');
-
-		document.addEventListener('mousemove', handleMouseMove);
-		document.addEventListener('mouseup', handleMouseUp);
-
-		rect = node.getBoundingClientRect();
-
-		isDragging = true;
-
-		let dragValue = computeDrag(event);
-
-		let abs0 = Math.abs(dragValue - value[0]);
-		let abs1 = Math.abs(dragValue - value[1]);
-
-		proximityIndex = abs0 < abs1 ? 0 : 1;
-
-		onDrag(event);
-	}
-
-	function computeDrag(event) {
+	function computeDrag(event, rect) {
 		let dragValue = clamp(
 			map(event.clientX, rect.left, rect.right, min, max),
 			min,
 			max,
 		);
 		dragValue = roundToStep(dragValue, step);
+
 		return dragValue;
 	}
 
-	function handleMouseMove(event) {
-		onDrag(event);
+	/**
+	 *
+	 * @param {MouseEvent} event
+	 * @param {object} params
+	 * @param {DOMRect | undefined} params.rect
+	 */
+	function onDragStart(event, params) {
+		if (params.rect) {
+			let dragValue = computeDrag(event, params.rect);
+
+			let abs0 = Math.abs(dragValue - value[0]);
+			let abs1 = Math.abs(dragValue - value[1]);
+
+			proximityIndex = abs0 < abs1 ? 0 : 1;
+
+			onDrag(event, params);
+		}
 	}
 
-	function onDrag(event) {
-		let dragValue = computeDrag(event);
+	function onDrag(event, params) {
+		dragging = params.isDragging;
 
+		let dragValue = computeDrag(event, params.rect);
 		let prevValue = value[proximityIndex];
 
 		if (dragValue !== prevValue) {
@@ -82,13 +81,6 @@
 		}
 	}
 
-	function handleMouseUp() {
-		document.body.classList.remove('fragment-dragging');
-		document.removeEventListener('mousemove', handleMouseMove);
-		document.removeEventListener('mouseup', handleMouseUp);
-
-		isDragging = false;
-	}
 
 	function handleValueChange(index, newValue) {
 		let newValues = [...value];
@@ -119,9 +111,9 @@
 	<FieldInputRow --grid-template-columns="1fr 0.5fr">
 		<div
 			class="range"
-			class:dragging={isDragging}
+			class:dragging={dragging}
 			bind:this={node}
-			onmousedown={handleMouseDown}
+			{@attach draggable({ onDragStart, onDrag })}
 		>
 			<div class="handler" style="--position: {p1};" />
 			<div class="filler" style="--p1: {p1}; --p2: {p2};"></div>

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

@@ -1,4 +1,5 @@
 <script>
+	import { tick } from 'svelte';
 	import FieldInputRow from './FieldInputRow.svelte';
 	import Input from './Input.svelte';
 	import ProgressInput from './ProgressInput.svelte';
@@ -17,16 +18,30 @@
 		key = '',
 		progress = true,
 		onchange,
+		onfocus,
+		onblur,
+		node = $bindable(),
 	} = $props();
 
 	let hasProgress = $derived(progress && isFinite(min) && isFinite(max));
 	let isFocused = $state(false);
 	let precision = $derived(step.toString().split('.')[1]?.length || 0);
 
+	/**
+	 * @param {string} v
+	 * @param {string} suffix
+	 */
 	function sanitize(v, suffix) {
 		return suffix && suffix !== '' ? Number(v.split(suffix)[0]) : Number(v);
 	}
 
+	/**
+	 *
+	 * @param {number} v
+	 * @param {boolean} isFocused
+	 * @param {string} suffix
+	 * @param {number} precision
+	 */
 	function composeValue(v, isFocused, suffix = '', precision) {
 		const clampedValue = clamp(
 			v,
@@ -45,32 +60,53 @@
 		composeValue(value, isFocused, suffix, precision),
 	);
 
-	function onFocus() {
+	/**
+	 * @param {FocusEvent} event
+	 */
+	function onFocus(event) {
 		isFocused = true;
+		onfocus?.(event);
 	}
 
-	function onBlur(event) {
-		isFocused = false;
+	/**
+	 * @param {KeyboardEvent} event
+	 */
+	async function onBlur(event) {
+		let currentTarget = event.currentTarget;
 
-		let newValue = event.currentTarget.value;
-		let isNotValid = isNaN(Number(event.currentTarget.value));
+		await tick();
 
-		if (isNotValid) {
-			newValue = `${value}`;
-		}
+		if (currentTarget instanceof HTMLInputElement) {
+			let newValue = currentTarget.value;
+			isFocused = false;
+			let sanitizedValue = sanitize(newValue, suffix);
+
+			if (isNaN(sanitizedValue)) {
+				onchange(value, true);
+			} else {
+				onchange(sanitizedValue, true);
+			}
 
-		onchange(sanitize(newValue, suffix));
+			onblur?.(event);
+		}
 	}
 
+	/**
+	 * @param {KeyboardEvent} event
+	 */
 	function onKeyDown(event) {
-		if ([38, 40].includes(event.keyCode)) {
+		if (
+			event.currentTarget instanceof HTMLInputElement &&
+			['ArrowDown', 'ArrowUp'].includes(event.key)
+		) {
 			event.preventDefault();
 
 			const diff = Keyboard.getStepFromEvent(event) * step;
-			const direction = event.keyCode === 38 ? 1 : -1;
-			const newValue = sanitize(composedValue, suffix) + direction * diff;
+			const direction = event.key === 'ArrowUp' ? 1 : -1;
+			const sanitizedValue =
+				sanitize(event.currentTarget.value, suffix) + direction * diff;
 
-			onchange(newValue);
+			onchange(sanitizedValue, false);
 		}
 	}
 </script>
@@ -93,6 +129,7 @@
 				{disabled}
 				{context}
 				{key}
+				bind:node
 				onkeydown={onKeyDown}
 				onfocus={onFocus}
 				onblur={onBlur}
@@ -108,6 +145,7 @@
 			onkeydown={onKeyDown}
 			onfocus={onFocus}
 			onblur={onBlur}
+			bind:node
 			value={composedValue}
 		/>
 	{/if}

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

@@ -0,0 +1,181 @@
+<script>
+	import * as color from '../../utils/color.utils.js';
+	import ButtonInput from './ButtonInput.svelte';
+	import ColorInput from './ColorInput.svelte';
+
+	let {
+		value,
+		context = null,
+		key = '',
+		disabled = false,
+		onchange,
+		editable = true,
+		extensible = true,
+	} = $props();
+
+	let selected = $state(-1);
+
+	let hexValues = $derived.by(() => {
+		return value.map((v) => {
+			const format = color.getColorFormat(v);
+			return color.toHex(v, format);
+		});
+	});
+
+	$effect(() => {
+		// handle value length changes when a color is selected
+		if (selected >= hexValues.length) {
+			selected = hexValues.length - 1;
+		}
+	});
+
+	/**
+	 *
+	 * @param {PointerEvent} event
+	 * @param {number} index
+	 */
+	function handleClick(event, index) {
+		if (selected !== index) {
+			selected = index;
+		} else {
+			selected = -1;
+			event.currentTarget.blur();
+		}
+	}
+
+	/**
+	 *
+	 * @param {string} color
+	 */
+	function handleColorChange(color) {
+		let palette = value.map((v) => v);
+		palette[selected] = color;
+
+		onchange(palette);
+	}
+
+	function handleClickAdd() {
+		let palette = value.map((v) => v);
+		palette.push('#ffffff');
+
+		onchange(palette);
+
+		selected = palette.length - 1;
+	}
+
+	function handleClickDelete() {
+		let index = selected;
+		let palette = value.map((v) => v);
+		palette.splice(index, 1);
+
+		onchange(palette);
+		selected = -1;
+	}
+</script>
+
+<div class="palette-input" class:disabled style="--count: {hexValues.length}">
+	<div class="palette-list">
+		{#if editable && extensible}
+			<div class="palette-action">
+				<ButtonInput label="+" onclick={handleClickAdd} />
+			</div>
+		{/if}
+		{#each hexValues as hexValue, index}
+			{#if editable}
+				<button
+					class="palette-action"
+					style="--current-color: {hexValue}"
+					class:selected={selected === index}
+					onclick={(event) => handleClick(event, index)}
+				>
+					<span class="visually-hidden">Change color {index}</span>
+				</button>
+			{:else}
+				<div
+					class="palette-action"
+					style="--current-color: {hexValue}"
+				></div>
+			{/if}
+		{/each}
+	</div>
+	{#if value[selected] && editable}
+		<div class="palette-editor">
+			<ColorInput value={value[selected]} onchange={handleColorChange} />
+		</div>
+		{#if extensible}
+			<div class="palette-delete">
+				<ButtonInput label="delete" onclick={handleClickDelete} />
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.palette-input {
+		position: relative;
+		width: 100%;
+
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--column-gap);
+	}
+
+	.palette-list {
+		display: flex;
+		flex-wrap: wrap;
+
+		column-gap: var(--column-gap);
+		row-gap: var(--column-gap);
+		align-items: center;
+	}
+
+	.palette-action {
+		position: relative;
+		aspect-ratio: 1;
+		height: var(--fragment-input-height);
+
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(
+			--background-color,
+			var(--fragment-input-background-color)
+		);
+		box-shadow: inset 0 0 0 1px
+			var(--box-shadow-color, var(--fragment-input-border-color));
+		outline: 0;
+	}
+
+	button.palette-action {
+		cursor: pointer;
+	}
+
+	.palette-input:focus-within .palette-action.selected {
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
+	}
+
+	.palette-action:before {
+		--gap: 1px;
+		content: '';
+
+		position: absolute;
+		z-index: 1;
+		top: var(--gap);
+		left: var(--gap);
+		right: var(--gap);
+		bottom: var(--gap);
+
+		background-color: var(--current-color);
+		border-radius: calc(var(--fragment-input-border-radius) - var(--gap));
+		opacity: var(--opacity, 1);
+		pointer-events: none;
+	}
+
+	:global(body:not(.fragment-dragging))
+		button.palette-action:not(.disabled):hover {
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
+	}
+
+	:global(body:not(.fragment-dragging))
+		button.palette-action:not(.disabled):focus-within {
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
+	}
+</style>

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

@@ -2,46 +2,74 @@
 	import Keyboard from '../../inputs/Keyboard.js';
 	import { map, clamp, roundToStep } from '../../utils/math.utils.js';
 
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} value
+	 * @property {number} min
+	 * @property {number} max
+	 * @property {number} step
+	 * @property {boolean} disabled
+	 * @property {(value: number) => void|undefined} onchange
+	 */
+
+	/** @type {Props} */
 	let { value, min, max, step, disabled = false, onchange } = $props();
 
+	/** @type {HTMLElement|undefined} */
 	let node;
+	/** @type {DOMRect|undefined} */
 	let rect;
 
 	let isDragging = $state(false);
 	let steppedValue = $derived(roundToStep(value, step));
 
-	// handlers
+	/**
+	 * @param {MouseEvent} event
+	 */
 	function handleMouseDown(event) {
 		if (disabled) return;
 
-		document.body.classList.add('fragment-dragging');
-		document.addEventListener('mousemove', handleMouseMove);
-		document.addEventListener('mouseup', handleMouseUp);
+		if (node) {
+			document.body.classList.add('fragment-dragging');
+			document.addEventListener('mousemove', handleMouseMove);
+			document.addEventListener('mouseup', handleMouseUp);
 
-		rect = node.getBoundingClientRect();
+			rect = node.getBoundingClientRect();
 
-		isDragging = true;
+			isDragging = true;
 
-		onDrag(event);
+			onDrag(event);
+		}
 	}
 
+	/**
+	 * @param {MouseEvent} event
+	 */
 	function handleMouseMove(event) {
 		onDrag(event);
 	}
 
+	/**
+	 * @param {MouseEvent} event
+	 */
 	function onDrag(event) {
-		let dragValue = clamp(
-			map(event.clientX, rect.left, rect.right, min, max),
-			min,
-			max,
-		);
-		dragValue = roundToStep(dragValue, step);
+		if (rect) {
+			let dragValue = clamp(
+				map(event.clientX, rect.left, rect.right, min, max),
+				min,
+				max,
+			);
+			dragValue = roundToStep(dragValue, step);
 
-		if (dragValue !== value) {
-			onchange(dragValue);
+			if (dragValue !== value) {
+				onchange?.(dragValue);
+			}
 		}
 	}
 
+	/**
+	 * @param {KeyboardEvent} event
+	 */
 	function handleKeyDown(event) {
 		const direction = ['ArrowUp', 'ArrowRight'].includes(event.key)
 			? 1
@@ -59,7 +87,7 @@
 			);
 
 			if (newValue !== value) {
-				onchange(newValue);
+				onchange?.(newValue);
 			}
 		}
 	}

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

@@ -0,0 +1,93 @@
+<script>
+	let {
+		value = $bindable(),
+		height,
+		disabled = false,
+		oninput,
+		onchange,
+		onkeydown,
+		onfocus,
+		onblur,
+	} = $props();
+
+	/**
+	 * @param {KeyboardEvent} event
+	 */
+	function onKeyPress(event) {
+		if (
+			event.currentTarget instanceof HTMLTextAreaElement &&
+			event.key === 'Enter' &&
+			!event.shiftKey
+		) {
+			event.currentTarget.blur();
+		}
+	}
+</script>
+
+<div
+	class="input-container"
+	class:disabled
+	style={height ? `--height: ${height}` : null}
+>
+	<textarea
+		class="input"
+		bind:value
+		{oninput}
+		{onchange}
+		{onkeydown}
+		{onfocus}
+		{onblur}
+		onkeypress={onKeyPress}
+		{disabled}
+		autocomplete="off"
+		spellcheck="false"
+	></textarea>
+</div>
+
+<style>
+	.input-container {
+		position: relative;
+
+		display: flex;
+		width: 100%;
+		height: var(--height, var(--fragment-input-height));
+		margin: 2px 0;
+
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
+	}
+
+	:global(body:not(.fragment-dragging))
+		.input-container:not(.disabled):hover {
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
+	}
+
+	:global(body:not(.fragment-dragging))
+		.input-container:not(.disabled):focus-within {
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
+	}
+
+	.input {
+		width: 100%;
+		height: 100%;
+		padding: var(--padding) var(--padding);
+
+		color: var(--fragment-input-text-color);
+		font-size: var(--fragment-input-font-size);
+		text-align: left;
+
+		background: transparent;
+		outline: 0;
+		resize: none;
+		border: none;
+	}
+
+	.input:disabled {
+		color: var(--fragment-input-disabled-text-color);
+	}
+
+	.input:focus {
+		color: var(--fragment-text-color);
+	}
+</style>