From 80018e966800224249ec79a91751b0d226d57e5d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 15 Jul 2022 10:46:37 +0100
Subject: [PATCH] Visually hide components when cutting but do not remove from
 real definition

---
 .../design/[screenId]/_components/AppPreview.svelte           | 4 ++++
 .../design/[screenId]/_components/iframeTemplate.js           | 4 +++-
 packages/client/src/components/Component.svelte               | 4 +++-
 packages/client/src/index.js                                  | 1 +
 packages/client/src/stores/builder.js                         | 1 +
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index c15fa23ebe..abb956c9d3 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -85,6 +85,10 @@
     previewDevice: $store.previewDevice,
     messagePassing: $store.clientFeatures.messagePassing,
     navigation: $store.navigation,
+    hiddenComponentIds:
+      $store.componentToPaste?._id && $store.componentToPaste?.isCut
+        ? [$store.componentToPaste?._id]
+        : [],
     isBudibaseEvent: true,
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
index def32dd45f..1c789d858e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
@@ -65,7 +65,8 @@ export default `
           theme,
           customTheme,
           previewDevice,
-          navigation
+          navigation,
+          hiddenComponentIds
         } = parsed
 
         // Set some flags so the app knows we're in the builder
@@ -79,6 +80,7 @@ export default `
         window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
         window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice
         window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation
+        window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
 
         // Initialise app
         try {
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 808bfdae07..d30e97fc6b 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -121,6 +121,8 @@
     !isScreen &&
     definition?.draggable !== false
   $: droppable = interactive && !isLayout && !isScreen
+  $: builderHidden =
+    $builderStore.inBuilder && $builderStore.hiddenComponentIds?.includes(id)
 
   // Empty components are those which accept children but do not have any.
   // Empty states can be shown for these components, but can be disabled
@@ -434,7 +436,7 @@
   })
 </script>
 
-{#if constructor && initialSettings && (visible || inSelectedPath)}
+{#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
   <!-- The ID is used as a class because getElementsByClassName is O(1) -->
   <!-- and the performance matters for the selection indicators -->
   <div
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index d00277c157..b582dab4d3 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -20,6 +20,7 @@ const loadBudibase = () => {
     customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
     previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],
     navigation: window["##BUDIBASE_PREVIEW_NAVIGATION##"],
+    hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
   })
 
   // Set app ID - this window flag is set by both the preview and the real
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 94436b53b7..9d85eee022 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -17,6 +17,7 @@ const createBuilderStore = () => {
     previewDevice: "desktop",
     isDragging: false,
     navigation: null,
+    hiddenComponentIds: [],
 
     // Legacy - allow the builder to specify a layout
     layout: null,