From 00c56a2d687e017d96e447e51737e697d7dea3a8 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sun, 18 Aug 2024 02:07:41 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=9A=EF=B8=8F=20Expands=20layout=20mana?=
 =?UTF-8?q?ger=20with=20widget=20sizing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/layout/DynamicLayout.svelte    |  2 +-
 .../lib/components/layout/LayoutManager.ts    | 66 +++++++++++--------
 app/src/lib/components/layout/Widget.svelte   |  9 ++-
 app/src/routes/controller/+layout.svelte      |  2 +-
 4 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/app/src/lib/components/layout/DynamicLayout.svelte b/app/src/lib/components/layout/DynamicLayout.svelte
index 2a60f4c..29089a2 100644
--- a/app/src/lib/components/layout/DynamicLayout.svelte
+++ b/app/src/lib/components/layout/DynamicLayout.svelte
@@ -20,7 +20,7 @@
 		class:flex-wrap={container.layout === 'wrap'}
 	>
 		{#each container.widgets as widget, index (widget.id + '-' + index)}
-			<Widget size={widget.size ?? 1}>
+			<Widget size={widget.size} sizeUnit={widget.sizeUnit}>
 				{#if isWidgetConfig(widget)}
 					<svelte:component this={WidgetComponents[widget.component]} {...widget.props} />
 				{:else if widget.widgets}
diff --git a/app/src/lib/components/layout/LayoutManager.ts b/app/src/lib/components/layout/LayoutManager.ts
index 687668f..2ce2233 100644
--- a/app/src/lib/components/layout/LayoutManager.ts
+++ b/app/src/lib/components/layout/LayoutManager.ts
@@ -4,10 +4,20 @@ import Stream from '$lib/components/Stream.svelte';
 import CpuUsageChart from '$lib/components/widget/CpuUsageChart.svelte';
 import type { Writable } from 'svelte/store';
 
+export type SizeUnit = 'px' | '%' | 'fr' | 'em';
+
+export enum SizeUnitEnum {
+	Em = 'em',
+	Fractional = 'fr',
+	Percent = '%',
+	Pixel = 'px'
+}
+
 export interface WidgetConfig {
 	id: string | number;
 	component: keyof typeof WidgetComponents;
 	size?: number;
+	sizeUnit?: SizeUnitEnum;
 	props?: Record<string, any>;
 }
 
@@ -16,6 +26,7 @@ export interface WidgetContainerConfig {
 	layout: 'row' | 'column' | 'wrap';
 	header?: string;
 	size?: number;
+	sizeUnit?: SizeUnitEnum;
 	widgets: Array<WidgetConfig | WidgetContainerConfig>;
 }
 
@@ -41,32 +52,29 @@ export const phoneControllerLayout: Writable<WidgetContainerConfig> = persistent
 	} as WidgetContainerConfig
 );
 
-export const controllerLayout: Writable<WidgetContainerConfig> = persistentStore(
-	'controller_layout',
-	{
-		id: 'root',
-		layout: 'column',
-		widgets: [
-			{
-				id: 'visualization',
-				layout: 'column',
-				header: 'Visualization',
-				size: 2,
-				widgets: [
-					{ id: 1, component: 'Visualization', size: 2, props: { debug: true } },
-					{ id: 2, component: 'Stream' }
-				]
-			},
-			{
-				id: 'charts',
-				layout: 'row',
-				header: 'Charts',
-				widgets: [
-					{ id: 3, component: 'CpuUsageChart' },
-					{ id: 4, component: 'CpuUsageChart' },
-					{ id: 5, component: 'CpuUsageChart' }
-				]
-			}
-		]
-	} as WidgetContainerConfig
-);
+export const controllerLayout: Writable<WidgetContainerConfig> = persistentStore('controller_layout', {
+	id: 'root',
+	layout: 'column',
+	widgets: [
+		{
+			id: 'visualization',
+			layout: 'column',
+			header: 'Visualization',
+			widgets: [
+				{ id: 1, component: 'Stream' },
+				{ id: 2, component: 'Visualization', props: { debug: true } }
+			]
+		},
+		{
+			id: 'charts',
+			layout: 'row',
+			size: 40,
+			header: 'Charts',
+			widgets: [
+				{ id: 3, component: 'CpuUsageChart' },
+				{ id: 4, component: 'CpuUsageChart' },
+				{ id: 5, component: 'CpuUsageChart' }
+			]
+		}
+	]
+} as WidgetContainerConfig);
diff --git a/app/src/lib/components/layout/Widget.svelte b/app/src/lib/components/layout/Widget.svelte
index 42a289b..0e2bdbf 100644
--- a/app/src/lib/components/layout/Widget.svelte
+++ b/app/src/lib/components/layout/Widget.svelte
@@ -1,7 +1,10 @@
-<script>
-    export let size = 1;
+<script lang="ts">
+	import type { SizeUnit } from "./LayoutManager";
+
+    export let size = -1;
+    export let sizeUnit:SizeUnit = '%';
 </script>
 
-<div class="box-border overflow-hidden min-w-96" style="flex: {size}">
+<div class="box-border overflow-hidden min-w-96 "class:flex-1={size === -1}>
     <slot></slot>
 </div>
diff --git a/app/src/routes/controller/+layout.svelte b/app/src/routes/controller/+layout.svelte
index 39f318a..5145cd4 100644
--- a/app/src/routes/controller/+layout.svelte
+++ b/app/src/routes/controller/+layout.svelte
@@ -8,6 +8,6 @@
 	<Controls />
 	<!-- <button class="absolute z-20 btn" on:click={addWidget}>Add Widget</button> -->
 	<div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
-		<WidgetContainer container={$phoneControllerLayout} />
+		<WidgetContainer container={$controllerLayout} />
 	</div>
 </div>