dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-05-01 12:03:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

diagram color, export follows current theme

Browse Source
This commit is contained in:
Jan Prochazka
2022-01-20 14:08:43 +01:00
parent c0891af5c3
commit 5be368bbf3
8 changed files with 86 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/api/src/controllers/files.js
View File

@@ -155,8 +155,8 @@ module.exports = {
}, },
exportDiagram_meta: true, exportDiagram_meta: true,
async exportDiagram({ filePath, html, css }) { async exportDiagram({ filePath, html, css, themeType, themeClassName }) {
await fs.writeFile(filePath, getDiagramExport(html, css)); await fs.writeFile(filePath, getDiagramExport(html, css, themeType, themeClassName));
return true; return true;
}, },
}; };

18
packages/api/src/utility/getDiagramExport.js
View File

@@ -1,21 +1,25 @@
const getDiagramExport = (html,css) => { const getDiagramExport = (html, css, themeType, themeClassName) => {
return `<html> return `<html>
<meta charset='utf-8'> <meta charset='utf-8'>
<head> <head>
<style> <style>
${css} ${css}
body {
background: var(--theme-bg-1);
color: var(--theme-font-1);
}
</style> </style>
<link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.css' /> <link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.css' />
</head> </head>
<body class='theme-light'> <body class='${themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light'} ${themeClassName}'>
${html} ${html}
</body> </body>
</html>`; </html>`;
}; };
module.exports = getDiagramExport; module.exports = getDiagramExport;

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

@@ -43,6 +43,9 @@
import { apiCall } from '../utility/api'; import { apiCall } from '../utility/api';
import moveDrag from '../utility/moveDrag'; import moveDrag from '../utility/moveDrag';
import { rectanglesHaveIntersection } from './designerMath'; import { rectanglesHaveIntersection } from './designerMath';
import { showModal } from '../modals/modalTools';
import ChooseColorModal from '../modals/ChooseColorModal.svelte';
import { currentThemeDefinition } from '../stores';
export let value; export let value;
export let onChange; export let onChange;
@@ -371,6 +374,26 @@
arrange(true, false, rect ? { x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2 } : null); 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 => { const performAutoActions = async db => {
if (!db) return; if (!db) return;
@@ -663,6 +686,8 @@
filePath, filePath,
html: domCanvas.outerHTML, html: domCanvas.outerHTML,
css, css,
themeType: $currentThemeDefinition?.themeType,
themeClassName: $currentThemeDefinition?.className,
}); });
}); });
} }
@@ -723,6 +748,7 @@
onChangeColumn={handleChangeColumn} onChangeColumn={handleChangeColumn}
onAddReferenceByColumn={handleAddReferenceByColumn} onAddReferenceByColumn={handleAddReferenceByColumn}
onAddAllReferences={handleAddTableReferences} onAddAllReferences={handleAddTableReferences}
onChangeTableColor={handleChangeTableColor}
onMoveReferences={recomputeReferencePositions} onMoveReferences={recomputeReferencePositions}
{table} {table}
onChangeTable={changeTable} onChangeTable={changeTable}

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

@@ -1,13 +1,15 @@
<script lang="ts"> <script lang="ts">
import { presetDarkPalettes, presetPalettes } from '@ant-design/colors';
import { tick } from 'svelte'; import { tick } from 'svelte';
import FontIcon from '../icons/FontIcon.svelte'; import FontIcon from '../icons/FontIcon.svelte';
import InputTextModal from '../modals/InputTextModal.svelte'; import InputTextModal from '../modals/InputTextModal.svelte';
import { showModal } from '../modals/modalTools'; import { showModal } from '../modals/modalTools';
import { currentThemeDefinition } from '../stores';
import contextMenu from '../utility/contextMenu'; import contextMenu from '../utility/contextMenu';
import moveDrag from '../utility/moveDrag'; import moveDrag from '../utility/moveDrag';
import ColumnLine from './ColumnLine.svelte'; import ColumnLine from './ColumnLine.svelte';
import { rectanglesHaveIntersection } from './designerMath';
import DomTableRef from './DomTableRef'; import DomTableRef from './DomTableRef';
export let table; export let table;
@@ -20,6 +22,7 @@ import { rectanglesHaveIntersection } from './designerMath';
export let onAddReferenceByColumn; export let onAddReferenceByColumn;
export let onSelectColumn; export let onSelectColumn;
export let onChangeColumn; export let onChangeColumn;
export let onChangeTableColor;
export let onMoveStart; export let onMoveStart;
export let onMove; export let onMove;
@@ -105,6 +108,14 @@ import { rectanglesHaveIntersection } from './designerMath';
} }
} }
function getTableColorStyle(themeDef, table, colorIndex = 3) {
if (!table?.tableColor) return null;
const palettes = themeDef?.themeType == 'dark' ? presetDarkPalettes : presetPalettes;
const palette = palettes[table?.tableColor];
if (!palette) return null;
return `background: ${palette[colorIndex]}`;
}
export function getDomTable() { export function getDomTable() {
const domRefs = { ...columnRefs }; const domRefs = { ...columnRefs };
domRefs[''] = domWrapper; domRefs[''] = domWrapper;
@@ -141,6 +152,7 @@ import { rectanglesHaveIntersection } from './designerMath';
}, },
], ],
settings?.allowAddAllReferences && { text: 'Add references', onClick: () => onAddAllReferences(table) }, settings?.allowAddAllReferences && { text: 'Add references', onClick: () => onAddAllReferences(table) },
settings?.allowChangeColor && { text: 'Change color', onClick: () => onChangeTableColor(table) },
]; ];
} }
</script> </script>
@@ -169,6 +181,7 @@ import { rectanglesHaveIntersection } from './designerMath';
class:isView={objectTypeField == 'views'} class:isView={objectTypeField == 'views'}
use:moveDrag={settings?.canSelectColumns ? [handleMoveStart, handleMove, handleMoveEnd] : null} use:moveDrag={settings?.canSelectColumns ? [handleMoveStart, handleMove, handleMoveEnd] : null}
use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'} use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'}
style={getTableColorStyle($currentThemeDefinition, table)}
> >
<div>{alias || pureName}</div> <div>{alias || pureName}</div>
{#if settings?.showTableCloseButton} {#if settings?.showTableCloseButton}

1
packages/web/src/designer/DiagramDesigner.svelte
View File

@@ -18,6 +18,7 @@
canExport: true, canExport: true,
canSelectColumns: false, canSelectColumns: false,
canSelectTables: true, canSelectTables: true,
allowChangeColor: true,
}} }}
referenceComponent={DiagramDesignerReference} referenceComponent={DiagramDesignerReference}
/> />

4
packages/web/src/designer/DiagramDesignerReference.svelte
View File

@@ -91,4 +91,8 @@
stroke: var(--theme-bg-4); stroke: var(--theme-bg-4);
stroke-width: 2; stroke-width: 2;
} }
polygon {
fill: var(--theme-bg-4);
}
</style> </style>

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

@@ -18,6 +18,7 @@
canExport: false, canExport: false,
canSelectColumns: true, canSelectColumns: true,
canSelectTables: false, canSelectTables: false,
allowChangeColor: false,
}} }}
referenceComponent={QueryDesignerReference} referenceComponent={QueryDesignerReference}
/> />

27
packages/web/src/modals/ChooseColorModal.svelte Normal file
View File

@@ -0,0 +1,27 @@
<script lang="ts">
import ColorSelector from '../forms/ColorSelector.svelte';
import ModalBase from './ModalBase.svelte';
export let color;
export let header;
export let text;
export let onChange;
$: value = color;
</script>
<ModalBase {...$$restProps}>
<svelte:fragment slot="header">{header}</svelte:fragment>
<div class="m-2">
{text}
</div>
<ColorSelector
{value}
on:change={e => {
value = e.detail;
onChange(value);
}}
/>
</ModalBase>