@alauda-fe/common
Version:
Alauda frontend team common codes.
99 lines • 12.8 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { MonacoEditorConfig } from 'ng-monaco-editor';
import { Observable, combineLatest, map } from 'rxjs';
import { ObservableInput, publishRef } from '../../core/public-api';
import { toNumber, toPercent } from '../util';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../mutable.directive";
const _c0 = [[["", "aclMosaicLeft", ""]], [["", "aclMosaicRight", ""]]];
const _c1 = ["[aclMosaicLeft]", "[aclMosaicRight]"];
export class MosaicComponent {
constructor() {
this.left = 0;
this.right = 0;
this.splitLocation = 50;
this.mutableOptions$ = combineLatest([this.left$, this.right$]).pipe(map(([left, right]) => ({
dragRange: [0, right, 100, left],
cursors: {
move: 'col-resize',
},
})), publishRef());
this.leftInset = {
top: '0',
right: toPercent(this.splitLocation),
bottom: '0',
left: '0',
};
this.rightInset = {
top: '0',
right: '0',
bottom: '0',
left: toPercent(100 - this.splitLocation),
};
this.splitInset = this.rightInset;
}
drag(element, root) {
requestAnimationFrame(() => {
this.leftInset = {
top: '0',
right: toPercent(1 - toNumber(element.style.left) / root.clientWidth, 100),
bottom: '0',
left: '0',
};
this.rightInset = {
top: '0',
right: '0',
bottom: '0',
left: toPercent(toNumber(element.style.left) / root.clientWidth, 100),
};
});
}
static { this.ɵfac = function MosaicComponent_Factory(t) { return new (t || MosaicComponent)(); }; }
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MosaicComponent, selectors: [["acl-mosaic"]], inputs: { left: "left", right: "right", splitLocation: "splitLocation" }, features: [i0.ɵɵProvidersFeature([
{ provide: MonacoEditorConfig, useValue: { autoLayoutInterval: 1 } },
])], ngContentSelectors: _c1, decls: 8, vars: 7, consts: [["root", ""], [1, "mosaic-root"], [1, "mosaic-left", 3, "ngStyle"], ["aclMutable", "", 1, "mosaic-split", 3, "aclOnDrag", "ngStyle", "aclMutableOptions", "aclResizable"], [1, "mosaic-right", 3, "ngStyle"]], template: function MosaicComponent_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵprojectionDef(_c0);
i0.ɵɵelementStart(0, "div", 1, 0)(2, "div", 2);
i0.ɵɵprojection(3);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(4, "div", 3);
i0.ɵɵpipe(5, "async");
i0.ɵɵlistener("aclOnDrag", function MosaicComponent_Template_div_aclOnDrag_4_listener($event) { i0.ɵɵrestoreView(_r1); const root_r2 = i0.ɵɵreference(1); return i0.ɵɵresetView(ctx.drag($event, root_r2)); });
i0.ɵɵelementEnd();
i0.ɵɵelementStart(6, "div", 4);
i0.ɵɵprojection(7, 1);
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngStyle", ctx.leftInset);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngStyle", ctx.splitInset)("aclMutableOptions", i0.ɵɵpipeBind1(5, 5, ctx.mutableOptions$))("aclResizable", false);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngStyle", ctx.rightInset);
} }, dependencies: [i1.NgStyle, i2.MutableDirective, i1.AsyncPipe], styles: [".mosaic-root[_ngcontent-%COMP%]{position:relative;width:100%;min-height:400px;overflow:hidden}.mosaic-split[_ngcontent-%COMP%]{position:absolute;margin-left:-1px;width:2px;z-index:1;background-color:rgb(var(--aui-color-n-10))}.mosaic-split[_ngcontent-%COMP%]:hover{width:4px;margin-left:-2px}.mosaic-left[_ngcontent-%COMP%], .mosaic-right[_ngcontent-%COMP%]{height:100%;position:absolute}.mutable-box[_ngcontent-%COMP%]{width:50px;height:50px;position:absolute;background-color:#444}"], changeDetection: 0 }); }
}
__decorate([
ObservableInput(),
__metadata("design:type", Observable)
], MosaicComponent.prototype, "left$", void 0);
__decorate([
ObservableInput(),
__metadata("design:type", Observable)
], MosaicComponent.prototype, "right$", void 0);
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MosaicComponent, [{
type: Component,
args: [{ selector: 'acl-mosaic', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
{ provide: MonacoEditorConfig, useValue: { autoLayoutInterval: 1 } },
], template: "<div\n class=\"mosaic-root\"\n #root\n>\n <div\n class=\"mosaic-left\"\n [ngStyle]=\"leftInset\"\n >\n <ng-content select=\"[aclMosaicLeft]\"></ng-content>\n </div>\n <div\n class=\"mosaic-split\"\n [ngStyle]=\"splitInset\"\n aclMutable\n (aclOnDrag)=\"drag($event, root)\"\n [aclMutableOptions]=\"mutableOptions$ | async\"\n [aclResizable]=\"false\"\n ></div>\n <div\n class=\"mosaic-right\"\n [ngStyle]=\"rightInset\"\n >\n <ng-content select=\"[aclMosaicRight]\"></ng-content>\n </div>\n</div>\n", styles: [".mosaic-root{position:relative;width:100%;min-height:400px;overflow:hidden}.mosaic-split{position:absolute;margin-left:-1px;width:2px;z-index:1;background-color:rgb(var(--aui-color-n-10))}.mosaic-split:hover{width:4px;margin-left:-2px}.mosaic-left,.mosaic-right{height:100%;position:absolute}.mutable-box{width:50px;height:50px;position:absolute;background-color:#444}\n"] }]
}], null, { left: [{
type: Input
}], left$: [], right: [{
type: Input
}], right$: [], splitLocation: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MosaicComponent, { className: "MosaicComponent" }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9zYWljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tbW9uL3NyYy9tdXRhYmxlL21vc2FpYy9tb3NhaWMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21tb24vc3JjL211dGFibGUvbW9zYWljL21vc2FpYy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDdEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxhQUFhLEVBQUUsR0FBRyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRXRELE9BQU8sRUFBRSxlQUFlLEVBQUUsVUFBVSxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFFcEUsT0FBTyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxTQUFTLENBQUM7Ozs7OztBQVc5QyxNQUFNLE9BQU8sZUFBZTtJQVQ1QjtRQVVXLFNBQUksR0FBYyxDQUFDLENBQUM7UUFJcEIsVUFBSyxHQUFjLENBQUMsQ0FBQztRQUs5QixrQkFBYSxHQUFHLEVBQUUsQ0FBQztRQUVuQixvQkFBZSxHQUFHLGFBQWEsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUM3RCxHQUFHLENBQ0QsQ0FBQyxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsRUFBRSxFQUFFLENBQ2hCLENBQUM7WUFDQyxTQUFTLEVBQUUsQ0FBQyxDQUFDLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUM7WUFDaEMsT0FBTyxFQUFFO2dCQUNQLElBQUksRUFBRSxZQUFZO2FBQ25CO1NBQ2lCLENBQUEsQ0FDdkIsRUFDRCxVQUFVLEVBQUUsQ0FDYixDQUFDO1FBRUYsY0FBUyxHQUFHO1lBQ1YsR0FBRyxFQUFFLEdBQUc7WUFDUixLQUFLLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUM7WUFDcEMsTUFBTSxFQUFFLEdBQUc7WUFDWCxJQUFJLEVBQUUsR0FBRztTQUNWLENBQUM7UUFFRixlQUFVLEdBQUc7WUFDWCxHQUFHLEVBQUUsR0FBRztZQUNSLEtBQUssRUFBRSxHQUFHO1lBQ1YsTUFBTSxFQUFFLEdBQUc7WUFDWCxJQUFJLEVBQUUsU0FBUyxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO1NBQzFDLENBQUM7UUFFRixlQUFVLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQztLQXFCOUI7SUFuQkMsSUFBSSxDQUFDLE9BQW9CLEVBQUUsSUFBb0I7UUFDN0MscUJBQXFCLENBQUMsR0FBRyxFQUFFO1lBQ3pCLElBQUksQ0FBQyxTQUFTLEdBQUc7Z0JBQ2YsR0FBRyxFQUFFLEdBQUc7Z0JBQ1IsS0FBSyxFQUFFLFNBQVMsQ0FDZCxDQUFDLEdBQUcsUUFBUSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFDbkQsR0FBRyxDQUNKO2dCQUNELE1BQU0sRUFBRSxHQUFHO2dCQUNYLElBQUksRUFBRSxHQUFHO2FBQ1YsQ0FBQztZQUNGLElBQUksQ0FBQyxVQUFVLEdBQUc7Z0JBQ2hCLEdBQUcsRUFBRSxHQUFHO2dCQUNSLEtBQUssRUFBRSxHQUFHO2dCQUNWLE1BQU0sRUFBRSxHQUFHO2dCQUNYLElBQUksRUFBRSxTQUFTLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFBRSxHQUFHLENBQUM7YUFDdEUsQ0FBQztRQUNKLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztnRkEzRFUsZUFBZTtvRUFBZixlQUFlLDBJQUpmO2dCQUNULEVBQUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLFFBQVEsRUFBRSxFQUFFLGtCQUFrQixFQUFFLENBQUMsRUFBRSxFQUFFO2FBQ3JFOzs7WUNYRCxBQUpGLGlDQUdDLGFBSUU7WUFDQyxrQkFBa0Q7WUFDcEQsaUJBQU07WUFDTiw4QkFPQzs7WUFIQyxnTEFBYSx5QkFBa0IsS0FBQztZQUdqQyxpQkFBTTtZQUNQLDhCQUdDO1lBQ0MscUJBQW1EO1lBRXZELEFBREUsaUJBQU0sRUFDRjs7WUFsQkYsZUFBcUI7WUFBckIsdUNBQXFCO1lBTXJCLGVBQXNCO1lBSXRCLEFBREEsQUFIQSx3Q0FBc0IsZ0VBR3VCLHVCQUN2QjtZQUl0QixlQUFzQjtZQUF0Qix3Q0FBc0I7OztBREF4QjtJQURDLGVBQWUsRUFBRTs4QkFDVixVQUFVOzhDQUFZO0FBSTlCO0lBREMsZUFBZSxFQUFFOzhCQUNULFVBQVU7K0NBQVk7aUZBUHBCLGVBQWU7Y0FUM0IsU0FBUzsyQkFDRSxZQUFZLG1CQUdMLHVCQUF1QixDQUFDLE1BQU0sYUFDcEM7b0JBQ1QsRUFBRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsUUFBUSxFQUFFLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQyxFQUFFLEVBQUU7aUJBQ3JFO2dCQUdRLElBQUk7a0JBQVosS0FBSztZQUVOLEtBQUssTUFFSSxLQUFLO2tCQUFiLEtBQUs7WUFFTixNQUFNLE1BR04sYUFBYTtrQkFEWixLQUFLOztrRkFUSyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1vbmFjb0VkaXRvckNvbmZpZyB9IGZyb20gJ25nLW1vbmFjby1lZGl0b3InO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgY29tYmluZUxhdGVzdCwgbWFwIH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IE9ic2VydmFibGVJbnB1dCwgcHVibGlzaFJlZiB9IGZyb20gJy4uLy4uL2NvcmUvcHVibGljLWFwaSc7XG5pbXBvcnQgeyBEcmFnUmFuZ2UsIE11dGFibGVPcHRpb25zIH0gZnJvbSAnLi4vLi4vcHVibGljLWFwaSc7XG5pbXBvcnQgeyB0b051bWJlciwgdG9QZXJjZW50IH0gZnJvbSAnLi4vdXRpbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FjbC1tb3NhaWMnLFxuICB0ZW1wbGF0ZVVybDogJy4vbW9zYWljLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbW9zYWljLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcm92aWRlcnM6IFtcbiAgICB7IHByb3ZpZGU6IE1vbmFjb0VkaXRvckNvbmZpZywgdXNlVmFsdWU6IHsgYXV0b0xheW91dEludGVydmFsOiAxIH0gfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgTW9zYWljQ29tcG9uZW50IHtcbiAgQElucHV0KCkgbGVmdDogRHJhZ1JhbmdlID0gMDtcbiAgQE9ic2VydmFibGVJbnB1dCgpXG4gIGxlZnQkITogT2JzZXJ2YWJsZTxEcmFnUmFuZ2U+O1xuXG4gIEBJbnB1dCgpIHJpZ2h0OiBEcmFnUmFuZ2UgPSAwO1xuICBAT2JzZXJ2YWJsZUlucHV0KClcbiAgcmlnaHQkITogT2JzZXJ2YWJsZTxEcmFnUmFuZ2U+O1xuXG4gIEBJbnB1dCgpXG4gIHNwbGl0TG9jYXRpb24gPSA1MDtcblxuICBtdXRhYmxlT3B0aW9ucyQgPSBjb21iaW5lTGF0ZXN0KFt0aGlzLmxlZnQkLCB0aGlzLnJpZ2h0JF0pLnBpcGUoXG4gICAgbWFwKFxuICAgICAgKFtsZWZ0LCByaWdodF0pID0+XG4gICAgICAgICh7XG4gICAgICAgICAgZHJhZ1JhbmdlOiBbMCwgcmlnaHQsIDEwMCwgbGVmdF0sXG4gICAgICAgICAgY3Vyc29yczoge1xuICAgICAgICAgICAgbW92ZTogJ2NvbC1yZXNpemUnLFxuICAgICAgICAgIH0sXG4gICAgICAgIH0gYXMgTXV0YWJsZU9wdGlvbnMpLFxuICAgICksXG4gICAgcHVibGlzaFJlZigpLFxuICApO1xuXG4gIGxlZnRJbnNldCA9IHtcbiAgICB0b3A6ICcwJyxcbiAgICByaWdodDogdG9QZXJjZW50KHRoaXMuc3BsaXRMb2NhdGlvbiksXG4gICAgYm90dG9tOiAnMCcsXG4gICAgbGVmdDogJzAnLFxuICB9O1xuXG4gIHJpZ2h0SW5zZXQgPSB7XG4gICAgdG9wOiAnMCcsXG4gICAgcmlnaHQ6ICcwJyxcbiAgICBib3R0b206ICcwJyxcbiAgICBsZWZ0OiB0b1BlcmNlbnQoMTAwIC0gdGhpcy5zcGxpdExvY2F0aW9uKSxcbiAgfTtcblxuICBzcGxpdEluc2V0ID0gdGhpcy5yaWdodEluc2V0O1xuXG4gIGRyYWcoZWxlbWVudDogSFRNTEVsZW1lbnQsIHJvb3Q6IEhUTUxEaXZFbGVtZW50KSB7XG4gICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKCgpID0+IHtcbiAgICAgIHRoaXMubGVmdEluc2V0ID0ge1xuICAgICAgICB0b3A6ICcwJyxcbiAgICAgICAgcmlnaHQ6IHRvUGVyY2VudChcbiAgICAgICAgICAxIC0gdG9OdW1iZXIoZWxlbWVudC5zdHlsZS5sZWZ0KSAvIHJvb3QuY2xpZW50V2lkdGgsXG4gICAgICAgICAgMTAwLFxuICAgICAgICApLFxuICAgICAgICBib3R0b206ICcwJyxcbiAgICAgICAgbGVmdDogJzAnLFxuICAgICAgfTtcbiAgICAgIHRoaXMucmlnaHRJbnNldCA9IHtcbiAgICAgICAgdG9wOiAnMCcsXG4gICAgICAgIHJpZ2h0OiAnMCcsXG4gICAgICAgIGJvdHRvbTogJzAnLFxuICAgICAgICBsZWZ0OiB0b1BlcmNlbnQodG9OdW1iZXIoZWxlbWVudC5zdHlsZS5sZWZ0KSAvIHJvb3QuY2xpZW50V2lkdGgsIDEwMCksXG4gICAgICB9O1xuICAgIH0pO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwibW9zYWljLXJvb3RcIlxuICAjcm9vdFxuPlxuICA8ZGl2XG4gICAgY2xhc3M9XCJtb3NhaWMtbGVmdFwiXG4gICAgW25nU3R5bGVdPVwibGVmdEluc2V0XCJcbiAgPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlthY2xNb3NhaWNMZWZ0XVwiPjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIDxkaXZcbiAgICBjbGFzcz1cIm1vc2FpYy1zcGxpdFwiXG4gICAgW25nU3R5bGVdPVwic3BsaXRJbnNldFwiXG4gICAgYWNsTXV0YWJsZVxuICAgIChhY2xPbkRyYWcpPVwiZHJhZygkZXZlbnQsIHJvb3QpXCJcbiAgICBbYWNsTXV0YWJsZU9wdGlvbnNdPVwibXV0YWJsZU9wdGlvbnMkIHwgYXN5bmNcIlxuICAgIFthY2xSZXNpemFibGVdPVwiZmFsc2VcIlxuICA+PC9kaXY+XG4gIDxkaXZcbiAgICBjbGFzcz1cIm1vc2FpYy1yaWdodFwiXG4gICAgW25nU3R5bGVdPVwicmlnaHRJbnNldFwiXG4gID5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbYWNsTW9zYWljUmlnaHRdXCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19