Skip to content

Commit ccf3abd

Browse files
ayeressianayeressian
committed
add dynamic view size
1 parent 3a2794a commit ccf3abd

14 files changed

+280
-147
lines changed

‎example/index.html

Lines changed: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,44 @@
11
<!DOCTYPE html>
22
<html>
3+
<head lang="en">
4+
<title>DB Viewer Component Example</title>
35

4-
<head lang="en">
5-
<title>DB Viewer Component Example</title>
6+
<meta charset="UTF-8" />
7+
<meta
8+
name="viewport"
9+
content="width=device-width, initial-scale=1, maximum-scale=1"
10+
/>
611

7-
<meta charset="UTF-8">
8-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
12+
<script src="../dist/main.js"></script>
13+
<script src="/example/script.js"></script>
14+
<style>
15+
db-viewer {
16+
padding-bottom: 20px;
17+
width: 800px;
18+
height: 600px;
19+
}
920

10-
<script src="../dist/main.js"></script>
11-
<script src="/example/script.js"></script>
12-
<style>
13-
db-viewer {
14-
padding-bottom: 20px;
15-
width: 800px;
16-
height: 600px;
17-
}
18-
19-
body {
20-
background-color: black;
21-
}
22-
</style>
23-
</head>
24-
25-
<body>
26-
<div>
27-
<h1>Example</h1>
28-
</div>
29-
<db-viewer id="school-db"></db-viewer>
30-
<db-viewer id="benchmark" src="example/schema/benchmark.json"></db-viewer>
31-
<db-viewer id="table-center" src="example/schema/table-center.json" disable-table-movement></db-viewer>
32-
<db-viewer id="spiral" src="example/schema/spiral.json"></db-viewer>
33-
</body>
21+
body {
22+
background-color: black;
23+
}
24+
</style>
25+
</head>
3426

27+
<body>
28+
<div>
29+
<h1>Example</h1>
30+
</div>
31+
<button id="increase-view-height">increase view height</button>
32+
<button id="increase-view-width">increase view width</button>
33+
<button id="decrease-view-height">decrease view height</button>
34+
<button id="decrease-view-width">decrease view width</button>
35+
<db-viewer id="school-db"></db-viewer>
36+
<db-viewer id="benchmark" src="example/schema/benchmark.json"></db-viewer>
37+
<db-viewer
38+
id="table-center"
39+
src="example/schema/table-center.json"
40+
disable-table-movement
41+
></db-viewer>
42+
<db-viewer id="spiral" src="example/schema/spiral.json"></db-viewer>
43+
</body>
3544
</html>

‎example/script.js

Lines changed: 81 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,98 @@
1-
/* eslint-disable @typescript-eslint/explicit-function-return-type */
21
const schoolDbSetup = () => {
3-
const dbViewerSchoolElem = document.querySelector('#school-db');
4-
dbViewerSchoolElem.addEventListener('ready', () => {
2+
const increaseViewHeight = document.querySelector("#increase-view-height");
3+
const increaseViewWidth = document.querySelector("#increase-view-width");
4+
const decreaseViewHeight = document.querySelector("#decrease-view-height");
5+
const decreaseViewWidth = document.querySelector("#decrease-view-width");
6+
const dbViewerSchoolElem = document.querySelector("#school-db");
7+
8+
dbViewerSchoolElem.addEventListener("ready", () => {
59
// dbViewerSchoolElem.scrollLeft = 1000;
610
// dbViewerSchoolElem.scrollTop = 1000;
7-
811
// dbViewerSchoolElem.zoomIn();
912
// dbViewerSchoolElem.zoomIn();
1013
});
1114

12-
dbViewerSchoolElem.addEventListener('load', () => {
15+
dbViewerSchoolElem.addEventListener("load", () => {
1316
// dbViewerSchoolElem.setTablePos('school', 0, 0);
14-
console.log(dbViewerSchoolElem.getTableInfo('school'));
17+
console.log(dbViewerSchoolElem.getTableInfo("school"));
1518
console.log(dbViewerSchoolElem.schema);
1619
});
1720

18-
dbViewerSchoolElem.src = '/example/schema/school.json';
21+
dbViewerSchoolElem.addEventListener("ready", () => console.log("ready"));
1922

20-
dbViewerSchoolElem.addEventListener('ready', () => console.log('ready'));
23+
dbViewerSchoolElem.addEventListener("ready", () => {
24+
fetch("./example/schema/school.json")
25+
.then((response) => response.json())
26+
.then((data) => {
27+
increaseViewHeight.addEventListener("click", () => {
28+
if (data.viewHeight) data.viewHeight += 500;
29+
else data.viewHeight = 5500;
30+
data.viewport = "noChange";
31+
dbViewerSchoolElem.schema = data;
32+
});
33+
increaseViewWidth.addEventListener("click", () => {
34+
if (data.viewWidth) data.viewWidth += 500;
35+
else data.viewWidth = 5500;
36+
data.viewport = "noChange";
37+
dbViewerSchoolElem.schema = data;
38+
});
39+
decreaseViewHeight.addEventListener("click", () => {
40+
if (data.viewHeight) data.viewHeight -= 500;
41+
else data.viewHeight = 4500;
42+
data.viewport = "noChange";
43+
dbViewerSchoolElem.schema = data;
44+
});
45+
decreaseViewWidth.addEventListener("click", () => {
46+
if (data.viewWidth) data.viewWidth -= 500;
47+
else data.viewWidth = 4500;
48+
data.viewport = "noChange";
49+
dbViewerSchoolElem.schema = data;
50+
});
51+
dbViewerSchoolElem.schema = data;
52+
});
2153

22-
dbViewerSchoolElem.addEventListener('tableClick', (event) => console.log('tableClick', event.detail));
23-
dbViewerSchoolElem.addEventListener('tableDblClick', (event) => console.log('tableDblClick', event.detail));
24-
dbViewerSchoolElem.addEventListener('tableContextMenu', (event) => console.log('tableContextMenu', event.detail));
54+
dbViewerSchoolElem.addEventListener("tableClick", (event) =>
55+
console.log("tableClick", event.detail)
56+
);
57+
dbViewerSchoolElem.addEventListener("tableDblClick", (event) =>
58+
console.log("tableDblClick", event.detail)
59+
);
60+
dbViewerSchoolElem.addEventListener("tableContextMenu", (event) =>
61+
console.log("tableContextMenu", event.detail)
62+
);
2563

26-
dbViewerSchoolElem.addEventListener('relationClick', (event) => console.log('relationClick', event.detail));
27-
dbViewerSchoolElem.addEventListener('relationDblClick', (event) => console.log('relationDblClick', event.detail));
28-
dbViewerSchoolElem.addEventListener('relationContextMenu', (event) => console.log('relationContextMenu', event.detail));
64+
dbViewerSchoolElem.addEventListener("relationClick", (event) =>
65+
console.log("relationClick", event.detail)
66+
);
67+
dbViewerSchoolElem.addEventListener("relationDblClick", (event) =>
68+
console.log("relationDblClick", event.detail)
69+
);
70+
dbViewerSchoolElem.addEventListener("relationContextMenu", (event) =>
71+
console.log("relationContextMenu", event.detail)
72+
);
2973

30-
dbViewerSchoolElem.addEventListener('tableMove', (event) => console.log('tableMove', event.detail));
31-
dbViewerSchoolElem.addEventListener('tableMoveEnd', (event) => console.log('tableMoveEnd', event.detail));
32-
dbViewerSchoolElem.addEventListener('zoomIn', (event) => console.log('zoomIn', event.detail));
33-
dbViewerSchoolElem.addEventListener('zoomOut', (event) => console.log('zoomOut', event.detail));
34-
dbViewerSchoolElem.addEventListener('scroll', (event) => console.log('scroll', event.detail));
74+
dbViewerSchoolElem.addEventListener("tableMove", (event) =>
75+
console.log("tableMove", event.detail)
76+
);
77+
dbViewerSchoolElem.addEventListener("tableMoveEnd", (event) =>
78+
console.log("tableMoveEnd", event.detail)
79+
);
80+
dbViewerSchoolElem.addEventListener("zoomIn", (event) =>
81+
console.log("zoomIn", event.detail)
82+
);
83+
dbViewerSchoolElem.addEventListener("zoomOut", (event) =>
84+
console.log("zoomOut", event.detail)
85+
);
86+
dbViewerSchoolElem.addEventListener("scroll", (event) =>
87+
console.log("scroll", event.detail)
88+
);
89+
});
3590
};
3691

37-
document.addEventListener('DOMContentLoaded', () => {
38-
schoolDbSetup();
39-
}, false);
92+
document.addEventListener(
93+
"DOMContentLoaded",
94+
() => {
95+
schoolDbSetup();
96+
},
97+
false
98+
);

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
"mocha": "^8.2.1",
6969
"mocha-loader": "^5.1.5",
7070
"mochapack": "^2.0.6",
71-
"playwright": "^1.3.0",
71+
"playwright": "^1.10.0",
7272
"prettier": "^2.0.5",
7373
"sinon": "^9.2.2",
7474
"sinon-chai": "^3.5.0",

‎src/const.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ const constant = {
44
SCROLL_TO_ZOOM_MULTIPLIER: 0.01,
55
SPIRAL_ARRANGE_DIST_X: 200,
66
SPIRAL_ARRANGE_DIST_Y: 200,
7-
VIEWER_PAN_HEIGHT: 5000,
8-
VIEWER_PAN_WIDTH: 5000,
7+
VIEW_HEIGHT: 5000,
8+
VIEW_WIDTH: 5000,
99
ZOOM: 1.2,
1010
nsHtml: "http://www.w3.org/1999/xhtml",
1111
nsSvg: "http://www.w3.org/2000/svg",

‎src/index.ts

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,9 @@ class DbViewer extends HTMLElement {
6565
this.viewer.load(
6666
this.tables,
6767
this.viewport ?? schemaObj.viewport,
68-
schemaObj.arrangement
68+
schemaObj.arrangement ?? TableArrang.default,
69+
schemaObj.viewWidth,
70+
schemaObj.viewHeight
6971
);
7072
});
7173
}
@@ -172,16 +174,15 @@ class DbViewer extends HTMLElement {
172174
this.notParsedSchema = cloneDeep<Schema>(response);
173175
this.tables = schemaParser(response);
174176

175-
let arrangement: TableArrang;
176-
if (!this.notParsedSchema.arrangement)
177-
arrangement = TableArrang.default;
178-
else arrangement = this.notParsedSchema.arrangement;
179-
180-
this.viewer.load(
177+
return this.viewer.load(
181178
this.tables,
182179
this.viewport ?? (response as Schema).viewport,
183-
arrangement
180+
this.notParsedSchema.arrangement ?? TableArrang.default,
181+
this.notParsedSchema.viewWidth,
182+
this.notParsedSchema.viewHeight
184183
);
184+
})
185+
.then(() => {
185186
this.dispatchEvent(new LoadEvent());
186187
});
187188
});

‎src/minimap.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,18 @@ export default class Minimap {
5151
.forEach((miniTable) => miniTable.remove());
5252
}
5353

54-
reset(): void {
55-
this.removeTables();
54+
resetViewBox(): void {
5655
this.minimap.setAttribute(
5756
"viewBox",
58-
`0 0 ${constant.VIEWER_PAN_WIDTH} ${constant.VIEWER_PAN_HEIGHT}`
57+
`0 0 ${this.viewer.getViewerPanWidth()} ${this.viewer.getViewerPanHeight()}`
5958
);
6059
}
6160

61+
reset(): void {
62+
this.removeTables();
63+
this.resetViewBox();
64+
}
65+
6266
setMinimapViewPoint(viewBoxVals: ViewBoxVals): void {
6367
this.viewpoint.setAttributeNS(null, "x", viewBoxVals.x.toString());
6468
this.viewpoint.setAttributeNS(null, "y", viewBoxVals.y.toString());

‎src/schema-parser.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default function schemaParser(schema: Schema): Table[] {
3232
const fkColumn = fkTable
3333
.getColumns()
3434
.find((column) => column.name === sFkColumn.fk!.column);
35+
if (fkColumn == null) throw new Error("fk column not found");
3536
tables
3637
.find((table) => sTable.name === table.getName())!
3738
.addColumn({

‎src/spiral-arrange.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import constant from "./const";
22
import Table from "./table";
33

4-
export default function spiralArrange(tables: Table[]): Table[] {
5-
let currentX = constant.VIEWER_PAN_WIDTH / 2;
6-
let currentY = constant.VIEWER_PAN_HEIGHT / 2;
4+
export default function spiralArrange(
5+
tables: Table[],
6+
viewWidth: number,
7+
viewHeight: number
8+
): Table[] {
9+
let currentX = viewWidth / 2;
10+
let currentY = viewHeight / 2;
711
tables[0].setTablePos(currentX, currentY);
812
let direction = 0;
913
let index = 1;

0 commit comments

Comments
 (0)