Merge pull request #536 from mjashanks/dnd

Few Dnd Bugfixes

packages/builder/src/builderStore/store/index.js

@@ -24,6 +24,7 @@ import {
   saveScreenApi as _saveScreenApi,
   regenerateCssForCurrentScreen,
   generateNewIdsForComponent,
+  getComponentDefinition,
 } from "../storeUtils"
 export const getStore = () => {
   const initial = {
@@ -74,9 +75,6 @@ export const getStore = () => {
 
 export default getStore
 
-export const getComponentDefinition = (state, name) =>
-  name.startsWith("##") ? getBuiltin(name) : state.components[name]
-
 const setPackage = (store, initial) => async pkg => {
   const [main_screens, unauth_screens] = await Promise.all([
     api

packages/builder/src/builderStore/storeUtils.js

@@ -1,4 +1,7 @@
-import { makePropsSafe } from "components/userInterface/pagesParsing/createProps"
+import {
+  makePropsSafe,
+  getBuiltin,
+} from "components/userInterface/pagesParsing/createProps"
 import api from "./api"
 import { generate_screen_css } from "./generate_css"
 import { uuid } from "./uuid"
@@ -85,3 +88,6 @@ export const generateNewIdsForComponent = c =>
   walkProps(c, p => {
     p._id = uuid()
   })
+
+export const getComponentDefinition = (state, name) =>
+  name.startsWith("##") ? getBuiltin(name) : state.components[name]

packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

@@ -1,7 +1,7 @@
 <script>
   import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
-  import { getComponentDefinition } from "builderStore/store"
+  import { getComponentDefinition } from "builderStore/storeUtils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last, cloneDeep } from "lodash/fp"
   import UIkit from "uikit"

packages/builder/src/components/userInterface/ComponentsHierarchy.svelte

@@ -11,6 +11,11 @@
 
   export let screens = []
 
+  /* 
+  Using a store here seems odd.... 
+  have a look in the <ComponentsHierarchyChildren /> code file to find out why. 
+  I have commented the dragDropStore parameter
+  */
   const dragDropStore = writable({})
 
   let confirmDeleteDialog

packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte

@@ -10,11 +10,29 @@
     ChevronDownIcon,
     CopyIcon,
   } from "../common/Icons"
+  import { getComponentDefinition } from "builderStore/storeUtils"
 
   export let components = []
   export let currentComponent
   export let onSelect = () => {}
   export let level = 0
+
+  /*
+  "dragDropStore" is a svelte store.
+  This component is recursive... a tree.
+  Using a single, shared store, all the nodes in the tree can subscribe to state that is changed by other nodes, in the same tree.
+
+  e.g. Say i have the structure
+  - Heading 1
+  - Container 
+    - Heading 2
+    - Heading 3
+  - Heading 4
+
+  1. When I dragover "Heading 1", a placeholder drop-slot appears below it
+  2. I drag down a bit so the cursor is INSIDE the container (i.e. now in a child <ComponentsHierarchyChildren />)
+  3. Using store subscribes... the original drop-slot now knows that it should disappear, and a new one is created inside the container.
+  */
   export let dragDropStore
 
   let dropUnderComponent
@@ -47,7 +65,7 @@
 
   const dragover = (component, index) => e => {
     const canHaveChildrenButIsEmpty =
-      $store.components[component._component].children &&
+      getComponentDefinition($store, component._component).children &&
       component._children.length === 0
 
     e.dataTransfer.dropEffect = "copy"
@@ -97,6 +115,15 @@
       return s
     })
   }
+
+  const dragend = () => {
+    dragDropStore.update(s => {
+      s.dropPosition = ""
+      s.targetComponent = null
+      s.componentToDrop = null
+      return s
+    })
+  }
 </script>
 
 <ul>
@@ -117,6 +144,7 @@
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 40}px"
         draggable={true}
+        on:dragend={dragend}
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
         on:drop={drop}