@wasp-ui/ng-golden-layout
Version:
Angular bindings for golden-layout
395 lines (382 loc) • 12.4 kB
JavaScript
import { Component, ComponentFactoryResolver, HostListener, Inject, Injectable, InjectionToken, Injector, NgModule, NgZone, Optional, ReflectiveInjector, ViewChild, ViewContainerRef } from '@angular/core';
import { assign, has } from 'lodash';
import * as GoldenLayout from 'golden-layout';
import * as $_ from 'jquery';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @record
*/
const GoldenLayoutConfiguration = new InjectionToken('GoldenLayoutConfiguration');
const GoldenLayoutDefaultSettings = { "persistLayoutState": false };
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
const GoldenLayoutStateStore = new InjectionToken('GoldenLayoutStateStore');
/**
* @record
*/
const DEFAULT_LOCAL_STORAGE_STATE_STORE_KEY = '$ng-golden-layout-state';
class LocalStorageStateStore {
/**
* @param {?} key
*/
constructor(key) {
this.key = key;
}
/**
* @param {?} state
* @return {?}
*/
writeState(state) {
localStorage.setItem(this.key, JSON.stringify(state));
}
/**
* @return {?}
*/
loadState() {
const /** @type {?} */ state = localStorage.getItem(this.key);
return state
? Promise.resolve(JSON.parse(state))
: Promise.reject(`No state found using key: ${this.key}`);
}
/**
* @return {?}
*/
clearState() {
localStorage.removeItem(this.key);
}
}
/**
* @return {?}
*/
function DEFAULT_LOCAL_STORAGE_STATE_STORE_FACTORY() {
return new LocalStorageStateStore(DEFAULT_LOCAL_STORAGE_STATE_STORE_KEY);
}
const DEFAULT_LOCAL_STORAGE_STATE_STORE = new LocalStorageStateStore(DEFAULT_LOCAL_STORAGE_STATE_STORE_KEY);
const DEFAULT_LOCAL_STORAGE_STATE_STORE_PROVIDER = {
provide: GoldenLayoutStateStore,
useFactory: DEFAULT_LOCAL_STORAGE_STATE_STORE_FACTORY
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* golden-layout component initialization callback type.
* @record
*/
/**
* @record
*/
class GoldenLayoutService {
/**
* @param {?} config
* @param {?} stateStore
*/
constructor(config, stateStore) {
this.config = config;
this.stateStore = stateStore;
this.layoutSettings = GoldenLayoutDefaultSettings;
if (has(this.config, 'layoutSettings')) {
this.layoutSettings = assign({}, this.layoutSettings, this.config.layoutSettings);
}
console.log("layoutSettings", this.layoutSettings);
}
/**
* @param {?} goldenLayout
* @param {?} componentInitCallbackFactory
* @return {?}
*/
initialize(goldenLayout, componentInitCallbackFactory) {
this._goldenLayout = goldenLayout;
this.config.components.forEach((componentConfig) => {
const /** @type {?} */ componentInitCallback = componentInitCallbackFactory.createComponentInitCallback(componentConfig.component);
goldenLayout.registerComponent(componentConfig.componentName, componentInitCallback);
});
if (this.stateStore) {
(/** @type {?} */ ((/** @type {?} */ (goldenLayout)))).on('stateChanged', () => {
this._saveState(goldenLayout);
});
}
}
/**
* @param {?} goldenLayout
* @return {?}
*/
_saveState(goldenLayout) {
if (this.stateStore && goldenLayout.isInitialised && this.layoutSettings.persistLayoutState) {
try {
this.stateStore.writeState(goldenLayout.toConfig());
}
catch (/** @type {?} */ ex) {
// Workaround for https://github.com/deepstreamIO/golden-layout/issues/192
}
}
}
/**
* @return {?}
*/
getState() {
if (this.stateStore && this.layoutSettings.persistLayoutState) {
return this.stateStore.loadState().catch(() => {
return this.config.defaultLayout;
});
}
else {
this.stateStore.clearState();
}
return Promise.resolve(this.config.defaultLayout);
}
/**
* @return {?}
*/
getGoldenLayout() {
return this._goldenLayout;
}
/**
* @return {?}
*/
isInitialised() {
return this._goldenLayout.isInitialised;
}
}
GoldenLayoutService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
GoldenLayoutService.ctorParameters = () => [
{ type: GoldenLayoutConfiguration, decorators: [{ type: Inject, args: [GoldenLayoutConfiguration,] },] },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [GoldenLayoutStateStore,] },] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
const $ = $_;
const GoldenLayoutContainer = new InjectionToken('GoldenLayoutContainer');
const GoldenLayoutComponentState = new InjectionToken('GoldenLayoutComponentState');
/**
* Type guard which determines if a component implements the GlOnResize interface.
* @param {?} obj
* @return {?}
*/
function implementsGlOnResize(obj) {
return typeof obj === 'object' && typeof obj.glOnResize === 'function';
}
/**
* Type guard which determines if a component implements the GlOnShow interface.
* @param {?} obj
* @return {?}
*/
function implementsGlOnShow(obj) {
return typeof obj === 'object' && typeof obj.glOnShow === 'function';
}
/**
* Type guard which determines if a component implements the GlOnHide interface.
* @param {?} obj
* @return {?}
*/
function implementsGlOnHide(obj) {
return typeof obj === 'object' && typeof obj.glOnHide === 'function';
}
/**
* Type guard which determines if a component implements the GlOnTab interface.
* @param {?} obj
* @return {?}
*/
function implementsGlOnTab(obj) {
return typeof obj === 'object' && typeof obj.glOnTab === 'function';
}
const COMPONENT_REF_KEY = '$componentRef';
class GoldenLayoutComponent {
/**
* @param {?} glService
* @param {?} viewContainer
* @param {?} componentFactoryResolver
* @param {?} ngZone
* @param {?} injector
*/
constructor(glService, viewContainer, componentFactoryResolver, ngZone, injector) {
this.glService = glService;
this.viewContainer = viewContainer;
this.componentFactoryResolver = componentFactoryResolver;
this.ngZone = ngZone;
this.injector = injector;
}
/**
* @return {?}
*/
ngOnInit() {
this.glService.getState().then((layout) => {
this._createLayout(layout);
});
}
/**
* @param {?} layout
* @return {?}
*/
_createLayout(layout) {
this.goldenLayout = new GoldenLayout(layout, $(this.el.nativeElement));
// Destory child angular components on golden-layout container destruction.
this.goldenLayout.eventHub.on('itemDestroyed', (item) => {
const /** @type {?} */ container = item.container;
const /** @type {?} */ component = container && container[COMPONENT_REF_KEY];
if (component) {
component.destroy();
(/** @type {?} */ (container))[COMPONENT_REF_KEY] = null;
}
});
// Register all golden-layout components.
this.glService.initialize(this.goldenLayout, this);
// Initialize the layout.
this.goldenLayout.init();
}
/**
* @param {?} event
* @return {?}
*/
onResize(event) {
if (this.goldenLayout) {
this.goldenLayout.updateSize();
}
}
/**
* @param {?} componentType
* @return {?}
*/
createComponentInitCallback(componentType) {
return (container, componentState) => {
this.ngZone.run(() => {
// Create an instance of the angular component.
const /** @type {?} */ factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
const /** @type {?} */ injector = this._createComponentInjector(container, componentState);
const /** @type {?} */ componentRef = this.viewContainer.createComponent(factory, undefined, injector);
// Bind the new component to container's client DOM element.
container.getElement().append($(componentRef.location.nativeElement));
this._bindEventHooks(container, componentRef.instance);
// Store a ref to the compoenentRef in the container to support destruction later on.
(/** @type {?} */ (container))[COMPONENT_REF_KEY] = componentRef;
});
};
}
/**
* Creates an injector capable of injecting the GoldenLayout object,
* component container, and initial component state.
* @param {?} container
* @param {?} componentState
* @return {?}
*/
_createComponentInjector(container, componentState) {
return ReflectiveInjector.resolveAndCreate([
{
provide: GoldenLayoutContainer,
useValue: container
},
{
provide: GoldenLayoutComponentState,
useValue: componentState
},
{
provide: GoldenLayout,
useValue: this.goldenLayout
},
], this.injector);
}
/**
* Registers an event handler for each implemented hook.
* @param {?} container Golden Layout component container.
* @param {?} component Angular component instance.
* @return {?}
*/
_bindEventHooks(container, component) {
if (implementsGlOnResize(component)) {
container.on('resize', () => {
component.glOnResize();
});
}
if (implementsGlOnShow(component)) {
container.on('show', () => {
component.glOnShow();
});
}
if (implementsGlOnHide(component)) {
container.on('hide', () => {
component.glOnHide();
});
}
if (implementsGlOnTab(component)) {
container.on('tab', () => {
component.glOnTab();
});
}
}
}
GoldenLayoutComponent.decorators = [
{ type: Component, args: [{
selector: 'golden-layout-root',
styles: [`
.ng-golden-layout-root {
width:100%;
height:100%;
}`
],
template: `<div class="ng-golden-layout-root" #glroot></div>`
},] },
];
/** @nocollapse */
GoldenLayoutComponent.ctorParameters = () => [
{ type: GoldenLayoutService, },
{ type: ViewContainerRef, },
{ type: ComponentFactoryResolver, },
{ type: NgZone, },
{ type: Injector, },
];
GoldenLayoutComponent.propDecorators = {
"el": [{ type: ViewChild, args: ['glroot',] },],
"onResize": [{ type: HostListener, args: ['window:resize', ['$event'],] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class GoldenLayoutModule {
/**
* @param {?} config
* @return {?}
*/
static forRoot(config) {
return {
ngModule: GoldenLayoutModule,
providers: [
GoldenLayoutService,
{ provide: GoldenLayoutConfiguration, useValue: config }
]
};
}
}
GoldenLayoutModule.decorators = [
{ type: NgModule, args: [{
declarations: [GoldenLayoutComponent],
exports: [GoldenLayoutComponent],
imports: [CommonModule]
},] },
];
/** @nocollapse */
GoldenLayoutModule.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { GoldenLayoutConfiguration, GoldenLayoutDefaultSettings, GoldenLayoutService, GoldenLayoutContainer, GoldenLayoutComponentState, GoldenLayoutComponent, GoldenLayoutModule, GoldenLayoutStateStore, DEFAULT_LOCAL_STORAGE_STATE_STORE_KEY, LocalStorageStateStore, DEFAULT_LOCAL_STORAGE_STATE_STORE_FACTORY, DEFAULT_LOCAL_STORAGE_STATE_STORE, DEFAULT_LOCAL_STORAGE_STATE_STORE_PROVIDER };