fragment-tools 0.1.1 → 0.1.12

package/README.md

@@ -17,33 +17,21 @@
 
 ## Installation
 
-`fragment` is not yet available on [npmjs.com](npmjs.com) so you need to clone and link the project in order to use it. It's only a few steps.
-
 ```
-# clone the project
-git clone https://github.com/raphaelameaume/fragment
-
-# move to the project directory
-cd fragment
-
-# link the project
-npm link
+npm install fragment-tools -g
 ``` 
 
-You should now be able to run `fragment` from your command line. If you encounter any issues, you can read more about linking on [npmjs.com](https://docs.npmjs.com/cli/v8/commands/npm-link).
+You should now be able to run `fragment` from your command line.
 
 ## Usage
 
 ```
 # create a new directory for your sketches
-mkdir ../sketches
+mkdir sketches
 
 # move into that folder
 cd sketches
 
-# initialize npm for linking to work
-npm init
-
 # create a sketch from a template
 fragment ./sketch.js --new --template=2d
 ```
@@ -80,7 +68,7 @@ export let update = ({ context, width, height }) => {
 };
 ```
 
-Learn how to write your own sketch in the [API docs](./docs/api/sketch.md) or read the [examples](./examples/).
+Learn how to write your own sketch by following the [Getting started](./docs//guide/getting-started.md) guide, reading the [API docs](./docs/api/sketch.md) or the [examples](./examples/).
 
 ## Contributing
 
@@ -88,6 +76,39 @@ If you find issues, please [file one](https://github.com/raphaelameaume/fragment
 
 Feel free to reach out on [Twitter](https://twitter.com/raphaelameaume) if you want to discuss the project.
 
+## Running it locally
+
+```
+# clone or fork the project
+git clone https://github.com/raphaelameaume/fragment.git 
+
+# move to the root of the repository
+cd fragment
+
+# run the command line locally
+node ./bin/index.js examples/shape-2d.js --dev
+
+# or from your sketch folder
+node [path-to-root]/bin/index.js sketch.js --dev
+```
+
+> The `--dev` flag only enables Vite `info` logLevel, helpful for development. Otherwise it will work the same as when you're running from the npm package.
+
+Alternatively, you can tell npm to point the `fragment` command to the newly cloned folder.
+
+```
+# at the root of the repo
+npm link
+```
+
+You should be able the command as before, only this time it will point to the repository instead of the globally installed package.
+
+```
+fragment sketch.js
+```
+
+If that's not the case, try to uninstall `fragment-tools` globally first, make sure the `fragment` command is not found anymore, then retry to link the project from the root of the repo.
+
 ## Credits
 
 - [Vite](https://vitejs.dev/)

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.1",
+  "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/modules/Params.svelte

@@ -92,8 +92,8 @@ $: showOutputParams = (monitor && monitor.selected === "output") ||
                     context={sketchKey}
                     key={key}
                     value={sketchProps[key].value}
-                    params={sketchProps[key].params || {}}
                     type={sketchProps[key].type}
+                    bind:params={sketchProps[key].params}
                     on:click={() => {
                         $props[sketchKey][key].value._refresh = true;
                     }}

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/props.js

@@ -4,41 +4,43 @@ import { sketches } from "./sketches";
 export const props = writable({});
 
 sketches.subscribe((sketches) => {
-	const $props = get(props);
+	props.update((currentProps) => {
+		Object.keys(sketches).forEach((key) => {
+			const sketch = sketches[key];
 
-	Object.keys(sketches).forEach((key) => {
-		const sketch = sketches[key];
-
-		if (sketch) { // sketch can be undefined if failed to load
-			$props[key] = reconcile(sketch.props, $props[key]);
-		}
+			if (sketch) { // sketch can be undefined if failed to load
+				currentProps[key] = reconcile(sketch.props, currentProps[key]);
+			}
+		});
 
+		return currentProps;
 	});
-
-	props.set($props);
 });
 
-function reconcile(newProps = {}, existingProps = {}) {
-	Object.keys(newProps).forEach(propKey => {
-		newProps[propKey]._initialValue = newProps[propKey].value;
+function reconcile(newProps = {}, prevProps = {}) {
+	Object.keys(newProps).forEach((propKey) => {
+		let newProp = newProps[propKey];
+
+		if (!newProp.params) {
+			newProp.params = {};
+		}
 	});
 
-	if (existingProps) {
-		Object.keys(existingProps).forEach((propKey) => {
+	if (prevProps) {
+		Object.keys(prevProps).forEach((propKey) => {
+			let prevProp = prevProps[propKey];
 			let newProp = newProps[propKey];
 
 			if (newProp) {
-				let prevProp = existingProps[propKey];
-				let overrideValue = 
-					typeof prevProp._initialValue === "number" && 
-					prevProp._initialValue === newProp._initialValue;
-
-				if (overrideValue) {
-					newProp.value = prevProp.value;
+				if (prevProp.params) {
+					// reconcile locked VectorInput from UI
+					if (prevProp.params.locked !== undefined) {
+						newProp.params.locked = prevProp.params.locked;
+					}
 				}
 			}
 		});
-	};
+	}
 
 	return newProps;
 }

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];
+        const keys = Array.isArray(key) ? key : [...key.split(',').map(k => k !== " " ? k.trim() : k)];
         
         const trigger = new Trigger({
             inputType: 'Keyboard',

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

@@ -78,7 +78,11 @@ function createTrigger(eventName, collection) {
         }
 
         const { hot, enabled, ...params } = options;
-        const keys = Array.isArray(key) ? key : [key];
+        let keys = Array.isArray(key) ? key : [...key.split(',').map(k => k.trim())];
+
+        if (["onControlChange", "onNumberOn", "onNumberOff"].includes(eventName)) {
+            keys = keys.map((k) => Number(k));
+        }
 
         if (!MIDI.enabled) {
             MIDI.request();

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/Field.svelte

@@ -4,8 +4,7 @@ import { createEventDispatcher } from "svelte";
 import Select from "./fields/Select.svelte";
 import NumberInput from "./fields/NumberInput.svelte";
 import CheckboxInput from "./fields/CheckboxInput.svelte";
-import Vec2Input from "./fields/Vec2Input.svelte";
-import Vec3Input from "./fields/Vec3Input.svelte";
+import VectorInput from "./fields/VectorInput.svelte";
 import TextInput from "./fields/TextInput.svelte";
 import ColorInput from "./fields/ColorInput.svelte";
 import ListInput from "./fields/ListInput.svelte";
@@ -20,7 +19,7 @@ import frameDebounce from "../lib/helpers/frameDebounce.js";
 import { getStore } from "../stores/utils";
 import { writable } from "svelte/store";
 
-export let key = '';
+export let key = "";
 export let value = null;
 export let context = null;
 export let params = {};
@@ -50,8 +49,7 @@ const dispatch = createEventDispatcher();
 const fields = {
     "select": Select,
     "number": NumberInput,
-    "vec2": Vec2Input,
-    "vec3": Vec3Input,
+    "vec": VectorInput,
     "checkbox": CheckboxInput,
     "text": TextInput,
     "list": ListInput,
@@ -120,7 +118,11 @@ function toggleTriggers(event) {
 function composeFieldProps(params) {
     const { triggerable, controllable, ...rest } = params;
 
-    return rest;
+    return {
+        ...rest,
+        key,
+        context,
+    };
 }
 
 </script>
@@ -149,7 +151,7 @@ function composeFieldProps(params) {
                     </svg>
                 </button>
             {/if}
-            {#if (fieldType === "vec2" || fieldType === "vec3") && !disabled }
+            {#if (fieldType === "vec") && !disabled }
                 <button class="field__action field__action--lock" on:click={() => params.locked = !params.locked}>
                     {#if params.locked}
                     <svg class="action__icon" width="16" height="16" fill="none" viewBox="0 0 24 24">
@@ -200,11 +202,13 @@ function composeFieldProps(params) {
 
 :global(.field__input .field) {
     padding-left: 0px !important;
+    padding-right: 0px !important;
 }
 
 :global(.field__input .field:last-child) {
     border-bottom: 0px solid #323233 !important;
     padding-bottom: 0px !important;
+    
 }
 
 .field.disabled {

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

@@ -72,7 +72,7 @@ function onTypeChange(event) {
 
     if (!eventOptions.includes(eventName)) {
         eventName = undefined;
-        key = null;
+        params.key = null;
     }
 
     if (trigger) {
@@ -82,19 +82,24 @@ function onTypeChange(event) {
 }
 
 function onEventChange(event) {
+    const clearParams = (inputType === "MIDI" && eventName !== undefined &&
+        ((eventName.includes("Number") && event.detail.includes("Note")) ||
+        (eventName.includes("Note") && event.detail.includes("Number")))
+    );
+
     eventName = event.detail;
 
+    if (clearParams) {
+        params.key = "";
+    }
+
     if (inputType === "Mouse") {
         registerTrigger();
     }
 }
 
 function onTextChange(e) {
-    const castToNumber = ["onControlChange", "onNumberOn", "onNumberOff"].includes(eventName);
-
-    params.key = e.detail.split(',').map((value) => {
-        return castToNumber ? Number(value) : value;
-    });
+    params.key = e.detail;
 
     registerTrigger();
 }
@@ -153,7 +158,7 @@ $: eventOptions = inputType ? [
 ] : [];
 
 $: isValid = inputType && eventName;
-$: key = params.key && params.key.length ? params.key.join(',') : "";
+$: key = params.key;
 
 </script>