dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-05-03 18:43:58 +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' });
}
}
</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 => {
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 (dbKey != draggingDbKey) {
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, dbKey);
const dstIndex = _.indexOf(items, targetDbKey);
const srcIndex = _.indexOf(items, draggingDbKey);
if (srcIndex < 0 || dstIndex < 0) {
console.warn('Drag tab group index not found');
@@ -308,6 +329,28 @@
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 => {
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;