fragment-tools 0.1.13 → 0.1.15

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

@@ -1,33 +1,71 @@
+/**
+ * @typedef {Object} File
+ * @property {string} filepath
+ * @property {string} exportDir
+ * @property {string} data
+ * @property {string} [encoding]
+ */
+
+/**
+ * Transform a Blob into a Data URL
+ * @param {Blob} blob
+ * @returns {Promise<string>}
+ */
+export async function createDataURLFromBlob(blob) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+
+		reader.onerror = (err) => {
+			reject(err);
+		};
+
+		reader.onload = (e) => {
+			resolve(e.target.result);
+		};
+
+		reader.readAsDataURL(blob);
+	});
+}
+
+/**
+ * Transform a Data URL into a blob
+ * @param {string} dataURL
+ * @returns {Blob}
+ */
 export function createBlobFromDataURL(dataURL) {
-    return new Promise((resolve, reject) => {
-        const splitIndex = dataURL.indexOf(',');
-
-        if (splitIndex === -1) {
-            reject(new Error(`createBlobFromDataURL: dataURL doesn't contain extension data.`))
-            return;
-        }
-
-        const base64 = dataURL.slice(splitIndex + 1);
-        const byteString = window.atob(base64);
-        const type = dataURL.slice(0, splitIndex);
-        const mimeMatch = /data:([^;]+)/.exec(type);
-        const mime = (mimeMatch ? mimeMatch[1] : '') || undefined;
-        const ab = new ArrayBuffer(byteString.length);
-        const ia = new Uint8Array(ab);
-        for (var i = 0; i < byteString.length; i++) {
-            ia[i] = byteString.charCodeAt(i);
-        }
-        
-        resolve(new window.Blob([ ab ], { type: mime }));
-    });
+	return new Promise((resolve, reject) => {
+		const splitIndex = dataURL.indexOf(',');
+
+		if (splitIndex === -1) {
+			reject(
+				new Error(
+					`createBlobFromDataURL: dataURL doesn't contain extension data.`,
+				),
+			);
+			return;
+		}
+
+		const base64 = dataURL.slice(splitIndex + 1);
+		const byteString = window.atob(base64);
+		const type = dataURL.slice(0, splitIndex);
+		const mimeMatch = /data:([^;]+)/.exec(type);
+		const mime = (mimeMatch ? mimeMatch[1] : '') || undefined;
+		const ab = new ArrayBuffer(byteString.length);
+		const ia = new Uint8Array(ab);
+		for (var i = 0; i < byteString.length; i++) {
+			ia[i] = byteString.charCodeAt(i);
+		}
+
+		resolve(new window.Blob([ab], { type: mime }));
+	});
 }
 
 export function download(data, filename) {
 	let extension = getFileExtension(filename);
 
-	if (typeof data === "object" && ["json", "txt"].includes(extension)) {
-        data = JSON.stringify(data, undefined, 4);
-    }
+	if (typeof data === 'object' && ['json', 'txt'].includes(extension)) {
+		data = JSON.stringify(data, undefined, 4);
+	}
 
 	let type = getMimeType(extension);
 	let blob = new Blob([data], { type });
@@ -35,14 +73,20 @@ export function download(data, filename) {
 	downloadBlob(blob, { filename });
 }
 
-export function downloadBlob(blob, { filename = "untitled" } = {}) {
+/**
+ * Download a blob from the browser
+ * @param {Blob} blob
+ * @param {object} [options]
+ * @param {string} [options.filename="untitled"]
+ */
+export function downloadBlob(blob, { filename = 'untitled' } = {}) {
 	let a = document.createElement('a');
 	a.style.visibility = 'hidden';
-    a.target = '_blank';
+	a.target = '_blank';
 
-    a.download = filename;
-    a.href = window.URL.createObjectURL(blob);
-    // a.dataset.downloadurl =  [type, a.download, a.href].join(':');
+	a.download = filename;
+	a.href = window.URL.createObjectURL(blob);
+	// a.dataset.downloadurl =  [type, a.download, a.href].join(':');
 
 	a.onclick = () => {
 		a.onclick = () => {};
@@ -53,7 +97,26 @@ export function downloadBlob(blob, { filename = "untitled" } = {}) {
 		});
 	};
 
-    a.click();
+	a.click();
+}
+
+/**
+ * Extract filename and extension from a string path
+ * @param {string} path
+ * @returns {string} filename
+ */
+export function getFilename(path) {
+	return path.split(/[\\/]/).pop();
+}
+
+/**
+ * Estimate file size in megabytes from a Data URL
+ * @param {string} data
+ * @returns {number}
+ */
+export function estimateFileSize(data) {
+	const base64Length = data.length - (data.indexOf(',') + 1);
+	return (base64Length * (3 / 4) - 2) / 1024 / 1024;
 }
 
 export function getFileExtension(path) {
@@ -65,13 +128,122 @@ export function getFileExtension(path) {
 }
 
 /**
- * 
- * @param {string} extension 
- * @returns {string} mimeType
+ *
+ * @param {string} extension
+ * @returns {string}
  */
 export function getMimeType(extension) {
-	if (extension === "json") return "application/json";
-	if (extension === "txt") return "text";
-	if (extension === "png") return "image/png";
-	if (extension === "jpeg" || extension === "jpg") return "image/jpeg";
+	if (extension === 'json') return 'application/json';
+	if (extension === 'txt') return 'text';
+	if (extension === 'png') return 'image/png';
+	if (extension === 'jpeg' || extension === 'jpg') return 'image/jpeg';
+}
+
+/**
+ *
+ * @param {File|File[]} files
+ */
+export async function saveInBrowser(files) {
+	/**
+	 * @param {File} file
+	 */
+	async function saveFile({ filename, data, blob }) {
+		if (!blob) {
+			blob = await createBlobFromDataURL(data);
+		}
+
+		await downloadBlob(blob, { filename });
+	}
+
+	if (Array.isArray(files)) {
+		return Promise.all(files.map((file) => saveFile(file)));
+	} else {
+		await saveFile(files);
+	}
+}
+
+/**
+ * Save files to disk by sending them to Fragment save plugin. Fallback to saveInBrowser if fails
+ * @param {File[]} files
+ * @returns {Promise<string[]>}
+ */
+export async function saveFiles(files = [], out = []) {
+	if (__DEV__) {
+		files.forEach((file) => {
+			if (!file.size) {
+				file.size = estimateFileSize(file.data);
+			}
+		});
+
+		const limitInMb = 100;
+		const body = {
+			files: [],
+		};
+
+		let size = 0;
+
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i];
+			if (size < limitInMb) {
+				body.files.push(file);
+				size += file.size;
+			} else {
+				break;
+			}
+		}
+
+		const response = await fetch('/save', {
+			method: 'POST',
+			body: JSON.stringify(body),
+			headers: {
+				Accept: 'application/json',
+				'Content-Type': 'application/json',
+			},
+		});
+		const { filepaths, error } = await response.json();
+
+		if (response.ok && filepaths?.length) {
+			out.push(...filepaths);
+
+			if (body.files.length < files.length) {
+				return saveFiles(files.slice(body.files.length), out);
+			}
+
+			if (out.length < 15) {
+				out.forEach((filepath) => {
+					console.log(`[fragment] Saved ${filepath}`);
+				});
+			} else {
+				console.log(`[fragment] Saved ${out.length} files.`, {
+					filepaths: out,
+				});
+			}
+
+			return out;
+		} else {
+			console.error(`[fragment] Error while saving files on disk.`);
+			await saveInBrowser(files);
+		}
+	} else {
+		await saveInBrowser(files);
+	}
+}
+
+/**
+ * Save a blob on disk
+ * @param {Blob} blob
+ * @param {object} options
+ * @returns {Promise<string[]>}
+ */
+export async function saveBlob(blob, { filename, exportDir }) {
+	const data = await createDataURLFromBlob(blob);
+
+	return saveFiles([
+		{
+			filename,
+			data,
+			exportDir,
+			encoding: 'base64',
+		},
+	]);
 }

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

@@ -3,11 +3,11 @@ const regex = /<filepath:\/\/(.*)>/;
 export function getShaderPath(shader) {
 	const match = shader.match(/<filepath:\/\/(.*)>/);
 	return match && match[1];
-};
+}
 
 export function removeShaderPath(shader, filepath = getShaderPath(shader)) {
 	if (filepath) {
-		return shader.replace(`// <filepath://${filepath}>`, "");
+		return shader.replace(`// <filepath://${filepath}>`, '');
 	}
 
 	return shader;

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

@@ -1,5 +1,5 @@
-import { displayError } from "../stores/errors";
-import { getShaderPath, removeShaderPath } from "./glsl.utils";
+import { displayError } from '../stores/errors';
+import { getShaderPath, removeShaderPath } from './glsl.utils';
 
 const methods = ['attachShader'];
 
@@ -13,38 +13,52 @@ for (let i = 0; i < methods.length; i++) {
 
 function createUUID() {
 	function s4() {
-		return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+		return Math.floor((1 + Math.random()) * 0x10000)
+			.toString(16)
+			.substring(1);
 	}
 
-	return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-};
+	return (
+		s4() +
+		s4() +
+		'-' +
+		s4() +
+		'-' +
+		s4() +
+		'-' +
+		s4() +
+		'-' +
+		s4() +
+		s4() +
+		s4()
+	);
+}
 
 function e(method, fn) {
-	contexts.forEach(context => {
+	contexts.forEach((context) => {
 		const f = context.prototype[method];
 
-		context.prototype[method] = function() {
-			var res = f.apply( this, arguments );
-			res = fn.apply( this, [ res, arguments ] ) || res;
+		context.prototype[method] = function () {
+			var res = f.apply(this, arguments);
+			res = fn.apply(this, [res, arguments]) || res;
 			return res;
-		}
-	})
+		};
+	});
 }
 
 const FRAGMENT_SHADER = 35632;
 const VERTEX_SHADER = 35633;
 
 class ShaderCompileError extends Error {
-
 	constructor({
 		source,
-		filename = "",
+		filename = '',
 		lineNumber,
-		message = `Cannot compile ${filename !== "" ? filename : "shader"}`
+		message = `Cannot compile ${filename !== '' ? filename : 'shader'}`,
 	} = {}) {
 		super(message, filename, lineNumber);
 
-		this.name = "ShaderCompileError";
+		this.name = 'ShaderCompileError';
 		this.source = source;
 		this.lineNumber = lineNumber;
 
@@ -52,7 +66,7 @@ class ShaderCompileError extends Error {
 	}
 }
 
-e('createShader', function(res, args) {
+e('createShader', function (res, args) {
 	if (!this.__uuid) {
 		this.__uuid = createUUID();
 	}
@@ -61,18 +75,18 @@ e('createShader', function(res, args) {
 	res.__type = args[0];
 });
 
-e('attachShader', function(res, args) {
+e('attachShader', function (res, args) {
 	const program = args[0];
 	const shader = args[1];
 
 	if (shader.__type === FRAGMENT_SHADER) {
-		program.__fragmentShader = shader; 
+		program.__fragmentShader = shader;
 	} else if (shader.__type === VERTEX_SHADER) {
 		program.__vertexShader = shader;
 	}
 });
 
-e('shaderSource', function(res, args) {
+e('shaderSource', function (res, args) {
 	const shader = args[0];
 	const source = args[1];
 
@@ -81,25 +95,29 @@ e('shaderSource', function(res, args) {
 	const filepath = getShaderPath(source);
 
 	if (filepath) {
-		const filename = filepath.replace(`${__CWD__}/`, "");
+		const filename = filepath.replace(`${__CWD__}/`, '');
 
 		shader.__filepath = filepath;
 		shader.__filename = filename;
 	}
 });
 
-e('createProgram', function(res, args) {
+e('createProgram', function (res, args) {
 	res.__uuid = createUUID();
 });
 
-e('compileShader', function(res, args) {
+e('compileShader', function (res, args) {
 	const gl = this;
 	const shader = args[0];
 	const filename = shader.__filename;
 
 	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-		const { source, lineNumber, message } = getShaderError(gl, shader, shader.__type);
-		
+		const { source, lineNumber, message } = getShaderError(
+			gl,
+			shader,
+			shader.__type,
+		);
+
 		const error = new ShaderCompileError({
 			source,
 			message,
@@ -118,7 +136,7 @@ function getShaderError(gl, shader, type) {
 	if (status && errors === '') return '';
 
 	const errorMatches = errors.match(/ERROR: 0:(\d+):([\s\S]*$)/);
-	
+
 	if (errorMatches) {
 		const lineNumber = parseInt(errorMatches[1]);
 		const message = errorMatches[2];
@@ -126,7 +144,7 @@ function getShaderError(gl, shader, type) {
 		const source = handleSource(shaderSource, lineNumber);
 
 		return {
-			message, 
+			message,
 			source: source,
 			lineNumber,
 		};
@@ -141,14 +159,14 @@ function handleSource(source, errorLine) {
 	const lines = (hasPath ? removeShaderPath(source) : source).split('\n');
 	const lines2 = [];
 
-	const from = Math.max( errorLine - 6, 0 );
-	const to = Math.min( errorLine + 6, lines.length );
+	const from = Math.max(errorLine - 6, 0);
+	const to = Math.min(errorLine + 6, lines.length);
 
-	for ( let i = from; i < to; i ++ ) {
+	for (let i = from; i < to; i++) {
 		const line = i + 1;
 
-		lines2.push( `${line === errorLine ? '>' : ' '} ${line}: ${lines[ i ]}` );
+		lines2.push(`${line === errorLine ? '>' : ' '} ${line}: ${lines[i]}`);
 	}
 
-	return lines2.join( '\n' );
+	return lines2.join('\n');
 }

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

@@ -1,39 +1,42 @@
 /**
- * 
- * @param {Map} map 
- * @param {string} key 
- * @param {any} find 
+ *
+ * @param {Map} map
+ * @param {string} key
+ * @param {any} find
  */
 export const addToMapArray = (map, key, item) => {
-    if (map.has(key)) {
-        map.set(key, [...map.get(key), item]);
-    } else {
-        map.set(key, [item]);
-    }
-}
+	if (map.has(key)) {
+		map.set(key, [...map.get(key), item]);
+	} else {
+		map.set(key, [item]);
+	}
+};
 
 /**
- * 
- * @param {Map} map 
- * @param {string} key 
- * @param {function} findIndex 
+ *
+ * @param {Map} map
+ * @param {string} key
+ * @param {function} findIndex
  */
 export const removeFromMapArray = (map, key, findIndex) => {
-    if (map.has(key)) {
-        const items = map.get(key);
-        const index = items.findIndex(findIndex);
+	if (map.has(key)) {
+		const items = map.get(key);
+		const index = items.findIndex(findIndex);
 
-        if (index >= 0) {
-            const newItems = [...items];
-            newItems.splice(index, 1);
+		if (index >= 0) {
+			const newItems = [...items];
+			newItems.splice(index, 1);
 
-            if (newItems.length > 0) {
-                map.set(key, newItems);
-            } else {
-                map.delete(key);
-            }
-        }
-    } else {
-        console.error(`removeFromMapArray: key ${key} doesn't exist in Map.`, map);
-    }
+			if (newItems.length > 0) {
+				map.set(key, newItems);
+			} else {
+				map.delete(key);
+			}
+		}
+	} else {
+		console.error(
+			`removeFromMapArray: key ${key} doesn't exist in Map.`,
+			map,
+		);
+	}
 };

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

@@ -1,23 +1,27 @@
 /**
  * Map a value from one range to another
- * @param {Number} value 
- * @param {Number} min 
- * @param {Number} max 
- * @param {Number} nmin - The new minimum 
- * @param {Number} nmax - The new maximum 
+ * @param {Number} value
+ * @param {Number} min
+ * @param {Number} max
+ * @param {Number} nmin - The new minimum
+ * @param {Number} nmax - The new maximum
  * @returns {Number} result
  */
 export function map(value, min, max, nmin, nmax) {
-    return ((value - min) / (max - min)) * (nmax - nmin) + nmin;
+	return ((value - min) / (max - min)) * (nmax - nmin) + nmin;
 }
 
 /**
  * Clamp a number between min and max
- * @param {Number} value 
- * @param {Number} min 
- * @param {Number} max 
+ * @param {Number} value
+ * @param {Number} min
+ * @param {Number} max
  * @returns {Number} result
  */
 export function clamp(value, min, max) {
-    return Math.max(min, Math.min(value, max));
+	return Math.max(min, Math.min(value, max));
+}
+
+export function roundToStep(value, step) {
+	return Math.round(value * (1 / step)) / (1 / step);
 }

package/src/client/index.html

@@ -1,18 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/css/global.css" />
-    <title>fragment</title>
-  </head>
-  <body>
-    <div class="loading">
-      <h1 class="loading__title">[fragment]</h1>
-      <span class="loading__step">▢ Loading dependencies...</span>
-    </div>
-    <div id="app"></div>
-    <script type="module" src="/main.js"></script>
-  </body>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="/css/global.css" />
+		<title>fragment</title>
+	</head>
+	<body>
+		<div class="loading">
+			<h1 class="loading__title">[fragment]</h1>
+			<span class="loading__step">▢ Loading dependencies...</span>
+		</div>
+		<div id="app"></div>
+		<script type="module" src="/main.js"></script>
+	</body>
 </html>

package/src/client/main.js

@@ -1,9 +1,9 @@
-import "./app/stores/console";
+import './app/stores/console';
 import App from './app/App.svelte';
 
 const app = new App({
-    target: document.getElementById('app'),
-    props: {},
+	target: document.getElementById('app'),
+	props: {},
 });
 
-export default app
+export default app;