From dab7b68e40c75208784f9dedea42cc96e694aabf Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Wed, 15 Mar 2023 22:24:13 +0100 Subject: [PATCH] context panel refactor --- .../apps/components/display/AppMap.svelte | 3 + .../apps/components/display/AppPdf.svelte | 2 + .../helpers/RunnableComponent.svelte | 2 - .../components/apps/editor/AppPreview.svelte | 76 ++++++++++-- .../components/apps/editor/GridEditor.svelte | 31 +---- .../components/apps/editor/GridPanel.svelte | 1 + .../components/apps/editor/GridViewer.svelte | 104 ++++++++++++++++ .../apps/editor/GridViewerComponent.svelte | 26 ++++ .../apps/editor/SubGridEditor.svelte | 115 +++++++++++------- .../lib/components/apps/editor/appUtils.ts | 20 +-- .../apps/editor/component/components.ts | 18 +-- .../contextPanel/ComponentOutput.svelte | 33 ++--- .../contextPanel/ComponentOutputViewer.svelte | 16 ++- .../editor/contextPanel/ContextPanel.svelte | 82 ++++++------- .../editor/contextPanel/SubGridOutput.svelte | 3 +- .../components/BackgroundScriptOutput.svelte | 3 - .../components/BackgroundScriptsOutput.svelte | 3 +- .../components/OutputHeader.svelte | 91 +++++++------- .../components/TableActionOutput.svelte | 3 +- .../components/TableActionsOutput.svelte | 3 +- .../EmptyInlineScript.svelte | 2 +- .../InlineScriptsPanel.svelte | 6 +- frontend/src/lib/components/apps/gridUtils.ts | 22 +--- .../components/apps/svelte-grid/types.d.ts | 28 ++--- frontend/src/lib/components/apps/types.ts | 12 +- frontend/src/lib/components/apps/utils.ts | 4 +- .../propertyPicker/ObjectViewer.svelte | 2 +- 27 files changed, 436 insertions(+), 275 deletions(-) create mode 100644 frontend/src/lib/components/apps/editor/GridViewer.svelte create mode 100644 frontend/src/lib/components/apps/editor/GridViewerComponent.svelte diff --git a/frontend/src/lib/components/apps/components/display/AppMap.svelte b/frontend/src/lib/components/apps/components/display/AppMap.svelte index 8d5b43e49a..6ea2a74dee 100644 --- a/frontend/src/lib/components/apps/components/display/AppMap.svelte +++ b/frontend/src/lib/components/apps/components/display/AppMap.svelte @@ -171,6 +171,7 @@ updateRegionOutput() if (z) { + //@ts-ignore gridItem.data.configuration.zoom.value = z } @@ -180,7 +181,9 @@ } if (gridItem) { + //@ts-ignore gridItem.data.configuration.longitude.value = center[0] + //@ts-ignore gridItem.data.configuration.latitude.value = center[1] } } diff --git a/frontend/src/lib/components/apps/components/display/AppPdf.svelte b/frontend/src/lib/components/apps/components/display/AppPdf.svelte index 9a6658a950..c995069fd5 100644 --- a/frontend/src/lib/components/apps/components/display/AppPdf.svelte +++ b/frontend/src/lib/components/apps/components/display/AppPdf.svelte @@ -155,7 +155,9 @@ function syncZoomValue() { const gridItem = findGridItem($app, id) + //@ts-ignore if (gridItem && gridItem.data.configuration.zoom.value !== zoom) { + //@ts-ignore gridItem.data.configuration.zoom.value = zoom } diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index 19b7b5aa56..72f078ebfb 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -351,6 +351,4 @@ {/if} -{:else} -
{/if} diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte index 8c3826907c..c6673d8393 100644 --- a/frontend/src/lib/components/apps/editor/AppPreview.svelte +++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte @@ -1,7 +1,7 @@ + +
+ {#if xPerPx} + {#each items as item (item.id)} + + {#if item[getComputedCols]} + + {/if} + + {/each} + {/if} +
+ + diff --git a/frontend/src/lib/components/apps/editor/GridViewerComponent.svelte b/frontend/src/lib/components/apps/editor/GridViewerComponent.svelte new file mode 100644 index 0000000000..7efd53c31a --- /dev/null +++ b/frontend/src/lib/components/apps/editor/GridViewerComponent.svelte @@ -0,0 +1,26 @@ + + +
+ +
+ + diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte index ff6aca2379..e91c7a775d 100644 --- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte @@ -8,6 +8,7 @@ import { expandGriditem, findGridItem, sortGridItemsPosition } from './appUtils' import { push } from '$lib/history' import Grid from '../svelte-grid/Grid.svelte' + import GridViewer from './GridViewer.svelte' export let containerHeight: number export let containerWidth: number | undefined = undefined @@ -89,46 +90,85 @@ on:pointerup={onpointerup} style="height: {containerHeight}px; {style ?? ''}" > -
- + { + push(history, $app) + subGrid = e.detail + }} + let:dataItem + rowHeight={36} + cols={columnConfiguration} + fastStart={true} + gap={[4, 2]} + scroller={container} + parentWidth={$parentWidth - 17} + {containerWidth} + > + + {#if $connectingInput.opened} +
($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" + /> +
+ {dataItem.data.id} +
+ {/if} + + +
selectComponent(dataItem.data.id)} + class={classNames( + 'h-full w-full center-center', + $selectedComponent === dataItem.data.id ? 'active-grid-item' : '', + dataItem.data.card ? 'border border-gray-100' : '', + 'top-0' + )} + > + 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 + }} + /> +
+ +
+ {:else} + { - push(history, $app) - subGrid = e.detail - }} let:dataItem rowHeight={36} cols={columnConfiguration} - fastStart={true} gap={[4, 2]} - scroller={container} parentWidth={$parentWidth - 17} {containerWidth} > - - {#if $connectingInput.opened} -
($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" - /> -
- {dataItem.data.id} -
- {/if} -
selectComponent(dataItem.data.id)} - class={classNames( - 'h-full w-full center-center', - $selectedComponent === dataItem.data.id ? 'active-grid-item' : '', - dataItem.data.card ? 'border border-gray-100' : '', - 'top-0' - )} + class={classNames('h-full w-full center-center', 'top-0')} > 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 - }} />
- -
+ + {/if}
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts index 0034a92b0c..e3dd9ec632 100644 --- a/frontend/src/lib/components/apps/editor/appUtils.ts +++ b/frontend/src/lib/components/apps/editor/appUtils.ts @@ -35,15 +35,12 @@ export function findGridItemParentGrid(app: App, id: string): string | undefined } } -export function isIdInsideGriditem(app: App, gridItem: GridItem, id: string | undefined): boolean { - const path: string[] = [] - let currentId = id - while (currentId) { - path.push(currentId) - currentId = findGridItemParentGrid(app, currentId)?.split('-')[0] +export function allsubIds(app: App, parentId: string): string[] { + let item = findGridItem(app, parentId) + if (!item?.data.numberOfSubgrids) { + return [parentId] } - - return path.includes(gridItem.id) + return getAllSubgridsAndComponentIds(app, item?.data)[1] } export function findGridItem(app: App, id: string): GridItem | undefined { @@ -336,7 +333,7 @@ export function sortGridItemsPosition( gridItems: FilledItem[], width: number ): FilledItem[] { - return gridItems.sort((a: GridItem, b: GridItem) => { + return gridItems.sort((a: FilledItem, b: FilledItem) => { const aX = a[width].x const aY = a[width].y const bX = b[width].x @@ -392,7 +389,10 @@ export function recursivelyFilterKeyInJSON( Object.keys(json).forEach((key) => { if ( key.toLowerCase().includes(search.toLowerCase()) || - extraSearch?.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') { diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index f7726058b4..060c68384e 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -34,7 +34,7 @@ import { FileText, AtSignIcon } from 'lucide-svelte' -import type { BaseAppComponent } from '../../types' +import type { BaseAppComponent, GridItem } from '../../types' import type { Size } from '../../svelte-grid/types' type BaseComponent = { @@ -68,7 +68,7 @@ export type BarChartComponent = BaseComponent<'barchartcomponent'> export type PieChartComponent = BaseComponent<'piechartcomponent'> export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'> export type TableComponent = BaseComponent<'tablecomponent'> & { - actionButtons: (BaseAppComponent & ButtonComponent)[] + actionButtons: (BaseAppComponent & ButtonComponent & GridItem)[] } export type AggridComponent = BaseComponent<'aggridcomponent'> export type DisplayComponent = BaseComponent<'displaycomponent'> @@ -769,7 +769,7 @@ Hello \${ctx.username} fieldType: 'boolean', value: false, onlyStatic: true, - tooltip: "Configure all columns as Editable by users" + tooltip: 'Configure all columns as Editable by users' }, pagination: { type: 'static', @@ -782,7 +782,7 @@ Hello \${ctx.username} fieldType: 'number', value: 10, onlyStatic: true, - tooltip: "Number of rows per page" + tooltip: 'Number of rows per page' } }, componentInput: { @@ -887,7 +887,7 @@ Hello \${ctx.username} fieldType: 'boolean', value: false, onlyStatic: true, - tooltip: "Allows user to manually add new value" + tooltip: 'Allows user to manually add new value' }, placeholder: { type: 'static', @@ -1004,7 +1004,7 @@ Hello \${ctx.username} type: 'static', value: 1, fieldType: 'number', - tooltip: "Spread between each number suggestion" + tooltip: 'Spread between each number suggestion' } }, customCss: { @@ -1048,7 +1048,7 @@ Hello \${ctx.username} fieldType: 'select', onlyStatic: true, optionValuesKey: 'localeOptions', - tooltip: "Currency format" + tooltip: 'Currency format' } }, customCss: { @@ -1088,7 +1088,7 @@ Hello \${ctx.username} type: 'static', value: 1, fieldType: 'number', - tooltip: "Spread between each number suggestion" + tooltip: 'Spread between each number suggestion' } }, customCss: { @@ -1135,7 +1135,7 @@ Hello \${ctx.username} type: 'static', value: 1, fieldType: 'number', - tooltip: "Spread between each number suggestion" + tooltip: 'Spread between each number suggestion' } }, customCss: { diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte index aa7da556a8..48e68e0df2 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte @@ -3,7 +3,7 @@ import { getContext } from 'svelte' import type { AppViewerContext, GridItem } from '../../types' import ComponentOutputViewer from './ComponentOutputViewer.svelte' - import { connectInput, isIdInsideGriditem } from '../appUtils' + import { connectInput } from '../appUtils' import SubGridOutput from './SubGridOutput.svelte' import OutputHeader from './components/OutputHeader.svelte' import TableActionsOutput from './components/TableActionsOutput.svelte' @@ -14,8 +14,7 @@ export let parentId: string | undefined = undefined export let expanded: boolean = false - const { app, selectedComponent, connectingInput } = - getContext('AppViewerContext') + const { selectedComponent, connectingInput } = getContext('AppViewerContext') const name = getComponentNameById(gridItem.id) function getComponentNameById(componentId: string) { @@ -30,14 +29,10 @@ } } - $: subGrids = Array.from({ length: gridItem.data.numberOfSubgrids }).map( + $: subGrids = Array.from({ length: gridItem.data.numberOfSubgrids ?? 0 }).map( (_, i) => `${gridItem.id}-${i}` ) - $: insideGrid = isIdInsideGriditem($app, gridItem, $selectedComponent) - $: isSelected = $selectedComponent === gridItem.id - $: shouldOpen = insideGrid || isSelected - function onHeaderClick(manuallyOpen: boolean) { if (manuallyOpen) { if (parentId) { @@ -52,7 +47,6 @@ { if (!$connectingInput.opened) { onHeaderClick(e.detail.manuallyOpen) @@ -62,19 +56,16 @@ name={getComponentNameById(gridItem.id)} {first} {nested} - {expanded} > -
- { - if ($connectingInput.opened) { - $connectingInput = connectInput($connectingInput, gridItem.id, detail) - } - }} - /> -
+ { + if ($connectingInput.opened) { + $connectingInput = connectInput($connectingInput, gridItem.id, detail) + } + }} + /> - + diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte index 1424b21bd9..d280e40584 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte @@ -3,13 +3,13 @@ import { getContext } from 'svelte' import type { Writable } from 'svelte/store' import type { Output } from '../../rx' - import type { AppViewerContext } from '../../types' - import { recursivelyFilterKeyInJSON } from '../appUtils' + import type { AppViewerContext, ContextPanelContext } from '../../types' + import { recursivelyFilterKeyInJSON as recursivelyFilterInJSON } from '../appUtils' export let componentId: string const { worldStore } = getContext('AppViewerContext') - const { search } = getContext<{ search: Writable }>('searchCtx') + const { search, hasResult } = getContext('ContextPanel') let object = {} @@ -29,11 +29,15 @@ $: subscribeToAllOutputs($worldStore?.outputsById?.[componentId]) - $: filtered = recursivelyFilterKeyInJSON(object, $search, componentId) + $: filtered = recursivelyFilterInJSON(object, $search, componentId) + + $: $hasResult[componentId] = Object.keys(filtered).length > 0 -{#if Object.keys(filtered).length > 0} +{#if $hasResult[componentId] || $search == ''} {:else if $search.length > 0} -
No results
+
No results
+{:else} +
No outputs
{/if} diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte index f359becc39..8d83fdc568 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte @@ -4,7 +4,7 @@ import { getContext, setContext } from 'svelte' import { writable } from 'svelte/store' - import type { AppViewerContext } from '../../types' + import type { AppViewerContext, ContextPanelContext } from '../../types' import { connectInput } from '../appUtils' import PanelSection from '../settingsPanel/common/PanelSection.svelte' import ComponentOutput from './ComponentOutput.svelte' @@ -13,19 +13,17 @@ import MinMaxButton from './components/MinMaxButton.svelte' import OutputHeader from './components/OutputHeader.svelte' - const { connectingInput, app, worldStore } = getContext('AppViewerContext') + const { connectingInput, app } = getContext('AppViewerContext') let search = writable('') - let expanded = false - let ctxOpened = true - let stateOpened = true + let expanded = writable(false) - setContext('searchCtx', { - search + setContext('ContextPanel', { + search, + manuallyOpened: writable>({}), + hasResult: writable>({}), + expanded }) - - $: expanded && !ctxOpened && (ctxOpened = true) - $: expanded && !stateOpened && (stateOpened = true) @@ -50,46 +48,44 @@
- +
- {#key $worldStore?.outputsById} -
- State & Context +
+ State & Context - - { - $connectingInput = connectInput($connectingInput, 'ctx', detail) - }} - /> - + + { + $connectingInput = connectInput($connectingInput, 'ctx', detail) + }} + /> + - - { - $connectingInput = connectInput($connectingInput, 'state', detail) - }} - /> - -
+ + { + $connectingInput = connectInput($connectingInput, 'state', detail) + }} + /> + +
-
- Components - {#each $app.grid as gridItem, index (gridItem.id)} - - {/each} +
+ Components + {#each $app.grid as gridItem, index (gridItem.id)} + + {/each} +
+
+ Background scripts +
+
-
- Background scripts -
- -
-
- {/key} +
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte index 8f5bd7e541..f65d290c5c 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte @@ -12,8 +12,7 @@ export let expanded: boolean = false export let subGrids: string[] - const { app, connectingInput, breakpoint, worldStore } = - getContext('AppViewerContext') + const { app, connectingInput, worldStore } = getContext('AppViewerContext') let selected = 0 diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte index 80d63a3a3c..8be9838d4b 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte @@ -9,7 +9,6 @@ export let id: string export let name: string - export let expanded: boolean = false export let first: boolean = false function onHeaderClick(manuallyOpen: boolean) { @@ -30,13 +29,11 @@ {name} color="blue" {first} - {expanded} on:handleClick={(e) => { if (!$connectingInput.opened) { onHeaderClick(e.detail.manuallyOpen) } }} - shouldOpen={$selectedComponent === id} > import type { AppViewerContext } from '$lib/components/apps/types' import { getContext } from 'svelte' - import OutputHeader from './OutputHeader.svelte' import BackgroundScriptOutput from './BackgroundScriptOutput.svelte' const { app } = getContext('AppViewerContext') @@ -10,5 +9,5 @@ {#each $app.hiddenInlineScripts as action, index} - + {/each} diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte index 5243e4ab80..f69f8fd1a9 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte @@ -1,28 +1,32 @@ -
{ - dispatch('handleClick', { manuallyOpen }) - manuallyOpen = !manuallyOpen - }} -> +
{ + dispatch('handleClick', { manuallyOpen: $manuallyOpened[id] }) + $manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true + }} > - {id} +
+ {id} +
+
{ + $manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : false + }} + class="text-2xs font-bold flex flex-row gap-2 items-center truncate" + > + {name} + {#if !open} + + {:else if $manuallyOpened[id]} + + {:else} + + {/if} +
-
- {name} - {#if !open && !manuallyOpen} - - {:else if manuallyOpen} - - {:else} - - {/if} -
-
-{#if open || manuallyOpen} -
+ -{/if} +
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte index f9f0b4dfdb..e8b3724ae3 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte @@ -8,11 +8,10 @@ const { connectingInput } = getContext('AppViewerContext') export let id: string - export let expanded: boolean = false export let first: boolean = false - + { diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte index cfa4f0ac75..e9186ad369 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte @@ -3,14 +3,13 @@ import TableActionOutput from './TableActionOutput.svelte' export let gridItem: GridItem - export let expanded: boolean = false
{#if gridItem.data.type === 'tablecomponent' && gridItem.data.actionButtons.length > 0}
{#each gridItem.data.actionButtons as action, index} - + {/each}
{/if} diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte index c18883a745..edc92abcf6 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte @@ -49,7 +49,7 @@ const componentType = $app.grid.find((c) => c.data.id === id)?.data?.type const content = - defaultCode(componentType, language) ?? + defaultCode(componentType ?? '', language) ?? initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow') return newInlineScript(content, language, path) diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte index 83019b5987..aea48f8add 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte @@ -36,8 +36,7 @@ {#each $app.grid as gridItem (gridItem?.data?.id)} {#if gridItem?.data?.id && gridItem.data.id === selectedScriptComponentId} @@ -60,8 +59,7 @@ {#each $app.subgrids[key] as gridItem (gridItem?.data?.id)} {#if gridItem?.data?.id && gridItem.data.id === selectedScriptComponentId} diff --git a/frontend/src/lib/components/apps/gridUtils.ts b/frontend/src/lib/components/apps/gridUtils.ts index 5f21554a60..4d592a9438 100644 --- a/frontend/src/lib/components/apps/gridUtils.ts +++ b/frontend/src/lib/components/apps/gridUtils.ts @@ -7,8 +7,8 @@ const Breakpoints = { lg: 1024 } -const WIDE_GRID_COLUMNS = 12 as const; -const NARROW_GRID_COLUMNS = 3 as const; +const WIDE_GRID_COLUMNS = 12 as const +const NARROW_GRID_COLUMNS = 3 as const const columnConfiguration: ColumnConfiguration = [ [Breakpoints.lg, WIDE_GRID_COLUMNS], @@ -17,14 +17,6 @@ const columnConfiguration: ColumnConfiguration = [ const gridColumns = columnConfiguration.map((value) => value[1]) -function disableDrag(component: GridItem): GridItem { - gridColumns.forEach((column: number) => { - component[column].customDragger = true - component[column].customResizer = true - }) - return component -} - function toggleFixed(component: GridItem): GridItem { const nValue = !component[gridColumns[0]].fixed gridColumns.forEach((column: number) => { @@ -44,21 +36,11 @@ function isFixed(component: GridItem): boolean { return fixed } -function enableDrag(component: GridItem): GridItem { - gridColumns.forEach((column: number) => { - component[column].customDragger = false - component[column].customResizer = false - }) - return component -} - export { gridColumns, WIDE_GRID_COLUMNS, NARROW_GRID_COLUMNS, columnConfiguration, - disableDrag, - enableDrag, Breakpoints, toggleFixed, isFixed diff --git a/frontend/src/lib/components/apps/svelte-grid/types.d.ts b/frontend/src/lib/components/apps/svelte-grid/types.d.ts index 504c561549..6aaeb055ca 100644 --- a/frontend/src/lib/components/apps/svelte-grid/types.d.ts +++ b/frontend/src/lib/components/apps/svelte-grid/types.d.ts @@ -1,25 +1,21 @@ - export interface Size { - w: number - h: number + w: number + h: number } export interface Positon { - x: number - y: number + x: number + y: number } interface ItemLayout extends Size, Positon { - fixed?: boolean - resizable?: boolean - draggable?: boolean - customDragger?: boolean - customResizer?: boolean - min?: Size - max?: Size + fixed?: boolean + resizable?: boolean + draggable?: boolean + customDragger?: boolean + customResizer?: boolean + min?: Size + max?: Size } -export type FilledItem = T & { [width: number]: Required; data: any, id: string } - - - +export type FilledItem = { [width: number]: Required; data: T; id: string } diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index bc9639c31c..7bbdb11aca 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -77,10 +77,7 @@ export type AppSection = { id: SectionID } -export type GridItem = FilledItem<{ - data: AppComponent - id: string -}> +export type GridItem = FilledItem export type InlineScript = { content: string @@ -155,3 +152,10 @@ export type EditorBreakpoint = 'sm' | 'lg' export const IS_APP_PUBLIC_CONTEXT_KEY = 'isAppPublicContext' as const type ComponentID = string + +export type ContextPanelContext = { + search: Writable + manuallyOpened: Writable> + expanded: Writable + hasResult: Writable> +} diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index d19c8e5dfa..7ddc53d519 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -199,8 +199,8 @@ export function getAllScriptNames(app: App): string[] { acc.push(componentInput.runnable.name) } - if (componentInput?.type === 'tablecomponent') { - componentInput.actionButtons.forEach((actionButton) => { + if (gridItem.data.type === 'tablecomponent') { + gridItem.data.actionButtons.forEach((actionButton) => { if (actionButton.componentInput?.type === 'runnable') { if (actionButton.componentInput.runnable?.type === 'runnableByName') { acc.push(actionButton.componentInput.runnable.name) diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte index 29d5744222..fd10e04f0d 100644 --- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte +++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte @@ -132,7 +132,7 @@ {:else if topBrackets} {openBracket}{closeBracket} {:else} - No items + No items {/if}