Update cut+paste so cut doesn't actually remove the component from the tree and use new patch function
This commit is contained in:
parent
5a12e30f91
commit
5cdd37f6d8
2 changed files with 52 additions and 33 deletions
|
@ -534,13 +534,10 @@ export const getFrontendStore = () => {
|
||||||
return state
|
return state
|
||||||
})
|
})
|
||||||
|
|
||||||
// Remove the component from its parent if we're cutting
|
// Select the parent if cutting
|
||||||
if (cut) {
|
if (cut) {
|
||||||
const parent = findComponentParent(selectedAsset.props, component._id)
|
const parent = findComponentParent(selectedAsset.props, component._id)
|
||||||
if (parent) {
|
if (parent) {
|
||||||
parent._children = parent._children.filter(
|
|
||||||
child => child._id !== component._id
|
|
||||||
)
|
|
||||||
if (selectParent) {
|
if (selectParent) {
|
||||||
store.update(state => {
|
store.update(state => {
|
||||||
state.selectedComponentId = parent._id
|
state.selectedComponentId = parent._id
|
||||||
|
@ -551,23 +548,41 @@ export const getFrontendStore = () => {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
paste: async (targetComponent, mode) => {
|
paste: async (targetComponent, mode) => {
|
||||||
let promises = []
|
const state = get(store)
|
||||||
store.update(state => {
|
if (!state.componentToPaste) {
|
||||||
// Stop if we have nothing to paste
|
return
|
||||||
if (!state.componentToPaste) {
|
}
|
||||||
return state
|
let newComponentId
|
||||||
|
|
||||||
|
// Patch screen
|
||||||
|
const patch = screen => {
|
||||||
|
// Get up to date ref to target
|
||||||
|
targetComponent = findComponent(screen.props, targetComponent._id)
|
||||||
|
if (!targetComponent) {
|
||||||
|
return
|
||||||
}
|
}
|
||||||
const cut = state.componentToPaste.isCut
|
const cut = state.componentToPaste.isCut
|
||||||
|
const originalId = state.componentToPaste._id
|
||||||
// Clone the component to paste and make unique if copying
|
|
||||||
delete state.componentToPaste.isCut
|
|
||||||
let componentToPaste = cloneDeep(state.componentToPaste)
|
let componentToPaste = cloneDeep(state.componentToPaste)
|
||||||
if (cut) {
|
delete componentToPaste.isCut
|
||||||
state.componentToPaste = null
|
|
||||||
} else {
|
// Make new component unique if copying
|
||||||
|
if (!cut) {
|
||||||
makeComponentUnique(componentToPaste)
|
makeComponentUnique(componentToPaste)
|
||||||
}
|
}
|
||||||
|
newComponentId = componentToPaste._id
|
||||||
|
|
||||||
|
// Delete old component if cutting
|
||||||
|
if (cut) {
|
||||||
|
const parent = findComponentParent(screen.props, originalId)
|
||||||
|
if (parent?._children) {
|
||||||
|
parent._children = parent._children.filter(
|
||||||
|
component => component._id !== originalId
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Paste new component
|
||||||
if (mode === "inside") {
|
if (mode === "inside") {
|
||||||
// Paste inside target component if chosen
|
// Paste inside target component if chosen
|
||||||
if (!targetComponent._children) {
|
if (!targetComponent._children) {
|
||||||
|
@ -575,32 +590,29 @@ export const getFrontendStore = () => {
|
||||||
}
|
}
|
||||||
targetComponent._children.push(componentToPaste)
|
targetComponent._children.push(componentToPaste)
|
||||||
} else {
|
} else {
|
||||||
// Otherwise find the parent so we can paste in the correct order
|
// Otherwise paste in the correct order in the parent's children
|
||||||
// in the parents child components
|
|
||||||
const selectedAsset = get(currentAsset)
|
|
||||||
if (!selectedAsset) {
|
|
||||||
return state
|
|
||||||
}
|
|
||||||
const parent = findComponentParent(
|
const parent = findComponentParent(
|
||||||
selectedAsset.props,
|
screen.props,
|
||||||
targetComponent._id
|
targetComponent._id
|
||||||
)
|
)
|
||||||
if (!parent) {
|
if (!parent?._children) {
|
||||||
return state
|
return false
|
||||||
}
|
}
|
||||||
|
const targetIndex = parent._children.findIndex(component => {
|
||||||
// Insert the component in the correct position
|
return component._id === targetComponent._id
|
||||||
const targetIndex = parent._children.indexOf(targetComponent)
|
})
|
||||||
const index = mode === "above" ? targetIndex : targetIndex + 1
|
const index = mode === "above" ? targetIndex : targetIndex + 1
|
||||||
parent._children.splice(index, 0, cloneDeep(componentToPaste))
|
parent._children.splice(index, 0, componentToPaste)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
await store.actions.screens.patch(state.selectedScreenId, patch)
|
||||||
|
|
||||||
// Save and select the new component
|
// Update state
|
||||||
promises.push(store.actions.preview.saveSelected())
|
store.update(state => {
|
||||||
state.selectedComponentId = componentToPaste._id
|
delete state.componentToPaste
|
||||||
|
state.selectedComponentId = newComponentId
|
||||||
return state
|
return state
|
||||||
})
|
})
|
||||||
await Promise.all(promises)
|
|
||||||
},
|
},
|
||||||
updateStyle: async (name, value) => {
|
updateStyle: async (name, value) => {
|
||||||
const selected = get(selectedComponent)
|
const selected = get(selectedComponent)
|
||||||
|
|
|
@ -18,6 +18,13 @@
|
||||||
|
|
||||||
let closedNodes = {}
|
let closedNodes = {}
|
||||||
|
|
||||||
|
$: filteredComponents = components?.filter(component => {
|
||||||
|
return (
|
||||||
|
!$store.componentToPaste?.isCut ||
|
||||||
|
component._id !== $store.componentToPaste?._id
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
const dragover = (component, index) => e => {
|
const dragover = (component, index) => e => {
|
||||||
const mousePosition = e.offsetY / e.currentTarget.offsetHeight
|
const mousePosition = e.offsetY / e.currentTarget.offsetHeight
|
||||||
dndStore.actions.dragover({
|
dndStore.actions.dragover({
|
||||||
|
@ -91,7 +98,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{#each components || [] as component, index (component._id)}
|
{#each filteredComponents || [] as component, index (component._id)}
|
||||||
{@const opened = isOpen(component, $selectedComponentPath, closedNodes)}
|
{@const opened = isOpen(component, $selectedComponentPath, closedNodes)}
|
||||||
<li
|
<li
|
||||||
on:click|stopPropagation={() => {
|
on:click|stopPropagation={() => {
|
||||||
|
|
Loading…
Reference in a new issue