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

diagram designer

Browse Source
This commit is contained in:
Jan Prochazka
2022-01-05 14:58:27 +01:00
parent c9c962abce
commit 5843ef458d
7 changed files with 92 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/web/public/global.css
View File

@@ -45,6 +45,9 @@ body {
.nowrap { .nowrap {
white-space: nowrap; white-space: nowrap;
} }
.noselect {
user-select: none;
}
.bold { .bold {
font-weight: bold; font-weight: bold;
} }

63
packages/web/src/designer/ColumnLine.svelte
View File

@@ -17,6 +17,7 @@
export let onCreateReference; export let onCreateReference;
export let onAddReferenceByColumn; export let onAddReferenceByColumn;
export let onSelectColumn; export let onSelectColumn;
export let settings;
$: designerColumn = (designer.columns || []).find( $: designerColumn = (designer.columns || []).find(
x => x.designerId == designerId && x.columnName == column.columnName x => x.designerId == designerId && x.columnName == column.columnName
@@ -38,9 +39,11 @@
}; };
return [ return [
{ text: 'Sort ascending', onClick: () => setSortOrder(1) }, settings?.allowColumnOperations && [
{ text: 'Sort descending', onClick: () => setSortOrder(-1) }, { text: 'Sort ascending', onClick: () => setSortOrder(1) },
{ text: 'Unsort', onClick: () => setSortOrder(0) }, { text: 'Sort descending', onClick: () => setSortOrder(-1) },
{ text: 'Unsort', onClick: () => setSortOrder(0) },
],
foreignKey && { text: 'Add reference', onClick: addReference }, foreignKey && { text: 'Add reference', onClick: addReference },
]; ];
} }
@@ -49,8 +52,10 @@
<div <div
class="line" class="line"
bind:this={domLine} bind:this={domLine}
draggable={true} draggable={!!settings?.allowCreateRefByDrag}
on:dragstart={e => { on:dragstart={e => {
if (!settings?.allowCreateRefByDrag) return;
const dragData = { const dragData = {
...column, ...column,
designerId, designerId,
@@ -92,30 +97,32 @@
})} })}
use:contextMenu={createMenu} use:contextMenu={createMenu}
> >
<CheckboxField {#if settings?.allowColumnOperations}
checked={!!(designer.columns || []).find( <CheckboxField
x => x.designerId == designerId && x.columnName == column.columnName && x.isOutput checked={!!(designer.columns || []).find(
)} x => x.designerId == designerId && x.columnName == column.columnName && x.isOutput
on:change={e => { )}
if (e.target.checked) { on:change={e => {
onChangeColumn( if (e.target.checked) {
{ onChangeColumn(
...column, {
designerId, ...column,
}, designerId,
col => ({ ...col, isOutput: true }) },
); col => ({ ...col, isOutput: true })
} else { );
onChangeColumn( } else {
{ onChangeColumn(
...column, {
designerId, ...column,
}, designerId,
col => ({ ...col, isOutput: false }) },
); col => ({ ...col, isOutput: false })
} );
}} }
/> }}
/>
{/if}
<ColumnLabel {...column} foreignKey={findForeignKeyForColumn(table, column)} forceIcon /> <ColumnLabel {...column} foreignKey={findForeignKeyForColumn(table, column)} forceIcon />
{#if designerColumn?.filter} {#if designerColumn?.filter}
<FontIcon icon="img filter" /> <FontIcon icon="img filter" />

15
packages/web/src/designer/Designer.svelte
View File

@@ -19,6 +19,7 @@
export let conid; export let conid;
export let database; export let database;
export let menu; export let menu;
export let settings;
let domCanvas; let domCanvas;
@@ -153,7 +154,9 @@
const newTableDesignerId = uuidv1(); const newTableDesignerId = uuidv1();
callChange(current => { callChange(current => {
const fromTable = (current.tables || []).find(x => x.designerId == designerId); const fromTable = (current.tables || []).find(x => x.designerId == designerId);
if (!fromTable) return; if (!fromTable) return current;
const alias = getNewTableAlias(toTable, current.tables);
if (alias && !settings?.allowTableAlias) return current;
return { return {
...current, ...current,
tables: [ tables: [
@@ -163,7 +166,7 @@
left: fromTable.left + 300, left: fromTable.left + 300,
top: fromTable.top + 50, top: fromTable.top + 50,
designerId: newTableDesignerId, designerId: newTableDesignerId,
alias: getNewTableAlias(toTable, current.tables), alias,
}, },
], ],
references: [ references: [
@@ -265,13 +268,16 @@
), ),
]); ]);
const alias = getNewTableAlias(json, current?.tables);
if (alias && !settings?.allowTableAlias) return current;
return { return {
...current, ...current,
tables: [ tables: [
...((current || {}).tables || []), ...((current || {}).tables || []),
{ {
...json, ...json,
alias: getNewTableAlias(json, current?.tables), alias,
}, },
], ],
references: references:
@@ -301,7 +307,7 @@
} }
</script> </script>
<div class="wrapper" use:contextMenu={menu}> <div class="wrapper noselect" use:contextMenu={menu}>
{#if !(tables?.length > 0)} {#if !(tables?.length > 0)}
<div class="empty">Drag &amp; drop tables or views from left panel here</div> <div class="empty">Drag &amp; drop tables or views from left panel here</div>
{/if} {/if}
@@ -344,6 +350,7 @@
designer={value} designer={value}
{sourceDragColumn$} {sourceDragColumn$}
{targetDragColumn$} {targetDragColumn$}
{settings}
/> />
{/each} {/each}
</div> </div>

32
packages/web/src/designer/DesignerTable.svelte
View File

@@ -31,6 +31,7 @@
// export let domTablesRef; // export let domTablesRef;
export let designer; export let designer;
export let onMoveReferences; export let onMoveReferences;
export let settings;
let movingPosition = null; let movingPosition = null;
let domWrapper; let domWrapper;
@@ -86,16 +87,18 @@
function createMenu() { function createMenu() {
return [ return [
{ text: 'Remove', onClick: () => onRemoveTable({ designerId }) }, { text: 'Remove', onClick: () => onRemoveTable({ designerId }) },
{ divider: true }, settings?.allowTableAlias && [
{ text: 'Set table alias', onClick: handleSetTableAlias }, { divider: true },
alias && { { text: 'Set table alias', onClick: handleSetTableAlias },
text: 'Remove table alias', alias && {
onClick: () => text: 'Remove table alias',
onChangeTable({ onClick: () =>
...table, onChangeTable({
alias: null, ...table,
}), alias: null,
}, }),
},
],
]; ];
} }
</script> </script>
@@ -114,9 +117,11 @@
use:contextMenu={createMenu} use:contextMenu={createMenu}
> >
<div>{alias || pureName}</div> <div>{alias || pureName}</div>
<div class="close" on:click={() => onRemoveTable(table)}> {#if settings?.showTableCloseButton}
<FontIcon icon="icon close" /> <div class="close" on:click={() => onRemoveTable(table)}>
</div> <FontIcon icon="icon close" />
</div>
{/if}
</div> </div>
<div class="columns" on:scroll={() => tick().then(onMoveReferences)}> <div class="columns" on:scroll={() => tick().then(onMoveReferences)}>
{#each columns || [] as column} {#each columns || [] as column}
@@ -131,6 +136,7 @@
{targetDragColumn$} {targetDragColumn$}
{onCreateReference} {onCreateReference}
{onAddReferenceByColumn} {onAddReferenceByColumn}
{settings}
bind:domLine={columnRefs[column.columnName]} bind:domLine={columnRefs[column.columnName]}
/> />
{/each} {/each}

13
packages/web/src/designer/DiagramDesigner.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
import Designer from './Designer.svelte';
</script>
<Designer
{...$$props}
settings={{
showTableCloseButton: false,
allowColumnOperations: false,
allowCreateRefByDrag: false,
allowTableAlias: false,
}}
/>

10
packages/web/src/designer/QueryDesigner.svelte
View File

@@ -2,4 +2,12 @@
import Designer from './Designer.svelte'; import Designer from './Designer.svelte';
</script> </script>
<Designer {...$$props} /> <Designer
{...$$props}
settings={{
showTableCloseButton: true,
allowColumnOperations: true,
allowCreateRefByDrag: true,
allowTableAlias: true,
}}
/>

4
packages/web/src/tabs/DiagramTab.svelte
View File

@@ -22,7 +22,7 @@
import _ from 'lodash'; import _ from 'lodash';
import { findEngineDriver } from 'dbgate-tools'; import { findEngineDriver } from 'dbgate-tools';
import createActivator, { getActiveComponent } from '../utility/createActivator'; import createActivator, { getActiveComponent } from '../utility/createActivator';
import Designer from '../designer/Designer.svelte'; import DiagramDesigner from '../designer/DiagramDesigner.svelte';
export let tabid; export let tabid;
export let conid; export let conid;
@@ -92,7 +92,7 @@
} }
</script> </script>
<Designer <DiagramDesigner
value={$modelState.value || {}} value={$modelState.value || {}}
{conid} {conid}
{database} {database}