fragment-tools 0.1.11 → 0.1.12

package/bin/index.js

@@ -11,6 +11,7 @@ sade('fragment [entry]')
     .option('-p, --port', 'Port to bind', 3000)
     .option('-dev, --development', 'Enable development mode', false)
     .option('-b, --build', 'Build sketch for production', false)
+    .option('--exportDir', 'Directory used for exports', process.cwd())
     .option('--outDir', 'Directory used for static build', null)
     .option('--emptyOutDir', "Empty outDir before static build", false)
     .action((entry, options) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {

package/src/cli/plugins/screenshot.js

@@ -1,26 +1,41 @@
 import path from "path";
-import fs from "fs";
+import fs from "fs/promises";
+import fsSync from "fs";
 import bodyParser from "body-parser";
+import log from "../log.js";
+
+export default function screenshot({ cwd, exportDir = cwd }) {
+	let dir = (path.isAbsolute(exportDir) ? exportDir : path.join(cwd, exportDir));
 
-export default function screenshot({ cwd }) {
 	return {
 		name: 'screenshot',
 		configureServer(server){
 			server.middlewares.use(bodyParser.json({ limit: '100mb'}))
-			server.middlewares.use('/save', (req, res, next) => {
+			server.middlewares.use('/save', async (req, res, next) => {
 				if (req.method === "POST") {
 					const { filename, dataURL } = req.body;
 
-					const filepath = path.join(cwd, filename);
+					const filepath = path.join(dir, filename);
 					const buffer = Buffer.from(dataURL, 'base64');
 
-					fs.writeFile(filepath, buffer, (error) => {
-						let statusCode = error ? 500 : 200;
-						let body = error ? { error } : { filepath };
+					if (!fsSync.existsSync(dir)) {
+						try {
+							await fs.mkdir(dir, { recursive: true });
+						} catch(error) {
+							log.error('Cannot create directory for exports');
+							console.log(error);
+						}
+					}
+
+					try {
+						await fs.writeFile(filepath, buffer);
 
-						res.writeHead(statusCode, {'Content-Type': 'application/json'});
-						res.end(JSON.stringify(body));
-					});
+						res.writeHead(200, {'Content-Type': 'application/json'});
+						res.end(JSON.stringify({ filepath }));
+					} catch(error) {
+						res.writeHead(500, {'Content-Type': 'application/json'});
+						res.end(JSON.stringify({ error }));
+					}
 				} else {
 					next();
 				}

package/src/cli/server.js

@@ -62,7 +62,7 @@ export async function start({ options, filepaths, entries, fragment }) {
                 }
             },
             dbPlugin(),
-            screenshotPlugin({ cwd }),
+            screenshotPlugin({ cwd, exportDir: options.exportDir }),
             checkDependencies({
                 cwd,
                 app,
@@ -83,7 +83,9 @@ export async function start({ options, filepaths, entries, fragment }) {
             '__FRAGMENT_PORT__': fragment.server ? fragment.server.port : undefined,
             '__START_TIME__': Date.now(),
             '__SEED__': Date.now(),
-            '__PRODUCTION__': options.build,
+            '__BUILD__': options.build,
+            '__DEV__': !options.build,
+
         },
         optimizeDeps: {
             include: ['convert-length', 'webm-writer', 'changedpi'],
@@ -128,18 +130,7 @@ export async function start({ options, filepaths, entries, fragment }) {
 
         await server.listen();
         log.success(`Server started at:`);
-
-        Object.values(os.networkInterfaces())
-            .flatMap((nInterface) => nInterface ?? [])
-            .filter((detail) => detail && detail.address && (detail.family === 'IPv4' || detail.family === 4 ))
-            .forEach((detail) => {
-                const type = detail.address.includes('127.0.0.1')
-                ? 'Local:   '
-                : 'Network: '
-                const host = detail.address.replace('127.0.0.1', 'localhost');
-                const url = `http://${host}:${server.config.server.port}`;
-                console.log(`   ${type} ${url}`);
-            })
+        server.printUrls();
 
         return server;
     }

package/src/cli/templates/blank.js

@@ -0,0 +1,13 @@
+export let props = {};
+
+export let init = ({ canvas, width, height }) => {
+
+};
+
+export let update = ({ width, height, time, deltaTime }) => {
+	
+};
+
+export let resize = ({ width, height, pixelRatio }) => {
+
+};

package/src/cli/templates/index.js

@@ -1,4 +1,7 @@
 const templates = {
+	"blank": [
+		"./templates/blank.js"
+	],
 	"2d": [
 		"./templates/2d.js"
 	],

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

@@ -49,7 +49,7 @@ class CanvasRecorder {
 	}
 
 	async _tick() {
-		console.log(`CanvasRecorder - render frame ${this.frameCount}`);
+		console.log(`CanvasRecorder - render frame ${this.frameCount + 1}`);
 		this.onTick({
 			time: this.time,
 			deltaTime: this.deltaTime,
@@ -61,14 +61,14 @@ class CanvasRecorder {
 			frameCount: this.frameCount,
 		});
 
-		if (this.started && !this.stopped && (!isFinite(this.frameTotal) || (isFinite(this.frameTotal) && this.frameCount < this.frameTotal))) {
+		if (this.started && !this.stopped && (!isFinite(this.frameTotal) || (isFinite(this.frameTotal) && this.frameCount < this.frameTotal - 1))) {
 			this.time += this.deltaTime;
         	this.frameCount++;
             requestAnimationFrame(() => {
 				this._tick()
 			});
         } else {
-			console.log(`CanvasRecorder - compiling ${this.frameCount} frames...`);
+			console.log(`CanvasRecorder - compiling ${this.frameCount + 1} frames...`);
             this.end();
         }
 	}
@@ -76,7 +76,7 @@ class CanvasRecorder {
 	tick() {}
 
 	end() {
-		console.log(`CanvasRecorder - compiled ${this.frameCount} frames`);
+		console.log(`CanvasRecorder - compiled ${this.frameCount + 1} frames`);
 		this.onComplete(this.result);
 	}
 

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

@@ -20,7 +20,7 @@ export const exports = createStore(`exports`, {
 	imageQuality: 100,
 	videoQuality: 100,
 }, {
-	persist: !__PRODUCTION__,
+	persist: !__BUILD__,
 	reset: false,
 });
 

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

@@ -3,7 +3,7 @@ import { getStore, createStore } from "./utils";
 import { onMount } from "svelte";
 
 export const tree = getStore("layout.current", {}, {
-    persist: !__PRODUCTION__
+    persist: !__BUILD__
 });
 
 export const layout = createStore('layout', {

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

@@ -1,16 +1,16 @@
 import { createStore } from "./utils";
 
 export const multisampling = createStore("multisampling", [], {
-	persist: !__PRODUCTION__,
+	persist: !__BUILD__,
 	reset: true,
 });
 
 export const threshold = createStore("threshold", 0, {
-	persist: !__PRODUCTION__,
+	persist: !__BUILD__,
 	reset: false,
 });
 
 export const transition = createStore("transition", false, {
-	persist: !__PRODUCTION__,
+	persist: !__BUILD__,
 	reset: false,
 });

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

@@ -2,7 +2,7 @@ import { rendering } from "./rendering";
 
 export let renderers = {};
 
-function loadRenderer(renderingMode = "2d") {
+function loadRenderer(renderingMode) {
 	if (__THREE_RENDERER__ && renderingMode === "three") {
 		return import("../renderers/THREERenderer.js");
 	}
@@ -20,7 +20,7 @@ function loadRenderer(renderingMode = "2d") {
 	}
 }
 
-export async function findRenderer(renderingMode = "2d") {
+export async function findRenderer(renderingMode) {
 	if (renderers[renderingMode]) return renderers[renderingMode];
 
 	// load and save
@@ -30,31 +30,33 @@ export async function findRenderer(renderingMode = "2d") {
 	let renderer = renderers[renderingMode];
 	let initialized = false;
 
-	rendering.subscribe((current) => {
-		let r;
+	if (renderer) {
+		rendering.subscribe((current) => {
+			let r;
+
+			if (!initialized) {
+				if (typeof renderer.init === "function") {
+					r = renderer.init({
+						canvas: document.createElement('canvas'),
+						pixelRatio: current.pixelRatio,
+						width: current.width,
+						height: current.height,
+					});
+				}
+			}
 
-		if (!initialized) {
-			if (typeof renderer.init === "function") {
-				r = renderer.init({
-					canvas: document.createElement('canvas'),
-					pixelRatio: current.pixelRatio,
+			initialized = true;
+
+			if (typeof renderer.resize === "function") {
+				renderer.resize({
 					width: current.width,
 					height: current.height,
+					pixelRatio: current.pixelRatio,
+					...r,
 				});
 			}
-		}
-
-		initialized = true;
-
-		if (typeof renderer.resize === "function") {
-			renderer.resize({
-				width: current.width,
-				height: current.height,
-				pixelRatio: current.pixelRatio,
-				...r,
-			});
-		}
-	});
+		});
+	}
 
 	return renderer;
 }

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

@@ -20,7 +20,7 @@ export const rendering = createStore(`rendering`, {
     scale: 1,
     preset: 'a4',
 }, {
-    persist: !__PRODUCTION__,
+    persist: !__BUILD__,
     reset: false, 
 });
 

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

@@ -3,7 +3,7 @@ import { displayError } from "../stores/errors";
 import { sketches as all, onSketchReload } from "@fragment/sketches";
 
 export const sketches = createStore('sketches', {});
-export const sketchesKeys = createStore('sketchesKeys', []);
+export const sketchesKeys = createStore('sketchesKeys', Object.keys(all));
 export const sketchesCount = createStore('sketchesCount', 0);
 
 async function loadSketch(collection, key) {

package/src/client/app/triggers/Keyboard.js

@@ -61,7 +61,7 @@ function createTrigger(eventName, collection) {
         const { hot, enabled, ...params } = options;
         const context = getContext();
 
-        const keys = Array.isArray(key) ? key : [...key.split(',').map(k => k.trim())];
+        const keys = Array.isArray(key) ? key : [...key.split(',').map(k => k !== " " ? k.trim() : k)];
         
         const trigger = new Trigger({
             inputType: 'Keyboard',

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

@@ -22,37 +22,40 @@ let defaultGUIConfig = {
 };
 
 let guiConfig = defaultGUIConfig;
-$: sketchKey = ($layout.previewing && $preview) ? $preview : sketchesKeys[0];
+$: sketchKey = ($layout.previewing && $preview) ? $preview : $sketchesKeys[0];
 $: sketch = $sketches[sketchKey];
 
 $: {
-	if (sketch.buildConfig) {
-		override(sketch.buildConfig);
-	}
+	if (sketch) {
+		if (sketch.buildConfig) {
+			override(sketch.buildConfig);
+		}
 
-	const config = sketch.buildConfig ? sketch.buildConfig : {};
-	gui = config.gui;
+		const config = sketch.buildConfig ? sketch.buildConfig : {};
+		gui = config.gui;
 
-	if (gui && typeof gui === "object") {
-		guiConfig = {
-			...defaultGUIConfig,
-			...gui,
-		};
-	}
+		if (gui && typeof gui === "object") {
+			guiConfig = {
+				...defaultGUIConfig,
+				...gui,
+			};
+		}
+
+		const { styles = "" } = config;
 
-	const { styles = "" } = config;
+		if (styles !== "") {
+			head = document.getElementsByTagName('head')[0];
 
-	if (styles !== "") {
-		head = document.getElementsByTagName('head')[0];
+			if (style) {
+				head.removeChild(style);
+			}
 
-		if (style) {
-			head.removeChild(style);
+			style = document.createElement('style');
+			style.setAttribute('type', 'text/css');
+			style.appendChild(document.createTextNode(styles));
+			head.appendChild(style);
 		}
 
-		style = document.createElement('style');
-		style.setAttribute('type', 'text/css');
-		style.appendChild(document.createTextNode(styles));
-		head.appendChild(style);
 	}
 }
 

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

@@ -23,7 +23,7 @@ function togglePreview() {
 </script>
 
 <Root>
-	{#if __PRODUCTION__ || $layout.previewing }
+	{#if __BUILD__ || $layout.previewing }
 		<Build />
 	{:else}
 	<Row size={1}>
@@ -41,7 +41,7 @@ function togglePreview() {
 	</Row>
 	{/if}
 </Root>
-{#if !__PRODUCTION__}
+{#if !__BUILD__}
 	<KeyBinding key="w" on:trigger={toggleEdition} />
 	<KeyBinding key="p" on:trigger={togglePreview} />
 {/if}

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

@@ -82,7 +82,7 @@ if (parent) {
 	parent.registerChild(current);
 }
 
-if (!__PRODUCTION__) {
+if (!__BUILD__) {
 	$layout.registerChild(current, () => $children);
 }
 

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

@@ -25,6 +25,7 @@ let node, container;
 let framerate = 60;
 let elapsed = 0;
 let elapsedRenderingTime = 0;
+let now = performance.now(), then = performance.now(), dt = 0, lastTime = performance.now();
 let canvas;
 let _raf;
 let _key = key;
@@ -135,7 +136,7 @@ function destroyCanvas(canvas) {
 
 function setBackgroundColor() {
     if (sketch) {
-        if (($layout.previewing || __PRODUCTION__) && sketch.buildConfig && sketch.buildConfig.backgroundColor) {
+        if (($layout.previewing || __BUILD__) && sketch.buildConfig && sketch.buildConfig.backgroundColor) {
             backgroundColor = sketch.buildConfig.backgroundColor;
         } else if (!$layout.previewing && sketch.backgroundColor) {
             backgroundColor = sketch.backgroundColor;
@@ -190,7 +191,7 @@ async function createSketch(key) {
 
     let mountParams = {};
 
-    if (typeof renderer.onMountPreview === "function") {
+    if (renderer && typeof renderer.onMountPreview === "function") {
         mountParams = renderer.onMountPreview({
             id,
             canvas,
@@ -329,29 +330,27 @@ function createRenderLoop() {
     let playcount = 0;
     let hasDuration = isFinite(duration);
 
-    let onBeforeUpdatePreview = renderer.onBeforeUpdatePreview || noop;
-    let onAfterUpdatePreview = renderer.onAfterUpdatePreview || noop;
+    let onBeforeUpdatePreview = (renderer && renderer.onBeforeUpdatePreview) || noop;
+    let onAfterUpdatePreview = (renderer && renderer.onAfterUpdatePreview) || noop;
 
     let frameLength = 1000 / framerate;
     let frameCount = framerate * duration;
     let interval = 1 / frameCount;
 
-    let then = $currentTime.time;
-
-    return ({ time = $currentTime.time, deltaTime = time - then } = {}) => {
+    return ({ time = performance.now(), deltaTime = time - lastTime } = {}) => {
         needsRender = false;
-        then = time;
+        lastTime = time;
 
         try {
             onBeforeUpdatePreview({ id, canvas }); 
 
-            let t = !$sync ? time : Math.floor(time / frameLength) * frameLength;
+            let t = !$sync ? elapsedRenderingTime : Math.floor(time / frameLength) * frameLength;
 
             if (hasDuration && framerate > 0) {
                 playhead = (t / 1000) / duration;
                 playhead %= 1;
                 playhead = Math.floor(playhead / interval) * interval;
-                playcount = Math.floor(((((elapsedRenderingTime) / 1000)) / duration));
+                playcount = Math.floor(elapsedRenderingTime / 1000 / duration);
             }
 
             draw({
@@ -360,30 +359,30 @@ function createRenderLoop() {
                 props: sketch.props,
                 playhead,
                 playcount,
-                width: width * pixelRatio,
-                height: height * pixelRatio,
+                width,
+                height,
                 pixelRatio,
                 time: t,
                 deltaTime,
             });
             onAfterUpdatePreview({ id, canvas });
+
+            elapsedRenderingTime += deltaTime;
         } catch(error) {
             onError(error);
         }
     };
 }
 
-let then = performance.now();
-
 function render() {
     _raf = requestAnimationFrame(render);
 
-    if (!paused) {
-        let now = performance.now();
-        let deltaTime = now - then;
-        then = now;
+    now = performance.now();
+    dt = now - then;
+    then = now;
 
-        elapsed += deltaTime;
+    if (!paused) {
+        elapsed += dt;
 
         if (!$sync) {
             if ((elapsed) >= ((1 / framerate) * 1000)) {
@@ -393,8 +392,8 @@ function render() {
         } else {
             _renderSketch();
         }
-
-        elapsedRenderingTime += deltaTime;
+    } else {
+        lastTime = now;
     }
 
     if (needsRender) {
@@ -440,6 +439,8 @@ rendering.subscribe((current) => {
 async function save() {
     paused = true;
 
+    _renderSketch();
+
     await screenshotCanvas(canvas, {
         filename: key,
         pattern: sketch?.filenamePattern,
@@ -480,8 +481,13 @@ function checkForPause(event) {
 
     if (!keyboardEvent.metaKey || !keyboardEvent.ctrlKey) {
         keyboardEvent.preventDefault();
-        paused = !paused;
-        then = Date.now();
+
+        if (!$recording) {
+            then = performance.now();
+            paused = !paused;
+        } else {
+            console.warn(`Cannot pause while recording.`);
+        }
     }
 }
 
@@ -490,7 +496,12 @@ function checkForSave(event) {
 
     if (keyboardEvent.metaKey || keyboardEvent.ctrlKey) {
         keyboardEvent.preventDefault();
-        save();
+
+        if (!$recording) {
+            save();
+        } else {
+            console.warn(`Cannot save while recording.`);
+        }
     }
 }
 

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

@@ -17,6 +17,7 @@ $: alpha = 1;
 $: hasAlpha = [
     color.FORMATS.RGBA_STRING,
     color.FORMATS.VEC4_STRING,
+    color.FORMATS.VEC4_ARRAY,
     color.FORMATS.RGBA_OBJECT,
     color.FORMATS.HSLA_STRING
 ].includes(format);
@@ -34,6 +35,19 @@ function dispatchChange() {
 
     // support THREE.Color
     switch (format) {
+        case color.FORMATS.VEC3_ARRAY:
+            value[0] = r;
+            value[1] = g;
+            value[2] = b;
+            dispatch('change', value);
+            break;
+        case color.FORMATS.VEC4_ARRAY:
+            value[0] = r;
+            value[1] = g;
+            value[2] = b;
+            value[3] = alpha;
+            dispatch('change', value);
+            break;
         case color.FORMATS.THREE:
         case color.FORMATS.RGB_OBJECT:
             value.r = r;

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

@@ -36,7 +36,9 @@ function onDrag(event) {
     let v = clamp(map(event.clientX, rect.left, rect.right, min, max), min, max);
     v = Math.floor(v * (1 / step)) / (1 / step);
 
-    dispatch("change", v);
+    if (v !== value) {
+        dispatch("change", v);
+    }
 }
 
 function handleMouseUp() {

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

@@ -11,34 +11,62 @@ export let context = null;
 export let key = "";
 
 let node;
-let sanitizedOptions = [];
+let sanitizedValue, sanitizedOptions = [];
 
 const dispatch = createEventDispatcher();
 
+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;
+    }
+    
+    return option.toString();
+}
+
 $: {
     sanitizedOptions = [];
     
     for (let i = 0; i < options.length; i++) {
-        const { value, label, disabled } = options[i];
-
-        if (["number", "string"].includes(typeof options[i])) {
-            sanitizedOptions[i] = {
-                value: options[i],
-                label: options[i],
-                disabled,
-            };
+        let option = options[i];
+        let optionType = typeof option;
+        let disabled = (optionType === "object" && typeof option.disabled === "boolean") ? option.disabled : false;
+        let _value = optionType === "object" ? option.value : option;
+
+        let stringifiedValue = toStringifiedValue(option);
+        let label;
+
+        if (_value === value) {
+            sanitizedValue = stringifiedValue;
+        }
+
+        if (option.label) {
+            label = option.label;
         } else {
-            sanitizedOptions[i] = {
-                value: value,
-                label: label ? label : value,
-                disabled,
-            }
+            label = stringifiedValue;
         }
+
+        sanitizedOptions[i] = {
+            label,
+            value: stringifiedValue,
+            disabled
+        };
     }
 }
 
 function handleChange(event) {
-    dispatch("change", event.currentTarget.value);
+    const index = sanitizedOptions.findIndex((opt) => opt.value === event.currentTarget.value);
+    const option = options[index]
+    const newValue = typeof option === "object" ? option.value : option;
+
+    value = newValue;
+
+    dispatch("change", newValue);
 }
 
 </script>
@@ -49,9 +77,9 @@ function handleChange(event) {
     class:single={sanitizedOptions.length === 1}
 >
     <div class="container">
-        <select class="select" bind:this={node} on:change={handleChange} {name} {disabled} {title} bind:value={value}>
+        <select class="select" bind:this={node} on:change={handleChange} {name} {disabled} {title} bind:value={sanitizedValue}>
             {#each sanitizedOptions as option}
-                <option value={option.value} selected={value === option.value} disabled={option.disabled}>{option.label}</option>
+                <option value={option.value} selected={sanitizedValue === option.value} disabled={option.disabled}>{option.label}</option>
             {/each}
         </select>
         {#if sanitizedOptions.length > 1 }

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

@@ -15,11 +15,7 @@ import { exportCanvas } from "../lib/canvas-recorder/utils";
 import { map } from "./math.utils";
 
 export async function saveDataURL(dataURL, options, blob) {
-    async function onError(err) {
-        if (typeof options.onError === "function") {
-            options.onError(err);
-        }
-
+    async function saveInBrowser() {
         if (!blob) {
             blob = await createBlobFromDataURL(dataURL);
         }
@@ -27,25 +23,37 @@ export async function saveDataURL(dataURL, options, blob) {
         await downloadBlob(blob, options);
     }
 
+    async function onError(err) {
+        if (typeof options.onError === "function") {
+            options.onError(err);
+        }
+
+        await saveInBrowser();
+    }
+
     try {
-        const body = {
-            dataURL: dataURL.split(',')[1], // remove extension,
-            ...options,
-        };
-        const response = await fetch('/save', {
-            method: "POST",
-            body: JSON.stringify(body),
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-        });
-        const { filepath, error } = await response.json();
+        if (__DEV__) {
+            const body = {
+                dataURL: dataURL.split(',')[1], // remove extension,
+                ...options,
+            };
+            const response = await fetch('/save', {
+                method: "POST",
+                body: JSON.stringify(body),
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+            });
+            const { filepath, error } = await response.json();
 
-        if (response.ok && filepath) {
-            console.log(`[fragment] Saved ${filepath}`);
+            if (response.ok && filepath) {
+                console.log(`[fragment] Saved ${filepath}`);
+            } else {
+                onError(error);
+            }
         } else {
-            onError(error);
+            await saveInBrowser();
         }
     } catch(error) {
         onError(error);

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

@@ -8,6 +8,8 @@ export const FORMATS = {
 	RGBA_OBJECT: "rgba-object",
 	VEC3_STRING: "vec3-string",
 	VEC4_STRING: "vec4-string",
+	VEC3_ARRAY: "vec3-array",
+	VEC4_ARRAY: "vec4-array",
 	THREE: "three",
 	CSS_COLOR: "css-color",
 };
@@ -22,7 +24,8 @@ export function toHex(color, format = getColorFormat(color)) {
 	if (format === FORMATS.HSL_STRING || format === FORMATS.HSLA_STRING) return hslToHex(color);
 	if (format === FORMATS.RGB_STRING || format === FORMATS.RGBA_STRING) return stringToHex(color);
 	if (format === FORMATS.RGB_OBJECT || format === FORMATS.RGBA_OBJECT) return componentsToHex([color.r, color.g, color.b, color.a]);
-	if (format === FORMATS.VEC3_STRING || format === FORMATS.VEC4_STRING) return vecToHex(color);
+	if (format === FORMATS.VEC3_STRING || format === FORMATS.VEC4_STRING) return vecStringToHex(color);
+	if (format === FORMATS.VEC3_ARRAY || format === FORMATS.VEC4_ARRAY) return vecArrayToHex(color);
 	if (format === FORMATS.CSS_COLOR) return nameToHex(color);
 }
 
@@ -36,7 +39,7 @@ export function toComponents(color, format = getColorFormat(color)) {
 	if (format === FORMATS.HSL_STRING || format === FORMATS.HSLA_STRING) return hslToComponents(color);
 	if (format === FORMATS.RGB_STRING || format === FORMATS.RGBA_STRING) return stringToComponents(color);
 	if (format === FORMATS.RGB_OBJECT || format === FORMATS.RGBA_OBJECT) return [color.r, color.g, color.b, isFinite(color.a) ? color.a : 1];
-	if (format === FORMATS.VEC3_STRING || format === FORMATS.VEC4_STRING) return vecToComponents(color);
+	if (format === FORMATS.VEC3_STRING || format === FORMATS.VEC4_STRING) return vecStringToComponents(color);
 	if (format === FORMATS.CSS_COLOR) return nameToComponents(color);
 }
 
@@ -55,6 +58,8 @@ export function toString(color, format = getColorFormat(color)) {
 		format === FORMATS.VEC4_STRING ||
 		format === FORMATS.CSS_COLOR
 	) return color;
+	if (format === FORMATS.VEC3_ARRAY) return componentsToRGBString(vecArrayToComponents(color));
+	if (format === FORMATS.VEC4_ARRAY) return componentsToRGBAString(vecArrayToComponents(color));
 	if (format === FORMATS.THREE) return threeToHex(color);
 	if (format === FORMATS.RGB_OBJECT) return componentsToRGBString([color.r, color.g, color.b])
 	if (format === FORMATS.RGBA_OBJECT) return componentsToRGBAString([color.r, color.g, color.b, color.a ? color.a : 1]);
@@ -119,7 +124,7 @@ export function stringToHex(color) {
 	return componentsToHex(stringToComponents(color));
 }
 
-export function vecToComponents(color) {
+export function vecStringToComponents(color) {
 	const match = color.match(/vec[3-4]?\((\d*(?:\.\d*?)), ?(\d*(?:\.\d*?)), ?(\d*(?:\.\d*))?(?:, ?(\d*(?:\.?\d*?))\))?/);
 
 	if (match) {
@@ -130,13 +135,33 @@ export function vecToComponents(color) {
 			match[4] ? Math.min(1, Math.max(Number(match[4]), 0)) : 1];
 	}
 
-	console.error(`color.vecToComponents :: cannot parse color`, color);
+	console.error(`color.vecStringToComponents :: cannot parse color`, color);
 
 	return [];
 }
 
-export function vecToHex(color) {
-	return componentsToHex(vecToComponents(color));
+export function vecArrayToComponents(color) {
+	if (color.every((c) => isFinite(c))) {
+		const [r, g, b, a = 1] = color;
+		return [
+			r,
+			g,
+			b,
+			a
+		];
+	}
+
+	console.error(`color.vecArrayToComponents :: cannot parse color`, color);
+
+	return [];
+}
+
+export function vecStringToHex(color) {
+	return componentsToHex(vecStringToComponents(color));
+}
+
+export function vecArrayToHex(color) {
+	return componentsToHex(vecArrayToComponents(color));
 }
 
 // https://stackoverflow.com/questions/39118528/rgb-to-hsl-conversion
@@ -436,6 +461,23 @@ export function isRGBObject(value) {
 	return false;
 }
 
+
+export function isVec3Array(value) {
+	if (Array.isArray(value)) {
+		return value.length == 3 && value.every(c => c >= 0 && c <= 1);
+	}
+
+	return false;
+}
+
+export function isVec4Array(value) {
+	if (Array.isArray(value)) {
+		return value.length == 4 && value.every(c => c >= 0 && c <= 1);
+	}
+
+	return false;
+}
+
 export function isCSSColor(value, isString = typeof value === "string") {
 	const components = isString && nameToComponents(value);
 
@@ -480,6 +522,8 @@ export function getColorFormat(value) {
 	if (isRGBAObject(value)) return FORMATS.RGBA_OBJECT;
 	if (isVec3String(value)) return FORMATS.VEC3_STRING;
 	if (isVec4String(value)) return FORMATS.VEC4_STRING;
+	if (isVec3Array(value)) return FORMATS.VEC3_ARRAY;
+	if (isVec4Array(value)) return FORMATS.VEC4_ARRAY;
 	if (isHSLAString(value)) return FORMATS.HSLA_STRING;
 	if (isHSLString(value)) return FORMATS.HSL_STRING;
 	if (isCSSColor(value)) return FORMATS.CSS_COLOR;

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

@@ -1,5 +1,5 @@
 export function createBlobFromDataURL(dataURL) {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
         const splitIndex = dataURL.indexOf(',');
 
         if (splitIndex === -1) {