From db0b9f0a2ffd749a20d2eafb33e6d87cf062133a Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Wed, 23 Nov 2022 19:31:36 +0100 Subject: [PATCH] fix(frontend): Fix context panel + delete component (#937) * fix(frontend): Fix context panel + delete component * fix(frontend): Handle nested paths --- .../components/common/ButtonComponent.svelte | 1 - .../apps/components/helpers/InputValue.svelte | 11 ++- .../components/apps/editor/AppEditor.svelte | 68 ++++++++++--------- .../components/apps/editor/GridEditor.svelte | 32 +++++---- .../contextPanel/ComponentOutputViewer.svelte | 22 ++++-- .../editor/contextPanel/ContextPanel.svelte | 8 +-- .../settingsPanel/ComponentPanel.svelte | 3 +- .../settingsPanel/InputsSpecsEditor.svelte | 2 +- frontend/src/lib/components/apps/rx.ts | 7 +- frontend/src/lib/components/apps/utils.ts | 20 ++++++ 10 files changed, 110 insertions(+), 64 deletions(-) diff --git a/frontend/src/lib/components/apps/components/common/ButtonComponent.svelte b/frontend/src/lib/components/apps/components/common/ButtonComponent.svelte index 3a1e47533b..5a2c9843f7 100644 --- a/frontend/src/lib/components/apps/components/common/ButtonComponent.svelte +++ b/frontend/src/lib/components/apps/components/common/ButtonComponent.svelte @@ -14,7 +14,6 @@ export const staticOutputs: string[] = ['loading', 'result'] let labelValue: string = 'Default label' - let runnableComponent: RunnableComponent diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte index faf3a36f66..e5de65c772 100644 --- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte +++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte @@ -1,10 +1,11 @@ diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte index 18a4c41800..80578ce46e 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte @@ -16,7 +16,8 @@ export let appPath: string - const { connectingInput, staticOutputs, app } = getContext('AppEditorContext') + const { connectingInput, staticOutputs, app, worldStore } = + getContext('AppEditorContext') function connectInput(id: string, name: string) { if ($connectingInput) { @@ -152,7 +153,7 @@ {#each Object.entries($staticOutputs) as [componentId, outputs], index} - {#if outputs.length > 0} + {#if outputs.length > 0 && $worldStore?.outputsById[componentId]} Component: {componentId}
@@ -160,8 +161,7 @@ {outputs} {componentId} on:select={({ detail }) => { - const [output] = detail.split('.') - connectInput(componentId, output) + connectInput(componentId, detail) }} />
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index 14d0b3d91a..82357c2fd1 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -26,8 +26,7 @@ function removeGridElement() { if (component) { const COLS = 6 - const index = $app.grid.findIndex((gridComponent) => gridComponent.data.id === component?.id) - $app.grid.splice(index, 1) + $app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id) $app.grid = gridHelp.adjust($app.grid, COLS) // Delete static inputs diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte index f5acd41cd1..ff24e2d03e 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte @@ -8,7 +8,7 @@ export let inputSpecs: InputsSpec const userTypeKeys = ['schemaProperty', 'defaultValue', 'value'] - const staticTypeKeys = ['visible', 'value', 'fieldType'] + const staticTypeKeys = ['value'] const dynamicTypeKeys = ['id', 'name', 'defaultValue'] function sanitizeInputSpec(type: 'user' | 'static' | 'output', inputSpecKey: string) { diff --git a/frontend/src/lib/components/apps/rx.ts b/frontend/src/lib/components/apps/rx.ts index 1321c5ca93..0e2dbe56eb 100644 --- a/frontend/src/lib/components/apps/rx.ts +++ b/frontend/src/lib/components/apps/rx.ts @@ -45,10 +45,13 @@ export function buildObservableWorld() { } } else if (inputSpec.type === 'output') { const input = cachedInput(next) - let obs = observables[`${inputSpec.id}.${inputSpec.name}`] + + const [name] = inputSpec.name ? inputSpec.name.split('.') : [undefined] + + let obs = observables[`${inputSpec.id}.${name}`] if (!obs) { - console.warn('Observable at ' + inputSpec.id + '.' + inputSpec.name + ' not found') + console.warn('Observable at ' + inputSpec.id + '.' + name + ' not found') return { peak: () => undefined, next: () => {} diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index 9792be0741..e4176d3940 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -73,3 +73,23 @@ export const displayData = { icon: faBarChart } } + +export function accessPropertyByPath(object: T, path: string): T | undefined { + // convert indexes to properties + path = path.replace(/\[(\w+)\]/g, '.$1') + // strip a leading dot + path = path.replace(/^\./, '') + + let a = path.split('.') + + for (let i = 0, depth = a.length; i < depth; ++i) { + let key = a[i] + if (object[key]) { + object = object[key] + } else { + // Value not found + return + } + } + return object +}