From 4be4dd014dab49101cd22778471cea9f058e2b24 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 16 Sep 2021 07:28:59 +0100
Subject: [PATCH] Add initial DND implementation with working functionality for
 dropping inside components

---
 .../AppPreview/CurrentItemPreview.svelte      | 16 ++++
 .../client/src/components/ClientApp.svelte    |  2 +
 .../client/src/components/Component.svelte    |  4 +
 .../src/components/preview/DNDHandler.svelte  | 83 +++++++++++++++++++
 packages/client/src/stores/builder.js         |  9 +-
 packages/client/src/utils/styleable.js        |  2 +
 6 files changed, 114 insertions(+), 2 deletions(-)
 create mode 100644 packages/client/src/components/preview/DNDHandler.svelte

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 494050f690..422eba73b0 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte"
+  import { get } from "svelte/store"
   import { store, currentAsset } from "builderStore"
   import iframeTemplate from "./iframeTemplate"
   import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
@@ -7,6 +8,7 @@
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { ProgressCircle, Layout, Heading, Body } from "@budibase/bbui"
   import ErrorSVG from "assets/error.svg?raw"
+  import { findComponent } from "builderStore/storeUtils"
 
   let iframe
   let layout
@@ -111,6 +113,20 @@
         // Wait for this event to show the client library if intelligent
         // loading is supported
         loading = false
+      } else if (type === "move-component") {
+        // Copy
+        const sourceComponent = findComponent(
+          get(currentAsset).props,
+          data.componentId
+        )
+        const destinationComponent = findComponent(
+          get(currentAsset).props,
+          data.destinationComponentId
+        )
+        if (sourceComponent && destinationComponent) {
+          store.actions.components.copy(sourceComponent, true)
+          store.actions.components.paste(destinationComponent, data.mode)
+        }
       } else {
         console.warning(`Client sent unknown event type: ${type}`)
       }
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 5890c0e2a9..5c46161577 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -23,6 +23,7 @@
   import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
   import HoverIndicator from "components/preview/HoverIndicator.svelte"
   import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
+  import DNDHandler from "components/preview/DNDHandler.svelte"
   import ErrorSVG from "../../../builder/assets/error.svg"
 
   // Provide contexts
@@ -122,6 +123,7 @@
               {#if $builderStore.inBuilder}
                 <SelectionIndicator />
                 <HoverIndicator />
+                <DNDHandler />
               {/if}
             </div>
           </StateBindingsProvider>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 785b989754..20d8b53609 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -178,6 +178,7 @@
       data-type={interactive ? "component" : ""}
       data-id={id}
       data-name={name}
+      data-droppable={definition?.hasChildren || false}
     >
       <svelte:component this={constructor} {...componentSettings}>
         {#if children.length}
@@ -196,4 +197,7 @@
   .component {
     display: contents;
   }
+  .component > :global(*:hover) {
+    cursor: pointer;
+  }
 </style>
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
new file mode 100644
index 0000000000..88b9176efb
--- /dev/null
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -0,0 +1,83 @@
+<script>
+  import { onMount } from "svelte"
+  import IndicatorSet from "./IndicatorSet.svelte"
+  import { builderStore } from "stores"
+
+  let dragTarget
+  let dropTarget
+
+  // Callback when initially starting a drag on a draggable component
+  const onDragStart = e => {
+    dragTarget = e.target.dataset.componentId
+    e.target.style.opacity = 0.5
+  }
+
+  // Callback when drag stops (whether dropped or not)
+  const onDragEnd = e => {
+    // reset the transparency
+    dragTarget = null
+    e.target.style.opacity = ""
+    dropTarget = null
+  }
+
+  // Callback when on top of a component
+  const onDragOver = e => {
+    e.preventDefault()
+  }
+
+  // Callback when entering a potential drop target
+  const onDragEnter = e => {
+    const element = e.target.closest("[data-type='component']")
+    if (element && element.dataset.droppable === "true") {
+      dropTarget = element.dataset.id
+    } else {
+      dropTarget = null
+    }
+  }
+
+  // Callback when leaving a potential drop target.
+  // Since we don't style our targets, we don't need to unset anything.
+  const onDragLeave = () => {}
+
+  // Callback when dropping a drag on top of some component
+  const onDrop = e => {
+    e.preventDefault()
+
+    // Check if the target is droppable
+    const element = e.target.closest("[data-type='component']")
+    if (element && element.dataset.droppable === "true") {
+      builderStore.actions.moveComponent(dragTarget, dropTarget, "inside")
+    }
+  }
+
+  onMount(() => {
+    // Events fired on the draggable target
+    document.addEventListener("dragstart", onDragStart, false)
+    document.addEventListener("dragend", onDragEnd, false)
+
+    // Events fired on the drop targets
+    document.addEventListener("dragover", onDragOver, false)
+    document.addEventListener("dragenter", onDragEnter, false)
+    document.addEventListener("dragleave", onDragLeave, false)
+    document.addEventListener("drop", onDrop, false)
+
+    return () => {
+      // Events fired on the draggable target
+      document.removeEventListener("dragstart", onDragStart, false)
+      document.removeEventListener("dragend", onDragEnd, false)
+
+      // Events fired on the drop targets
+      document.removeEventListener("dragover", onDragOver, false)
+      document.removeEventListener("dragenter", onDragEnter, false)
+      document.removeEventListener("dragleave", onDragLeave, false)
+      document.removeEventListener("drop", onDrop, false)
+    }
+  })
+</script>
+
+<IndicatorSet
+  componentId={dropTarget}
+  color="var(--spectrum-global-color-static-red-600)"
+  zIndex="930"
+  transition
+/>
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 3f36af1d06..3a7eb1df61 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -64,13 +64,18 @@ const createBuilderStore = () => {
       dispatchEvent("preview-loaded")
     },
     setSelectedPath: path => {
-      console.log("set to ")
-      console.log(path)
       writableStore.update(state => {
         state.selectedPath = path
         return state
       })
     },
+    moveComponent: (componentId, destinationComponentId, mode) => {
+      dispatchEvent("move-component", {
+        componentId,
+        destinationComponentId,
+        mode,
+      })
+    },
   }
   return {
     ...writableStore,
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index d9925af91a..32171b9478 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -23,6 +23,8 @@ export const styleable = (node, styles = {}) => {
   let applyHoverStyles
   let selectComponent
 
+  node.setAttribute("draggable", true)
+
   // Creates event listeners and applies initial styles
   const setupStyles = (newStyles = {}) => {
     // Use empty state styles as base styles if required, but let them, get