{ $assetStore.taskManager.intersectedDateGroup(componentId, dateGroup, () => assetStore.updateBucketDateGroup(bucket, dateGroup, { intersecting: true }), ); }, onSeparate: () => { $assetStore.taskManager.seperatedDateGroup(componentId, dateGroup, () => assetStore.updateBucketDateGroup(bucket, dateGroup, { intersecting: false }), ); }, top: INTERSECTION_ROOT_TOP, bottom: INTERSECTION_ROOT_BOTTOM, root: assetGridElement, disabled: INTERSECTION_DISABLED, }} data-display={display} data-date-group={dateGroup.date} style:height={dateGroup.height + 'px'} style:width={dateGroup.geometry.containerWidth + 'px'} style:overflow={'clip'} > {#if !display} {/if} {#if display}

$assetStore.taskManager.queueScrollSensitiveTask({ componentId, task: () => { isMouseOverGroup = true; assetMouseEventHandler(dateGroup.groupTitle, null); }, })} on:mouseleave={() => { $assetStore.taskManager.queueScrollSensitiveTask({ componentId, task: () => { isMouseOverGroup = false; assetMouseEventHandler(dateGroup.groupTitle, null); }, }); }} >

{#if !singleSelect && ((hoveredDateGroup == dateGroup.groupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroup.groupTitle))}

handleSelectGroup(dateGroup.groupTitle, dateGroup.assets)} on:keydown={() => handleSelectGroup(dateGroup.groupTitle, dateGroup.assets)} > {#if $selectedGroup.has(dateGroup.groupTitle)} {:else} {/if}

{/if} {dateGroup.groupTitle}

{#each dateGroup.assets as asset, index (asset.id)} {@const box = dateGroup.geometry.boxes[index]}

onAssetInGrid?.(asset), top: `-${TITLE_HEIGHT}px`, bottom: `-${viewport.height - TITLE_HEIGHT - 1}px`, right: `-${viewport.width - 1}px`, root: assetGridElement, }} data-asset-id={asset.id} class="absolute" style:width={box.width + 'px'} style:height={box.height + 'px'} style:top={box.top + 'px'} style:left={box.left + 'px'} > onRetrieveElement(dateGroup, asset, element)} showStackedIcon={withStacked} {showArchiveIcon} {asset} {groupIndex} onClick={(asset) => onClick(dateGroup.assets, dateGroup.groupTitle, asset)} onSelect={(asset) => assetSelectHandler(asset, dateGroup.assets, dateGroup.groupTitle)} onMouseEvent={() => assetMouseEventHandler(dateGroup.groupTitle, asset)} selected={$selectedAssets.has(asset) || $assetStore.albumAssets.has(asset.id)} selectionCandidate={$assetSelectionCandidates.has(asset)} disabled={$assetStore.albumAssets.has(asset.id)} thumbnailWidth={box.width} thumbnailHeight={box.height} />

{/each}

{/if}