windmill-components 1.89.1 → 1.103.1

package/dist/components/apps/editor/appUtils.js

@@ -1,482 +0,0 @@
-import { ccomponents, components, getRecommendedDimensionsByComponent } from './component';
-import { gridColumns } from '../gridUtils';
-import { allItems } from '../utils';
-import gridHelp from '../svelte-grid/utils/helper';
-import { get } from 'svelte/store';
-import { sendUserToast } from '../../../utils';
-import { getNextId } from '../../flows/idUtils';
-export function dfs(grid, id, subgrids) {
-    for (const item of grid) {
-        if (item.id === id) {
-            return [id];
-        }
-        else if (item.data.type == 'tablecomponent' &&
-            item.data.actionButtons.find((x) => id == x.id)) {
-            return [item.id, id];
-        }
-        else {
-            for (let i = 0; i < (item.data.numberOfSubgrids ?? 0); i++) {
-                const res = dfs(subgrids[`${item.id}-${i}`], id, subgrids);
-                if (res) {
-                    return [item.id, ...res];
-                }
-            }
-        }
-    }
-    return undefined;
-}
-export function selectId(e, id, selectedComponent, app) {
-    // this ensure handleClickOutside are triggered
-    let event = new MouseEvent('click', {
-        view: window,
-        bubbles: true,
-        cancelable: true,
-        relatedTarget: e.target
-    });
-    window.dispatchEvent(event);
-    if (e.shiftKey) {
-        selectedComponent.update((old) => {
-            if (old && old?.[0]) {
-                if (findGridItemParentGrid(app, old[0]) != findGridItemParentGrid(app, id)) {
-                    sendUserToast('Cannot multi select items from different grids', true);
-                    return old;
-                }
-            }
-            if (old == undefined) {
-                return [id];
-            }
-            if (old.includes(id)) {
-                return old;
-            }
-            return [...old, id];
-        });
-    }
-    else {
-        if (get(selectedComponent)?.includes(id)) {
-            return;
-        }
-        else {
-            selectedComponent.set([id]);
-        }
-    }
-}
-function findGridItemById(root, subGrids, id) {
-    for (const gridItem of allItems(root, subGrids)) {
-        if (gridItem.id === id) {
-            return gridItem;
-        }
-    }
-    return undefined;
-}
-export function findGridItemParentGrid(app, id) {
-    const gridItem = app.grid.find((x) => x.id === id);
-    if (gridItem || app.subgrids === undefined) {
-        return undefined;
-    }
-    else {
-        for (const key of Object.keys(app.subgrids ?? {})) {
-            const subGrid = app.subgrids[key];
-            const gridItemIdx = subGrid.findIndex((x) => x.id === id);
-            if (gridItemIdx > -1) {
-                return key;
-            }
-        }
-    }
-}
-export function allsubIds(app, parentId) {
-    let item = findGridItem(app, parentId);
-    if (!item?.data.numberOfSubgrids) {
-        let subIds = [parentId];
-        if (item) {
-            if (item.data.type === 'tablecomponent') {
-                subIds.push(...item.data.actionButtons?.map((x) => x.id));
-            }
-        }
-        return subIds;
-    }
-    return getAllSubgridsAndComponentIds(app, item?.data)[1];
-}
-export function findGridItem(app, id) {
-    return findGridItemById(app.grid, app.subgrids, id);
-}
-export function getNextGridItemId(app) {
-    const allIds = allItems(app.grid, app.subgrids).flatMap((x) => {
-        if (x.data.type === 'tablecomponent') {
-            return [x.id, ...x.data.actionButtons.map((x) => x.id)];
-        }
-        else {
-            return [x.id];
-        }
-    });
-    return getNextId(allIds);
-}
-export function getAllRecomputeIdsForComponent(app, id) {
-    if (!app || !id)
-        return [];
-    const items = allItems(app.grid, app.subgrids);
-    const recomputedBy = [];
-    items.forEach((item) => {
-        if (item.data.type === 'buttoncomponent') {
-            if (item.data.recomputeIds?.includes(id)) {
-                recomputedBy.push(item.id);
-            }
-        }
-    });
-    return recomputedBy;
-}
-export function createNewGridItem(grid, id, data, columns) {
-    const newComponent = {
-        fixed: false,
-        x: 0,
-        y: 0
-    };
-    let newData = JSON.parse(JSON.stringify(data));
-    newData.id = id;
-    const newItem = {
-        data: newData,
-        id: id
-    };
-    gridColumns.forEach((column) => {
-        if (!columns) {
-            const rec = getRecommendedDimensionsByComponent(newData.type, column);
-            newItem[column] = {
-                ...newComponent,
-                w: rec.w,
-                h: rec.h
-            };
-        }
-        else {
-            newItem[column] = columns[column];
-        }
-        const position = gridHelp.findSpace(newItem, grid, column);
-        newItem[column] = { ...newItem[column], ...position };
-    });
-    return newItem;
-}
-export function getGridItems(app, focusedGrid) {
-    if (!focusedGrid) {
-        return app.grid;
-    }
-    else {
-        const { parentComponentId, subGridIndex } = focusedGrid;
-        const key = `${parentComponentId}-${subGridIndex ?? 0}`;
-        return app?.subgrids?.[key] ?? [];
-    }
-}
-function cleanseValue(key, value) {
-    if (!value) {
-        return [key, undefined];
-    }
-    if (value.type === 'static') {
-        return [key, { type: value.type, value: value.value }];
-    }
-    else {
-        return [key, { type: value.type, expr: value.expr }];
-    }
-}
-export function appComponentFromType(type) {
-    return (id) => {
-        const init = JSON.parse(JSON.stringify(ccomponents[type].initialData));
-        return {
-            type,
-            //TODO remove tooltip and onlyStatic from there
-            configuration: Object.fromEntries(Object.entries(init.configuration).map(([key, value]) => {
-                if (value.type != 'oneOf') {
-                    return cleanseValue(key, value);
-                }
-                else {
-                    return [
-                        key,
-                        {
-                            type: value.type,
-                            selected: value.selected,
-                            configuration: Object.fromEntries(Object.entries(value.configuration).map(([key, val]) => [
-                                key,
-                                Object.fromEntries(Object.entries(val).map(([key, val]) => cleanseValue(key, val)))
-                            ]))
-                        }
-                    ];
-                }
-            })),
-            componentInput: init.componentInput,
-            panes: init.panes,
-            tabs: init.tabs,
-            customCss: {},
-            recomputeIds: init.recomputeIds ? [] : undefined,
-            actionButtons: init.actionButtons ? [] : undefined,
-            numberOfSubgrids: init.numberOfSubgrids,
-            horizontalAlignment: init.horizontalAlignment,
-            verticalAlignment: init.verticalAlignment,
-            id
-        };
-    };
-}
-export function insertNewGridItem(app, builddata, focusedGrid, columns, keepId) {
-    const id = keepId ?? getNextGridItemId(app);
-    const data = builddata(id);
-    if (!app.subgrids) {
-        app.subgrids = {};
-    }
-    // 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, columns);
-    grid.push(newItem);
-    return id;
-}
-export function getAllSubgridsAndComponentIds(app, component) {
-    const subgrids = [];
-    let components = [component.id];
-    if (component.type === 'tablecomponent') {
-        components.push(...component.actionButtons?.map((x) => x.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) {
-        app.subgrids &&
-            (app.subgrids[parent] = app.subgrids[parent].filter((item) => item.id !== component?.id));
-    }
-    else {
-        app.grid = app.grid.filter((item) => item.id !== component?.id);
-    }
-    return components;
-}
-export function findAvailableSpace(grid, gridItem, editorBreakpoint, parentGridItem = undefined) {
-    if (gridItem) {
-        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;
-    }
-}
-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 {};
-    }
-    return Object.fromEntries(Object.entries(init).map(([key, value]) => [key, world.newOutput(id, key, value)]));
-}
-export function initConfig(r, configuration) {
-    return JSON.parse(JSON.stringify(Object.fromEntries(Object.entries(r).map(([key, value]) => value.type == 'static'
-        ? [
-            key,
-            configuration?.[key]?.type == 'static' ? configuration?.[key]?.['value'] : undefined
-        ]
-        : value.type == 'oneOf'
-            ? [
-                key,
-                {
-                    selected: value.selected,
-                    type: 'oneOf',
-                    configuration: Object.fromEntries(Object.entries(value.configuration).map(([choice, config]) => [
-                        choice,
-                        initConfig(config, configuration?.[key]?.configuration?.[choice])
-                    ]))
-                }
-            ]
-            : [key, undefined]))));
-}
-export function expandGriditem(grid, id, $breakpoint, parentGridItem = undefined) {
-    const gridComponent = grid.find((item) => item.id === id);
-    if (!gridComponent)
-        return;
-    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, 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 (json === null || json === undefined || typeof json != 'object') {
-        return json;
-    }
-    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;
-}
-export function clearErrorByComponentId(id, errorByComponent) {
-    return Object.entries(errorByComponent).reduce((acc, [key, value]) => {
-        if (value.componentId !== id) {
-            acc[key] = value;
-        }
-        return acc;
-    }, {});
-}
-export function clearJobsByComponentId(id, jobs) {
-    return jobs.filter((job) => job.component !== id);
-}
-// Returns the error message for the latest job for a component if an error occurred, otherwise undefined
-export function getErrorFromLatestResult(id, errorByComponent, jobs) {
-    // find last jobId for component id
-    const lastJob = jobs.find((job) => job.component === id);
-    if (lastJob?.job && errorByComponent[lastJob.job]) {
-        return errorByComponent[lastJob.job].error;
-    }
-    else {
-        return undefined;
-    }
-}