From a6186dbd393018dbb22950dbaef7f419e19d511f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 17 Sep 2021 14:17:50 +0100
Subject: [PATCH] Refactor to use generic flag for dragging and hide settings
 bar when dragging

---
 .../client/src/components/preview/DNDHandler.svelte   | 11 +++++------
 .../src/components/preview/HoverIndicator.svelte      |  2 +-
 .../client/src/components/preview/SettingsBar.svelte  |  2 +-
 packages/client/src/stores/builder.js                 |  7 +++----
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 409eeb2d8f..c1a6a74465 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -21,6 +21,7 @@
     // Update state
     dragTarget = e.target.dataset.componentId
     builderStore.actions.selectComponent(dragTarget)
+    builderStore.actions.setDragging(true)
 
     // Highlight being dragged by setting opacity
     const child = getDOMNodeForComponent(e.target)
@@ -34,15 +35,13 @@
     // Reset state and styles
     dropTarget = null
     dropInfo = null
+    builderStore.actions.setDragging(false)
 
     // Reset opacity style
     const child = getDOMNodeForComponent(e.target)
     if (child) {
       child.style.opacity = ""
     }
-
-    // Re-enable the hover indicator
-    builderStore.actions.showHoverIndicator(true)
   }
 
   // Callback when on top of a component
@@ -96,11 +95,11 @@
       element.dataset.droppable &&
       element.dataset.id !== dragTarget
     ) {
-      // Disable hover selection again to ensure it's always disabled.
+      // Ensure the dragging flag is always set.
       // There's a bit of a race condition between the app reinitialisation
       // after selecting the DND component and setting this the first time
-      if (get(builderStore).showHoverIndicator) {
-        builderStore.actions.showHoverIndicator(false)
+      if (!get(builderStore).isDragging) {
+        builderStore.actions.setDragging(true)
       }
 
       // Store target ID
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index 3cae1e4c85..28109cb262 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$builderStore.showHoverIndicator ? componentId : null}
+  componentId={$builderStore.isDragging ? null : componentId}
   color="var(--spectrum-global-color-static-blue-200)"
   transition
   {zIndex}
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 3581d4f5f8..43c77ef1e6 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -16,7 +16,7 @@
   let measured = false
 
   $: definition = $builderStore.selectedComponentDefinition
-  $: showBar = definition?.showSettingsBar
+  $: showBar = definition?.showSettingsBar && !$builderStore.isDragging
   $: settings = definition?.settings?.filter(setting => setting.showInBar) ?? []
 
   const updatePosition = () => {
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index ce653a8fc1..0d738e4a11 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -23,7 +23,7 @@ const createBuilderStore = () => {
     theme: null,
     customTheme: null,
     previewDevice: "desktop",
-    showHoverIndicator: true,
+    isDragging: false,
   }
   const writableStore = writable(initialState)
   const derivedStore = derived(writableStore, $state => {
@@ -77,16 +77,15 @@ const createBuilderStore = () => {
         mode,
       })
     },
-    showHoverIndicator: show => {
+    setDragging: dragging => {
       writableStore.update(state => {
-        state.showHoverIndicator = show
+        state.isDragging = dragging
         return state
       })
     },
   }
   return {
     ...writableStore,
-    set: state => writableStore.set({ ...initialState, ...state }),
     subscribe: derivedStore.subscribe,
     actions,
   }