mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

better drag & drop tabs

Browse Source
This commit is contained in:
Jan Prochazka 2021-12-30 14:03:06 +01:00
parent df4c8d2698
commit 13c32d4063
1 changed files with 75 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
packages/web/src/widgets/TabsPanel.svelte
View File

@ -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);
}
</script>
{#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;