diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte index 172f5cc60e..a6bffc871e 100644 --- a/frontend/src/lib/components/apps/editor/AppEditor.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte @@ -185,13 +185,13 @@ {:else} - + - +
{ $selectedComponent = undefined diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts index 1692a0553a..971a711b43 100644 --- a/frontend/src/lib/components/apps/editor/appUtils.ts +++ b/frontend/src/lib/components/apps/editor/appUtils.ts @@ -1,5 +1,5 @@ import { getNextId } from '$lib/components/flows/flowStateUtils' -import type { App, EditorBreakpoint, FocusedGrid, GridItem } from '../types' +import type { App, ConnectingInput, EditorBreakpoint, FocusedGrid, GridItem } from '../types' import { getRecommendedDimensionsByComponent, type AppComponent } from './component' import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper' import { gridColumns } from '../gridUtils' @@ -39,7 +39,7 @@ export function isIdInsideGriditem(app: App, gridItem: GridItem, id: string | un let currentId = id while (currentId) { path.push(currentId) - currentId = findGridItemParentId(app, currentId) + currentId = findGridItemParentGrid(app, currentId)?.split('-')[0] } return path.includes(gridItem.id) @@ -58,7 +58,6 @@ export function getNextGridItemId(app: App): string { } export function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem { - const newComponent = { resizable: true, draggable: true, @@ -116,7 +115,6 @@ export function insertNewGridItem( app.subgrids = {} } - // We only want to set subgrids when we are not moving if (!keepId) { for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) { @@ -124,8 +122,9 @@ export function insertNewGridItem( } } - - const key = focusedGrid ? `${focusedGrid?.parentComponentId}-${focusedGrid?.subGridIndex ?? 0}` : undefined + const key = focusedGrid + ? `${focusedGrid?.parentComponentId}-${focusedGrid?.subGridIndex ?? 0}` + : undefined let grid = focusedGrid ? app.subgrids[key!] : app.grid const newItem = createNewGridItem(grid, id, data) @@ -188,8 +187,6 @@ export function deleteGridItem( return components } - - type AvailableSpace = { left: number right: number @@ -297,11 +294,14 @@ function isOverlapping(item1: any, item2: any) { } type Outputtable = { - -readonly [Property in keyof Type]: Output; -}; + -readonly [Property in keyof Type]: Output +} - -export function initOutput>(world: World, id: string, init: I): Outputtable { +export function initOutput>( + world: World, + id: string, + init: I +): Outputtable { const output = world.outputsById[id] as Outputtable if (init) { for (const key in init) { @@ -333,3 +333,53 @@ export function expandGriditem( item.w = item.w + left + right item.h = item.h + top + bottom } + +export function sortGridItemsPosition( + gridItems: GridItem[], + breakpoint: EditorBreakpoint +): GridItem[] { + return gridItems.sort((a: GridItem, b: GridItem) => { + const width = breakpoint === 'lg' ? 12 : 3 + + const aX = a[width].x + const aY = a[width].y + const bX = b[width].x + const bY = b[width].y + + if (aY < bY) { + return -1 + } else if (aY > bY) { + return 1 + } else { + if (aX < bX) { + return -1 + } else if (aX > bX) { + return 1 + } else { + return 0 + } + } + }) +} + +export function connectInput( + connectingInput: ConnectingInput, + componentId: string, + path: string +): ConnectingInput { + if (connectingInput) { + connectingInput = { + opened: false, + input: { + connection: { + componentId, + path + }, + type: 'connected' + }, + hoveredComponent: undefined + } + } + + return connectingInput +} diff --git a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte index 694e0c7c89..7bb6d7d148 100644 --- a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte +++ b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte @@ -1,12 +1,11 @@ diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte index 508c988d18..bed0bc1d23 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte @@ -4,8 +4,8 @@ import type { AppViewerContext, GridItem } from '../../types' import ComponentOutputViewer from './ComponentOutputViewer.svelte' import { classNames } from '$lib/utils' - import { ChevronDown, ChevronRight, FolderOpen } from 'lucide-svelte' - import { isIdInsideGriditem } from '../appUtils' + import { ChevronDown, ChevronRight, Lock } from 'lucide-svelte' + import { connectInput, isIdInsideGriditem } from '../appUtils' import { slide } from 'svelte/transition' import SubGridOutput from './SubGridOutput.svelte' @@ -15,7 +15,8 @@ export let parentId: string | undefined = undefined export let expanded: boolean = false - const { app, staticOutputs, selectedComponent } = getContext('AppViewerContext') + const { app, staticOutputs, selectedComponent, connectingInput } = + getContext('AppViewerContext') const name = getComponentNameById(gridItem.id) function getComponentNameById(componentId: string) { @@ -84,16 +85,24 @@ {getComponentNameById(gridItem.id)} {#if !opened && !manuallyOpened} + {:else if manuallyOpened} + {:else} - + {/if}
{#if opened}
-
- +
+ { + $connectingInput = connectInput($connectingInput, gridItem.id, detail) + }} + />
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte index e61a673479..8ae6dee3b0 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte @@ -1,31 +1,18 @@ -
-
-
- - {#if search} - - {/if} +
+
+
+
+ + {#if search} + + {/if} +
-
-
- -
+
+ +
- {#each $app.grid as gridItem, index} - - {/each} +
+ ctx +
+ { + $connectingInput = connectInput($connectingInput, 'ctx', detail) + }} + /> + + {#each sortGridItemsPosition($app.grid, $breakpoint) as gridItem, index} + + {/each} +
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte index 1c0f94d500..e8a10c8750 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte @@ -4,6 +4,7 @@ import { slide } from 'svelte/transition' import type { Output } from '../../rx' import type { AppViewerContext } from '../../types' + import { connectInput, sortGridItemsPosition } from '../appUtils' import ComponentOutput from './ComponentOutput.svelte' export let name: string | undefined = undefined @@ -11,7 +12,8 @@ export let expanded: boolean = false export let subGrids: string[] - const { app, worldStore } = getContext('AppViewerContext') + const { app, connectingInput, breakpoint, worldStore } = + getContext('AppViewerContext') let selected = 0 @@ -51,10 +53,16 @@ {#if selected === index || name !== 'Tabs'}
{#if $app.subgrids && $app.subgrids[subGridId].length > 0} - {#each $app.subgrids[subGridId] as subGridItem, index} - {#if subGridItem} - - {/if} + {#each sortGridItemsPosition($app.subgrids[subGridId], $breakpoint) as subGridItem, index} + { + $connectingInput = connectInput($connectingInput, subGridItem.id, detail) + }} + /> {/each} {:else}
No components