import { Component , OnInit , Input , AfterViewInit , HostListener , Renderer2 , NgZone } from '@angular/core' ; import { Observable } from 'rxjs/Observable' ; import { Subject } from 'rxjs/Subject' ; import { DiagramLayoutService } from '../../services/diagram-layout.service' ; import { DbModel } from '../../models/db-model' ; import { DbEntity } from '../../models/db-entity' ; import { DbEntityLayout } from '../../models/db-entity-layout' ; import { DbEntityRelationLayout } from '../../models/db-entity-relation-layout' ; import { Line } from '../../models/line' ; import { EventDebouncer } from '../../core/event-debouncer' ; import { IScaleInfo , DEFAULT_SCALE } from '../../directives/scalable.directive' ; @ Component ( { selector : 'efd-db-diagram' , templateUrl : './db-diagram.component.html' , styleUrls : [ './db-diagram.component.scss' ] } ) export class DbDiagramComponent implements OnInit , AfterViewInit { private mouseOverListener : Function ; @ Input ( ) model : DbModel ; currentScale : IScaleInfo = { scale : DEFAULT_SCALE } ; get hoveredRelation ( ) { return this . _diagramLayout . hoveredRelation ; } get modelLayout ( ) { return this . _diagramLayout . getModelLayout ( this . model ) ; } constructor ( private readonly _diagramLayout , renderer , zone ) { const debouncer = new EventDebouncer ( zone , renderer ) ; this . mouseOverListener = debouncer . listen ( 'window' , 'mouseover' , e => { zone . run ( ( ) => { this . _diagramLayout . hoveredRelation = null ; this . _diagramLayout . hoveredEntity = null ; } ) ; e . stopPropagation ( ) ; } ) ; } ngOnInit ( ) { } ngAfterViewInit ( ) { Observable . timer ( 1 ) . subscribe ( ( ) => this . _diagramLayout . arrangeLayout ( this . model ) ) ; } getEntityKey ( index , entity ) { return entity . key ; } onEntityDragStart ( entity ) { const entityLayout = this . _diagramLayout . getEntityLayout ( this . model , entity ) ; this . _diagramLayout . draggedEntity = entityLayout ; } onEntityDragEnd ( entity ) { const entityLayout = this . _diagramLayout . getEntityLayout ( this . model , entity ) ; this . _diagramLayout . draggedEntity = null ; } onEntityDrag ( entity , { top , left } ) { this . _diagramLayout . moveEntity ( this . model , entity , left , top ) ; } onMouseOverRelation ( e , relation ) { this . _diagramLayout . hoveredRelation = relation ; e . stopPropagation ( ) ; } onRelationLineDrag ( relation , line , { top , left } ) { relation . moveLine ( line , left , top ) ; } onRelationLineDragStart ( relation , line ) { } onRelationLineDragEnd ( relation , line ) { } }