From ce532cc403c721e8fe2644720433e495afd2b8aa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 24 Oct 2022 09:38:07 +0100
Subject: [PATCH] Improve client grid DND event handling

---
 packages/client/src/components/ClientApp.svelte |  2 ++
 packages/client/src/components/Component.svelte |  1 -
 packages/client/src/components/app/Grid.svelte  |  7 +------
 .../components/preview/GridDNDHandler.svelte    | 17 +++++++++--------
 packages/client/src/stores/builder.js           |  4 ++--
 5 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 537e963ff3..2fb0a92dab 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -30,6 +30,7 @@
   import HoverIndicator from "components/preview/HoverIndicator.svelte"
   import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
   import DNDHandler from "components/preview/DNDHandler.svelte"
+  import GridDNDHandler from "components/preview/GridDNDHandler.svelte"
   import KeyboardManager from "components/preview/KeyboardManager.svelte"
   import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
   import DevTools from "components/devtools/DevTools.svelte"
@@ -196,6 +197,7 @@
                 {/if}
                 {#if $builderStore.inBuilder}
                   <DNDHandler />
+                  <GridDNDHandler />
                 {/if}
               </div>
             </QueryParamsProvider>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 669cc8afdc..c59ef050cd 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -219,7 +219,6 @@
       return
     } else {
       lastInstanceKey = instanceKey
-      ephemeralStyles = null
     }
 
     // Pull definition and constructor
diff --git a/packages/client/src/components/app/Grid.svelte b/packages/client/src/components/app/Grid.svelte
index 7e2ec68627..8348a3ba91 100644
--- a/packages/client/src/components/app/Grid.svelte
+++ b/packages/client/src/components/app/Grid.svelte
@@ -1,9 +1,8 @@
 <script>
   import { getContext } from "svelte"
-  import GridDNDHandler from "../preview/GridDNDHandler.svelte"
 
   const component = getContext("component")
-  const { styleable, builderStore } = getContext("sdk")
+  const { styleable } = getContext("sdk")
 
   const cols = 12
 
@@ -35,10 +34,6 @@
   <slot />
 </div>
 
-{#if $builderStore.inBuilder && node}
-  <GridDNDHandler {node} />
-{/if}
-
 <style>
   .grid {
     position: relative;
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index ed7c3df269..4a95080523 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -5,15 +5,15 @@
 
   let dragInfo
   let gridStyles
+  let id
 
   $: jsonStyles = JSON.stringify(gridStyles)
-  $: id = dragInfo?.id
+  $: id = dragInfo?.id || id
   $: instance = componentStore.actions.getComponentInstance(id)
-
-  // We don't clear grid styles because that causes flashing, as the component
-  // will revert to its original position until the save completes.
-  $: gridStyles &&
-    instance?.setEphemeralStyles({ ...gridStyles, "z-index": 999 })
+  $: instance?.setEphemeralStyles({
+    ...gridStyles,
+    ...(gridStyles ? { "z-index": 999 } : null),
+  })
 
   const isChildOfGrid = e => {
     return (
@@ -192,10 +192,11 @@
   }
 
   // Callback when drag stops (whether dropped or not)
-  const stopDragging = () => {
+  const stopDragging = async () => {
+    console.log("STOP")
     // Save changes
     if (gridStyles) {
-      builderStore.actions.updateStyles(gridStyles, dragInfo.id)
+      await builderStore.actions.updateStyles(gridStyles, dragInfo.id)
     }
 
     // Reset listener
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index fdad9a5f88..1ddcaf82b9 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -38,8 +38,8 @@ const createBuilderStore = () => {
     updateProp: (prop, value) => {
       eventStore.actions.dispatchEvent("update-prop", { prop, value })
     },
-    updateStyles: (styles, id) => {
-      eventStore.actions.dispatchEvent("update-styles", { styles, id })
+    updateStyles: async (styles, id) => {
+      await eventStore.actions.dispatchEvent("update-styles", { styles, id })
     },
     keyDown: (key, ctrlKey) => {
       eventStore.actions.dispatchEvent("key-down", { key, ctrlKey })