fragment-tools 0.1.20 → 0.2.0

package/src/client/app/ui/LayoutComponent.svelte

@@ -1,207 +1,92 @@
-<script context="module">
-	let ID = 0;
-</script>
-
 <script>
-	import { getContext, hasContext, onDestroy, setContext } from 'svelte';
-	import { writable } from 'svelte/store';
-	import {
-		addChildren,
-		addSibling,
-		layout,
-		remove,
-		replaceChildren,
-		swapRoot,
-		updateModule,
-	} from '../stores/layout';
+	import { getContext, setContext } from 'svelte';
+	import { layout } from '../state/layout.svelte';
 	import Toolbar from './LayoutToolbar.svelte';
 	import Resizer from './LayoutResizer.svelte';
-	import { getModuleID } from './Module.svelte';
 	import ModuleRenderer from './ModuleRenderer.svelte';
 	import Preview from './Preview.svelte';
+	import LayoutComponent from './LayoutComponent.svelte';
 
-	export let size = 1;
-	export let type = 'column';
-	export let tree = { children: [] };
-
-	let parent = hasContext('parent') ? getContext('parent') : null;
-	let depth = hasContext('depth') ? getContext('depth') + 1 : 0;
-	let module = writable({});
-	setContext('depth', depth);
-	setContext('module', module);
+	let { id = layout.getID(), size = 1, type = 'column', children } = $props();
 
-	let isRoot = parent === null;
-	let children = writable([]);
-	let style = '';
+	let parent = getContext('parent');
+	let isColumn = $derived(type === 'column');
+	let isRow = $derived(!isColumn);
 
-	function createComponent({
+	const component = layout.createComponent({
 		id,
-		parent = null,
-		root = false,
-		node = null,
-		depth,
-		size = 1,
-		minimized = false,
-		type,
-		children = [],
-	}) {
-		return {
-			id,
-			root,
-			node,
-			depth,
-			size,
-			minimized,
-			parent: parent ? parent.id : null,
-			type,
-			children,
-		};
-	}
-
-	let current = createComponent({
-		id: !isNaN(tree.id) ? tree.id : ID++,
-		root: isRoot,
-		depth,
 		size,
-		parent,
+		origin: parent,
 		type,
 	});
 
-	ID = Math.max(ID, !isNaN(current.id) ? current.id + 1 : 0);
-
-	$: isColumn = type === 'column';
-	$: isRow = !isColumn;
-
-	const context = {
-		id: current.id,
-		children,
-		registerChild: (child) => {
-			$children = [...$children, child];
-
-			onDestroy(() => {
-				$children = $children.filter((c) => c !== child);
-			});
-		},
-	};
-
-	setContext('parent', context);
+	let current = $derived(layout.components.find((c) => c.id === id));
+	let childComponents = $derived(
+		current.children.map((c) => layout.getComponent(c)),
+	);
+	let minimized = $derived(current.minimized);
+	let isRoot = $derived(current.root);
 
-	if (parent) {
-		parent.registerChild(current);
-	}
-
-	if (!__BUILD__) {
-		$layout.registerChild(current, () => $children);
-	}
-
-	$: {
-		let property = ``,
-			value = ``;
-
-		const nodes = tree.children;
-
-		if (Array.isArray(nodes) && nodes.length > 1) {
-			if (isColumn) {
-				property = `grid-template-rows`;
-				value = nodes
-					.map((row, i) => {
-						let size = `${row.size}fr`;
-
-						return `minmax(25px, ${size}) 0px`;
-					})
-					.join(' ');
-			} else {
-				property = `grid-template-columns`;
-				value = nodes
-					.map((col, i) => {
-						let size = `${col.size}fr`;
-
-						return `minmax(25px, ${size}) 0px`;
-					})
-					.join(' ');
-			}
+	setContext('parent', component.id);
+	setContext('minimize', () => {
+		component.minimized = !component.minimized;
+	});
 
-			style = `${property}:${value}`;
-		} else {
-			style = '';
-		}
-	}
+	let property = $derived(
+		isColumn ? `grid-template-rows` : `grid-template-columns`,
+	);
+	let value = $derived.by(() => {
+		const totalSize = childComponents.reduce((t, n) => t + n.size, 0);
+		return childComponents
+			.map(({ size, minimized }) =>
+				minimized && isColumn && !layout.editing
+					? '25px 0px'
+					: `minmax(25px, ${(size / totalSize) * 100}%) 0px`,
+			)
+			.join(' ');
+	});
+	let style = $derived(
+		Array.isArray(childComponents) && childComponents.length > 0
+			? `${property}:${value}`
+			: '',
+	);
 
 	function addComponent(newType) {
-		const isSibling = newType === type;
+		const childCount = childComponents.length;
 
-		const newborn = createComponent({
-			id: ID++,
-			parent: isSibling ? parent : context,
-			depth: isSibling ? depth : depth + 1,
+		layout.createComponent({
+			origin: current.id,
 			type: newType,
-			children: [{ mID: getModuleID(), type: 'module' }],
 		});
 
-		if (isSibling) {
-			if (isRoot) {
-				const newSibling = createComponent({
-					id: ID++,
-					depth: newborn.depth,
-					type: newborn.type,
-					children: current.children,
-				});
-
-				// switch type
-				current.children = [newSibling, newborn];
-				current.type = current.type === 'column' ? 'row' : 'column';
-
-				swapRoot(current);
-			} else {
-				addSibling(current, newborn);
-			}
-		} else {
-			if ($children.length === 1 && $children[0].type === 'module') {
-				replaceChildren(current, [
-					...$children.map((c, i) =>
-						createComponent({
-							id: ID++,
-							type: type === 'row' ? 'column' : 'row',
-							depth: depth + 1,
-							children: [c],
-						}),
-					),
-					newborn,
-				]);
-
-				module.set({});
-			} else {
-				addChildren(current, newborn);
-			}
+		// create a second child of new type to create divisions
+		// instead of a single child component which wouldn't make any visual change
+		if (childCount === 0 && newType !== current.type) {
+			layout.createComponent({
+				origin: current.id,
+				type: newType,
+			});
 		}
 	}
 
-	function addColumn() {
-		addComponent('column');
-	}
-
-	function addRow() {
-		addComponent('row');
-	}
+	const addColumn = () => addComponent('column');
+	const addRow = () => addComponent('row');
 
 	function deleteCurrent() {
-		remove(current);
-
-		$children = current.children;
+		layout.remove(current);
 	}
 
-	function handleModuleChange(event) {
-		const moduleName = event.detail;
-		$children[0].name = moduleName; // keep state when replacingChildren
-
-		updateModule($module, {
-			name: moduleName,
-		});
+	function handleModuleChange(moduleName) {
+		if (childComponents.length && childComponents[0].type === 'module') {
+			childComponents[0].name = moduleName; // keep state when replacingChildren
+		} else {
+			layout.createComponent({
+				type: 'module',
+				origin: current.id,
+				name: moduleName,
+			});
+		}
 	}
-
-	let offsetWidth;
-
-	$: minimized = current.minimized;
 </script>
 
 <div
@@ -211,43 +96,45 @@
 	class:row={isRow}
 	class:minimized
 	bind:this={current.node}
-	bind:offsetWidth
+	data-component={component.id}
 >
-	{#if isRoot && $layout.previewing}
+	{#if isRoot && layout.previewing}
 		<Preview />
-	{:else if tree && Array.isArray(tree.children) && tree.children.length > 0}
-		{#each tree.children as child (child.id)}
+	{:else if childComponents.length > 0}
+		{#each childComponents as child (child.id)}
 			{#if child.type === 'column' || child.type === 'row'}
-				<svelte:self type={child.type} size={child.size} tree={child} />
+				<LayoutComponent
+					id={child.id}
+					type={child.type}
+					size={child.size}
+				/>
 			{:else if child.type === 'module'}
 				<ModuleRenderer
+					id={child.id}
 					name={child.name}
-					mID={child.mID}
-					hasHeader={child.hasHeader}
+					headless={child.headless}
+					params={child.params}
 				/>
+			{:else}
+				<p>Cannot render child</p>
 			{/if}
 		{/each}
 	{:else}
-		<slot />
+		{@render children()}
 	{/if}
-	{#if $layout.editing && (($children.length === 1 && $children[0].type === 'module') || isRoot)}
+	{#if layout.editing && (isRoot || (childComponents.length === 1 && childComponents[0].type === 'module') || childComponents.length === 0)}
 		<Toolbar
 			{isRoot}
-			moduleName={$children[0].name}
-			on:change={handleModuleChange}
-			on:add-row={addRow}
-			on:add-column={addColumn}
-			on:delete={deleteCurrent}
-			vertical={offsetWidth < 300}
+			moduleName={childComponents[0]?.name}
+			onchange={handleModuleChange}
+			onAddRow={addRow}
+			onAddColumn={addColumn}
+			onDelete={deleteCurrent}
 		/>
 	{/if}
 </div>
 {#if !isRoot}
-	<Resizer
-		direction={isColumn ? 'vertical' : 'horizontal'}
-		{current}
-		{parent}
-	/>
+	<Resizer direction={isColumn ? 'vertical' : 'horizontal'} {current} />
 {/if}
 
 <style>
@@ -264,6 +151,10 @@
 		grid-template-rows: minmax(25px, 1fr);
 	}
 
+	.column.minimized {
+		height: 25px;
+	}
+
 	.column:not(:last-child) {
 		border-right: 0.5px solid var(--color-lightblack);
 	}

package/src/client/app/ui/LayoutResizer.svelte

@@ -8,45 +8,33 @@
 </script>
 
 <script>
-	import { layout, resize, traverse, tree } from '../stores/layout.js';
+	import { layout } from '../state/layout.svelte.js';
 	import { clamp, map } from '../utils/math.utils.js';
 
-	export let direction = DIRECTIONS.HORIZONTAL;
-	export let current;
-	export let parent = {};
+	let { direction = DIRECTIONS.HORIZONTAL, current } = $props();
 
-	const { children } = parent;
-
-	let visible = false;
-	let isDragging = false;
-	let next;
+	let visible = $state(false);
+	let isDragging = $state(false);
+	let next = $state(null);
+	let currentRect, nextRect;
+	let currentSize, nextSize, totalSize;
 
 	function findNext() {
-		if (children && current.node && current.node) {
-			const { parentNode } = current.node;
-			const childNodes = [...parentNode.children];
-
-			const index = childNodes.findIndex((c) => c === current.node);
-			const nextNode = childNodes[index + 2];
-
-			next = $children.find((c) => c.node === nextNode);
+		const { parent } = current;
+		const parentNode = layout.getComponent(parent).node;
 
-			traverse((c) => {
-				if (c.id === next.id) {
-					nextSize = c.size;
-				}
+		const childNodes = [...parentNode.children];
+		const currentNodeIndex = childNodes.findIndex(
+			(c) => c === current.node,
+		);
+		const nextNode = childNodes[currentNodeIndex + 2];
 
-				if (c.id === current.id) {
-					currentSize = c.size;
-				}
-			}, $tree);
-		}
+		next = layout.components.find((c) => c.node === nextNode);
+		nextSize = next.size;
+		currentSize = current.size;
 	}
 
-	let currentRect, nextRect;
-	let currentSize, nextSize, totalSize;
-
-	function handleMouseDown() {
+	function handleMouseDown(event) {
 		findNext();
 
 		if (!isDragging && next) {
@@ -62,6 +50,8 @@
 			nextRect = next.node.getBoundingClientRect();
 
 			visible = currentSize === nextSize;
+
+			handleMouseMove(event);
 		}
 	}
 
@@ -134,22 +124,20 @@
 			nextFlex = 0;
 		}
 
-		resize([
-			{ id: current.id, size: prevFlex },
-			{ id: next.id, size: nextFlex },
-		]);
+		current.size = prevFlex;
+		next.size = nextFlex;
 	}
 </script>
 
 <div
 	class="resizer resizer--{direction}"
 	class:dragging={isDragging}
-	class:editing={$layout.editing}
+	class:editing={layout.editing}
 >
 	<div
 		class="resizer-hover"
 		class:visible
-		on:mousedown={handleMouseDown}
+		onmousedown={handleMouseDown}
 	></div>
 </div>
 <svelte:window on:mouseup={handleMouseUp} on:mousemove={handleMouseMove} />
@@ -168,7 +156,7 @@
 
 	.resizer-hover {
 		position: absolute;
-		z-index: 100;
+		z-index: 200;
 
 		display: flex;
 		justify-content: center;

package/src/client/app/ui/LayoutRoot.svelte

@@ -1,11 +1,9 @@
 <script>
-	import { tree } from '../stores/layout';
 	import LayoutComponent from './LayoutComponent.svelte';
 
-	$: type = $tree.type;
-	$: size = $tree.size;
+	let { children } = $props();
 </script>
 
-<LayoutComponent tree={$tree} {type} {size}>
-	<slot />
+<LayoutComponent>
+	{@render children?.()}
 </LayoutComponent>

package/src/client/app/ui/LayoutRow.svelte

@@ -1,9 +1,9 @@
 <script>
 	import LayoutComponent from './LayoutComponent.svelte';
 
-	export let size = 1;
+	let { size = 1, children } = $props();
 </script>
 
 <LayoutComponent {size} type="row">
-	<slot />
+	{@render children?.()}
 </LayoutComponent>

package/src/client/app/ui/LayoutToolbar.svelte

@@ -1,32 +1,20 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import IconCross from '../components/IconCross.svelte';
 	import ButtonInput from './fields/ButtonInput.svelte';
 	import Select from './fields/Select.svelte';
 	import { moduleNames } from './ModuleRenderer.svelte';
 
-	const defaultValue = 'Select a module';
-
-	export let moduleName = undefined;
-	export let isRoot = false;
-	export let vertical = false;
-
-	const dispatch = createEventDispatcher();
-
-	let splitColumns = false;
-	let splitRows = false;
-
-	function handleAddRow() {
-		dispatch('add-row');
-	}
-
-	function handleAddColumn() {
-		dispatch('add-column');
-	}
+	let {
+		moduleName,
+		isRoot,
+		vertical = false,
+		onAddColumn,
+		onAddRow,
+		onDelete,
+		onchange,
+	} = $props();
 
-	function handleDelete() {
-		dispatch('delete');
-	}
+	const defaultValue = 'Select a module';
 
 	const options = [
 		{ value: undefined, label: defaultValue, disabled: true },
@@ -34,19 +22,14 @@
 	];
 </script>
 
-<div
-	class="toolbar"
-	class:root={isRoot}
-	class:split-columns={splitColumns}
-	class:split-rows={splitRows}
->
+<div class="toolbar" class:root={isRoot}>
 	<div class="content" class:vertical>
 		{#if !isRoot}
 			<div class="module">
 				<Select
 					value={moduleName}
 					{options}
-					on:change
+					{onchange}
 					title="Switch module"
 				/>
 			</div>
@@ -57,9 +40,7 @@
 				label="Split in columns"
 				showLabel={false}
 				title="Split in columns"
-				on:mouseenter={() => (splitColumns = true)}
-				on:mouseleave={() => (splitColumns = false)}
-				on:click={handleAddColumn}
+				onclick={onAddColumn}
 			>
 				<div class="icon-layout">
 					<div class="icon-box"></div>
@@ -70,9 +51,7 @@
 				label="Split in rows"
 				showLabel={false}
 				title="Split in rows"
-				on:mouseenter={() => (splitRows = true)}
-				on:mouseleave={() => (splitRows = false)}
-				on:click={handleAddRow}
+				onclick={onAddRow}
 			>
 				<div class="icon-layout row">
 					<div class="icon-box"></div>
@@ -84,7 +63,7 @@
 					<ButtonInput
 						label="Delete"
 						showLabel={false}
-						on:click={handleDelete}
+						onclick={onDelete}
 						--color-text="white"
 						--background-color="var(--color-red)"
 						--box-shadow-color-active="var(--color-lightred)"
@@ -102,7 +81,7 @@
 		position: absolute;
 		top: 0;
 		left: 0;
-		/* z-index: 200; */
+		z-index: 100;
 
 		display: grid;
 		justify-content: center;
@@ -116,47 +95,9 @@
 		background: rgba(0, 0, 0, 0.8);
 	}
 
-	.toolbar:after {
-		content: '';
-
-		position: absolute;
-		right: 0;
-		z-index: 100;
-
-		width: 6px;
-		height: 100%;
-
-		background-color: rgba(255, 255, 255, 0.2);
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 100ms ease;
-	}
-
-	.toolbar.split-columns:after {
-		opacity: 1;
-	}
-
-	.toolbar:before {
-		content: '';
-
-		position: absolute;
-		left: 0;
-		bottom: 0;
-
-		width: 100%;
-		height: 6px;
-
-		background-color: rgba(255, 255, 255, 0.2);
-		opacity: 0;
-		transition: opacity 100ms ease;
-	}
-
-	.toolbar.split-rows:before {
-		opacity: 1;
-	}
-
 	.toolbar.root {
 		align-items: flex-start;
+		z-index: 200;
 
 		pointer-events: none;
 	}