dockview-angular 0.0.0-beta-0 → 4.9.0

package/dist/cjs/lib/utils/angular-renderer.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngularRenderer = void 0;
+const core_1 = require("@angular/core");
+class AngularRenderer {
+    constructor(options) {
+        this.options = options;
+        this.componentRef = null;
+        this._element = null;
+    }
+    get element() {
+        if (!this._element) {
+            throw new Error('Angular renderer not initialized');
+        }
+        return this._element;
+    }
+    init(parameters) {
+        this.render(parameters);
+    }
+    update(params) {
+        if (this.componentRef) {
+            Object.keys(params).forEach(key => {
+                if (this.componentRef.instance.hasOwnProperty(key)) {
+                    this.componentRef.instance[key] = params[key];
+                }
+            });
+            this.componentRef.changeDetectorRef.detectChanges();
+        }
+    }
+    render(parameters) {
+        try {
+            // Create the component using modern Angular API
+            this.componentRef = (0, core_1.createComponent)(this.options.component, {
+                environmentInjector: this.options.environmentInjector || this.options.injector,
+                elementInjector: this.options.injector
+            });
+            // Set initial parameters
+            Object.keys(parameters).forEach(key => {
+                if (this.componentRef.instance.hasOwnProperty(key)) {
+                    this.componentRef.instance[key] = parameters[key];
+                }
+            });
+            // Get the DOM element
+            const hostView = this.componentRef.hostView;
+            this._element = hostView.rootNodes[0];
+            // Trigger change detection
+            this.componentRef.changeDetectorRef.detectChanges();
+        }
+        catch (error) {
+            console.error('Error creating Angular component:', error);
+            throw error;
+        }
+    }
+    dispose() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+        this._element = null;
+    }
+}
+exports.AngularRenderer = AngularRenderer;

package/dist/cjs/lib/utils/component-factory.d.ts

@@ -0,0 +1,20 @@
+import { Type, Injector, EnvironmentInjector } from '@angular/core';
+import { IContentRenderer, ITabRenderer, IWatermarkRenderer, IHeaderActionsRenderer, CreateComponentOptions, GridviewPanel, SplitviewPanel, IPanePart } from 'dockview-core';
+export declare class AngularFrameworkComponentFactory {
+    private components;
+    private injector;
+    private environmentInjector?;
+    private tabComponents?;
+    private watermarkComponent?;
+    private headerActionsComponents?;
+    private defaultTabComponent?;
+    constructor(components: Record<string, Type<any>>, injector: Injector, environmentInjector?: EnvironmentInjector | undefined, tabComponents?: Record<string, Type<any>> | undefined, watermarkComponent?: Type<any> | undefined, headerActionsComponents?: Record<string, Type<any>> | undefined, defaultTabComponent?: Type<any> | undefined);
+    createDockviewComponent(options: CreateComponentOptions): IContentRenderer;
+    createGridviewComponent(options: CreateComponentOptions): GridviewPanel;
+    createSplitviewComponent(options: CreateComponentOptions): SplitviewPanel;
+    createPaneviewComponent(options: CreateComponentOptions): IPanePart;
+    createComponent(options: CreateComponentOptions): IContentRenderer;
+    createTabComponent(options: CreateComponentOptions): ITabRenderer | undefined;
+    createWatermarkComponent(): IWatermarkRenderer;
+    createHeaderActionsComponent(name: string): IHeaderActionsRenderer | undefined;
+}

package/dist/cjs/lib/utils/component-factory.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngularFrameworkComponentFactory = void 0;
+const angular_renderer_1 = require("./angular-renderer");
+const angular_gridview_panel_1 = require("../gridview/angular-gridview-panel");
+const angular_splitview_panel_1 = require("../splitview/angular-splitview-panel");
+const angular_pane_part_1 = require("../paneview/angular-pane-part");
+class AngularFrameworkComponentFactory {
+    constructor(components, injector, environmentInjector, tabComponents, watermarkComponent, headerActionsComponents, defaultTabComponent) {
+        this.components = components;
+        this.injector = injector;
+        this.environmentInjector = environmentInjector;
+        this.tabComponents = tabComponents;
+        this.watermarkComponent = watermarkComponent;
+        this.headerActionsComponents = headerActionsComponents;
+        this.defaultTabComponent = defaultTabComponent;
+    }
+    // For DockviewComponent
+    createDockviewComponent(options) {
+        const component = this.components[options.name];
+        if (!component) {
+            throw new Error(`Component '${options.name}' not found in component registry`);
+        }
+        const renderer = new angular_renderer_1.AngularRenderer({
+            component,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector
+        });
+        renderer.init(options);
+        return renderer;
+    }
+    // For GridviewComponent  
+    createGridviewComponent(options) {
+        const component = this.components[options.name];
+        if (!component) {
+            throw new Error(`Component '${options.name}' not found in component registry`);
+        }
+        return new angular_gridview_panel_1.AngularGridviewPanel(options.id, options.name, component, this.injector, this.environmentInjector);
+    }
+    // For SplitviewComponent
+    createSplitviewComponent(options) {
+        const component = this.components[options.name];
+        if (!component) {
+            throw new Error(`Component '${options.name}' not found in component registry`);
+        }
+        return new angular_splitview_panel_1.AngularSplitviewPanel(options.id, options.name, component, this.injector, this.environmentInjector);
+    }
+    // For PaneviewComponent
+    createPaneviewComponent(options) {
+        const component = this.components[options.name];
+        if (!component) {
+            throw new Error(`Component '${options.name}' not found in component registry`);
+        }
+        return new angular_pane_part_1.AngularPanePart(component, this.injector, this.environmentInjector);
+    }
+    // Legacy method for backward compatibility
+    createComponent(options) {
+        return this.createDockviewComponent(options);
+    }
+    createTabComponent(options) {
+        let component = this.tabComponents?.[options.name];
+        if (!component && this.defaultTabComponent) {
+            component = this.defaultTabComponent;
+        }
+        if (!component) {
+            return undefined;
+        }
+        const renderer = new angular_renderer_1.AngularRenderer({
+            component,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector
+        });
+        renderer.init(options);
+        return renderer;
+    }
+    createWatermarkComponent() {
+        if (!this.watermarkComponent) {
+            throw new Error('Watermark component not provided');
+        }
+        const renderer = new angular_renderer_1.AngularRenderer({
+            component: this.watermarkComponent,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector
+        });
+        renderer.init({});
+        return renderer;
+    }
+    createHeaderActionsComponent(name) {
+        const component = this.headerActionsComponents?.[name];
+        if (!component) {
+            return undefined;
+        }
+        const renderer = new angular_renderer_1.AngularRenderer({
+            component,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector
+        });
+        renderer.init({});
+        return renderer;
+    }
+}
+exports.AngularFrameworkComponentFactory = AngularFrameworkComponentFactory;

package/dist/cjs/lib/utils/lifecycle-utils.d.ts

@@ -0,0 +1,18 @@
+import { Observable } from 'rxjs';
+import { DockviewIDisposable } from 'dockview-core';
+export declare class AngularDisposable implements DockviewIDisposable {
+    private _isDisposed;
+    private disposeCallbacks;
+    get isDisposed(): boolean;
+    addDisposeCallback(callback: () => void): void;
+    dispose(): void;
+}
+export declare class AngularLifecycleManager {
+    private destroySubject;
+    private disposables;
+    get destroy$(): Observable<void>;
+    addDisposable(disposable: DockviewIDisposable): void;
+    takeUntilDestroy<T>(): (source: Observable<T>) => Observable<T>;
+    destroy(): void;
+}
+export declare function createAngularDisposable(disposeCallback?: () => void): AngularDisposable;

package/dist/cjs/lib/utils/lifecycle-utils.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAngularDisposable = exports.AngularLifecycleManager = exports.AngularDisposable = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+class AngularDisposable {
+    constructor() {
+        this._isDisposed = false;
+        this.disposeCallbacks = [];
+    }
+    get isDisposed() {
+        return this._isDisposed;
+    }
+    addDisposeCallback(callback) {
+        if (this._isDisposed) {
+            callback();
+            return;
+        }
+        this.disposeCallbacks.push(callback);
+    }
+    dispose() {
+        if (this._isDisposed) {
+            return;
+        }
+        this._isDisposed = true;
+        this.disposeCallbacks.forEach(callback => {
+            try {
+                callback();
+            }
+            catch (error) {
+                console.error('Error in dispose callback:', error);
+            }
+        });
+        this.disposeCallbacks = [];
+    }
+}
+exports.AngularDisposable = AngularDisposable;
+class AngularLifecycleManager {
+    constructor() {
+        this.destroySubject = new rxjs_1.Subject();
+        this.disposables = [];
+    }
+    get destroy$() {
+        return this.destroySubject.asObservable();
+    }
+    addDisposable(disposable) {
+        this.disposables.push(disposable);
+    }
+    takeUntilDestroy() {
+        return (0, operators_1.takeUntil)(this.destroySubject);
+    }
+    destroy() {
+        this.destroySubject.next();
+        this.destroySubject.complete();
+        this.disposables.forEach(disposable => {
+            try {
+                disposable.dispose();
+            }
+            catch (error) {
+                console.error('Error disposing resource:', error);
+            }
+        });
+        this.disposables = [];
+    }
+}
+exports.AngularLifecycleManager = AngularLifecycleManager;
+function createAngularDisposable(disposeCallback) {
+    const disposable = new AngularDisposable();
+    if (disposeCallback) {
+        disposable.addDisposeCallback(disposeCallback);
+    }
+    return disposable;
+}
+exports.createAngularDisposable = createAngularDisposable;

package/dist/cjs/public-api.d.ts

@@ -0,0 +1,13 @@
+export * from 'dockview-core';
+export * from './lib/dockview-angular.module';
+export * from './lib/dockview/dockview-angular.component';
+export * from './lib/gridview/gridview-angular.component';
+export * from './lib/paneview/paneview-angular.component';
+export * from './lib/splitview/splitview-angular.component';
+export { DockviewAngularOptions, DockviewAngularEvents, IDockviewAngularPanelProps, IDockviewAngularPanelHeaderProps, IDockviewAngularWatermarkProps, IDockviewAngularHeaderActionsProps, DockviewAngularComponentOptions } from './lib/dockview/types';
+export { GridviewAngularOptions, GridviewAngularEvents, GridviewAngularReadyEvent } from './lib/gridview/types';
+export { PaneviewAngularOptions, PaneviewAngularEvents, PaneviewAngularReadyEvent } from './lib/paneview/types';
+export { SplitviewAngularOptions, SplitviewAngularEvents, SplitviewAngularReadyEvent } from './lib/splitview/types';
+export * from './lib/utils/angular-renderer';
+export * from './lib/utils/component-factory';
+export * from './lib/utils/lifecycle-utils';

package/dist/cjs/public-api.js

@@ -0,0 +1,32 @@
+"use strict";
+/*
+ * Public API Surface of dockview-angular
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Re-export everything from dockview-core
+__exportStar(require("dockview-core"), exports);
+// Angular module
+__exportStar(require("./lib/dockview-angular.module"), exports);
+// Components
+__exportStar(require("./lib/dockview/dockview-angular.component"), exports);
+__exportStar(require("./lib/gridview/gridview-angular.component"), exports);
+__exportStar(require("./lib/paneview/paneview-angular.component"), exports);
+__exportStar(require("./lib/splitview/splitview-angular.component"), exports);
+// Utilities
+__exportStar(require("./lib/utils/angular-renderer"), exports);
+__exportStar(require("./lib/utils/component-factory"), exports);
+__exportStar(require("./lib/utils/lifecycle-utils"), exports);