fix(frontend): containers and tab fixes v1

2023-02-23 19:59:23 +01:00
parent c33df3deec
commit 08e2e6dbb2
8 changed files with 100 additions and 97 deletions
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -4,19 +4,16 @@
 	import type { AppInput } from '../../inputType'
 	import type { AppEditorContext, GridItem } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
-	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'

 	export let id: string
-	export let componentInput: AppInput | undefined
-	export let initializing: boolean | undefined = undefined
 	export let configuration: Record<string, AppInput>
 	export let subGrids: GridItem[][] | undefined = undefined
 	export let componentContainerHeight: number
+	let noPadding: boolean | undefined = undefined

-	export const staticOutputs: string[] = ['loading', 'result']
+	export const staticOutputs: string[] = []
 	const { focusedGrid, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')

-	let result: string[] | undefined = undefined
 	let gridContent: string[] | undefined = undefined

 	function onFocus() {
@@ -29,15 +26,16 @@
 	$: $selectedComponent === id && onFocus()
 </script>

+<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+
 <InputValue {id} input={configuration.gridContent} bind:value={gridContent} />
-<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
-	{#if subGrids && subGrids[0]}
-		<SubGridEditor
-			bind:subGrid={subGrids[0]}
-			containerHeight={componentContainerHeight}
-			on:focus={() => {
-				$selectedComponent = id
-			}}
-		/>
-	{/if}
-</RunnableWrapper>
+{#if subGrids && subGrids[0]}
+	<SubGridEditor
+		{noPadding}
+		bind:subGrid={subGrids[0]}
+		containerHeight={componentContainerHeight}
+		on:focus={() => {
+			$selectedComponent = id
+		}}
+	/>
+{/if}
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -6,27 +6,26 @@
 	import type { Output } from '../../rx'
 	import type { AppEditorContext, GridItem } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
-	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'

 	export let id: string
-	export let componentInput: AppInput | undefined
-	export let initializing: boolean | undefined = undefined
+
 	export let configuration: Record<string, AppInput>
 	export let subGrids: GridItem[][] | undefined = undefined
 	export let componentContainerHeight: number

-	export const staticOutputs: string[] = ['loading', 'result', 'selectedTabIndex']
+	export const staticOutputs: string[] = ['selectedTabIndex']
 	const { worldStore, focusedGrid, selectedComponent } =
 		getContext<AppEditorContext>('AppEditorContext')

-	let result: string[] | undefined = undefined
+	let tabs: string[]
 	let gridContent: string[] | undefined = undefined
 	let selected: string = ''
+	let noPadding: boolean | undefined = undefined

-	$: selectedIndex = result?.indexOf(selected) ?? -1
+	$: selectedIndex = tabs?.indexOf(selected) ?? -1

-	$: if (result && selected === '') {
-		selected = result[0]
+	$: if (tabs && selected === '') {
+		selected = tabs[0]
 	}

 	$: outputs = $worldStore?.outputsById[id] as {
@@ -51,10 +50,13 @@
 </script>

 <InputValue {id} input={configuration.gridContent} bind:value={gridContent} />
-<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
+<InputValue {id} input={configuration.tabs} bind:value={tabs} />
+<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+
+<div>
 	<div bind:clientHeight={tabHeight}>
 		<Tabs bind:selected>
-			{#each result ?? [] as res}
+			{#each tabs ?? [] as res}
 				<Tab value={res}>
 					<span class="font-semibold">{res}</span>
 				</Tab>
@@ -63,6 +65,7 @@
 	</div>
 	{#if subGrids && subGrids[selectedIndex]}
 		<SubGridEditor
+			{noPadding}
 			bind:subGrid={subGrids[selectedIndex]}
 			containerHeight={componentContainerHeight - tabHeight}
 			on:focus={() => {
@@ -70,4 +73,4 @@
 			}}
 		/>
 	{/if}
-</RunnableWrapper>
+</div>
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -2,34 +2,13 @@
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../types'
 	import PanelSection from './settingsPanel/common/PanelSection.svelte'
-	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
 	import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte'
-	import TablePanel from './TablePanel.svelte'
+	import SettingsPanelRec from './SettingsPanelRec.svelte'

 	const { selectedComponent, lazyGrid, app } = getContext<AppEditorContext>('AppEditorContext')
 </script>

-{#each $lazyGrid as gridItem (gridItem.data.id)}
-	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel bind:component={gridItem.data} />
-	{:else if gridItem.data.type === 'tablecomponent'}
-		<TablePanel bind:component={gridItem.data} />
-	{:else if gridItem.data.subGrids}
-		{#each gridItem.data.subGrids as subGrid}
-			{#each subGrid as subGridItem, index (subGridItem.data.id)}
-				{#if subGridItem.data.id === $selectedComponent}
-					<ComponentPanel
-						bind:component={subGridItem.data}
-						onDelete={() => {
-							subGrid.splice(index, 1)
-							subGrid = subGrid
-						}}
-					/>
-				{/if}
-			{/each}
-		{/each}
-	{/if}
-{/each}
+<SettingsPanelRec bind:gridItems={$lazyGrid} />

 {#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 	{#if $selectedComponent === `bg_${index}`}
--- a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { createEventDispatcher, getContext } from 'svelte'
+	import type { AppEditorContext, GridItem } from '../types'
+
+	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
+	import TablePanel from './TablePanel.svelte'
+
+	const { selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+
+	export let gridItems: GridItem[]
+</script>
+
+{#each gridItems as gridItem (gridItem.data.id)}
+	{#if gridItem.data.id === $selectedComponent}
+		<ComponentPanel bind:gridItems bind:component={gridItem.data} />
+	{:else if gridItem.data.type === 'tablecomponent'}
+		<TablePanel bind:component={gridItem.data} />
+	{:else if gridItem.data.subGrids}
+		{#each gridItem.data.subGrids as subGrid}
+			{#each subGrid as subGridItem (subGridItem.data.id)}
+				<svelte:self gridItems={subGrid} />
+			{/each}
+		{/each}
+	{/if}
+{/each}
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -8,6 +8,7 @@

 	export let subGrid: GridItem[]
 	export let containerHeight: number
+	export let noPadding = false

 	const dispatch = createEventDispatcher()

@@ -73,7 +74,8 @@

 <div class="relative w-full subgrid " bind:this={container}>
 	<div
-		class="px-4 pt-4 overflow-auto  {$connectingInput?.opened ? '' : ''}"
+		class:px-2={!noPadding}
+		class="py-2 overflow-auto  {$connectingInput?.opened ? '' : ''}"
 		on:pointerdown|stopPropagation={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -161,16 +161,17 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 		dims: '2:8-6:8',
 		data: {
 			softWrap: true,
-			verticalAlignment: 'center',
 			id: '',
 			type: 'containercomponent',
-			configuration: {},
-			componentInput: {
-				type: 'static',
-				fieldType: 'array',
-				subFieldType: 'text',
-				value: ['First Tab', 'Second Tab']
+			configuration: {
+				noPadding: {
+					type: 'static',
+					fieldType: 'boolean',
+					value: false,
+					onlyStatic: true
+				}
 			},
+			componentInput: undefined,
 			card: false,
 			subGrids: [[]]
 		}
@@ -1012,16 +1013,24 @@ Hello \${ctx.username}
 		dims: '2:8-6:8',
 		data: {
 			softWrap: true,
-			verticalAlignment: 'center',
 			id: '',
 			type: 'tabscomponent',
-			configuration: {},
-			componentInput: {
-				type: 'static',
-				fieldType: 'array',
-				subFieldType: 'text',
-				value: ['First Tab', 'Second Tab']
+			configuration: {
+				noPadding: {
+					type: 'static',
+					fieldType: 'boolean',
+					value: false,
+					onlyStatic: true
+				},
+				tabs: {
+					type: 'static',
+					fieldType: 'array',
+					subFieldType: 'text',
+					value: ['First Tab', 'Second Tab'],
+					onlyStatic: true
+				}
 			},
+			componentInput: undefined,
 			card: false,
 			subGrids: [[], []]
 		}
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -2,7 +2,7 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { faCopy, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../../types'
+	import type { AppEditorContext, GridItem } from '../../types'
 	import PanelSection from './common/PanelSection.svelte'
 	import InputsSpecsEditor from './InputsSpecsEditor.svelte'
 	import TableActions from './TableActions.svelte'
@@ -29,8 +29,8 @@
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'

 	export let component: AppComponent | undefined
-	export let onDelete: (() => void) | undefined = undefined
 	export let rowColumns = false
+	export let gridItems: GridItem[]

 	const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } =
 		getContext<AppEditorContext>('AppEditorContext')
@@ -62,44 +62,31 @@

 	function removeGridElement() {
 		$selectedComponent = undefined
-		if (onDelete && component) {
+		if (component) {
+			gridItems = gridItems.filter((gridComponent) => gridComponent.data.id !== component?.id)
+
 			delete $staticOutputs[component.id]
 			$staticOutputs = $staticOutputs

 			delete $runnableComponents[component.id]
 			$runnableComponents = $runnableComponents

-			onDelete()
-			// Delete static inputs
-		} else {
-			if (component) {
-				$app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id)
+			if (
+				component.componentInput?.type === 'runnable' &&
+				component.componentInput?.runnable?.type === 'runnableByName'
+			) {
+				const { name, inlineScript } = component.componentInput.runnable

-				// Delete static inputs
-				delete $staticOutputs[component.id]
-				$staticOutputs = $staticOutputs
+				if (inlineScript) {
+					if (!$app.unusedInlineScripts) {
+						$app.unusedInlineScripts = []
+					}

-				delete $runnableComponents[component.id]
-				$runnableComponents = $runnableComponents
-			}
-		}
-
-		if (
-			component &&
-			component.componentInput?.type === 'runnable' &&
-			component.componentInput?.runnable?.type === 'runnableByName'
-		) {
-			const { name, inlineScript } = component.componentInput.runnable
-
-			if (inlineScript) {
-				if (!$app.unusedInlineScripts) {
-					$app.unusedInlineScripts = []
+					$app.unusedInlineScripts.push({
+						name,
+						inlineScript
+					})
 				}
-
-				$app.unusedInlineScripts.push({
-					name,
-					inlineScript
-				})
 			}
 		}
 	}
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -303,7 +303,7 @@ export function createNewGridItem(grid: GridItem[], id: string, data: AppCompone
 	return newItem
 }

-function recursiveGetIds(gridItem: GridItem): string[] {
+export function recursiveGetIds(gridItem: GridItem): string[] {
 	const subGrids = gridItem.data.subGrids ?? []
 	const subGridIds = subGrids
 		.map((subGrid: GridItem[]) => subGrid.map(recursiveGetIds))