dockview-angular 0.0.0-beta-0 → 0.0.0-experimental-4e3871a-20251228
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -56
- package/dist/cjs/index.d.ts +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/lib/dockview/dockview-angular.component.d.ts +49 -0
- package/dist/cjs/lib/dockview/dockview-angular.component.js +256 -0
- package/dist/cjs/lib/dockview/types.d.ts +27 -0
- package/dist/cjs/lib/dockview/types.js +8 -0
- package/dist/cjs/lib/dockview-angular.module.d.ts +2 -0
- package/dist/cjs/lib/dockview-angular.module.js +35 -0
- package/dist/cjs/lib/gridview/angular-gridview-panel.d.ts +9 -0
- package/dist/cjs/lib/gridview/angular-gridview-panel.js +21 -0
- package/dist/cjs/lib/gridview/gridview-angular.component.d.ts +28 -0
- package/dist/cjs/lib/gridview/gridview-angular.component.js +140 -0
- package/dist/cjs/lib/gridview/types.d.ts +12 -0
- package/dist/cjs/lib/gridview/types.js +6 -0
- package/dist/cjs/lib/paneview/angular-pane-part.d.ts +13 -0
- package/dist/cjs/lib/paneview/angular-pane-part.js +29 -0
- package/dist/cjs/lib/paneview/paneview-angular.component.d.ts +31 -0
- package/dist/cjs/lib/paneview/paneview-angular.component.js +166 -0
- package/dist/cjs/lib/paneview/types.d.ts +14 -0
- package/dist/cjs/lib/paneview/types.js +6 -0
- package/dist/cjs/lib/splitview/angular-splitview-panel.d.ts +9 -0
- package/dist/cjs/lib/splitview/angular-splitview-panel.js +21 -0
- package/dist/cjs/lib/splitview/splitview-angular.component.d.ts +28 -0
- package/dist/cjs/lib/splitview/splitview-angular.component.js +140 -0
- package/dist/cjs/lib/splitview/types.d.ts +12 -0
- package/dist/cjs/lib/splitview/types.js +6 -0
- package/dist/cjs/lib/utils/angular-renderer.d.ts +18 -0
- package/dist/cjs/lib/utils/angular-renderer.js +70 -0
- package/dist/cjs/lib/utils/component-factory.d.ts +20 -0
- package/dist/cjs/lib/utils/component-factory.js +103 -0
- package/dist/cjs/lib/utils/lifecycle-utils.d.ts +18 -0
- package/dist/cjs/lib/utils/lifecycle-utils.js +74 -0
- package/dist/cjs/public-api.d.ts +13 -0
- package/dist/cjs/public-api.js +32 -0
- package/dist/dockview-angular.amd.js +7677 -3744
- package/dist/dockview-angular.amd.js.map +1 -1
- package/dist/dockview-angular.amd.min.js +2 -2
- package/dist/dockview-angular.amd.min.js.map +1 -1
- package/dist/dockview-angular.amd.min.noStyle.js +2 -2
- package/dist/dockview-angular.amd.min.noStyle.js.map +1 -1
- package/dist/dockview-angular.amd.noStyle.js +7688 -3755
- package/dist/dockview-angular.amd.noStyle.js.map +1 -1
- package/dist/dockview-angular.cjs.js +6703 -2766
- package/dist/dockview-angular.cjs.js.map +1 -1
- package/dist/dockview-angular.esm.js +7649 -3733
- package/dist/dockview-angular.esm.js.map +1 -1
- package/dist/dockview-angular.esm.min.js +2 -2
- package/dist/dockview-angular.esm.min.js.map +1 -1
- package/dist/dockview-angular.js +7680 -3747
- package/dist/dockview-angular.js.map +1 -1
- package/dist/dockview-angular.min.js +2 -2
- package/dist/dockview-angular.min.js.map +1 -1
- package/dist/dockview-angular.min.noStyle.js +2 -2
- package/dist/dockview-angular.min.noStyle.js.map +1 -1
- package/dist/dockview-angular.noStyle.js +7691 -3758
- package/dist/dockview-angular.noStyle.js.map +1 -1
- package/dist/dockview.css +1229 -0
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/lib/dockview/dockview-angular.component.d.ts +49 -0
- package/dist/esm/lib/dockview/dockview-angular.component.js +253 -0
- package/dist/esm/lib/dockview/types.d.ts +27 -0
- package/dist/esm/lib/dockview/types.js +2 -0
- package/dist/esm/lib/dockview-angular.module.d.ts +2 -0
- package/dist/esm/lib/dockview-angular.module.js +32 -0
- package/dist/esm/lib/gridview/angular-gridview-panel.d.ts +9 -0
- package/dist/esm/lib/gridview/angular-gridview-panel.js +17 -0
- package/dist/esm/lib/gridview/gridview-angular.component.d.ts +28 -0
- package/dist/esm/lib/gridview/gridview-angular.component.js +137 -0
- package/dist/esm/lib/gridview/types.d.ts +12 -0
- package/dist/esm/lib/gridview/types.js +2 -0
- package/dist/esm/lib/paneview/angular-pane-part.d.ts +13 -0
- package/dist/esm/lib/paneview/angular-pane-part.js +25 -0
- package/dist/esm/lib/paneview/paneview-angular.component.d.ts +31 -0
- package/dist/esm/lib/paneview/paneview-angular.component.js +163 -0
- package/dist/esm/lib/paneview/types.d.ts +14 -0
- package/dist/esm/lib/paneview/types.js +2 -0
- package/dist/esm/lib/splitview/angular-splitview-panel.d.ts +9 -0
- package/dist/esm/lib/splitview/angular-splitview-panel.js +17 -0
- package/dist/esm/lib/splitview/splitview-angular.component.d.ts +28 -0
- package/dist/esm/lib/splitview/splitview-angular.component.js +137 -0
- package/dist/esm/lib/splitview/types.d.ts +12 -0
- package/dist/esm/lib/splitview/types.js +2 -0
- package/dist/esm/lib/utils/angular-renderer.d.ts +18 -0
- package/dist/esm/lib/utils/angular-renderer.js +66 -0
- package/dist/esm/lib/utils/component-factory.d.ts +20 -0
- package/dist/esm/lib/utils/component-factory.js +99 -0
- package/dist/esm/lib/utils/lifecycle-utils.d.ts +18 -0
- package/dist/esm/lib/utils/lifecycle-utils.js +68 -0
- package/dist/esm/public-api.d.ts +13 -0
- package/dist/esm/public-api.js +16 -0
- package/package.json +67 -58
- package/dist/cjs/utils.d.ts +0 -49
- package/dist/cjs/utils.js +0 -141
- package/dist/esm/utils.d.ts +0 -49
- package/dist/esm/utils.js +0 -119
- package/dist/styles/dockview.css +0 -0
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
3
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
4
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
5
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
6
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
7
|
+
};
|
|
8
|
+
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
9
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
exports.GridviewAngularComponent = void 0;
|
|
13
|
+
const core_1 = require("@angular/core");
|
|
14
|
+
const dockview_core_1 = require("dockview-core");
|
|
15
|
+
const component_factory_1 = require("../utils/component-factory");
|
|
16
|
+
const lifecycle_utils_1 = require("../utils/lifecycle-utils");
|
|
17
|
+
let GridviewAngularComponent = class GridviewAngularComponent {
|
|
18
|
+
constructor() {
|
|
19
|
+
this.ready = new core_1.EventEmitter();
|
|
20
|
+
this.lifecycleManager = new lifecycle_utils_1.AngularLifecycleManager();
|
|
21
|
+
this.injector = (0, core_1.inject)(core_1.Injector);
|
|
22
|
+
this.environmentInjector = (0, core_1.inject)(core_1.EnvironmentInjector);
|
|
23
|
+
}
|
|
24
|
+
ngOnInit() {
|
|
25
|
+
this.initializeGridview();
|
|
26
|
+
}
|
|
27
|
+
ngOnDestroy() {
|
|
28
|
+
this.lifecycleManager.destroy();
|
|
29
|
+
if (this.gridviewApi) {
|
|
30
|
+
this.gridviewApi.dispose();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
ngOnChanges(changes) {
|
|
34
|
+
if (this.gridviewApi) {
|
|
35
|
+
const coreChanges = {};
|
|
36
|
+
let hasChanges = false;
|
|
37
|
+
// Check for changes in core gridview properties
|
|
38
|
+
dockview_core_1.PROPERTY_KEYS_GRIDVIEW.forEach(key => {
|
|
39
|
+
if (changes[key] && !changes[key].isFirstChange()) {
|
|
40
|
+
coreChanges[key] = changes[key].currentValue;
|
|
41
|
+
hasChanges = true;
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
if (hasChanges) {
|
|
45
|
+
this.gridviewApi.updateOptions(coreChanges);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
getGridviewApi() {
|
|
50
|
+
return this.gridviewApi;
|
|
51
|
+
}
|
|
52
|
+
initializeGridview() {
|
|
53
|
+
if (!this.components) {
|
|
54
|
+
throw new Error('GridviewAngularComponent: components input is required');
|
|
55
|
+
}
|
|
56
|
+
const coreOptions = this.extractCoreOptions();
|
|
57
|
+
const frameworkOptions = this.createFrameworkOptions();
|
|
58
|
+
this.gridviewApi = (0, dockview_core_1.createGridview)(this.containerRef.nativeElement, {
|
|
59
|
+
...coreOptions,
|
|
60
|
+
...frameworkOptions
|
|
61
|
+
});
|
|
62
|
+
// Emit ready event
|
|
63
|
+
this.ready.emit({ api: this.gridviewApi });
|
|
64
|
+
}
|
|
65
|
+
extractCoreOptions() {
|
|
66
|
+
const coreOptions = {};
|
|
67
|
+
dockview_core_1.PROPERTY_KEYS_GRIDVIEW.forEach(key => {
|
|
68
|
+
const value = this[key];
|
|
69
|
+
if (value !== undefined) {
|
|
70
|
+
coreOptions[key] = value;
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
return coreOptions;
|
|
74
|
+
}
|
|
75
|
+
createFrameworkOptions() {
|
|
76
|
+
const componentFactory = new component_factory_1.AngularFrameworkComponentFactory(this.components, this.injector, this.environmentInjector);
|
|
77
|
+
return {
|
|
78
|
+
createComponent: (options) => {
|
|
79
|
+
return componentFactory.createGridviewComponent(options);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
exports.GridviewAngularComponent = GridviewAngularComponent;
|
|
85
|
+
__decorate([
|
|
86
|
+
(0, core_1.ViewChild)('gridviewContainer', { static: true }),
|
|
87
|
+
__metadata("design:type", core_1.ElementRef)
|
|
88
|
+
], GridviewAngularComponent.prototype, "containerRef", void 0);
|
|
89
|
+
__decorate([
|
|
90
|
+
(0, core_1.Input)(),
|
|
91
|
+
__metadata("design:type", Object)
|
|
92
|
+
], GridviewAngularComponent.prototype, "components", void 0);
|
|
93
|
+
__decorate([
|
|
94
|
+
(0, core_1.Input)(),
|
|
95
|
+
__metadata("design:type", String)
|
|
96
|
+
], GridviewAngularComponent.prototype, "className", void 0);
|
|
97
|
+
__decorate([
|
|
98
|
+
(0, core_1.Input)(),
|
|
99
|
+
__metadata("design:type", String)
|
|
100
|
+
], GridviewAngularComponent.prototype, "orientation", void 0);
|
|
101
|
+
__decorate([
|
|
102
|
+
(0, core_1.Input)(),
|
|
103
|
+
__metadata("design:type", Boolean)
|
|
104
|
+
], GridviewAngularComponent.prototype, "proportionalLayout", void 0);
|
|
105
|
+
__decorate([
|
|
106
|
+
(0, core_1.Input)(),
|
|
107
|
+
__metadata("design:type", Boolean)
|
|
108
|
+
], GridviewAngularComponent.prototype, "hideBorders", void 0);
|
|
109
|
+
__decorate([
|
|
110
|
+
(0, core_1.Input)(),
|
|
111
|
+
__metadata("design:type", Boolean)
|
|
112
|
+
], GridviewAngularComponent.prototype, "debug", void 0);
|
|
113
|
+
__decorate([
|
|
114
|
+
(0, core_1.Input)(),
|
|
115
|
+
__metadata("design:type", Boolean)
|
|
116
|
+
], GridviewAngularComponent.prototype, "disableAutoResizing", void 0);
|
|
117
|
+
__decorate([
|
|
118
|
+
(0, core_1.Output)(),
|
|
119
|
+
__metadata("design:type", Object)
|
|
120
|
+
], GridviewAngularComponent.prototype, "ready", void 0);
|
|
121
|
+
exports.GridviewAngularComponent = GridviewAngularComponent = __decorate([
|
|
122
|
+
(0, core_1.Component)({
|
|
123
|
+
selector: 'dv-gridview',
|
|
124
|
+
standalone: true,
|
|
125
|
+
template: '<div #gridviewContainer class="gridview-container"></div>',
|
|
126
|
+
styles: [`
|
|
127
|
+
:host {
|
|
128
|
+
display: block;
|
|
129
|
+
width: 100%;
|
|
130
|
+
height: 100%;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.gridview-container {
|
|
134
|
+
width: 100%;
|
|
135
|
+
height: 100%;
|
|
136
|
+
}
|
|
137
|
+
`],
|
|
138
|
+
changeDetection: core_1.ChangeDetectionStrategy.OnPush
|
|
139
|
+
})
|
|
140
|
+
], GridviewAngularComponent);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Type } from '@angular/core';
|
|
2
|
+
import { GridviewOptions, GridviewApi } from 'dockview-core';
|
|
3
|
+
export interface GridviewAngularReadyEvent {
|
|
4
|
+
api: GridviewApi;
|
|
5
|
+
}
|
|
6
|
+
export interface GridviewAngularOptions extends GridviewOptions {
|
|
7
|
+
components: Record<string, Type<any>>;
|
|
8
|
+
}
|
|
9
|
+
export interface GridviewAngularEvents {
|
|
10
|
+
ready: GridviewAngularReadyEvent;
|
|
11
|
+
}
|
|
12
|
+
export { GridviewApi, GridviewOptions } from 'dockview-core';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.GridviewApi = void 0;
|
|
4
|
+
// Re-export commonly used types from dockview-core
|
|
5
|
+
var dockview_core_1 = require("dockview-core");
|
|
6
|
+
Object.defineProperty(exports, "GridviewApi", { enumerable: true, get: function () { return dockview_core_1.GridviewApi; } });
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Type, Injector, EnvironmentInjector } from '@angular/core';
|
|
2
|
+
import { IPanePart, PanelUpdateEvent, PanePanelComponentInitParameter } from 'dockview-core';
|
|
3
|
+
export declare class AngularPanePart implements IPanePart {
|
|
4
|
+
private readonly angularComponent;
|
|
5
|
+
private readonly injector;
|
|
6
|
+
private readonly environmentInjector?;
|
|
7
|
+
private renderer;
|
|
8
|
+
constructor(angularComponent: Type<any>, injector: Injector, environmentInjector?: EnvironmentInjector | undefined);
|
|
9
|
+
get element(): HTMLElement;
|
|
10
|
+
init(parameters: PanePanelComponentInitParameter): void;
|
|
11
|
+
update(params: PanelUpdateEvent): void;
|
|
12
|
+
dispose(): void;
|
|
13
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AngularPanePart = void 0;
|
|
4
|
+
const angular_renderer_1 = require("../utils/angular-renderer");
|
|
5
|
+
class AngularPanePart {
|
|
6
|
+
constructor(angularComponent, injector, environmentInjector) {
|
|
7
|
+
this.angularComponent = angularComponent;
|
|
8
|
+
this.injector = injector;
|
|
9
|
+
this.environmentInjector = environmentInjector;
|
|
10
|
+
this.renderer = new angular_renderer_1.AngularRenderer({
|
|
11
|
+
component: this.angularComponent,
|
|
12
|
+
injector: this.injector,
|
|
13
|
+
environmentInjector: this.environmentInjector
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
get element() {
|
|
17
|
+
return this.renderer.element;
|
|
18
|
+
}
|
|
19
|
+
init(parameters) {
|
|
20
|
+
this.renderer.init(parameters);
|
|
21
|
+
}
|
|
22
|
+
update(params) {
|
|
23
|
+
this.renderer.update(params);
|
|
24
|
+
}
|
|
25
|
+
dispose() {
|
|
26
|
+
this.renderer.dispose();
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
exports.AngularPanePart = AngularPanePart;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { EventEmitter, OnDestroy, OnInit, Type, OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
+
import { PaneviewApi, PaneviewOptions, PaneviewDropEvent } from 'dockview-core';
|
|
3
|
+
import { PaneviewAngularReadyEvent } from './types';
|
|
4
|
+
export interface PaneviewAngularOptions extends PaneviewOptions {
|
|
5
|
+
components: Record<string, Type<any>>;
|
|
6
|
+
headerComponents?: Record<string, Type<any>>;
|
|
7
|
+
}
|
|
8
|
+
export declare class PaneviewAngularComponent implements OnInit, OnDestroy, OnChanges {
|
|
9
|
+
private containerRef;
|
|
10
|
+
components: Record<string, Type<any>>;
|
|
11
|
+
headerComponents?: Record<string, Type<any>>;
|
|
12
|
+
className?: string;
|
|
13
|
+
orientation?: 'horizontal' | 'vertical';
|
|
14
|
+
hideBorders?: boolean;
|
|
15
|
+
debug?: boolean;
|
|
16
|
+
disableAutoResizing?: boolean;
|
|
17
|
+
ready: EventEmitter<PaneviewAngularReadyEvent>;
|
|
18
|
+
drop: EventEmitter<PaneviewDropEvent>;
|
|
19
|
+
private paneviewApi?;
|
|
20
|
+
private lifecycleManager;
|
|
21
|
+
private injector;
|
|
22
|
+
private environmentInjector;
|
|
23
|
+
ngOnInit(): void;
|
|
24
|
+
ngOnDestroy(): void;
|
|
25
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
26
|
+
getPaneviewApi(): PaneviewApi | undefined;
|
|
27
|
+
private initializePaneview;
|
|
28
|
+
private extractCoreOptions;
|
|
29
|
+
private createFrameworkOptions;
|
|
30
|
+
private setupEventListeners;
|
|
31
|
+
}
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
3
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
4
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
5
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
6
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
7
|
+
};
|
|
8
|
+
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
9
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
exports.PaneviewAngularComponent = void 0;
|
|
13
|
+
const core_1 = require("@angular/core");
|
|
14
|
+
const dockview_core_1 = require("dockview-core");
|
|
15
|
+
const component_factory_1 = require("../utils/component-factory");
|
|
16
|
+
const lifecycle_utils_1 = require("../utils/lifecycle-utils");
|
|
17
|
+
const angular_pane_part_1 = require("./angular-pane-part");
|
|
18
|
+
let PaneviewAngularComponent = class PaneviewAngularComponent {
|
|
19
|
+
constructor() {
|
|
20
|
+
this.ready = new core_1.EventEmitter();
|
|
21
|
+
this.drop = new core_1.EventEmitter();
|
|
22
|
+
this.lifecycleManager = new lifecycle_utils_1.AngularLifecycleManager();
|
|
23
|
+
this.injector = (0, core_1.inject)(core_1.Injector);
|
|
24
|
+
this.environmentInjector = (0, core_1.inject)(core_1.EnvironmentInjector);
|
|
25
|
+
}
|
|
26
|
+
ngOnInit() {
|
|
27
|
+
this.initializePaneview();
|
|
28
|
+
}
|
|
29
|
+
ngOnDestroy() {
|
|
30
|
+
this.lifecycleManager.destroy();
|
|
31
|
+
if (this.paneviewApi) {
|
|
32
|
+
this.paneviewApi.dispose();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
ngOnChanges(changes) {
|
|
36
|
+
if (this.paneviewApi) {
|
|
37
|
+
const coreChanges = {};
|
|
38
|
+
let hasChanges = false;
|
|
39
|
+
// Check for changes in core paneview properties
|
|
40
|
+
dockview_core_1.PROPERTY_KEYS_PANEVIEW.forEach(key => {
|
|
41
|
+
if (changes[key] && !changes[key].isFirstChange()) {
|
|
42
|
+
coreChanges[key] = changes[key].currentValue;
|
|
43
|
+
hasChanges = true;
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
if (hasChanges) {
|
|
47
|
+
this.paneviewApi.updateOptions(coreChanges);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
getPaneviewApi() {
|
|
52
|
+
return this.paneviewApi;
|
|
53
|
+
}
|
|
54
|
+
initializePaneview() {
|
|
55
|
+
if (!this.components) {
|
|
56
|
+
throw new Error('PaneviewAngularComponent: components input is required');
|
|
57
|
+
}
|
|
58
|
+
const coreOptions = this.extractCoreOptions();
|
|
59
|
+
const frameworkOptions = this.createFrameworkOptions();
|
|
60
|
+
this.paneviewApi = (0, dockview_core_1.createPaneview)(this.containerRef.nativeElement, {
|
|
61
|
+
...coreOptions,
|
|
62
|
+
...frameworkOptions
|
|
63
|
+
});
|
|
64
|
+
// Set up event listeners
|
|
65
|
+
this.setupEventListeners();
|
|
66
|
+
// Emit ready event
|
|
67
|
+
this.ready.emit({ api: this.paneviewApi });
|
|
68
|
+
}
|
|
69
|
+
extractCoreOptions() {
|
|
70
|
+
const coreOptions = {};
|
|
71
|
+
dockview_core_1.PROPERTY_KEYS_PANEVIEW.forEach(key => {
|
|
72
|
+
const value = this[key];
|
|
73
|
+
if (value !== undefined) {
|
|
74
|
+
coreOptions[key] = value;
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
return coreOptions;
|
|
78
|
+
}
|
|
79
|
+
createFrameworkOptions() {
|
|
80
|
+
const componentFactory = new component_factory_1.AngularFrameworkComponentFactory(this.components, this.injector, this.environmentInjector, this.headerComponents);
|
|
81
|
+
return {
|
|
82
|
+
createComponent: (options) => {
|
|
83
|
+
return componentFactory.createPaneviewComponent(options);
|
|
84
|
+
},
|
|
85
|
+
createHeaderComponent: this.headerComponents
|
|
86
|
+
? (options) => {
|
|
87
|
+
return new angular_pane_part_1.AngularPanePart(this.headerComponents[options.name], this.injector, this.environmentInjector);
|
|
88
|
+
}
|
|
89
|
+
: undefined
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
setupEventListeners() {
|
|
93
|
+
if (!this.paneviewApi) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
// Set up event subscriptions using lifecycle manager
|
|
97
|
+
const api = this.paneviewApi;
|
|
98
|
+
if (this.drop.observers.length > 0) {
|
|
99
|
+
const disposable = api.onDidDrop(event => {
|
|
100
|
+
this.drop.emit(event);
|
|
101
|
+
});
|
|
102
|
+
this.lifecycleManager.addDisposable(disposable);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
exports.PaneviewAngularComponent = PaneviewAngularComponent;
|
|
107
|
+
__decorate([
|
|
108
|
+
(0, core_1.ViewChild)('paneviewContainer', { static: true }),
|
|
109
|
+
__metadata("design:type", core_1.ElementRef)
|
|
110
|
+
], PaneviewAngularComponent.prototype, "containerRef", void 0);
|
|
111
|
+
__decorate([
|
|
112
|
+
(0, core_1.Input)(),
|
|
113
|
+
__metadata("design:type", Object)
|
|
114
|
+
], PaneviewAngularComponent.prototype, "components", void 0);
|
|
115
|
+
__decorate([
|
|
116
|
+
(0, core_1.Input)(),
|
|
117
|
+
__metadata("design:type", Object)
|
|
118
|
+
], PaneviewAngularComponent.prototype, "headerComponents", void 0);
|
|
119
|
+
__decorate([
|
|
120
|
+
(0, core_1.Input)(),
|
|
121
|
+
__metadata("design:type", String)
|
|
122
|
+
], PaneviewAngularComponent.prototype, "className", void 0);
|
|
123
|
+
__decorate([
|
|
124
|
+
(0, core_1.Input)(),
|
|
125
|
+
__metadata("design:type", String)
|
|
126
|
+
], PaneviewAngularComponent.prototype, "orientation", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
(0, core_1.Input)(),
|
|
129
|
+
__metadata("design:type", Boolean)
|
|
130
|
+
], PaneviewAngularComponent.prototype, "hideBorders", void 0);
|
|
131
|
+
__decorate([
|
|
132
|
+
(0, core_1.Input)(),
|
|
133
|
+
__metadata("design:type", Boolean)
|
|
134
|
+
], PaneviewAngularComponent.prototype, "debug", void 0);
|
|
135
|
+
__decorate([
|
|
136
|
+
(0, core_1.Input)(),
|
|
137
|
+
__metadata("design:type", Boolean)
|
|
138
|
+
], PaneviewAngularComponent.prototype, "disableAutoResizing", void 0);
|
|
139
|
+
__decorate([
|
|
140
|
+
(0, core_1.Output)(),
|
|
141
|
+
__metadata("design:type", Object)
|
|
142
|
+
], PaneviewAngularComponent.prototype, "ready", void 0);
|
|
143
|
+
__decorate([
|
|
144
|
+
(0, core_1.Output)(),
|
|
145
|
+
__metadata("design:type", Object)
|
|
146
|
+
], PaneviewAngularComponent.prototype, "drop", void 0);
|
|
147
|
+
exports.PaneviewAngularComponent = PaneviewAngularComponent = __decorate([
|
|
148
|
+
(0, core_1.Component)({
|
|
149
|
+
selector: 'dv-paneview',
|
|
150
|
+
standalone: true,
|
|
151
|
+
template: '<div #paneviewContainer class="paneview-container"></div>',
|
|
152
|
+
styles: [`
|
|
153
|
+
:host {
|
|
154
|
+
display: block;
|
|
155
|
+
width: 100%;
|
|
156
|
+
height: 100%;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.paneview-container {
|
|
160
|
+
width: 100%;
|
|
161
|
+
height: 100%;
|
|
162
|
+
}
|
|
163
|
+
`],
|
|
164
|
+
changeDetection: core_1.ChangeDetectionStrategy.OnPush
|
|
165
|
+
})
|
|
166
|
+
], PaneviewAngularComponent);
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Type } from '@angular/core';
|
|
2
|
+
import { PaneviewOptions, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
|
|
3
|
+
export interface PaneviewAngularReadyEvent {
|
|
4
|
+
api: PaneviewApi;
|
|
5
|
+
}
|
|
6
|
+
export interface PaneviewAngularOptions extends PaneviewOptions {
|
|
7
|
+
components: Record<string, Type<any>>;
|
|
8
|
+
headerComponents?: Record<string, Type<any>>;
|
|
9
|
+
}
|
|
10
|
+
export interface PaneviewAngularEvents {
|
|
11
|
+
ready: PaneviewAngularReadyEvent;
|
|
12
|
+
drop: PaneviewDropEvent;
|
|
13
|
+
}
|
|
14
|
+
export { PaneviewApi, PaneviewDropEvent, PaneviewOptions } from 'dockview-core';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PaneviewApi = void 0;
|
|
4
|
+
// Re-export commonly used types from dockview-core
|
|
5
|
+
var dockview_core_1 = require("dockview-core");
|
|
6
|
+
Object.defineProperty(exports, "PaneviewApi", { enumerable: true, get: function () { return dockview_core_1.PaneviewApi; } });
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Type, Injector, EnvironmentInjector } from '@angular/core';
|
|
2
|
+
import { SplitviewPanel, IFrameworkPart } from 'dockview-core';
|
|
3
|
+
export declare class AngularSplitviewPanel extends SplitviewPanel {
|
|
4
|
+
private readonly angularComponent;
|
|
5
|
+
private readonly injector;
|
|
6
|
+
private readonly environmentInjector?;
|
|
7
|
+
constructor(id: string, component: string, angularComponent: Type<any>, injector: Injector, environmentInjector?: EnvironmentInjector | undefined);
|
|
8
|
+
getComponent(): IFrameworkPart;
|
|
9
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AngularSplitviewPanel = void 0;
|
|
4
|
+
const dockview_core_1 = require("dockview-core");
|
|
5
|
+
const angular_renderer_1 = require("../utils/angular-renderer");
|
|
6
|
+
class AngularSplitviewPanel extends dockview_core_1.SplitviewPanel {
|
|
7
|
+
constructor(id, component, angularComponent, injector, environmentInjector) {
|
|
8
|
+
super(id, component);
|
|
9
|
+
this.angularComponent = angularComponent;
|
|
10
|
+
this.injector = injector;
|
|
11
|
+
this.environmentInjector = environmentInjector;
|
|
12
|
+
}
|
|
13
|
+
getComponent() {
|
|
14
|
+
return new angular_renderer_1.AngularRenderer({
|
|
15
|
+
component: this.angularComponent,
|
|
16
|
+
injector: this.injector,
|
|
17
|
+
environmentInjector: this.environmentInjector
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
exports.AngularSplitviewPanel = AngularSplitviewPanel;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { EventEmitter, OnDestroy, OnInit, Type, OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
+
import { SplitviewApi, SplitviewOptions } from 'dockview-core';
|
|
3
|
+
import { SplitviewAngularReadyEvent } from './types';
|
|
4
|
+
export interface SplitviewAngularOptions extends SplitviewOptions {
|
|
5
|
+
components: Record<string, Type<any>>;
|
|
6
|
+
}
|
|
7
|
+
export declare class SplitviewAngularComponent implements OnInit, OnDestroy, OnChanges {
|
|
8
|
+
private containerRef;
|
|
9
|
+
components: Record<string, Type<any>>;
|
|
10
|
+
className?: string;
|
|
11
|
+
orientation?: 'horizontal' | 'vertical';
|
|
12
|
+
proportionalLayout?: boolean;
|
|
13
|
+
hideBorders?: boolean;
|
|
14
|
+
debug?: boolean;
|
|
15
|
+
disableAutoResizing?: boolean;
|
|
16
|
+
ready: EventEmitter<SplitviewAngularReadyEvent>;
|
|
17
|
+
private splitviewApi?;
|
|
18
|
+
private lifecycleManager;
|
|
19
|
+
private injector;
|
|
20
|
+
private environmentInjector;
|
|
21
|
+
ngOnInit(): void;
|
|
22
|
+
ngOnDestroy(): void;
|
|
23
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
24
|
+
getSplitviewApi(): SplitviewApi | undefined;
|
|
25
|
+
private initializeSplitview;
|
|
26
|
+
private extractCoreOptions;
|
|
27
|
+
private createFrameworkOptions;
|
|
28
|
+
}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
3
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
4
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
5
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
6
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
7
|
+
};
|
|
8
|
+
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
9
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
exports.SplitviewAngularComponent = void 0;
|
|
13
|
+
const core_1 = require("@angular/core");
|
|
14
|
+
const dockview_core_1 = require("dockview-core");
|
|
15
|
+
const component_factory_1 = require("../utils/component-factory");
|
|
16
|
+
const lifecycle_utils_1 = require("../utils/lifecycle-utils");
|
|
17
|
+
let SplitviewAngularComponent = class SplitviewAngularComponent {
|
|
18
|
+
constructor() {
|
|
19
|
+
this.ready = new core_1.EventEmitter();
|
|
20
|
+
this.lifecycleManager = new lifecycle_utils_1.AngularLifecycleManager();
|
|
21
|
+
this.injector = (0, core_1.inject)(core_1.Injector);
|
|
22
|
+
this.environmentInjector = (0, core_1.inject)(core_1.EnvironmentInjector);
|
|
23
|
+
}
|
|
24
|
+
ngOnInit() {
|
|
25
|
+
this.initializeSplitview();
|
|
26
|
+
}
|
|
27
|
+
ngOnDestroy() {
|
|
28
|
+
this.lifecycleManager.destroy();
|
|
29
|
+
if (this.splitviewApi) {
|
|
30
|
+
this.splitviewApi.dispose();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
ngOnChanges(changes) {
|
|
34
|
+
if (this.splitviewApi) {
|
|
35
|
+
const coreChanges = {};
|
|
36
|
+
let hasChanges = false;
|
|
37
|
+
// Check for changes in core splitview properties
|
|
38
|
+
dockview_core_1.PROPERTY_KEYS_SPLITVIEW.forEach(key => {
|
|
39
|
+
if (changes[key] && !changes[key].isFirstChange()) {
|
|
40
|
+
coreChanges[key] = changes[key].currentValue;
|
|
41
|
+
hasChanges = true;
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
if (hasChanges) {
|
|
45
|
+
this.splitviewApi.updateOptions(coreChanges);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
getSplitviewApi() {
|
|
50
|
+
return this.splitviewApi;
|
|
51
|
+
}
|
|
52
|
+
initializeSplitview() {
|
|
53
|
+
if (!this.components) {
|
|
54
|
+
throw new Error('SplitviewAngularComponent: components input is required');
|
|
55
|
+
}
|
|
56
|
+
const coreOptions = this.extractCoreOptions();
|
|
57
|
+
const frameworkOptions = this.createFrameworkOptions();
|
|
58
|
+
this.splitviewApi = (0, dockview_core_1.createSplitview)(this.containerRef.nativeElement, {
|
|
59
|
+
...coreOptions,
|
|
60
|
+
...frameworkOptions
|
|
61
|
+
});
|
|
62
|
+
// Emit ready event
|
|
63
|
+
this.ready.emit({ api: this.splitviewApi });
|
|
64
|
+
}
|
|
65
|
+
extractCoreOptions() {
|
|
66
|
+
const coreOptions = {};
|
|
67
|
+
dockview_core_1.PROPERTY_KEYS_SPLITVIEW.forEach(key => {
|
|
68
|
+
const value = this[key];
|
|
69
|
+
if (value !== undefined) {
|
|
70
|
+
coreOptions[key] = value;
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
return coreOptions;
|
|
74
|
+
}
|
|
75
|
+
createFrameworkOptions() {
|
|
76
|
+
const componentFactory = new component_factory_1.AngularFrameworkComponentFactory(this.components, this.injector, this.environmentInjector);
|
|
77
|
+
return {
|
|
78
|
+
createComponent: (options) => {
|
|
79
|
+
return componentFactory.createSplitviewComponent(options);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
exports.SplitviewAngularComponent = SplitviewAngularComponent;
|
|
85
|
+
__decorate([
|
|
86
|
+
(0, core_1.ViewChild)('splitviewContainer', { static: true }),
|
|
87
|
+
__metadata("design:type", core_1.ElementRef)
|
|
88
|
+
], SplitviewAngularComponent.prototype, "containerRef", void 0);
|
|
89
|
+
__decorate([
|
|
90
|
+
(0, core_1.Input)(),
|
|
91
|
+
__metadata("design:type", Object)
|
|
92
|
+
], SplitviewAngularComponent.prototype, "components", void 0);
|
|
93
|
+
__decorate([
|
|
94
|
+
(0, core_1.Input)(),
|
|
95
|
+
__metadata("design:type", String)
|
|
96
|
+
], SplitviewAngularComponent.prototype, "className", void 0);
|
|
97
|
+
__decorate([
|
|
98
|
+
(0, core_1.Input)(),
|
|
99
|
+
__metadata("design:type", String)
|
|
100
|
+
], SplitviewAngularComponent.prototype, "orientation", void 0);
|
|
101
|
+
__decorate([
|
|
102
|
+
(0, core_1.Input)(),
|
|
103
|
+
__metadata("design:type", Boolean)
|
|
104
|
+
], SplitviewAngularComponent.prototype, "proportionalLayout", void 0);
|
|
105
|
+
__decorate([
|
|
106
|
+
(0, core_1.Input)(),
|
|
107
|
+
__metadata("design:type", Boolean)
|
|
108
|
+
], SplitviewAngularComponent.prototype, "hideBorders", void 0);
|
|
109
|
+
__decorate([
|
|
110
|
+
(0, core_1.Input)(),
|
|
111
|
+
__metadata("design:type", Boolean)
|
|
112
|
+
], SplitviewAngularComponent.prototype, "debug", void 0);
|
|
113
|
+
__decorate([
|
|
114
|
+
(0, core_1.Input)(),
|
|
115
|
+
__metadata("design:type", Boolean)
|
|
116
|
+
], SplitviewAngularComponent.prototype, "disableAutoResizing", void 0);
|
|
117
|
+
__decorate([
|
|
118
|
+
(0, core_1.Output)(),
|
|
119
|
+
__metadata("design:type", Object)
|
|
120
|
+
], SplitviewAngularComponent.prototype, "ready", void 0);
|
|
121
|
+
exports.SplitviewAngularComponent = SplitviewAngularComponent = __decorate([
|
|
122
|
+
(0, core_1.Component)({
|
|
123
|
+
selector: 'dv-splitview',
|
|
124
|
+
standalone: true,
|
|
125
|
+
template: '<div #splitviewContainer class="splitview-container"></div>',
|
|
126
|
+
styles: [`
|
|
127
|
+
:host {
|
|
128
|
+
display: block;
|
|
129
|
+
width: 100%;
|
|
130
|
+
height: 100%;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.splitview-container {
|
|
134
|
+
width: 100%;
|
|
135
|
+
height: 100%;
|
|
136
|
+
}
|
|
137
|
+
`],
|
|
138
|
+
changeDetection: core_1.ChangeDetectionStrategy.OnPush
|
|
139
|
+
})
|
|
140
|
+
], SplitviewAngularComponent);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Type } from '@angular/core';
|
|
2
|
+
import { SplitviewOptions, SplitviewApi } from 'dockview-core';
|
|
3
|
+
export interface SplitviewAngularReadyEvent {
|
|
4
|
+
api: SplitviewApi;
|
|
5
|
+
}
|
|
6
|
+
export interface SplitviewAngularOptions extends SplitviewOptions {
|
|
7
|
+
components: Record<string, Type<any>>;
|
|
8
|
+
}
|
|
9
|
+
export interface SplitviewAngularEvents {
|
|
10
|
+
ready: SplitviewAngularReadyEvent;
|
|
11
|
+
}
|
|
12
|
+
export { SplitviewApi, SplitviewOptions } from 'dockview-core';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SplitviewApi = void 0;
|
|
4
|
+
// Re-export commonly used types from dockview-core
|
|
5
|
+
var dockview_core_1 = require("dockview-core");
|
|
6
|
+
Object.defineProperty(exports, "SplitviewApi", { enumerable: true, get: function () { return dockview_core_1.SplitviewApi; } });
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Injector, Type, EnvironmentInjector } from '@angular/core';
|
|
2
|
+
import { IContentRenderer, IFrameworkPart, Parameters } from 'dockview-core';
|
|
3
|
+
export interface AngularRendererOptions {
|
|
4
|
+
component: Type<any>;
|
|
5
|
+
injector: Injector;
|
|
6
|
+
environmentInjector?: EnvironmentInjector;
|
|
7
|
+
}
|
|
8
|
+
export declare class AngularRenderer implements IContentRenderer, IFrameworkPart {
|
|
9
|
+
private options;
|
|
10
|
+
private componentRef;
|
|
11
|
+
private _element;
|
|
12
|
+
constructor(options: AngularRendererOptions);
|
|
13
|
+
get element(): HTMLElement;
|
|
14
|
+
init(parameters: Parameters): void;
|
|
15
|
+
update(params: Parameters): void;
|
|
16
|
+
private render;
|
|
17
|
+
dispose(): void;
|
|
18
|
+
}
|