{ $assetStore.taskManager.intersectedDateGroup(componentId, dateGroup, () => assetStore.updateBucketDateGroup(bucket, dateGroup, { intersecting: true }), ); }, onSeparate: () => { $assetStore.taskManager.separatedDateGroup(componentId, dateGroup, () => assetStore.updateBucketDateGroup(bucket, dateGroup, { intersecting: false }), ); }, top: INTERSECTION_ROOT_TOP, bottom: INTERSECTION_ROOT_BOTTOM, root: assetGridElement, }} data-display={display} data-date-group={dateGroup.date} style:height={dateGroup.height + 'px'} style:width={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) || assetInteraction.selectedGroup.has(dateGroup.groupTitle))}

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

{/if} {dateGroup.groupTitle}

{#each dateGroup.assets as asset, i (asset.id)} {@const isSmallGroup = dateGroup.assets.length <= SMALL_GROUP_THRESHOLD} {@const top = geometry.getTop(i)} {@const left = geometry.getLeft(i)} {@const width = geometry.getWidth(i)} {@const height = geometry.getHeight(i)}

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:top={top + 'px'} style:left={left + 'px'} style:width={width + 'px'} style:height={height + '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={assetInteraction.selectedAssets.has(asset) || $assetStore.albumAssets.has(asset.id)} selectionCandidate={assetInteraction.assetSelectionCandidates.has(asset)} disabled={$assetStore.albumAssets.has(asset.id)} thumbnailWidth={width} thumbnailHeight={height} eagerThumbhash={isSmallGroup} />

{/each}

{/if}