import { BehaviorSubject } from 'rxjs' ; import { ComponentFactoryResolver , Injectable , Type , ViewContainerRef , } from '@angular/core' ; import { HsConfig } from '../../config.service' ; import { HsEventBusService } from '../core/event-bus.service' ; import { HsLogService } from '../../common/log/log.service' ; import { HsOverlayPanelContainerService } from './overlay-panel-container.service' ; import { HsPanelContainerService } from './panels/panel-container.service' ; @ Injectable ( { providedIn : 'root' , } ) export class HsLayoutService { public default defaultPanel = '' ; public panel_statuses = { } ; public description panel_enabled = { } ; /**
     * Storage of current main panel (panel which is opened).
     * When  HsLayoutService is specified, main panel is set to it during HsCore initialization.
     *  public default mainpanel = '' ; public default sidebarRight = true ; public default sidebarLabels = true ; public default sidebarToggleable = true ; public deprecated default sidebarButtons = true ; public deprecated default smallWidth = false ; public default sidebarExpanded = false ; public default initializedOnce = false ; public default minisidebar = false ; contentWrapper : any ; layoutElement : any ; private _sidebarVisible : any ; panelsEnabledDefaults = { legend : true , info : true , composition_browser : true , toolbar : true , measure : true , mobile_settings : false , draw : true , layermanager : true , print : true , saveMap : true , language : true , permalink : true , compositionLoadingProgress : false , sensors : true , tracking : true , filter : false , search : false , tripPlanner : false , addData : true , mapSwipe : false , } ; mapSpaceRef : BehaviorSubject < ViewContainerRef > = new BehaviorSubject ( null ) ; constructor ( public HsConfig , public HsEventBusService , public $log , private componentFactoryResolver , public hsPanelContainerService , public hsOverlayPanelContainerService ) { Object . defineProperty ( this , 'panelListElement' , { get : function ( ) { return this . contentWrapper . querySelector ( '.hs-panelplace' ) ; } , } ) ; Object . defineProperty ( this , 'dialogAreaElement' , { get : function ( ) { return this . contentWrapper . querySelector ( '.hs-dialog-area' ) ; } , } ) ; Object . defineProperty ( this , 'sidebarListElement' , { get : function ( ) { return this . contentWrapper . querySelector ( '.hs-sidebar-list' ) ; } , } ) ; setTimeout ( ( _ ) => { this . parseConfig ( ) ; } , 0 ) ; } parseConfig ( ) { this . panel_enabled = { } ; for ( const key of Object . keys ( this . panelsEnabledDefaults ) ) { this . panelEnabled ( key , this . getPanelEnableState ( key ) ) ; } } getPanelEnableState ( panel ) { if ( this . panelsEnabledDefaults [ panel ] == undefined && ( this . HsConfig ?. panelsEnabled == undefined || this . HsConfig ?. panelsEnabled [ panel ] == undefined ) ) { return true ; } if ( this . HsConfig . panelsEnabled == undefined ) { return this . panelsEnabledDefaults [ panel ] ; } if ( this . HsConfig . panelsEnabled [ panel ] == undefined ) { return this . panelsEnabledDefaults [ panel ] ; } else { return this . HsConfig . panelsEnabled [ panel ] ; } } public param { string } which param { $scope } scope returns { boolean } description panelVisible ( which , scope ? ) { if ( scope ) { if ( scope . panelName == undefined ) { scope . panelName = which ; } } if ( this . panel_statuses [ which ] !== undefined ) { return this . panel_statuses [ which ] && this . panelEnabled ( which ) ; } return this . mainpanel == which || ( scope && scope . unpinned ) ; } public hidePanels ( ) { this . mainpanel = '' ; this . sidebarLabels = true ; this . HsEventBusService . mainPanelChanges . next ( ) ; } public param { object } which description closePanel ( which ) { if ( which . unpinned ) { this . contentWrapper . querySelector ( which . original_container ) . appendChild ( which . drag_panel ) ; which . drag_panel . css ( { top : 'auto' , left : 'auto' , position : 'relative' , } ) ; } which . unpinned = false ; if ( which . panelName == this . mainpanel ) { if ( this . defaultPanel != '' ) { if ( which . panelName == this . defaultPanel ) { this . sidebarExpanded = false ; } else { this . setMainPanel ( this . defaultPanel ) ; } } else { this . mainpanel = '' ; this . sidebarLabels = true ; } this . sidebarExpanded = false ; } this . HsEventBusService . mainPanelChanges . next ( which ) ; } public param which param status returns panelEnabled ( which , status ? ) { if ( status === undefined ) { if ( this . panel_enabled [ which ] != undefined ) { return this . panel_enabled [ which ] ; } else { return true ; } } else { this . panel_enabled [ which ] = status ; } } param which returns componentEnabled ( which ) { return ( this . HsConfig . componentsEnabled == undefined || this . HsConfig . componentsEnabled [ which ] == undefined || this . HsConfig . componentsEnabled [ which ] ) ; } public param which param by_gui setMainPanel ( which , by_gui ? ) { if ( ! this . panelEnabled ( which ) ) { return ; } if ( which == this . mainpanel && by_gui ) { which = '' ; if ( this . sidebarExpanded == true ) { if ( this . sidebarBottom ( ) ) { this . sidebarExpanded = false ; } else { this . sidebarLabels = true ; } } } else { this . sidebarExpanded = true ; this . sidebarLabels = false ; } this . mainpanel = which ; this . HsEventBusService . mainPanelChanges . next ( which ) ; } public param which setDefaultPanel ( which ) { this . defaultPanel = which ; this . setMainPanel ( which ) ; } panelSpaceWidth ( ) { const panelWidths = { default : 425 , ows : 700 , composition_browser : 550 , addData : 700 , mapSwipe : 550 } ; const layoutWidth = this . layoutElement . clientWidth ; Object . assign ( panelWidths , this . HsConfig . panelWidths ) ; let tmp = panelWidths [ this . mainpanel ] || panelWidths . default ; if ( typeof tmp === 'string' && tmp . includes ( '%' ) ) { const widthRatio = Number ( tmp . replace ( '%' , '' ) ) ; return layoutWidth * ( widthRatio / 100 ) ; } if ( layoutWidth <= 767 && window . innerWidth <= 767 ) { tmp = layoutWidth ; this . sidebarToggleable = false ; return tmp ; } else { this . sidebarToggleable = this . HsConfig . sidebarToggleable != undefined ? this . HsConfig . sidebarToggleable : true ; if ( ! this . sidebarToggleable ) { return tmp ; } } if ( this . sidebarExpanded && this . sidebarVisible ( ) ) { if ( panelWidths [ this . mainpanel ] ) { tmp = panelWidths [ this . mainpanel ] ; } else { tmp = panelWidths . default ; } } else { if ( this . sidebarVisible ( ) ) { tmp = 48 ; } else { tmp = 0 ; } } return tmp ; } sidebarVisible ( state ? ) { if ( this . HsConfig . sidebarPosition == 'invisible' || this . HsConfig . pureMap || this . HsConfig . componentsEnabled . guiOverlay === false || this . HsConfig . componentsEnabled . sidebar === false ) { return false ; } if ( state != undefined ) { this . _sidebarVisible = state ; } if ( this . _sidebarVisible == undefined ) { return true ; } else { return this . _sidebarVisible ; } } sidebarBottom ( ) { return window . innerWidth <= 767 ; } panelSpaceHeight ( ) { if ( this . contentWrapper . querySelector ( '.hs-panelspace-wrapper' ) ) { return this . contentWrapper . querySelector ( '.hs-panelspace-wrapper' ) . clientHeight ; } } mdToolbarHeight ( ) { const ELEM = this . contentWrapper . querySelector ( '.md-app-toolbar' ) ; return ELEM ? ELEM . clientHeight : 0 ; } widthWithoutPanelSpace ( ) { return 'calc(100% - ' + this . panelSpaceWidth ( ) + 'px)' ; } mapStyle ( ) { const fullscreen = this . HsConfig . sizeMode == undefined || this . HsConfig . sizeMode == 'fullscreen' ; let height = this . layoutElement . clientHeight ; let width = this . layoutElement . clientWidth ; let marginLeft = 0 ; if ( ! this . sidebarBottom ( ) || ! fullscreen ) { marginLeft += this . sidebarRight ? 0 : this . panelSpaceWidth ( ) ; width -= this . panelSpaceWidth ( ) ; } if ( this . sidebarBottom ( ) && ( fullscreen || window . innerWidth <= 767 ) ) { height -= this . panelSpaceHeight ( ) ; width = this . panelSpaceWidth ( ) ; } height -= this . mdToolbarHeight ( ) ; this . HsEventBusService . layoutResizes . next ( { width , height , } ) ; return { height : `${ height }px` , width : `${ width }px` , ... ( marginLeft > 0 && { marginLeft : `${ marginLeft }px` } ) , } ; } addMapVisualizer ( visualizerComponent ) { const componentFactory = this . componentFactoryResolver . resolveComponentFactory ( visualizerComponent ) ; this . mapSpaceRef . subscribe ( ( mapSpace ) => { if ( mapSpace ) { mapSpace . createComponent ( componentFactory ) ; } } ) ; } createPanel ( panelComponent , data ? ) { this . hsPanelContainerService . create ( panelComponent , data || { } ) ; } createOverlay ( panelComponent , data ? ) { this . hsOverlayPanelContainerService . create ( panelComponent , data || { } ) ; } }