fragment-tools 0.1.13 → 0.1.15

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

@@ -1,89 +1,106 @@
-import { writable } from "svelte/store";
-import { client } from "../client";
-import { createStore } from "./utils";
-import { getDimensionsForPreset } from "../lib/presets";
+import { writable } from 'svelte/store';
+import { client } from '../client';
+import { createStore } from './utils';
+import { PRESET_ORIENTATIONS, getDimensionsForPreset } from '../lib/presets';
 
 export const SIZES = {
-    FIXED: "fixed",
-    PRESET: "preset",
-    ASPECT_RATIO: "aspect-ratio",
-    WINDOW: "window",
-    SCALE: "scale",
+	FIXED: 'fixed',
+	PRESET: 'preset',
+	ASPECT_RATIO: 'aspect-ratio',
+	WINDOW: 'window',
+	SCALE: 'scale',
 };
 
-export const rendering = createStore(`rendering`, {
-    width: 1024,
-    height: 1024,
-    pixelRatio: 1,
-    resizing: SIZES.FIXED,
-    aspectRatio: 1,
-    scale: 1,
-    preset: 'a4',
-}, {
-    persist: !__BUILD__,
-    reset: false, 
-});
+export const rendering = createStore(
+	`rendering`,
+	{
+		width: 1024,
+		height: 1024,
+		pixelRatio: 1,
+		resizing: SIZES.FIXED,
+		aspectRatio: 1,
+		scale: 1,
+		preset: 'a4',
+		presetOrientation: PRESET_ORIENTATIONS.PORTRAIT,
+	},
+	{
+		persist: !__BUILD__,
+		reset: false,
+	},
+);
 
 export const monitors = createStore('monitors', []);
 export const preview = createStore('preview', null);
 
 export const override = (config) => {
-    const { canvasSize = SIZES.WINDOW } = config;
-    const resizing = canvasSize;
-
-    const overrides = {
-        resizing,
-    };
-
-    if (config.dimensions && config.dimensions.length === 2) {
-        const { dimensions } = config;
-        overrides.width = dimensions[0];
-        overrides.height = dimensions[1];
-
-        if (!config.canvasSize) {
-            overrides.resizing = SIZES.FIXED;
-        }
-    }
-
-    if (resizing === SIZES.PRESET) {
-        if (config.preset) {
-            const [ width, height ] = getDimensionsForPreset(config.preset, { pixelsPerInch: 300 });
-
-            overrides.width = width;
-            overrides.height = height;
-        } else {
-            overrides.resizing = SIZES.WINDOW;
-            console.warn(`Cannot apply canvasSize preset if 'preset' is not specified in config.`);
-        }
-    }
-
-    if (resizing === SIZES.ASPECT_RATIO) {
-        if (isNaN(config.aspectRatio)) {
-            overrides.resizing = SIZES.WINDOW;
-            console.warn(`Cannot apply canvasSize:"aspectRatio" if 'aspectRatio' is not specified in config.`);
-        }
-    }
-
-    if (resizing === SIZES.SCALE) {
-        if (!config.dimensions) {
-            console.warn(`Cannot apply canvasSize:"scale" if no dimensions are specified.`);
-            overrides.resizing = SIZES.WINDOW;
-        }
-
-        if (isNaN(config.scale)) {
-            console.warn(`Cannot apply canvasSize:"scale" if 'scale' is not specified in config.`);
-            overrides.resizing = SIZES.WINDOW;
-        } else {
-            overrides.scale = config.scale;
-        }
-    }
-
-    if (config.pixelRatio) {
-        const { pixelRatio } = config;
-        overrides.pixelRatio = typeof pixelRatio === "function" ? pixelRatio() : pixelRatio;
-    }
-
-    rendering.update((curr) => ({...curr, ...overrides}));
+	const { canvasSize = SIZES.WINDOW } = config;
+	const resizing = canvasSize;
+
+	const overrides = {
+		resizing,
+	};
+
+	if (config.dimensions && config.dimensions.length === 2) {
+		const { dimensions } = config;
+		overrides.width = dimensions[0];
+		overrides.height = dimensions[1];
+
+		if (!config.canvasSize) {
+			overrides.resizing = SIZES.FIXED;
+		}
+	}
+
+	if (resizing === SIZES.PRESET) {
+		if (config.preset) {
+			const [width, height] = getDimensionsForPreset(config.preset, {
+				pixelsPerInch: 300,
+				orientation: config.presetOrientation,
+			});
+
+			overrides.width = width;
+			overrides.height = height;
+		} else {
+			overrides.resizing = SIZES.WINDOW;
+			console.warn(
+				`Cannot apply canvasSize preset if 'preset' is not specified in config.`,
+			);
+		}
+	}
+
+	if (resizing === SIZES.ASPECT_RATIO) {
+		if (isNaN(config.aspectRatio)) {
+			overrides.resizing = SIZES.WINDOW;
+			console.warn(
+				`Cannot apply canvasSize:"aspectRatio" if 'aspectRatio' is not specified in config.`,
+			);
+		}
+	}
+
+	if (resizing === SIZES.SCALE) {
+		if (!config.dimensions) {
+			console.warn(
+				`Cannot apply canvasSize:"scale" if no dimensions are specified.`,
+			);
+			overrides.resizing = SIZES.WINDOW;
+		}
+
+		if (isNaN(config.scale)) {
+			console.warn(
+				`Cannot apply canvasSize:"scale" if 'scale' is not specified in config.`,
+			);
+			overrides.resizing = SIZES.WINDOW;
+		} else {
+			overrides.scale = config.scale;
+		}
+	}
+
+	if (config.pixelRatio) {
+		const { pixelRatio } = config;
+		overrides.pixelRatio =
+			typeof pixelRatio === 'function' ? pixelRatio() : pixelRatio;
+	}
+
+	rendering.update((curr) => ({ ...curr, ...overrides }));
 };
 
 /* sync across clients */
@@ -92,18 +109,20 @@ let isSynchronized = false;
 export const sync = writable(isSynchronized);
 
 function checkForSync({ clientCount } = {}) {
-    let prev = isSynchronized;
-    isSynchronized = clientCount > 0;
-
-    if (prev && !isSynchronized) {
-        console.warn("[fragment] Sketch is running at specified framerate.");
-    } else if (!prev && isSynchronized) {
-        console.warn("[fragment] Multiple instances of Fragment detected. Running sketch(s) at simulated framerate.");
-    }
-
-    if (prev !== isSynchronized) {
-        sync.set(isSynchronized);
-    }
+	let prev = isSynchronized;
+	isSynchronized = clientCount > 0;
+
+	if (prev && !isSynchronized) {
+		console.warn('[fragment] Sketch is running at specified framerate.');
+	} else if (!prev && isSynchronized) {
+		console.warn(
+			'[fragment] Multiple instances of Fragment detected. Running sketch(s) at simulated framerate.',
+		);
+	}
+
+	if (prev !== isSynchronized) {
+		sync.set(isSynchronized);
+	}
 }
 
 client.on('start', checkForSync);

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

@@ -1,6 +1,6 @@
-import { createStore } from "./utils.js";
-import { displayError } from "../stores/errors";
-import { sketches as all, onSketchReload } from "@fragment/sketches";
+import { createStore } from './utils.js';
+import { displayError } from '../stores/errors';
+import { sketches as all } from '@fragment/sketches';
 
 export const sketches = createStore('sketches', {});
 export const sketchesKeys = createStore('sketchesKeys', Object.keys(all));
@@ -16,9 +16,11 @@ async function loadSketch(collection, key) {
 	}
 }
 
-async function loadAll(collection) {
+export async function loadAll(collection) {
 	const keys = [...Object.keys(collection)];
-	const loadedSketches = await Promise.all(keys.map((key) => loadSketch(collection, key)));
+	const loadedSketches = await Promise.all(
+		keys.map((key) => loadSketch(collection, key)),
+	);
 
 	const newSketches = keys.reduce((all, key, index) => {
 		if (loadedSketches[index]) {
@@ -34,7 +36,3 @@ async function loadAll(collection) {
 }
 
 loadAll(all);
-
-onSketchReload(({ sketches }) => {
-	loadAll(sketches);
-});

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

@@ -1,27 +1,27 @@
-import { readable } from "svelte/store";
+import { readable } from 'svelte/store';
 
-export const current = readable({ time: 0, deltaTime: 0 }, set => {
-    let _raf;
-    let lastTime = performance.now();
-    let startTime = lastTime - __START_TIME__;
-    let time = startTime;
+export const current = readable({ time: 0, deltaTime: 0 }, (set) => {
+	let _raf;
+	let lastTime = performance.now();
+	let startTime = lastTime - __START_TIME__;
+	let time = startTime;
 
-    function update(dt = 0) {
-        lastTime = time;
+	function update(dt = 0) {
+		lastTime = time;
 
-        let currentTime = performance.now();
-        let deltaTime = currentTime - lastTime;
+		let currentTime = performance.now();
+		let deltaTime = currentTime - lastTime;
 
-        time = currentTime;
+		time = currentTime;
 
-        set({ time, deltaTime, startTime });
+		set({ time, deltaTime, startTime });
 
-        _raf = requestAnimationFrame(update)
-    }
+		_raf = requestAnimationFrame(update);
+	}
 
-    update();
+	update();
 
-    return () => {
-        cancelAnimationFrame(_raf);
-    }
+	return () => {
+		cancelAnimationFrame(_raf);
+	};
 });

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

@@ -1,66 +1,123 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
+import { getContext } from '../triggers/shared';
 
 let stores = new Map();
 
 /**
  * Returns the value stored in localStorage for key or return defaultValue if it doesn't exist
- * @param {string} key 
- * @param {any} defaultValue 
- * @param {boolean} override 
+ * @param {string} key
+ * @param {any} defaultValue
+ * @param {boolean} override
  * @returns {any} result
  */
 export function rehydrate(key, defaultValue) {
-    const storedValue = localStorage.getItem(`fragment.${key}`);
+	const storedValue = localStorage.getItem(`fragment.${key}`);
 
-    if (storedValue) {
-        return typeof storedValue === "string" ? JSON.parse(storedValue) : storedValue;
-    }
+	if (storedValue) {
+		return typeof storedValue === 'string'
+			? JSON.parse(storedValue)
+			: storedValue;
+	}
 
-    return defaultValue;
-};
+	return defaultValue;
+}
 
 /**
  * Save value in localStorage
- * @param {string} key 
- * @param {any} value 
+ * @param {string} key
+ * @param {any} value
  */
 export function save(key, value) {
-    localStorage.setItem(`fragment.${key}`, JSON.stringify(value));
-};
+	localStorage.setItem(`fragment.${key}`, JSON.stringify(value));
+}
 
 /**
  * Create store and register it for later usage
- * @param {string} key 
- * @param {any} initialValue 
+ * @param {string} key
+ * @param {any} initialValue
  * @param {object} options
- * @returns {object} store
+ * @returns {import('svelte/store').Writable} store
  */
-export function createStore(key, initialValue, { persist = false, reset = false } = {}) {
-    const value = (persist && !reset) ? rehydrate(key, initialValue) : initialValue;
-    const store = writable(value);
+export function createStore(
+	key,
+	initialValue,
+	{ persist = false, reset = false } = {},
+) {
+	const value =
+		persist && !reset ? rehydrate(key, initialValue) : initialValue;
+	const store = writable(value);
 
-    if (persist) {
-        store.subscribe((current) => {
-            save(key, current);
-        });
-    }
-    
-    stores.set(key, store);
+	if (persist) {
+		store.subscribe((current) => {
+			save(key, current);
+		});
+	}
 
-    return store;
-};
+	stores.set(key, store);
+
+	return store;
+}
 
 /**
  * Get an existing store from key or create it if it doesn't exist yet
- * @param {string} key 
- * @param {any} initialValue 
+ * @param {string} key
+ * @param {any} initialValue
  * @param {object} options
- * @returns {object} store
+ * @returns {import('svelte/store').Writable} store
  */
-export function getStore(key, initialValue, { persist = false, reset = false } = {}) {
-    if (!stores.has(key)) {
-        return createStore(key, initialValue, { persist, reset });
-    }
+export function getStore(
+	key,
+	initialValue,
+	{ persist = false, reset = false } = {},
+) {
+	if (!stores.has(key)) {
+		return createStore(key, initialValue, { persist, reset });
+	}
+
+	return stores.get(key);
+}
+
+/**
+ * Create a new store to register callbacks grouped by context
+ * @param {string} name
+ */
+export function createHookStore(name) {
+	const store = writable(new Map());
+
+	const hook = (fn, { context = getContext() } = {}) => {
+		if (typeof fn !== 'function') {
+			console.warn(`${name} argument must be a function.`);
+		}
+
+		store.update((hooks) => {
+			if (!hooks.has(context)) {
+				hooks.set(context, []);
+			}
+
+			hooks.set(context, [...hooks.get(context), fn]);
+
+			return hooks;
+		});
+
+		return () => {
+			store.update((hooks) => {
+				hooks.set(
+					context,
+					[...hooks.get(context)].filter((hook) => hook !== fn),
+				);
+
+				return hooks;
+			});
+		};
+	};
+
+	const remove = (context) => {
+		store.update((hooks) => {
+			hooks.delete(context);
+
+			return hooks;
+		});
+	};
 
-    return stores.get(key);
-};
+	return [store, hook, remove];
+}

package/src/client/app/transitions/fade.js

@@ -1,8 +1,8 @@
-export let name = "Fade";
+export let name = 'Fade';
 
 export let props = {};
 
-export let fragmentShader = /* glsl */`
+export let fragmentShader = /* glsl */ `
 precision highp float;
 
 uniform sampler2D uSampler0;
@@ -14,4 +14,4 @@ varying vec2 vUv;
 void main() {
     gl_FragColor = mix(texture2D(uSampler0, vUv), texture2D(uSampler1, vUv), threshold);
 }
-`;  
+`;

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

@@ -1,12 +1,11 @@
-
 // This file is generated by Fragment. Do not edit it.
 
-import * as transition0 from "./fade.js";
-import * as transition1 from "./splitX.js";
-import * as transition2 from "./splitY.js";
+import * as transition0 from './fade.js';
+import * as transition1 from './splitX.js';
+import * as transition2 from './splitY.js';
 
 export const transitions = {
-    "fade.js": transition0,
-    "splitX.js": transition1,
-    "splitY.js": transition2,
+	'fade.js': transition0,
+	'splitX.js': transition1,
+	'splitY.js': transition2,
 };

package/src/client/app/transitions/splitX.js

@@ -1,7 +1,7 @@
-export let name = "SplitX";
+export let name = 'SplitX';
 export let props = {};
 
-export let fragmentShader = /* glsl */`
+export let fragmentShader = /* glsl */ `
 precision highp float;
 
 uniform float threshold;

package/src/client/app/transitions/splitY.js

@@ -1,7 +1,7 @@
-export let name = "SplitY";
+export let name = 'SplitY';
 export let props = {};
 
-export let fragmentShader = /* glsl */`
+export let fragmentShader = /* glsl */ `
 precision highp float;
 
 uniform float threshold;