dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-18 00:56:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

SYNC: widgetcolumnbar refactor

Browse Source
This commit is contained in:
SPRINX0\prochazka
2025-12-10 15:24:10 +01:00
committed by Diflow
parent e1fe3eb710
commit fbf34fb730
2 changed files with 112 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
packages/web/src/widgets/WidgetColumnBar.svelte
View File

@@ -1,38 +1,99 @@
<script lang="ts"> <script lang="ts">
import { setContext } from 'svelte'; import { onMount, setContext } from 'svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import createRef from '../utility/createRef'; import _ from 'lodash';
export let hidden = false; export let hidden = false;
let definitions = []; let definitions = [];
const dynamicPropsCollection = [];
let clientHeight; let clientHeight;
const widgetColumnBarHeight = writable(0); // const widgetColumnBarHeight = writable(0);
const widgetColumnBarComputed = writable({});
let deltaHeights = {};
setContext('widgetColumnBarHeight', widgetColumnBarHeight); // setContext('widgetColumnBarHeight', widgetColumnBarHeight);
setContext('pushWidgetItemDefinition', (item, dynamicProps) => { setContext('pushWidgetItemDefinition', (name, item) => {
dynamicPropsCollection.push(dynamicProps); definitions = {
definitions = [...definitions, item]; ...definitions,
return definitions.length - 1; [name]: {
...item,
name,
index: definitions.length,
},
};
}); });
setContext('updateWidgetItemDefinition', (index, item) => { setContext('updateWidgetItemDefinition', (name, item) => {
definitions[index] = item; definitions = {
...definitions,
[name]: { ...definitions[name], ...item },
};
}); });
setContext('widgetResizeItem', (name, deltaHeight) => {
deltaHeights = {
...deltaHeights,
[name]: (deltaHeights[name] || 0) + deltaHeight,
};
recompute(definitions);
});
setContext('widgetColumnBarComputed', widgetColumnBarComputed);
$: $widgetColumnBarHeight = clientHeight; // $: $widgetColumnBarHeight = clientHeight;
$: computeDynamicProps(definitions); $: recompute(definitions);
function computeDynamicProps(defs: any[]) { function recompute(defs: any) {
const visibleItemsCount = defs.filter(x => !x.collapsed && !x.skip).length; const visibleItems = _.values(defs)
for (let index = 0; index < defs.length; index++) { .filter(x => !x.collapsed && !x.skip)
const definition = defs[index]; .map(x => x.name);
const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip && x.positiveCondition); const visibleItemsCount = visibleItems.length;
dynamicPropsCollection[index].set({ splitterVisible, visibleItemsCount });
const computed = {};
let totalFixedHeight = 0;
let totalFlexibleItems = 0;
for (const key of visibleItems) {
const def = defs[key];
if (def.height != null) {
let height = 0;
if (_.isString(def.height) && def.height.endsWith('px')) height = parseInt(def.height.slice(0, -2));
else if (_.isString(def.height) && def.height.endsWith('%'))
height = (clientHeight * parseFloat(def.height.slice(0, -1))) / 100;
else height = parseInt(def.height);
totalFixedHeight += height;
} else {
totalFlexibleItems++;
} }
} }
const remainingHeight = clientHeight - totalFixedHeight;
let visibleIndex = 0;
for (const key of visibleItems) {
const def = defs[key];
let size = 0;
if (def.height != null) {
if (_.isString(def.height) && def.height.endsWith('px')) size = parseInt(def.height.slice(0, -2));
else if (_.isString(def.height) && def.height.endsWith('%'))
size = (clientHeight * parseFloat(def.height.slice(0, -1))) / 100;
else size = parseInt(def.height);
} else {
size = remainingHeight / totalFlexibleItems;
}
size += deltaHeights[key] || 0;
computed[key] = {
size,
splitterVisible: visibleItemsCount > 1 && visibleIndex < visibleItemsCount - 1,
visibleItemsCount,
};
visibleIndex++;
}
$widgetColumnBarComputed = computed;
}
onMount(() => {
recompute(definitions);
});
</script> </script>
<div class="main-container" bind:clientHeight class:hidden> <div class="main-container" bind:clientHeight class:hidden>

62
packages/web/src/widgets/WidgetColumnBarItem.svelte
View File

@@ -17,55 +17,45 @@
export let storageName = null; export let storageName = null;
export let onClose = null; export let onClose = null;
export let minimalHeight = 100;
export let name;
let size = 0; // let size = 0;
const dynamicProps = writable({ // const dynamicProps = writable({
splitterVisible: false, // splitterVisible: false,
visibleItemsCount: 0, // visibleItemsCount: 0,
}); // });
const pushWidgetItemDefinition = getContext('pushWidgetItemDefinition') as any; const pushWidgetItemDefinition = getContext('pushWidgetItemDefinition') as any;
const updateWidgetItemDefinition = getContext('updateWidgetItemDefinition') as any; const updateWidgetItemDefinition = getContext('updateWidgetItemDefinition') as any;
const widgetColumnBarHeight = getContext('widgetColumnBarHeight') as any; // const widgetColumnBarHeight = getContext('widgetColumnBarHeight') as any;
const widgetItemIndex = pushWidgetItemDefinition( const widgetResizeItem = getContext('widgetResizeItem') as any;
{ const widgetColumnBarComputed = getContext('widgetColumnBarComputed') as any;
pushWidgetItemDefinition(name, {
collapsed, collapsed,
height, height,
skip, skip,
positiveCondition, positiveCondition,
}, });
dynamicProps
);
$: updateWidgetItemDefinition(widgetItemIndex, { collapsed: !visible, height, skip, positiveCondition }); $: updateWidgetItemDefinition(name, { collapsed: !visible, height, skip, positiveCondition });
$: setInitialSize(height, $widgetColumnBarHeight); // $: setInitialSize(height, $widgetColumnBarHeight);
$: if (storageName && $widgetColumnBarHeight > 0) { // $: if (storageName && $widgetColumnBarHeight > 0) {
setLocalStorage(storageName, { relativeHeight: size / $widgetColumnBarHeight, visible }); // setLocalStorage(storageName, { relativeHeight: size / $widgetColumnBarHeight, visible });
} // }
function setInitialSize(initialSize, parentHeight) {
if (storageName) {
const storage = getLocalStorage(storageName);
if (storage) {
size = parentHeight * storage.relativeHeight;
return;
}
}
if (_.isString(initialSize) && initialSize.endsWith('px')) size = parseInt(initialSize.slice(0, -2));
else if (_.isString(initialSize) && initialSize.endsWith('%'))
size = (parentHeight * parseFloat(initialSize.slice(0, -1))) / 100;
else size = parentHeight / 3;
}
let visible = let visible =
storageName && getLocalStorage(storageName) && getLocalStorage(storageName).visible != null storageName && getLocalStorage(storageName) && getLocalStorage(storageName).visible != null
? getLocalStorage(storageName).visible ? getLocalStorage(storageName).visible
: !collapsed; : !collapsed;
$: collapsible = $dynamicProps.visibleItemsCount != 1 || !visible; $: computed = $widgetColumnBarComputed[name] || {};
$: collapsible = computed.visibleItemsCount != 1 || !visible;
$: size = computed.size ?? 100;
$: splitterVisible = computed.splitterVisible;
</script> </script>
{#if !skip && positiveCondition} {#if !skip && positiveCondition}
@@ -79,14 +69,18 @@
{#if visible} {#if visible}
<div <div
class="wrapper" class="wrapper"
style={$dynamicProps.splitterVisible ? `height:${size}px` : 'flex: 1 1 0'} style={splitterVisible ? `height:${size}px` : 'flex: 1 1 0'}
data-testid={$$props['data-testid'] ? `${$$props['data-testid']}_content` : undefined} data-testid={$$props['data-testid'] ? `${$$props['data-testid']}_content` : undefined}
> >
<slot /> <slot />
</div> </div>
{#if $dynamicProps.splitterVisible} {#if splitterVisible}
<div class="vertical-split-handle" use:splitterDrag={'clientY'} on:resizeSplitter={e => (size += e.detail)} /> <div
class="vertical-split-handle"
use:splitterDrag={'clientY'}
on:resizeSplitter={e => widgetResizeItem(name, e.detail)}
/>
{/if} {/if}
{/if} {/if}
{/if} {/if}