From 77fa373a9077da9bbbcf41451ac78387ade4dd70 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 27 Oct 2023 15:09:17 +0100 Subject: [PATCH] Remove ability to select fields in preview because it is not compatible with field configuration changes --- .../builder/src/builderStore/previewEvents.js | 13 ---------- .../controls/EditComponentPopover.svelte | 25 +++---------------- .../[screenId]/_components/AppPreview.svelte | 6 ----- .../src/components/BlockComponent.svelte | 4 +-- .../client/src/components/Component.svelte | 7 +----- packages/client/src/index.js | 2 -- packages/client/src/stores/builder.js | 4 --- packages/client/src/utils/styleable.js | 8 ++---- .../controllers/static/templates/preview.hbs | 2 -- 9 files changed, 8 insertions(+), 63 deletions(-) delete mode 100644 packages/builder/src/builderStore/previewEvents.js diff --git a/packages/builder/src/builderStore/previewEvents.js b/packages/builder/src/builderStore/previewEvents.js deleted file mode 100644 index dfee80391f..0000000000 --- a/packages/builder/src/builderStore/previewEvents.js +++ /dev/null @@ -1,13 +0,0 @@ -let subscribers = [] - -export const onPreviewEvent = cb => { - subscribers.push(cb) - - return () => { - subscribers = subscribers.filter(callback => callback !== cb) - } -} - -export const emitPreviewEvent = event => { - subscribers.forEach(cb => cb(event)) -} diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte index d963ad04ed..26c1ced502 100644 --- a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte +++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte @@ -2,10 +2,9 @@ import { Icon, Popover, Layout } from "@budibase/bbui" import { store } from "builderStore" import { cloneDeep } from "lodash/fp" - import { createEventDispatcher, onMount } from "svelte" + import { createEventDispatcher } from "svelte" import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte" import { getContext } from "svelte" - import { onPreviewEvent } from "builderStore/previewEvents" export let anchor export let componentInstance @@ -21,7 +20,7 @@ let open = false // Auto hide the component when another item is selected - $: if (open && $draggable.selected != componentInstance._id) { + $: if (open && $draggable.selected !== componentInstance._id) { popover.hide() } @@ -79,22 +78,6 @@ return { ...cfg, left, top } } - - const handlePreviewEvent = event => { - const { type, data } = event?.data || {} - if (type === "click-form-block-field") { - console.log(data.field) - if (data.field === "asdasd") { - popover.show() - open = true - } else { - popover.hide() - open = false - } - } - } - - onMount(() => onPreviewEvent(handlePreviewEvent)) { open = false - if ($draggable.selected == componentInstance._id) { + if ($draggable.selected === componentInstance._id) { $draggable.actions.select() } }} {anchor} align="left-outside" - showPopover={drawers.length == 0} + showPopover={drawers.length === 0} clickOutsideOverride={drawers.length > 0} maxHeight={600} handlePostionUpdate={customPositionHandler} 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 4934116104..45fe005ceb 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 @@ -14,7 +14,6 @@ import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw" import { findComponent, findComponentPath } from "builderStore/componentUtils" import { isActive, goto } from "@roxi/routify" - import { emitPreviewEvent } from "builderStore/previewEvents" let iframe let layout @@ -37,14 +36,12 @@ // Determine selected component ID $: selectedComponentId = $store.selectedComponentId - $: selectedBlockComponentId = $store.selectedBlockComponentId $: previewData = { appId: $store.appId, layout, screen, selectedComponentId, - selectedBlockComponentId, theme: $store.theme, customTheme: $store.customTheme, previewDevice: $store.previewDevice, @@ -96,7 +93,6 @@ // Await the event handler try { await handleBudibaseEvent(message) - emitPreviewEvent(message) } catch (error) { notifications.error(error || "Error handling event from app preview") } @@ -185,8 +181,6 @@ } else if (type === "add-parent-component") { const { componentId, parentType } = data await store.actions.components.addParent(componentId, parentType) - } else if (type === "click-form-block-field") { - // Swallow and let this be handled by form block settings } else { console.warn(`Client sent unknown event type: ${type}`) } diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte index 8af3a8b75e..12555a7fb5 100644 --- a/packages/client/src/components/BlockComponent.svelte +++ b/packages/client/src/components/BlockComponent.svelte @@ -11,7 +11,6 @@ export let name export let order = 0 export let containsSlot = false - export let onClick = null // ID is only exposed as a prop so that it can be bound to from parent // block components @@ -26,7 +25,6 @@ $: id = `${block.id}-${context ?? rand}` $: parentId = $component?.id $: inBuilder = $builderStore.inBuilder - $: blockSelected = $builderStore.selectedComponentId === block.id $: instance = { ...props, _component: getComponent(type), @@ -78,6 +76,6 @@ }) - + diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 467fee0468..63ce8dc152 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -35,7 +35,6 @@ export let isLayout = false export let isRoot = false export let isBlock = false - export let onClick = null // Get parent contexts const context = getContext("context") @@ -132,10 +131,7 @@ // Interactive components can be selected, dragged and highlighted inside // the builder preview $: builderInteractive = - $builderStore.inBuilder && - insideScreenslot && - (!isBlock || onClick) && - !instance.static + $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock $: interactive = !isRoot && (builderInteractive || devToolsInteractive) $: editing = editable && selected && $builderStore.editMode @@ -200,7 +196,6 @@ draggable, editable, isBlock, - onClick, }, empty: emptyState, selected, diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 0cf6800560..1550ba4d7b 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -31,8 +31,6 @@ const loadBudibase = async () => { layout: window["##BUDIBASE_PREVIEW_LAYOUT##"], screen: window["##BUDIBASE_PREVIEW_SCREEN##"], selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"], - selectedBlockComponentId: - window["##BUDIBASE_SELECTED_BLOCK_COMPONENT_ID##"], previewId: window["##BUDIBASE_PREVIEW_ID##"], theme: window["##BUDIBASE_PREVIEW_THEME##"], customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"], diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js index c1865d608f..036558e8b2 100644 --- a/packages/client/src/stores/builder.js +++ b/packages/client/src/stores/builder.js @@ -8,7 +8,6 @@ const createBuilderStore = () => { inBuilder: false, screen: null, selectedComponentId: null, - selectedBlockComponentId: null, editMode: false, previewId: null, theme: null, @@ -36,9 +35,6 @@ const createBuilderStore = () => { devToolsStore.actions.setAllowSelection(false) eventStore.actions.dispatchEvent("select-component", { id }) }, - clickFormBlockField: field => { - eventStore.actions.dispatchEvent("click-form-block-field", { field }) - }, updateProp: (prop, value) => { eventStore.actions.dispatchEvent("update-prop", { prop, value }) }, diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js index 31c35c4483..3fccae0be5 100644 --- a/packages/client/src/utils/styleable.js +++ b/packages/client/src/utils/styleable.js @@ -40,7 +40,7 @@ export const styleable = (node, styles = {}) => { const componentId = newStyles.id const customStyles = newStyles.custom || "" - const { isBlock, onClick } = newStyles + const { isBlock } = newStyles const normalStyles = { ...baseStyles, ...newStyles.normal } const hoverStyles = { ...normalStyles, @@ -68,11 +68,7 @@ export const styleable = (node, styles = {}) => { // Handler to select a component in the builder when clicking it in the // builder preview selectComponent = event => { - if (isBlock && onClick) { - onClick() - } else { - builderStore.actions.selectComponent(componentId, isBlock) - } + builderStore.actions.selectComponent(componentId) event.preventDefault() event.stopPropagation() return false diff --git a/packages/server/src/api/controllers/static/templates/preview.hbs b/packages/server/src/api/controllers/static/templates/preview.hbs index f28469ca22..31bf0762e0 100644 --- a/packages/server/src/api/controllers/static/templates/preview.hbs +++ b/packages/server/src/api/controllers/static/templates/preview.hbs @@ -63,7 +63,6 @@ // Extract data from message const { selectedComponentId, - selectedBlockComponentId, layout, screen, appId, @@ -82,7 +81,6 @@ window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout window["##BUDIBASE_PREVIEW_SCREEN##"] = screen window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId - window["##BUDIBASE_SELECTED_BLOCK_COMPONENT_ID##"] = selectedBlockComponentId window["##BUDIBASE_PREVIEW_ID##"] = Math.random() window["##BUDIBASE_PREVIEW_THEME##"] = theme window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme