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

export diagram to HTML

Browse Source
This commit is contained in:
Jan Prochazka
2022-01-16 19:18:28 +01:00
parent 5752eaa2b4
commit 7f750077dd
6 changed files with 66 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@ const getChartExport = require('../utility/getChartExport');
const hasPermission = require('../utility/hasPermission'); const hasPermission = require('../utility/hasPermission');
const socket = require('../utility/socket'); const socket = require('../utility/socket');
const scheduler = require('./scheduler'); const scheduler = require('./scheduler');
const getDiagramExport = require('../utility/getDiagramExport');
function serialize(format, data) { function serialize(format, data) {
if (format == 'text') return data; if (format == 'text') return data;
@@ -152,4 +153,10 @@ module.exports = {
} }
return true; return true;
}, },
exportDiagram_meta: true,
async exportDiagram({ filePath, html, css }) {
await fs.writeFile(filePath, getDiagramExport(html, css));
return true;
},
}; };

21
packages/api/src/utility/getDiagramExport.js Normal file
View File

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

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

@@ -11,6 +11,18 @@
testEnabled: () => getCurrentEditor()?.canArrange(), testEnabled: () => getCurrentEditor()?.canArrange(),
onClick: () => getCurrentEditor().arrange(), 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(),
});
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -27,6 +39,8 @@
import registerCommand from '../commands/registerCommand'; import registerCommand from '../commands/registerCommand';
import createActivator, { getActiveComponent } from '../utility/createActivator'; import createActivator, { getActiveComponent } from '../utility/createActivator';
import { GraphDefinition, GraphLayout } from './GraphLayout'; import { GraphDefinition, GraphLayout } from './GraphLayout';
import { saveFileToDisk } from '../utility/exportElectronFile';
import { apiCall } from '../utility/api';
export let value; export let value;
export let onChange; export let onChange;
@@ -469,6 +483,10 @@
return settings?.canArrange; return settings?.canArrange;
} }
export function canExport() {
return settings?.canExport;
}
export function arrange(skipUndoChain = false, arrangeAll = true, circleMiddle = { x: 0, y: 0 }) { export function arrange(skipUndoChain = false, arrangeAll = true, circleMiddle = { x: 0, y: 0 }) {
const graph = new GraphDefinition(); const graph = new GraphDefinition();
for (const table of value?.tables || []) { for (const table of value?.tables || []) {
@@ -512,49 +530,24 @@
}), }),
}; };
}, skipUndoChain); }, skipUndoChain);
}
// const graph = new SpringyGraph(); export async function exportDiagram() {
// const nodes = {}; const cssLinks = ['global.css', 'build/bundle.css'];
// for (const table of value?.tables || []) { let css = '';
// const domTable = domTables[table.designerId] as any; for (const link of cssLinks) {
// if (!domTable) continue; const cssResp = await fetch(link);
// const rect = domTable.getRect(); const cssItem = await cssResp.text();
// const node = graph.newNode({ designerId: table.designerId }); if (css) css += '\n';
// nodes[table.designerId] = node; css += cssItem;
// node.width = rect.right - rect.left; }
// node.height = rect.bottom - rect.top; saveFileToDisk(async filePath => {
// node.initX = (rect.right + rect.left) / 2; await apiCall('files/export-diagram', {
// node.initY = (rect.bottom + rect.top) / 2; filePath,
// // console.log('RECT', rect); html: domCanvas.outerHTML,
// } css,
});
// for (const reference of value?.references) { });
// const source = nodes[reference.sourceId];
// const target = nodes[reference.targetId];
// if (source && target) {
// graph.newEdge(source, target);
// }
// }
// const alg = new ForceDirectedLayout(graph);
// const positions = alg.compute();
// callChange(current => {
// return {
// ...current,
// tables: (current?.tables || []).map(table => {
// const position = positions.find(x => x.nodeData?.designerId == table.designerId);
// // console.log('POSITION', position);
// return position
// ? {
// ...table,
// left: position.x - position.nodeWidth / 2,
// top: position.y - position.nodeHeight / 2,
// }
// : table;
// }),
// };
// }, skipUndoChain);
} }
</script> </script>

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

@@ -15,6 +15,7 @@
allowScrollColumns: false, allowScrollColumns: false,
allowAddAllReferences: true, allowAddAllReferences: true,
canArrange: true, canArrange: true,
canExport: true,
}} }}
referenceComponent={DiagramDesignerReference} referenceComponent={DiagramDesignerReference}
/> />

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

@@ -15,6 +15,7 @@
allowScrollColumns: true, allowScrollColumns: true,
allowAddAllReferences: false, allowAddAllReferences: false,
canArrange: false, canArrange: false,
canExport: false,
}} }}
referenceComponent={QueryDesignerReference} referenceComponent={QueryDesignerReference}
/> />

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

@@ -82,6 +82,7 @@
{ command: 'diagram.save' }, { command: 'diagram.save' },
{ command: 'diagram.saveAs' }, { command: 'diagram.saveAs' },
{ command: 'designer.arrange' }, { command: 'designer.arrange' },
{ command: 'diagram.export' },
{ divider: true }, { divider: true },
{ command: 'diagram.undo' }, { command: 'diagram.undo' },
{ command: 'diagram.redo' }, { command: 'diagram.redo' },