diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte index e85fd68172ae..83b0b39def62 100644 --- a/frontend/src/lib/components/apps/editor/AppPreview.svelte +++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte @@ -20,7 +20,7 @@ import { columnConfiguration } from '../gridUtils' import { HiddenComponent } from '../components' import { deepEqual } from 'fast-equals' - import { dfs } from './appUtils' + import { dfs, maxHeight } from './appUtils' import { BG_PREFIX, migrateApp } from '../utils' import { workspaceStore, enterpriseLicense } from '$lib/stores' import DarkModeObserver from '$lib/components/DarkModeObserver.svelte' @@ -161,13 +161,17 @@ } } } + + let appHeight: number = 0 + + $: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint) -
+
@@ -201,7 +205,7 @@ class={twMerge( 'p-2 overflow-visible', app.css?.['app']?.['grid']?.class ?? '', - 'wm-app-grid subgrid' + 'wm-app-grid subgrid' )} bind:clientWidth={$parentWidth} > @@ -210,16 +214,24 @@ allIdsInPath={$allIdsInPath} items={app.grid} let:dataItem - rowHeight={36} + let:hidden cols={columnConfiguration} - gap={[4, 2]} + {maxRow} + breakpoint={$breakpoint} >
($selectedComponent = [dataItem.id])} > - +
@@ -228,6 +240,7 @@ {#if isLocked} +
(isLocked = false)} class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer" diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte index 34b7a44bac8b..5d1fbd7b1264 100644 --- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte +++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte @@ -1,7 +1,7 @@
{ + const gridItem = findGridItem($app, dataItem.id) + const b = $breakpoint === 'sm' ? 3 : 12 + + if (gridItem?.[b]) { + gridItem[b].fullHeight = !gridItem[b].fullHeight + } + $app = $app + }} /> @@ -156,11 +168,12 @@ allIdsInPath={$allIdsInPath} items={$app.subgrids?.[subGridId] ?? []} let:dataItem - rowHeight={36} + let:hidden cols={columnConfiguration} - gap={[4, 2]} + breakpoint={$breakpoint} parentWidth={$parentWidth - 17} {containerWidth} + {maxRow} >
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts index 8374908660dd..e463b033cf12 100644 --- a/frontend/src/lib/components/apps/editor/appUtils.ts +++ b/frontend/src/lib/components/apps/editor/appUtils.ts @@ -246,7 +246,8 @@ export function createNewGridItem( const newComponent = { fixed: false, x: 0, - y: 0 + y: 0, + fullHeight: false } let newData: AppComponent = JSON.parse(JSON.stringify(data)) @@ -378,6 +379,7 @@ export function insertNewGridItem( const id = keepId ?? getNextGridItemId(app) const data = builddata(id) + if (data.type == 'aggridcomponentee' && !get(enterpriseLicense)) { sendUserToast('AgGrid Enterprise Edition require Windmill Enterprise Edition', true) throw Error('AgGrid Enterprise Edition require Windmill Enterprise Edition') @@ -972,3 +974,29 @@ export function collectOneOfFields(fields: AppInputs, app: App) { }) ) } + +export const ROW_HEIGHT = 36 +export const ROW_GAP_Y = 2 +export const ROW_GAP_X = 4 + +export function maxHeight( + grid: GridItem[], + windowHeight: number, + breakpoint: EditorBreakpoint = 'lg' +) { + const totalRowHeight = ROW_HEIGHT + ROW_GAP_Y + let maxRows = Math.floor((windowHeight - ROW_GAP_Y) / totalRowHeight) + + if (!grid.length) { + return maxRows + } + + const breakpointKey = breakpoint === 'sm' ? 3 : 12 + const maxRowPerGrid = grid.reduce((max, item) => { + const y = item[breakpointKey].y + const h = item[breakpointKey].h + return Math.max(max, y + h) + }, 0) + + return Math.max(maxRowPerGrid, maxRows) +} diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte index a6028b3dc8ce..4236f232bb51 100644 --- a/frontend/src/lib/components/apps/editor/component/Component.svelte +++ b/frontend/src/lib/components/apps/editor/component/Component.svelte @@ -80,6 +80,8 @@ export let selected: boolean export let locked: boolean = false export let render: boolean + export let hidden: boolean + export let fullHeight: boolean const { mode, app, hoverStore, connectingInput } = getContext('AppViewerContext') @@ -115,7 +117,9 @@ } }} on:mouseout|stopPropagation={mouseOut} - class="h-full flex flex-col w-full component {initializing ? 'overflow-hidden h-0' : ''}" + class="h-full flex flex-col w-full component {initializing + ? 'overflow-hidden h-0' + : ''} {hidden && $mode === 'preview' ? 'hidden' : ''} " > {#if $mode !== 'preview'} = 0 - } @@ -442,6 +439,30 @@ Show
+ + {#if componentSettings?.item?.[12]?.fullHeight !== undefined} + + {/if} + {#if componentSettings?.item?.[3]?.fullHeight !== undefined} + + {/if} + {#if viewCssOptions}
diff --git a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte index a74b6f9ad119..10c21a30de79 100644 --- a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte +++ b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte @@ -5,22 +5,21 @@ import { getColumn, throttle } from './utils/other' import MoveResize from './MoveResize.svelte' import type { FilledItem } from './types' - import { sortGridItemsPosition } from '../editor/appUtils' + import { ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT, sortGridItemsPosition } from '../editor/appUtils' const dispatch = createEventDispatcher() type T = $$Generic export let items: FilledItem[] - export let rowHeight: number + export let rowHeight: number = ROW_HEIGHT export let cols: [number, number][] - export let gap = [10, 10] + export let gap = [ROW_GAP_X, ROW_GAP_Y] export let throttleUpdate = 100 export let throttleResize = 100 export let selectedIds: string[] | undefined export let allIdsInPath: string[] | undefined export let containerWidth: number | undefined = undefined - export let scroller: HTMLElement | undefined = undefined export let sensor = 20 @@ -136,13 +135,25 @@ const throttleMatrix = throttle(updateMatrix, throttleResize) + //let hiddenComponents = writable({}) + const handleRepaint = ({ detail }) => { if (!detail.isPointerUp) { throttleMatrix({ detail }) } else { updateMatrix({ detail }) } + + /** + setTimeout(() => { + $hiddenComponents = { + ...$hiddenComponents, + [detail.id]: updateComponentVisibility(detail, sortedItems, getComputedCols) + } + }, 0) + */ } + let moveResizes: Record = {} let shadows: Record = {} @@ -193,7 +204,7 @@ nativeContainer={container} > {#if item[getComputedCols]} - +