From e45917c02002c9a64ee0ef01f55b6f8b235c3efc Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Sat, 18 Mar 2023 15:52:46 +0100 Subject: [PATCH] fix lock + reactivity on ctrl + fix optionValuesKeys --- .../components/helpers/RunnableComponent.svelte | 15 +++++++++------ .../lib/components/apps/editor/AppEditor.svelte | 7 +++++-- .../lib/components/apps/editor/GridEditor.svelte | 8 +++++--- .../components/apps/editor/SubGridEditor.svelte | 5 +++-- .../apps/editor/component/Component.svelte | 2 -- .../inlineScriptsPanel/InlineScriptEditor.svelte | 6 +++--- .../apps/editor/settingsPanel/GridTab.svelte | 1 - .../editor/settingsPanel/InputsSpecEditor.svelte | 4 ++-- .../editor/settingsPanel/InputsSpecsEditor.svelte | 2 +- .../inputEditor/StaticInputEditor.svelte | 6 +++--- frontend/src/lib/components/apps/gridUtils.ts | 2 +- frontend/src/lib/components/apps/types.ts | 2 +- 12 files changed, 33 insertions(+), 27 deletions(-) diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index 988798eea9..aa4da64981 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -11,7 +11,7 @@ import { getContext } from 'svelte' import { initOutput } from '../../editor/appUtils' import type { AppInputs, Runnable } from '../../inputType' - import type { AppViewerContext } from '../../types' + import type { AppViewerContext, InlineScript } from '../../types' import { computeGlobalContext, eval_like } from './eval' import InputValue from './InputValue.svelte' import RefreshButton from './RefreshButton.svelte' @@ -51,8 +51,8 @@ $: autoRefresh && handleAutorefresh() if (recomputable || autoRefresh) { - $runnableComponents[id] = async () => { - await executeComponent(true) + $runnableComponents[id] = async (inlineScript?: InlineScript) => { + await executeComponent(true, inlineScript) } $runnableComponents = $runnableComponents } @@ -135,7 +135,7 @@ return schemaStripped as Schema } - async function executeComponent(noToast = false) { + async function executeComponent(noToast = false, inlineScriptOverride?: InlineScript) { if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') { outputs?.loading?.set(true) try { @@ -188,8 +188,11 @@ } if (runnable?.type === 'runnableByName') { - const { inlineScript } = runnable - // console.log(inlineScript?.content) + console.log(inlineScriptOverride) + const { inlineScript } = inlineScriptOverride + ? { inlineScript: inlineScriptOverride } + : runnable + if (inlineScript) { requestBody['raw_code'] = { content: inlineScript.content, diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte index 89f4159c9c..08e5097dfe 100644 --- a/frontend/src/lib/components/apps/editor/AppEditor.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte @@ -13,7 +13,8 @@ ConnectingInput, EditorBreakpoint, EditorMode, - FocusedGrid + FocusedGrid, + InlineScript } from '../types' import AppEditorHeader from './AppEditorHeader.svelte' import GridEditor from './GridEditor.svelte' @@ -60,7 +61,9 @@ }) const history = initHistory(app) - const runnableComponents = writable Promise>>({}) + const runnableComponents = writable< + Record Promise> + >({}) const errorByComponent = writable>({}) const focusedGrid = writable(undefined) const pickVariableCallback: Writable<((path: string) => void) | undefined> = writable(undefined) diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte index d08ae98bfc..a5f4b3ebe2 100644 --- a/frontend/src/lib/components/apps/editor/GridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte @@ -11,7 +11,7 @@ import Component from './component/Component.svelte' import { deepEqual } from 'fast-equals' import { push } from '$lib/history' - import { expandGriditem} from './appUtils' + import { expandGriditem, findGridItem } from './appUtils' import Grid from '../svelte-grid/Grid.svelte' export let policy: Policy @@ -180,8 +180,9 @@ locked={isFixed(dataItem)} on:delete={() => removeGridElement(dataItem.data)} on:lock={() => { - if (dataItem.data) { - toggleFixed(dataItem) + const gridItem = findGridItem($app, dataItem.data.id) + if (gridItem) { + toggleFixed(gridItem) } $app = $app }} @@ -189,6 +190,7 @@ push(history, $app) $selectedComponent = dataItem.data.id expandGriditem($app.grid, dataItem, $breakpoint) + $app = $app }} /> diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte index 1c8063acff..486804f769 100644 --- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte @@ -57,8 +57,9 @@ } function lock(dataItem: GridItem) { - if (dataItem) { - toggleFixed(dataItem) + let fComponent = findGridItem($app, dataItem.data.id) + if (fComponent) { + fComponent = toggleFixed(fComponent) } $app = $app } diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte index dec886676d..f13c7aaec7 100644 --- a/frontend/src/lib/components/apps/editor/component/Component.svelte +++ b/frontend/src/lib/components/apps/editor/component/Component.svelte @@ -54,8 +54,6 @@ $: componentWithErrors = Object.values($errorByComponent).map((e) => e.componentId) $: hasError = componentWithErrors.includes(component.id) - - console.log('component', component) diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte index 5bfb5cb850..d5869092ac 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte @@ -185,7 +185,7 @@ btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900" on:click={async () => { runLoading = true - await $runnableComponents[id]?.() + await $runnableComponents[id]?.(inlineScript) runLoading = false }} > @@ -219,7 +219,7 @@ cmdEnterAction={async () => { inlineScript.content = editor?.getCode() ?? '' runLoading = true - await $runnableComponents[id]?.() + await $runnableComponents[id]?.(inlineScript) runLoading = false }} on:change={async (e) => { @@ -241,7 +241,7 @@ bind:this={simpleEditor} cmdEnterAction={async () => { runLoading = true - await $runnableComponents[id]?.() + await $runnableComponents[id]?.(inlineScript) runLoading = false }} class="h-full" diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte index 1e2900b70b..98ab1d1a9c 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte @@ -30,7 +30,6 @@ let subgrid = `${component.id}-${index}` for (const item of $app!.subgrids![subgrid]) { const components = deleteGridItem($app, item.data, subgrid, false) - console.log(components) for (const key in components) { delete $runnableComponents[key] } diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte index 66d1af7684..1d0324c465 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte @@ -28,7 +28,7 @@ export let fieldType: InputType export let subFieldType: InputType | undefined export let format: string | undefined - export let optionValuesKeys: keyof typeof staticValues | undefined + export let optionValuesKey: keyof typeof staticValues | undefined const { connectingInput } = getContext('AppViewerContext') @@ -123,7 +123,7 @@ diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte index 7eeafcfa3a..1a4208cfa4 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte @@ -29,7 +29,7 @@ fieldType={meta?.['fieldType']} subFieldType={meta?.['subFieldType']} format={meta?.['format']} - optionValuesKeys={meta?.['optionValuesKeys']} + optionValuesKey={meta?.['optionValuesKey']} tooltip={meta?.['tooltip']} onlyStatic={meta?.['onlyStatic']} /> diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte index 7989b75fb1..cedff099b0 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte @@ -15,7 +15,7 @@ export let componentInput: StaticInput | undefined export let fieldType: InputType | undefined = undefined export let subFieldType: InputType | undefined = undefined - export let optionValuesKeys: keyof typeof staticValues | undefined = undefined + export let optionValuesKey: keyof typeof staticValues | undefined = undefined export let format: string | undefined = undefined export let noVariablePicker: boolean = false @@ -34,9 +34,9 @@ {:else if fieldType === 'boolean'} - {:else if fieldType === 'select' && optionValuesKeys} + {:else if fieldType === 'select' && optionValuesKey}