windmill-components 1.70.0 → 1.77.0

package/components/apps/editor/appUtils.js

@@ -1,27 +1,39 @@
 import { getNextId } from '../../flows/flowStateUtils';
-import { Component, getRecommendedDimensionsByComponent } from './component';
-import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper';
+import { getRecommendedDimensionsByComponent } from './component';
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
+import gridHelp from '../svelte-grid/utils/helper';
 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 findGridItemParentGrid(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;
             }
         }
     }
-    return undefined;
+}
+export function isIdInsideGriditem(app, gridItem, id) {
+    const path = [];
+    let currentId = id;
+    while (currentId) {
+        path.push(currentId);
+        currentId = findGridItemParentGrid(app, currentId)?.split('-')[0];
+    }
+    return path.includes(gridItem.id);
 }
 export function findGridItem(app, id) {
     return findGridItemById(app.grid, app.subgrids, id);
@@ -33,54 +45,64 @@ export function getNextGridItemId(app) {
     return id;
 }
 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
     };
-    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 },
             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 };
     });
     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 = {};
     }
-    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}`] = [];
+        }
+    }
+    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;
 }
@@ -103,9 +125,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];
         });
@@ -125,17 +147,169 @@ export function deleteGridItem(app, component, parent) {
     }
     return components;
 }
-export function duplicateGridItem(app, parent, id) {
-    const gridItem = findGridItem(app, id);
+export function findAvailableSpace(grid, gridItem, editorBreakpoint, parentGridItem = undefined) {
     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);
+        const breakpoint = editorBreakpoint === 'sm' ? 3 : 12;
+        const maxHeight = parentGridItem ? parentGridItem[breakpoint].h - 1 : 16;
+        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;
     }
-    return undefined;
+}
+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 initOutput(world, id, init) {
+    if (!world) {
+        return {};
+    }
+    const output = world.outputsById[id];
+    if (init) {
+        for (const key in init) {
+            if (output && output[key] && output[key].peak() == undefined) {
+                output[key].set(init[key]);
+            }
+        }
+    }
+    return output;
+}
+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 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, breakpoint) {
+    return gridItems.sort((a, b) => {
+        const width = breakpoint === 'lg' ? 12 : 3;
+        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) {
+    let filteredJSON = {};
+    Object.keys(json).forEach((key) => {
+        if (key.toLowerCase().includes(search.toLowerCase()) ||
+            extraSearch?.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;
 }