fragment-tools 0.1.13 → 0.1.15

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

@@ -1,28 +1,31 @@
-import { isPowerOf2 } from "./utils";
+import { isPowerOf2 } from './utils';
 
 const emptyPixel = new Uint8Array([0, 0, 0, 0]);
 
 let TEXTURE_ID = 0;
 
 class Texture {
-	constructor(gl, {
-		image,
-		name = '',
-		target = gl.TEXTURE_2D,
-		type = gl.UNSIGNED_BYTE,
-		wrapS = gl.CLAMP_TO_EDGE,
-		wrapT = gl.CLAMP_TO_EDGE,
-		generateMipmaps = true,
-		format = gl.RGBA,
-		internalFormat = format,
-		minFilter = generateMipmaps ? gl.NEAREST_MIPMAP_LINEAR : gl.LINEAR,
-		magFilter = gl.LINEAR,
-		// premultiplyAlpha = false,
-		// unpackAlignment = 4,
-		flipY = target === gl.TEXTURE_2D ? true : false,
-		// width = image ? image.width : null,
-		// height = image ? image.height : null
-	} = {}) {
+	constructor(
+		gl,
+		{
+			image,
+			name = '',
+			target = gl.TEXTURE_2D,
+			type = gl.UNSIGNED_BYTE,
+			wrapS = gl.CLAMP_TO_EDGE,
+			wrapT = gl.CLAMP_TO_EDGE,
+			generateMipmaps = true,
+			format = gl.RGBA,
+			internalFormat = format,
+			minFilter = generateMipmaps ? gl.NEAREST_MIPMAP_LINEAR : gl.LINEAR,
+			magFilter = gl.LINEAR,
+			// premultiplyAlpha = false,
+			// unpackAlignment = 4,
+			flipY = target === gl.TEXTURE_2D ? true : false,
+			// width = image ? image.width : null,
+			// height = image ? image.height : null
+		} = {},
+	) {
 		this.gl = gl;
 		this.image = image;
 		this.name = name;
@@ -42,73 +45,98 @@ class Texture {
 		this.id = TEXTURE_ID++;
 	}
 
-    bind() {
-        if (this.gl.state.textureUnits[this.gl.state.activeTextureUnit] === this.id) return;
-
-        this.gl.bindTexture(this.target, this.glTexture);
-        this.gl.state.textureUnits[this.gl.state.activeTextureUnit] = this.id;
-    }
-
-    update(textureUnit = 0) {
-        if (this.needsUpdate || this.gl.state.textureUnits[textureUnit] !== this.id) {
-            if (this.gl.state.activeTextureUnit !== textureUnit) {
-                this.gl.state.activeTextureUnit = textureUnit;
-                this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
-            }
-
-            this.bind();
-        }
-
-        if (!this.needsUpdate) return;
-        
-        this.needsUpdate = false;
-
-        if (this.flipY !== this.gl.state.flipY) {
-            this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, this.flipY);
-            this.gl.state.flipY = this.flipY;
-        }
-
-        if (this.image && this.generateMipmaps) {
-            if (!isPowerOf2(this.image.width) || !isPowerOf2(this.image.height)) {
-                this.generateMipmaps = false;
-
-                this.wrapS = this.wrapT = this.gl.CLAMP_TO_EDGE;
-                this.minFilter = this.gl.LINEAR;
-            }
-        }
-
-        this.gl.texParameteri(this.target, this.gl.TEXTURE_WRAP_S, this.wrapS);
-        this.gl.texParameteri(this.target, this.gl.TEXTURE_WRAP_T, this.wrapT);
-        this.gl.texParameteri(this.target, this.gl.TEXTURE_MIN_FILTER, this.minFilter);
-        this.gl.texParameteri(this.target, this.gl.TEXTURE_MAG_FILTER, this.magFilter);
-
-        if (this.image) {
-            this.gl.texImage2D(this.target, 0, this.internalFormat, this.format, this.type, this.image);
-            
-            if (this.generateMipmaps) {
-                this.gl.generateMipmap(this.target);
-            }
-        } else {
-            this.gl.texImage2D(
-                this.target,
-                0,
-                this.gl.RGBA,
-                1,
-                1,
-                0,
-                this.gl.RGBA,
-                this.gl.UNSIGNED_BYTE,
-                emptyPixel
-            );
-        }
-    }
-
-    destroy() {
-        this.gl.deleteTexture(this.glTexture);
-        this.glTexture = null;
-        this.gl = null;
+	bind() {
+		if (
+			this.gl.state.textureUnits[this.gl.state.activeTextureUnit] ===
+			this.id
+		)
+			return;
+
+		this.gl.bindTexture(this.target, this.glTexture);
+		this.gl.state.textureUnits[this.gl.state.activeTextureUnit] = this.id;
+	}
+
+	update(textureUnit = 0) {
+		if (
+			this.needsUpdate ||
+			this.gl.state.textureUnits[textureUnit] !== this.id
+		) {
+			if (this.gl.state.activeTextureUnit !== textureUnit) {
+				this.gl.state.activeTextureUnit = textureUnit;
+				this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
+			}
+
+			this.bind();
+		}
+
+		if (!this.needsUpdate) return;
+
+		this.needsUpdate = false;
+
+		if (this.flipY !== this.gl.state.flipY) {
+			this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, this.flipY);
+			this.gl.state.flipY = this.flipY;
+		}
+
+		if (this.image && this.generateMipmaps) {
+			if (
+				!isPowerOf2(this.image.width) ||
+				!isPowerOf2(this.image.height)
+			) {
+				this.generateMipmaps = false;
+
+				this.wrapS = this.wrapT = this.gl.CLAMP_TO_EDGE;
+				this.minFilter = this.gl.LINEAR;
+			}
+		}
+
+		this.gl.texParameteri(this.target, this.gl.TEXTURE_WRAP_S, this.wrapS);
+		this.gl.texParameteri(this.target, this.gl.TEXTURE_WRAP_T, this.wrapT);
+		this.gl.texParameteri(
+			this.target,
+			this.gl.TEXTURE_MIN_FILTER,
+			this.minFilter,
+		);
+		this.gl.texParameteri(
+			this.target,
+			this.gl.TEXTURE_MAG_FILTER,
+			this.magFilter,
+		);
+
+		if (this.image) {
+			this.gl.texImage2D(
+				this.target,
+				0,
+				this.internalFormat,
+				this.format,
+				this.type,
+				this.image,
+			);
+
+			if (this.generateMipmaps) {
+				this.gl.generateMipmap(this.target);
+			}
+		} else {
+			this.gl.texImage2D(
+				this.target,
+				0,
+				this.gl.RGBA,
+				1,
+				1,
+				0,
+				this.gl.RGBA,
+				this.gl.UNSIGNED_BYTE,
+				emptyPixel,
+			);
+		}
+	}
+
+	destroy() {
+		this.gl.deleteTexture(this.glTexture);
+		this.glTexture = null;
+		this.gl = null;
 		this.image = null;
-    }
+	}
 }
 
 export default Texture;

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

@@ -1,7 +1,7 @@
-import Geometry from "./Geometry.js";
-import Texture from "./Texture.js";
-import Program, { defaultFragment, defaultVertex } from "./Program.js";
-import Renderer from "./Renderer.js";
+import Geometry from './Geometry.js';
+import Texture from './Texture.js';
+import Program, { defaultFragment, defaultVertex } from './Program.js';
+import Renderer from './Renderer.js';
 
 export { Geometry, Texture, Program, Renderer };
 
@@ -58,43 +58,43 @@ export function fragment({
 
 	Object.defineProperty(frag, 'shader', {
 		enumerable: true,
-    	configurable: true,
+		configurable: true,
 		get: () => {
 			return _fragmentShader;
 		},
 		set: (v) => {
 			_fragmentShader = v;
 			program.fragmentShader = _fragmentShader;
-		}
+		},
 	});
 
 	Object.defineProperty(frag, 'fragmentShader', {
 		enumerable: true,
-    	configurable: true,
+		configurable: true,
 		get: () => {
 			return _fragmentShader;
 		},
 		set: (v) => {
 			_fragmentShader = v;
 			program.fragmentShader = _fragmentShader;
-		}
+		},
 	});
 
 	Object.defineProperty(frag, 'vertexShader', {
 		enumerable: true,
-    	configurable: true,
+		configurable: true,
 		get: () => {
 			return _vertexShader;
 		},
 		set: (v) => {
 			_vertexShader = v;
 			program.vertexShader = _vertexShader;
-		}
+		},
 	});
 
 	Object.defineProperty(frag, 'uniforms', {
 		enumerable: true,
-    	configurable: true,
+		configurable: true,
 		get: () => {
 			return _uniforms;
 		},
@@ -102,7 +102,7 @@ export function fragment({
 			_uniforms = v;
 			program.uniforms = _uniforms;
 			program.needsUpdate = true;
-		}
+		},
 	});
 
 	return frag;

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

@@ -1,5 +1,3 @@
-
-
 export function isPowerOf2(value) {
-    return (value & (value - 1)) === 0;
+	return (value & (value - 1)) === 0;
 }

package/src/client/app/lib/helpers/frameDebounce.js

@@ -1,40 +1,40 @@
 /**
  * Run a function maximum once per frame
- * @param {Function} fn 
- * @param {Number} timeout 
+ * @param {Function} fn
+ * @param {Number} timeout
  * @returns {Function} debounced function
  */
-export default function frameDebounce(fn, timeout = 100){
-    let lastTime = performance.now();
-    let needCall = false;
-    let _raf;
-    let a;
+export default function frameDebounce(fn, timeout = 100) {
+	let lastTime = performance.now();
+	let needCall = false;
+	let _raf;
+	let a;
 
-    function loop() {
-        const now = performance.now();
+	function loop() {
+		const now = performance.now();
 
-        if (needCall) {
-            needCall = false;
-            lastTime = now;
-            
-            fn.apply(this, a);
-            lastTime = now;
-        }
+		if (needCall) {
+			needCall = false;
+			lastTime = now;
 
-        if (now - lastTime > timeout && _raf > -1) {
-            cancelAnimationFrame(_raf);
-            _raf = null;
-        } else {
-            _raf = requestAnimationFrame(loop);
-        }
-    }
+			fn.apply(this, a);
+			lastTime = now;
+		}
 
-    return (...args) => {
-        needCall = true;
-        a = args;
+		if (now - lastTime > timeout && _raf > -1) {
+			cancelAnimationFrame(_raf);
+			_raf = null;
+		} else {
+			_raf = requestAnimationFrame(loop);
+		}
+	}
 
-        if (!_raf) {
-            loop();
-        }
-    };
+	return (...args) => {
+		needCall = true;
+		a = args;
+
+		if (!_raf) {
+			loop();
+		}
+	};
 }

package/src/client/app/lib/loader/index.js

@@ -1,20 +1,20 @@
-import { loadImage } from "./loadImage";
+import { loadImage } from './loadImage';
 
 function getFileExtension(path) {
-    return path.match(/[^\\/]\.([^.\\/]+)$/);
+	return path.match(/[^\\/]\.([^.\\/]+)$/);
 }
 
 function getLoader(extension) {
-    if (["jpeg", "jpg", "gif", "png", "webp"].includes(extension)) {
-        return loadImage;
-    }
+	if (['jpeg', 'jpg', 'gif', 'png', 'webp'].includes(extension)) {
+		return loadImage;
+	}
 
-    return () => {};
+	return () => {};
 }
 
 export function load(url, options = { id: url }) {
-    const extension = getFileExtension(url);
-    const loader = options.loader || getLoader(extension);
+	const extension = getFileExtension(url);
+	const loader = options.loader || getLoader(extension);
 
-    return loader(url, options);
-};
+	return loader(url, options);
+}

package/src/client/app/lib/loader/loadImage.js

@@ -1,19 +1,19 @@
 export function loadImage(url, { id = url, img = new Image() } = {}) {
-    return new Promise((resolve, reject) => {
-        function onLoad() {
-            img.removeEventListener('load', onLoad);
-            resolve(img);
-        }
+	return new Promise((resolve, reject) => {
+		function onLoad() {
+			img.removeEventListener('load', onLoad);
+			resolve(img);
+		}
 
-        function onError(error) {
-            img.removeEventListener('load', onLoad);
-            img.removeEventListener('error', onError);
-            reject(error);
-        }
+		function onError(error) {
+			img.removeEventListener('load', onLoad);
+			img.removeEventListener('error', onError);
+			reject(error);
+		}
 
-        img.addEventListener('load', onLoad);
-        img.addEventListener('error', onError);
+		img.addEventListener('load', onLoad);
+		img.addEventListener('error', onError);
 
-        img.src = url;
-    });
-};
+		img.src = url;
+	});
+}

package/src/client/app/lib/loader/loadScript.js

@@ -6,7 +6,7 @@ export function loadScript(src) {
 		};
 		script.onload = () => {
 			resolve();
-		}
+		};
 
 		script.src = src;
 		document.body.appendChild(script);

package/src/client/app/lib/paper-sizes.js

@@ -4,97 +4,96 @@ const defaultUnits = 'mm';
 const data = [
 	// Common Paper Sizes
 	// (Mostly North-American based)
-	[ 'postcard', 101.6, 152.4 ],
-	[ 'poster-small', 280, 430 ],
-	[ 'poster', 460, 610 ],
-	[ 'poster-large', 610, 910 ],
-	[ 'business-card', 50.8, 88.9 ],
+	['postcard', 101.6, 152.4],
+	['poster-small', 280, 430],
+	['poster', 460, 610],
+	['poster-large', 610, 910],
+	['business-card', 50.8, 88.9],
 
 	// Photographic Print Paper Sizes
-	[ '2r', 64, 89 ],
-	[ '3r', 89, 127 ],
-	[ '4r', 102, 152 ],
-	[ '5r', 127, 178 ], // 5″x7″
-	[ '6r', 152, 203 ], // 6″x8″
-	[ '8r', 203, 254 ], // 8″x10″
-	[ '10r', 254, 305 ], // 10″x12″
-	[ '11r', 279, 356 ], // 11″x14″
-	[ '12r', 305, 381 ],
+	['2r', 64, 89],
+	['3r', 89, 127],
+	['4r', 102, 152],
+	['5r', 127, 178], // 5″x7″
+	['6r', 152, 203], // 6″x8″
+	['8r', 203, 254], // 8″x10″
+	['10r', 254, 305], // 10″x12″
+	['11r', 279, 356], // 11″x14″
+	['12r', 305, 381],
 
 	// Standard Paper Sizes
-	[ 'a0', 841, 1189 ],
-	[ 'a1', 594, 841 ],
-	[ 'a2', 420, 594 ],
-	[ 'a3', 297, 420 ],
-	[ 'a4', 210, 297 ],
-	[ 'a5', 148, 210 ],
-	[ 'a6', 105, 148 ],
-	[ 'a7', 74, 105 ],
-	[ 'a8', 52, 74 ],
-	[ 'a9', 37, 52 ],
-	[ 'a10', 26, 37 ],
-	[ '2a0', 1189, 1682 ],
-	[ '4a0', 1682, 2378 ],
-	[ 'b0', 1000, 1414 ],
-	[ 'b1', 707, 1000 ],
-	[ 'b1+', 720, 1020 ],
-	[ 'b2', 500, 707 ],
-	[ 'b2+', 520, 720 ],
-	[ 'b3', 353, 500 ],
-	[ 'b4', 250, 353 ],
-	[ 'b5', 176, 250 ],
-	[ 'b6', 125, 176 ],
-	[ 'b7', 88, 125 ],
-	[ 'b8', 62, 88 ],
-	[ 'b9', 44, 62 ],
-	[ 'b10', 31, 44 ],
-	[ 'b11', 22, 32 ],
-	[ 'b12', 16, 22 ],
-	[ 'c0', 917, 1297 ],
-	[ 'c1', 648, 917 ],
-	[ 'c2', 458, 648 ],
-	[ 'c3', 324, 458 ],
-	[ 'c4', 229, 324 ],
-	[ 'c5', 162, 229 ],
-	[ 'c6', 114, 162 ],
-	[ 'c7', 81, 114 ],
-	[ 'c8', 57, 81 ],
-	[ 'c9', 40, 57 ],
-	[ 'c10', 28, 40 ],
-	[ 'c11', 22, 32 ],
-	[ 'c12', 16, 22 ],
+	['a0', 841, 1189],
+	['a1', 594, 841],
+	['a2', 420, 594],
+	['a3', 297, 420],
+	['a4', 210, 297],
+	['a5', 148, 210],
+	['a6', 105, 148],
+	['a7', 74, 105],
+	['a8', 52, 74],
+	['a9', 37, 52],
+	['a10', 26, 37],
+	['2a0', 1189, 1682],
+	['4a0', 1682, 2378],
+	['b0', 1000, 1414],
+	['b1', 707, 1000],
+	['b1+', 720, 1020],
+	['b2', 500, 707],
+	['b2+', 520, 720],
+	['b3', 353, 500],
+	['b4', 250, 353],
+	['b5', 176, 250],
+	['b6', 125, 176],
+	['b7', 88, 125],
+	['b8', 62, 88],
+	['b9', 44, 62],
+	['b10', 31, 44],
+	['b11', 22, 32],
+	['b12', 16, 22],
+	['c0', 917, 1297],
+	['c1', 648, 917],
+	['c2', 458, 648],
+	['c3', 324, 458],
+	['c4', 229, 324],
+	['c5', 162, 229],
+	['c6', 114, 162],
+	['c7', 81, 114],
+	['c8', 57, 81],
+	['c9', 40, 57],
+	['c10', 28, 40],
+	['c11', 22, 32],
+	['c12', 16, 22],
 
 	// Use inches for North American sizes,
 	// as it produces less float precision errors
-	[ 'half-letter', 5.5, 8.5, 'in' ],
-	[ 'letter', 8.5, 11, 'in' ],
-	[ 'legal', 8.5, 14, 'in' ],
-	[ 'junior-legal', 5, 8, 'in' ],
-	[ 'ledger', 11, 17, 'in' ],
-	[ 'tabloid', 11, 17, 'in' ],
-	[ 'ansi-a', 8.5, 11.0, 'in' ],
-	[ 'ansi-b', 11.0, 17.0, 'in' ],
-	[ 'ansi-c', 17.0, 22.0, 'in' ],
-	[ 'ansi-d', 22.0, 34.0, 'in' ],
-	[ 'ansi-e', 34.0, 44.0, 'in' ],
-	[ 'arch-a', 9, 12, 'in' ],
-	[ 'arch-b', 12, 18, 'in' ],
-	[ 'arch-c', 18, 24, 'in' ],
-	[ 'arch-d', 24, 36, 'in' ],
-	[ 'arch-e', 36, 48, 'in' ],
-	[ 'arch-e1', 30, 42, 'in' ],
-	[ 'arch-e2', 26, 38, 'in' ],
-	[ 'arch-e3', 27, 39, 'in' ]
+	['half-letter', 5.5, 8.5, 'in'],
+	['letter', 8.5, 11, 'in'],
+	['legal', 8.5, 14, 'in'],
+	['junior-legal', 5, 8, 'in'],
+	['ledger', 11, 17, 'in'],
+	['tabloid', 11, 17, 'in'],
+	['ansi-a', 8.5, 11.0, 'in'],
+	['ansi-b', 11.0, 17.0, 'in'],
+	['ansi-c', 17.0, 22.0, 'in'],
+	['ansi-d', 22.0, 34.0, 'in'],
+	['ansi-e', 34.0, 44.0, 'in'],
+	['arch-a', 9, 12, 'in'],
+	['arch-b', 12, 18, 'in'],
+	['arch-c', 18, 24, 'in'],
+	['arch-d', 24, 36, 'in'],
+	['arch-e', 36, 48, 'in'],
+	['arch-e1', 30, 42, 'in'],
+	['arch-e2', 26, 38, 'in'],
+	['arch-e3', 27, 39, 'in'],
 ];
 
 let dictionary = data.reduce((dict, preset) => {
 	const item = {
 		units: preset[3] || defaultUnits,
-		dimensions: [ preset[1], preset[2] ]
+		dimensions: [preset[1], preset[2]],
 	};
 
 	dict[preset[0]] = item;
-	dict[preset[0].replace(/-/g, ' ')] = item;
 
 	return dict;
 }, {});

package/src/client/app/lib/presets.js

@@ -1,12 +1,32 @@
-import paperSizes from "./paper-sizes.js";
-import convertLength from "convert-length";
+import paperSizes from './paper-sizes.js';
+import convertLength from 'convert-length';
+
+export const PRESET_ORIENTATIONS = {
+	LANDSCAPE: 'landscape',
+	PORTRAIT: 'portrait',
+};
 
 export default Object.keys(paperSizes);
 
-export function getDimensionsForPreset(preset, { pixelsPerInch }) {
+/**
+ * Compute the dimensions for a given preset
+ * @param {string} preset
+ * @param {object} params
+ * @param {number} params.pixelsPerInch
+ * @param {string} params.orientation
+ * @returns {number[]} dimensions
+ */
+export function getDimensionsForPreset(
+	preset,
+	{ pixelsPerInch, orientation = PRESET_ORIENTATIONS.PORTRAIT },
+) {
 	const { dimensions, units } = paperSizes[preset];
 
-	return dimensions.map(n => {
-		return convertLength(n, units, "px", { pixelsPerInch });
+	const [width, height] = dimensions.map((n) => {
+		return convertLength(n, units, 'px', { pixelsPerInch });
 	});
+
+	return orientation === PRESET_ORIENTATIONS.PORTRAIT
+		? [width, height]
+		: [height, width];
 }