From c9c962abce6b800c880a841fc9abf2e3a640cb5e Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Wed, 5 Jan 2022 14:28:07 +0100 Subject: [PATCH 01/55] diagram tab --- .../src/appobj/DatabaseObjectAppObject.svelte | 28 +++++ packages/web/src/icons/FontIcon.svelte | 1 + packages/web/src/tabs/DiagramTab.svelte | 101 ++++++++++++++++++ packages/web/src/tabs/index.js | 2 + 4 files changed, 132 insertions(+) create mode 100644 packages/web/src/tabs/DiagramTab.svelte diff --git a/packages/web/src/appobj/DatabaseObjectAppObject.svelte b/packages/web/src/appobj/DatabaseObjectAppObject.svelte index 4f690d6a6..611061620 100644 --- a/packages/web/src/appobj/DatabaseObjectAppObject.svelte +++ b/packages/web/src/appobj/DatabaseObjectAppObject.svelte @@ -53,6 +53,10 @@ label: 'Query designer', isQueryDesigner: true, }, + { + label: 'Show diagram', + isDiagram: true, + }, { divider: true, }, @@ -531,6 +535,30 @@ }, } ); + } else if (menu.isDiagram) { + openNewTab( + { + title: 'Diagram #', + icon: 'img diagram', + tabComponent: 'DiagramTab', + props: { + conid: data.conid, + database: data.database, + }, + }, + { + editor: { + tables: [ + { + ...data, + designerId: uuidv1(), + left: 50, + top: 50, + }, + ], + }, + } + ); } else if (menu.sqlGeneratorProps) { showModal(SqlGeneratorModal, { initialObjects: [data], diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte index 472029d7c..f2a1effe0 100644 --- a/packages/web/src/icons/FontIcon.svelte +++ b/packages/web/src/icons/FontIcon.svelte @@ -122,6 +122,7 @@ 'img preview': 'mdi mdi-file-find color-icon-red', 'img favorite': 'mdi mdi-star color-icon-yellow', 'img query-design': 'mdi mdi-vector-polyline-edit color-icon-red', + 'img diagram': 'mdi mdi-graph color-icon-blue', 'img yaml': 'mdi mdi-code-brackets color-icon-red', 'img compare': 'mdi mdi-compare color-icon-red', diff --git a/packages/web/src/tabs/DiagramTab.svelte b/packages/web/src/tabs/DiagramTab.svelte new file mode 100644 index 000000000..1745e7d1f --- /dev/null +++ b/packages/web/src/tabs/DiagramTab.svelte @@ -0,0 +1,101 @@ + + + + + diff --git a/packages/web/src/tabs/index.js b/packages/web/src/tabs/index.js index 7e6824834..e3002e0d4 100644 --- a/packages/web/src/tabs/index.js +++ b/packages/web/src/tabs/index.js @@ -18,6 +18,7 @@ import * as YamlEditorTab from './YamlEditorTab.svelte'; import * as CompareModelTab from './CompareModelTab.svelte'; import * as JsonTab from './JsonTab.svelte'; import * as ChangelogTab from './ChangelogTab.svelte'; +import * as DiagramTab from './DiagramTab.svelte'; export default { TableDataTab, @@ -40,4 +41,5 @@ export default { CompareModelTab, JsonTab, ChangelogTab, + DiagramTab, }; From 5843ef458def9748bb0d082e68fe117727c51a5f Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Wed, 5 Jan 2022 14:58:27 +0100 Subject: [PATCH 02/55] diagram designer --- packages/web/public/global.css | 3 + packages/web/src/designer/ColumnLine.svelte | 63 ++++++++++--------- packages/web/src/designer/Designer.svelte | 15 +++-- .../web/src/designer/DesignerTable.svelte | 32 ++++++---- .../web/src/designer/DiagramDesigner.svelte | 13 ++++ .../web/src/designer/QueryDesigner.svelte | 10 ++- packages/web/src/tabs/DiagramTab.svelte | 4 +- 7 files changed, 92 insertions(+), 48 deletions(-) create mode 100644 packages/web/src/designer/DiagramDesigner.svelte diff --git a/packages/web/public/global.css b/packages/web/public/global.css index 9f4b0ca27..df96b6ae1 100644 --- a/packages/web/public/global.css +++ b/packages/web/public/global.css @@ -45,6 +45,9 @@ body { .nowrap { white-space: nowrap; } +.noselect { + user-select: none; +} .bold { font-weight: bold; } diff --git a/packages/web/src/designer/ColumnLine.svelte b/packages/web/src/designer/ColumnLine.svelte index 013801dc2..c9e9954a1 100644 --- a/packages/web/src/designer/ColumnLine.svelte +++ b/packages/web/src/designer/ColumnLine.svelte @@ -17,6 +17,7 @@ export let onCreateReference; export let onAddReferenceByColumn; export let onSelectColumn; + export let settings; $: designerColumn = (designer.columns || []).find( x => x.designerId == designerId && x.columnName == column.columnName @@ -38,9 +39,11 @@ }; return [ - { text: 'Sort ascending', onClick: () => setSortOrder(1) }, - { text: 'Sort descending', onClick: () => setSortOrder(-1) }, - { text: 'Unsort', onClick: () => setSortOrder(0) }, + settings?.allowColumnOperations && [ + { text: 'Sort ascending', onClick: () => setSortOrder(1) }, + { text: 'Sort descending', onClick: () => setSortOrder(-1) }, + { text: 'Unsort', onClick: () => setSortOrder(0) }, + ], foreignKey && { text: 'Add reference', onClick: addReference }, ]; } @@ -49,8 +52,10 @@
{ + if (!settings?.allowCreateRefByDrag) return; + const dragData = { ...column, designerId, @@ -92,30 +97,32 @@ })} use:contextMenu={createMenu} > - x.designerId == designerId && x.columnName == column.columnName && x.isOutput - )} - on:change={e => { - if (e.target.checked) { - onChangeColumn( - { - ...column, - designerId, - }, - col => ({ ...col, isOutput: true }) - ); - } else { - onChangeColumn( - { - ...column, - designerId, - }, - col => ({ ...col, isOutput: false }) - ); - } - }} - /> + {#if settings?.allowColumnOperations} + x.designerId == designerId && x.columnName == column.columnName && x.isOutput + )} + on:change={e => { + if (e.target.checked) { + onChangeColumn( + { + ...column, + designerId, + }, + col => ({ ...col, isOutput: true }) + ); + } else { + onChangeColumn( + { + ...column, + designerId, + }, + col => ({ ...col, isOutput: false }) + ); + } + }} + /> + {/if} {#if designerColumn?.filter} diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index beccec287..bdf693a5a 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -19,6 +19,7 @@ export let conid; export let database; export let menu; + export let settings; let domCanvas; @@ -153,7 +154,9 @@ const newTableDesignerId = uuidv1(); callChange(current => { 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 { ...current, tables: [ @@ -163,7 +166,7 @@ left: fromTable.left + 300, top: fromTable.top + 50, designerId: newTableDesignerId, - alias: getNewTableAlias(toTable, current.tables), + alias, }, ], references: [ @@ -265,13 +268,16 @@ ), ]); + const alias = getNewTableAlias(json, current?.tables); + if (alias && !settings?.allowTableAlias) return current; + return { ...current, tables: [ ...((current || {}).tables || []), { ...json, - alias: getNewTableAlias(json, current?.tables), + alias, }, ], references: @@ -301,7 +307,7 @@ } -
+
{#if !(tables?.length > 0)}
Drag & drop tables or views from left panel here
{/if} @@ -344,6 +350,7 @@ designer={value} {sourceDragColumn$} {targetDragColumn$} + {settings} /> {/each}
diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte index c3c99462d..df73cd828 100644 --- a/packages/web/src/designer/DesignerTable.svelte +++ b/packages/web/src/designer/DesignerTable.svelte @@ -31,6 +31,7 @@ // export let domTablesRef; export let designer; export let onMoveReferences; + export let settings; let movingPosition = null; let domWrapper; @@ -86,16 +87,18 @@ function createMenu() { return [ { text: 'Remove', onClick: () => onRemoveTable({ designerId }) }, - { divider: true }, - { text: 'Set table alias', onClick: handleSetTableAlias }, - alias && { - text: 'Remove table alias', - onClick: () => - onChangeTable({ - ...table, - alias: null, - }), - }, + settings?.allowTableAlias && [ + { divider: true }, + { text: 'Set table alias', onClick: handleSetTableAlias }, + alias && { + text: 'Remove table alias', + onClick: () => + onChangeTable({ + ...table, + alias: null, + }), + }, + ], ]; } @@ -114,9 +117,11 @@ use:contextMenu={createMenu} >
{alias || pureName}
-
onRemoveTable(table)}> - -
+ {#if settings?.showTableCloseButton} +
onRemoveTable(table)}> + +
+ {/if}
tick().then(onMoveReferences)}> {#each columns || [] as column} @@ -131,6 +136,7 @@ {targetDragColumn$} {onCreateReference} {onAddReferenceByColumn} + {settings} bind:domLine={columnRefs[column.columnName]} /> {/each} diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte new file mode 100644 index 000000000..564abd5bf --- /dev/null +++ b/packages/web/src/designer/DiagramDesigner.svelte @@ -0,0 +1,13 @@ + + + diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte index 782816e47..ff354ebd9 100644 --- a/packages/web/src/designer/QueryDesigner.svelte +++ b/packages/web/src/designer/QueryDesigner.svelte @@ -2,4 +2,12 @@ import Designer from './Designer.svelte'; - + diff --git a/packages/web/src/tabs/DiagramTab.svelte b/packages/web/src/tabs/DiagramTab.svelte index 1745e7d1f..055c5f945 100644 --- a/packages/web/src/tabs/DiagramTab.svelte +++ b/packages/web/src/tabs/DiagramTab.svelte @@ -22,7 +22,7 @@ import _ from 'lodash'; import { findEngineDriver } from 'dbgate-tools'; import createActivator, { getActiveComponent } from '../utility/createActivator'; - import Designer from '../designer/Designer.svelte'; + import DiagramDesigner from '../designer/DiagramDesigner.svelte'; export let tabid; export let conid; @@ -92,7 +92,7 @@ } - Date: Wed, 5 Jan 2022 16:39:21 +0100 Subject: [PATCH 03/55] diagram - update tables from db info --- packages/web/src/designer/Designer.svelte | 68 +++++++++++++++---- .../web/src/designer/DiagramDesigner.svelte | 1 + .../web/src/designer/QueryDesigner.svelte | 1 + packages/web/src/tabs/DiagramTab.svelte | 6 +- 4 files changed, 57 insertions(+), 19 deletions(-) diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index bdf693a5a..24f65485c 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -5,7 +5,7 @@ import DesignerTable from './DesignerTable.svelte'; import { isConnectedByReference } from './designerTools'; import uuidv1 from 'uuid/v1'; - import { getTableInfo } from '../utility/metadataLoaders'; + import { getTableInfo, useDatabaseInfo } from '../utility/metadataLoaders'; import cleanupDesignColumns from './cleanupDesignColumns'; import _ from 'lodash'; import createRef from '../utility/createRef'; @@ -13,6 +13,7 @@ import { writable } from 'svelte/store'; import { tick } from 'svelte'; import contextMenu from '../utility/contextMenu'; + import stableStringify from 'json-stable-stringify'; export let value; export let onChange; @@ -26,6 +27,8 @@ const sourceDragColumn$ = writable(null); const targetDragColumn$ = writable(null); + const dbInfo = settings?.updateFromDbInfo ? useDatabaseInfo({ conid, database }) : null; + $: tables = value?.tables as any[]; $: references = value?.references as any[]; @@ -48,6 +51,41 @@ return tables; } + $: { + if (dbInfo) { + updateFromDbInfo($dbInfo); + } + } + + function updateFromDbInfo(db) { + if (!settings?.updateFromDbInfo || !db) return; + + onChange(current => { + let newTables = current.tables || []; + for (const table of current.tables || []) { + const dbTable = (db.tables || []).find(x => x.pureName == table.pureName && x.schemaName == table.schemaName); + if ( + stableStringify(_.pick(dbTable, ['columns', 'primaryKey', 'foreignKeys'])) != + stableStringify(_.pick(table, ['columns', 'primaryKey', 'foreignKeys'])) + ) { + newTables = newTables.map(x => + x == table + ? { + ...table, + ..._.pick(dbTable, ['columns', 'primaryKey', 'foreignKeys']), + } + : x + ); + } + } + + return { + ...current, + tables: newTables, + }; + }, true); + } + function callChange(changeFunc, skipUndoChain = undefined) { onChange(changeFunc, skipUndoChain); tick().then(recomputeReferencePositions); @@ -169,19 +207,21 @@ alias, }, ], - references: [ - ...(current.references || []), - { - designerId: uuidv1(), - sourceId: fromTable.designerId, - targetId: newTableDesignerId, - joinType: 'INNER JOIN', - columns: foreignKey.columns.map(col => ({ - source: col.columnName, - target: col.refColumnName, - })), - }, - ], + references: settings?.allowCreateRefByDrag + ? [ + ...(current.references || []), + { + designerId: uuidv1(), + sourceId: fromTable.designerId, + targetId: newTableDesignerId, + joinType: 'INNER JOIN', + columns: foreignKey.columns.map(col => ({ + source: col.columnName, + target: col.refColumnName, + })), + }, + ] + : current.references, }; }); }; diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte index 564abd5bf..97a9c7ffd 100644 --- a/packages/web/src/designer/DiagramDesigner.svelte +++ b/packages/web/src/designer/DiagramDesigner.svelte @@ -9,5 +9,6 @@ allowColumnOperations: false, allowCreateRefByDrag: false, allowTableAlias: false, + updateFromDbInfo: true, }} /> diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte index ff354ebd9..fc317c1f5 100644 --- a/packages/web/src/designer/QueryDesigner.svelte +++ b/packages/web/src/designer/QueryDesigner.svelte @@ -9,5 +9,6 @@ allowColumnOperations: true, allowCreateRefByDrag: true, allowTableAlias: true, + updateFromDbInfo: false, }} /> diff --git a/packages/web/src/tabs/DiagramTab.svelte b/packages/web/src/tabs/DiagramTab.svelte index 055c5f945..99b7174cd 100644 --- a/packages/web/src/tabs/DiagramTab.svelte +++ b/packages/web/src/tabs/DiagramTab.svelte @@ -16,7 +16,7 @@ @@ -123,7 +125,7 @@
{/if}
-
tick().then(onMoveReferences)}> +
tick().then(onMoveReferences)} class:scroll={settings?.allowScrollColumns}> {#each columns || [] as column} diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte index cb3f371fe..c63e4307d 100644 --- a/packages/web/src/designer/DiagramDesigner.svelte +++ b/packages/web/src/designer/DiagramDesigner.svelte @@ -13,5 +13,7 @@ useDatabaseReferences: true, showJoinType: false, showReferenceArrow: true, + allowScrollColumns: false, + allowAddAllReferences: true, }} /> diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte index 473c80e6e..7b25b727a 100644 --- a/packages/web/src/designer/QueryDesigner.svelte +++ b/packages/web/src/designer/QueryDesigner.svelte @@ -13,5 +13,7 @@ useDatabaseReferences: false, showJoinType: true, showReferenceArrow: false, + allowScrollColumns: true, + allowAddAllReferences: false, }} /> From 2cff55b12e24ad92151e246a8ec27695dcaf37f7 Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Thu, 6 Jan 2022 09:24:32 +0100 Subject: [PATCH 07/55] reference component split --- packages/web/src/designer/Designer.svelte | 6 +- .../web/src/designer/DiagramDesigner.svelte | 4 +- .../designer/DiagramDesignerReference.svelte | 149 ++++++++++++++++++ .../web/src/designer/QueryDesigner.svelte | 4 +- ...e.svelte => QueryDesignerReference.svelte} | 34 ++-- 5 files changed, 166 insertions(+), 31 deletions(-) create mode 100644 packages/web/src/designer/DiagramDesignerReference.svelte rename packages/web/src/designer/{DesignerReference.svelte => QueryDesignerReference.svelte} (84%) diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index 56add3394..e26325267 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -9,7 +9,6 @@ import cleanupDesignColumns from './cleanupDesignColumns'; import _ from 'lodash'; import createRef from '../utility/createRef'; - import DesignerReference from './DesignerReference.svelte'; import { writable } from 'svelte/store'; import { tick } from 'svelte'; import contextMenu from '../utility/contextMenu'; @@ -21,6 +20,7 @@ export let database; export let menu; export let settings; + export let referenceComponent; let domCanvas; @@ -272,7 +272,7 @@ if (dst) newTables.push(dst); } } - + return { ...current, tables: [ @@ -418,7 +418,7 @@
e.preventDefault()} on:drop={handleDrop}> {#each references || [] as ref (ref.designerId)} - import Designer from './Designer.svelte'; + import DiagramDesignerReference from './DiagramDesignerReference.svelte'; diff --git a/packages/web/src/designer/DiagramDesignerReference.svelte b/packages/web/src/designer/DiagramDesignerReference.svelte new file mode 100644 index 000000000..cbb057e07 --- /dev/null +++ b/packages/web/src/designer/DiagramDesignerReference.svelte @@ -0,0 +1,149 @@ + + +{#if src && dst && minpos} + + + {#each columnsY as coly} + + + {/each} + + +{/if} + + diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte index 7b25b727a..96dcc6de1 100644 --- a/packages/web/src/designer/QueryDesigner.svelte +++ b/packages/web/src/designer/QueryDesigner.svelte @@ -1,5 +1,6 @@ diff --git a/packages/web/src/designer/DesignerReference.svelte b/packages/web/src/designer/QueryDesignerReference.svelte similarity index 84% rename from packages/web/src/designer/DesignerReference.svelte rename to packages/web/src/designer/QueryDesignerReference.svelte index e80482d27..9affea768 100644 --- a/packages/web/src/designer/DesignerReference.svelte +++ b/packages/web/src/designer/QueryDesignerReference.svelte @@ -18,9 +18,6 @@ const buswi = 10; const extwi = 25; - const arwi = 12; - const arhi = 12; - const arpad = 3; export function recomputePosition() { const { designerId, sourceId, targetId, columns, joinType } = reference; @@ -121,31 +118,20 @@ `} /> {/each} - {#if settings?.showReferenceArrow} - - {/if} - {#if settings?.showJoinType} -
-
- {_.snakeCase(reference?.joinType || 'CROSS JOIN') - .replace('_', '\xa0') - .replace('_', '\xa0')} -
+ > +
+ {_.snakeCase(reference?.joinType || 'CROSS JOIN') + .replace('_', '\xa0') + .replace('_', '\xa0')}
- {/if} +
{/if} + + + + + + ${html} + + + `; + }; + + module.exports = getDiagramExport; + \ No newline at end of file diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index fce13cb31..e93caa7f9 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -11,6 +11,18 @@ testEnabled: () => getCurrentEditor()?.canArrange(), onClick: () => getCurrentEditor().arrange(), }); + + registerCommand({ + id: 'diagram.export', + category: 'Designer', + toolbarName: 'Export diagram', + name: 'Export diagram', + icon: 'icon report', + toolbar: true, + isRelatedToTab: true, + onClick: () => getCurrentEditor().exportDiagram(), + testEnabled: () => getCurrentEditor()?.canExport(), + }); diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte index ca9b47cae..d64f629dc 100644 --- a/packages/web/src/designer/DiagramDesigner.svelte +++ b/packages/web/src/designer/DiagramDesigner.svelte @@ -15,6 +15,7 @@ allowScrollColumns: false, allowAddAllReferences: true, canArrange: true, + canExport: true, }} referenceComponent={DiagramDesignerReference} /> diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte index 6c2932a01..9482f66bb 100644 --- a/packages/web/src/designer/QueryDesigner.svelte +++ b/packages/web/src/designer/QueryDesigner.svelte @@ -15,6 +15,7 @@ allowScrollColumns: true, allowAddAllReferences: false, canArrange: false, + canExport: false, }} referenceComponent={QueryDesignerReference} /> diff --git a/packages/web/src/tabs/DiagramTab.svelte b/packages/web/src/tabs/DiagramTab.svelte index 1b1d5f750..0da293c16 100644 --- a/packages/web/src/tabs/DiagramTab.svelte +++ b/packages/web/src/tabs/DiagramTab.svelte @@ -82,6 +82,7 @@ { command: 'diagram.save' }, { command: 'diagram.saveAs' }, { command: 'designer.arrange' }, + { command: 'diagram.export' }, { divider: true }, { command: 'diagram.undo' }, { command: 'diagram.redo' }, From 3e4e8ed350d4f62450ad3b8ac41f8defdfd620da Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Sun, 16 Jan 2022 19:18:52 +0100 Subject: [PATCH 28/55] v4.5.2-beta.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 207620f9e..3f954c321 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "private": true, - "version": "4.5.2-beta.1", + "version": "4.5.2-beta.2", "name": "dbgate-all", "workspaces": [ "packages/*", From 9ee60d1d498b2b83ca5505351bd327f1c19b6bd9 Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Sun, 16 Jan 2022 21:36:40 +0100 Subject: [PATCH 29/55] temporary skip windows code signing --- .github/workflows/build-app-beta.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/build-app-beta.yaml b/.github/workflows/build-app-beta.yaml index e7a95860b..8c5eb8e51 100644 --- a/.github/workflows/build-app-beta.yaml +++ b/.github/workflows/build-app-beta.yaml @@ -47,8 +47,8 @@ jobs: yarn run build:app env: GH_TOKEN: ${{ secrets.GH_TOKEN }} # token for electron publish - WIN_CSC_LINK: ${{ secrets.WINCERT_CERTIFICATE }} - WIN_CSC_KEY_PASSWORD: ${{ secrets.WINCERT_PASSWORD }} + # WIN_CSC_LINK: ${{ secrets.WINCERT_CERTIFICATE }} + # WIN_CSC_KEY_PASSWORD: ${{ secrets.WINCERT_PASSWORD }} - name: Publish Mac if: matrix.os == 'macOS-10.15' From 8aa185135ad433d54d205f1145400fca5c5f6826 Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Sun, 16 Jan 2022 21:36:54 +0100 Subject: [PATCH 30/55] v4.5.2-beta.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3f954c321..ae61910f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "private": true, - "version": "4.5.2-beta.2", + "version": "4.5.2-beta.3", "name": "dbgate-all", "workspaces": [ "packages/*", From 7a2a1a16f1eee1d4c3265e9dff058ad774e7e5c1 Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Mon, 17 Jan 2022 21:33:05 +0100 Subject: [PATCH 31/55] diagram improvements --- .../web/src/appobj/DatabaseAppObject.svelte | 30 +++++++++++++++++++ .../src/appobj/DatabaseObjectAppObject.svelte | 2 +- packages/web/src/designer/Designer.svelte | 26 ++++++++++++++-- packages/web/src/designer/GraphLayout.ts | 3 +- 4 files changed, 56 insertions(+), 5 deletions(-) diff --git a/packages/web/src/appobj/DatabaseAppObject.svelte b/packages/web/src/appobj/DatabaseAppObject.svelte index 74eb1ca4d..13bda44b8 100644 --- a/packages/web/src/appobj/DatabaseAppObject.svelte +++ b/packages/web/src/appobj/DatabaseAppObject.svelte @@ -85,6 +85,34 @@ }); }; + const handleShowDiagram = async () => { + const db = await getDatabaseInfo({ + conid: connection._id, + database: name, + }); + openNewTab( + { + title: 'Diagram #', + icon: 'img diagram', + tabComponent: 'DiagramTab', + props: { + conid: connection._id, + database: name, + }, + }, + { + editor: { + tables: db.tables.map(table => ({ + ...table, + designerId: `${table.pureName}-${uuidv1()}`, + })), + references: [], + autoLayout: true, + }, + } + ); + }; + const handleDisconnect = () => { const electron = getElectron(); if (electron) { @@ -138,6 +166,7 @@ { divider: true }, { onClick: handleImport, text: 'Import' }, { onClick: handleExport, text: 'Export' }, + { onClick: handleShowDiagram, text: 'Show diagram' }, { onClick: handleSqlGenerator, text: 'SQL Generator' }, { onClick: handleOpenJsonModel, text: 'Open model as JSON' }, { onClick: handleExportModel, text: 'Export DB model - experimental' }, @@ -157,6 +186,7 @@ -
e.preventDefault()} > diff --git a/packages/web/src/designer/ColumnLine.svelte b/packages/web/src/designer/ColumnLine.svelte index c9e9954a1..11d86fc90 100644 --- a/packages/web/src/designer/ColumnLine.svelte +++ b/packages/web/src/designer/ColumnLine.svelte @@ -51,6 +51,7 @@
{ @@ -95,7 +96,7 @@ ...column, designerId, })} - use:contextMenu={createMenu} + use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'} > {#if settings?.allowColumnOperations} diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte index 42496eb7a..39ea50ff8 100644 --- a/packages/web/src/designer/DesignerTable.svelte +++ b/packages/web/src/designer/DesignerTable.svelte @@ -107,16 +107,19 @@
onBringToFront(table)} + use:contextMenu={settings?.canSelectColumns ? '__no_menu' : createMenu} + use:moveDrag={settings?.canSelectColumns ? null : [handleMoveStart, handleMove, handleMoveEnd]} >
{alias || pureName}
{#if settings?.showTableCloseButton} @@ -152,15 +155,21 @@ border: 1px solid var(--theme-border); } + :global(.dbgate-screen) .wrapper:not(.canSelectColumns) { + cursor: pointer; + } + .header { font-weight: bold; text-align: center; padding: 2px; border-bottom: 1px solid var(--theme-border); - cursor: pointer; display: flex; justify-content: space-between; } + :global(.dbgate-screen) .header { + cursor: pointer; + } .header.isTable { background: var(--theme-bg-blue); } diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte index d64f629dc..a893ab804 100644 --- a/packages/web/src/designer/DiagramDesigner.svelte +++ b/packages/web/src/designer/DiagramDesigner.svelte @@ -16,6 +16,7 @@ allowAddAllReferences: true, canArrange: true, canExport: true, + canSelectColumns: false, }} referenceComponent={DiagramDesignerReference} /> diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte index 9482f66bb..5fdacd1c3 100644 --- a/packages/web/src/designer/QueryDesigner.svelte +++ b/packages/web/src/designer/QueryDesigner.svelte @@ -16,6 +16,7 @@ allowAddAllReferences: false, canArrange: false, canExport: false, + canSelectColumns: true, }} referenceComponent={QueryDesignerReference} /> diff --git a/packages/web/src/utility/contextMenu.ts b/packages/web/src/utility/contextMenu.ts index a89c2759c..5dc3d781e 100644 --- a/packages/web/src/utility/contextMenu.ts +++ b/packages/web/src/utility/contextMenu.ts @@ -9,13 +9,13 @@ export function registerMenu(...items) { setContext('componentContextMenu', [parentMenu, ...items]); } -export default function contextMenu(node, items = []) { +export default function contextMenu(node, items: any = []) { const handleContextMenu = async e => { e.preventDefault(); e.stopPropagation(); await invalidateCommands(); - + if (items) { const left = e.pageX; const top = e.pageY; @@ -23,6 +23,8 @@ export default function contextMenu(node, items = []) { } }; + if (items == '__no_menu') return; + node.addEventListener('contextmenu', handleContextMenu); return { diff --git a/packages/web/src/utility/moveDrag.ts b/packages/web/src/utility/moveDrag.ts index cac23b039..c94257bfb 100644 --- a/packages/web/src/utility/moveDrag.ts +++ b/packages/web/src/utility/moveDrag.ts @@ -1,4 +1,7 @@ -export default function moveDrag(node, [onStart, onMove, onEnd]) { +export default function moveDrag(node, dragEvents) { + if (!dragEvents) return; + + const [onStart, onMove, onEnd] = dragEvents; let startX = null; let startY = null; From fa759b2fb871eb7f925729cc9a68b2301c5e644b Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Thu, 20 Jan 2022 11:12:17 +0100 Subject: [PATCH 37/55] designer - selecting tables --- packages/web/src/designer/Designer.svelte | 26 ++++++++++ .../web/src/designer/DesignerTable.svelte | 49 ++++++++++++++++++- .../web/src/designer/DiagramDesigner.svelte | 1 + .../web/src/designer/QueryDesigner.svelte | 1 + 4 files changed, 75 insertions(+), 2 deletions(-) diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index fe5059791..66157da4b 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -183,6 +183,20 @@ ); }; + const selectTable = (table, addToSelection) => { + callChange( + current => ({ + ...current, + tables: (current.tables || []).map(x => + x.designerId == table.designerId + ? { ...x, isSelectedTable: true } + : { ...x, isSelectedTable: addToSelection ? x.isSelectedTable : false } + ), + }), + true + ); + }; + const removeTable = table => { callChange(current => ({ ...current, @@ -587,6 +601,17 @@ on:dragover={e => e.preventDefault()} on:drop={handleDrop} style={`width:${canvasWidth}px;height:${canvasHeight}px;`} + on:mousedown={e => { + if (e.button == 0 && settings?.canSelectTables) { + callChange( + current => ({ + ...current, + tables: (current.tables || []).map(x => ({ ...x, isSelectedTable: false })), + }), + true + ); + } + }} > {#each references || [] as ref (ref.designerId)} onBringToFront(table)} + on:mousedown={e => { + if (e.button == 0) { + e.stopPropagation(); + onBringToFront(table); + if (settings?.canSelectTables && !table?.isSelectedTable) { + onSelectTable(table, e.ctrlKey); + } + } + }} use:contextMenu={settings?.canSelectColumns ? '__no_menu' : createMenu} use:moveDrag={settings?.canSelectColumns ? null : [handleMoveStart, handleMove, handleMoveEnd]} > @@ -146,6 +156,12 @@ /> {/each}
+ {#if table?.isSelectedTable} +
+
+
+
+ {/if}
diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte index 5da1c193c..7fc5a1f6a 100644 --- a/packages/web/src/designer/DesignerTable.svelte +++ b/packages/web/src/designer/DesignerTable.svelte @@ -7,6 +7,7 @@ import contextMenu from '../utility/contextMenu'; import moveDrag from '../utility/moveDrag'; import ColumnLine from './ColumnLine.svelte'; +import { rectanglesHaveIntersection } from './designerMath'; import DomTableRef from './DomTableRef'; export let table; diff --git a/packages/web/src/designer/designerMath.ts b/packages/web/src/designer/designerMath.ts index 348604105..caf11e8e8 100644 --- a/packages/web/src/designer/designerMath.ts +++ b/packages/web/src/designer/designerMath.ts @@ -1,5 +1,6 @@ -import { arrayDifference } from 'interval-operations'; +import { intersection, arrayDifference } from 'interval-operations'; import _ from 'lodash'; + export interface IPoint { x: number; y: number; @@ -101,6 +102,13 @@ export function rectangleIntersectArea(rect1: IBoxBounds, rect2: IBoxBounds) { return x_overlap * y_overlap; } +export function rectanglesHaveIntersection(rect1: IBoxBounds, rect2: IBoxBounds) { + const xIntersection = intersection([rect1.left, rect1.right], [rect2.left, rect2.right]); + const yIntersection = intersection([rect1.top, rect1.bottom], [rect2.top, rect2.bottom]); + + return !!xIntersection && !!yIntersection; +} + export class Vector2D { constructor(public x: number, public y: number) {} diff --git a/packages/web/src/utility/moveDrag.ts b/packages/web/src/utility/moveDrag.ts index c94257bfb..eef0c1e6c 100644 --- a/packages/web/src/utility/moveDrag.ts +++ b/packages/web/src/utility/moveDrag.ts @@ -1,17 +1,25 @@ export default function moveDrag(node, dragEvents) { if (!dragEvents) return; - + const [onStart, onMove, onEnd] = dragEvents; let startX = null; let startY = null; + let clientX = null; + let clientY = null; + const handleMoveDown = e => { if (e.button != 0) return; + + const clientRect = node.getBoundingClientRect(); + clientX = clientRect.left; + clientY = clientRect.top; + startX = e.clientX; startY = e.clientY; document.addEventListener('mousemove', handleMoveMove, true); document.addEventListener('mouseup', handleMoveEnd, true); - onStart(); + onStart(e.clientX - clientX, e.clientY - clientY); }; const handleMoveMove = e => { @@ -21,7 +29,7 @@ export default function moveDrag(node, dragEvents) { const diffY = e.clientY - startY; startY = e.clientY; - onMove(diffX, diffY); + onMove(diffX, diffY, e.clientX - clientX, e.clientY - clientY); }; const handleMoveEnd = e => { e.preventDefault(); @@ -29,7 +37,7 @@ export default function moveDrag(node, dragEvents) { startY = null; document.removeEventListener('mousemove', handleMoveMove, true); document.removeEventListener('mouseup', handleMoveEnd, true); - onEnd(); + onEnd(e.clientX - clientX, e.clientY - clientY); }; node.addEventListener('mousedown', handleMoveDown); From 5be368bbf3fd434acb298d83709a1343875851f5 Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Thu, 20 Jan 2022 14:08:43 +0100 Subject: [PATCH 40/55] diagram color, export follows current theme --- packages/api/src/controllers/files.js | 4 +-- packages/api/src/utility/getDiagramExport.js | 18 ++++++++----- packages/web/src/designer/Designer.svelte | 26 ++++++++++++++++++ .../web/src/designer/DesignerTable.svelte | 15 ++++++++++- .../web/src/designer/DiagramDesigner.svelte | 1 + .../designer/DiagramDesignerReference.svelte | 4 +++ .../web/src/designer/QueryDesigner.svelte | 1 + .../web/src/modals/ChooseColorModal.svelte | 27 +++++++++++++++++++ 8 files changed, 86 insertions(+), 10 deletions(-) create mode 100644 packages/web/src/modals/ChooseColorModal.svelte diff --git a/packages/api/src/controllers/files.js b/packages/api/src/controllers/files.js index baebe8066..78a297784 100644 --- a/packages/api/src/controllers/files.js +++ b/packages/api/src/controllers/files.js @@ -155,8 +155,8 @@ module.exports = { }, exportDiagram_meta: true, - async exportDiagram({ filePath, html, css }) { - await fs.writeFile(filePath, getDiagramExport(html, css)); + async exportDiagram({ filePath, html, css, themeType, themeClassName }) { + await fs.writeFile(filePath, getDiagramExport(html, css, themeType, themeClassName)); return true; }, }; diff --git a/packages/api/src/utility/getDiagramExport.js b/packages/api/src/utility/getDiagramExport.js index 0fc55becc..3e45fa459 100644 --- a/packages/api/src/utility/getDiagramExport.js +++ b/packages/api/src/utility/getDiagramExport.js @@ -1,21 +1,25 @@ -const getDiagramExport = (html,css) => { - return ` +const getDiagramExport = (html, css, themeType, themeClassName) => { + return ` - + ${html} `; - }; - - module.exports = getDiagramExport; - \ No newline at end of file +}; + +module.exports = getDiagramExport; diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index 7e826740c..1fbf52fac 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -43,6 +43,9 @@ import { apiCall } from '../utility/api'; import moveDrag from '../utility/moveDrag'; import { rectanglesHaveIntersection } from './designerMath'; + import { showModal } from '../modals/modalTools'; + import ChooseColorModal from '../modals/ChooseColorModal.svelte'; + import { currentThemeDefinition } from '../stores'; export let value; export let onChange; @@ -371,6 +374,26 @@ arrange(true, false, rect ? { x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2 } : null); }; + const handleChangeTableColor = table => { + showModal(ChooseColorModal, { + onChange: color => { + callChange(current => { + return { + ...current, + tables: (current?.tables || []).map(table => + table.isSelectedTable + ? { + ...table, + tableColor: color, + } + : table + ), + }; + }); + }, + }); + }; + const performAutoActions = async db => { if (!db) return; @@ -663,6 +686,8 @@ filePath, html: domCanvas.outerHTML, css, + themeType: $currentThemeDefinition?.themeType, + themeClassName: $currentThemeDefinition?.className, }); }); } @@ -723,6 +748,7 @@ onChangeColumn={handleChangeColumn} onAddReferenceByColumn={handleAddReferenceByColumn} onAddAllReferences={handleAddTableReferences} + onChangeTableColor={handleChangeTableColor} onMoveReferences={recomputeReferencePositions} {table} onChangeTable={changeTable} diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte index 7fc5a1f6a..38e8264ed 100644 --- a/packages/web/src/designer/DesignerTable.svelte +++ b/packages/web/src/designer/DesignerTable.svelte @@ -1,13 +1,15 @@ @@ -169,6 +181,7 @@ import { rectanglesHaveIntersection } from './designerMath'; class:isView={objectTypeField == 'views'} use:moveDrag={settings?.canSelectColumns ? [handleMoveStart, handleMove, handleMoveEnd] : null} use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'} + style={getTableColorStyle($currentThemeDefinition, table)} >
{alias || pureName}
{#if settings?.showTableCloseButton} diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte index 2754ad61b..965974824 100644 --- a/packages/web/src/designer/DiagramDesigner.svelte +++ b/packages/web/src/designer/DiagramDesigner.svelte @@ -18,6 +18,7 @@ canExport: true, canSelectColumns: false, canSelectTables: true, + allowChangeColor: true, }} referenceComponent={DiagramDesignerReference} /> diff --git a/packages/web/src/designer/DiagramDesignerReference.svelte b/packages/web/src/designer/DiagramDesignerReference.svelte index 982ccfc57..e7f599b2a 100644 --- a/packages/web/src/designer/DiagramDesignerReference.svelte +++ b/packages/web/src/designer/DiagramDesignerReference.svelte @@ -91,4 +91,8 @@ stroke: var(--theme-bg-4); stroke-width: 2; } + + polygon { + fill: var(--theme-bg-4); + } diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte index 9c7898e9a..970f9134c 100644 --- a/packages/web/src/designer/QueryDesigner.svelte +++ b/packages/web/src/designer/QueryDesigner.svelte @@ -18,6 +18,7 @@ canExport: false, canSelectColumns: true, canSelectTables: false, + allowChangeColor: false, }} referenceComponent={QueryDesignerReference} /> diff --git a/packages/web/src/modals/ChooseColorModal.svelte b/packages/web/src/modals/ChooseColorModal.svelte new file mode 100644 index 000000000..72249acd0 --- /dev/null +++ b/packages/web/src/modals/ChooseColorModal.svelte @@ -0,0 +1,27 @@ + + + + {header} + +
+ {text} +
+ + { + value = e.detail; + onChange(value); + }} + /> + From a0d7ade863fa44a635098465a96658f8cd4f122e Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Thu, 20 Jan 2022 14:34:04 +0100 Subject: [PATCH 41/55] table system menu callable from designer --- .../src/appobj/DatabaseObjectAppObject.svelte | 80 ++++++++++--------- packages/web/src/designer/Designer.svelte | 2 + .../web/src/designer/DesignerTable.svelte | 4 + .../web/src/designer/DiagramDesigner.svelte | 1 + .../designer/DiagramDesignerReference.svelte | 2 +- .../web/src/designer/QueryDesigner.svelte | 1 + 6 files changed, 51 insertions(+), 39 deletions(-) diff --git a/packages/web/src/appobj/DatabaseObjectAppObject.svelte b/packages/web/src/appobj/DatabaseObjectAppObject.svelte index 46bdbf483..ff2e36532 100644 --- a/packages/web/src/appobj/DatabaseObjectAppObject.svelte +++ b/packages/web/src/appobj/DatabaseObjectAppObject.svelte @@ -392,45 +392,15 @@ a.schemaName == b.schemaName ); } - - + + diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index 1fbf52fac..15311c3f6 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -751,6 +751,8 @@ onChangeTableColor={handleChangeTableColor} onMoveReferences={recomputeReferencePositions} {table} + {conid} + {database} onChangeTable={changeTable} onBringToFront={bringToFront} onSelectTable={selectTable} diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte index 38e8264ed..2b698b43a 100644 --- a/packages/web/src/designer/DesignerTable.svelte +++ b/packages/web/src/designer/DesignerTable.svelte @@ -2,6 +2,7 @@ import { presetDarkPalettes, presetPalettes } from '@ant-design/colors'; import { tick } from 'svelte'; + import { createDatabaseObjectMenu } from '../appobj/DatabaseObjectAppObject.svelte'; import FontIcon from '../icons/FontIcon.svelte'; import InputTextModal from '../modals/InputTextModal.svelte'; @@ -12,6 +13,8 @@ import ColumnLine from './ColumnLine.svelte'; import DomTableRef from './DomTableRef'; + export let conid; + export let database; export let table; export let onChangeTable; export let onBringToFront; @@ -153,6 +156,7 @@ ], settings?.allowAddAllReferences && { text: 'Add references', onClick: () => onAddAllReferences(table) }, settings?.allowChangeColor && { text: 'Change color', onClick: () => onChangeTableColor(table) }, + settings?.appendTableSystemMenu && [{ divider: true }, createDatabaseObjectMenu({ ...table, conid, database })], ]; } diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte index 965974824..81a411c41 100644 --- a/packages/web/src/designer/DiagramDesigner.svelte +++ b/packages/web/src/designer/DiagramDesigner.svelte @@ -19,6 +19,7 @@ canSelectColumns: false, canSelectTables: true, allowChangeColor: true, + appendTableSystemMenu: true, }} referenceComponent={DiagramDesignerReference} /> diff --git a/packages/web/src/designer/DiagramDesignerReference.svelte b/packages/web/src/designer/DiagramDesignerReference.svelte index e7f599b2a..d9da23817 100644 --- a/packages/web/src/designer/DiagramDesignerReference.svelte +++ b/packages/web/src/designer/DiagramDesignerReference.svelte @@ -93,6 +93,6 @@ } polygon { - fill: var(--theme-bg-4); + fill: var(--theme-font-1); } diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte index 970f9134c..612cbe897 100644 --- a/packages/web/src/designer/QueryDesigner.svelte +++ b/packages/web/src/designer/QueryDesigner.svelte @@ -19,6 +19,7 @@ canSelectColumns: true, canSelectTables: false, allowChangeColor: false, + appendTableSystemMenu: false, }} referenceComponent={QueryDesignerReference} /> From 53441d3e6208b9f604f4356b70505cc5db540812 Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Thu, 20 Jan 2022 14:43:19 +0100 Subject: [PATCH 42/55] diagram ctx menu improved --- packages/web/src/designer/Designer.svelte | 27 ++++++++++++----- .../web/src/designer/DesignerTable.svelte | 30 +++++++++++-------- 2 files changed, 36 insertions(+), 21 deletions(-) diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index 15311c3f6..cbe0a9b2b 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -71,6 +71,8 @@ $: tables = value?.tables as any[]; $: references = value?.references as any[]; + $: isMultipleTableSelection = tables.filter(x => x.isSelectedTable).length >= 2; + const tableRefs = {}; const referenceRefs = {}; $: domTables = _.pickBy(_.mapValues(tableRefs, (tbl: any) => tbl?.getDomTable())); @@ -205,14 +207,22 @@ }; const removeTable = table => { - callChange(current => ({ - ...current, - tables: (current.tables || []).filter(x => x.designerId != table.designerId), - references: (current.references || []).filter( - x => x.sourceId != table.designerId && x.targetId != table.designerId - ), - columns: (current.columns || []).filter(x => x.designerId != table.designerId), - })); + if (isMultipleTableSelection && settings?.useDatabaseReferences && settings?.canSelectTables) { + callChange(current => ({ + ...current, + tables: (current.tables || []).filter(x => !x.isSelectedTable), + })); + updateFromDbInfo(); + } else { + callChange(current => ({ + ...current, + tables: (current.tables || []).filter(x => x.designerId != table.designerId), + references: (current.references || []).filter( + x => x.sourceId != table.designerId && x.targetId != table.designerId + ), + columns: (current.columns || []).filter(x => x.designerId != table.designerId), + })); + } }; const changeReference = ref => { @@ -753,6 +763,7 @@ {table} {conid} {database} + {isMultipleTableSelection} onChangeTable={changeTable} onBringToFront={bringToFront} onSelectTable={selectTable} diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte index 2b698b43a..70faa6ea8 100644 --- a/packages/web/src/designer/DesignerTable.svelte +++ b/packages/web/src/designer/DesignerTable.svelte @@ -26,6 +26,7 @@ export let onSelectColumn; export let onChangeColumn; export let onChangeTableColor; + export let isMultipleTableSelection; export let onMoveStart; export let onMove; @@ -143,20 +144,23 @@ return [ { text: 'Remove', onClick: () => onRemoveTable({ designerId }) }, { divider: true }, - settings?.allowTableAlias && [ - { text: 'Set table alias', onClick: handleSetTableAlias }, - alias && { - text: 'Remove table alias', - onClick: () => - onChangeTable({ - ...table, - alias: null, - }), - }, - ], - settings?.allowAddAllReferences && { text: 'Add references', onClick: () => onAddAllReferences(table) }, + settings?.allowTableAlias && + !isMultipleTableSelection && [ + { text: 'Set table alias', onClick: handleSetTableAlias }, + alias && { + text: 'Remove table alias', + onClick: () => + onChangeTable({ + ...table, + alias: null, + }), + }, + ], + settings?.allowAddAllReferences && + !isMultipleTableSelection && { text: 'Add references', onClick: () => onAddAllReferences(table) }, settings?.allowChangeColor && { text: 'Change color', onClick: () => onChangeTableColor(table) }, - settings?.appendTableSystemMenu && [{ divider: true }, createDatabaseObjectMenu({ ...table, conid, database })], + settings?.appendTableSystemMenu && + !isMultipleTableSelection && [{ divider: true }, createDatabaseObjectMenu({ ...table, conid, database })], ]; } From 8ad8d3f8cdc73dda17d976cc32cafc49354dc4eb Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Thu, 20 Jan 2022 15:03:30 +0100 Subject: [PATCH 43/55] feat(diagram): show data type and nullability --- packages/web/src/designer/ColumnLine.svelte | 20 +++++++++++ packages/web/src/designer/Designer.svelte | 36 ++++++++++++++++++- .../web/src/designer/DiagramDesigner.svelte | 1 + .../web/src/designer/QueryDesigner.svelte | 1 + 4 files changed, 57 insertions(+), 1 deletion(-) diff --git a/packages/web/src/designer/ColumnLine.svelte b/packages/web/src/designer/ColumnLine.svelte index 11d86fc90..a722a358c 100644 --- a/packages/web/src/designer/ColumnLine.svelte +++ b/packages/web/src/designer/ColumnLine.svelte @@ -137,6 +137,20 @@ {#if designerColumn?.isGrouped} {/if} + + {#if designer?.style?.showNullability || designer?.style?.showDataType} +
+ {#if designer?.style?.showDataType && column?.dataType} +
+ {column?.dataType.toLowerCase()} +
+ {/if} + {#if designer?.style?.showNullability} +
+ {column?.notNull ? 'NOT NULL' : 'NULL'} +
+ {/if} + {/if}
diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index cbe0a9b2b..535a47f9c 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -701,9 +701,43 @@ }); }); } + + const changeStyleFunc = (name, value) => () => { + callChange(current => { + return { + ...current, + style: { + ...current?.style, + [name]: value, + }, + }; + }); + }; + + function createMenu() { + return [ + menu, + settings?.chooseColumnProperties && [ + { divider: true }, + { + text: 'Column properties', + submenu: [ + { + text: `Nullability: ${value?.style?.showNullability ? 'YES' : 'NO'}`, + onClick: changeStyleFunc('showNullability', !value?.style?.showNullability), + }, + { + text: `Data type: ${value?.style?.showDataType ? 'YES' : 'NO'}`, + onClick: changeStyleFunc('showDataType', !value?.style?.showDataType), + }, + ], + }, + ], + ]; + } -
+
{#if !(tables?.length > 0)}
Drag & drop tables or views from left panel here
{/if} diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte index 81a411c41..bcc8d8bf7 100644 --- a/packages/web/src/designer/DiagramDesigner.svelte +++ b/packages/web/src/designer/DiagramDesigner.svelte @@ -20,6 +20,7 @@ canSelectTables: true, allowChangeColor: true, appendTableSystemMenu: true, + chooseColumnProperties: true, }} referenceComponent={DiagramDesignerReference} /> diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte index 612cbe897..a38b631c7 100644 --- a/packages/web/src/designer/QueryDesigner.svelte +++ b/packages/web/src/designer/QueryDesigner.svelte @@ -20,6 +20,7 @@ canSelectTables: false, allowChangeColor: false, appendTableSystemMenu: false, + chooseColumnProperties: false, }} referenceComponent={QueryDesignerReference} /> From 5eed81cf9f17c7b84f923cecf7428d925283a90f Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Thu, 20 Jan 2022 15:15:49 +0100 Subject: [PATCH 44/55] feat(diagram): filter columns --- packages/web/src/designer/Designer.svelte | 26 ++++++++++++++++++ .../web/src/designer/DesignerTable.svelte | 27 ++++++++++++++++++- 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index 535a47f9c..131360d72 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -732,6 +732,32 @@ }, ], }, + { + text: `Columns - ${_.startCase(value?.style?.filterColumns || 'all')}`, + submenu: [ + { + text: 'All', + onClick: changeStyleFunc('filterColumns', null), + }, + { + text: 'Primary Key', + onClick: changeStyleFunc('filterColumns', 'primaryKey'), + }, + { + text: 'All Keys', + onClick: changeStyleFunc('filterColumns', 'allKeys'), + }, + { + text: 'Not Null', + onClick: changeStyleFunc('filterColumns', 'notNull'), + }, + { + text: 'Keys And Not Null', + onClick: changeStyleFunc('filterColumns', 'keysAndNotNull'), + }, + + ], + }, ], ]; } diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte index 70faa6ea8..484d04073 100644 --- a/packages/web/src/designer/DesignerTable.svelte +++ b/packages/web/src/designer/DesignerTable.svelte @@ -1,5 +1,6 @@