|
20 | 20 | import { buildIterationPickerConfig } from '../iterations/iterationPickerUtils.js'; |
21 | 21 | import ItemTypeIcon from '../../components/ItemTypeIcon.svelte'; |
22 | 22 | import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; |
23 | | - import { autoScrollWindowForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'; |
| 23 | + import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'; |
24 | 24 | import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'; |
25 | 25 | import ItemDetail from '../items/ItemDetail.svelte'; |
26 | 26 | import PersonalTaskDetail from '../personal/PersonalTaskDetail.svelte'; |
|
87 | 87 | let loading = $state(true); |
88 | 88 | let currentCollectionName = $derived(collectionStore.collectionName); |
89 | 89 | let setupTimeout; |
90 | | - let autoScrollCleanup; |
91 | 90 | let setupElements = new Map(); // Track which elements have drag/drop set up and their cleanup functions |
92 | 91 | let pendingDrops = new Set(); // Track pending drop operations to prevent duplicates |
93 | 92 | let showItemModal = $state(false); |
|
145 | 144 | // Edge-based drag state |
146 | 145 | let dragState = $state(new Map()); // Track drag state for each item: { isDragging: boolean, closestEdge: 'top'|'bottom'|null } |
147 | 146 | let boardAnnouncement = $state(''); |
148 | | - let boardViewElement = $state(null); |
| 147 | + let boardScrollElement = $state(null); |
149 | 148 |
|
150 | 149 | // Centralized gradient styling |
151 | 150 | const styles = useGradientStyles(); |
|
178 | 177 |
|
179 | 178 | onDestroy(() => { |
180 | 179 | collectionStore.clearBoardSearch(); |
181 | | - autoScrollCleanup?.(); |
| 180 | + }); |
| 181 | +
|
| 182 | + $effect(() => { |
| 183 | + if (!boardScrollElement) return; |
| 184 | + return autoScrollForElements({ |
| 185 | + element: boardScrollElement, |
| 186 | + getAllowedAxis: () => 'horizontal', |
| 187 | + }); |
182 | 188 | }); |
183 | 189 |
|
184 | 190 | // Listen for newly created items |
|
412 | 418 | } |
413 | 419 |
|
414 | 420 | onMount(async () => { |
415 | | - autoScrollCleanup = autoScrollWindowForElements({ |
416 | | - canScroll: ({ source }) => |
417 | | - source.data.type === 'work-item' && Boolean(boardViewElement?.contains(source.element)), |
418 | | - getAllowedAxis: () => 'horizontal', |
419 | | - }); |
420 | | -
|
421 | 421 | await Promise.all([ |
422 | 422 | workspaceId ? loadWorkspaceGradient(workspaceId) : Promise.resolve(), |
423 | 423 | workspaceId |
|
1542 | 1542 | <div class="animate-pulse">{t('common.loading')}</div> |
1543 | 1543 | </div> |
1544 | 1544 | {:else if workspace || !workspaceId} |
1545 | | - <StaticViewBackground |
1546 | | - backgroundStyle={styles.backgroundStyle} |
1547 | | - contextVars={styles.contextVars} |
1548 | | - contentClass="p-6 min-w-fit" |
1549 | | - testid="collection-board-background" |
| 1545 | + <div |
| 1546 | + bind:this={boardScrollElement} |
| 1547 | + class="w-full min-w-0 max-w-full overflow-x-auto" |
| 1548 | + data-testid="board-scroll-container" |
1550 | 1549 | > |
| 1550 | + <StaticViewBackground |
| 1551 | + backgroundStyle={styles.backgroundStyle} |
| 1552 | + contextVars={styles.contextVars} |
| 1553 | + contentClass="p-6 min-w-fit" |
| 1554 | + testid="collection-board-background" |
| 1555 | + > |
1551 | 1556 | <!-- Content Container --> |
1552 | 1557 | <!-- Header with view tabs --> |
1553 | 1558 | <div class="mb-8"> |
|
1691 | 1696 | {:else} |
1692 | 1697 | <!-- Board Columns / Swimlanes --> |
1693 | 1698 | <div |
1694 | | - bind:this={boardViewElement} |
1695 | 1699 | class={selectedGroupByItemType ? 'space-y-4' : ''} |
1696 | 1700 | data-testid="board-view" |
1697 | 1701 | > |
|
1892 | 1896 | </p> |
1893 | 1897 | </div> |
1894 | 1898 | {/if} |
1895 | | - </StaticViewBackground> |
| 1899 | + </StaticViewBackground> |
| 1900 | + </div> |
1896 | 1901 | {:else} |
1897 | 1902 | <div class="p-6"> |
1898 | 1903 | <div class="text-center" style="color: var(--ds-text-subtle);"> |
|
0 commit comments