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>
2023-12-08 09:41:12 +00:00 · 2023-12-08 09:41:12 +00:00 · 56cb92aa34
parent e7f1692cd5
commit 56cb92aa34
9 changed files with 70 additions and 9 deletions
--- 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,
--- 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 @@

 <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 {
-    background-color: var(--spectrum-global-color-gray-300);
+  .nav-item:hover,
+  .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 {
--- 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
@ -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") {
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
+++ b/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)}
--- 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
+    }
+  }
 </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`
--- 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(() => {
--- 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##"],
--- 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
--- 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 @@
  </script>
 </head>
 <body></body>
-</html>
+</html>