77 lines
2.2 KiB
Svelte
77 lines
2.2 KiB
Svelte
<script>
|
|
import { getContext, onDestroy, onMount, setContext } from "svelte"
|
|
import { builderStore } from "stores/builder.js"
|
|
import { blockStore } from "stores/blocks.js"
|
|
|
|
const component = getContext("component")
|
|
|
|
let structureLookupMap = {}
|
|
|
|
const registerBlockComponent = (id, order, parentId, instance) => {
|
|
// Ensure child array exists
|
|
if (!structureLookupMap[parentId]) {
|
|
structureLookupMap[parentId] = {}
|
|
}
|
|
// Add this instance in this order, overwriting any existing instance in
|
|
// this order in case of repeaters
|
|
structureLookupMap[parentId][order] = instance
|
|
}
|
|
|
|
const eject = () => {
|
|
// Start the new structure with the first top level component
|
|
let definition = structureLookupMap[$component.id][0]
|
|
attachChildren(definition, structureLookupMap)
|
|
builderStore.actions.ejectBlock($component.id, definition)
|
|
}
|
|
|
|
const attachChildren = (rootComponent, map) => {
|
|
// Transform map into children array
|
|
let id = rootComponent._id
|
|
const children = Object.entries(map[id] || {}).map(([order, instance]) => ({
|
|
order,
|
|
instance,
|
|
}))
|
|
if (!children.length) {
|
|
return
|
|
}
|
|
|
|
// Sort children by order
|
|
children.sort((a, b) => (a.order < b.order ? -1 : 1))
|
|
|
|
// Attach all children of this component
|
|
rootComponent._children = children.map(x => x.instance)
|
|
|
|
// Recurse for each child
|
|
rootComponent._children.forEach(child => {
|
|
attachChildren(child, map)
|
|
})
|
|
}
|
|
|
|
setContext("block", {
|
|
// We need to set a block context to know we're inside a block, but also
|
|
// to be able to reference the actual component ID of the block from
|
|
// any depth
|
|
id: $component.id,
|
|
|
|
// We register block components with their raw props so that we can eject
|
|
// blocks later on
|
|
registerComponent: registerBlockComponent,
|
|
})
|
|
|
|
onMount(() => {
|
|
// We register and unregister blocks to the block store when inside the
|
|
// builder preview to allow for block ejection
|
|
if ($builderStore.inBuilder) {
|
|
blockStore.actions.registerBlock($component.id, { eject })
|
|
}
|
|
})
|
|
|
|
onDestroy(() => {
|
|
if ($builderStore.inBuilder) {
|
|
blockStore.actions.unregisterBlock($component.id)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<slot />
|