Skip to content

Commit c78ce6d

Browse files
badsyntaxbadsyntax
committed
Fix er diagram title & export svg feature
1 parent a6830f2 commit c78ce6d

File tree

6 files changed

+74
-26
lines changed

6 files changed

+74
-26
lines changed

‎src/util/ERDiagramWebViewProvider.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ function getWebviewContent(
122122
<script>
123123
window['mermaidContent'] = \`${mermaidContent}\`;
124124
window['mermaidTheme'] = '${mermaidTheme}';
125+
window['erDiagramTitle'] = '${dbContext} Entity Relationships';
125126
</script>
126127
<div id="root"></div>
127128
<script type="module" src="${scriptUri}"></script>

‎webview-ui/.eslintrc.json‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
{
2-
"extends": ["plugin:prettier/recommended"],
2+
"extends": ["plugin:react/recommended", "plugin:prettier/recommended"],
33
"root": true,
44
"parser": "@typescript-eslint/parser",
55
"parserOptions": {
66
"ecmaVersion": 6,
77
"sourceType": "module",
88
"project": "./tsconfig.json"
99
},
10+
"settings": {
11+
"react": {
12+
"version": "detect"
13+
}
14+
},
1015
"plugins": ["@typescript-eslint"],
1116
"rules": {
12-
"@typescript-eslint/naming-convention": "warn",
1317
"@typescript-eslint/semi": "warn",
1418
"@typescript-eslint/consistent-type-imports": "error",
1519
"@typescript-eslint/no-unused-vars": [
@@ -20,7 +24,9 @@
2024
"curly": "warn",
2125
"eqeqeq": "warn",
2226
"no-throw-literal": "warn",
23-
"semi": "off"
27+
"semi": "off",
28+
"no-var": "error",
29+
"prefer-const": "error"
2430
},
2531
"ignorePatterns": ["vite.config.ts", "build"]
2632
}

‎webview-ui/index.html‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,25 @@
77
</head>
88
<body>
99
<script>
10-
window['mermaidContent'] = ``;
10+
window['mermaidContent'] = `erDiagram
11+
CUSTOMER ||--o{ ORDER : places
12+
CUSTOMER {
13+
string name
14+
string custNumber
15+
string sector
16+
}
17+
ORDER ||--|{ LINE-ITEM : contains
18+
ORDER {
19+
int orderNumber
20+
string deliveryAddress
21+
}
22+
LINE-ITEM {
23+
string productCode
24+
int quantity
25+
float pricePerUnit
26+
}`;
1127
window['mermaidTheme'] = 'dark';
28+
window['erDiagramTitle'] = 'Example Title';
1229
</script>
1330
<div id="root"></div>
1431
<script type="module" src="/src/main.tsx"></script>

‎webview-ui/src/components/App/App.tsx‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { useRef, useState } from 'react';
1+
import React, { useRef, useState } from 'react';
22
import './App.css';
33

44
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
5-
import { Mermaid, MermaidAPI } from '../Mermaid/Mermaid';
5+
import type { MermaidAPI } from '../Mermaid/Mermaid';
6+
import { Mermaid } from '../Mermaid/Mermaid';
67
import { ZoomControls } from '../ZoomControls/ZoomControls';
78

8-
function App() {
9+
export function App() {
910
const mermaidApiRef = useRef<MermaidAPI>();
1011

1112
const handleZoomIn = () => {
@@ -20,13 +21,31 @@ function App() {
2021
mermaidApiRef.current?.reset();
2122
};
2223

24+
const handleExportSvg = () => {
25+
const vscode = acquireVsCodeApi();
26+
// @ts-ignore
27+
const svg = mermaidApiRef.current?.getSvg()?.node()?.outerHTML;
28+
if (svg) {
29+
vscode.postMessage({
30+
command: 'exportSvg',
31+
text: svg,
32+
});
33+
}
34+
};
35+
2336
return (
2437
<div className="App">
25-
<h1>BloggingContext Entity Relationships</h1>
38+
<h1>{(window as any).erDiagramTitle}</h1>
2639
<div>
27-
<VSCodeButton appearance={'primary'}>Export SVG</VSCodeButton>
40+
<VSCodeButton appearance={'primary'} onClick={handleExportSvg}>
41+
Export SVG
42+
</VSCodeButton>
2843
</div>
29-
<Mermaid chart={(window as any).mermaidContent} theme={(window as any).mermaidTheme} mermaidRef={mermaidApiRef} />
44+
<Mermaid
45+
chart={(window as any).mermaidContent}
46+
theme={(window as any).mermaidTheme}
47+
mermaidRef={mermaidApiRef}
48+
/>
3049
<ZoomControls
3150
onZoomIn={handleZoomIn}
3251
onReset={handleReset}
@@ -35,5 +54,3 @@ function App() {
3554
</div>
3655
);
3756
}
38-
39-
export default App;

‎webview-ui/src/components/Mermaid/Mermaid.tsx‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,40 @@ import mermaid from 'mermaid';
33
import * as d3 from 'd3';
44
import './Mermaid.css';
55

6-
7-
86
export type MermaidAPI = {
97
reset: () => void;
108
zoomIn: () => void;
119
zoomOut: () => void;
10+
getSvg: () =>
11+
| d3.Selection<d3.BaseType, unknown, HTMLElement, any>
12+
| undefined;
1213
};
1314

1415
export function Mermaid({
1516
chart,
1617
mermaidRef,
17-
theme
18+
theme,
1819
}: {
1920
chart: string;
2021
mermaidRef?: React.MutableRefObject<MermaidAPI | undefined>;
21-
theme: string
22+
theme: string;
2223
}) {
2324
const zoomRef = useRef<d3.ZoomBehavior<Element, unknown>>();
24-
const svgRef =
25-
useRef<d3.Selection<d3.BaseType, unknown, HTMLElement, any>>();
25+
const svgRef = useRef<d3.Selection<d3.BaseType, unknown, HTMLElement, any>>();
2626

2727
useEffect(() => {
2828
mermaid.initialize({
2929
startOnLoad: true,
3030
theme,
3131
});
3232
mermaid.contentLoaded();
33-
34-
var svg = d3.select('.mermaid svg');
33+
34+
const svg = d3.select('.mermaid svg');
35+
debugger;
3536
svg.html('<g>' + svg.html() + '</g>');
3637

37-
var inner = svg.select('g');
38-
var zoom = d3.zoom().on('zoom', function (event) {
38+
const inner = svg.select('g');
39+
const zoom = d3.zoom().on('zoom', function (event) {
3940
inner.attr('transform', event.transform);
4041
});
4142
// @ts-ignore
@@ -47,20 +48,26 @@ export function Mermaid({
4748

4849
useImperativeHandle(mermaidRef, () => ({
4950
reset() {
50-
svgRef.current?.transition()
51+
svgRef.current
52+
?.transition()
5153
// @ts-ignore
5254
.call(zoomRef.current.scaleTo, 1);
5355
},
5456
zoomIn() {
55-
svgRef.current?.transition()
57+
svgRef.current
58+
?.transition()
5659
// @ts-ignore
5760
.call(zoomRef.current.scaleBy, 2);
5861
},
5962
zoomOut() {
60-
svgRef.current?.transition()
63+
svgRef.current
64+
?.transition()
6165
// @ts-ignore
6266
.call(zoomRef.current.scaleBy, 0.5);
6367
},
68+
getSvg() {
69+
return svgRef.current;
70+
},
6471
}));
6572

6673
return (

‎webview-ui/src/main.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
3-
import App from './components/App/App';
3+
import { App } from './components/App/App';
44
import './index.css';
55

66
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

0 commit comments

Comments
 (0)