{#each items as item (item.id)}
{@const isDragTarget = dragItem?.id === item.id}
{@const isDragging = isDragTarget && dragActuallyMoved}
{@const isResizing = resizeItem?.id === item.id}
{@const isActive = isDragging || isResizing}
{@const itemWidth = item.w * colWidth + (item.w - 1) * gap}
{@const itemHeight = item.h * rowHeight + (item.h - 1) * gap}
{#if isDragging || isResizing}
{/if}
{@const baseWidth = item.w * colWidth + (item.w - 1) * gap}
{@const baseHeight = item.h * rowHeight + (item.h - 1) * gap}
{@const minPixelW = minW * colWidth + (minW - 1) * gap}
{@const maxPixelW = Math.min(maxW, cols - item.x) * colWidth + (Math.min(maxW, cols - item.x) - 1) * gap}
{@const minPixelH = minH * rowHeight + (minH - 1) * gap}
{@const maxPixelH = maxH * rowHeight + (maxH - 1) * gap}
{@const currentWidth = isResizing ? Math.max(minPixelW, Math.min(maxPixelW, baseWidth + resizePixelDeltaX)) : baseWidth}
{@const currentHeight = isResizing ? Math.max(minPixelH, Math.min(maxPixelH, baseHeight + resizePixelDeltaY)) : baseHeight}
{
// Check if clicking on resize handle area (bottom-right 28x28 corner)
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const isInResizeArea = x > rect.width - 28 && y > rect.height - 28;
if (isInResizeArea) {
handleResizeStart(e, item);
} else {
handleDragStart(e, item);
}
}}
>
{@render children({ item, width: itemWidth, height: itemHeight })}
{/each}