dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-26 23:46:23 +00:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -256,36 +256,57 @@
element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
} }
} }
</script>
{#each dbKeys as dbKey} function dragDropTab(draggingTab, targetTab) {
<div class="db-wrapper"> if (draggingTab.tabid == targetTab.tabid) return;
<div
class="db-name" if (getTabDbKey(draggingTab) != getTabDbKey(targetTab)) {
class:selected={draggingDbKey ? dbKey == draggingDbKeyTarget : tabsByDb[dbKey][0].tabDbKey == currentDbKey} dragDropDbKey(getTabDbKey(draggingTab), getTabDbKey(targetTab));
on:click={() => handleSetDb(tabsByDb[dbKey][0].props)} return;
use:contextMenu={getDatabaseContextMenu(tabsByDb[dbKey])} }
style={$connectionColorFactory(
tabsByDb[dbKey][0].props, const dbKey = getTabDbKey(draggingTab);
(draggingDbKey ? dbKey == draggingDbKeyTarget : tabsByDb[dbKey][0].tabDbKey == currentDbKey) ? 2 : 3 const items = sortTabs(tabsByDb[dbKey]);
)} const dstIndex = _.findIndex(items, x => x.tabid == targetTab.tabid);
draggable={true} const srcIndex = _.findIndex(items, x => x.tabid == draggingTab.tabid);
on:dragstart={e => { if (srcIndex < 0 || dstIndex < 0) {
draggingDbKey = dbKey; console.warn('Drag tab index not found');
}} return;
on:dragenter={e => { }
draggingDbKeyTarget = dbKey; const newItems =
}} dstIndex < srcIndex
on:drop={e => { ? [...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 (!draggingDbKey) return;
if (dbKey != draggingDbKey) { if (targetDbKey == draggingDbKey) return;
const groupOrderFiltered = _.pickBy($tabDatabaseGroupOrder, (v, k) => const groupOrderFiltered = _.pickBy($tabDatabaseGroupOrder, (v, k) =>
$openedTabs.filter(x => x.closedTime == null).find(x => getTabDbKey(x) == k) $openedTabs.filter(x => x.closedTime == null).find(x => getTabDbKey(x) == k)
); );
const items = _.sortBy(_.keys(groupOrderFiltered), x => groupOrderFiltered[x]); const items = _.sortBy(_.keys(groupOrderFiltered), x => groupOrderFiltered[x]);
const dstIndex = _.indexOf(items, dbKey); const dstIndex = _.indexOf(items, targetDbKey);
const srcIndex = _.indexOf(items, draggingDbKey); const srcIndex = _.indexOf(items, draggingDbKey);
if (srcIndex < 0 || dstIndex < 0) { if (srcIndex < 0 || dstIndex < 0) {
console.warn('Drag tab group index not found'); console.warn('Drag tab group index not found');
@@ -308,6 +329,28 @@
tabDatabaseGroupOrder.set(newGroupOrder); tabDatabaseGroupOrder.set(newGroupOrder);
} }
</script>
{#each dbKeys as dbKey}
<div class="db-wrapper">
<div
class="db-name"
class:selected={draggingDbKey ? dbKey == draggingDbKeyTarget : tabsByDb[dbKey][0].tabDbKey == currentDbKey}
on:click={() => handleSetDb(tabsByDb[dbKey][0].props)}
use:contextMenu={getDatabaseContextMenu(tabsByDb[dbKey])}
style={$connectionColorFactory(
tabsByDb[dbKey][0].props,
(draggingDbKey ? dbKey == draggingDbKeyTarget : tabsByDb[dbKey][0].tabDbKey == currentDbKey) ? 2 : 3
)}
draggable={true}
on:dragstart={e => {
draggingDbKey = dbKey;
}}
on:dragenter={e => {
draggingDbKeyTarget = dbKey;
}}
on:drop={e => {
dragDropDbKey(draggingDbKey, dbKey);
}} }}
on:dragend={e => { on:dragend={e => {
draggingDbKey = null; draggingDbKey = null;
@@ -342,43 +385,7 @@
draggingTabTarget = tab; draggingTabTarget = tab;
}} }}
on:drop={e => { on:drop={e => {
if (draggingTab.tabid != tab.tabid) { dragDropTab(draggingTab, tab);
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;
})
);
}
}
}} }}
on:dragend={e => { on:dragend={e => {
draggingTab = null; draggingTab = null;