{#if $mode !== 'preview'}
{
push(editorContext?.history, app.val)
if (app.val.subgrids) {
app.val.subgrids[subGridId] = e.detail
}
}}
selectedIds={$selectedComponent}
scroller={container}
parentWidth={$parentWidth - 17}
{containerWidth}
on:dropped={(e) => {
const { id, overlapped, x, y } = e.detail
if (!overlapped) {
moveToRoot(id, { x, y })
} else {
const overlappedComponent = findGridItem(app.val, overlapped)
if (overlappedComponent && !isContainer(overlappedComponent.data.type)) {
return
}
if (!overlapped) {
return
}
if (id === overlapped) {
return
}
moveComponentBetweenSubgrids(
id,
overlapped,
subGridIndexKey(overlappedComponent?.data?.type, overlapped, $worldStore),
{ x, y }
)
}
}}
disableMove={!!$connectingInput.opened}
>
{#snippet children({ dataItem, overlapped, moveMode, componentDraggedId })}
lock(dataItem)}
on:expand={() => {
const parentGridItem = findGridItem(app.val, id)
if (!parentGridItem) {
return
}
$selectedComponent = [dataItem.id]
push(editorContext?.history, app.val)
expandGriditem(
app.val.subgrids?.[subGridId] ?? [],
dataItem.id,
$breakpoint,
parentGridItem
)
app.val = app.val
}}
on:fillHeight={() => {
const gridItem = findGridItem(app.val, dataItem.id)
const b = $breakpoint === 'sm' ? 3 : 12
if (gridItem?.[b]) {
gridItem[b].fullHeight = !gridItem[b].fullHeight
}
app.val = app.val
}}
{moveMode}
{componentDraggedId}
/>
{/snippet}
{:else}
{#snippet children({ dataItem })}
selectComponent(e as PointerEvent, dataItem.id)
)}
class={classNames('h-full w-full center-center', 'top-0')}
>
{/snippet}
{/if}