Skip to content

Commit 6232e82

Browse files
EvAlexEvAlex
committed
fix(diagram) misplaced relation connectors (#38)
Resolves #38
1 parent fa4c95b commit 6232e82

File tree

4 files changed

+54
-21
lines changed

4 files changed

+54
-21
lines changed

‎EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/app/app.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<md-toolbar color="primary" [class.floating-toolbar]="toolbarCollapsed">
33
<span class="spacer">Db Diagram</span>
44

5-
<ng-container *ngIf="model && modelLayout?.initialized">
5+
<ng-container *ngIf="!!model && modelLayout?.initialized">
66
<button type="button" md-icon-button (click)="saveLayout()" mdTooltip="Save layout">
77
<md-icon>save</md-icon>
88
</button>
@@ -19,7 +19,7 @@
1919
</button>
2020

2121
<md-menu #appMenu="mdMenu">
22-
<ng-container *ngIf="model && modelLayout?.initialized">
22+
<ng-container *ngIf="!!model && modelLayout?.initialized">
2323
<button md-menu-item (click)="showExportDialog()">
2424
<md-icon>file_download</md-icon> Export
2525
</button>
@@ -44,7 +44,7 @@
4444

4545
<ng-template *ngIf="true; then toolbar"></ng-template>
4646

47-
<ng-container *ngIf="model && modelLayout?.initialized">
47+
<ng-container *ngIf="!!model && modelLayout?.initialized">
4848

4949
<div class="spacer toolbar-content">
5050
<md-toolbar>
@@ -132,7 +132,7 @@ <h1>Failed to load database model.</h1>
132132

133133
<ng-template *ngIf="toolbarCollapsed; then toolbar"></ng-template>
134134

135-
<efd-db-diagram *ngIf="!modelLoading && !modelLoadError && model" [model]="model"></efd-db-diagram>
135+
<efd-db-diagram *ngIf="!modelLoading && !modelLoadError && !!model" [model]="model"></efd-db-diagram>
136136

137137
<div *ngIf="!modelLoading && !modelLoadError && !model" class="no-diagram-cont">
138138
<h1>No diagram found</h1>

‎EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/db-entity-diagram-figure/db-entity-diagram-figure.component.ts‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,11 @@ export class DbEntityDiagramFigureComponent implements OnInit, OnChanges, AfterV
102102
// NOTE: force md-table to display initial data. Seems like a bug in library
103103
this._changeDetector.detectChanges();
104104

105-
this.entityLayout.width = this._el.nativeElement.clientWidth;
106-
this.entityLayout.height = this._el.nativeElement.clientHeight;
107-
108105
const entityElement = this._el.nativeElement as HTMLElement;
106+
107+
this.entityLayout.width = entityElement.clientWidth;
108+
this.entityLayout.height = entityElement.clientHeight;
109+
109110
const entityRect = entityElement.getBoundingClientRect();
110111
const rows = this.rows.toArray();
111112
for (let i = 0; i < rows.length; i++) {
@@ -118,6 +119,36 @@ export class DbEntityDiagramFigureComponent implements OnInit, OnChanges, AfterV
118119
propLayout.width = propRect.width;
119120
propLayout.height = propRect.height;
120121
}
122+
123+
this.fixDuplicateRows();
124+
}
125+
126+
/**
127+
* cdk-data-table renders every row twice, and one of rendered rows is empty.
128+
* This should be a bug in library. Later those empty rows are removed, but
129+
* they affect dimensions. So here's the fix.
130+
*/
131+
private fixDuplicateRows() {
132+
const entityElement = this._el.nativeElement as HTMLElement;
133+
const rows = this.rows.toArray();
134+
135+
const domRows = entityElement.querySelectorAll('.mat-header-row, .mat-row');
136+
const expectedRowsCount = rows.length + 1; // + 1 header row
137+
if (domRows.length > expectedRowsCount) {
138+
const bounds: ClientRect[] = [];
139+
for (let i = 0; i < domRows.length; i++) {
140+
bounds.push(domRows[i].getBoundingClientRect());
141+
}
142+
143+
// Well, every row has the same height, ok?
144+
const entityRect = entityElement.getBoundingClientRect();
145+
for (let i = 0; i < this.entityLayout.properties.length; i++) {
146+
const prop = this.entityLayout.properties[i];
147+
prop.y = bounds[i + 1].top - entityRect.top;
148+
}
149+
this.entityLayout.height -= (domRows.length - expectedRowsCount) * this.entityLayout.properties[0].height;
150+
}
151+
121152
}
122153

123154
ngOnDestroy() {

‎EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/services/diagram-layout.service.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,13 +161,13 @@ export class DiagramLayoutService {
161161
const modelLayout = this.getModelLayout(model);
162162
function propsToString(entity: DbEntityLayout): string {
163163
return entity.properties
164-
.map(p => ` - ${p.property.name} (${p.x}, ${p.y}, ${p.width}, ${p.height})`)
164+
.map(p => ` - ${p.property.name} (x: ${p.x}, y: ${p.y}, w: ${p.width}, h: ${p.height})`)
165165
.join('\n');
166166
}
167167
console.log(
168168
'arrangeLayout(). Entities:\n' +
169169
modelLayout.entities
170-
.map(e => ` - ${e.entity.shortName} (${e.width}, ${e.height}):\n${propsToString(e)}`)
170+
.map(e => ` - ${e.entity.shortName} (w: ${e.width}, h: ${e.height}):\n${propsToString(e)}`)
171171
.join('\n')
172172
);
173173

‎EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.csproj‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,37 @@
11
<Project Sdk="Microsoft.NET.Sdk">
22

33
<PropertyGroup>
4-
<PackageVersion>0.4.1</PackageVersion>
4+
<PackageVersion>0.4.2</PackageVersion>
55
<Description>
6-
ASP.NET Core Middleware serving Angular app displaying your EF Core DbContext model as a diagram.
6+
Visualize model created with EntityFramework Core in ASP.NET Core app.
77

8-
To use it call `app.AddEfDiagrams()` in your `Configure` method within `Startup` class.
9-
Use it only in development mode (`if (env.IsDevelopment())`): you don't want everyone in public see your entire data structure :)
8+
https://db-diagrams.firebaseapp.com/
109

11-
That's all the config! Start your app and browse to `/ef-diagrams` page. You should see yor entity model diagram.
10+
1. Install the NuGet package
11+
2. Use AddEfDiagrams() extension method in Configure() method of your Startup class to add middleware. Specify your DbContext type instead of ApplicationDbContext in the following example: app.AddEfDiagrams&lt;ApplicationDbContext&gt;();
12+
3. Start your app and browse to /db-diagrams page. You should see the diagram now.
1213

13-
Feel free to report any bugs or feature requests. Contributions are appreciated!
14+
Use the middleware is only in Development mode. This is important! Otherwise, any user in Production will se your model structure, which may not be desireable. This is not the case if you are developing public API, though.
15+
16+
Feel free to report any bugs or feature requests - just create an issue. Contributions are appreciated!
17+
https://github.com/EvAlex/ef-db-diagrams
1418
</Description>
1519
<PackageIconUrl>https://github.com/EvAlex/ef-db-diagrams/raw/master/icon.png</PackageIconUrl>
1620
<Authors>Alexander Pavlyuk (EvAlex)</Authors>
17-
<PackageProjectUrl>https://github.com/EvAlex/ef-db-diagrams</PackageProjectUrl>
21+
<PackageProjectUrl>https://db-diagrams.firebaseapp.com/</PackageProjectUrl>
1822
<PackageTags>aspnetcore;entityframeworkcore;ef;diagram;er;</PackageTags>
1923
<RepositoryUrl>https://github.com/EvAlex/ef-db-diagrams</RepositoryUrl>
2024
<RepositoryType>git</RepositoryType>
2125
<PackageReleaseNotes>
22-
- fix: namespaces for CLR types
23-
- fix: pretty display for CLR array types
24-
- fix: entity names display as CLR types
26+
- fix: misplaced relation connectors
2527
</PackageReleaseNotes>
2628
</PropertyGroup>
2729

2830
<PropertyGroup>
2931
<TargetFramework>netstandard1.6</TargetFramework>
3032
<GeneratePackageOnBuild>True</GeneratePackageOnBuild>
31-
<AssemblyVersion>0.4.1.0</AssemblyVersion>
32-
<FileVersion>0.4.1.0</FileVersion>
33+
<AssemblyVersion>0.4.2.0</AssemblyVersion>
34+
<FileVersion>0.4.2.0</FileVersion>
3335
</PropertyGroup>
3436

3537
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">

0 commit comments

Comments
 (0)