ngx-split-view
Version:
A resizable flex-box split layout component for Angular
265 lines (259 loc) • 10.1 kB
JavaScript
import { __decorate } from 'tslib';
import { ViewContainerRef, Input, Directive, TemplateRef, EventEmitter, Output, ContentChildren, ContentChild, HostBinding, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { startWith, switchMap, mergeAll, map } from 'rxjs/operators';
import Split from 'split.js';
var SplitPaneDirective = /** @class */ (function () {
function SplitPaneDirective(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
this.splitRatio = 1;
this.minSize = 100;
this.sizeChanges = new Subject();
this.minSizeChanges = new Subject();
}
SplitPaneDirective.prototype.ngOnChanges = function (changes) {
if (changes.splitRatio) {
this.sizeChanges.next();
}
if (changes.minSize) {
this.minSizeChanges.next();
}
};
SplitPaneDirective.ctorParameters = function () { return [
{ type: ViewContainerRef }
]; };
__decorate([
Input()
], SplitPaneDirective.prototype, "splitRatio", void 0);
__decorate([
Input()
], SplitPaneDirective.prototype, "minSize", void 0);
SplitPaneDirective = __decorate([
Directive({
// tslint:disable-next-line: directive-selector
selector: '[splitPane]'
})
], SplitPaneDirective);
return SplitPaneDirective;
}());
var SplitViewGutterDirective = /** @class */ (function () {
function SplitViewGutterDirective(template) {
this.template = template;
}
SplitViewGutterDirective.ctorParameters = function () { return [
{ type: TemplateRef }
]; };
SplitViewGutterDirective = __decorate([
Directive({
// tslint:disable-next-line: directive-selector
selector: '[gutterTemplate]'
})
], SplitViewGutterDirective);
return SplitViewGutterDirective;
}());
var SplitViewComponent = /** @class */ (function () {
function SplitViewComponent(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
this.dragging = new EventEmitter();
this.dragStart = new EventEmitter();
this.dragEnd = new EventEmitter();
this.expandToMin = false;
this.gutterSize = 10;
this.gutterAlign = 'center';
this.snapOffset = 30;
this.dragInterval = 1;
this.direction = 'horizontal';
this.subscriptions = new Subscription();
}
Object.defineProperty(SplitViewComponent.prototype, "isHorizontal", {
get: function () { return this.direction === 'horizontal'; },
enumerable: true,
configurable: true
});
Object.defineProperty(SplitViewComponent.prototype, "isVertical", {
get: function () { return this.direction === 'vertical'; },
enumerable: true,
configurable: true
});
SplitViewComponent.prototype.ngOnChanges = function (changes) {
if (changes.direction ||
changes.gutterSize ||
changes.gutterAlign ||
changes.snapOffset ||
changes.dragInterval ||
changes.expandToMin) {
this.refresh();
}
};
SplitViewComponent.prototype.ngAfterContentInit = function () {
var _this = this;
var splitPaneChanges = this.splitPanes.changes
.pipe(startWith(this.splitPanes));
var childrenChanges = splitPaneChanges
.subscribe(function () { return _this.refresh(); });
var sizeChanges = splitPaneChanges
.pipe(switchMap(function () { return _this.splitPanes.map(function (p) { return p.sizeChanges; }); }), mergeAll())
.subscribe(function () { var _a; return (_a = _this.split) === null || _a === void 0 ? void 0 : _a.setSizes(_this.getSizes()); });
var dragEndEvents = this.dragEnd
.pipe(map(function (event) { return event.sizes; }))
.subscribe(function (sizes) {
var panes = _this.splitPanes.toArray();
for (var i = 0; i < panes.length; i++) {
panes[i].splitRatio = sizes[i];
}
});
this.subscriptions.add(childrenChanges);
this.subscriptions.add(sizeChanges);
this.subscriptions.add(dragEndEvents);
};
SplitViewComponent.prototype.ngOnDestroy = function () {
this.subscriptions.unsubscribe();
this.destroySplit();
};
SplitViewComponent.prototype.refresh = function () {
var _this = this;
this.destroySplit();
if (!this.splitPanes || this.splitPanes.length === 0) {
return;
}
var panes = new Array();
var minSizes = new Array();
this.splitPanes.forEach(function (d) {
panes.push(d.viewContainerRef.element.nativeElement);
minSizes.push(d.minSize);
});
var splitOptions = {
sizes: this.getSizes(),
minSize: minSizes,
expandToMin: this.expandToMin,
gutterSize: this.gutterSize,
gutterAlign: this.gutterAlign,
snapOffset: this.snapOffset,
dragInterval: this.dragInterval,
direction: this.direction,
elementStyle: function (dimension, size, gutterSize) { return ({
flexBasis: 'calc(' + size + '% - ' + gutterSize + 'px)'
}); },
gutterStyle: function (dimension, gutterSize) { return ({
flexBasis: gutterSize + 'px'
}); },
onDrag: function (sizes) {
if (_this.dragging.observers.length > 0) {
_this.dragging.emit({ source: _this, sizes: sizes });
}
},
onDragStart: function (sizes) { return _this.dragStart.emit({ source: _this, sizes: sizes }); },
onDragEnd: function (sizes) { return _this.dragEnd.emit({ source: _this, sizes: sizes }); }
};
if (this.gutterDef) {
splitOptions.gutter = function (index, direction) {
var view = _this.viewContainerRef.createEmbeddedView(_this.gutterDef.template);
var elements = view.rootNodes.filter(function (e) { return e instanceof HTMLElement; });
if (elements.length !== 1) {
throw new Error('Gutter template must contain exactly one element');
}
return elements[0];
};
}
this.split = Split(panes, splitOptions);
};
SplitViewComponent.prototype.destroySplit = function () {
if (!this.split) {
return;
}
this.viewContainerRef.clear();
this.split.destroy(false, !!this.gutterDef);
this.split = undefined;
};
SplitViewComponent.prototype.getSizes = function () {
var panes = new Array();
var ratios = new Array();
var totalSize = 0;
this.splitPanes.forEach(function (d) {
panes.push(d.viewContainerRef.element.nativeElement);
var sanitizedSize = d.splitRatio >= 0 ? d.splitRatio : 0;
ratios.push(sanitizedSize);
totalSize += sanitizedSize;
});
return ratios.map(function (size) { return (size / totalSize) * 100; });
};
SplitViewComponent.ctorParameters = function () { return [
{ type: ViewContainerRef }
]; };
__decorate([
Output()
], SplitViewComponent.prototype, "dragging", void 0);
__decorate([
Output()
], SplitViewComponent.prototype, "dragStart", void 0);
__decorate([
Output()
], SplitViewComponent.prototype, "dragEnd", void 0);
__decorate([
Input()
], SplitViewComponent.prototype, "expandToMin", void 0);
__decorate([
Input()
], SplitViewComponent.prototype, "gutterSize", void 0);
__decorate([
Input()
], SplitViewComponent.prototype, "gutterAlign", void 0);
__decorate([
Input()
], SplitViewComponent.prototype, "snapOffset", void 0);
__decorate([
Input()
], SplitViewComponent.prototype, "dragInterval", void 0);
__decorate([
Input()
], SplitViewComponent.prototype, "direction", void 0);
__decorate([
ContentChildren(SplitPaneDirective)
], SplitViewComponent.prototype, "splitPanes", void 0);
__decorate([
ContentChild(SplitViewGutterDirective, { static: true })
], SplitViewComponent.prototype, "gutterDef", void 0);
__decorate([
HostBinding('class.split-view-horizontal')
], SplitViewComponent.prototype, "isHorizontal", null);
__decorate([
HostBinding('class.split-view-vertical')
], SplitViewComponent.prototype, "isVertical", null);
SplitViewComponent = __decorate([
Component({
// tslint:disable-next-line: component-selector
selector: 'split-view',
template: '<ng-content select="[splitPane]"></ng-content>',
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{display:flex}:host.split-view-horizontal{flex-direction:row}:host.split-view-vertical{flex-direction:column}::ng-deep .gutter.gutter-horizontal{cursor:col-resize}::ng-deep .gutter.gutter-vertical{cursor:row-resize}"]
})
], SplitViewComponent);
return SplitViewComponent;
}());
var SplitViewModule = /** @class */ (function () {
function SplitViewModule() {
}
SplitViewModule = __decorate([
NgModule({
declarations: [
SplitPaneDirective,
SplitViewGutterDirective,
SplitViewComponent
],
exports: [
SplitPaneDirective,
SplitViewGutterDirective,
SplitViewComponent
]
})
], SplitViewModule);
return SplitViewModule;
}());
/*
* Public API Surface of ngx-split-view
*/
/**
* Generated bundle index. Do not edit.
*/
export { SplitPaneDirective, SplitViewComponent, SplitViewGutterDirective, SplitViewModule };
//# sourceMappingURL=ngx-split-view.js.map