windmill-components 1.60.4 → 1.75.0

package/components/apps/editor/SubGridEditor.svelte

@@ -0,0 +1,139 @@
+<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 noYPadding = false;
+export let subGrid = [];
+export let visible = true;
+export let id;
+export let shouldHighlight = true;
+const dispatch = createEventDispatcher();
+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) => {
+    if (onComponent === undefined) {
+        dispatch('focus');
+    }
+    else {
+        onComponent = undefined;
+    }
+    pointerdown = true;
+};
+const onpointerup = () => {
+    pointerdown = false;
+};
+function selectComponent(id) {
+    onComponent = id;
+    if (!$connectingInput.opened) {
+        $selectedComponent = id;
+        /*
+        $focusedGrid = {
+            parentComponentId: parentId,
+            subGridIndex: index
+        }
+        */
+    }
+}
+function lock(gridComponent) {
+    let fComponent = findGridItem($app, gridComponent.data.id);
+    if (fComponent) {
+        fComponent = toggleFixed(fComponent);
+    }
+}
+// @ts-ignore
+let container;
+</script>
+
+<div
+	class="relative w-full subgrid {visible ? 'visible' : 'invisible h-0 overflow-hidden'} 	"
+	bind:this={container}
+>
+	<div
+		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 ?? ''}"
+	>
+		<div class={highlight && $mode !== 'preview' ? 'border-gray-400  border border-dashed' : ''}>
+			<Grid
+				bind:items={subGrid}
+				let:dataItem
+				rowHeight={36}
+				cols={columnConfiguration}
+				fastStart={true}
+				gap={[4, 2]}
+				scroller={container}
+				parentWidth={$parentWidth - 17}
+			>
+				{#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>
+	</div>
+</div>

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

@@ -0,0 +1,29 @@
+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>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SubGridEditorProps = typeof __propDef.props;
+export type SubGridEditorEvents = typeof __propDef.events;
+export type SubGridEditorSlots = typeof __propDef.slots;
+export default class SubGridEditor extends SvelteComponentTyped<SubGridEditorProps, SubGridEditorEvents, SubGridEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,19 @@
+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, 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

@@ -0,0 +1,241 @@
+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';
+function findGridItemById(root, subGrids, id) {
+    for (const gridItem of allItems(root, subGrids)) {
+        if (gridItem.id === id) {
+            return gridItem;
+        }
+    }
+    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];
+            }
+        }
+    }
+}
+export function findGridItem(app, id) {
+    return findGridItemById(app.grid, app.subgrids, id);
+}
+export function getNextGridItemId(app) {
+    const subgridsKeys = allItems(app.grid, app.subgrids).map((x) => x.id);
+    const withoutDash = subgridsKeys.map((element) => element.split('-')[0]);
+    const id = getNextId([...new Set(withoutDash)]);
+    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));
+    const newItem = {
+        data: newData,
+        id: id
+    };
+    gridColumns.forEach((column) => {
+        const rec = getRecommendedDimensionsByComponent(appComponent.type, column);
+        newItem[column] = {
+            ...newComponent,
+            min: { w: 1, h: 1 },
+            max: { w: column, h: 100 },
+            w: rec.w,
+            h: rec.h,
+            customDragger: false,
+            customResizer: false,
+            fixed: false
+        };
+        const position = gridHelp.findSpace(newItem, grid, column);
+        newItem[column] = { ...newItem[column], ...position };
+    });
+    return newItem;
+}
+export function insertNewGridItem(app, data, focusedGrid, keepId) {
+    const id = keepId ? data.id : getNextGridItemId(app);
+    if (!app.subgrids) {
+        app.subgrids = {};
+    }
+    if (!focusedGrid) {
+        const newItem = createNewGridItem(app.grid, id, data);
+        app.grid.push(newItem);
+    }
+    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;
+    }
+    // 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;
+}
+export function getAllSubgridsAndComponentIds(app, component) {
+    const subgrids = [];
+    let components = [component.id];
+    if (app.subgrids && component.numberOfSubgrids) {
+        for (let i = 0; i < component.numberOfSubgrids; i++) {
+            const key = `${component.id}-${i}`;
+            const subgrid = app.subgrids[key];
+            if (subgrid) {
+                subgrids.push(key);
+                for (const item of subgrid) {
+                    let [recSubgrids, recComponents] = getAllSubgridsAndComponentIds(app, item.data);
+                    subgrids.push(...recSubgrids);
+                    components.push(...recComponents);
+                }
+            }
+        }
+    }
+    return [subgrids, components];
+}
+export function deleteGridItem(app, component, parent, shouldKeepSubGrid) {
+    let [subgrids, components] = getAllSubgridsAndComponentIds(app, component);
+    if (app.subgrids && !shouldKeepSubGrid) {
+        subgrids.forEach((id) => {
+            delete app.subgrids[id];
+        });
+    }
+    if (!parent) {
+        let index = app.grid.findIndex((x) => x.id == component.id);
+        if (index > -1) {
+            app.grid.splice(index, 1);
+        }
+    }
+    else {
+        let grid = app.subgrids[parent];
+        let index = grid.findIndex((x) => x.id == component.id);
+        if (index > -1) {
+            grid.splice(index, 1);
+        }
+    }
+    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 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;
+}