(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]}
-
+
{/if}
{/if}
diff --git a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
index 158035ed6de0..5052b0a7c55d 100644
--- a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
@@ -330,7 +330,6 @@
shadow.w = Math.round(Math.max((newSize.width + gapX * 2) / xPerPx, 1))
shadow.h = Math.round(Math.max((newSize.height + gapY * 2) / yPerPx, 1))
}
-
repaint(false, false)
}
}
diff --git a/frontend/src/lib/components/apps/svelte-grid/types.d.ts b/frontend/src/lib/components/apps/svelte-grid/types.d.ts
index 6879ada185c3..d57ec2bd4fd2 100644
--- a/frontend/src/lib/components/apps/svelte-grid/types.d.ts
+++ b/frontend/src/lib/components/apps/svelte-grid/types.d.ts
@@ -10,6 +10,7 @@ export interface Positon {
interface ItemLayout extends Size, Positon {
fixed: boolean
+ fullHeight: boolean
}
export type FilledItem = { [width: number]: Required; data: T; id: string }
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/helper.ts b/frontend/src/lib/components/apps/svelte-grid/utils/helper.ts
index 9022c7ee447c..47e5d1d2603e 100644
--- a/frontend/src/lib/components/apps/svelte-grid/utils/helper.ts
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/helper.ts
@@ -6,6 +6,7 @@ function makeItem(item) {
const { min = { w: 1, h: 1 }, max } = item
return {
fixed: false,
+ fullHeight: false,
min: {
w: Math.max(1, min.w),
h: Math.max(1, min.h)
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/overlap.ts b/frontend/src/lib/components/apps/svelte-grid/utils/overlap.ts
new file mode 100644
index 000000000000..a6de4d77a289
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/overlap.ts
@@ -0,0 +1,32 @@
+import type { FilledItem } from '../types'
+
+export function segmentsOverlap(x1: number, length1: number, x2: number, length2: number): boolean {
+ const end1: number = x1 + length1
+ const end2: number = x2 + length2
+
+ return Math.max(x1, x2) < Math.min(end1, end2)
+}
+
+export function updateComponentVisibility(
+ detail: FilledItem,
+ items: FilledItem[],
+ getComputedCols: number
+): boolean {
+ const c = items.find((x) => x.id === detail.id)
+
+ if (!c) return false
+
+ return items.some((item) => {
+ if (item?.data?.['fullHeight'] !== true || item.id === detail.id) {
+ return false
+ }
+
+ if (item[getComputedCols]) {
+ let { x, y, w } = item[getComputedCols]
+ let { x: x1, y: y1, w: w1 } = c[getComputedCols]
+
+ return y < y1 && segmentsOverlap(x, w, x1, w1)
+ }
+ return false
+ })
+}
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index a9d4e72cc03d..062862556087 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -11,6 +11,7 @@ import type {
HorizontalAlignment,
VerticalAlignment
} from './types'
+import { gridColumns } from './gridUtils'
export const BG_PREFIX = 'bg_'
@@ -26,7 +27,16 @@ export function migrateApp(app: App) {
x.doNotRecomputeOnInputChanged = undefined
}
})
+
+ allItems(app.grid, app.subgrids).forEach((x) => {
+ gridColumns.forEach((column: number) => {
+ if (x?.[column]?.fullHeight === undefined) {
+ x[column].fullHeight = false
+ }
+ })
+ })
}
+
export function allItems(
grid: GridItem[],
subgrids: Record | undefined
diff --git a/frontend/src/lib/components/details/createAppFromScript.ts b/frontend/src/lib/components/details/createAppFromScript.ts
index 2c5b52889fe3..12bfb8a78769 100644
--- a/frontend/src/lib/components/details/createAppFromScript.ts
+++ b/frontend/src/lib/components/details/createAppFromScript.ts
@@ -7,14 +7,16 @@ export function createAppFromScript(path: string, schema: Record |
x: 0,
y: 0,
w: 2,
- h: 8
+ h: 8,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 0,
w: 12,
- h: 21
+ h: 21,
+ fullHeight: false
},
data: {
type: 'verticalsplitpanescomponent',
@@ -40,14 +42,16 @@ export function createAppFromScript(path: string, schema: Record |
x: 0,
y: 1,
w: 3,
- h: 8
+ h: 8,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 0,
w: 12,
- h: 19
+ h: 19,
+ fullHeight: false
},
data: {
type: 'schemaformcomponent',
@@ -77,14 +81,16 @@ export function createAppFromScript(path: string, schema: Record |
x: 0,
y: 0,
w: 1,
- h: 1
+ h: 1,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 19,
w: 12,
- h: 1
+ h: 1,
+ fullHeight: false
},
data: {
type: 'buttoncomponent',
@@ -262,14 +268,16 @@ export function createAppFromScript(path: string, schema: Record |
x: 0,
y: 0,
w: 2,
- h: 8
+ h: 8,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 0,
w: 12,
- h: 20
+ h: 20,
+ fullHeight: false
},
data: {
type: 'tabscomponent',
@@ -306,14 +314,16 @@ export function createAppFromScript(path: string, schema: Record |
x: 0,
y: 0,
w: 2,
- h: 8
+ h: 8,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 0,
w: 12,
- h: 18
+ h: 18,
+ fullHeight: false
},
data: {
type: 'displaycomponent',
@@ -339,14 +349,16 @@ export function createAppFromScript(path: string, schema: Record |
x: 0,
y: 0,
w: 2,
- h: 8
+ h: 8,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 0,
w: 12,
- h: 18
+ h: 18,
+ fullHeight: false
},
data: {
type: 'jobidlogcomponent',
@@ -410,14 +422,16 @@ export function createAppFromFlow(path: string, schema: Record | un
x: 0,
y: 0,
w: 2,
- h: 8
+ h: 8,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 0,
w: 12,
- h: 21
+ h: 21,
+ fullHeight: false
},
data: {
type: 'verticalsplitpanescomponent',
@@ -443,14 +457,16 @@ export function createAppFromFlow(path: string, schema: Record | un
x: 0,
y: 1,
w: 3,
- h: 8
+ h: 8,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 0,
w: 12,
- h: 19
+ h: 19,
+ fullHeight: false
},
data: {
type: 'schemaformcomponent',
@@ -480,14 +496,16 @@ export function createAppFromFlow(path: string, schema: Record | un
x: 0,
y: 0,
w: 1,
- h: 1
+ h: 1,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 19,
w: 12,
- h: 1
+ h: 1,
+ fullHeight: false
},
data: {
type: 'buttoncomponent',
@@ -665,14 +683,16 @@ export function createAppFromFlow(path: string, schema: Record | un
x: 0,
y: 0,
w: 2,
- h: 8
+ h: 8,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 0,
w: 12,
- h: 20
+ h: 20,
+ fullHeight: false
},
data: {
type: 'tabscomponent',
@@ -709,14 +729,16 @@ export function createAppFromFlow(path: string, schema: Record | un
x: 0,
y: 0,
w: 2,
- h: 8
+ h: 8,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 0,
w: 12,
- h: 18
+ h: 18,
+ fullHeight: false
},
data: {
type: 'jobidflowstatuscomponent',
@@ -743,14 +765,16 @@ export function createAppFromFlow(path: string, schema: Record | un
x: 0,
y: 0,
w: 2,
- h: 8
+ h: 8,
+ fullHeight: false
},
'12': {
fixed: false,
x: 0,
y: 0,
w: 12,
- h: 18
+ h: 18,
+ fullHeight: false
},
data: {
type: 'jobidlogcomponent',