diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index aed959b9ba..055ecd88e0 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/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 index 21ea255b74..9c803bcd78 100644 --- 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 index ad3a5a3ae1..97b262562a 100644 --- 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 index 9d99578532..faa37eddca 100644 --- 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 })