dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-26 08:45:59 +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 socket = require('../utility/socket');
const scheduler = require('./scheduler');
const getDiagramExport = require('../utility/getDiagramExport');
function serialize(format, data) {
if (format == 'text') return data;
@@ -152,4 +153,10 @@ module.exports = {
}
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(),
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 lang="ts">
@@ -27,6 +39,8 @@
import registerCommand from '../commands/registerCommand';
import createActivator, { getActiveComponent } from '../utility/createActivator';
import { GraphDefinition, GraphLayout } from './GraphLayout';
import { saveFileToDisk } from '../utility/exportElectronFile';
import { apiCall } from '../utility/api';
export let value;
export let onChange;
@@ -469,6 +483,10 @@
return settings?.canArrange;
}
export function canExport() {
return settings?.canExport;
}
export function arrange(skipUndoChain = false, arrangeAll = true, circleMiddle = { x: 0, y: 0 }) {
const graph = new GraphDefinition();
for (const table of value?.tables || []) {
@@ -512,49 +530,24 @@
}),
};
}, skipUndoChain);
}
// const graph = new SpringyGraph();
// const nodes = {};
// for (const table of value?.tables || []) {
// const domTable = domTables[table.designerId] as any;
// if (!domTable) continue;
// const rect = domTable.getRect();
// const node = graph.newNode({ designerId: table.designerId });
// nodes[table.designerId] = node;
// node.width = rect.right - rect.left;
// node.height = rect.bottom - rect.top;
// node.initX = (rect.right + rect.left) / 2;
// node.initY = (rect.bottom + rect.top) / 2;
// // console.log('RECT', rect);
// }
// 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);
export async function exportDiagram() {
const cssLinks = ['global.css', 'build/bundle.css'];
let css = '';
for (const link of cssLinks) {
const cssResp = await fetch(link);
const cssItem = await cssResp.text();
if (css) css += '\n';
css += cssItem;
}
saveFileToDisk(async filePath => {
await apiCall('files/export-diagram', {
filePath,
html: domCanvas.outerHTML,
css,
});
});
}
</script>

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

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

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

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

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

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