From ea1b2c29b95282df347ef9c5973917fa3880e843 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Fri, 24 Feb 2023 17:17:11 +0100 Subject: [PATCH] fix(frontend): rewrote utils --- .../components/layout/AppContainer.svelte | 12 +- .../components/apps/editor/AppEditor.svelte | 1 + .../apps/editor/SubGridEditor.svelte | 5 +- .../lib/components/apps/editor/appUtils.ts | 125 ++++++++++++++++++ .../apps/editor/component/Component.svelte | 1 - .../componentsPanel/ComponentList.svelte | 20 +-- .../editor/contextPanel/ContextPanel.svelte | 4 +- .../settingsPanel/ComponentPanel.svelte | 30 +++-- .../apps/editor/settingsPanel/GridTab.svelte | 4 +- frontend/src/lib/components/apps/types.ts | 20 +-- frontend/src/lib/components/apps/utils.ts | 125 ++---------------- 11 files changed, 180 insertions(+), 167 deletions(-) create mode 100644 frontend/src/lib/components/apps/editor/appUtils.ts diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte index be7d9909d7..aee860292e 100644 --- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte +++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte @@ -7,12 +7,12 @@ export let id: string export let configuration: Record - export let subGrids: GridItem[][] | undefined = undefined export let componentContainerHeight: number + let noPadding: boolean | undefined = undefined export const staticOutputs: string[] = [] - const { focusedGrid, selectedComponent } = getContext('AppEditorContext') + const { app, focusedGrid, selectedComponent } = getContext('AppEditorContext') let gridContent: string[] | undefined = undefined @@ -27,15 +27,13 @@ - -{#if subGrids && subGrids[0]} + +{#if $app.subgrids?.[`${id}-0`]} { $selectedComponent = id }} diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte index 9e17e342d8..6bd55e8b98 100644 --- a/frontend/src/lib/components/apps/editor/AppEditor.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte @@ -36,6 +36,7 @@ import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte' import { page } from '$app/stores' import CssSettings from './componentsPanel/CssSettings.svelte' + import { findGridItem } from './appUtils' export let app: App export let path: string diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte index 02ffba5774..fed2f1b2f7 100644 --- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte @@ -8,7 +8,8 @@ export let containerHeight: number export let noPadding = false - export let id: string + //export let id: string + export let subGrid: GridItem[] = [] const dispatch = createEventDispatcher() @@ -36,10 +37,12 @@ onComponent = id if (!$connectingInput.opened) { $selectedComponent = id + /* $focusedGrid = { parentComponentId: parentId, subGridIndex: index } + */ } } diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts new file mode 100644 index 0000000000..675bf52d4e --- /dev/null +++ b/frontend/src/lib/components/apps/editor/appUtils.ts @@ -0,0 +1,125 @@ +import { getNextId } from '$lib/components/flows/flowStateUtils' +import type { App, FocusedGrid, GridItem } from '../types' +import { getRecommendedDimensionsByComponent, type AppComponent } from './component' +import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper' +import { gridColumns } from '../gridUtils' + +function findGridItemById( + root: GridItem[], + subGrids: Record | undefined, + id: string +): GridItem | undefined { + for (const gridItem of root) { + if (gridItem.id === id) { + return gridItem + } + + if (subGrids) { + const numberOfSubgrids = gridItem.data.numberOfSubgrids + const subgrids = subGrids[gridItem.id] + if (numberOfSubgrids && subgrids) { + 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 findGridItem(app: App, id: string): GridItem | undefined { + return findGridItemById(app.grid, app.subgrids, id) +} + +export function getNextGridItemId(app: App): string { + const subgridsKeys = app.subgrids ? Object.keys(app.subgrids) : [] + + const newArr = subgridsKeys.map((element) => { + const matches = element.match(/^([a-z]+)-\d+$/i) + if (matches) { + return matches[1] + } + return element + }) + + const uniqueArr = [...new Set(newArr)] + const mainGridItemsIds = app.grid.map((item) => item.id) + const id = getNextId([...mainGridItemsIds, ...uniqueArr]) + + return id +} + +export function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem { + const appComponent = data + + appComponent.id = id + + const newComponent = { + fixed: false, + resizable: true, + draggable: true, + customDragger: false, + customResizer: false, + x: 0, + y: 0 + } + + let newData: AppComponent = JSON.parse(JSON.stringify(appComponent)) + + const newItem: GridItem = { + 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 + } + const position = gridHelp.findSpace(newItem, grid, column) as { x: number; y: number } + newItem[column] = { ...newItem[column], ...position } + }) + + return newItem +} + +export function insertNewGridItem( + app: App, + data: AppComponent, + focusedGrid: FocusedGrid | undefined +) { + const id = getNextGridItemId(app) + + if (!focusedGrid) { + const newItem = createNewGridItem(app.grid, id, data) + app.grid.push(newItem) + } else { + const { parentComponentId, subGridIndex } = focusedGrid + + if (!app.subgrids) { + app.subgrids = {} + } + + const subGrid = app.subgrids[`${parentComponentId}-${subGridIndex}`] ?? [] + const newItem = createNewGridItem(subGrid, id, data) + const key = `${parentComponentId}-${subGridIndex ?? 0}` + + if (!app.subgrids[key]) { + app.subgrids[key] = [newItem] + } else { + app.subgrids[key].push(newItem) + } + } + + return id +} diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte index b599fc67a3..042a10452d 100644 --- a/frontend/src/lib/components/apps/editor/component/Component.svelte +++ b/frontend/src/lib/components/apps/editor/component/Component.svelte @@ -203,7 +203,6 @@ id={component.id} configuration={component.configuration} tabs={component.tabs} - bind:subGrids={component.subGrids} bind:staticOutputs={$staticOutputs[component.id]} {componentContainerHeight} /> diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte index 8019eaa549..43f67e3ad7 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte @@ -1,34 +1,20 @@ {#if component} @@ -164,10 +170,6 @@ {/if} - {#if component.type === 'tabscomponent' && Array.isArray(component.subGrids)} - - {/if} - {#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)} {/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte index eeb28aa999..1ad97c98e2 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte @@ -3,7 +3,7 @@ import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons' import { getContext } from 'svelte' import type { AppEditorContext, GridItem } from '../../types' - import { deleteComponent } from '../../utils' + //import { deleteComponent } from '../../utils' import PanelSection from './common/PanelSection.svelte' export let tabs: string[] @@ -20,7 +20,7 @@ function deleteSubgrid(index: number) { $focusedGrid = undefined subGrids[index].forEach((x) => { - deleteComponent(undefined, x.data, $app, $staticOutputs, $runnableComponents) + //deleteComponent(undefined, x.data, $app, $staticOutputs, $runnableComponents) }) tabs.splice(index, 1) subGrids.splice(index, 1) diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index 8ae0489827..1e68cc53e6 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -42,14 +42,14 @@ export interface BaseAppComponent extends Partial { configuration: Record< string, GeneralAppInput & - ( - | StaticAppInput - | ConnectedAppInput - | UserAppInput - | RowAppInput - | EvalAppInput - | UploadAppInput - ) + ( + | StaticAppInput + | ConnectedAppInput + | UserAppInput + | RowAppInput + | EvalAppInput + | UploadAppInput + ) > card: boolean | undefined customCss?: ComponentCustomCSS @@ -59,7 +59,8 @@ export interface BaseAppComponent extends Partial { * *For example when the component has a popup like `Select`* */ softWrap?: boolean - subgrids?: number + // Number of subgrids + numberOfSubgrids?: number } export type ComponentSet = { @@ -133,7 +134,6 @@ export type AppEditorContext = { } export type FocusedGrid = { parentComponentId: string; subGridIndex: number } - export type EditorMode = 'dnd' | 'preview' export type EditorBreakpoint = 'sm' | 'lg' diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index 0556219832..e6aee2b90b 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -2,21 +2,20 @@ import type { Schema } from '$lib/common' import { FlowService, ScriptService } from '$lib/gen' import { inferArgs } from '$lib/infer' import { emptySchema } from '$lib/utils' -import type { AppComponent, AppComponentConfig } from './editor/component' - -import { - components as componentsRecord, - getRecommendedDimensionsByComponent -} from './editor/component' -import { gridColumns } from './gridUtils' -import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper' +import type { AppComponent } from './editor/component' import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType' import type { Output } from './rx' import type { App, GridItem } from './types' -import { getNextId } from '../flows/flowStateUtils' -export function deleteComponent(subgrid: string | undefined, component: AppComponent, app: App, staticOutputs: Record, runnableComponents: Record) { +/* +export function deleteComponent( + subgrid: string | undefined, + component: AppComponent, + app: App, + staticOutputs: Record, + runnableComponents: Record +) { if (parentItems) { let index = parentItems.findIndex((item) => item.data?.id === component.id) if (index != -1) { @@ -45,6 +44,9 @@ export function deleteComponent(subgrid: string | undefined, component: AppCompo } } } + +*/ + export async function loadSchema( workspace: string, path: string, @@ -247,106 +249,3 @@ export function toPascalCase(text: string) { export function toKebabCase(text: string) { return text.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase() } - -export function findParent(root: GridItem[], id: string): GridItem | undefined { - if (!root) { - return undefined - } - for (const a of root) { - if (a.id === id) { - return a - } - - if (a.data.subGrids) { - // Recursively search the sub-grids - for (const subGrid of a.data.subGrids) { - const result = findParent(subGrid, id) - if (result) { - return result - } - } - } - - - } - - return undefined -} - -export function insertNewGridItem( - root: GridItem[], - id: string, - subGridIndex: number, - newId: string, - data: AppComponent -): GridItem[] { - const parentA = findParent(root, id) - - if (!parentA) { - throw new Error(`Parent A object with ID ${id} not found.`) - } - - const subGrid = parentA.data.subGrids[subGridIndex] - - if (!subGrid) { - throw new Error(`Sub-grid with index ${subGridIndex} not found.`) - } - - const newItem = createNewGridItem(subGrid ?? [], newId, data) - subGrid.push(newItem) - return root -} - -// The grid is needed to find a space for the new component -export function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem { - const appComponent = data - - appComponent.id = id - - const newComponent = { - fixed: false, - resizable: true, - draggable: true, - customDragger: false, - customResizer: false, - x: 0, - y: 0 - } - - let newData: AppComponent = JSON.parse(JSON.stringify(appComponent)) - - const newItem: GridItem = { - 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 - } - const position = gridHelp.findSpace(newItem, grid, column) as { x: number; y: number } - newItem[column] = { ...newItem[column], ...position } - }) - - return newItem -} - -export function recursiveGetIds(gridItem: GridItem): string[] { - const subGrids = gridItem.data.subGrids ?? [] - const subGridIds = subGrids - .map((subGrid: GridItem[]) => subGrid?.map(recursiveGetIds) ?? []) - .flat(Infinity) - return [gridItem.data.id, ...subGridIds] -} - -export function getNextGridItemId(grid: GridItem[] = []): string { - const gridItemIds = grid.map(recursiveGetIds).flat() - const id = getNextId(gridItemIds) - return id -}