windmill-components 1.75.0 → 1.78.0

package/components/apps/editor/SettingsPanel.svelte

@@ -1,4 +1,5 @@
-<script>import { getContext } from 'svelte';
+<script>import Toggle from '../../Toggle.svelte';
+import { getContext } from 'svelte';
 import GridPanel from './GridPanel.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
@@ -17,15 +18,27 @@ const { selectedComponent, app, stateId } = getContext('AppViewerContext');
 
 {#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 	{#if $selectedComponent === `bg_${index}`}
-		<PanelSection title={`Background script inputs`}>
-			{#key $stateId}
-				<InputsSpecsEditor
-					id={`bg_${index}`}
-					shouldCapitalize={false}
-					bind:inputSpecs={script.fields}
-					userInputEnabled={false}
+		<div class="min-h-full flex flex-col divide-y">
+			<PanelSection title={`Configuration`}>
+				<Toggle
+					bind:checked={script.autoRefresh}
+					options={{ right: 'Run on start and app refresh' }}
 				/>
-			{/key}
-		</PanelSection>
+			</PanelSection>
+
+			{#if Object.keys(script.fields).length > 0}
+				<PanelSection title={`Inputs`}>
+					{#key $stateId}
+						<InputsSpecsEditor
+							id={`bg_${index}`}
+							shouldCapitalize={false}
+							bind:inputSpecs={script.fields}
+							userInputEnabled={false}
+						/>
+					{/key}
+				</PanelSection>
+			{/if}
+			<div class="grow shrink" />
+		</div>
 	{/if}
 {/each}

package/components/apps/editor/SubGridEditor.svelte

@@ -1,12 +1,14 @@
 <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 { expandGriditem, findGridItem, sortGridItemsPosition } from './appUtils';
 import { push } from '../../../history';
+import Grid from '../svelte-grid/Grid.svelte';
+import GridViewer from './GridViewer.svelte';
 export let containerHeight;
+export let containerWidth = undefined;
 let classes = '';
 export { classes as class };
 export let style = '';
@@ -37,27 +39,26 @@ const onpointerup = () => {
 function selectComponent(id) {
     onComponent = id;
     if (!$connectingInput.opened) {
-        $selectedComponent = id;
-        /*
-        $focusedGrid = {
-            parentComponentId: parentId,
-            subGridIndex: index
+        if (id !== $selectedComponent) {
+            $selectedComponent = id;
         }
-        */
     }
 }
-function lock(gridComponent) {
-    let fComponent = findGridItem($app, gridComponent.data.id);
+function lock(dataItem) {
+    let fComponent = findGridItem($app, dataItem.data.id);
     if (fComponent) {
         fComponent = toggleFixed(fComponent);
     }
+    $app = $app;
 }
 // @ts-ignore
 let container;
 </script>
 
 <div
-	class="relative w-full subgrid {visible ? 'visible' : 'invisible h-0 overflow-hidden'} 	"
+	class="translate-x-0 translate-y-0 relative w-full subgrid {visible
+		? 'visible'
+		: 'invisible h-0 overflow-hidden'} 	"
 	bind:this={container}
 >
 	<div
@@ -72,68 +73,94 @@ let container;
 		on:pointerup={onpointerup}
 		style="height: {containerHeight}px; {style ?? ''}"
 	>
-		<div class={highlight && $mode !== 'preview' ? 'border-gray-400  border border-dashed' : ''}>
-			<Grid
-				bind:items={subGrid}
+		{#if $mode !== 'preview'}
+			<div class={highlight ? 'border-gray-400  border border-dashed' : ''}>
+				<Grid
+					items={subGrid}
+					on:redraw={(e) => {
+						push(history, $app)
+						subGrid = e.detail
+					}}
+					let:dataItem
+					rowHeight={36}
+					cols={columnConfiguration}
+					fastStart={true}
+					gap={[4, 2]}
+					scroller={container}
+					parentWidth={$parentWidth - 17}
+					{containerWidth}
+				>
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					{#if $connectingInput.opened}
+						<div
+							on:pointerenter={() => ($connectingInput.hoveredComponent = dataItem.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"
+						>
+							{dataItem.data.id}
+						</div>
+					{/if}
+
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						on:pointerdown={() => selectComponent(dataItem.data.id)}
+						class={classNames(
+							'h-full w-full center-center',
+							$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
+							'top-0'
+						)}
+					>
+						<Component
+							render={visible}
+							{pointerdown}
+							component={dataItem.data}
+							selected={$selectedComponent === dataItem.data.id}
+							locked={isFixed(dataItem)}
+							on:lock={() => lock(dataItem)}
+							on:expand={() => {
+								const parentGridItem = findGridItem($app, id)
+
+								if (!parentGridItem) {
+									return
+								}
+								$selectedComponent = dataItem.data.id
+								push(history, $app)
+
+								expandGriditem(subGrid, dataItem, $breakpoint, parentGridItem)
+								$app = $app
+							}}
+						/>
+					</div>
+				</Grid>
+			</div>
+		{:else}
+			<GridViewer
+				items={subGrid}
 				let:dataItem
 				rowHeight={36}
 				cols={columnConfiguration}
-				fastStart={true}
 				gap={[4, 2]}
-				scroller={container}
 				parentWidth={$parentWidth - 17}
+				{containerWidth}
 			>
-				{#each subGrid as gridComponent (gridComponent.id)}
-					{#if gridComponent?.data?.id && gridComponent?.data?.id === dataItem?.data?.id}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						{#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"
-							/>
-							<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"
-							>
-								{dataItem.data.id}
-							</div>
-						{/if}
-
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							on:pointerdown={() => selectComponent(dataItem.data.id)}
-							class={classNames(
-								'h-full w-full center-center',
-								$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
-								gridComponent.data.card ? 'border border-gray-100' : '',
-								'top-0'
-							)}
-						>
-							<Component
-								render={visible}
-								{pointerdown}
-								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}
-				{/each}
-			</Grid>
-		</div>
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					on:pointerdown={() => selectComponent(dataItem.data.id)}
+					class={classNames('h-full w-full center-center', 'top-0')}
+				>
+					<Component
+						render={visible}
+						{pointerdown}
+						component={dataItem.data}
+						selected={$selectedComponent === dataItem.data.id}
+						locked={isFixed(dataItem)}
+					/>
+				</div>
+			</GridViewer>
+		{/if}
 	</div>
 </div>

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

@@ -1,15 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../types';
 declare const __propDef: {
     props: {
         containerHeight: number;
+        containerWidth?: number | undefined;
         class?: string | undefined;
         style?: string | undefined;
         noPadding?: boolean | undefined;
         noYPadding?: boolean | undefined;
-        subGrid?: FilledItem<{
-            data: import("./component").AppComponent;
-            id: string;
-        }>[] | undefined;
+        subGrid?: GridItem[] | undefined;
         visible?: boolean | undefined;
         id: string;
         shouldHighlight?: boolean | undefined;

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

@@ -1,13 +1,16 @@
-import type { App, EditorBreakpoint, FocusedGrid, GridItem } from '../types';
+import type { App, ConnectingInput, EditorBreakpoint, FocusedGrid, GridItem } from '../types';
 import { type AppComponent } from './component';
-export declare function findGridItemParentId(app: App, id: string): string | undefined;
+import type { Output, World } from '../rx';
+import type { FilledItem } from '../svelte-grid/types';
+export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
+export declare function allsubIds(app: App, parentId: string): string[];
 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 getGridItems(app: App, focusedGrid: FocusedGrid | undefined): 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, shouldKeepSubGrid: boolean): string[];
-export declare function duplicateGridItem(app: App, parent: string | undefined, id: string): string | undefined;
 type AvailableSpace = {
     left: number;
     right: number;
@@ -15,5 +18,12 @@ type AvailableSpace = {
     bottom: number;
 };
 export declare function findAvailableSpace(grid: GridItem[], gridItem: GridItem, editorBreakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): AvailableSpace | undefined;
+type Outputtable<Type> = {
+    -readonly [Property in keyof Type]: Output<Type[Property]>;
+};
+export declare function initOutput<I extends Record<string, any>>(world: World | undefined, id: string, init: I): Outputtable<I>;
 export declare function expandGriditem(grid: GridItem[], gridComponent: GridItem, $breakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): void;
+export declare function sortGridItemsPosition<T>(gridItems: FilledItem<T>[], width: number): FilledItem<T>[];
+export declare function connectInput(connectingInput: ConnectingInput, componentId: string, path: string): ConnectingInput;
+export declare function recursivelyFilterKeyInJSON(json: object, search: string, extraSearch?: string | undefined): object;
 export {};

package/components/apps/editor/appUtils.js

@@ -1,8 +1,8 @@
 import { getNextId } from '../../flows/flowStateUtils';
 import { getRecommendedDimensionsByComponent } from './component';
-import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper';
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
+import gridHelp from '../svelte-grid/utils/helper';
 function findGridItemById(root, subGrids, id) {
     for (const gridItem of allItems(root, subGrids)) {
         if (gridItem.id === id) {
@@ -11,7 +11,7 @@ function findGridItemById(root, subGrids, id) {
     }
     return undefined;
 }
-export function findGridItemParentId(app, id) {
+export function findGridItemParentGrid(app, id) {
     const gridItem = app.grid.find((x) => x.id === id);
     if (gridItem) {
         return undefined;
@@ -21,11 +21,18 @@ export function findGridItemParentId(app, id) {
             const subGrid = app.subgrids[key];
             const gridItem = subGrid.find((x) => x.id === id);
             if (gridItem) {
-                return key.split('-')[0];
+                return key;
             }
         }
     }
 }
+export function allsubIds(app, parentId) {
+    let item = findGridItem(app, parentId);
+    if (!item?.data.numberOfSubgrids) {
+        return [parentId];
+    }
+    return getAllSubgridsAndComponentIds(app, item?.data)[1];
+}
 export function findGridItem(app, id) {
     return findGridItemById(app.grid, app.subgrids, id);
 }
@@ -36,21 +43,20 @@ export function getNextGridItemId(app) {
     return id;
 }
 export function createNewGridItem(grid, id, data) {
-    const appComponent = data;
-    appComponent.id = id;
     const newComponent = {
         resizable: true,
         draggable: true,
         x: 0,
         y: 0
     };
-    let newData = JSON.parse(JSON.stringify(appComponent));
+    let newData = JSON.parse(JSON.stringify(data));
+    newData.id = id;
     const newItem = {
         data: newData,
         id: id
     };
     gridColumns.forEach((column) => {
-        const rec = getRecommendedDimensionsByComponent(appComponent.type, column);
+        const rec = getRecommendedDimensionsByComponent(newData.type, column);
         newItem[column] = {
             ...newComponent,
             min: { w: 1, h: 1 },
@@ -66,21 +72,20 @@ export function createNewGridItem(grid, id, data) {
     });
     return newItem;
 }
-export function insertNewGridItem(app, data, focusedGrid, keepId) {
-    const id = keepId ? data.id : getNextGridItemId(app);
-    if (!app.subgrids) {
-        app.subgrids = {};
-    }
+export function getGridItems(app, focusedGrid) {
     if (!focusedGrid) {
-        const newItem = createNewGridItem(app.grid, id, data);
-        app.grid.push(newItem);
+        return app.grid;
     }
     else {
         const { parentComponentId, subGridIndex } = focusedGrid;
         const key = `${parentComponentId}-${subGridIndex ?? 0}`;
-        const subGrid = app.subgrids[key] ?? [];
-        subGrid.push(createNewGridItem(subGrid, id, data));
-        app.subgrids[key] = subGrid;
+        return app?.subgrids?.[key] ?? [];
+    }
+}
+export function insertNewGridItem(app, data, focusedGrid, keepId) {
+    const id = keepId ? data.id : getNextGridItemId(app);
+    if (!app.subgrids) {
+        app.subgrids = {};
     }
     // We only want to set subgrids when we are not moving
     if (!keepId) {
@@ -88,6 +93,15 @@ export function insertNewGridItem(app, data, focusedGrid, keepId) {
             app.subgrids[`${id}-${i}`] = [];
         }
     }
+    const key = focusedGrid
+        ? `${focusedGrid?.parentComponentId}-${focusedGrid?.subGridIndex ?? 0}`
+        : undefined;
+    let grid = focusedGrid ? app.subgrids[key] : app.grid;
+    const newItem = createNewGridItem(grid, id, data);
+    grid.push(newItem);
+    if (focusedGrid) {
+        app.subgrids[key] = grid;
+    }
     return id;
 }
 export function getAllSubgridsAndComponentIds(app, component) {
@@ -131,24 +145,10 @@ export function deleteGridItem(app, component, parent, shouldKeepSubGrid) {
     }
     return components;
 }
-export function duplicateGridItem(app, parent, id) {
-    const gridItem = findGridItem(app, id);
-    if (gridItem) {
-        const newId = getNextGridItemId(app);
-        const newItem = JSON.parse(JSON.stringify(gridItem));
-        newItem.id = newId;
-        newItem.data.id = newId;
-        let focusedGrid = parent
-            ? { parentComponentId: parent.split('-')[0], subGridIndex: Number(parent.split('-')[1]) }
-            : undefined;
-        return insertNewGridItem(app, newItem.data, focusedGrid);
-    }
-    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 maxHeight = parentGridItem ? parentGridItem[breakpoint].h - 1 : 16;
         const maxWidth = 12;
         const availableSpace = {
             left: 0,
@@ -226,6 +226,12 @@ function isOverlapping(item1, item2) {
         item1.y < item2.y + item2.h &&
         item1.y + item1.h > item2.y);
 }
+export function initOutput(world, id, init) {
+    if (!world) {
+        return {};
+    }
+    return Object.fromEntries(Object.entries(init).map(([key, value]) => [key, world.newOutput(id, key, value)]));
+}
 export function expandGriditem(grid, gridComponent, $breakpoint, parentGridItem = undefined) {
     const availableSpace = findAvailableSpace(grid, gridComponent, $breakpoint, parentGridItem);
     if (!availableSpace) {
@@ -233,9 +239,72 @@ export function expandGriditem(grid, gridComponent, $breakpoint, parentGridItem
     }
     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;
+    const item = gridComponent[width];
+    item.x = item.x - left;
+    item.y = item.y - top;
+    item.w = item.w + left + right;
+    item.h = item.h + top + bottom;
+}
+export function sortGridItemsPosition(gridItems, width) {
+    return gridItems.sort((a, b) => {
+        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, componentId, path) {
+    if (connectingInput) {
+        connectingInput = {
+            opened: false,
+            input: {
+                connection: {
+                    componentId,
+                    path
+                },
+                type: 'connected'
+            },
+            hoveredComponent: undefined
+        };
+    }
+    return connectingInput;
+}
+export function recursivelyFilterKeyInJSON(json, search, extraSearch) {
+    if (!search || search == '') {
+        return json;
+    }
+    let filteredJSON = {};
+    Object.keys(json).forEach((key) => {
+        if (key.toLowerCase().includes(search.toLowerCase()) ||
+            extraSearch?.toLowerCase().includes(search.toLowerCase()) ||
+            (typeof json[key] === 'string' && json[key].toLowerCase().includes(search.toLowerCase())) ||
+            (typeof json[key] === 'number' &&
+                json[key].toString().toLowerCase().includes(search.toLowerCase()))) {
+            filteredJSON[key] = json[key];
+        }
+        else if (typeof json[key] === 'object') {
+            const res = recursivelyFilterKeyInJSON(json[key], search, extraSearch);
+            if (Object.keys(res).length !== 0) {
+                filteredJSON[key] = res;
+            }
+        }
+    });
+    return filteredJSON;
 }