windmill-components 1.70.0 → 1.75.0

package/components/apps/editor/SettingsPanel.svelte

@@ -1,41 +1,31 @@
 <script>import { getContext } from 'svelte';
-import { allItems, allItemsWithParent } from '../utils';
+import GridPanel from './GridPanel.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
-import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
-import TablePanel from './TablePanel.svelte';
-const { selectedComponent, app } = getContext('AppEditorContext');
+const { selectedComponent, app, stateId } = getContext('AppViewerContext');
 </script>
 
-{#each $app.grid as gridItem (gridItem.data.id)}
-	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel parent={undefined} bind:component={gridItem.data} />
-	{:else if gridItem.data.type === 'tablecomponent'}
-		<TablePanel bind:component={gridItem.data} />
-	{/if}
-{/each}
+{#if $app.grid}
+	<GridPanel parent={undefined} bind:gridItems={$app.grid} />
+{/if}
 
 {#if $app.subgrids}
 	{#each Object.keys($app.subgrids ?? {}) as key (key)}
-		{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
-			{#if gridItem.data.id === $selectedComponent}
-				<ComponentPanel parent={key} bind:component={gridItem.data} />
-			{:else if gridItem.data.type === 'tablecomponent'}
-				<TablePanel bind:component={gridItem.data} />
-			{/if}
-		{/each}
+		<GridPanel parent={key} bind:gridItems={$app.subgrids[key]} />
 	{/each}
 {/if}
 
 {#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 	{#if $selectedComponent === `bg_${index}`}
 		<PanelSection title={`Background script inputs`}>
-			<InputsSpecsEditor
-				id={`bg_${index}`}
-				shouldCapitalize={false}
-				bind:inputSpecs={script.fields}
-				userInputEnabled={false}
-			/>
+			{#key $stateId}
+				<InputsSpecsEditor
+					id={`bg_${index}`}
+					shouldCapitalize={false}
+					bind:inputSpecs={script.fields}
+					userInputEnabled={false}
+				/>
+			{/key}
 		</PanelSection>
 	{/if}
 {/each}

package/components/apps/editor/SubGridEditor.svelte

@@ -1,15 +1,25 @@
 <script>import { classNames } from '../../../utils';
 import { createEventDispatcher, getContext } from 'svelte';
 import Grid from '@windmill-labs/svelte-grid';
+import { twMerge } from 'tailwind-merge';
 import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
 import Component from './component/Component.svelte';
+import { expandGriditem, findGridItem } from './appUtils';
+import { push } from '../../../history';
 export let containerHeight;
+let classes = '';
+export { classes as class };
+export let style = '';
 export let noPadding = false;
-//export let id: string
+export let noYPadding = false;
 export let subGrid = [];
 export let visible = true;
+export let id;
+export let shouldHighlight = true;
 const dispatch = createEventDispatcher();
-const { app, connectingInput, selectedComponent, focusedGrid } = getContext('AppEditorContext');
+const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
+$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
 let pointerdown = false;
 let onComponent = undefined;
 const onpointerdown = (e) => {
@@ -37,7 +47,7 @@ function selectComponent(id) {
     }
 }
 function lock(gridComponent) {
-    let fComponent = $app.grid.find((c) => c.id === gridComponent.id);
+    let fComponent = findGridItem($app, gridComponent.data.id);
     if (fComponent) {
         fComponent = toggleFixed(fComponent);
     }
@@ -46,16 +56,23 @@ function lock(gridComponent) {
 let container;
 </script>
 
-<div class="relative w-full subgrid {visible ? 'visible' : 'invisible h-0 '}" bind:this={container}>
+<div
+	class="relative w-full subgrid {visible ? 'visible' : 'invisible h-0 overflow-hidden'} 	"
+	bind:this={container}
+>
 	<div
-		class:px-2={!noPadding}
-		class="py-2 overflow-auto  {$connectingInput?.opened ? '' : ''}"
+		class={twMerge(
+			'overflow-auto',
+			noYPadding ? '' : 'py-2',
+			classes ?? '',
+			noPadding ? 'px-0' : 'px-2'
+		)}
 		on:pointerdown|stopPropagation={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
-		style="height: {containerHeight}px;"
+		style="height: {containerHeight}px; {style ?? ''}"
 	>
-		<div>
+		<div class={highlight && $mode !== 'preview' ? 'border-gray-400  border border-dashed' : ''}>
 			<Grid
 				bind:items={subGrid}
 				let:dataItem
@@ -64,19 +81,17 @@ let container;
 				fastStart={true}
 				gap={[4, 2]}
 				scroller={container}
+				parentWidth={$parentWidth - 17}
 			>
 				{#each subGrid as gridComponent (gridComponent.id)}
-					{#if gridComponent.data.id === dataItem.data.id}
+					{#if gridComponent?.data?.id && gridComponent?.data?.id === dataItem?.data?.id}
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						{#if $connectingInput.opened}
-							{#if $connectingInput.opened}
-								<div
-									on:pointerenter={() =>
-										($connectingInput.hoveredComponent = gridComponent.data.id)}
-									on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
-									class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
-								/>
-							{/if}
+							<div
+								on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
+								on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
+								class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+							/>
 							<div
 								style="transform: translate(-50%, -50%);"
 								class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
@@ -96,11 +111,24 @@ let container;
 							)}
 						>
 							<Component
+								render={visible}
 								{pointerdown}
-								bind:pComponent={gridComponent.data}
+								component={gridComponent.data}
 								selected={$selectedComponent === dataItem.data.id}
 								locked={isFixed(gridComponent)}
 								on:lock={() => lock(gridComponent)}
+								on:expand={() => {
+									const parentGridItem = findGridItem($app, id)
+
+									if (!parentGridItem) {
+										return
+									}
+
+									push(history, $app)
+
+									expandGriditem(subGrid, gridComponent, $breakpoint, parentGridItem)
+									$app = { ...$app }
+								}}
 							/>
 						</div>
 					{/if}

package/components/apps/editor/SubGridEditor.svelte.d.ts

@@ -2,12 +2,17 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         containerHeight: number;
+        class?: string | undefined;
+        style?: string | undefined;
         noPadding?: boolean | undefined;
+        noYPadding?: boolean | undefined;
         subGrid?: FilledItem<{
             data: import("./component").AppComponent;
             id: string;
         }>[] | undefined;
         visible?: boolean | undefined;
+        id: string;
+        shouldHighlight?: boolean | undefined;
     };
     events: {
         focus: CustomEvent<any>;

package/components/apps/editor/appUtils.d.ts

@@ -1,9 +1,19 @@
-import type { App, FocusedGrid, GridItem } from '../types';
+import type { App, EditorBreakpoint, FocusedGrid, GridItem } from '../types';
 import { type AppComponent } from './component';
+export declare function findGridItemParentId(app: App, id: string): string | undefined;
 export declare function findGridItem(app: App, id: string): GridItem | undefined;
 export declare function getNextGridItemId(app: App): string;
 export declare function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem;
 export declare function insertNewGridItem(app: App, data: AppComponent, focusedGrid: FocusedGrid | undefined, keepId?: boolean): string;
 export declare function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]];
-export declare function deleteGridItem(app: App, component: AppComponent, parent: string | undefined): string[];
+export declare function deleteGridItem(app: App, component: AppComponent, parent: string | undefined, shouldKeepSubGrid: boolean): string[];
 export declare function duplicateGridItem(app: App, parent: string | undefined, id: string): string | undefined;
+type AvailableSpace = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export declare function findAvailableSpace(grid: GridItem[], gridItem: GridItem, editorBreakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): AvailableSpace | undefined;
+export declare function expandGriditem(grid: GridItem[], gridComponent: GridItem, $breakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): void;
+export {};

package/components/apps/editor/appUtils.js

@@ -1,27 +1,30 @@
 import { getNextId } from '../../flows/flowStateUtils';
-import { Component, getRecommendedDimensionsByComponent } from './component';
+import { getRecommendedDimensionsByComponent } from './component';
 import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper';
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
 function findGridItemById(root, subGrids, id) {
-    for (const gridItem of root) {
+    for (const gridItem of allItems(root, subGrids)) {
         if (gridItem.id === id) {
             return gridItem;
         }
-        if (subGrids) {
-            const numberOfSubgrids = gridItem.data.numberOfSubgrids;
-            if (numberOfSubgrids) {
-                for (let i = 0; i < numberOfSubgrids; i++) {
-                    const subgrid = subGrids[`${gridItem.id}-${i}`] ?? [];
-                    const found = findGridItemById(subgrid, subGrids, id);
-                    if (found) {
-                        return found;
-                    }
-                }
+    }
+    return undefined;
+}
+export function findGridItemParentId(app, id) {
+    const gridItem = app.grid.find((x) => x.id === id);
+    if (gridItem) {
+        return undefined;
+    }
+    else {
+        for (const key in app.subgrids) {
+            const subGrid = app.subgrids[key];
+            const gridItem = subGrid.find((x) => x.id === id);
+            if (gridItem) {
+                return key.split('-')[0];
             }
         }
     }
-    return undefined;
 }
 export function findGridItem(app, id) {
     return findGridItemById(app.grid, app.subgrids, id);
@@ -36,11 +39,8 @@ export function createNewGridItem(grid, id, data) {
     const appComponent = data;
     appComponent.id = id;
     const newComponent = {
-        fixed: false,
         resizable: true,
         draggable: true,
-        customDragger: false,
-        customResizer: false,
         x: 0,
         y: 0
     };
@@ -56,7 +56,10 @@ export function createNewGridItem(grid, id, data) {
             min: { w: 1, h: 1 },
             max: { w: column, h: 100 },
             w: rec.w,
-            h: rec.h
+            h: rec.h,
+            customDragger: false,
+            customResizer: false,
+            fixed: false
         };
         const position = gridHelp.findSpace(newItem, grid, column);
         newItem[column] = { ...newItem[column], ...position };
@@ -79,8 +82,11 @@ export function insertNewGridItem(app, data, focusedGrid, keepId) {
         subGrid.push(createNewGridItem(subGrid, id, data));
         app.subgrids[key] = subGrid;
     }
-    for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
-        app.subgrids[`${id}-${i}`] = [];
+    // We only want to set subgrids when we are not moving
+    if (!keepId) {
+        for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
+            app.subgrids[`${id}-${i}`] = [];
+        }
     }
     return id;
 }
@@ -103,9 +109,9 @@ export function getAllSubgridsAndComponentIds(app, component) {
     }
     return [subgrids, components];
 }
-export function deleteGridItem(app, component, parent) {
+export function deleteGridItem(app, component, parent, shouldKeepSubGrid) {
     let [subgrids, components] = getAllSubgridsAndComponentIds(app, component);
-    if (app.subgrids) {
+    if (app.subgrids && !shouldKeepSubGrid) {
         subgrids.forEach((id) => {
             delete app.subgrids[id];
         });
@@ -139,3 +145,97 @@ export function duplicateGridItem(app, parent, id) {
     }
     return undefined;
 }
+export function findAvailableSpace(grid, gridItem, editorBreakpoint, parentGridItem = undefined) {
+    if (gridItem) {
+        const breakpoint = editorBreakpoint === 'sm' ? 3 : 12;
+        const maxHeight = parentGridItem ? parentGridItem[breakpoint].h - 1 : 12;
+        const maxWidth = 12;
+        const availableSpace = {
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0
+        };
+        const items = grid.map((item) => {
+            return {
+                id: item.id,
+                x: item[breakpoint].x,
+                y: item[breakpoint].y,
+                w: item[breakpoint].w,
+                h: item[breakpoint].h
+            };
+        });
+        const item = items.find((item) => item.id === gridItem.id);
+        if (!item) {
+            return availableSpace;
+        }
+        if (item.x > 0) {
+            for (let x = item.x - 1; x >= 0; x--) {
+                const itemToCheck = { ...item, x, w: 1 };
+                const isItemInWay = items.some((item) => isOverlapping(item, itemToCheck));
+                if (isItemInWay) {
+                    break;
+                }
+                else {
+                    availableSpace.left++;
+                }
+            }
+        }
+        if (item.x + item.w < maxWidth) {
+            for (let x = item.x + item.w; x < maxWidth; x++) {
+                const itemToCheck = { ...item, x, w: 1 };
+                const isItemInWay = items.some((item) => isOverlapping(item, itemToCheck));
+                if (isItemInWay) {
+                    break;
+                }
+                else {
+                    availableSpace.right++;
+                }
+            }
+        }
+        if (item.y > 0) {
+            for (let y = item.y - 1; y >= 0; y--) {
+                const itemToCheck = { ...item, h: 1, y };
+                const isItemInWay = items.some((item) => isOverlapping(item, itemToCheck));
+                if (isItemInWay) {
+                    break;
+                }
+                else {
+                    availableSpace.top++;
+                }
+            }
+        }
+        if (item.y + item.h < maxHeight) {
+            for (let y = item.y + item.h; y < maxHeight; y++) {
+                const itemToCheck = { ...item, h: 1, y };
+                const isItemInWay = items.some((item) => isOverlapping(item, itemToCheck));
+                if (isItemInWay) {
+                    break;
+                }
+                else {
+                    availableSpace.bottom++;
+                }
+            }
+        }
+        return availableSpace;
+    }
+}
+function isOverlapping(item1, item2) {
+    return (item1.x < item2.x + item2.w &&
+        item1.x + item1.w > item2.x &&
+        item1.y < item2.y + item2.h &&
+        item1.y + item1.h > item2.y);
+}
+export function expandGriditem(grid, gridComponent, $breakpoint, parentGridItem = undefined) {
+    const availableSpace = findAvailableSpace(grid, gridComponent, $breakpoint, parentGridItem);
+    if (!availableSpace) {
+        return;
+    }
+    const { left, right, top, bottom } = availableSpace;
+    const width = $breakpoint === 'sm' ? 3 : 12;
+    const previousGridItem = JSON.parse(JSON.stringify(gridComponent[width]));
+    gridComponent[width].x = previousGridItem.x - left;
+    gridComponent[width].y = previousGridItem.y - top;
+    gridComponent[width].w = previousGridItem.w + left + right;
+    gridComponent[width].h = previousGridItem.h + top + bottom;
+}