fragment-tools 0.1.13 → 0.1.15

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

@@ -1,123 +1,127 @@
 <script>
-import { createEventDispatcher } from "svelte";
-import FieldInputRow from "./FieldInputRow.svelte";
-import Input from "./Input.svelte";
-import ProgressInput from "./ProgressInput.svelte";
-import Keyboard from "../../inputs/Keyboard.js";
-import { clamp } from "../../utils/math.utils.js";
-
-function round(value, step) {
-    return Math.round(value * (1 / step)) / (1 / step);
-}
-
-export let value = null;
-export let label = "";
-export let step = 1;
-export let suffix = "";
-export let min = -Infinity;
-export let max = Infinity;
-export let disabled = false;
-export let context = null;
-export let key = "";
-
-$: isFocused = false;
-const dispatch = createEventDispatcher();
-
-function sanitize(v, suffix) {
-    return (suffix && suffix !== "") ? Number(v.split(suffix)[0]) : Number(v);
-}
-
-function composeValue(v, isFocused, suffix = "") {
-    const clampedValue = clamp(v, isFinite(min) ? min : -Infinity, isFinite(max) ? max : Infinity);
-    const roundedValue = typeof step === "number" ? round(clampedValue, step) : v;
-
-    return isFocused ? `${roundedValue}` : `${roundedValue}${suffix}`;
-}
-
-$: currentValue = value;
-$: composedValue = composeValue(currentValue, isFocused, suffix);
-
-function onFocus() {
-    isFocused = true;
-}
-
-function onBlur(event) {
-    isFocused = false;
-
-    let newValue = event.currentTarget.value;
-    let isNotValid = isNaN(Number(event.currentTarget.value));
-
-    if (isNotValid) {
-        newValue = `${value}`;
-    }
-
-    currentValue = sanitize(newValue, suffix);
-
-    dispatch('change', currentValue);
-}
-
-function onKeyDown(event) {
-    if ([38, 40].includes(event.keyCode)) {
-        event.preventDefault();
-
-        const diff = Keyboard.getStepFromEvent(event) * step;
-        const direction = event.keyCode === 38 ? 1 : -1;
-        const newValue = sanitize(composedValue, suffix) + direction * (diff);
-
-        currentValue = newValue;
-        dispatch('change', currentValue);
-    }
-}
-
-$: hasProgress = isFinite(min) && isFinite(max);
-
-function handleChangeProgress(event) {
-    currentValue = event.detail;
-    dispatch('change', event.detail);
-}
-
+	import { createEventDispatcher } from 'svelte';
+	import FieldInputRow from './FieldInputRow.svelte';
+	import Input from './Input.svelte';
+	import ProgressInput from './ProgressInput.svelte';
+	import Keyboard from '../../inputs/Keyboard.js';
+	import { clamp, roundToStep } from '../../utils/math.utils.js';
+
+	export let value = null;
+	export let label = '';
+	export let step = 1;
+	export let suffix = '';
+	export let min = -Infinity;
+	export let max = Infinity;
+	export let disabled = false;
+	export let context = null;
+	export let key = '';
+	export let progress = true;
+
+	$: hasProgress = progress && isFinite(min) && isFinite(max);
+	$: isFocused = false;
+	$: precision = step.toString().split('.')[1]?.length || 0;
+	const dispatch = createEventDispatcher();
+
+	function sanitize(v, suffix) {
+		return suffix && suffix !== '' ? Number(v.split(suffix)[0]) : Number(v);
+	}
+
+	function composeValue(v, isFocused, suffix = '', precision) {
+		const clampedValue = clamp(
+			v,
+			isFinite(min) ? min : -Infinity,
+			isFinite(max) ? max : Infinity,
+		);
+		const roundedValue =
+			typeof step === 'number' ? roundToStep(clampedValue, step) : v;
+
+		const fixedValue = roundedValue.toFixed(precision);
+
+		return isFocused ? `${fixedValue}` : `${fixedValue}${suffix}`;
+	}
+
+	$: currentValue = value;
+	$: composedValue = composeValue(currentValue, isFocused, suffix, precision);
+
+	function onFocus() {
+		isFocused = true;
+	}
+
+	function onBlur(event) {
+		isFocused = false;
+
+		let newValue = event.currentTarget.value;
+		let isNotValid = isNaN(Number(event.currentTarget.value));
+
+		if (isNotValid) {
+			newValue = `${value}`;
+		}
+
+		currentValue = sanitize(newValue, suffix);
+
+		dispatch('change', currentValue);
+	}
+
+	function onKeyDown(event) {
+		if ([38, 40].includes(event.keyCode)) {
+			event.preventDefault();
+
+			const diff = Keyboard.getStepFromEvent(event) * step;
+			const direction = event.keyCode === 38 ? 1 : -1;
+			const newValue = sanitize(composedValue, suffix) + direction * diff;
+
+			currentValue = newValue;
+			dispatch('change', currentValue);
+		}
+	}
+
+	function handleChangeProgress(event) {
+		currentValue = event.detail;
+		dispatch('change', event.detail);
+	}
 </script>
 
-<div class="number-input {hasProgress ? "number-input--with-progress": ""}">
-    {#if hasProgress}
-        <FieldInputRow --grid-template-columns="1fr 0.5fr">
-            <ProgressInput
-                step={step}
-                value={currentValue}
-                min={min}
-                max={max}
-                {context}
-                {key}
-                on:change={handleChangeProgress}
-            />
-            <Input 
-                {label}
-                {disabled}
-                {context}
-                {key}
-                on:keydown={onKeyDown}
-                on:focus={onFocus}
-                on:blur={onBlur}
-                bind:value={composedValue}
-            />
-        </FieldInputRow>
-    {:else}
-        <Input 
-            {label}
-            {disabled}
-            {context}
-            {key}
-            on:keydown={onKeyDown}
-            on:focus={onFocus}
-            on:blur={onBlur}
-            bind:value={composedValue}
-        />
-    {/if}
+<div class="number-input {hasProgress ? 'number-input--with-progress' : ''}">
+	{#if hasProgress}
+		<FieldInputRow --grid-template-columns="1fr 0.5fr">
+			<ProgressInput
+				{step}
+				value={currentValue}
+				{min}
+				{max}
+				{context}
+				{disabled}
+				{key}
+				on:change={handleChangeProgress}
+			/>
+			<Input
+				{label}
+				{disabled}
+				{context}
+				{key}
+				on:keydown={onKeyDown}
+				on:focus={onFocus}
+				on:blur={onBlur}
+				bind:value={composedValue}
+			/>
+		</FieldInputRow>
+	{:else}
+		<Input
+			{label}
+			{disabled}
+			{context}
+			{key}
+			on:keydown={onKeyDown}
+			on:focus={onFocus}
+			on:blur={onBlur}
+			bind:value={composedValue}
+		/>
+	{/if}
 </div>
 
 <style>
-.number-input {
-    position: relative;
-    width: 100%;
-}
+	.number-input {
+		position: relative;
+		width: 100%;
+	}
 </style>

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

@@ -1,94 +1,120 @@
 <script>
-import { createEventDispatcher } from "svelte";
-import { map, clamp } from "../../utils/math.utils.js";
+	import { createEventDispatcher } from 'svelte';
+	import { map, clamp, roundToStep } from '../../utils/math.utils.js';
 
-export let value;
-export let min;
-export let max;
-export let step;
-export let context = null;
-export let key = "";
+	export let value;
+	export let min;
+	export let max;
+	export let step;
+	export let context = null;
+	export let key = '';
+	export let disabled = false;
 
-let node;
-let rect;
+	let node;
+	let rect;
 
-const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-let isDragging = false;
+	let isDragging = false;
 
-// handlers
-function handleMouseDown(event) {
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
+	// handlers
+	function handleMouseDown(event) {
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
 
-    rect = node.getBoundingClientRect();
+		rect = node.getBoundingClientRect();
 
-    isDragging = true;
+		isDragging = true;
 
-    onDrag(event);
-}
+		onDrag(event);
+	}
 
-function handleMouseMove(event) {
-    onDrag(event);
-}
+	function handleMouseMove(event) {
+		onDrag(event);
+	}
 
-function onDrag(event) {
-    let v = clamp(map(event.clientX, rect.left, rect.right, min, max), min, max);
-    v = Math.floor(v * (1 / step)) / (1 / step);
+	function onDrag(event) {
+		let dragValue = clamp(
+			map(event.clientX, rect.left, rect.right, min, max),
+			min,
+			max,
+		);
+		dragValue = roundToStep(dragValue, step);
 
-    if (v !== value) {
-        dispatch("change", v);
-    }
-}
+		if (dragValue !== value) {
+			dispatch('change', dragValue);
+		}
+	}
 
-function handleMouseUp() {
-    document.removeEventListener('mousemove', handleMouseMove);
-    document.removeEventListener('mouseup', handleMouseUp);
+	function handleMouseUp() {
+		document.removeEventListener('mousemove', handleMouseMove);
+		document.removeEventListener('mouseup', handleMouseUp);
 
-    isDragging = false;
-}
-
-$: scaleX = clamp(map(value, min, max, 0, 1), 0, 1);
+		isDragging = false;
+	}
 
+	$: progress = clamp(map(value, min, max, 0, 1), 0.0001, 1);
+	$: opacity = progress > 0 ? 1 : 0;
 </script>
 
-<div class="progress {isDragging ? "dragging": ""} " bind:this={node} on:mousedown={handleMouseDown}>
-    <div class="fill" style="opacity: {scaleX > 0 ? 1 : 0}; transform: scaleX({scaleX})"></div>
+<div
+	class="progress {isDragging ? 'dragging' : ''} "
+	bind:this={node}
+	on:mousedown={handleMouseDown}
+	class:disabled
+>
+	<div class="fill" style="--progress: {progress}; --opacity: {opacity};" />
 </div>
 
 <style>
-.progress {
-    position: relative;
-    
-    height: var(--height-input);
-    border-radius: var(--border-radius-input);
-    box-shadow: inset 0 0 0 1px var(--color-border-input);
-
-    background: var(--color-background-input);
-    cursor: ew-resize;
-}
-
-.progress:hover {
-    box-shadow: inset 0 0 0 1px var(--color-active);
-}
-
-.progress.dragging {
-    box-shadow: 0 0 0 2px var(--color-active);
-}
-
-
-.fill {
-    position: absolute;
-    left: 3px;
-    top: 3px;
-    bottom: 3px;
-    right: 3px;
-
-    background: grey;
-    transform-origin: 0 50%;
-    border-radius: calc(var(--border-radius-input) * 0.5);
-
-    background-color: var(--color-active);
-}
-
+	.progress {
+		position: relative;
+
+		height: var(--height-input);
+		border-radius: var(--border-radius-input);
+		box-shadow: inset 0 0 0 1px var(--color-border-input);
+
+		background: var(--color-background-input);
+		cursor: ew-resize;
+		container-type: size;
+	}
+
+	.progress:hover {
+		box-shadow: inset 0 0 0 1px var(--color-active);
+	}
+
+	.progress.dragging {
+		box-shadow: 0 0 0 2px var(--color-active);
+	}
+
+	.fill {
+		--padding-h: 3px;
+		--width: 6px;
+		--tx-min: var(--padding-h);
+		--tx-max: calc(100cqw - var(--padding-h) * 1 - var(--width));
+
+		--tx: calc(
+			var(--progress, 0) * (var(--tx-max) - var(--tx-min)) / (1) +
+				var(--tx-min)
+		);
+		position: absolute;
+		left: 0px;
+		top: 3px;
+		bottom: 3px;
+		/* right: 3px; */
+
+		width: var(--width);
+
+		background: grey;
+		transform-origin: 0 50%;
+		border-radius: calc(var(--border-radius-input) * 0.5);
+
+		background-color: var(--color-active);
+
+		transform: translate3d(var(--tx), 0px, 0px);
+	}
+
+	.progress.disabled .fill {
+		background-color: var(--color-active-disabled);
+	}
 </style>