Merge pull request #534 from mjashanks/dnd

Component nav Drag and Drop + Add component usability

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

@@ -1,4 +1,4 @@
-import { values } from "lodash/fp"
+import { values, cloneDeep } from "lodash/fp"
 import { get_capitalised_name } from "../../helpers"
 import { backendUiStore } from "builderStore"
 import * as backendStoreActions from "./backend"
@@ -24,8 +24,8 @@ import {
   saveCurrentPreviewItem as _saveCurrentPreviewItem,
   saveScreenApi as _saveScreenApi,
   regenerateCssForCurrentScreen,
+  generateNewIdsForComponent,
 } from "../storeUtils"
-
 export const getStore = () => {
   const initial = {
     apps: [],
@@ -70,6 +70,8 @@ export const getStore = () => {
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
   store.editPageOrScreen = editPageOrScreen(store)
+  store.pasteComponent = pasteComponent(store)
+  store.storeComponentForCopy = storeComponentForCopy(store)
   return store
 }
 
@@ -291,9 +293,14 @@ const addChildComponent = store => (componentToAdd, presetProps = {}) => {
       state
     )
 
-    state.currentComponentInfo._children = state.currentComponentInfo._children.concat(
-      newComponent.props
-    )
+    const currentComponent =
+      state.components[state.currentComponentInfo._component]
+
+    const targetParent = currentComponent.children
+      ? state.currentComponentInfo
+      : getParent(state.currentPreviewItem.props, state.currentComponentInfo)
+
+    targetParent._children = targetParent._children.concat(newComponent.props)
 
     state.currentFrontEndType === "page"
       ? _savePage(state)
@@ -454,3 +461,50 @@ const setMetadataProp = store => (name, prop) => {
     return s
   })
 }
+
+const storeComponentForCopy = store => (component, cut = false) => {
+  store.update(s => {
+    const copiedComponent = cloneDeep(component)
+    s.componentToPaste = copiedComponent
+    s.componentToPaste.isCut = cut
+    if (cut) {
+      const parent = getParent(s.currentPreviewItem.props, component._id)
+      parent._children = parent._children.filter(c => c._id !== component._id)
+      selectComponent(s, parent)
+    }
+
+    return s
+  })
+}
+
+const pasteComponent = store => (targetComponent, mode) => {
+  store.update(s => {
+    if (!s.componentToPaste) return s
+
+    const componentToPaste = cloneDeep(s.componentToPaste)
+    // retain the same ids as things may be referencing this component
+    if (componentToPaste.isCut) {
+      // in case we paste a second time
+      s.componentToPaste.isCut = false
+    } else {
+      generateNewIdsForComponent(componentToPaste)
+    }
+    delete componentToPaste.isCut
+
+    if (mode === "inside") {
+      targetComponent._children.push(componentToPaste)
+      return s
+    }
+
+    const parent = getParent(s.currentPreviewItem.props, targetComponent)
+
+    const targetIndex = parent._children.indexOf(targetComponent)
+    const index = mode === "above" ? targetIndex : targetIndex + 1
+    parent._children.splice(index, 0, cloneDeep(componentToPaste))
+    regenerateCssForCurrentScreen(s)
+    _saveCurrentPreviewItem(s)
+    selectComponent(s, componentToPaste)
+
+    return s
+  })
+}

packages/builder/src/builderStore/storeUtils.js

@@ -1,6 +1,7 @@
 import { makePropsSafe } from "components/userInterface/pagesParsing/createProps"
 import api from "./api"
 import { generate_screen_css } from "./generate_css"
+import { uuid } from "./uuid"
 
 export const selectComponent = (state, component) => {
   const componentDef = component._component.startsWith("##")
@@ -79,3 +80,8 @@ export const regenerateCssForCurrentScreen = state => {
   ])
   return state
 }
+
+export const generateNewIdsForComponent = c =>
+  walkProps(c, p => {
+    p._id = uuid()
+  })

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

@@ -28,8 +28,7 @@
   })
   $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
   $: noChildrenAllowed =
-    !component ||
-    getComponentDefinition($store, component._component).children === false
+    !component || !getComponentDefinition($store, component._component).children
   $: noPaste = !$store.componentToPaste
 
   const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
@@ -105,49 +104,14 @@
     })
   }
 
-  const generateNewIdsForComponent = c =>
-    walkProps(c, p => {
-      p._id = uuid()
-    })
-
   const storeComponentForCopy = (cut = false) => {
-    store.update(s => {
-      const copiedComponent = cloneDeep(component)
-      s.componentToPaste = copiedComponent
-      if (cut) {
-        const parent = getParent(s.currentPreviewItem.props, component._id)
-        parent._children = parent._children.filter(c => c._id !== component._id)
-        selectComponent(s, parent)
-      }
-
-      return s
-    })
+    // lives in store - also used by drag drop
+    store.storeComponentForCopy(component, cut)
   }
 
   const pasteComponent = mode => {
-    store.update(s => {
-      if (!s.componentToPaste) return s
-
-      const componentToPaste = cloneDeep(s.componentToPaste)
-      generateNewIdsForComponent(componentToPaste)
-      delete componentToPaste._cutId
-
-      if (mode === "inside") {
-        component._children.push(componentToPaste)
-        return s
-      }
-
-      const parent = getParent(s.currentPreviewItem.props, component)
-
-      const targetIndex = parent._children.indexOf(component)
-      const index = mode === "above" ? targetIndex : targetIndex + 1
-      parent._children.splice(index, 0, cloneDeep(componentToPaste))
-      regenerateCssForCurrentScreen(s)
-      saveCurrentPreviewItem(s)
-      selectComponent(s, componentToPaste)
-
-      return s
-    })
+    // lives in store - also used by drag drop
+    store.pasteComponent(component, mode)
   }
 </script>
 

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

@@ -7,21 +7,27 @@
   import { store } from "builderStore"
   import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
+  import { writable } from "svelte/store"
 
   export let screens = []
 
+  const dragDropStore = writable({})
+
   let confirmDeleteDialog
   let componentToDelete = ""
 
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(name, [
-      trimCharsStart("./"),
-      trimCharsStart("~/"),
-      trimCharsStart("../"),
-      trimChars(" "),
-    ])
+    pipe(
+      name,
+      [
+        trimCharsStart("./"),
+        trimCharsStart("~/"),
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )
 
   const changeScreen = screen => {
     store.setCurrentScreen(screen.props._instanceName)
@@ -57,7 +63,8 @@
     {#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children}
       <ComponentsHierarchyChildren
         components={screen.props._children}
-        currentComponent={$store.currentComponentInfo} />
+        currentComponent={$store.currentComponentInfo}
+        {dragDropStore} />
     {/if}
   {/each}
 

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

@@ -15,11 +15,19 @@
   export let currentComponent
   export let onSelect = () => {}
   export let level = 0
+  export let dragDropStore
+
+  let dropUnderComponent
+  let componentToDrop
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
 
-  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+  const get_capitalised_name = name =>
+    pipe(
+      name,
+      [get_name, capitalise]
+    )
   const isScreenslot = name => name === "##builtin/screenslot"
 
   const selectComponent = component => {
@@ -32,15 +40,92 @@
     // Go to correct URL
     $goto(`./:page/:screen/${path}`)
   }
+
+  const dragstart = component => e => {
+    e.dataTransfer.dropEffect = "move"
+    dragDropStore.update(s => {
+      s.componentToDrop = component
+      return s
+    })
+  }
+
+  const dragover = (component, index) => e => {
+    const canHaveChildrenButIsEmpty =
+      $store.components[component._component].children &&
+      component._children.length === 0
+
+    e.dataTransfer.dropEffect = "copy"
+    dragDropStore.update(s => {
+      const isBottomHalf = e.offsetY > e.currentTarget.offsetHeight / 2
+      s.targetComponent = component
+      // only allow dropping inside when container type
+      // is empty. If it has children, the user can drag over
+      // it's existing children
+      if (canHaveChildrenButIsEmpty) {
+        if (index === 0) {
+          // when its the first component in the screen,
+          // we divide into 3, so we can paste above, inside or below
+          const pos = e.offsetY / e.currentTarget.offsetHeight
+          if (pos < 0.4) {
+            s.dropPosition = "above"
+          } else if (pos > 0.8) {
+            // purposely giving this the least space as it is often covered
+            // by the component below's "above" space
+            s.dropPosition = "below"
+          } else {
+            s.dropPosition = "inside"
+          }
+        } else {
+          s.dropPosition = isBottomHalf ? "below" : "inside"
+        }
+      } else {
+        s.dropPosition = isBottomHalf ? "below" : "above"
+      }
+      return s
+    })
+    return false
+  }
+
+  const drop = () => {
+    if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) {
+      store.storeComponentForCopy($dragDropStore.componentToDrop, true)
+      store.pasteComponent(
+        $dragDropStore.targetComponent,
+        $dragDropStore.dropPosition
+      )
+    }
+    dragDropStore.update(s => {
+      s.dropPosition = ""
+      s.targetComponent = null
+      s.componentToDrop = null
+      return s
+    })
+  }
 </script>
 
 <ul>
   {#each components as component, index (component._id)}
     <li on:click|stopPropagation={() => selectComponent(component)}>
+
+      {#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition === 'above'}
+        <div
+          on:drop={drop}
+          ondragover="return false"
+          ondragenter="return false"
+          class="budibase__nav-item item drop-item"
+          style="margin-left: {level * 20 + 40}px" />
+      {/if}
+
       <div
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
-        style="padding-left: {level * 20 + 40}px">
+        style="padding-left: {level * 20 + 40}px"
+        draggable={true}
+        on:dragstart={dragstart(component)}
+        on:dragover={dragover(component, index)}
+        on:drop={drop}
+        ondragover="return false"
+        ondragenter="return false">
         <div class="nav-item">
           <i class="icon ri-arrow-right-circle-line" />
           {isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
@@ -55,8 +140,18 @@
           components={component._children}
           {currentComponent}
           {onSelect}
+          {dragDropStore}
           level={level + 1} />
       {/if}
+
+      {#if $dragDropStore && $dragDropStore.targetComponent === component && ($dragDropStore.dropPosition === 'inside' || $dragDropStore.dropPosition === 'below')}
+        <div
+          on:drop={drop}
+          ondragover="return false"
+          ondragenter="return false"
+          class="budibase__nav-item item drop-item"
+          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 2 : 0)) * 20 + 40}px" />
+      {/if}
     </li>
   {/each}
 </ul>
@@ -78,6 +173,11 @@
     align-items: center;
   }
 
+  .drop-item {
+    background: var(--blue-light);
+    height: 36px;
+  }
+
   .actions {
     display: none;
     height: 24px;

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

@@ -16,12 +16,14 @@
   import { pipe } from "components/common/core"
   import { store } from "builderStore"
   import { ArrowDownIcon, GridIcon } from "components/common/Icons/"
+  import { writable } from "svelte/store"
 
   export let layout
 
   let confirmDeleteDialog
   let componentToDelete = ""
 
+  const dragDropStore = writable({})
   const joinPath = join("/")
 
   const lastPartOfName = c =>
@@ -57,7 +59,8 @@
   <ComponentsHierarchyChildren
     thisComponent={_layout.component.props}
     components={_layout.component.props._children}
-    currentComponent={$store.currentComponentInfo} />
+    currentComponent={$store.currentComponentInfo}
+    {dragDropStore} />
 {/if}
 
 <style>

packages/builder/src/components/userInterface/pagesParsing/createProps.js

@@ -48,7 +48,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
     assign(props, derivedFromProps)
   }
 
-  if (componentDefinition.children !== false && isUndefined(props._children)) {
+  if (isUndefined(props._children)) {
     props._children = []
   }
 

packages/builder/tests/createProps.spec.js

@@ -72,16 +72,6 @@ describe("createDefaultProps", () => {
     expect(props._children).toEqual([])
   })
 
-  it("should create a object without _children array, when children===false ", () => {
-    const comp = getcomponent()
-    comp.children = false
-
-    const { props, errors } = createProps(comp)
-
-    expect(errors).toEqual([])
-    expect(props._children).not.toBeDefined()
-  })
-
   it("should create a object with single empty array, when prop definition is 'event' ", () => {
     const comp = getcomponent()
     comp.props.onClick = "event"
@@ -104,24 +94,22 @@ describe("createDefaultProps", () => {
     expect(props._children).toEqual([])
   })
 
-  it("should create a _children array when children not defined ", () => {
+  it("should always create _children ", () => {
     const comp = getcomponent()
+    comp.children = false
 
-    const { props, errors } = createProps(comp)
+    const createRes1 = createProps(comp)
 
-    expect(errors).toEqual([])
-    expect(props._children).toBeDefined()
-    expect(props._children).toEqual([])
-  })
+    expect(createRes1.errors).toEqual([])
+    expect(createRes1.props._children).toBeDefined()
 
-  it("should not create _children array when children=false ", () => {
-    const comp = getcomponent()
-    comp.children = false
+    const comp2 = getcomponent()
+    comp2.children = true
 
-    const { props, errors } = createProps(comp)
+    const createRes2 = createProps(comp)
 
-    expect(errors).toEqual([])
-    expect(props._children).not.toBeDefined()
+    expect(createRes2.errors).toEqual([])
+    expect(createRes2.props._children).toBeDefined()
   })
 
   it("should create an object with multiple prop names", () => {

packages/standard-components/components.json

@@ -16,6 +16,7 @@
 	"Navigation": {
 		"name": "Navigation",
 		"description": "A basic header navigation component",
+		"children": true,
 		"props": {
 			"logoUrl": "string",
 			"title": "string",
@@ -244,6 +245,7 @@
 	},
 	"list": {
 		"description": "A configurable data list that attaches to your backend models.",
+		"children": true,
 		"data": true,
 		"props": {
 			"model": "models"
@@ -263,6 +265,7 @@
 	},
 	"recorddetail": {
 		"description": "Loads a record, using an ID in the url",
+		"children": true,
 		"data": true,
 		"props": {
 			"model": "models"
@@ -674,6 +677,7 @@
 	},
 	"container": {
 		"name": "Container",
+		"children": true,
 		"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
 		"props": {
 			"className": "string",