feat(docs) demo app improvements (#39)

Resolves #39
- no minimap in non-fullscreen mode
- no toolbar collapse in non-fullscreen mode
- fix exit fullscreen fab positioning
- scroll position after exit fullscreen

Author: EvAlex

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src-website/app/components/demo/demo.component.html

@@ -13,21 +13,22 @@ <h2>The actual app</h2>
             model.
         </p>
 
-        <h2>View in fullscreen</h2>
+        <h2 #viewInFullscreen>View in fullscreen</h2>
         <p>
-            Click the button below to make the demo app fullscreen. Otherwise there will be bugs with
-            floating minimap and collapsed toolbar.
+            Fullscreen mode lets you see how actual app looks like.
+            Some features are available only in fullscreen mode, e.g. minimap and toolbar expand-collapse.
         </p>
         <button
             type="button"
             class="toggle-fullscreen-btn"
             md-raised-button
-            (click)="fullscreen = !fullscreen">
-            Toggle fullscreen
+            (click)="toggleFullscreen()">
+            <md-icon>fullscreen_enter</md-icon>
+            Fullscreen
         </button>
     </section>
 
-    <efd-root></efd-root>
+    <efd-root [allowToolbarCollapse]="fullscreen" (diagramLoad)="onDiagramLoaded($event)"></efd-root>
 
     <button
         *ngIf="fullscreen"
@@ -36,7 +37,7 @@ <h2>View in fullscreen</h2>
         md-fab
         mdTooltip="Exit fullscreen mode"
         mdTooltipPosition="right"
-        (click)="fullscreen = !fullscreen">
+        (click)="toggleFullscreen()">
         <md-icon>fullscreen_exit</md-icon>
     </button>
 

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src-website/app/components/demo/demo.component.scss

@@ -19,7 +19,7 @@ main {
         .toggle-fullscreen-btn {
             position: fixed;
             bottom: 28px;
-            left: 260px;
+            left: calc(25% - 80px);
         }
     }
 

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src-website/app/components/demo/demo.component.ts

@@ -1,5 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 
+import { DiagramLayoutService } from '../../../../src/app/services/diagram-layout.service';
+import { DbModelLayout } from '../../../../src/app/models/db-model-layout';
+import { AppComponent } from '../../../../src/app/components/app/app.component';
 import { environment } from '../../../../src/environments/environment';
 
 @Component({
@@ -14,9 +17,34 @@ export class DemoComponent implements OnInit {
     commitSha = environment.versions.revision;
     commitLink = `${environment.versions.repository}commit/${environment.versions.revision}`;
 
-    constructor() { }
+    @ViewChild('viewInFullscreen')
+    viewInFullscreen: ElementRef;
+
+    constructor(private readonly _diagramLayout: DiagramLayoutService) {
+    }
 
     ngOnInit() {
     }
 
+    toggleFullscreen() {
+        this.fullscreen = !this.fullscreen;
+
+        for (const modelLayout of this._diagramLayout.getModelLayouts()) {
+            modelLayout.showMinimap = this.fullscreen;
+        }
+
+        if (!this.fullscreen) {
+            setTimeout(() => this.scrollToViewInFullscreen(), 16);
+        }
+    }
+
+    private scrollToViewInFullscreen() {
+        const viewInFullscreen = this.viewInFullscreen.nativeElement as HTMLElement;
+        window.document.body.scrollTop = viewInFullscreen.getBoundingClientRect().top - 8;
+    }
+
+    onDiagramLoaded(modelLayout: DbModelLayout) {
+        modelLayout.showMinimap = this.fullscreen;
+    }
+
 }

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

@@ -10,7 +10,12 @@
                 <md-icon>folder_open</md-icon>
             </button>
         </ng-container>
-        <button type="button" md-icon-button (click)="toolbarCollapsed = !toolbarCollapsed" [mdTooltip]="toolbarCollapsed ? 'Expand' : 'Collapse'">
+        <button
+            *ngIf="allowToolbarCollapse"
+            type="button"
+            md-icon-button
+            (click)="toolbarCollapsed = !toolbarCollapsed"
+            [mdTooltip]="toolbarCollapsed ? 'Expand' : 'Collapse'">
             <md-icon *ngIf="!toolbarCollapsed">expand_less</md-icon>
             <md-icon *ngIf="toolbarCollapsed">expand_more</md-icon>
         </button>

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/app/app.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 import { MdDialog, MdDialogRef } from '@angular/material';
 import { Observable } from 'rxjs/Observable';
 
 import { ApiService } from '../../services/api.service';
 import { DiagramLayoutService } from '../../services/diagram-layout.service';
 import { DbModel } from '../../models/db-model';
+import { DbModelLayout } from '../../models/db-model-layout';
 import { DbEntityLayout } from '../../models/db-entity-layout';
 import { ExportDialogComponent } from '../export-dialog/export-dialog.component';
 
@@ -13,7 +14,7 @@ import { ExportDialogComponent } from '../export-dialog/export-dialog.component'
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnChanges {
 
     model: DbModel = null;
     modelLoading = false;
@@ -23,6 +24,12 @@ export class AppComponent implements OnInit {
 
     get modelLayout() { return this._diagramLayout.getModelLayout(this.model); }
 
+    @Input()
+    allowToolbarCollapse = true;
+
+    @Output()
+    diagramLoad = new EventEmitter<DbModelLayout>();
+
     constructor(
         private readonly _api: ApiService,
         private readonly _diagramLayout: DiagramLayoutService,
@@ -36,10 +43,17 @@ export class AppComponent implements OnInit {
             .subscribe(e => this.onModel(e), e => this.onModelError(e));
     }
 
+    ngOnChanges(changes) {
+        if ('allowToolbarCollapse' in changes && !this.allowToolbarCollapse && this.toolbarCollapsed) {
+            this.toolbarCollapsed = false;
+        }
+    }
+
     onModel(model: DbModel) {
         this.model = model;
         this.modelLoading = false;
         this.modelLoadError = null;
+        this.diagramLoad.emit(this._diagramLayout.getModelLayout(model));
     }
 
     onModelError(err) {
@@ -54,6 +68,7 @@ export class AppComponent implements OnInit {
 
     restoreLayout() {
         this._diagramLayout.restoreLayout(this.model);
+        this.diagramLoad.emit(this._diagramLayout.getModelLayout(this.model));
     }
 
     toggleAllEntitiesVisibility() {
@@ -98,6 +113,7 @@ export class AppComponent implements OnInit {
                 .do(() => {
                     this.model = newModel;
                     this.modelLoading = false;
+                    this.diagramLoad.emit(this._diagramLayout.getModelLayout(this.model));
                 })
                 .subscribe();
         }

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/db-diagram/db-diagram.component.html

@@ -54,6 +54,6 @@ <h1 *ngIf="!model.entities || model.entities.length === 0">Database model is emp
 
     </div>
 
-    <efd-minimap [targetElement]="scrollContainer"></efd-minimap>
+    <efd-minimap [class.hidden]="!modelLayout.showMinimap" [targetElement]="scrollContainer"></efd-minimap>
 
 </div>

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/db-diagram/db-diagram.component.scss

@@ -79,4 +79,10 @@ $relation-color-normal: #cacaca;
             }
         }
     }
+
+    efd-minimap {
+        &.hidden {
+            display: none;
+        }
+    }
 }

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/minimap/minimap.component.ts

@@ -71,9 +71,11 @@ export class MinimapComponent implements OnInit, DoCheck {
     }
 
     ngDoCheck() {
-        const newSize = this.getMinimapSize();
-        if (!areEqual(newSize, this.prevSize)) {
-            this.updateMinimap(newSize);
+        if (this.targetElement) {
+            const newSize = this.getMinimapSize();
+            if (!areEqual(newSize, this.prevSize)) {
+                this.updateMinimap(newSize);
+            }
         }
     }
 

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/models/db-model-layout.ts

@@ -24,6 +24,8 @@ export class DbModelLayout {
 
     entitiesTableSettings = getDefaultEntityTableSettings();
 
+    showMinimap = true;
+
     constructor(public readonly model: DbModel) {
         for (const entity of model.entities) {
             for (const fk of entity.foreignKeys) {
@@ -57,6 +59,7 @@ export class DbModelLayout {
         result.entities = this.entities.map(e => e.toDto());
         result.relations = this.relations.map(e => e.toDto());
         result.entitiesTableSettings = this.entitiesTableSettings;
+        result.showMinimap = this.showMinimap;
         return result;
     }
 
@@ -82,6 +85,8 @@ export class DbModelLayout {
         }
         this.entitiesTableSettings = dto.entitiesTableSettings;
 
+        this.showMinimap = dto.showMinimap;
+
         this.updateVisibleObjects();
     }
 

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/models/dto/db-model-layout-dto.ts

@@ -6,6 +6,7 @@ export class DbModelLayoutDto {
     entities: DbEntityLayoutDto[] = [];
     relations: DbEntityRelationLayoutDto[] = [];
     entitiesTableSettings: TableSettings;
+    showMinimap: boolean;
 
     static fromJSON(value: Object): DbModelLayoutDto {
         return Object.assign(