mirror of
https://github.com/DeNNiiInc/dbgate.git
synced 2026-04-17 23:45:59 +00:00
SYNC: widgetcolumnbar refactor
This commit is contained in:
SPRINX0\prochazka
committed by
Diflow
Diflow
parent
e1fe3eb710
commit
fbf34fb730
@@ -1,38 +1,99 @@
|
||||
<script lang="ts">
|
||||
import { setContext } from 'svelte';
|
||||
import { onMount, setContext } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
import createRef from '../utility/createRef';
|
||||
import _ from 'lodash';
|
||||
|
||||
export let hidden = false;
|
||||
|
||||
let definitions = [];
|
||||
const dynamicPropsCollection = [];
|
||||
let clientHeight;
|
||||
|
||||
const widgetColumnBarHeight = writable(0);
|
||||
// const widgetColumnBarHeight = writable(0);
|
||||
const widgetColumnBarComputed = writable({});
|
||||
let deltaHeights = {};
|
||||
|
||||
setContext('widgetColumnBarHeight', widgetColumnBarHeight);
|
||||
setContext('pushWidgetItemDefinition', (item, dynamicProps) => {
|
||||
dynamicPropsCollection.push(dynamicProps);
|
||||
definitions = [...definitions, item];
|
||||
return definitions.length - 1;
|
||||
// setContext('widgetColumnBarHeight', widgetColumnBarHeight);
|
||||
setContext('pushWidgetItemDefinition', (name, item) => {
|
||||
definitions = {
|
||||
...definitions,
|
||||
[name]: {
|
||||
...item,
|
||||
name,
|
||||
index: definitions.length,
|
||||
},
|
||||
};
|
||||
});
|
||||
setContext('updateWidgetItemDefinition', (index, item) => {
|
||||
definitions[index] = item;
|
||||
setContext('updateWidgetItemDefinition', (name, 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[]) {
|
||||
const visibleItemsCount = defs.filter(x => !x.collapsed && !x.skip).length;
|
||||
for (let index = 0; index < defs.length; index++) {
|
||||
const definition = defs[index];
|
||||
const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip && x.positiveCondition);
|
||||
dynamicPropsCollection[index].set({ splitterVisible, visibleItemsCount });
|
||||
function recompute(defs: any) {
|
||||
const visibleItems = _.values(defs)
|
||||
.filter(x => !x.collapsed && !x.skip)
|
||||
.map(x => x.name);
|
||||
const visibleItemsCount = visibleItems.length;
|
||||
|
||||
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>
|
||||
|
||||
<div class="main-container" bind:clientHeight class:hidden>
|
||||
|
||||
@@ -17,55 +17,45 @@
|
||||
|
||||
export let storageName = null;
|
||||
export let onClose = null;
|
||||
export let minimalHeight = 100;
|
||||
export let name;
|
||||
|
||||
let size = 0;
|
||||
// let size = 0;
|
||||
|
||||
const dynamicProps = writable({
|
||||
splitterVisible: false,
|
||||
visibleItemsCount: 0,
|
||||
});
|
||||
// const dynamicProps = writable({
|
||||
// splitterVisible: false,
|
||||
// visibleItemsCount: 0,
|
||||
// });
|
||||
|
||||
const pushWidgetItemDefinition = getContext('pushWidgetItemDefinition') as any;
|
||||
const updateWidgetItemDefinition = getContext('updateWidgetItemDefinition') as any;
|
||||
const widgetColumnBarHeight = getContext('widgetColumnBarHeight') as any;
|
||||
const widgetItemIndex = pushWidgetItemDefinition(
|
||||
{
|
||||
collapsed,
|
||||
height,
|
||||
skip,
|
||||
positiveCondition,
|
||||
},
|
||||
dynamicProps
|
||||
);
|
||||
// const widgetColumnBarHeight = getContext('widgetColumnBarHeight') as any;
|
||||
const widgetResizeItem = getContext('widgetResizeItem') as any;
|
||||
const widgetColumnBarComputed = getContext('widgetColumnBarComputed') as any;
|
||||
pushWidgetItemDefinition(name, {
|
||||
collapsed,
|
||||
height,
|
||||
skip,
|
||||
positiveCondition,
|
||||
});
|
||||
|
||||
$: updateWidgetItemDefinition(widgetItemIndex, { collapsed: !visible, height, skip, positiveCondition });
|
||||
$: updateWidgetItemDefinition(name, { collapsed: !visible, height, skip, positiveCondition });
|
||||
|
||||
$: setInitialSize(height, $widgetColumnBarHeight);
|
||||
// $: setInitialSize(height, $widgetColumnBarHeight);
|
||||
|
||||
$: if (storageName && $widgetColumnBarHeight > 0) {
|
||||
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;
|
||||
}
|
||||
// $: if (storageName && $widgetColumnBarHeight > 0) {
|
||||
// setLocalStorage(storageName, { relativeHeight: size / $widgetColumnBarHeight, visible });
|
||||
// }
|
||||
|
||||
let visible =
|
||||
storageName && getLocalStorage(storageName) && getLocalStorage(storageName).visible != null
|
||||
? getLocalStorage(storageName).visible
|
||||
: !collapsed;
|
||||
|
||||
$: collapsible = $dynamicProps.visibleItemsCount != 1 || !visible;
|
||||
$: computed = $widgetColumnBarComputed[name] || {};
|
||||
$: collapsible = computed.visibleItemsCount != 1 || !visible;
|
||||
$: size = computed.size ?? 100;
|
||||
$: splitterVisible = computed.splitterVisible;
|
||||
</script>
|
||||
|
||||
{#if !skip && positiveCondition}
|
||||
@@ -79,14 +69,18 @@
|
||||
{#if visible}
|
||||
<div
|
||||
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}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
{#if $dynamicProps.splitterVisible}
|
||||
<div class="vertical-split-handle" use:splitterDrag={'clientY'} on:resizeSplitter={e => (size += e.detail)} />
|
||||
{#if splitterVisible}
|
||||
<div
|
||||
class="vertical-split-handle"
|
||||
use:splitterDrag={'clientY'}
|
||||
on:resizeSplitter={e => widgetResizeItem(name, e.detail)}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user