Skip to content

Commit 4de5087

Browse files
mig8447mig8447
authored
Merge pull request #9 from zahariev-oracle/main
Fixed diagram generator example and updated readme erd assets
2 parents 6956db8 + c3a9aae commit 4de5087

File tree

8 files changed

+49
-41
lines changed

8 files changed

+49
-41
lines changed

‎README.md‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -191,8 +191,8 @@ You need to add the following dependencies to your HTML:
191191
<meta name="viewport" content="width=device-width, initial-scale=1.0">
192192
<title>Quick ERD</title>
193193
194-
<!-- Assuming you put the rappid.css file in this path -->
195-
<link rel="stylesheet" type="text/css" href="./examples/diagram-generator/libs/rappid.css">
194+
<!-- Assuming you put the rappid.min.css file in this path -->
195+
<link rel="stylesheet" type="text/css" href="./examples/diagram-generator/libs/rappid.min.css">
196196
<link rel="stylesheet" href="./dist/quick-erd.css">
197197
198198
<style>
@@ -221,23 +221,25 @@ You need to add the following dependencies to your HTML:
221221
import { Diagram } from './dist/quick-erd.js';
222222
223223
new Diagram( toERD(
224-
`departments /insert 2
224+
`
225+
departments
225226
name /nn
226227
location
227228
country
228-
employees /insert 4
229-
name /nn vc50
230-
email /lower
231-
cost center num
232-
date hired
233-
job vc255
229+
employees
230+
departments_id /fk departments
231+
name /nn vc50
232+
email /lower
233+
cost center num
234+
date hired
235+
job vc255
234236
235237
view emp_v departments employees
236238
237239
# settings = { "prefix": null, "semantics": "CHAR", "DV": false }
238240
239241
`
240-
), document.getElementById( 'quickERD' ) );
242+
), '#quickERD' );
241243
</script>
242244
</body>
243245
</html>
@@ -255,8 +257,8 @@ view emp_v departments employees
255257
<meta name="viewport" content="width=device-width, initial-scale=1.0">
256258
<title>Quick ERD</title>
257259

258-
<!-- Assuming you put the rappid.css file in this path -->
259-
<link rel="stylesheet" type="text/css" href="./examples/diagram-generator/libs/rappid.css">
260+
<!-- Assuming you put the rappid.min.css file in this path -->
261+
<link rel="stylesheet" type="text/css" href="./examples/diagram-generator/libs/rappid.min.css">
260262
<link rel="stylesheet" href="./dist/quick-erd.css">
261263

262264
<style>
@@ -285,23 +287,25 @@ view emp_v departments employees
285287

286288
<script>
287289
new quickERD.Diagram( quickSQL.toERD(
288-
`departments /insert 2
290+
`
291+
departments
289292
name /nn
290293
location
291294
country
292-
employees /insert 4
293-
name /nn vc50
294-
email /lower
295-
cost center num
296-
date hired
297-
job vc255
295+
employees
296+
departments_id /fk departments
297+
name /nn vc50
298+
email /lower
299+
cost center num
300+
date hired
301+
job vc255
298302
299303
view emp_v departments employees
300304
301305
# settings = { "prefix": null, "semantics": "CHAR", "DV": false }
302306
303307
`
304-
), document.getElementById( 'quickERD' ) );
308+
), '#quickERD' );
305309
</script>
306310
</body>
307311
</html>

‎assets/quick-erd-dark-example.png‎

13 KB
Loading

‎assets/quick-erd-dark.png‎

-5.66 KB
Loading

‎assets/quick-erd-example.png‎

43.4 KB
Loading

‎assets/quick-erd-light-example.png‎

14.4 KB
Loading

‎assets/quick-erd-light.png‎

-31.3 KB
Loading

‎examples/diagram-generator/index.html‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>QuickERD</title>
77

8-
<link rel="stylesheet" type="text/css" href="libs/rappid.css">
8+
<!-- Assuming you put the rappid.min.css file in this path -->
9+
<link rel="stylesheet" type="text/css" href="libs/rappid.min.css">
910

1011
<link rel="stylesheet" href="../../dist/quick-erd.css">
1112

1213
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
1314
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" integrity="sha256-qXBd/EfAdjOA2FGrGAG+b3YBn2tn5A6bhz+LSgYD96k=" crossorigin="anonymous"></script>
1415
<script src="https://cdn.jsdelivr.net/npm/backbone@1.5.0/backbone-min.min.js"></script>
1516

16-
<script src="libs/rappid.min.js"></script>
17+
<!-- Assuming you put the rappid.min.js file in this path -->
1718
<script src="libs/rappid.min.js"></script>
1819

1920
<!-- <script src="../../dist/quick-erd.umd.cjs"></script>
@@ -61,7 +62,7 @@
6162
</style>
6263
</head>
6364
<body>
64-
<div class="container">
65+
<div class="container" style="padding: 20px;">
6566
<div id="sql">
6667
<pre></pre>
6768
</div>
@@ -73,24 +74,27 @@
7374
import { Diagram } from '../../dist/quick-erd.js';
7475

7576
const input =
76-
`departments /insert 2
77-
name /nn
78-
location
79-
country
80-
employees /insert 4
81-
name /nn vc50
82-
email /lower
83-
cost center num
84-
date hired
85-
job vc255
77+
`
78+
departments
79+
name /nn
80+
location
81+
country
82+
employees
83+
departments_id /fk departments
84+
name /nn vc50
85+
email /lower
86+
cost center num
87+
date hired
88+
job vc255
8689
8790
view emp_v departments employees
8891
8992
# settings = { "prefix": null, "semantics": "CHAR", "DV": false }
9093
`
9194
// new quickERD.Diagram( quickSQL.toERD( input ), document.getElementById( 'quickERD' ) );
92-
new Diagram( toERD( input, document.getElementById( 'quickERD' ) ) );
9395

96+
new Diagram( toERD(input), '#quickERD' );
97+
9498
document.querySelector( '#sql > pre' ).innerText = input;
9599
</script>
96100
</body>

‎src/quick-erd/utils.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33

44
var utils = {};
55

6+
const FONT_NAME = getComputedStyle(document.querySelector(':root')).getPropertyValue('--qs-diagram-font-family') || 'Arial';
7+
68
utils.newGuid = function () {
79
function _s8(s) {
810
var p = (Math.random().toString(16) + '000000000').substr(2, 8);
@@ -16,17 +18,15 @@ utils.calcWidth = function (schema, name, columns) {
1618
if (schema) {
1719
objName = schema.concat('.').concat(name);
1820
}
19-
var nameWidth = utils.getTextWidth(objName, '12pt Arial');
20-
var colWidth = 60;
21+
var nameWidth = utils.getTextWidth(objName, `12pt ${FONT_NAME}`);
22+
var colWidth = 0;
2123
var dtWidth = 0;
22-
var indexWidth = 0;
2324
for (var i = 0; i < columns.length; i++) {
24-
colWidth = Math.max(colWidth, utils.getTextWidth(columns[i].name, '10pt Arial'));
25-
dtWidth = Math.max(dtWidth, utils.getTextWidth(columns[i].datatype, '10pt Arial'));
25+
colWidth = Math.max(colWidth, utils.getTextWidth(columns[i].name, `10pt ${FONT_NAME}`));
26+
dtWidth = Math.max(dtWidth, utils.getTextWidth(columns[i].datatype, `10pt ${FONT_NAME}`));
2627
}
2728

28-
const bonus = 40; // colWidth > 100 ? 15 : 40;
29-
const cdtWidth = colWidth + bonus + dtWidth;
29+
const cdtWidth = (dtWidth > colWidth) ? (dtWidth * 2) : colWidth + dtWidth + 20;
3030
let width = Math.max(nameWidth, cdtWidth);
3131
return width;
3232
};

0 commit comments

Comments
 (0)