fragment-tools 0.1.17 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {
@@ -22,7 +22,7 @@
   "homepage": "https://github.com/raphaelameaume/fragment#readme",
   "dependencies": {
     "@clack/core": "^0.3.3",
-    "@sveltejs/vite-plugin-svelte": "^2.4.5",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "body-parser": "^1.20.0",
     "changedpi": "^1.0.4",
     "chokidar": "^3.5.2",
@@ -35,7 +35,7 @@
     "sade": "^1.7.4",
     "svelte": "^4.0.0",
     "svelte-json-tree": "^2.2.0",
-    "vite": "^4.4.9",
+    "vite": "^5.3.3",
     "webm-writer": "^1.0.0",
     "ws": "^8.2.3"
   },

package/src/cli/build.js

@@ -47,6 +47,10 @@ export async function build(entry, options) {
 			handleCancelledPrompt(outDir, prefix);
 		}
 
+		if (!outDir) {
+			outDir = '';
+		}
+
 		let outDirPath = path.join(cwd, outDir);
 
 		// create directory if it doesn't exist

package/src/cli/createConfig.js

@@ -73,7 +73,6 @@ export function createConfig(
 			__SEED__: Date.now(),
 			__BUILD__: build,
 			__DEV__: !build,
-			global: {},
 		},
 		optimizeDeps: {
 			include: ['convert-length', 'webm-writer', 'changedpi'],

package/src/cli/preview.js

@@ -37,17 +37,15 @@ export async function preview(dir, options = {}) {
 
 		const { resolvedUrls } = previewServer;
 
-		let urls = ``;
-
-		for (const url of resolvedUrls.local) {
-			urls += `${bold('Local')}:   ${bold(cyan(url))}\n`;
-		}
-
-		for (const url of resolvedUrls.network) {
-			urls += `${bold('Network')}: ${bold(cyan(url))}`;
-		}
-
-		p.note(urls);
+		let urls = [
+			...resolvedUrls.local.map(
+				(url) => `${bold('Local')}:   ${bold(cyan(url))}`,
+			),
+			...resolvedUrls.network.map(
+				(url) => `${bold('Network')}: ${bold(cyan(url))}`,
+			),
+		];
+		p.note(urls.join(`\n`));
 	} catch (error) {
 		log.error(`Error\n`, prefix);
 		console.error(error);

package/src/cli/templates/blank/index.js

@@ -30,4 +30,9 @@ export let update = ({ width, height, time, deltaTime }) => {};
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export let resize = ({ width, height, pixelRatio }) => {};
+export let resize = ({ canvas, width, height, pixelRatio }) => {
+	canvas.width = width * pixelRatio;
+	canvas.height = height * pixelRatio;
+	canvas.style.width = `${width}px`;
+	canvas.style.height = `${height}px`;
+};

package/src/cli/templates/default/index.js

@@ -23,8 +23,8 @@ export let init = ({ canvas, context, width, height }) => {};
  * @param {number} params.playhead
  * @param {number} params.playcount
  */
-export let update = ({ context, width, height, time, deltaTime }) => {
-	context.clearRect(0, 0, width, height);
+export let update = ({ context, width, height, pixelRatio }) => {
+	context.clearRect(0, 0, width * pixelRatio, height * pixelRatio);
 };
 
 /**

package/src/client/app/lib/gl/Renderer.js

@@ -137,6 +137,9 @@ class Renderer {
 		this.canvas.width = this.state.width * this.state.pixelRatio;
 		this.canvas.height = this.state.height * this.state.pixelRatio;
 
+		this.canvas.style.width = `${this.state.width}px`;
+		this.canvas.style.height = `${this.state.height}px`;
+
 		this.setViewport();
 	}
 

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

@@ -1,5 +1,34 @@
+/**
+ * @typedef {object} MountParams2DRenderer
+ * @property {CanvasRenderingContext2D} context
+ */
+
+/**
+ * @param {object} params
+ * @param {number} params.id
+ * @param {HTMLDivElement} params.container
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @returns {MountParams2DRenderer}
+ */
 export let onMountPreview = ({ canvas }) => {
 	return {
 		context: canvas.getContext('2d'),
 	};
 };
+
+/**
+ * @param {object} params
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ */
+export let onResizePreview = ({ canvas, width, height, pixelRatio }) => {
+	canvas.width = width * pixelRatio;
+	canvas.height = height * pixelRatio;
+	canvas.style.width = `${width}px`;
+	canvas.style.height = `${height}px`;
+};

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

@@ -3,8 +3,39 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../stores/errors';
 
+/**
+ * @typedef {object} PreviewP5GLRenderer
+ * @property {number} id
+ * @property {p5} p
+ * @property {boolean} rendered
+ */
+
+/**
+ * @typedef {object} MountParamsP5GLRenderer
+ * @property {HTMLCanvasElement} canvas
+ * @property {p5} p
+ */
+
+/**
+ * @typedef {object} PreviewParamsP5GLRenderer
+ * @property {number} params.id
+ * @property {HTMLDivElement} params.container
+ * @property {HTMLCanvasElement} params.canvas
+ */
+
+/** @type {PreviewP5GLRenderer[]} */
 let previews = [];
 
+/**
+ * @param {object} params
+ * @param {number} params.id
+ * @param {HTMLDivElement} params.container
+ * @param {HTMLCanvasElement} params.canvas
+ * @param {number} params.width
+ * @param {number} params.height
+ * @param {number} params.pixelRatio
+ * @returns {MountParamsP5GLRenderer}
+ */
 export let onMountPreview = ({ id, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
@@ -12,9 +43,11 @@ export let onMountPreview = ({ id, width, height }) => {
 		};
 	});
 
+	/** @type {PreviewP5GLRenderer} */
 	const preview = {
 		id,
 		p,
+		rendered: false,
 	};
 
 	previews.push(preview);
@@ -25,6 +58,9 @@ export let onMountPreview = ({ id, width, height }) => {
 	};
 };
 
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
 export let onBeforeUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -34,6 +70,9 @@ export let onBeforeUpdatePreview = ({ id }) => {
 	}
 };
 
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
 export let onAfterUpdatePreview = ({ id }) => {
 	const preview = previews.find((p) => p.id === id);
 
@@ -49,15 +88,17 @@ export let onAfterUpdatePreview = ({ id }) => {
 	}
 };
 
-export let onResizePreview = ({ id, width, height, pixelRatio }) => {
-	const preview = previews.find((p) => p.id === id);
-
-	if (preview) {
-		preview.p.pixelDensity(pixelRatio);
-		preview.p.resizeCanvas(width, height, false);
-	}
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
+export let onResizePreview = ({ p, width, height, pixelRatio }) => {
+	p.pixelDensity(pixelRatio);
+	p.resizeCanvas(width, height, false);
 };
 
+/**
+ * @param {PreviewParamsP5GLRenderer} params
+ */
 export let onDestroyPreview = ({ id }) => {
 	const previewIndex = previews.findIndex((preview) => preview.id === id);
 	const preview = previews[previewIndex];

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

@@ -30,13 +30,9 @@ export let onBeforeUpdatePreview = ({ id }) => {
 	}
 };
 
-export let onResizePreview = ({ id, width, height, pixelRatio }) => {
-	const preview = previews.find((p) => p.id === id);
-
-	if (preview) {
-		preview.p.pixelDensity(pixelRatio);
-		preview.p.resizeCanvas(width, height, false);
-	}
+export let onResizePreview = ({ p, width, height, pixelRatio }) => {
+	p.pixelDensity(pixelRatio);
+	p.resizeCanvas(width, height, false);
 };
 
 export let onDestroyPreview = ({ id }) => {

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

@@ -4,8 +4,11 @@ import { client } from '@fragment/client';
 import { getShaderPath } from '../utils/glsl.utils';
 import { clearError } from '../stores/errors';
 
-let renderer;
 let previews = [];
+
+/** @type {WebGLRenderer} */
+let renderer;
+
 let fragmentShader = /* glsl */ `
     precision highp float;
     uniform sampler2D uSampler;
@@ -66,7 +69,7 @@ export let onMountPreview = ({ id, canvas, width, height, pixelRatio }) => {
 	};
 };
 
-export let onDestroyPreview = ({ id, canvas }) => {
+export let onDestroyPreview = ({ id }) => {
 	const previewIndex = previews.findIndex((p) => p.id === id);
 	const preview = previews[previewIndex];
 
@@ -107,9 +110,12 @@ export let onAfterUpdatePreview = ({ id }) => {
 export let resize = ({ width, height, pixelRatio }) => {
 	renderer.setPixelRatio(pixelRatio);
 	renderer.setSize(width, height);
+};
+
+export let onResizePreview = ({ id, width, height, pixelRatio }) => {
+	const preview = previews.find((p) => p.id === id);
 
-	for (let i = 0; i < previews.length; i++) {
-		const preview = previews[i];
+	if (preview) {
 		preview.resize({ width, height, pixelRatio });
 	}
 };

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

@@ -35,7 +35,9 @@
 	export let paused = false;
 	export let visible = true;
 
-	let node, container;
+	let node;
+	/** @type {HTMLDivElement} */
+	let container;
 	let framerate = 60;
 	let elapsed = 0;
 	let elapsedRenderingTime = 0;
@@ -60,44 +62,46 @@
 	$: beforeRecordCallbacks = $beforeRecord.get(key) || [];
 	$: afterRecordCallbacks = $afterRecord.get(key) || [];
 
-	function checkForResize() {
+	function checkForResize(resizing = $rendering.resizing) {
 		if (!node) return;
 
-		let needsUpdate =
-			$rendering.resizing === SIZES.WINDOW ||
-			$rendering.resizing === SIZES.ASPECT_RATIO;
-
-		let newWidth, newHeight;
-
-		if ($rendering.resizing === SIZES.WINDOW) {
-			newWidth = node.offsetWidth;
-			newHeight = node.offsetHeight;
-		} else if ($rendering.resizing === SIZES.ASPECT_RATIO) {
-			const { offsetWidth, offsetHeight } = node;
-			const aspectRatio = $rendering.aspectRatio;
-			const monitorRatio = offsetWidth / offsetHeight;
-
-			if (aspectRatio < monitorRatio) {
-				newHeight = offsetHeight;
-				newWidth = newHeight * aspectRatio;
-			} else {
-				newWidth = offsetWidth;
-				newHeight = newWidth / aspectRatio;
+		let isWindowResize = resizing === SIZES.WINDOW;
+		let isAspectResize = resizing === SIZES.ASPECT_RATIO;
+		let canUpdate = isWindowResize || isAspectResize;
+
+		if (canUpdate) {
+			let newWidth, newHeight;
+
+			if (isWindowResize) {
+				newWidth = node.offsetWidth;
+				newHeight = node.offsetHeight;
+			} else if (isAspectResize) {
+				const { offsetWidth, offsetHeight } = node;
+				const aspectRatio = $rendering.aspectRatio;
+				const monitorRatio = offsetWidth / offsetHeight;
+
+				if (aspectRatio < monitorRatio) {
+					newHeight = offsetHeight;
+					newWidth = newHeight * aspectRatio;
+				} else {
+					newWidth = offsetWidth;
+					newHeight = newWidth / aspectRatio;
+				}
 			}
-		}
 
-		needsUpdate =
-			needsUpdate &&
-			(newWidth !== $rendering.width || newHeight !== $rendering.height);
-
-		if (needsUpdate) {
-			rendering.update((curr) => {
-				return {
-					...curr,
-					width: newWidth,
-					height: newHeight,
-				};
-			});
+			let needsUpdate =
+				newWidth !== $rendering.width ||
+				newHeight !== $rendering.height;
+
+			if (needsUpdate) {
+				rendering.update((curr) => {
+					return {
+						...curr,
+						width: newWidth,
+						height: newHeight,
+					};
+				});
+			}
 		}
 	}
 
@@ -127,9 +131,6 @@
 	});
 
 	function createCanvas(canvas = document.createElement('canvas')) {
-		canvas.width = $rendering.width * $rendering.pixelRatio;
-		canvas.height = $rendering.height * $rendering.pixelRatio;
-
 		canvas.onmousedown = (event) => checkForTriggersDown(event, key);
 		canvas.onmousemove = (event) => checkForTriggersMove(event, key);
 		canvas.onmouseup = (event) => checkForTriggersUp(event, key);
@@ -182,7 +183,7 @@
 	async function createSketch(key) {
 		_created = false;
 
-		sketch?.dispose?.();
+		sketch?.dispose?.(params);
 
 		sketch = $sketches[key];
 
@@ -202,7 +203,7 @@
 
 		if (canvas) {
 			if (renderer && typeof renderer.onDestroyPreview === 'function') {
-				renderer.onDestroyPreview({ id, canvas });
+				renderer.onDestroyPreview({ id, container, canvas });
 			}
 
 			destroyCanvas(canvas);
@@ -487,30 +488,6 @@
 		}
 	}
 
-	rendering.subscribe((current) => {
-		if (canvas && _created) {
-			if (current.resizing === SIZES.SCALE) {
-				canvas.style.transform = `scale(${current.scale})`;
-			} else {
-				canvas.style.transform = null;
-			}
-
-			const { width, height, pixelRatio } = current;
-			const resize = sketch.resize || noop;
-
-			resize({
-				canvas,
-				width,
-				height,
-				pixelRatio,
-				...params,
-			});
-
-			_renderSketch = createRenderLoop();
-			needsRender = true;
-		}
-	});
-
 	async function save() {
 		paused = true;
 
@@ -649,21 +626,38 @@
 	$: {
 		checkForResize();
 
+		const { width, height, pixelRatio, resizing, scale } = $rendering;
+
 		if (renderer && typeof renderer.onResizePreview === 'function') {
 			renderer.onResizePreview({
 				id,
 				container,
-				width: $rendering.width,
-				height: $rendering.height,
-				pixelRatio: $rendering.pixelRatio,
+				width,
+				height,
+				pixelRatio,
+				...params,
 			});
 		}
 
 		if (canvas) {
-			const pixelRatio = $rendering.pixelRatio;
+			if (resizing === SIZES.SCALE) {
+				canvas.style.transform = `scale(${scale})`;
+			} else {
+				canvas.style.transform = null;
+			}
+
+			if (_created) {
+				sketch?.resize?.({
+					canvas,
+					width,
+					height,
+					pixelRatio,
+					...params,
+				});
 
-			canvas.width = $rendering.width * pixelRatio;
-			canvas.height = $rendering.height * pixelRatio;
+				_renderSketch = createRenderLoop();
+				_renderSketch();
+			}
 		}
 	}
 
@@ -680,6 +674,10 @@
 						)) // if none of current monitors match the key
 				? $errors.get($errors.keys().next().value)
 				: null;
+
+	$: isSquare = $rendering.width === $rendering.height;
+	$: isLandscape = $rendering.width > $rendering.height;
+	$: isPortrait = $rendering.width < $rendering.height;
 </script>
 
 <div
@@ -691,7 +689,7 @@
 >
 	<div
 		class="canvas-container"
-		style="max-width: {$rendering.width}px; max-height: {$rendering.height}px;"
+		style="--aspect-ratio: {$rendering.width} / {$rendering.height}; --aspect-ratio-inverse: {$rendering.height} / {$rendering.width}; --width: {$rendering.width}px; --height: {$rendering.height}px;"
 		bind:this={container}
 	/>
 	{#if $recording}
@@ -709,7 +707,6 @@
 
 <style>
 	.sketch-renderer {
-		position: absolute;
 		display: flex;
 		width: 100%;
 		height: 100%;
@@ -717,6 +714,8 @@
 		align-items: center;
 
 		background-color: var(--background-color, var(--color-lightblack));
+
+		container-type: size;
 	}
 
 	.sketch-renderer:not(.visible) {
@@ -724,13 +723,27 @@
 	}
 
 	.canvas-container {
+		--w: min(100cqw, calc(100cqh * var(--aspect-ratio)));
 		position: relative;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		max-height: 100%;
+
+		max-width: var(--width);
+		max-height: var(--height);
+
+		width: var(--w);
+		height: calc(var(--w) * var(--aspect-ratio-inverse));
+
+		background-color: red;
+	}
+
+	:global(.canvas-container canvas) {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		width: 100% !important;
+		height: 100% !important;
+
+		background-color: var(--background-color, #000000);
 	}
 
 	.sketch-renderer.recording .canvas-container {
@@ -783,16 +796,4 @@
 			opacity: 0;
 		}
 	}
-
-	:global(.canvas-container canvas) {
-		max-width: 100%;
-		max-height: 100%;
-
-		flex: none;
-
-		width: auto !important;
-		height: auto !important;
-
-		background-color: var(--background-color, #000000);
-	}
 </style>

package/src/client/app/lib/canvas-recorder/H264Recorder.js

@@ -1,45 +0,0 @@
-import * as HME from 'h264-mp4-encoder';
-import CanvasRecorder from './CanvasRecorder';
-
-class H264Recorder extends CanvasRecorder {
-	getBitmapRGBA(bitmap, width = bitmap.width, height = bitmap.height) {
-		this.tmpCanvas.width = width;
-		this.tmpCanvas.height = height;
-		this.tmpContext.clearRect(0, 0, width, height);
-		this.tmpContext.drawImage(bitmap, 0, 0, width, height);
-		return this.tmpContext.getImageData(0, 0, width, height).data;
-	}
-
-	async start() {
-		this.encoder = await HME.createH264MP4Encoder();
-
-		this.tmpCanvas = document.createElement('canvas');
-		this.tmpContext = this.tmpCanvas.getContext('2d');
-
-		this.encoder.width = this.canvas.width;
-		this.encoder.height = this.canvas.height;
-		this.encoder.frameRate = this.framerate;
-		this.encoder.kbps = 30000;
-		this.encoder.initialize();
-
-		super.start();
-	}
-
-	tick() {
-		const { width, height } = this.canvas;
-		const pixels = this.getBitmapRGBA(this.canvas, width, height);
-
-		this.encoder.addFrameRgba(pixels);
-	}
-
-	async end() {
-		this.encoder.finalize();
-
-		const data = this.encoder.FS.readFile(this.encoder.outputFilename);
-		this.result = new Blob([data], { type: 'video/mp4' });
-
-		super.end();
-	}
-}
-
-export default H264Recorder;