fragment-tools 0.1.13 → 0.1.14

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

@@ -1,17 +1,16 @@
-import Input from "./Input";
+import Input from './Input';
 
 const commands = {
-	0x8: "noteoff",
-	0x9: "noteon",
-	0xB: "controlchange",
+	0x8: 'noteoff',
+	0x9: 'noteon',
+	0xb: 'controlchange',
 };
 
-const notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
 
-const LOCAL_STORAGE_KEY = "midi.requested";
+const LOCAL_STORAGE_KEY = 'midi.requested';
 
 class MIDI extends Input {
-
 	constructor() {
 		super();
 
@@ -42,25 +41,25 @@ class MIDI extends Input {
 
 		if (this.inputs.size === 1) {
 			const [entry] = this.inputs.values();
-			const { id } = entry; 
+			const { id } = entry;
 
 			this.selectedInputID = id;
 		}
 
 		if (this.outputs.size === 1) {
 			const [entry] = this.outputs.values();
-			const { id } = entry; 
+			const { id } = entry;
 
 			this.selectedOutputID = id;
 		}
 	}
 
 	attachListeners() {
-		this.inputs.forEach(entry => {
+		this.inputs.forEach((entry) => {
 			entry.onmidimessage = (event) => {
 				this.onMessage(event);
 			};
-		})
+		});
 	}
 
 	addEventListener(eventName, fn) {
@@ -76,14 +75,14 @@ class MIDI extends Input {
 		let type = commands[command];
 
 		let channel = (event.data[0] & 0xf) + 1;
-    	let data1 = event.data[1]
+		let data1 = event.data[1];
 		let data2 = event.data[2];
 
 		let note = {
 			number: data1,
 			name: notes[data1 % 12],
 		};
-		
+
 		let velocity = data2 / 127;
 		let rawVelocity = data2;
 
@@ -117,7 +116,7 @@ class MIDI extends Input {
 		if (this.listeners.has(eventName)) {
 			const listeners = this.listeners.get(eventName);
 
-			listeners.forEach(listener => listener(data));
+			listeners.forEach((listener) => listener(data));
 		}
 	}
 
@@ -135,7 +134,7 @@ class MIDI extends Input {
 				this.requesting = false;
 				this.start();
 			}
-		} catch(error) {
+		} catch (error) {
 			this.handleError(error);
 		}
 	}

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

@@ -1,15 +1,17 @@
 let noop = () => {};
 
 class CanvasRecorder {
-
-	constructor(canvas, {
-		duration = Infinity,
-		framerate = 25,
-		quality = 100,
-		onStart = noop,
-		onTick = noop,
-		onComplete = noop,
-	}) {
+	constructor(
+		canvas,
+		{
+			duration = Infinity,
+			framerate = 25,
+			quality = 100,
+			onStart = noop,
+			onTick = noop,
+			onComplete = noop,
+		},
+	) {
 		this.canvas = canvas;
 		this.framerate = framerate;
 		this.duration = duration;
@@ -19,10 +21,12 @@ class CanvasRecorder {
 		this.onComplete = onComplete;
 
 		this.time = 0;
-		this.deltaTime = (1000 / this.framerate);
+		this.deltaTime = 1000 / this.framerate;
 
-		this.frameDuration = (1000 / this.framerate);
-		this.frameTotal = isFinite(duration) ? this.duration * this.framerate : Infinity;
+		this.frameDuration = 1000 / this.framerate;
+		this.frameTotal = isFinite(duration)
+			? this.duration * this.framerate
+			: Infinity;
 		this.started = false;
 		this.stopped = false;
 	}
@@ -39,7 +43,15 @@ class CanvasRecorder {
 			return;
 		}
 
-		console.log(`CanvasRecorder - start rendering ${this.frameTotal} frames at ${this.framerate}fps for ${this.duration}s.`);
+		if (isFinite(this.frameTotal)) {
+			console.log(
+				`CanvasRecorder - start rendering ${this.frameTotal} frames at ${this.framerate}fps for ${this.duration}s.`,
+			);
+		} else {
+			console.log(
+				`CanvasRecorder - start rendering at ${this.framerate}fps.`,
+			);
+		}
 
 		this.frameCount = 0;
 		this.started = true;
@@ -61,16 +73,24 @@ class CanvasRecorder {
 			frameCount: this.frameCount,
 		});
 
-		if (this.started && !this.stopped && (!isFinite(this.frameTotal) || (isFinite(this.frameTotal) && this.frameCount < this.frameTotal - 1))) {
+		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()
+			this.frameCount++;
+			requestAnimationFrame(() => {
+				this._tick();
 			});
-        } else {
-			console.log(`CanvasRecorder - compiling ${this.frameCount + 1} frames...`);
-            this.end();
-        }
+		} else {
+			console.log(
+				`CanvasRecorder - compiling ${this.frameCount + 1} frames...`,
+			);
+			this.end();
+		}
 	}
 
 	tick() {}

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

@@ -1,160 +1,148 @@
 class Renderer {
-  constructor({
-    canvas = document.createElement("canvas"),
-    antialias = false,
-    alpha = true,
-    depth = false,
-    stencil = false,
-    premultipliedAlpha = false,
-    pixelRatio = window.devicePixelRatio,
-    webgl = 2,
-  }) {
-    let gl;
-    let attributes = {
-      depth,
-      stencil,
-      antialias,
-      alpha,
-      premultipliedAlpha,
-      preserveDrawingBuffer: true,
-    };
-
-    this.canvas = canvas;
-
-    if (webgl === 2) gl = canvas.getContext("webgl2", attributes);
-    if (!gl) {
-      gl =
-        canvas.getContext("webgl", attributes) ||
-        canvas.getContext("experimental-webgl", attributes);
-    }
 
-    this.gl = gl;
-
-    this.state = {
-      activeTextureUnit: 0,
-      textureUnits: [],
-      flipY: false,
-      viewport: { width: 0, height: 0 },
-      pixelRatio,
-      width: 0,
-      height: 0,
-    };
-    this.gl.state = this.state;
-  }
-
-  render({
-    geometry,
-    program,
-    primitiveType = this.gl.TRIANGLES,
-    offset = 0,
-    count = 3,
-  }) {
-    if (program.needsUpdate) {
-      program.compile();
-    }
+	constructor({
+		canvas = document.createElement('canvas'),
+		antialias = false,
+		alpha = true,
+		depth = false,
+		stencil = false,
+		premultipliedAlpha = false,
+		pixelRatio = window.devicePixelRatio,
+		webgl = 2,
+	}) {
+		let gl;
+		let attributes = {
+			depth,
+			stencil,
+			antialias,
+			alpha,
+			premultipliedAlpha,
+			preserveDrawingBuffer: true
+		};
+
+		this.canvas = canvas;
+
+		if (webgl === 2) gl = canvas.getContext('webgl2', attributes);
+		if (!gl) {
+			gl = canvas.getContext('webgl', attributes) || canvas.getContext('experimental-webgl', attributes);
+		}
+
+		this.gl = gl;
+
+		this.state = {
+			activeTextureUnit: 0,
+			textureUnits: [],
+			flipY: false,
+			viewport: { width: 0, height: 0 },
+			pixelRatio,
+			width: 0,
+			height: 0,
+		};
+		this.gl.state = this.state;
+	}
+
+    render({
+        geometry,
+        program,
+        primitiveType = this.gl.TRIANGLES,
+        offset = 0,
+        count = 3
+    }) {
+        if (program.needsUpdate) {
+            program.compile();
+        }
 
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-
-    this.gl.useProgram(program._program);
-
-    for (let attributeName in program.attributesLocations) {
-      let location = program.attributesLocations[attributeName];
-      let buffer = geometry.buffers[attributeName];
-
-      this.gl.enableVertexAttribArray(location);
-      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
-
-      const size = 2; // 2 components per iteration
-      const type = this.gl.FLOAT; // the data is 32bit floats
-      const normalize = false; // don't normalize the data
-      const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
-      const bufferOffset = 0; // start at the beginning of the buffer
-      this.gl.vertexAttribPointer(
-        location,
-        size,
-        type,
-        normalize,
-        stride,
-        bufferOffset
-      );
-    }
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+
+        this.gl.useProgram(program._program);
+
+        for (let attributeName in program.attributesLocations) {
+            let location = program.attributesLocations[attributeName];
+            let buffer = geometry.buffers[attributeName];
+
+            this.gl.enableVertexAttribArray(location);
+            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+
+            const size = 2; // 2 components per iteration
+            const type = this.gl.FLOAT; // the data is 32bit floats
+            const normalize = false; // don't normalize the data
+            const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
+            const bufferOffset = 0; // start at the beginning of the buffer
+            this.gl.vertexAttribPointer(
+                location,
+                size,
+                type,
+                normalize,
+                stride,
+                bufferOffset
+            );
+        }
 
-    let textureUnit = -1;
-
-    for (let uniformName in program.uniforms) {
-      let location = program.uniformsLocations[uniformName];
-      if (location) {
-        let uniform = program.uniforms[uniformName];
-
-        if (uniform.type === "float") {
-          this.gl.uniform1f(location, uniform.value);
-        } else if (uniform.type === "vec2") {
-          this.gl.uniform2f(location, uniform.value[0], uniform.value[1]);
-        } else if (uniform.type === "vec3") {
-          this.gl.uniform3f(
-            location,
-            uniform.value[0],
-            uniform.value[1],
-            uniform.value[2]
-          );
-        } else if (uniform.type === "vec4") {
-          this.gl.uniform4f(
-            location,
-            uniform.value[0],
-            uniform.value[1],
-            uniform.value[2],
-            uniform.value[3]
-          );
-        } else if (uniform.type === "sampler2D") {
-          if (uniform.value) {
-            textureUnit = textureUnit + 1;
-            uniform.value.update(textureUnit);
-
-            this.gl.uniform1i(location, textureUnit);
-          }
+        let textureUnit = -1;
+
+        for (let uniformName in program.uniforms) {
+            let location = program.uniformsLocations[uniformName];
+            if (location) {
+                let uniform = program.uniforms[uniformName];
+
+                if (uniform.type === 'float') {
+                    this.gl.uniform1f(location, uniform.value);
+                } else if (uniform.type === 'vec2') {
+                    this.gl.uniform2f(location, uniform.value[0], uniform.value[1]);
+                } else if (uniform.type === 'vec3') {
+                    this.gl.uniform3f(location, uniform.value[0], uniform.value[1], uniform.value[2]);
+                } else if (uniform.type === 'vec4') {
+                    this.gl.uniform4f(location, uniform.value[0], uniform.value[1], uniform.value[2], uniform.value[3]);
+                } else if (uniform.type === 'sampler2D') {
+                    if (uniform.value) {
+                        textureUnit = textureUnit + 1;
+                        uniform.value.update(textureUnit);
+    
+                        this.gl.uniform1i(location, textureUnit);
+                    }
+                }
+            }
         }
-      }
-    }
 
-    this.gl.drawArrays(primitiveType, offset, count);
-  }
+        this.gl.drawArrays(primitiveType, offset, count);
+    }
 
-  setPixelRatio(pixelRatio = this.state.pixelRatio) {
-    if (this.state.pixelRatio !== pixelRatio) {
-      this.state.pixelRatio = pixelRatio;
-      this.setSize();
+    setPixelRatio(pixelRatio = this.state.pixelRatio) {
+        if (this.state.pixelRatio !== pixelRatio) {
+            this.state.pixelRatio = pixelRatio;
+        	this.setSize();
+        }
     }
-  }
 
-  setSize({ width = this.state.width, height = this.state.height } = {}) {
-    this.state.width = width;
-    this.state.height = height;
+    setSize({ width = this.state.width, height = this.state.height } = {}) {
+        this.state.width = width;
+        this.state.height = height;
 
-    this.canvas.width = this.state.width * this.state.pixelRatio;
-    this.canvas.height = this.state.height * this.state.pixelRatio;
+        this.canvas.width = this.state.width * this.state.pixelRatio;
+        this.canvas.height = this.state.height * this.state.pixelRatio;
 
-    this.setViewport();
-  }
+        this.setViewport();
+    }
 
-  setViewport({ width = this.state.width, height = this.state.height } = {}) {
-    let w = Math.floor(width * this.state.pixelRatio);
-    let h = Math.floor(height * this.state.pixelRatio);
+    setViewport({ width = this.state.width, height = this.state.height } = {}) {
+        let w = Math.floor(width * this.state.pixelRatio);
+        let h = Math.floor(height * this.state.pixelRatio);
 
-    if (this.state.viewport.width !== w || this.state.viewport.height !== h) {
-      this.gl.viewport(0, 0, w, h);
+        if (this.state.viewport.width !== w || this.state.viewport.height !== h) {
+            this.gl.viewport(0, 0, w, h);
 
-      this.state.viewport.width = w;
-      this.state.viewport.height = h;
+            this.state.viewport.width = w;
+            this.state.viewport.height = h;
+        }
     }
-  }
 
-  destroy() {
-    let extension = this.gl.getExtension("WEBGL_lose_context");
+    destroy() {
+        let extension = this.gl.getExtension('WEBGL_lose_context');
 
-    if (extension) {
-      extension.loseContext();
+        if (extension) {
+            extension.loseContext();
+        }
     }
-  }
 }
 
 export default Renderer;

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

@@ -1,26 +1,30 @@
 <script>
-import Module from "../ui/Module.svelte";
-import Field from "../ui/Field.svelte";
-import FieldGroup from "../ui/FieldGroup.svelte";
-import { exports } from "../stores";
-import { recording, capturing, IMAGE_ENCODINGS, VIDEO_FORMATS } from "../stores/exports";
+	import Module from '../ui/Module.svelte';
+	import Field from '../ui/Field.svelte';
+	import FieldGroup from '../ui/FieldGroup.svelte';
+	import { exports } from '../stores';
+	import {
+		recording,
+		capturing,
+		IMAGE_ENCODINGS,
+		VIDEO_FORMATS,
+	} from '../stores/exports';
 
-export let mID;
-export let hasHeader = true;
+	export let mID;
+	export let hasHeader = true;
 
-const LABEL_RECORD = "start";
-const LABEL_RECORDING = "stop";
+	const LABEL_RECORD = 'start';
+	const LABEL_RECORDING = 'stop';
 
-function record () {
-	$recording = !$recording;
-}
+	function record() {
+		$recording = !$recording;
+	}
 
-function capture() {
-	$capturing = !$capturing;
-}
-
-$: recordLabel = $recording ? LABEL_RECORDING : LABEL_RECORD;
+	function capture() {
+		$capturing = !$capturing;
+	}
 
+	$: recordLabel = $recording ? LABEL_RECORDING : LABEL_RECORD;
 </script>
 
 <Module {mID} {hasHeader} name="exports">
@@ -29,72 +33,87 @@ $: recordLabel = $recording ? LABEL_RECORDING : LABEL_RECORD;
 			key="encoding"
 			value={$exports.imageEncoding}
 			params={{ options: IMAGE_ENCODINGS }}
-			on:change={((e) => {
+			on:change={(e) => {
 				$exports.imageEncoding = e.detail;
-			})}
+			}}
 		/>
 		<Field
 			key="quality"
 			value={$exports.imageQuality}
-			params={{ min: 1, max: 100, suffix: "%", triggerable: false }}
-			on:change={((e) => {
+			params={{ min: 1, max: 100, suffix: '%', triggerable: false }}
+			on:change={(e) => {
 				$exports.imageQuality = e.detail;
-			})}
+			}}
 		/>
 		<Field
 			key="pixelsPerInch"
 			value={$exports.pixelsPerInch}
 			params={{ step: 1 }}
-			on:change={((e) => {
+			on:change={(e) => {
 				$exports.pixelsPerInch = e.detail;
-			})}
+			}}
+		/>
+		<Field
+			key="count"
+			value={$exports.imageCount || 1}
+			params={{ step: 1 }}
+			on:change={(e) => {
+				console.log(e.detail, $exports.imageCount);
+				$exports.imageCount = e.detail;
+			}}
 		/>
 		<Field
 			key="screenshot"
 			value={capture}
-			params={{ label: "capture", triggerable: false }}
+			params={{ label: 'capture', triggerable: false }}
 		/>
 	</FieldGroup>
 	<FieldGroup name="video">
 		<Field
 			key="framerate"
 			value={$exports.framerate}
-			on:change={((e) => {
+			on:change={(e) => {
 				$exports.framerate = e.detail;
-			})}
+			}}
 		/>
 		<Field
 			key="format"
 			value={$exports.videoFormat}
 			params={{ options: Object.values(VIDEO_FORMATS) }}
-			on:change={((e) => {
+			on:change={(e) => {
 				$exports.videoFormat = e.detail;
-			})}
+			}}
 		/>
 		<Field
 			key="quality"
 			value={$exports.videoQuality}
-			params={{ min: 1, max: 100, step: 1, suffix: "%", triggerable: false }}
-			on:change={((e) => {
+			params={{
+				min: 1,
+				max: 100,
+				step: 1,
+				suffix: '%',
+				triggerable: false,
+			}}
+			on:change={(e) => {
 				$exports.videoQuality = e.detail;
-			})}
+			}}
 		/>
 		<Field
 			key="useDuration"
 			value={$exports.useDuration}
-			on:change={((e) => {
+			on:change={(e) => {
 				$exports.useDuration = e.detail;
-			})}
-		/>
-		{#if $exports.useDuration }
-		<Field
-			key="loopCount"
-			value={$exports.loopCount}
-			params={{ step: 1 }}
-			on:change={((e) => {
-				$exports.loopCount = e.detail;
-			})}
+			}}
 		/>
+		{#if $exports.useDuration}
+			<Field
+				key="loopCount"
+				value={$exports.loopCount}
+				params={{ step: 1 }}
+				on:change={(e) => {
+					$exports.loopCount = e.detail;
+				}}
+			/>
 		{/if}
 		<Field
 			key="record"