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 <andrew@kingston.dev>

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,

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 @@
 
 <div
   class="nav-item"
+  class:hovering
   class:border
   class:selected
   class:withActions
@@ -71,6 +73,8 @@
   on:dragstart
   on:dragover
   on:drop
+  on:mouseenter
+  on:mouseleave
   on:click={onClick}
   ondragover="return false"
   ondragenter="return false"
@@ -152,15 +156,17 @@
     --avatars-background: var(--spectrum-global-color-gray-200);
   }
   .nav-item.selected {
-    background-color: var(--spectrum-global-color-gray-300);
+    background-color: var(--spectrum-global-color-gray-300) !important;
     --avatars-background: var(--spectrum-global-color-gray-300);
     color: var(--ink);
   }
-  .nav-item:hover {
+  .nav-item:hover,
-    background-color: var(--spectrum-global-color-gray-300);
+  .hovering {
+    background-color: var(--spectrum-global-color-gray-200);
     --avatars-background: var(--spectrum-global-color-gray-300);
   }
-  .nav-item:hover .actions {
+  .nav-item:hover .actions,
+  .hovering .actions {
     visibility: visible;
   }
   .nav-item-content {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -36,12 +36,14 @@
 
   // Determine selected component ID
   $: selectedComponentId = $store.selectedComponentId
+  $: hoverComponentId = $store.hoverComponentId
 
   $: previewData = {
     appId: $store.appId,
     layout,
     screen,
     selectedComponentId,
+    hoverComponentId,
     theme: $store.theme,
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,
@@ -117,6 +119,8 @@
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
       $store.selectedComponentId = data.id
+    } else if (type === "hover-component" && data.id) {
+      $store.hoverComponentId = data.id
     } else if (type === "update-prop") {
       await store.actions.components.updateSetting(data.prop, data.value)
     } else if (type === "update-styles") {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte

@@ -89,6 +89,17 @@
     }
     return findComponentPath($selectedComponent, component._id)?.length > 0
   }
+
+  const handleMouseover = componentId => {
+    if ($store.hoverComponentId !== componentId) {
+      $store.hoverComponentId = componentId
+    }
+  }
+  const handleMouseout = componentId => {
+    if ($store.hoverComponentId === componentId) {
+      $store.hoverComponentId = null
+    }
+  }
 </script>
 
 <ul>
@@ -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)}

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
+    }
+  }
 </script>
 
 <div class="components">
@@ -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`

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(() => {

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##"],

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

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 @@
   </script>
 </head>
 <body></body>
-</html>
+</html>