fragment-tools 0.1.19 → 0.2.0

package/src/client/app/state/layout.svelte.js

@@ -0,0 +1,205 @@
+import { hydrate, persist } from './utils.svelte';
+
+let COMPONENT_ID = 0;
+
+class Layout {
+	components = $state([]);
+	editing = $state(false);
+	previewing = $state(false);
+
+	getID() {
+		return COMPONENT_ID++;
+	}
+
+	constructor() {
+		this.key = 'layout';
+
+		$effect.root(() => {
+			$effect(() => {
+				if (!this.previewing && !__BUILD__) {
+					this.persist($state.snapshot(this.components));
+				}
+			});
+		});
+
+		this.components.push(...hydrate(this.key, null, []));
+	}
+
+	createComponent({
+		id = this.getID(),
+		origin,
+		node = null,
+		size = 1,
+		minimized = false,
+		headless = false,
+		type,
+		name,
+		children = [],
+		params = {},
+	}) {
+		let existingComponent = this.getComponent(id);
+
+		if (existingComponent) {
+			COMPONENT_ID = Math.max(existingComponent.id + 1, COMPONENT_ID);
+			return existingComponent;
+		}
+
+		let component = {
+			id,
+			node,
+			size,
+			minimized,
+			name,
+			type,
+			children,
+			headless,
+			params,
+		};
+
+		const originComponent = this.getComponent(origin);
+		const isSibling = component.type === originComponent?.type;
+
+		if (originComponent) {
+			component.root = false;
+
+			if (isSibling) {
+				if (originComponent.root) {
+					const originChildren = originComponent.children.map(
+						(childID) =>
+							this.components.find((c) => c.id === childID),
+					);
+
+					originComponent.children.length = 0;
+
+					const intermediate = this.createComponent({
+						type:
+							originComponent.type === 'column'
+								? 'row'
+								: 'column',
+						size: 1,
+						origin,
+					});
+
+					const col1 = this.createComponent({
+						type: intermediate.type === 'column' ? 'row' : 'column',
+						size: 0.5,
+						origin: intermediate.id,
+					});
+
+					originChildren.forEach((child) => {
+						child.parent = col1.id;
+					});
+					col1.children.push(...originChildren.map((c) => c.id));
+
+					component = this.createComponent({
+						type: intermediate.type === 'column' ? 'row' : 'column',
+						size: 0.5,
+						origin: intermediate.id,
+					});
+				} else {
+					// add sibling
+					const sibling = originComponent;
+					const parent = this.getComponent(sibling.parent);
+					const index = parent.children.findIndex(
+						(id) => id === sibling.id,
+					);
+
+					const { size } = sibling;
+					sibling.size = size * 0.5;
+					component.size = size * 0.5;
+					component.parent = sibling.parent;
+					parent.children.splice(index + 1, 0, component.id);
+				}
+			} else if (
+				originComponent.children.length === 1 &&
+				this.getComponent(originComponent.children[0]).type === 'module'
+			) {
+				const child = this.getComponent(originComponent.children[0]);
+
+				originComponent.children.length = 0;
+
+				const replacement = this.createComponent({
+					type: originComponent.type === 'column' ? 'row' : 'column',
+					origin,
+				});
+
+				replacement.children.push(child.id);
+				component.parent = origin;
+				originComponent.children.splice(
+					0,
+					1,
+					replacement.id,
+					component.id,
+				);
+			} else {
+				component.parent = originComponent.id;
+
+				originComponent.children.push(component.id);
+			}
+		} else {
+			component.root = true;
+		}
+
+		if (component) {
+			this.components.push(component);
+		}
+
+		return component;
+	}
+
+	persist(components) {
+		const mirrored = components.map((source) => ({
+			id: source.id,
+			parent: source.parent,
+			size: source.size,
+			root: source.root,
+			type: source.type,
+			name: source.name,
+			minimized: source.minimized,
+			params: source.params,
+			children: [...source.children],
+		}));
+
+		persist(this.key, mirrored);
+	}
+
+	remove(component) {
+		component.children.forEach((child) => {
+			this.components.splice(
+				this.components.findIndex((c) => c.id === child),
+				1,
+			);
+		});
+
+		this.components.splice(
+			this.components.findIndex((c) => c.id === component.id),
+			1,
+		);
+
+		const parent = this.getComponent(component.parent);
+
+		if (parent) {
+			const componentIndex = parent.children.findIndex(
+				(id) => id === component.id,
+			);
+
+			parent.children.splice(componentIndex, 1);
+			const newSize = 1 / Math.max(1, parent.children.length - 1);
+			parent.children.forEach((childID) => {
+				const child = this.getComponent(childID);
+				child.size = newSize;
+			});
+
+			if (parent.children.length === 0 && !parent.root) {
+				parent.size = 1;
+				this.remove(parent);
+			}
+		}
+	}
+
+	getComponent(id) {
+		return this.components.find((c) => c.id === id);
+	}
+}
+
+export let layout = new Layout();

package/src/client/app/state/monitors.svelte.js

@@ -0,0 +1,36 @@
+let ID = 0;
+
+class Monitors {
+	all = $state([]);
+
+	constructor() {
+		$effect.root(() => {
+			$effect(() => {
+				console.log(this.map);
+			});
+		});
+	}
+
+	register(id = ID++) {
+		let monitor = {
+			id,
+		};
+
+		this.all.push(monitor);
+	}
+
+	getById(id) {
+		return this.all.find((m) => m.id === id);
+	}
+
+	getIndexById(id) {
+		return this.all.findIndex((m) => m.id === id);
+	}
+
+	remove(id) {
+		const index = this.getIndexById(id);
+		this.all.splice(index, 1);
+	}
+}
+
+export let monitors = new Monitors();

package/src/client/app/state/renderers.svelte.js

@@ -0,0 +1,77 @@
+import { rendering } from './rendering.svelte';
+
+export let renderers = $state({});
+
+$effect.root(() => {
+	$effect(() => {
+		const { width, height, pixelRatio } = rendering;
+
+		Object.keys(renderers).forEach((key) => {
+			const { instance, params } = renderers[key];
+
+			instance.resize?.({
+				width,
+				height,
+				pixelRatio,
+				...params,
+			});
+		});
+	});
+});
+
+function loadRenderer(renderingMode) {
+	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 (__P5_RENDERER__ && renderingMode === 'p5') {
+		return import('../renderers/P5Renderer.js');
+	}
+
+	if (__P5_WEBGL_RENDERER__ && renderingMode === 'p5-webgl') {
+		return import('../renderers/P5GLRenderer.js');
+	}
+
+	if (__2D_RENDERER__ && renderingMode === '2d') {
+		return import('../renderers/2DRenderer.js');
+	}
+}
+
+export async function findRenderer({ renderingMode, customRenderer }) {
+	let rendererModule = customRenderer
+		? typeof customRenderer === 'function'
+			? await customRenderer()
+			: customRenderer
+		: await loadRenderer(renderingMode);
+
+	if (rendererModule === renderers[renderingMode]) {
+		return rendererModule;
+	}
+
+	let params = {};
+
+	if (typeof rendererModule.init === 'function') {
+		let initParams = rendererModule.init({
+			canvas: document.createElement('canvas'),
+			pixelRatio: rendering.pixelRatio,
+			width: rendering.width,
+			height: rendering.height,
+		});
+
+		Object.assign(params, initParams);
+	}
+
+	// load and save
+	renderers[renderingMode] = {
+		instance: rendererModule,
+		params,
+	};
+
+	return rendererModule;
+}