From 3b9c22f31306f2246a71fb516e834cbf4ee2ad1b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 26 Apr 2022 10:16:58 +0100 Subject: [PATCH] Fix iframe remounting on routify changes --- .../design/_components}/AppPanel.svelte | 0 .../design/_components}/AppPreview.svelte | 13 +------------ .../_components}/DevicePreviewSelect.svelte | 0 .../design/_components}/iframeTemplate.js | 0 .../app/[application]/design/_layout.svelte | 15 +++++++++++++++ .../[screenId]/[componentId]/index.svelte | 2 -- .../design/components/[screenId]/new/index.svelte | 2 -- .../design/screens/[screenId].svelte | 2 -- .../_components/ScreenSettingsPanel.svelte | 8 ++++---- .../app/[application]/design/theme/index.svelte | 3 --- 10 files changed, 20 insertions(+), 25 deletions(-) rename packages/builder/src/{components/design/AppPanel => pages/builder/app/[application]/design/_components}/AppPanel.svelte (100%) rename packages/builder/src/{components/design/AppPanel => pages/builder/app/[application]/design/_components}/AppPreview.svelte (94%) rename packages/builder/src/{components/design/AppPanel => pages/builder/app/[application]/design/_components}/DevicePreviewSelect.svelte (100%) rename packages/builder/src/{components/design/AppPanel => pages/builder/app/[application]/design/_components}/iframeTemplate.js (100%) diff --git a/packages/builder/src/components/design/AppPanel/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/AppPanel.svelte similarity index 100% rename from packages/builder/src/components/design/AppPanel/AppPanel.svelte rename to packages/builder/src/pages/builder/app/[application]/design/_components/AppPanel.svelte diff --git a/packages/builder/src/components/design/AppPanel/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte similarity index 94% rename from packages/builder/src/components/design/AppPanel/AppPreview.svelte rename to packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte index 2e117ecfb3..e87f2b2a49 100644 --- a/packages/builder/src/components/design/AppPanel/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte @@ -3,8 +3,6 @@ import { onMount, onDestroy } from "svelte" import { store, selectedScreen, currentAsset } from "builderStore" import iframeTemplate from "./iframeTemplate" - import { Screen } from "builderStore/store/screenTemplates/utils/Screen" - import { FrontendTypes } from "constants" import ConfirmDialog from "components/common/ConfirmDialog.svelte" import { ProgressCircle, @@ -24,17 +22,8 @@ let loading = true let error - // Create screen slot placeholder for use when a page is selected rather - // than a screen - const screenPlaceholder = new Screen() - .name("Screen Placeholder") - .route("*") - .component("@budibase/standard-components/screenslot") - .instanceName("Content Placeholder") - .json() - // Messages that can be sent from the iframe preview to the builder - // Budibase events are and initalisation events + // Budibase events are and initialisation events const MessageTypes = { READY: "ready", ERROR: "error", diff --git a/packages/builder/src/components/design/AppPanel/DevicePreviewSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/DevicePreviewSelect.svelte similarity index 100% rename from packages/builder/src/components/design/AppPanel/DevicePreviewSelect.svelte rename to packages/builder/src/pages/builder/app/[application]/design/_components/DevicePreviewSelect.svelte diff --git a/packages/builder/src/components/design/AppPanel/iframeTemplate.js b/packages/builder/src/pages/builder/app/[application]/design/_components/iframeTemplate.js similarity index 100% rename from packages/builder/src/components/design/AppPanel/iframeTemplate.js rename to packages/builder/src/pages/builder/app/[application]/design/_components/iframeTemplate.js diff --git a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte index a29749472c..90bdf616c7 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte @@ -1,6 +1,7 @@
@@ -41,6 +42,7 @@
+
@@ -64,4 +66,17 @@ align-items: stretch; flex: 1 1 auto; } + /* + This is hacky, yes, but it's the only way to prevent routify from + remounting the iframe on route changes. + */ + .content :global(> *:last-child) { + order: 1; + } + .content :global(> *:first-child) { + order: 0; + } + .content :global(> *:nth-child(2)) { + order: 2; + } diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte index 2509c3d215..f24897f658 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte @@ -1,9 +1,7 @@ - diff --git a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte index 8127a6b095..ac287edf6f 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte @@ -1,7 +1,5 @@ - diff --git a/packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte b/packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte index f88314521f..ad7a9da648 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte @@ -3,7 +3,6 @@ import { onDestroy } from "svelte" import { syncURLToState } from "helpers/urlStateSync" import { goto, params, redirect } from "@roxi/routify" - import AppPanel from "components/design/AppPanel/AppPanel.svelte" import ScreenNavigationPanel from "./_components/ScreenNavigationPanel.svelte" import ScreenSettingsPanel from "./_components/ScreenSettingsPanel.svelte" @@ -27,5 +26,4 @@ - diff --git a/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte index 0d0366d924..0ffd2d5748 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte @@ -36,7 +36,7 @@ } const setScreenSetting = (setting, value) => { - const { name, parser, validate } = setting + const { key, parser, validate } = setting // Parse value if required if (parser) { @@ -48,7 +48,7 @@ const error = validate(value) errors = { ...errors, - [name]: error, + [key]: error, } if (error) { return @@ -56,13 +56,13 @@ } else { errors = { ...errors, - [name]: null, + [key]: null, } } // Update screen object in store store.update(state => { - setWith(get(selectedScreen), name.split("."), value, Object) + setWith(get(selectedScreen), key.split("."), value, Object) return state }) diff --git a/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte index ef86bcdc20..f21267d810 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte @@ -1,7 +1,6 @@ @@ -11,5 +10,3 @@ - -