fragment-tools 0.2.2 → 0.2.4

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

@@ -1,4 +1,5 @@
 <script>
+	import { isObject } from '../../state/utils.svelte';
 	import SelectChevrons from '../SelectChevrons.svelte';
 
 	let {
@@ -10,55 +11,48 @@
 		onchange = () => {},
 	} = $props();
 
-	function toStringifiedValue(option, optionType = typeof option) {
-		if (option === null) {
-			return null;
-		} else if (option === undefined) {
-			return undefined;
-		} else if (optionType === 'object') {
-			return toStringifiedValue(option.value);
-		} else if (optionType === 'function') {
-			return option.name;
+	function toStringifiedValue(value) {
+		if (typeof value === 'function') {
+			return `${value.name}()`;
 		}
 
-		return option.toString();
+		return String(value);
 	}
 
-	let sanitizedOptions = $derived(
-		options.map((option) => {
-			let optionType = typeof option;
-			let disabled =
-				optionType === 'object' && typeof option.disabled === 'boolean'
-					? option.disabled
-					: false;
-			let value = optionType === 'object' ? option.value : option;
-
-			let stringValue = toStringifiedValue(option);
-
-			let label = option.label ?? stringValue;
-
-			return {
-				label,
-				value,
-				stringValue,
-				disabled,
-			};
-		}),
-	);
+	function createOption(option) {
+		let value =
+			isObject(option) && 'value' in option ? option.value : option;
+		let label = option?.label ?? toStringifiedValue(value);
+		let disabled = option?.disabled ?? false;
+		let stringValue = toStringifiedValue(value);
+
+		return {
+			label,
+			value,
+			stringValue,
+			disabled,
+		};
+	}
+
+	let sanitizedOptions = $derived.by(() => {
+		let opts = options.map((option, optionIndex) => {
+			return createOption(option, optionIndex);
+		});
+
+		return opts;
+	});
 
 	let sanitizedValue = $derived(
-		sanitizedOptions.find((opt) => opt.value === value),
+		sanitizedOptions.find((opt) => opt.value === value) ??
+			sanitizedOptions[0],
 	);
 
 	function handleChange(event) {
-		const index = sanitizedOptions.findIndex(
+		const sanitizedOption = sanitizedOptions.find(
 			(opt) => opt.stringValue === event.currentTarget.value,
 		);
 
-		const option = options[index];
-		const newValue = typeof option === 'object' ? option.value : option;
-
-		onchange(newValue);
+		onchange(sanitizedOption.value);
 	}
 </script>
 
@@ -84,9 +78,7 @@
 				>
 			{/each}
 		</select>
-		{#if sanitizedOptions.length > 1}
-			<SelectChevrons />
-		{/if}
+		<SelectChevrons />
 	</div>
 </div>
 
@@ -113,7 +105,9 @@
 		background-color: var(--color-background-input);
 	}
 
-	.select-input:not(.disabled) .container:hover {
+	:global(body:not(.fragment-dragging))
+		.select-input:not(.disabled)
+		.container:hover {
 		box-shadow: inset 0 0 0 1px 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

@@ -10,6 +10,7 @@ export const fieldTypes = {
 	COLOR: 'color',
 	BUTTON: 'button',
 	DOWNLOAD: 'download',
+	IMPORT: 'import',
 	IMAGE: 'image',
 	INTERVAL: 'interval',
 };
@@ -42,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'
 		) {
@@ -79,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);
 }

package/src/client/public/css/global.css

@@ -54,6 +54,20 @@ body {
 	overscroll-behavior: none;
 }
 
+body.fragment-dragging {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+body.fragment-dragging input {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+body.fragment-dragging * {
+	cursor: ew-resize !important;
+}
+
 #app {
 	position: fixed;
 	top: 0;

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

@@ -1,91 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-
-	import Monitor from '../modules/Monitor.svelte';
-	import Params from '../modules/Params.svelte';
-	import FloatingParams from './FloatingParams.svelte';
-	import Column from './LayoutColumn.svelte';
-	import Row from './LayoutRow.svelte';
-	import { sketchesManager } from '../state/sketches.svelte';
-	import { rendering } from '../state/rendering.svelte';
-
-	console.log(`Made with Fragment. https://fragment.tools`);
-
-	let sketchKey = $derived(sketchesManager.keys[0]);
-
-	let sketch = $derived(sketchesManager.sketches[sketchKey]);
-
-	let gui = $derived(sketch?.buildConfig?.gui);
-	let guiOutput = $derived(gui?.output);
-	let guiAlign = $derived(gui?.align ?? 'right');
-	let guiHidden = $derived(gui?.hidden);
-	let guiSize = $derived(gui?.size ?? 0.25);
-	let guiMinimize = $derived(gui?.minimize);
-	let guiPosition = $derived(gui?.position);
-	let styles = $derived(sketch?.buildConfig?.styles ?? '');
-
-	/** @type {HTMLHeadElement} */
-	let head;
-	/** @type {HTMLStyleElement} */
-	let style;
-
-	$effect(() => {
-		rendering.override(sketch?.buildConfig);
-	});
-
-	$effect(() => {
-		if (styles !== '') {
-			head = document.getElementsByTagName('head')[0];
-
-			if (style) {
-				head.removeChild(style);
-			}
-
-			style = document.createElement('style');
-			style.setAttribute('type', 'text/css');
-			style.appendChild(document.createTextNode(styles));
-			head.appendChild(style);
-		}
-	});
-
-	onDestroy(() => {
-		if (style && head) {
-			head.removeChild(style);
-		}
-	});
-</script>
-
-{#if sketch}
-	{#if guiPosition === 'fixed'}
-		<Row>
-			{#if guiAlign === 'left'}
-				<Column size={guiSize}>
-					<Params />
-				</Column>
-				<Column size={1 - guiSize}>
-					<Monitor params={{ selected: sketchKey }} />
-				</Column>
-			{:else}
-				<Column size={1 - guiSize}>
-					<Monitor params={{ selected: sketchKey }} />
-				</Column>
-				<Column size={guiSize}>
-					<Params />
-				</Column>
-			{/if}
-		</Row>
-	{:else}
-		<Row>
-			<Monitor headless {sketchKey} params={{ selected: sketchKey }} />
-			{#if gui}
-				<FloatingParams
-					output={guiOutput}
-					align={guiAlign}
-					size={guiSize}
-					hidden={guiHidden}
-					minimize={guiMinimize}
-				/>
-			{/if}
-		</Row>
-	{/if}
-{/if}