fragment-tools 0.1.13 → 0.1.15

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

@@ -1,131 +1,134 @@
-import { writable, get } from "svelte/store";
-import { getStore, createStore } from "./utils";
-import { onMount } from "svelte";
-
-export const tree = getStore("layout.current", {}, {
-    persist: !__BUILD__
-});
+import { writable, get } from 'svelte/store';
+import { getStore, createStore } from './utils';
+import { onMount } from 'svelte';
+
+export const tree = getStore(
+	'layout.current',
+	{},
+	{
+		persist: !__BUILD__,
+	},
+);
 
 export const layout = createStore('layout', {
-    editing: false,
-    previewing: false,
-    registerChild: (component, children) => {
-        onMount(() => {
-            component.children = children();
-
-            if (component.root) {
-                tree.set(cleanNodes(component));
-            }
-        });
-    },
+	editing: false,
+	previewing: false,
+	registerChild: (component, children) => {
+		onMount(() => {
+			component.children = children();
+
+			if (component.root) {
+				tree.set(cleanNodes(component));
+			}
+		});
+	},
 });
 
 function cleanNodes(value) {
-    return JSON.parse(JSON.stringify(value, (key, value) => {
-        if (!(value instanceof HTMLElement)) {
-            return value;
-        }
-    }));
+	return JSON.parse(
+		JSON.stringify(value, (key, value) => {
+			if (!(value instanceof HTMLElement)) {
+				return value;
+			}
+		}),
+	);
 }
 
 export function traverse(fn = () => {}, node = get(tree)) {
-    const { children = [] } = node;
+	const { children = [] } = node;
 
-    fn(node);
+	fn(node);
 
-    for (let i = 0; i < children.length; i++) {
-        const child = children[i];
-        traverse(fn, child);
-    }
-};
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i];
+		traverse(fn, child);
+	}
+}
 
 export const replaceChildren = (component, newChildren) => {
-    tree.update((t) => {
-        traverse((c) => {
-            if (c.id === component.id) {
-                c.children = newChildren;
-            }
-        }, t);
-
-        return t;
-    });
+	tree.update((t) => {
+		traverse((c) => {
+			if (c.id === component.id) {
+				c.children = newChildren;
+			}
+		}, t);
+
+		return t;
+	});
 };
 
 export const swapRoot = (newRoot) => {
-    tree.update((t) => {
-        traverse((c) => {
-            if (!c.root && c.type !== "module") {
-                c.depth = c.depth + 1;
-            }
-        }, newRoot);
-
-        return newRoot;
-    })
+	tree.update((t) => {
+		traverse((c) => {
+			if (!c.root && c.type !== 'module') {
+				c.depth = c.depth + 1;
+			}
+		}, newRoot);
+
+		return newRoot;
+	});
 };
 
 export const addSibling = (component, sibling) => {
-    tree.update((t) => {
-        traverse((c) => {
-            if (c.id === component.parent) {
-                const index = c.children.findIndex( k => k.id === component.id);
+	tree.update((t) => {
+		traverse((c) => {
+			if (c.id === component.parent) {
+				const index = c.children.findIndex(
+					(k) => k.id === component.id,
+				);
 
-                const { size } = c.children[index];
-                c.children[index].size = size * 0.5;
-                sibling.size = size * 0.5;
+				const { size } = c.children[index];
+				c.children[index].size = size * 0.5;
+				sibling.size = size * 0.5;
 
-                const newChildren = [
-                    ...c.children,
-                ];
+				const newChildren = [...c.children];
 
-                newChildren.splice(index + 1, 0, sibling);
+				newChildren.splice(index + 1, 0, sibling);
 
-                c.children = newChildren;
-            }
-        });
+				c.children = newChildren;
+			}
+		});
 
-        return t;
-    })
+		return t;
+	});
 };
 
 export const addChildren = (component, newChild) => {
-    tree.update((t) => {
-        traverse((c) => {
-            if (c.id === component.id) {
-                c.children = [
-                    ...c.children,
-                    newChild,
-                ];
-            }
-        }, t);
-
-        return t;
-    })
+	tree.update((t) => {
+		traverse((c) => {
+			if (c.id === component.id) {
+				c.children = [...c.children, newChild];
+			}
+		}, t);
+
+		return t;
+	});
 };
 
 export const remove = (node) => {
-    tree.update((t) => {
-        traverse((c) => {
-            const { children = [] } = c;
-            const childIndex = children.findIndex( k => k.id === node.id);
+	tree.update((t) => {
+		traverse((c) => {
+			const { children = [] } = c;
+			const childIndex = children.findIndex((k) => k.id === node.id);
 
-            if (childIndex >= 0) {
-                const newChildren = [...children];
-                newChildren.splice(childIndex, 1);
+			if (childIndex >= 0) {
+				const newChildren = [...children];
+				newChildren.splice(childIndex, 1);
 
-                newChildren.forEach((k) => {
-                    k.size = 1. / newChildren.length;
-                });
+				newChildren.forEach((k) => {
+					k.size = 1 / newChildren.length;
+				});
 
-                if (newChildren.length === 0) {
-                    remove(c);
-                }
+				if (newChildren.length === 0) {
+					remove(c);
+				}
 
-                c.children = newChildren;
-            }
-        }, t);
+				c.children = newChildren;
+			}
+		}, t);
 
-        return t;
-    });
+		return t;
+	});
 };
 
 /**
@@ -134,54 +137,56 @@ export const remove = (node) => {
  * @param {object} newProperties - the new properties to assign to the component
  */
 export const updateComponent = (component, newProperties = {}) => {
-    tree.update((t) => {
-        let updated = false;
-
-        traverse((c) => {
-            if (c.id === component.id) {
-                updated = true;
-                if (typeof newProperties === "object") {
-                    Object.assign(c, newProperties);
-                } else if (typeof newProperties === "function") {
-                    Object.assign(c, newProperties(c));
-                }
-            }
-        }, t);
-
-        if (!updated) {
-            console.warn(`Cannot find component to update with id ${component.id}`);
-        }
-
-        return t;
-    });
+	tree.update((t) => {
+		let updated = false;
+
+		traverse((c) => {
+			if (c.id === component.id) {
+				updated = true;
+				if (typeof newProperties === 'object') {
+					Object.assign(c, newProperties);
+				} else if (typeof newProperties === 'function') {
+					Object.assign(c, newProperties(c));
+				}
+			}
+		}, t);
+
+		if (!updated) {
+			console.warn(
+				`Cannot find component to update with id ${component.id}`,
+			);
+		}
+
+		return t;
+	});
 };
 
 export const updateModule = (m, newProperties = {}) => {
-    tree.update((t) => {
-        traverse((c) => {
-            if (c.mID === m.mID) {
-                if (typeof newProperties === "object") {
-                    Object.assign(c, newProperties);
-                } else if (typeof newProperties === "function") {
-                    Object.assign(c, newProperties(c));
-                }
-            }
-        }, t);
-
-        return t;
-    });
+	tree.update((t) => {
+		traverse((c) => {
+			if (c.mID === m.mID) {
+				if (typeof newProperties === 'object') {
+					Object.assign(c, newProperties);
+				} else if (typeof newProperties === 'function') {
+					Object.assign(c, newProperties(c));
+				}
+			}
+		}, t);
+
+		return t;
+	});
 };
 
 export const resize = (nodes = []) => {
-    tree.update((t) => {
-        traverse((c) => {
-            nodes.forEach(n => {
-                if (n.id === c.id) {
-                    c.size = n.size;
-                }
-            });
-        }, t);
-
-        return t;
-    });
+	tree.update((t) => {
+		traverse((c) => {
+			nodes.forEach((n) => {
+				if (n.id === c.id) {
+					c.size = n.size;
+				}
+			});
+		}, t);
+
+		return t;
+	});
 };

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

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

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

@@ -1,26 +1,63 @@
-import { writable, get } from "svelte/store";
-import { sketches } from "./sketches";
+import { sketches } from './sketches';
+import { getStore } from './utils';
 
-export const props = writable({});
+export const props = getStore('props', {});
 
-sketches.subscribe((sketches) => {
-	props.update((currentProps) => {
-		Object.keys(sketches).forEach((key) => {
-			const sketch = sketches[key];
-
-			if (sketch) { // sketch can be undefined if failed to load
-				currentProps[key] = reconcile(sketch.props, currentProps[key]);
+function resetProp(prop) {
+	function copyProperties(source, target) {
+		for (const key in source) {
+			if (source.hasOwnProperty(key)) {
+				// Check if the property is an object (including nested objects)
+				if (typeof source[key] === 'object' && source[key] !== null) {
+					// If the property is an object, recursively copy its properties
+					target[key] = target[key] || {};
+					copyProperties(source[key], target[key]);
+				} else {
+					// If the property is not an object, copy its value
+					target[key] = source[key];
+				}
 			}
+		}
+	}
+
+	if (Array.isArray(prop.value)) {
+		for (let i = 0; i < prop.__initialValue.length; i++) {
+			prop.value[i] = prop.__initialValue[i];
+		}
+	} else if (typeof prop.value === 'object') {
+		copyProperties(prop.__initialValue, prop.value);
+	} else {
+		prop.value = prop.__initialValue;
+	}
+}
+
+export function resetProps(sketchKey, params = {}) {
+	props.update((all) => {
+		const sketchProps = all[sketchKey];
+
+		Object.keys(sketchProps).forEach((propKey) => {
+			const prop = sketchProps[propKey];
+			resetProp(prop);
+
+			prop.onChange?.(prop, params);
 		});
 
-		return currentProps;
+		return all;
 	});
-});
+}
 
-function reconcile(newProps = {}, prevProps = {}) {
+export function reconcile(newProps = {}, prevProps = {}) {
 	Object.keys(newProps).forEach((propKey) => {
 		let newProp = newProps[propKey];
 
+		if (Array.isArray(newProp.value)) {
+			newProp.__initialValue = [...newProp.value];
+		} else if (typeof newProp.value === 'object') {
+			newProp.__initialValue = structuredClone(newProp.value);
+		} else {
+			newProp.__initialValue = newProp.value;
+		}
+
 		if (!newProp.params) {
 			newProp.params = {};
 		}
@@ -32,6 +69,10 @@ function reconcile(newProps = {}, prevProps = {}) {
 			let newProp = newProps[propKey];
 
 			if (newProp) {
+				if (newProp.__initialValue === prevProp.__initialValue) {
+					newProp.value = prevProp.value;
+				}
+
 				if (prevProp.params) {
 					// reconcile locked VectorInput from UI
 					if (prevProp.params.locked !== undefined) {
@@ -44,3 +85,25 @@ function reconcile(newProps = {}, prevProps = {}) {
 
 	return newProps;
 }
+
+/**
+ * Update prop value based on sketch key and prop key
+ * @param {string} sketchKey
+ * @param {string} propKey
+ * @param {any} newValue
+ */
+export function updateProp(sketchKey, propKey, newValue, params = {}) {
+	props.update((currentProps) => {
+		const prop = currentProps[sketchKey][propKey];
+
+		if (prop) {
+			prop.value = newValue;
+
+			if (typeof prop.onChange === 'function') {
+				prop.onChange(prop, params);
+			}
+		}
+
+		return currentProps;
+	});
+}

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

@@ -1,30 +1,41 @@
-import { rendering } from "./rendering";
+import { rendering } from './rendering';
 
 export let renderers = {};
 
 function loadRenderer(renderingMode) {
-	if (__THREE_RENDERER__ && renderingMode === "three") {
-		return import("../renderers/THREERenderer.js");
+	if (renderers[renderingMode]) return renderers[renderingMode];
+
+	if (__THREE_RENDERER__ && renderingMode === 'three') {
+		return import('../renderers/THREERenderer.js');
 	}
 
-	if (__FRAGMENT_RENDERER__ && renderingMode === "fragment") {
-		return import("../renderers/FragmentRenderer.js");
+	if (__FRAGMENT_RENDERER__ && renderingMode === 'fragment') {
+		return import('../renderers/FragmentRenderer.js');
 	}
 
-	if (__P5_RENDERER__ && renderingMode === "p5") {
-		return import("../renderers/P5Renderer.js");
+	if (__P5_RENDERER__ && renderingMode === 'p5') {
+		return import('../renderers/P5Renderer.js');
 	}
 
-	if (__2D_RENDERER__ && renderingMode === "2d") {
-		return import("../renderers/2DRenderer.js");
+	if (__P5_WEBGL_RENDERER__ && renderingMode === 'p5-webgl') {
+		return import('../renderers/P5GLRenderer.js');
 	}
-}
 
-export async function findRenderer(renderingMode) {
-	if (renderers[renderingMode]) return renderers[renderingMode];
+	if (__2D_RENDERER__ && renderingMode === '2d') {
+		return import('../renderers/2DRenderer.js');
+	}
+}
 
+export async function findRenderer({
+	rendering: renderingMode,
+	renderer: customRenderer,
+}) {
 	// load and save
-	renderers[renderingMode] = await loadRenderer(renderingMode);
+	renderers[renderingMode] = customRenderer
+		? typeof customRenderer === 'function'
+			? await customRenderer()
+			: customRenderer
+		: await loadRenderer(renderingMode);
 
 	// get
 	let renderer = renderers[renderingMode];
@@ -35,7 +46,7 @@ export async function findRenderer(renderingMode) {
 			let r;
 
 			if (!initialized) {
-				if (typeof renderer.init === "function") {
+				if (typeof renderer.init === 'function') {
 					r = renderer.init({
 						canvas: document.createElement('canvas'),
 						pixelRatio: current.pixelRatio,
@@ -47,7 +58,7 @@ export async function findRenderer(renderingMode) {
 
 			initialized = true;
 
-			if (typeof renderer.resize === "function") {
+			if (typeof renderer.resize === 'function') {
 				renderer.resize({
 					width: current.width,
 					height: current.height,