Improve client grid DND event handling

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>

packages/client/src/components/Component.svelte

@@ -219,7 +219,6 @@
       return
     } else {
       lastInstanceKey = instanceKey
-      ephemeralStyles = null
     }
 
     // Pull definition and constructor

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;

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

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 })