From 56cb92aa340336707e051583ecffa80b91761b61 Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Fri, 8 Dec 2023 09:41:12 +0000 Subject: [PATCH] Hover component tree preview (#12465) * wip * wip * linting * remove console log * highlighting a selected component in nav * PR feeddback * wip * pr feedback --------- Co-authored-by: Andrew Kingston --- .../src/builderStore/store/frontend.js | 1 + .../src/components/common/NavItem.svelte | 14 +++++++---- .../[screenId]/_components/AppPreview.svelte | 4 ++++ .../ComponentList/ComponentTree.svelte | 14 +++++++++++ .../_components/ComponentList/index.svelte | 23 +++++++++++++++++++ .../components/preview/HoverIndicator.svelte | 7 +++--- packages/client/src/index.js | 1 + packages/client/src/stores/builder.js | 11 +++++++++ .../controllers/static/templates/preview.hbs | 4 +++- 9 files changed, 70 insertions(+), 9 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index fb10965b41..aaa0eb0184 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -85,6 +85,7 @@ const INITIAL_FRONTEND_STATE = { selectedScreenId: null, selectedComponentId: null, selectedLayoutId: null, + hoverComponentId: null, // Client state selectedComponentInstance: null, diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte index 35846525af..02cef82e80 100644 --- a/packages/builder/src/components/common/NavItem.svelte +++ b/packages/builder/src/components/common/NavItem.svelte @@ -23,6 +23,7 @@ export let showTooltip = false export let selectedBy = null export let compact = false + export let hovering = false const scrollApi = getContext("scroll") const dispatch = createEventDispatcher() @@ -61,6 +62,7 @@
0 } + + const handleMouseover = componentId => { + if ($store.hoverComponentId !== componentId) { + $store.hoverComponentId = componentId + } + } + const handleMouseout = componentId => { + if ($store.hoverComponentId === componentId) { + $store.hoverComponentId = null + } + }
    @@ -109,6 +120,9 @@ on:dragover={dragover(component, index)} on:iconClick={() => toggleNodeOpen(component._id)} on:drop={onDrop} + hovering={$store.hoverComponentId === component._id} + on:mouseenter={() => handleMouseover(component._id)} + on:mouseleave={() => handleMouseout(component._id)} text={getComponentText(component)} icon={getComponentIcon(component)} iconTooltip={getComponentName(component)} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte index 67b501e141..1e2ea47e63 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte @@ -32,6 +32,17 @@ const handleScroll = e => { scrolling = e.target.scrollTop !== 0 } + + const handleMouseover = componentId => { + if ($store.hoverComponentId !== componentId) { + $store.hoverComponentId = componentId + } + } + const handleMouseout = componentId => { + if ($store.hoverComponentId === componentId) { + $store.hoverComponentId = null + } + }
    @@ -57,6 +68,12 @@ on:click={() => { $store.selectedComponentId = `${$store.selectedScreenId}-screen` }} + hovering={$store.hoverComponentId === + `${$store.selectedScreenId}-screen`} + on:mouseenter={() => + handleMouseover(`${$store.selectedScreenId}-screen`)} + on:mouseleave={() => + handleMouseout(`${$store.selectedScreenId}-screen`)} id={`component-screen`} selectedBy={$userSelectedResourceMap[ `${$store.selectedScreenId}-screen` @@ -78,6 +95,12 @@ on:click={() => { $store.selectedComponentId = `${$store.selectedScreenId}-navigation` }} + hovering={$store.hoverComponentId === + `${$store.selectedScreenId}-navigation`} + on:mouseenter={() => + handleMouseover(`${$store.selectedScreenId}-navigation`)} + on:mouseleave={() => + handleMouseout(`${$store.selectedScreenId}-navigation`)} id={`component-nav`} selectedBy={$userSelectedResourceMap[ `${$store.selectedScreenId}-navigation` diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte index f976e2cffb..ddef62ab74 100644 --- a/packages/client/src/components/preview/HoverIndicator.svelte +++ b/packages/client/src/components/preview/HoverIndicator.svelte @@ -3,8 +3,7 @@ import IndicatorSet from "./IndicatorSet.svelte" import { builderStore, dndIsDragging } from "stores" - let componentId - + $: componentId = $builderStore.hoverComponentId $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920 const onMouseOver = e => { @@ -24,12 +23,12 @@ } if (newId !== componentId) { - componentId = newId + builderStore.actions.hoverComponent(newId) } } const onMouseLeave = () => { - componentId = null + builderStore.actions.hoverComponent(null) } onMount(() => { diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 415d9fa5f2..044c900c9d 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -32,6 +32,7 @@ const loadBudibase = async () => { layout: window["##BUDIBASE_PREVIEW_LAYOUT##"], screen: window["##BUDIBASE_PREVIEW_SCREEN##"], selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"], + hoverComponentId: window["##BUDIBASE_HOVER_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 036558e8b2..f92e6b9df9 100644 --- a/packages/client/src/stores/builder.js +++ b/packages/client/src/stores/builder.js @@ -8,6 +8,7 @@ const createBuilderStore = () => { inBuilder: false, screen: null, selectedComponentId: null, + hoverComponentId: null, editMode: false, previewId: null, theme: null, @@ -23,6 +24,16 @@ const createBuilderStore = () => { } const store = writable(initialState) const actions = { + hoverComponent: id => { + if (id === get(store).hoverComponentId) { + return + } + store.update(state => ({ + ...state, + hoverComponentId: id, + })) + eventStore.actions.dispatchEvent("hover-component", { id }) + }, selectComponent: id => { if (id === get(store).selectedComponentId) { return diff --git a/packages/server/src/api/controllers/static/templates/preview.hbs b/packages/server/src/api/controllers/static/templates/preview.hbs index 31bf0762e0..e5b97afd66 100644 --- a/packages/server/src/api/controllers/static/templates/preview.hbs +++ b/packages/server/src/api/controllers/static/templates/preview.hbs @@ -63,6 +63,7 @@ // Extract data from message const { selectedComponentId, + hoverComponentId, layout, screen, appId, @@ -81,6 +82,7 @@ window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout window["##BUDIBASE_PREVIEW_SCREEN##"] = screen window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId + window["##BUDIBASE_HOVER_COMPONENT_ID##"] = hoverComponentId window["##BUDIBASE_PREVIEW_ID##"] = Math.random() window["##BUDIBASE_PREVIEW_THEME##"] = theme window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme @@ -108,4 +110,4 @@ - \ No newline at end of file +