fragment-tools 0.2.7 → 0.2.9

package/src/client/app/modules/Console/ConsoleLine.svelte

@@ -90,12 +90,12 @@
 	.log {
 		--json-tree-string-color: #17d08e;
 		--arrow-sign: rgba(255, 255, 255, 0.5);
-		--json-tree-font-size: var(--font-size-input);
-		--json-tree-font-family: var(--font-mono);
+		--json-tree-font-size: var(--fragment-input-font-size);
+		--json-tree-font-family: var(--fragment-font-family);
 		--json-tree-number-color: #9980ff;
 		--json-tree-symbol-color: #0a0606;
 		--json-tree-boolean-color: #9980ff;
-		--json-tree-function-color: var(--color-active);
+		--json-tree-function-color: var(--fragment-accent-color);
 		/* --json-tree-number-color: #3029cf; */
 		--json-tree-property-color: #5db0d7;
 		--json-tree-label-color: rgba(240, 240, 240, 0.6);
@@ -124,22 +124,22 @@
 
 	.string {
 		display: block;
-		font-size: var(--font-size-input);
+		font-size: var(--fragment-input-font-size);
 	}
 
 	.function {
-		font-size: var(--font-size-input);
+		font-size: var(--fragment-input-font-size);
 		font-style: italic;
 		white-space: pre;
 		tab-size: 2em;
 	}
 
 	:global(
-			.log ul > .Number,
-			.log ul > .Boolean,
-			.log ul > .Date,
-			.log ul > .Undefined
-		) {
+		.log ul > .Number,
+		.log ul > .Boolean,
+		.log ul > .Date,
+		.log ul > .Undefined
+	) {
 		margin-left: calc(var(--li-identation) * -1);
 	}
 
@@ -204,7 +204,7 @@
 	.trace {
 		border-bottom: 1px solid #eee;
 		font-size: 12px;
-		font-family: var(--font-mono);
+		font-family: var(--fragment-font-family);
 		padding: 4px 0 2px;
 	}
 
@@ -234,7 +234,7 @@
 		height: 16px;
 
 		border-radius: 9px;
-		background-color: var(--color-lightblack);
+		background-color: var(--fragment-color-lightblack);
 	}
 
 	.count span {
@@ -261,7 +261,7 @@
 	}
 
 	.title {
-		font-family: var(--font-mono);
+		font-family: var(--fragment-font-family);
 		font-size: 13px;
 		font-weight: bold;
 		padding-left: 11px;

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

@@ -114,8 +114,8 @@
 		max-height: 100%;
 
 		background-color: #1d1d1e;
-		border-radius: var(--border-radius-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 	}
 
 	.scroll {
@@ -138,12 +138,14 @@
 
 	.scroll::-webkit-scrollbar-track {
 		background-color: var(
-			--color-lightblack
+			--fragment-color-lightblack
 		); /* color of the tracking area */
 	}
 
 	.scroll::-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 */
 	}
 </style>

package/src/client/app/renderers/2DRenderer.js

@@ -1,13 +1,14 @@
 /**
  * @typedef {object} MountParams2DRenderer
+ * @property {HTMLCanvasElement} canvas
  * @property {CanvasRenderingContext2D} context
  */
 
 /**
  * @param {object} params
  * @param {number} params.id
- * @param {HTMLDivElement} params.container
  * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLElement} params.container
  * @param {number} params.width
  * @param {number} params.height
  * @param {number} params.pixelRatio
@@ -21,13 +22,15 @@ export let onMountPreview = ({ canvas }) => {
 };
 
 /**
- * @param {object} params
+ * @param {MountParams2DRenderer} params
+ * @param {number} params.id
  * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLElement} params.container
  * @param {number} params.width
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let onResizePreview = ({ canvas, width, height, pixelRatio }) => {
+export let onResizePreview = ({ id, canvas, width, height, pixelRatio }) => {
 	canvas.width = width * pixelRatio;
 	canvas.height = height * pixelRatio;
 	canvas.style.width = `${width}px`;

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

@@ -3,9 +3,32 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../state/errors.svelte';
 
+/**
+ * @typedef {object} MountParamsFragmentRenderer
+ * @property {HTMLCanvasElement} canvas
+ * @property {Frag} frag
+ */
+
+/**
+ * @typedef {object} FragFragmentRenderer
+ * @property {number} id
+ * @property {Frag} frag
+ */
+
+/** @type {FragFragmentRenderer[]} */
 let frags = [];
 
-export let onMountPreview = ({ canvas, id }) => {
+/**
+ * @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 {MountParamsFragmentRenderer}
+ */
+export let onMountPreview = ({ id, canvas }) => {
 	let frag = fragment({
 		canvas,
 	});
@@ -18,13 +41,27 @@ export let onMountPreview = ({ canvas, id }) => {
 	return { canvas, frag };
 };
 
+/**
+ * @param {MountParamsFragmentRenderer} 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 }) => {
 	let { frag } = frags.find((f) => f.id === id);
 
 	frag.resize({ width, height, pixelRatio });
 };
 
-export let onDestroyPreview = ({ canvas, id }) => {
+/**
+ * @param {MountParamsFragmentRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLElement} params.container
+ */
+export let onDestroyPreview = ({ id, canvas }) => {
 	let fragIndex = frags.findIndex((f) => f.id === id);
 	let { frag } = frags[fragIndex];
 

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

@@ -3,13 +3,6 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../state/errors.svelte';
 
-/**
- * @typedef {object} PreviewP5GLRenderer
- * @property {number} id
- * @property {p5} p
- * @property {boolean} rendered
- */
-
 /**
  * @typedef {object} MountParamsP5GLRenderer
  * @property {HTMLCanvasElement} canvas
@@ -17,10 +10,10 @@ import { clearError } from '../state/errors.svelte';
  */
 
 /**
- * @typedef {object} PreviewParamsP5GLRenderer
- * @property {number} params.id
- * @property {HTMLDivElement} params.container
- * @property {HTMLCanvasElement} params.canvas
+ * @typedef {object} PreviewP5GLRenderer
+ * @property {number} id
+ * @property {p5} p
+ * @property {boolean} rendered
  */
 
 /** @type {PreviewP5GLRenderer[]} */
@@ -36,31 +29,30 @@ let previews = [];
  * @param {number} params.pixelRatio
  * @returns {MountParamsP5GLRenderer}
  */
-export let onMountPreview = ({ id, container, width, height }) => {
+export let onMountPreview = ({ id, container, canvas, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
-			const canvas = sketch.createCanvas(width, height, 'webgl');
-			canvas.parent(container);
+			sketch.createCanvas(width, height, 'webgl', canvas);
 		};
-	});
+	}, container);
 
-	/** @type {PreviewP5GLRenderer} */
-	const preview = {
+	previews.push({
 		id,
 		p,
 		rendered: false,
-	};
-
-	previews.push(preview);
+	});
 
 	return {
-		canvas: p.canvas,
+		canvas,
 		p,
 	};
 };
 
 /**
- * @param {PreviewParamsP5GLRenderer} params
+ * @param {MountParamsP5GLRenderer} 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);
@@ -73,7 +65,10 @@ export let onBeforeUpdatePreview = ({ id }) => {
 };
 
 /**
- * @param {PreviewParamsP5GLRenderer} params
+ * @param {MountParamsP5GLRenderer} 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);
@@ -91,7 +86,12 @@ export let onAfterUpdatePreview = ({ id }) => {
 };
 
 /**
- * @param {PreviewParamsP5GLRenderer} params
+ * @param {MountParamsP5GLRenderer} 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);
@@ -103,7 +103,10 @@ export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 };
 
 /**
- * @param {PreviewParamsP5GLRenderer} params
+ * @param {MountParamsP5GLRenderer} params
+ * @param {number} params.id
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {HTMLElement} params.container
  */
 export let onDestroyPreview = ({ id }) => {
 	const previewIndex = previews.findIndex((preview) => preview.id === id);
@@ -186,7 +189,6 @@ if (import.meta.hot) {
 
 client.on('shader-update', (shaderUpdates) => {
 	previews.forEach(({ p }) => {
-		console.log('clear error', p._renderer.GL.__uuid);
 		clearError(p._renderer.GL.__uuid);
 	});
 

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

@@ -1,28 +1,54 @@
 import p5 from 'p5';
 
+/**
+ * @typedef {object} MountParamsP5Renderer
+ * @property {HTMLCanvasElement} canvas
+ * @property {p5} p
+ */
+
+/**
+ * @typedef {object} PreviewP5Renderer
+ * @property {number} id
+ * @property {p5} p
+ */
+
+/** @type {PreviewP5Renderer[]} */
 let previews = [];
 
-export let onMountPreview = ({ id, container, width, height }) => {
+/**
+ * @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 {MountParamsP5Renderer}
+ */
+export let onMountPreview = ({ id, container, canvas, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
-			const canvas = sketch.createCanvas(width, height);
-			canvas.parent(container);
+			sketch.createCanvas(width, height, canvas);
 		};
-	});
+	}, container);
 
-	const preview = {
+	previews.push({
 		id,
 		p,
-	};
-
-	previews.push(preview);
+	});
 
 	return {
-		canvas: p.canvas,
+		canvas,
 		p,
 	};
 };
 
+/**
+ * @param {MountParamsP5Renderer} 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);
 
@@ -31,6 +57,14 @@ export let onBeforeUpdatePreview = ({ id }) => {
 	}
 };
 
+/**
+ * @param {MountParamsP5Renderer} 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);
 
@@ -40,6 +74,12 @@ export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 	}
 };
 
+/**
+ * @param {MountParamsP5Renderer} 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];

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/Sketch.svelte.js

@@ -540,10 +540,6 @@ class Sketch {
 			),
 		};
 	}
-
-	get backgroundColor() {
-		return this.instance.backgroundColor;
-	}
 }
 
 export default Sketch;

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

@@ -185,7 +185,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 +205,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 +218,7 @@
 	}
 
 	:global(.field__input .field:last-child) {
-		border-bottom: 0px solid #323233 !important;
+		border-bottom-width: 0px !important;
 		padding-bottom: 0px !important;
 	}
 
@@ -256,7 +256,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 {