diff --git a/packages/web/src/widgets/TabsPanel.svelte b/packages/web/src/widgets/TabsPanel.svelte index 48bad867f..dcce4c3a2 100644 --- a/packages/web/src/widgets/TabsPanel.svelte +++ b/packages/web/src/widgets/TabsPanel.svelte @@ -256,6 +256,79 @@ element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } } + + function dragDropTab(draggingTab, targetTab) { + if (draggingTab.tabid == targetTab.tabid) return; + + if (getTabDbKey(draggingTab) != getTabDbKey(targetTab)) { + dragDropDbKey(getTabDbKey(draggingTab), getTabDbKey(targetTab)); + return; + } + + const dbKey = getTabDbKey(draggingTab); + const items = sortTabs(tabsByDb[dbKey]); + const dstIndex = _.findIndex(items, x => x.tabid == targetTab.tabid); + const srcIndex = _.findIndex(items, x => x.tabid == draggingTab.tabid); + if (srcIndex < 0 || dstIndex < 0) { + console.warn('Drag tab index not found'); + return; + } + const newItems = + dstIndex < srcIndex + ? [...items.slice(0, dstIndex), draggingTab, ...items.slice(dstIndex).filter(x => x.tabid != draggingTab.tabid)] + : [ + ...items.slice(0, dstIndex + 1).filter(x => x.tabid != draggingTab.tabid), + draggingTab, + ...items.slice(dstIndex + 1), + ]; + + openedTabs.update(tabs => + tabs.map(x => { + const index = _.findIndex(newItems, y => y.tabid == x.tabid); + if (index >= 0) { + return { + ...x, + tabOrder: index + 1, + }; + } + return x; + }) + ); + } + + function dragDropDbKey(draggingDbKey, targetDbKey) { + if (!draggingDbKey) return; + if (targetDbKey == draggingDbKey) return; + + const groupOrderFiltered = _.pickBy($tabDatabaseGroupOrder, (v, k) => + $openedTabs.filter(x => x.closedTime == null).find(x => getTabDbKey(x) == k) + ); + + const items = _.sortBy(_.keys(groupOrderFiltered), x => groupOrderFiltered[x]); + + const dstIndex = _.indexOf(items, targetDbKey); + const srcIndex = _.indexOf(items, draggingDbKey); + if (srcIndex < 0 || dstIndex < 0) { + console.warn('Drag tab group index not found'); + return; + } + const newItems = + dstIndex < srcIndex + ? [...items.slice(0, dstIndex), draggingDbKey, ...items.slice(dstIndex).filter(x => x != draggingDbKey)] + : [ + ...items.slice(0, dstIndex + 1).filter(x => x != draggingDbKey), + draggingDbKey, + ...items.slice(dstIndex + 1), + ]; + + const newGroupOrder = {}; + for (const key in groupOrderFiltered) { + const index = newItems.indexOf(key); + newGroupOrder[key] = index >= 0 ? index + 1 : groupOrderFiltered[key]; + } + + tabDatabaseGroupOrder.set(newGroupOrder); + } {#each dbKeys as dbKey} @@ -277,37 +350,7 @@ draggingDbKeyTarget = dbKey; }} on:drop={e => { - if (!draggingDbKey) return; - if (dbKey != draggingDbKey) { - const groupOrderFiltered = _.pickBy($tabDatabaseGroupOrder, (v, k) => - $openedTabs.filter(x => x.closedTime == null).find(x => getTabDbKey(x) == k) - ); - - const items = _.sortBy(_.keys(groupOrderFiltered), x => groupOrderFiltered[x]); - - const dstIndex = _.indexOf(items, dbKey); - const srcIndex = _.indexOf(items, draggingDbKey); - if (srcIndex < 0 || dstIndex < 0) { - console.warn('Drag tab group index not found'); - return; - } - const newItems = - dstIndex < srcIndex - ? [...items.slice(0, dstIndex), draggingDbKey, ...items.slice(dstIndex).filter(x => x != draggingDbKey)] - : [ - ...items.slice(0, dstIndex + 1).filter(x => x != draggingDbKey), - draggingDbKey, - ...items.slice(dstIndex + 1), - ]; - - const newGroupOrder = {}; - for (const key in groupOrderFiltered) { - const index = newItems.indexOf(key); - newGroupOrder[key] = index >= 0 ? index + 1 : groupOrderFiltered[key]; - } - - tabDatabaseGroupOrder.set(newGroupOrder); - } + dragDropDbKey(draggingDbKey, dbKey); }} on:dragend={e => { draggingDbKey = null; @@ -342,43 +385,7 @@ draggingTabTarget = tab; }} on:drop={e => { - if (draggingTab.tabid != tab.tabid) { - if (getTabDbKey(draggingTab) == getTabDbKey(tab)) { - const dbKey = getTabDbKey(draggingTab); - const items = sortTabs(tabsByDb[dbKey]); - const dstIndex = _.findIndex(items, x => x.tabid == tab.tabid); - const srcIndex = _.findIndex(items, x => x.tabid == draggingTab.tabid); - if (srcIndex < 0 || dstIndex < 0) { - console.warn('Drag tab index not found'); - return; - } - const newItems = - dstIndex < srcIndex - ? [ - ...items.slice(0, dstIndex), - draggingTab, - ...items.slice(dstIndex).filter(x => x.tabid != draggingTab.tabid), - ] - : [ - ...items.slice(0, dstIndex + 1).filter(x => x.tabid != draggingTab.tabid), - draggingTab, - ...items.slice(dstIndex + 1), - ]; - - openedTabs.update(tabs => - tabs.map(x => { - const index = _.findIndex(newItems, y => y.tabid == x.tabid); - if (index >= 0) { - return { - ...x, - tabOrder: index + 1, - }; - } - return x; - }) - ); - } - } + dragDropTab(draggingTab, tab); }} on:dragend={e => { draggingTab = null;