From ddda14c52beb306c9acd3475d81e848ff6f0acdf Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 11:39:50 +0100
Subject: [PATCH] app fixes

---
 .../components/layout/AppContainer.svelte     |  2 ++
 .../apps/components/layout/AppTabs.svelte     |  2 ++
 .../apps/editor/AppEditorHeader.svelte        |  2 +-
 .../components/apps/editor/GridEditor.svelte  |  5 ++--
 .../apps/editor/SubGridEditor.svelte          | 28 ++++---------------
 frontend/src/lib/components/apps/utils.ts     |  1 -
 6 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
index 134b3a9149..be7d9909d7 100644
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -34,6 +34,8 @@
 		{noPadding}
 		bind:subGrid={subGrids[0]}
 		containerHeight={componentContainerHeight}
+		parentId={id}
+		index={0}
 		on:focus={() => {
 			$selectedComponent = id
 		}}
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 47ea2e333a..c2a1a12bf4 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -63,6 +63,8 @@
 	</div>
 	{#if subGrids && subGrids[selectedIndex]}
 		<SubGridEditor
+			parentId={id}
+			index={selectedIndex}
 			{noPadding}
 			bind:subGrid={subGrids[selectedIndex]}
 			containerHeight={componentContainerHeight - tabHeight}
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index d81a9eccf4..6403b020a1 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -467,8 +467,8 @@
 				<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
 				<button
 					on:click={() => {
-						$focusedGrid = undefined
 						$selectedComponent = undefined
+						$focusedGrid = undefined
 					}}
 				>
 					<X size={14} />
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index fe6150b607..d6c9beed19 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -37,8 +37,8 @@
 			const disabledGridItem = fct(gridItem)
 
 			if (disabledGridItem.data.subGrids) {
-				disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map((subgrid: GridItem[]) =>
-					subgrid.map((subgridItem: GridItem) => fct(subgridItem))
+				disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map(
+					(subgrid: GridItem[]) => subgrid?.map((subgridItem: GridItem) => fct(subgridItem)) ?? []
 				)
 			}
 
@@ -87,6 +87,7 @@
 	function selectComponent(id: string) {
 		if (!$connectingInput.opened) {
 			$selectedComponent = id
+			$focusedGrid = undefined
 		}
 	}
 
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 7d4fcbb905..1e8dabe5a3 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -9,6 +9,8 @@
 	export let subGrid: GridItem[]
 	export let containerHeight: number
 	export let noPadding = false
+	export let parentId: string
+	export let index: number
 
 	const dispatch = createEventDispatcher()
 
@@ -36,6 +38,10 @@
 		onComponent = id
 		if (!$connectingInput.opened) {
 			$selectedComponent = id
+			$focusedGrid = {
+				parentComponentId: parentId,
+				subGridIndex: index
+			}
 		}
 	}
 
@@ -48,28 +54,6 @@
 
 	// @ts-ignore
 	let container
-
-	$: if ($focusedGrid?.parentComponentId !== $selectedComponent) {
-		const gridItemIds = $app.grid
-			.map((gridItem: GridItem) => {
-				if (gridItem.data.id === $focusedGrid?.parentComponentId) {
-					const subGrids = gridItem.data.subGrids ?? []
-					return [
-						gridItem.data.id,
-						...subGrids.map((subGrid: GridItem[]) =>
-							subGrid.map((gridItem: GridItem) => gridItem.data.id)
-						)
-					]
-				} else {
-					return []
-				}
-			})
-			.flat(2)
-
-		if (!gridItemIds.includes($selectedComponent)) {
-			$focusedGrid = undefined
-		}
-	}
 </script>
 
 <div class="relative w-full subgrid " bind:this={container}>
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index f2658caf5f..25ecd119f0 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -20,7 +20,6 @@ export function deleteComponent(parentItems: GridItem[] | undefined, component:
 	(component.subGrids ?? []).forEach((subgrid) => {
 		if (subgrid) {
 			subgrid.forEach((item) => {
-				console.log(item)
 				if (item.data) {
 					console.log(item.data)
 					deleteComponent(undefined, item.data, app, staticOutputs, runnableComponents)