ng-cw-v12/fesm2015/ng-cw-v12-splitter.js

Angular UI component library

import * as i0 from '@angular/core';
import { Component, Input, ViewChild, EventEmitter, ChangeDetectionStrategy, ContentChildren, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

class SplitterPanelComponent {
}
SplitterPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SplitterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SplitterPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SplitterPanelComponent, selector: "nc-splitter-panel", inputs: { ncPanelSize: "ncPanelSize", ncMinSize: "ncMinSize" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
  <ng-template #content>
    <ng-content></ng-content>
  </ng-template>
  `, isInline: true, styles: ["\n    :host {\n      display: flex;\n      overflow: auto;\n      width: 100%;\n      height: 100%;\n    }\n  "] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SplitterPanelComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nc-splitter-panel',
                    template: `
  <ng-template #content>
    <ng-content></ng-content>
  </ng-template>
  `,
                    styles: [`
    :host {
      display: flex;
      overflow: auto;
      width: 100%;
      height: 100%;
    }
  `]
                }]
        }], propDecorators: { ncPanelSize: [{
                type: Input
            }], ncMinSize: [{
                type: Input
            }], contentTemplate: [{
                type: ViewChild,
                args: ['content']
            }] } });

class SplitterComponent {
    constructor(cdr, el) {
        this.cdr = cdr;
        this.el = el;
        this.ncLayout = 'horizontal';
        this.ncGutterSize = 4;
        this.ncGutterColor = '#e2e7ef';
        this.ncResize = new EventEmitter();
        this.ncResizeStart = new EventEmitter();
        this.ncResizeEnd = new EventEmitter();
        this.panels = [];
        this.isResizing = false;
        this.resizingIndex = -1;
        this.startPosition = 0;
        this.startSizes = [];
        this.onMouseMove = (event) => {
            if (!this.isResizing)
                return;
            const currentPosition = this.ncLayout === 'horizontal' ? event.clientX : event.clientY;
            const delta = ((currentPosition - this.startPosition) / this.getContainerSize()) * 100;
            const newSizes = [...this.startSizes];
            newSizes[this.resizingIndex] = Math.max(this.panels[this.resizingIndex].ncMinSize || 0, this.startSizes[this.resizingIndex] + delta);
            newSizes[this.resizingIndex + 1] = Math.max(this.panels[this.resizingIndex + 1].ncMinSize || 0, this.startSizes[this.resizingIndex + 1] - delta);
            const totalSize = newSizes.reduce((sum, size) => sum + size, 0);
            this.panels.forEach((panel, i) => panel.ncPanelSize = (newSizes[i] / totalSize) * 100);
            this.ncResize.emit({
                gutterIndex: this.resizingIndex,
                sizes: this.panels.map(panel => panel.ncPanelSize || 0),
                delta: delta,
                mouseEvent: event,
                containerSize: [this.el.nativeElement.offsetWidth, this.el.nativeElement.offsetHeight]
            });
            this.cdr.detectChanges();
        };
        this.onMouseUp = (event) => {
            this.isResizing = false;
            document.removeEventListener('mousemove', this.onMouseMove);
            document.removeEventListener('mouseup', this.onMouseUp);
            this.ncResizeEnd.emit({
                gutterIndex: this.resizingIndex,
                sizes: this.panels.map(panel => panel.ncPanelSize || 0),
                mouseEvent: event,
                containerSize: [this.el.nativeElement.offsetWidth, this.el.nativeElement.offsetHeight]
            });
        };
    }
    ngAfterViewInit() {
        this.panels = this.panelComponents.toArray();
        this.normalizeSizes();
        this.cdr.detectChanges();
    }
    normalizeSizes() {
        // 计算已设置尺寸的面板总和
        const configuredPanels = this.panels.filter(panel => panel.ncPanelSize);
        const configuredSize = configuredPanels.reduce((sum, panel) => sum + panel.ncPanelSize, 0);
        // 计算未设置尺寸的面板数量
        const unconfiguredCount = this.panels.length - configuredPanels.length;
        // 为未设置尺寸的面板平均分配剩余空间
        const remainingSize = 100 - configuredSize;
        const defaultSize = unconfiguredCount > 0 ? remainingSize / unconfiguredCount : 0;
        // 设置每个面板的最终尺寸
        this.panels.forEach(panel => {
            if (!panel.ncPanelSize) {
                panel.ncPanelSize = defaultSize;
            }
        });
    }
    onMouseDown(event, index) {
        this.isResizing = true;
        this.resizingIndex = index;
        this.startPosition = this.ncLayout === 'horizontal' ? event.clientX : event.clientY;
        this.startSizes = this.panels.map(panel => panel.ncPanelSize || 0);
        document.addEventListener('mousemove', this.onMouseMove);
        document.addEventListener('mouseup', this.onMouseUp);
        this.ncResizeStart.emit({
            gutterIndex: index,
            sizes: this.panels.map(panel => panel.ncPanelSize || 0),
            mouseEvent: event,
            containerSize: [this.el.nativeElement.offsetWidth, this.el.nativeElement.offsetHeight]
        });
    }
    getContainerSize() {
        return this.ncLayout === 'horizontal' ? this.el.nativeElement.offsetWidth : this.el.nativeElement.offsetHeight;
    }
}
SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SplitterComponent, selector: "nc-splitter", inputs: { ncLayout: "ncLayout", ncGutterSize: "ncGutterSize", ncGutterColor: "ncGutterColor" }, outputs: { ncResize: "ncResize", ncResizeStart: "ncResizeStart", ncResizeEnd: "ncResizeEnd" }, queries: [{ propertyName: "panelComponents", predicate: SplitterPanelComponent }], ngImport: i0, template: "<div class=\"nc-splitter\" [ngClass]=\"'nc-splitter-' + ncLayout\"\r\n    style=\"--ncGutterSize: {{ncGutterSize + 'px'}};--ncGutterColor: {{ncGutterColor}}\">\r\n    <ng-container *ngFor=\"let panel of panels; let i = index; let last = last\">\r\n        <div class=\"panel\" [style.flexBasis.%]=\"panel.ncPanelSize\">\r\n            <ng-container *ngTemplateOutlet=\"panel.contentTemplate\"></ng-container>\r\n        </div>\r\n        <div *ngIf=\"!last\" class=\"nc-splitter-gutter\" [ngClass]=\"'nc-splitter-gutter-' + ncLayout\"\r\n            (mousedown)=\"onMouseDown($event, i)\"></div>\r\n    </ng-container>\r\n</div>", styles: [":host{width:100%;height:100%}.nc-splitter{display:flex;width:100%;height:100%;overflow:hidden}.nc-splitter .panel{flex:1 1 auto;overflow:auto;display:flex}.nc-splitter .nc-splitter-gutter{background:var(--ncGutterColor);flex:0 0 var(--ncGutterSize)}.nc-splitter .nc-splitter-gutter-horizontal{cursor:col-resize}.nc-splitter .nc-splitter-gutter-vertical{cursor:row-resize}.nc-splitter-horizontal{flex-direction:row}.nc-splitter-vertical{flex-direction:column}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SplitterComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nc-splitter',
                    templateUrl: './splitter.component.html',
                    styleUrls: ['./splitter.component.less'],
                    changeDetection: ChangeDetectionStrategy.OnPush
                }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { ncLayout: [{
                type: Input
            }], ncGutterSize: [{
                type: Input
            }], ncGutterColor: [{
                type: Input
            }], panelComponents: [{
                type: ContentChildren,
                args: [SplitterPanelComponent]
            }], ncResize: [{
                type: Output
            }], ncResizeStart: [{
                type: Output
            }], ncResizeEnd: [{
                type: Output
            }] } });

class NcSplitterModule {
}
NcSplitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcSplitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcSplitterModule, declarations: [SplitterComponent,
        SplitterPanelComponent], imports: [CommonModule], exports: [SplitterComponent,
        SplitterPanelComponent] });
NcSplitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcSplitterModule, imports: [[
            CommonModule
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcSplitterModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        SplitterComponent,
                        SplitterPanelComponent
                    ],
                    imports: [
                        CommonModule
                    ],
                    exports: [
                        SplitterComponent,
                        SplitterPanelComponent
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { NcSplitterModule, SplitterComponent, SplitterPanelComponent };
//# sourceMappingURL=ng-cw-v12-splitter.js.map