fragment-tools 0.2.8 → 0.2.10

package/src/client/app/renderers/THREERenderer.js

@@ -3,8 +3,34 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../state/errors.svelte';
 
+/**
+ * @typedef {object} MountParamsThreeRenderer
+ * @property {HTMLCanvasElement} canvas
+ * @property {THREE.Scene} scene
+ * @property {THREE.WebGLRenderer} renderer
+ */
+
+/**
+ * @typedef {object} PreviewThreeRenderer
+ * @property {number} id
+ * @property {THREE.Scene} scene
+ * @property {THREE.renderer} renderer
+ * @property {rendered} boolean
+ */
+
+/** @type {PreviewThreeRenderer[]} */
 let previews = [];
 
+/**
+ * @param {object} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLDivElement} params.container
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @returns {MountParamsThreeRenderer}
+ */
 export let onMountPreview = ({ id, canvas }) => {
 	let renderer = new WebGLRenderer({ antialias: true, canvas });
 
@@ -32,18 +58,12 @@ export let onMountPreview = ({ id, canvas }) => {
 	};
 };
 
-export let onDestroyPreview = ({ id }) => {
-	const previewIndex = previews.findIndex((p) => p.id === id);
-	const preview = previews[previewIndex];
-
-	if (preview) {
-		const { renderer } = preview;
-		clearError(renderer.getContext().__uuid);
-		renderer.dispose();
-		previews.splice(previewIndex, 1);
-	}
-};
-
+/**
+ * @param {MountParamsThreeRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLDivElement} params.container
+ */
 export let onBeforeUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -52,6 +72,12 @@ export let onBeforeUpdatePreview = ({ id }) => {
 	}
 };
 
+/**
+ * @param {MountParamsThreeRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLDivElement} params.container
+ */
 export let onAfterUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -67,6 +93,14 @@ export let onAfterUpdatePreview = ({ id }) => {
 	}
 };
 
+/**
+ * @param {MountParamsThreeRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -77,6 +111,24 @@ export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 	}
 };
 
+/**
+ * @param {MountParamsThreeRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLElement} params.container
+ */
+export let onDestroyPreview = ({ id }) => {
+	const previewIndex = previews.findIndex((p) => p.id === id);
+	const preview = previews[previewIndex];
+
+	if (preview) {
+		const { renderer } = preview;
+		clearError(renderer.getContext().__uuid);
+		renderer.dispose();
+		previews.splice(previewIndex, 1);
+	}
+};
+
 /* HOT SHADER RELOADING */
 let _shaderUpdates = [];
 

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

@@ -6,13 +6,47 @@ export const IMAGE_ENCODINGS = ['png', 'jpeg', 'webp'];
 export const VIDEO_FORMATS = {
 	FRAMES: 'frames',
 	MP4: 'mp4',
-	GIF: 'gif',
 	WEBM: 'webm',
+	GIF: 'gif',
+	MKV: 'mkv',
+	MOV: 'mov',
+};
+
+export const VIDEO_CODECS = {
+	AVC: 'avc',
+	HEVC: 'hevc',
+	VP8: 'vp8',
+	VP9: 'vp9',
+	AV1: 'av1',
 };
 
+export const VIDEO_CODECS_FORMATS = new Map();
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.AVC, ['mp4', 'mkv', 'mov']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.HEVC, ['mp4', 'mkv', 'mov']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.VP8, ['webm', 'mkv']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.VP9, ['webm', 'mkv']);
+VIDEO_CODECS_FORMATS.set(VIDEO_CODECS.AV1, ['webm', 'mkv']);
+
+/**
+ * List valid codecs based on format
+ * @param {string} format
+ * @return {string[]}
+ */
+export function getCodecsForFormat(format) {
+	const codecs = [];
+
+	for (const [codec, formats] of VIDEO_CODECS_FORMATS) {
+		if (formats.includes(format)) {
+			codecs.push(codec);
+		}
+	}
+
+	return codecs;
+}
+
 class Exports {
 	imageEncoding = $state(IMAGE_ENCODINGS[0]);
-	videoFormat = $state(Object.values(VIDEO_FORMATS)[0]);
+	videoFormat = $state(VIDEO_FORMATS.MP4);
 	pixelsPerInch = $state(72);
 	framerate = $state(60);
 	useDuration = $state(true);
@@ -20,6 +54,7 @@ class Exports {
 	loopCount = $state(1);
 	imageQuality = $state(100);
 	videoQuality = $state(100);
+	videoCodec = $state(VIDEO_CODECS.HEVC);
 	imageCount = $state(1);
 	recording = $state(false);
 	capturing = $state(false);
@@ -41,6 +76,7 @@ class Exports {
 						loopCount: this.loopCount,
 						imageQuality: this.imageQuality,
 						videoQuality: this.videoQuality,
+						videoCodec: this.videoCodec,
 						imageCount: this.imageCount,
 						videoCollapsed: this.videoCollapsed,
 						imageCollapsed: this.imageCollapsed,
@@ -105,6 +141,7 @@ class Exports {
 			format = this.videoFormat,
 			imageEncoding = this.imageEncoding,
 			quality = this.videoQuality,
+			codec = this.videoCodec,
 			duration,
 			filename,
 			pattern,
@@ -133,6 +170,7 @@ class Exports {
 			onTick,
 			framerate,
 			format,
+			codec,
 			imageEncoding,
 			quality,
 			duration: duration * this.loopCount,

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

@@ -128,15 +128,15 @@ class Rendering {
 			const params =
 				instance.init?.({
 					canvas: document.createElement('canvas'),
-					pixelRatio: this.pixelRatio,
 					width: this.width,
 					height: this.height,
+					pixelRatio: this.pixelRatio,
 				}) ?? {};
 
 			instance.resize?.({
-				pixelRatio: this.pixelRatio,
 				width: this.width,
 				height: this.height,
+				pixelRatio: this.pixelRatio,
 				...params,
 			});
 

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

@@ -81,8 +81,15 @@ export function deepClone(value) {
 	}
 
 	if (isObject(value)) {
-		const clone = structuredClone(value);
-		return clone;
+		try {
+			const clone = structuredClone(
+				Array.isArray(value) ? [...value] : { ...value },
+			);
+			return clone;
+		} catch (error) {
+			console.error(error);
+			return value;
+		}
 	}
 
 	return value;

package/src/client/app/stores/sketches.js

@@ -1,6 +1,7 @@
+import { sketches as all } from 'virtual:sketches';
+
 import { createStore } from './utils.js';
 import { displayError } from '../stores/errors';
-import { sketches as all } from '@fragment/sketches';
 
 export const sketches = createStore('sketches', {});
 export const sketchesKeys = createStore('sketchesKeys', Object.keys(all));

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

@@ -111,9 +111,9 @@
 		justify-content: stretch;
 		color: #2a0000;
 		padding: 12px 0;
-		font-size: var(--font-size-input);
+		font-size: var(--fragment-input-font-size);
 		background-color: #ff8081;
-		border-radius: var(--border-radius-input);
+		border-radius: var(--fragment-input-border-radius);
 		overflow-x: auto;
 	}
 
@@ -126,8 +126,8 @@
 	}
 
 	.extract::-webkit-scrollbar-thumb {
-		background-color: #f0f0f0; /* color of the scroll thumb */
-		border-radius: 20px; /* roundness of the scroll thumb */
+		background-color: var(--fragment-color-white);
+		border-radius: 20px;
 	}
 
 	.extract-line {
@@ -143,6 +143,6 @@
 	}
 
 	.console {
-		font-size: var(--font-size-input);
+		font-size: var(--fragment-input-font-size);
 	}
 </style>

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

@@ -67,10 +67,14 @@
 			value(event);
 			onclick(event);
 		},
-		download: (event) => {
-			let [data, filename] = value(event);
+		download: async (event) => {
+			try {
+				let [data, filename] = await value(event);
 
-			download(data, filename);
+				download(data, filename);
+			} catch (error) {
+				console.error(`Error while trying to download:`, error);
+			}
 		},
 		number: (event = {}) => {
 			const isValueInRange = event.value >= 0 && event.value <= 1;
@@ -185,7 +189,7 @@
 		width: 100%;
 
 		padding: 3px 6px 3px 12px;
-		border-bottom: 1px solid var(--color-spacing);
+		border-bottom: 1px solid var(--fragment-spacing-color);
 	}
 
 	.field.changed:before {
@@ -205,8 +209,8 @@
 
 		background: repeating-linear-gradient(
 			45deg,
-			var(--color-active) calc(0px + var(--stripes-offset)),
-			var(--color-active) calc(2px + var(--stripes-offset)),
+			var(--fragment-accent-color) calc(0px + var(--stripes-offset)),
+			var(--fragment-accent-color) calc(2px + var(--stripes-offset)),
 			transparent calc(2px + var(--stripes-offset)),
 			transparent calc(4px + var(--stripes-offset))
 		);
@@ -218,7 +222,7 @@
 	}
 
 	:global(.field__input .field:last-child) {
-		border-bottom: 0px solid #323233 !important;
+		border-bottom-width: 0px !important;
 		padding-bottom: 0px !important;
 	}
 
@@ -256,7 +260,7 @@
 	}
 
 	.field__action {
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 
 		opacity: 0.6;
 		background-color: transparent;

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

@@ -51,12 +51,12 @@
 		width: 12px;
 		height: 1px;
 
-		background-color: #323233;
+		background-color: var(--fragment-spacing-color);
 	}
 
 	.header {
 		padding: 3px 6px;
-		border-bottom: 1px solid #323233;
+		border-bottom: 1px solid var(--fragment-spacing-color);
 	}
 
 	.header__action {
@@ -73,7 +73,7 @@
 	.header__icon {
 		padding-bottom: 1px;
 
-		color: #f0f0f0;
+		color: var(--fragment-text-color);
 		transform: rotate(90deg);
 		opacity: 0.5;
 		transition: opacity 0.1s ease;
@@ -89,7 +89,7 @@
 	}
 
 	.field-group__name {
-		color: #f0f0f0;
+		color: var(--fragment-text-color);
 
 		font-size: 11px;
 		font-weight: 700;
@@ -108,7 +108,7 @@
 
 	.content {
 		margin-left: 12px;
-		border-left: 1px solid #323233;
+		border-left: 1px solid var(--fragment-spacing-color);
 	}
 
 	.field-group.collapsed .content {

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

@@ -77,7 +77,7 @@
 		width: 1px;
 		height: var(--margin);
 
-		background-color: var(--color-spacing);
+		background-color: var(--fragment-spacing-color);
 	}
 
 	.field__infos {
@@ -87,12 +87,12 @@
 		align-items: center;
 		justify-content: space-between;
 
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 	}
 
 	.field__label {
 		color: inherit;
-		font-size: var(--font-size-input);
+		font-size: var(--fragment-input-font-size);
 		user-select: none;
 
 		opacity: 0.6;
@@ -100,12 +100,12 @@
 		transition: opacity 0.1s ease;
 	}
 
-	button.field__label {
+	button.field__label:not(:disabled) {
 		cursor: pointer;
 	}
 
 	.field__label:focus-visible {
-		outline: 2px var(--color-active) solid;
+		outline: 2px var(--fragment-accent-color) solid;
 		outline-offset: 2px;
 		border-radius: 1px;
 	}
@@ -123,7 +123,7 @@
 
 		padding-left: 5px;
 
-		background-color: #242425;
+		background-color: var(--fragment-background-color);
 	}
 
 	.field__input {
@@ -132,11 +132,11 @@
 		justify-content: center;
 		align-items: flex-start;
 
-		min-height: calc(var(--height-input) + 4px);
+		min-height: calc(var(--fragment-input-height) + 4px);
 	}
 
 	.field__section.secondary .field__input {
 		padding: var(--column-gap);
-		border: 1px solid var(--color-spacing);
+		border: 1px solid var(--fragment-spacing-color);
 	}
 </style>

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

@@ -8,7 +8,7 @@
 	.field-space {
 		position: relative;
 
-		border-bottom: 1px solid var(--color-spacing);
+		border-bottom: 1px solid var(--fragment-spacing-color);
 		overflow: hidden;
 	}
 
@@ -22,7 +22,7 @@
 		width: 100%;
 		height: 1px;
 
-		background-color: var(--color-spacing);
+		background-color: var(--fragment-spacing-color);
 	}
 
 	.field-space:before {

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

@@ -217,9 +217,9 @@
 			label="delete"
 			showLabel={false}
 			onclick={handleClickDelete}
-			--color-text="white"
-			--background-color="var(--color-red)"
-			--box-shadow-color-active="var(--color-lightred)"
+			--text-color="white"
+			--background-color="var(--fragment-color-red)"
+			--box-shadow-color-active="var(--fragment-color-lightred)"
 		>
 			<IconCross />
 		</ButtonInput>
@@ -228,7 +228,7 @@
 
 <style>
 	.field-trigger {
-		--width-delete: var(--height-input);
+		--width-delete: var(--fragment-input-height);
 		--width-input: 90px;
 		--width-activity: 16px;
 		--width-cols: 1fr;
@@ -264,11 +264,11 @@
 	}
 
 	.activity.valid.enabled {
-		--background-color: var(--color-green);
+		--background-color: var(--fragment-color-green);
 	}
 
 	.activity.valid.disabled {
-		--background-color: var(--color-red);
+		--background-color: var(--fragment-color-red);
 	}
 
 	.field-trigger.mouse {

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

@@ -55,7 +55,7 @@
 
 		height: auto;
 
-		border-radius: calc(var(--border-radius-input) * 2);
+		border-radius: calc(var(--fragment-input-border-radius) * 2);
 		overflow: hidden;
 	}
 

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

@@ -9,7 +9,7 @@
 
 	let gui = $derived(buildConfig.gui ?? {});
 	let layout = $derived(buildConfig.layout ?? {});
-	let headless = $derived(layout.headless ?? false);
+	let headless = $derived(layout.headless ?? true);
 	let resizable = $derived(layout.resizable ?? false);
 
 	let guiOutput = $derived(gui.output ?? true);

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

@@ -106,7 +106,7 @@
 >
 	{#if isRoot && layout.previewing}
 		<Preview />
-	{:else if childComponents.length > 0}
+	{:else if childComponents.length > 0 && layout.persistent}
 		{#each childComponents as child (child.id)}
 			{#if child.type === 'column' || child.type === 'row'}
 				<LayoutComponent
@@ -142,7 +142,7 @@
 {#if !isRoot}
 	<Resizer
 		direction={isColumn ? 'vertical' : 'horizontal'}
-		{current}
+		bind:current
 		disabled={!resizable}
 	/>
 {/if}
@@ -166,11 +166,11 @@
 	}
 
 	.column:not(:last-child) {
-		border-right: 0.5px solid var(--color-lightblack);
+		border-right: 0.5px solid var(--fragment-color-lightblack);
 	}
 
 	.column:not(:first-child) {
-		border-left: 0.5px solid var(--color-lightblack);
+		border-left: 0.5px solid var(--fragment-color-lightblack);
 	}
 
 	.row {
@@ -181,14 +181,14 @@
 		width: 100%;
 		height: 100%;
 
-		background-color: var(--color-background);
+		background-color: var(--fragment-background-color);
 	}
 
 	.row:not(:first-child) {
-		border-top: 0.5px solid var(--color-lightblack);
+		border-top: 0.5px solid var(--fragment-color-lightblack);
 	}
 
 	.row:not(:last-child) {
-		border-bottom: 0.5px solid var(--color-lightblack);
+		border-bottom: 0.5px solid var(--fragment-color-lightblack);
 	}
 </style>

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

@@ -196,7 +196,7 @@
 
 	.resizer.dragging .resizer-hover.visible:before {
 		opacity: 1;
-		background-color: #177bd0;
+		background-color: var(--fragment-accent-color);
 	}
 
 	.resizer--horizontal {

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

@@ -64,9 +64,9 @@
 						label="Delete"
 						showLabel={false}
 						onclick={onDelete}
-						--color-text="white"
-						--background-color="var(--color-red)"
-						--box-shadow-color-active="var(--color-lightred)"
+						--fragment-text-color="white"
+						--background-color="var(--fragment-color-red)"
+						--box-shadow-color-active="var(--fragment-color-lightred)"
 					>
 						<IconCross />
 					</ButtonInput>
@@ -156,7 +156,7 @@
 		width: 1px;
 		height: var(--size);
 
-		background-color: var(--color-border-input);
+		background-color: var(--fragment-input-border-color);
 	}
 
 	.content.vertical .separator:after {
@@ -174,8 +174,8 @@
 		display: flex;
 		align-items: center;
 		padding: 6px;
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-background-color);
 		border: 1px solid #555;
 		/* background: rgba(0, 0, 0, 0.8); */
 

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

@@ -79,7 +79,7 @@
 		flex-shrink: 0;
 		align-items: center;
 
-		background-color: var(--color-lightblack);
+		background-color: var(--fragment-color-lightblack);
 	}
 
 	.slot {
@@ -114,7 +114,7 @@
 	.module__container {
 		position: relative;
 
-		background-color: var(--color-background);
+		background-color: var(--fragment-background-color);
 	}
 
 	.module.scrollable .module__container {
@@ -135,7 +135,9 @@
 	}
 
 	.module__container::-webkit-scrollbar-thumb {
-		background-color: var(--color-active); /* color of the scroll thumb */
+		background-color: var(
+			--fragment-accent-color
+		); /* color of the scroll thumb */
 		border-radius: 20px; /*       roundness of the scroll thumb*/
 	}
 
@@ -144,6 +146,6 @@
 	}
 
 	.footer {
-		height: var(--height-input);
+		height: var(--fragment-input-height);
 	}
 </style>

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

@@ -74,14 +74,14 @@
 		text-transform: capitalize;
 		user-select: none;
 
-		background-color: var(--color-lightblack);
+		background-color: var(--fragment-color-lightblack);
 	}
 
 	.module-renderer-error {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		color: var(--color-red);
+		color: var(--fragment-color-red);
 		font-size: 11px;
 		text-align: center;
 		background: #2a0000;
@@ -89,7 +89,7 @@
 	}
 
 	.message {
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 	}
 
 	.module-name {

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

@@ -134,7 +134,10 @@ void main() {
 		height: 100%;
 		justify-content: center;
 
-		background-color: var(--background-color, var(--color-lightblack));
+		background-color: var(
+			--background-color,
+			var(--fragment-color-lightblack)
+		);
 	}
 
 	.output-renderer :global(canvas) {