fragment-tools 0.2.3 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {

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

@@ -125,7 +125,6 @@ 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/modules/MidiPanel.svelte

@@ -6,17 +6,19 @@
 
 	let { mID, headless = false, ...restProps } = $props();
 
-	let input = $state(null);
-	let output = $state(null);
-	let inputs = $state([]);
-	let outputs = $state([]);
+	let input = $state(undefined);
+	let output = $state(undefined);
+	let inputs = $state(MIDI.inputs);
+	let outputs = $state(MIDI.outputs);
+	let inputOptions = $derived.by(() => createDeviceOptions(inputs));
+	let outputOptions = $derived.by(() => createDeviceOptions(outputs));
 	let messages = $state([]);
 
 	function createDeviceOptions(deviceMap = new Map()) {
 		let options = [];
 
 		if (deviceMap.size !== 0) {
-			options.push({ value: 'none', label: 'No device selected.' });
+			options.push({ value: undefined, label: 'No device selected.' });
 		}
 
 		for (let entry of deviceMap) {
@@ -30,7 +32,7 @@
 		}
 
 		if (options.length === 0) {
-			options = [{ value: 'none', label: 'No device detected.' }];
+			options.push({ value: undefined, label: 'No device detected.' });
 		}
 
 		return options;
@@ -45,15 +47,23 @@
 		await MIDI.request();
 
 		function refresh() {
-			inputs = createDeviceOptions(MIDI.inputs);
-			outputs = createDeviceOptions(MIDI.outputs);
+			inputs = MIDI.inputs;
+			outputs = MIDI.outputs;
 
 			// if a single device is connected, select it by default
-			input = inputs.length === 2 ? inputs[1].value : inputs[0].value;
-			output = outputs.length === 2 ? outputs[1].value : outputs[0].value;
+			input =
+				inputs.size === 1
+					? MIDI.inputs.values().next().value.id
+					: undefined;
+			output =
+				outputs.size === 1
+					? MIDI.outputs.values().next().value.id
+					: undefined;
 		}
 
-		MIDI.addEventListener('connected', refresh);
+		MIDI.addEventListener('connected', () => {
+			refresh();
+		});
 		MIDI.addEventListener('disconnected', () => {
 			refresh();
 		});
@@ -83,7 +93,7 @@
 		value={input}
 		onchange={(value) => (input = value)}
 		params={{
-			options: inputs,
+			options: inputOptions,
 		}}
 	/>
 	<Field
@@ -91,7 +101,7 @@
 		value={output}
 		onchange={(value) => (output = value)}
 		params={{
-			options: outputs,
+			options: outputOptions,
 		}}
 	/>
 	<Field key="messages" value={messages} type="list" disabled />

package/src/client/app/modules/Params.svelte

@@ -7,6 +7,7 @@
 	import { layout } from '../state/layout.svelte';
 	import FieldGroup from '../ui/FieldGroup.svelte';
 	import { sketchesManager } from '../state/sketches.svelte';
+	import { parseFolder } from '../utils/fields.utils';
 
 	let {
 		id = layout.getID(),
@@ -52,16 +53,25 @@
 
 			if (!sketchPropGroup || group === sketchPropGroup) {
 				if (folder) {
+					const parsed = parseFolder(folder);
+					const current = parsed.find((m) => m.isCurrent);
+
 					const fieldgroup = sketch?.propsFolders.find(
-						(f) => f.id === folder,
+						(f) => f.id === current.id,
 					);
 
 					if (fieldgroup) {
-						const { depth, root } = fieldgroup;
+						const { depth, rootId } = fieldgroup;
+						const root =
+							rootId &&
+							sketch?.propsFolders.find((f) => f.id === rootId);
 
 						if (depth === 0 && !tree.includes(fieldgroup)) {
 							tree.push(fieldgroup);
-						} else if (root && !tree.includes(root)) {
+						} else if (
+							root &&
+							!tree.some((fieldgroup) => fieldgroup.id === rootId)
+						) {
 							tree.push(root);
 						}
 					} else {
@@ -164,19 +174,21 @@
 						sketchProps[item.key],
 					)}
 				{:else if item.type === 'fieldgroup'}
-					<FieldGroup
-						name={item.displayName}
-						collapsed={item.collapsed}
-						onchange={(collapsed) => {
-							sketch.updateFolder(item, collapsed);
-						}}
-					>
-						{#if item.children.length > 0}
-							{#each item.children as child, childIndex}
-								{@render sketchPropItem(childIndex, child)}
-							{/each}
-						{/if}
-					</FieldGroup>
+					{#if !item.hidden}
+						<FieldGroup
+							name={item.displayName}
+							collapsed={item.collapsed}
+							onchange={(collapsed) => {
+								sketch.updateFolder(item, collapsed);
+							}}
+						>
+							{#if item.children.length > 0}
+								{#each item.children as child, childIndex}
+									{@render sketchPropItem(childIndex, child)}
+								{/each}
+							{/if}
+						</FieldGroup>
+					{/if}
 				{/if}
 			{/snippet}
 			{#each sketchPropsTree as sketchPropsTreeItem, index}

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

@@ -1,6 +1,8 @@
+import { parseFolder } from '../utils/fields.utils';
 import { rendering } from './rendering.svelte';
 import {
 	deepAssign,
+	deepClone,
 	deepEqual,
 	hydrate,
 	isFunction,
@@ -46,7 +48,10 @@ class Sketch {
 
 	reset() {
 		Object.keys(this.props).forEach((key) => {
-			this.updateProp(key, this.props[key].__initialValue);
+			this.updateProp(
+				key,
+				$state.snapshot(this.props[key].__initialValue),
+			);
 		});
 
 		this.propsFolders.forEach((fieldgroup) => {
@@ -89,12 +94,16 @@ class Sketch {
 						) {
 							deepAssign(newProp.value, prevProp.value);
 							deepAssign(instanceProp.value, prevProp.value);
-							newProp.__currentValue = newProp.value;
+							newProp.__currentValue = deepClone(
+								$state.snapshot(newProp.value),
+							);
 						} else if (
 							newProp.__initialValue === prevProp.__initialValue
 						) {
 							newProp.value = prevProp.value;
-							newProp.__currentValue = newProp.value;
+							newProp.__currentValue = deepClone(
+								$state.snapshot(newProp.value),
+							);
 							instanceProp.value = prevProp.value;
 						}
 
@@ -164,18 +173,6 @@ class Sketch {
 		propsFoldersCollection,
 		propsGroupsCollection,
 	) {
-		const duplicateInitialValue = (value) => {
-			if (isFunction(value)) {
-				return value;
-			}
-
-			if (isObject(value)) {
-				return structuredClone(value);
-			}
-
-			return value;
-		};
-
 		let {
 			value,
 			params = {},
@@ -203,7 +200,7 @@ class Sketch {
 				? instanceProp.hidden
 				: () => instanceProp.hidden;
 
-		let initialValue = duplicateInitialValue(value);
+		let initialValue = deepClone(value);
 
 		if (group && !propsGroupsCollection.includes(group)) {
 			propsGroupsCollection.push(group);
@@ -216,7 +213,7 @@ class Sketch {
 		let prop = {
 			value,
 			__initialValue: initialValue,
-			__currentValue: value,
+			__currentValue: deepClone(value),
 			__hidden,
 			type,
 			params: structuredClone(params),
@@ -237,12 +234,16 @@ class Sketch {
 
 		if (prop) {
 			prop.value = newValue;
-			prop.__currentValue = newValue;
+			prop.__currentValue = deepClone(newValue);
 		}
 
 		if (instanceProp) {
 			if (!deepEqual(instanceProp.value, newValue)) {
-				instanceProp.value = newValue;
+				if (isObject(instanceProp.value) && isObject(newValue)) {
+					deepAssign(instanceProp.value, newValue);
+				} else {
+					instanceProp.value = newValue;
+				}
 			}
 
 			instanceProp.onChange?.(instanceProp, {
@@ -264,21 +265,24 @@ class Sketch {
 		if (!folder) return undefined;
 
 		let propFolder;
-		let names = folder.split('.');
 
-		if (names.length > 0) {
-			let root;
-			let collapsedRegex = /^(.*?)(?:\[collapsed=(true|false)\])?$/;
+		const parsed = parseFolder(folder);
 
-			for (let i = 0; i < names.length; i++) {
-				let name = names[i];
-				let match = name.match(collapsedRegex);
-				let displayName = match[1];
-				let collapsed = match[2] ? match[2] === 'true' : false;
+		if (parsed.length > 0) {
+			for (let i = 0; i < parsed.length; i++) {
+				let match = parsed[i];
+				let {
+					depth,
+					id,
+					parentId,
+					rootId,
+					isCurrent,
+					name,
+					attributes = {},
+				} = match;
+				let { collapsed = false } = attributes;
+				let displayName = name;
 
-				let depth = i;
-				let id = [...names].slice(0, i + 1).join('.');
-				let parentId = [...names].slice(0, i).join('.');
 				let parent =
 					depth > 0
 						? collection.find((f) => f.id === parentId)
@@ -296,7 +300,8 @@ class Sketch {
 						children: [],
 						parent,
 						depth,
-						root,
+						rootId,
+						hidden: false,
 					};
 
 					if (parent) {
@@ -306,11 +311,7 @@ class Sketch {
 					collection.push(fieldgroup);
 				}
 
-				if (i === 0) {
-					root = fieldgroup;
-				}
-
-				if (i === names.length - 1) {
+				if (isCurrent) {
 					fieldgroup.children.push({
 						type: 'field',
 						key,
@@ -326,7 +327,7 @@ class Sketch {
 
 	updateFolder(folder, collapsed) {
 		this.propsFolders.forEach((f, index) => {
-			if (f === folder) {
+			if (f.id === folder.id) {
 				this.propsFolders[index].collapsed = collapsed;
 			}
 		});
@@ -366,6 +367,9 @@ class Sketch {
 					!deepEqual(instanceProp.value, prop.__currentValue)
 				) {
 					this.updateProp(key, instanceProp.value);
+					prop.__initialValue = deepClone(
+						$state.snapshot(prop.value),
+					);
 				}
 
 				// sync displayName
@@ -462,6 +466,29 @@ class Sketch {
 				delete this.props[key];
 			}
 		});
+
+		const fieldgroups = [...this.propsFolders].sort(
+			(a, b) => b.depth - a.depth,
+		);
+
+		fieldgroups.forEach((fieldgroup) => {
+			const hasAllFieldsHidden = fieldgroup.children
+				.filter((child) => child.type === 'field')
+				.every((child) => this.props[child.key].__hidden());
+			const hasAllFieldgroupsHidden = fieldgroup.children
+				.filter((child) => child.type === 'fieldgroup')
+				.every((child) => child.hidden);
+
+			if (hasAllFieldsHidden && hasAllFieldgroupsHidden) {
+				if (!fieldgroup.hidden) {
+					fieldgroup.hidden = true;
+				}
+			} else {
+				if (fieldgroup.hidden) {
+					fieldgroup.hidden = false;
+				}
+			}
+		});
 	}
 
 	onBeforeCapture(fn) {

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

@@ -320,12 +320,27 @@ export class Render {
 		this.time = 0;
 		this.recording = false;
 
-		$effect(() => {
+		let resizeTimeout;
+
+		$effect.pre(() => {
 			const { width, height, pixelRatio } = rendering;
 
 			if (this.loaded) {
-				this.resize(width, height, pixelRatio);
-			} else {
+				if (resizeTimeout) clearTimeout(resizeTimeout);
+
+				resizeTimeout = setTimeout(() => {
+					clearTimeout(resizeTimeout);
+					resizeTimeout = null;
+
+					this.resize(width, height, pixelRatio);
+				}, 0);
+			}
+		});
+
+		$effect(() => {
+			const { width, height, pixelRatio } = rendering;
+
+			if (!this.loaded) {
 				this.width = width;
 				this.height = height;
 				this.pixelRatio = pixelRatio;

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

@@ -74,3 +74,16 @@ export function deepEqual(target, source) {
 
 	return target === source;
 }
+
+export function deepClone(value) {
+	if (isFunction(value)) {
+		return value;
+	}
+
+	if (isObject(value)) {
+		const clone = structuredClone(value);
+		return clone;
+	}
+
+	return value;
+}

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

@@ -9,7 +9,7 @@
 	import ButtonInput from './fields/ButtonInput.svelte';
 	import ImageInput from './fields/ImageInput.svelte';
 	import IntervalInput from './fields/IntervalInput.svelte';
-	import { fieldTypes, hasChanged } from '../utils/fields.utils.js';
+	import { fieldTypes } from '../utils/fields.utils.js';
 
 	const fields = {
 		[`${fieldTypes.SELECT}`]: Select,
@@ -37,6 +37,7 @@
 	import IconTriggers from '../components/IconTriggers.svelte';
 	import IconLocked from '../components/IconLocked.svelte';
 	import ImportInput from './fields/ImportInput.svelte';
+	import { deepEqual } from '../state/utils.svelte';
 
 	let {
 		key,
@@ -91,7 +92,7 @@
 	let fieldType = $derived(inferFieldType({ type, value, params, key }));
 	let fieldProps = $derived(composeFieldProps(params, disabled));
 	let onTrigger = $derived(frameDebounce(onTriggers[fieldType]));
-	let input = $derived(fields[fieldType]);
+	let Component = $derived(fields[fieldType]);
 	let triggerable = $derived(
 		params.triggerable !== false &&
 			((fieldType === fieldTypes.NUMBER &&
@@ -117,12 +118,17 @@
 			context,
 		};
 	}
+
+	function hasChanged(current, next) {
+		const changed = !deepEqual(current, next);
+		return changed;
+	}
 </script>
 
 <div
 	class="field"
 	class:disabled
-	class:changed={!disabled && hasChanged(initialValue, value)}
+	class:changed={!disabled && hasChanged(value, initialValue)}
 	style="--index: {index};"
 >
 	<FieldSection
@@ -153,13 +159,7 @@
 				{/if}
 			</div>
 		{/snippet}
-		<svelte:component
-			this={input}
-			{value}
-			{...fieldProps}
-			{onchange}
-			onclick={onTrigger}
-		/>
+		<Component {value} {...fieldProps} {onchange} onclick={onTrigger} />
 		{@render children?.()}
 	</FieldSection>
 	{#if triggerable}

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

@@ -1,22 +1,14 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
+	import Keyboard from '../../inputs/Keyboard.js';
 	import { map, clamp, roundToStep } from '../../utils/math.utils.js';
 
-	let {
-		value,
-		min,
-		max,
-		step,
-		context = null,
-		key = '',
-		disabled = false,
-		onchange,
-	} = $props();
+	let { value, min, max, step, disabled = false, onchange } = $props();
 
 	let node;
 	let rect;
 
 	let isDragging = $state(false);
+	let steppedValue = $derived(roundToStep(value, step));
 
 	// handlers
 	function handleMouseDown(event) {
@@ -48,6 +40,28 @@
 		}
 	}
 
+	function handleKeyDown(event) {
+		const direction = ['ArrowUp', 'ArrowRight'].includes(event.key)
+			? 1
+			: ['ArrowDown', 'ArrowLeft'].includes(event.key)
+				? -1
+				: 0;
+
+		const diff = Keyboard.getStepFromEvent(event) * step;
+
+		if (direction !== 0) {
+			const newValue = clamp(
+				roundToStep(value + direction * diff, step),
+				min,
+				max,
+			);
+
+			if (newValue !== value) {
+				onchange(newValue);
+			}
+		}
+	}
+
 	function handleMouseUp() {
 		document.body.classList.remove('fragment-dragging');
 		document.removeEventListener('mousemove', handleMouseMove);
@@ -56,7 +70,9 @@
 		isDragging = false;
 	}
 
-	let progress = $derived(clamp(map(value, min, max, 0, 1), 0.0001, 1));
+	let progress = $derived(
+		clamp(map(steppedValue, min, max, 0, 1), 0.0001, 1),
+	);
 	let opacity = $derived(progress > 0 ? 1 : 0);
 </script>
 
@@ -64,10 +80,19 @@
 	class="progress"
 	bind:this={node}
 	onmousedown={handleMouseDown}
+	onkeydown={handleKeyDown}
 	class:disabled
 	class:dragging={isDragging}
+	role="slider"
+	aria-valuemin={min}
+	aria-valuemax={max}
+	aria-valuenow={value}
+	tabindex="0"
 >
-	<div class="fill" style="--progress: {progress}; --opacity: {opacity};" />
+	<div
+		class="fill"
+		style="--progress: {progress}; --opacity: {opacity};"
+	></div>
 </div>
 
 <style>
@@ -81,13 +106,15 @@
 		background: var(--color-background-input);
 		cursor: ew-resize;
 		container-type: size;
+		outline: 0;
 	}
 
 	:global(body:not(.fragment-dragging)) .progress:hover {
 		box-shadow: inset 0 0 0 1px var(--color-active);
 	}
 
-	.progress.dragging {
+	.progress.dragging,
+	:global(body:not(.fragment-dragging)) .progress:focus-visible {
 		box-shadow: 0 0 0 2px var(--color-active);
 	}
 

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

@@ -8,27 +8,71 @@
 		min = -Infinity,
 		max = Infinity,
 		step = 0.1,
+		key,
 		locked = false,
 		disabled = false,
 		context = null,
-		key = '',
 		onchange,
 	} = $props();
 
+	const keysChecks = ['x', 'y', 'z', 'w'];
 
 	let isArray = $derived(Array.isArray(value));
 	let isObject = $derived(!isArray && typeof value === 'object');
-	let components = $derived(isObject ? Object.values(value) : [...value]);
-	let keys = $derived(isObject ? Object.keys(value) : value.map((v, i) => i));
+	let keys = $derived.by(() => {
+		let keys = [];
+
+		if (isArray) {
+			return value.map((_, index) => index);
+		}
+
+		if (!isArray && !isObject) return [0];
+
+		for (let i = 0; i < keysChecks; i++) {
+			let keyCheck = keysChecks[i];
+
+			if (keyCheck in value) {
+				keys.push(keyCheck);
+			}
+		}
+
+		if (value.isVector2) {
+			return ['x', 'y'];
+		}
+
+		if (value.isVector3) {
+			return ['x', 'y', 'z'];
+		}
+
+		if (value.isVector4 || value.isQuaternion) {
+			return ['x', 'y', 'z', 'w'];
+		}
+
+		if (isObject) {
+			return Object.keys(value);
+		}
+
+		return keys;
+	});
+	let components = $derived.by(() => {
+		if (!isObject && !isArray) {
+			return [value];
+		}
+
+		return keys.map((key) => value[key]);
+	});
+	let mins = $derived(keys.map((key) => min[key]));
+	let maxs = $derived(keys.map((key) => max[key]));
+	let steps = $derived(keys.map((key) => step[key]));
 
 	function dispatchChange() {
-		let newValue = keys.reduce((all, key, index) => {
-			all[key] = components[index];
+		let clone = isArray ? [] : {};
 
-			return all;
-		}, isArray ? [] : {});
+		keys.forEach((key, index) => {
+			clone[key] = components[index];
+		});
 
-		onchange(newValue);
+		onchange(clone);
 	}
 
 	function handleComponentChange(newValue, componentIndex) {
@@ -39,11 +83,13 @@
 		}
 
 		components.forEach((component, index) => {
-			components[index] = index === componentIndex
-				? newValue
-				: locked
-					? Math.round(component * ratio * (1 / step)) / (1 / step)
-					: component;
+			components[index] =
+				index === componentIndex
+					? newValue
+					: locked
+						? Math.round(component * ratio * (1 / step)) /
+							(1 / step)
+						: component;
 		});
 
 		dispatchChange();
@@ -56,17 +102,16 @@
 	>
 		{#each components as component, index}
 			<NumberInput
-				{min}
-				{max}
-				{step}
+				min={mins[index]}
+				max={maxs[index]}
+				step={steps[index]}
 				{suffix}
 				{disabled}
 				{context}
 				{key}
 				label={keys[index]}
 				value={component}
-				onchange={(value) =>
-					handleComponentChange(value, index)}
+				onchange={(value) => handleComponentChange(value, index)}
 			/>
 		{/each}
 	</FieldInputRow>

package/src/client/app/utils/fields.utils.js

@@ -43,11 +43,40 @@ export function inferFieldType({ type, value, params, key }) {
 
 		const isArray = Array.isArray(value);
 		const isObject = !isArray && typeof value === 'object';
-		const values = isObject ? Object.values(value) : value;
+		const getKeys = (value) => {
+			if (isArray) {
+				return value.map((_, index) => index);
+			}
+
+			if (!isArray && !isObject) return [0];
+
+			if (value.isVector3) {
+				return ['x', 'y', 'z'];
+			}
+
+			if (value.isVector4 || value.isQuaternion) {
+				return ['x', 'y', 'z', 'w'];
+			}
+
+			if (isObject) {
+				return Object.keys(value);
+			}
+		};
+
+		const getValues = (value, keys) => {
+			if (!isObject && !isArray) {
+				value = [value];
+			}
+
+			return keys.map((key) => value[key]);
+		};
+
+		const keys = getKeys(value);
+		const values = getValues(value, keys);
 
 		if (
 			isArray &&
-			value.length === 2 &&
+			values.length === 2 &&
 			typeof params.min === 'number' &&
 			typeof params.max === 'number'
 		) {
@@ -80,53 +109,45 @@ export function inferFieldType({ type, value, params, key }) {
 	console.warn(`Field: cannot find field type for ${key}`);
 }
 
-export function hasChanged(initialValue, currentValue) {
-	const initialType = initialValue && typeof initialValue;
-	const currentType = currentValue && typeof currentValue;
-
-	if (initialType !== currentType) return true;
-
-	if (Array.isArray(currentValue)) {
-		if (initialValue.length !== currentValue.length) {
-			return true;
+/**
+ *
+ * @param {string} folder
+ */
+export function parseFolder(folder) {
+	const regex = /(?<name>\w+)(?:\[(?<attributes>[^\]]+)\])?/g;
+	const matches = [...folder.matchAll(regex)];
+
+	const results = matches.map((match) => {
+		return {
+			name: match.groups.name,
+			attributes: match.groups.attributes
+				? Object.fromEntries(
+						match.groups.attributes
+							.split(', ')
+							.map((attr) => attr.split('=')),
+					)
+				: {},
+		};
+	});
+
+	let names = results.map((match) => match.name);
+
+	let rootId;
+
+	results.forEach((match, index) => {
+		let id = [...names].slice(0, index + 1).join('.');
+		let parentId = [...names].slice(0, index).join('.');
+
+		if (index === 0) {
+			rootId = id;
 		}
 
-		for (let i = 0; i < currentValue.length; i++) {
-			if (currentValue[i] !== initialValue[i]) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	if (initialType === 'object') {
-		const keys1 = Object.keys(initialValue);
-		const keys2 = Object.keys(currentValue);
-
-		if (
-			keys1.length !== keys2.length ||
-			!keys1.every((key) => keys2.includes(key))
-		) {
-			return true;
-		}
-
-		for (const key of keys1) {
-			const value1 = initialValue[key];
-			const value2 = currentValue[key];
-
-			if (typeof value1 === 'object' && typeof value2 === 'object') {
-				// If both values are objects, recursively compare them
-				if (hasChanged(value1, value2)) {
-					return true;
-				}
-			} else if (value1 !== value2) {
-				// If values are not objects, directly compare them
-				return true;
-			}
-
-			return false;
-		}
-	}
+		match.id = id;
+		match.parentId = parentId;
+		match.depth = index;
+		match.isCurrent = index === results.length - 1;
+		match.rootId = rootId;
+	});
 
-	return initialValue !== currentValue;
+	return results;
 }

package/src/client/app/utils/math.utils.js

@@ -22,6 +22,12 @@ export function clamp(value, min, max) {
 	return Math.max(min, Math.min(value, max));
 }
 
+/**
+ *
+ * @param {number} value
+ * @param {number} step
+ * @returns {number}
+ */
 export function roundToStep(value, step) {
 	return Math.round(value * (1 / step)) / (1 / step);
 }