Allow quick duplicating via ctrl/cmd + drag

Budibase · Aug 14, 2024 · a755fe7 · a755fe7
1 parent b62371d
commit a755fe7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/...ilder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/...ilder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -144,7 +144,12 @@
       const rootComponent = get(selectedScreen).props
       const component = findComponent(rootComponent, data.id)
       componentStore.copy(component)
-      await componentStore.paste(component)
+      await componentStore.paste(
+        component,
+        data.mode,
+        null,
+        data.selectComponent
+      )
     } else if (type === "preview-loaded") {
       // Wait for this event to show the client library if intelligent
       // loading is supported

diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
@@ -653,7 +653,7 @@ export class ComponentStore extends BudiStore {
    * @param {object} targetScreen
    * @returns
    */
-  async paste(targetComponent, mode, targetScreen) {
+  async paste(targetComponent, mode, targetScreen, selectComponent = true) {
     const state = get(this.store)
     if (!state.componentToPaste) {
       return
@@ -728,12 +728,13 @@ export class ComponentStore extends BudiStore {
     await screenStore.patch(patch, targetScreenId)
 
     // Select the new component
-    this.update(state => {
-      state.selectedScreenId = targetScreenId
-      state.selectedComponentId = newComponentId
-
-      return state
-    })
+    if (selectComponent) {
+      this.update(state => {
+        state.selectedScreenId = targetScreenId
+        state.selectedComponentId = newComponentId
+        return state
+      })
+    }
 
     componentTreeNodesStore.makeNodeVisible(newComponentId)
   }

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -120,6 +120,11 @@
       id = component.dataset.id
     }
 
+    // If holding ctrl/cmd then leave behind a duplicate of this component
+    if (mode === GridDragModes.Move && (e.ctrlKey || e.metaKey)) {
+      builderStore.actions.duplicateComponent(id, "above", false)
+    }
+
     // Find grid parent and read from DOM
     const domComponent = document.getElementsByClassName(id)[0]
     const domGrid = domComponent?.closest(".grid")

diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
@@ -49,8 +49,12 @@ const createBuilderStore = () => {
     keyDown: (key, ctrlKey) => {
       eventStore.actions.dispatchEvent("key-down", { key, ctrlKey })
     },
-    duplicateComponent: id => {
-      eventStore.actions.dispatchEvent("duplicate-component", { id })
+    duplicateComponent: (id, mode = "below", selectComponent = true) => {
+      eventStore.actions.dispatchEvent("duplicate-component", {
+        id,
+        mode,
+        selectComponent,
+      })
     },
     deleteComponent: id => {
       eventStore.actions.dispatchEvent("delete-component", { id })