Visually hide components when cutting but do not remove from real definition

This commit is contained in:
Andrew Kingston 2022-07-15 10:46:37 +01:00
parent 190c545e25
commit 80018e9668
5 changed files with 12 additions and 2 deletions

View File

@ -85,6 +85,10 @@
previewDevice: $store.previewDevice, previewDevice: $store.previewDevice,
messagePassing: $store.clientFeatures.messagePassing, messagePassing: $store.clientFeatures.messagePassing,
navigation: $store.navigation, navigation: $store.navigation,
hiddenComponentIds:
$store.componentToPaste?._id && $store.componentToPaste?.isCut
? [$store.componentToPaste?._id]
: [],
isBudibaseEvent: true, isBudibaseEvent: true,
} }

View File

@ -65,7 +65,8 @@ export default `
theme, theme,
customTheme, customTheme,
previewDevice, previewDevice,
navigation navigation,
hiddenComponentIds
} = parsed } = parsed
// Set some flags so the app knows we're in the builder // 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_CUSTOM_THEME##"] = customTheme
window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice
window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation
window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
// Initialise app // Initialise app
try { try {

View File

@ -121,6 +121,8 @@
!isScreen && !isScreen &&
definition?.draggable !== false definition?.draggable !== false
$: droppable = interactive && !isLayout && !isScreen $: droppable = interactive && !isLayout && !isScreen
$: builderHidden =
$builderStore.inBuilder && $builderStore.hiddenComponentIds?.includes(id)
// Empty components are those which accept children but do not have any. // Empty components are those which accept children but do not have any.
// Empty states can be shown for these components, but can be disabled // Empty states can be shown for these components, but can be disabled
@ -434,7 +436,7 @@
}) })
</script> </script>
{#if constructor && initialSettings && (visible || inSelectedPath)} {#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
<!-- The ID is used as a class because getElementsByClassName is O(1) --> <!-- The ID is used as a class because getElementsByClassName is O(1) -->
<!-- and the performance matters for the selection indicators --> <!-- and the performance matters for the selection indicators -->
<div <div

View File

@ -20,6 +20,7 @@ const loadBudibase = () => {
customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"], customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"], previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],
navigation: window["##BUDIBASE_PREVIEW_NAVIGATION##"], 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 // Set app ID - this window flag is set by both the preview and the real

View File

@ -17,6 +17,7 @@ const createBuilderStore = () => {
previewDevice: "desktop", previewDevice: "desktop",
isDragging: false, isDragging: false,
navigation: null, navigation: null,
hiddenComponentIds: [],
// Legacy - allow the builder to specify a layout // Legacy - allow the builder to specify a layout
layout: null, layout: null,