Only explode components when dragging over them

This commit is contained in:
Andrew Kingston 2022-10-07 08:20:51 +01:00
parent bb8388133a
commit c4bb3ac014
2 changed files with 5 additions and 2 deletions

View File

@ -98,8 +98,8 @@
$: selected = $: selected =
$builderStore.inBuilder && $builderStore.selectedComponentId === id $builderStore.inBuilder && $builderStore.selectedComponentId === id
$: inSelectedPath = $componentStore.selectedComponentPath?.includes(id) $: inSelectedPath = $componentStore.selectedComponentPath?.includes(id)
$: isDndParent = $componentStore.dndParent === id
$: inDragPath = inSelectedPath && $builderStore.editMode $: inDragPath = inSelectedPath && $builderStore.editMode
$: inDndPath = $componentStore.dndPath?.includes(id)
// Derive definition properties which can all be optional, so need to be // Derive definition properties which can all be optional, so need to be
// coerced to booleans // coerced to booleans
@ -457,7 +457,7 @@
class:interactive class:interactive
class:editing class:editing
class:block={isBlock} class:block={isBlock}
class:explode={interactive && hasChildren && $builderStore.isDragging} class:explode={interactive && hasChildren && inDndPath}
class:placeholder={id === "placeholder"} class:placeholder={id === "placeholder"}
data-id={id} data-id={id}
data-name={name} data-name={name}

View File

@ -39,6 +39,8 @@ const createComponentStore = () => {
// Derive the selected component path // Derive the selected component path
const selectedPath = const selectedPath =
findComponentPathById(asset?.props, selectedComponentId) || [] findComponentPathById(asset?.props, selectedComponentId) || []
const dndPath =
findComponentPathById(asset?.props, $builderState.dndParent) || []
return { return {
customComponentManifest: $store.customComponentManifest, customComponentManifest: $store.customComponentManifest,
@ -49,6 +51,7 @@ const createComponentStore = () => {
selectedComponentPath: selectedPath?.map(component => component._id), selectedComponentPath: selectedPath?.map(component => component._id),
mountedComponentCount: Object.keys($store.mountedComponents).length, mountedComponentCount: Object.keys($store.mountedComponents).length,
currentAsset: asset, currentAsset: asset,
dndPath: dndPath?.map(component => component._id),
} }
} }
) )