feat: angular examples

packages/docs/scripts/buildTemplates.mjs

@@ -14,6 +14,7 @@ const { version } = JSON.parse(
 
 const REACT_VERSION = '18.2.0';
 const VUE_VERSION = '3.4.21';
+const ANGULAR_VERSION = '17.0.0';
 const DOCKVIEW_VERSION = version; //'latest';;
 const USE_LOCAL_CDN = argv.slice(2).includes('--local');
 
@@ -54,7 +55,20 @@ const DOCKVIEW_CDN = {
             'dockview-core/': `${local}/dockview-core/`,
         },
     },
-    angular: {},
+    angular: {
+        remote: {
+            'dockview-core': `https://cdn.jsdelivr.net/npm/dockview-core@${DOCKVIEW_VERSION}/dist/dockview-core.esm.js`,
+            'dockview-core/': `https://cdn.jsdelivr.net/npm/dockview-core@${DOCKVIEW_VERSION}/`,
+            'dockview-angular': `https://cdn.jsdelivr.net/npm/dockview-angular@${DOCKVIEW_VERSION}/dist/dockview-angular.esm.js`,
+            'dockview-angular/': `https://cdn.jsdelivr.net/npm/dockview-angular@${DOCKVIEW_VERSION}/`,
+        },
+        local: {
+            'dockview-core': `${local}/dockview-core/dist/dockview-core.esm.js`,
+            'dockview-core/': `${local}/dockview-core/`,
+            'dockview-angular': `${local}/dockview-angular/dist/dockview-angular.esm.js`,
+            'dockview-angular/': `${local}/dockview-angular/`,
+        },
+    },
 };
 
 const IMPORTS_PATHS = {
@@ -69,7 +83,14 @@ const IMPORTS_PATHS = {
         'vue-sfc-loader': `https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.9.5/dist/vue3-sfc-loader.js`,
     },
     typescript: {},
-    angular: {},
+    angular: {
+        '@angular/core': `https://esm.sh/@angular/core@${ANGULAR_VERSION}`,
+        '@angular/common': `https://esm.sh/@angular/common@${ANGULAR_VERSION}`,
+        '@angular/platform-browser-dynamic': `https://esm.sh/@angular/platform-browser-dynamic@${ANGULAR_VERSION}`,
+        '@angular/platform-browser': `https://esm.sh/@angular/platform-browser@${ANGULAR_VERSION}`,
+        'rxjs': `https://esm.sh/rxjs@7.8.1`,
+        'zone.js': `https://esm.sh/zone.js@0.14.3`,
+    },
 };
 
 const template = fs
@@ -94,7 +115,7 @@ const input_dir = path.join(__dirname, '../templates');
 const output = path.join(__dirname, '../static/templates');
 
 const COMPONENTS = ['dockview'];
-const FRAMEWORKS = ['react', 'vue', 'typescript'];
+const FRAMEWORKS = ['react', 'vue', 'typescript', 'angular'];
 
 const list = [];
 
@@ -128,6 +149,8 @@ for (const component of COMPONENTS) {
                 app:
                     framework === 'react'
                         ? './src/index.tsx'
+                        : framework === 'angular'
+                        ? './src/index.ts'
                         : './src/index.ts',
                 importPaths: {
                     ...IMPORTS_PATHS[framework],

packages/docs/templates/dockview/basic/angular/src/index.ts

@@ -0,0 +1,82 @@
+import 'zone.js';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { Component, Type } from '@angular/core';
+import { DockviewAngularComponent } from 'dockview-angular';
+import 'dockview-core/dist/styles/dockview.css';
+
+// Default panel component
+@Component({
+    selector: 'default-panel',
+    template: `<div>{{ api.title }}</div>`,
+    standalone: true,
+})
+export class DefaultPanelComponent {
+    api: any;
+
+    constructor() {}
+}
+
+// Main app component  
+@Component({
+    selector: 'app-root',
+    template: `
+        <div style="height: 100vh;">
+            <dv-dockview
+                [components]="components"
+                className="dockview-theme-abyss"
+                (ready)="onReady($event)">
+            </dv-dockview>
+        </div>
+    `,
+    standalone: true,
+    imports: [DockviewAngularComponent]
+})
+export class AppComponent {
+    components: Record<string, Type<any>>;
+
+    constructor() {
+        this.components = {
+            default: DefaultPanelComponent,
+        };
+    }
+
+    onReady(event: any) {
+        const api = event.api;
+
+        api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: {
+                direction: 'right',
+                referencePanel: 'panel_1',
+            },
+        });
+
+        api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: {
+                direction: 'below',
+                referencePanel: 'panel_1',
+            },
+        });
+
+        api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+        });
+
+        api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+        });
+    }
+}
+
+// Bootstrap the application
+bootstrapApplication(AppComponent).catch(err => console.error(err));

packages/docs/templates/dockview/constraints/angular/src/index.ts

@@ -0,0 +1,139 @@
+import 'zone.js';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { Component, OnInit, OnDestroy, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DockviewAngularComponent } from 'dockview-angular';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import 'dockview-core/dist/styles/dockview.css';
+
+// Default panel component with constraints
+@Component({
+    selector: 'default-panel',
+    template: `
+        <div [ngStyle]="{
+            height: '100%',
+            padding: '20px',
+            background: 'var(--dv-group-view-background-color)',
+            color: 'white'
+        }">
+            <button (click)="onClick()">Set</button>
+            <div *ngIf="constraints" [ngStyle]="{ fontSize: '13px' }">
+                <div *ngIf="constraints.maximumHeight != null" [ngStyle]="constraintItemStyle">
+                    <span [ngStyle]="{ color: 'grey' }">Maximum Height: </span>
+                    <span>{{ constraints.maximumHeight }}px</span>
+                </div>
+                <div *ngIf="constraints.minimumHeight != null" [ngStyle]="constraintItemStyle">
+                    <span [ngStyle]="{ color: 'grey' }">Minimum Height: </span>
+                    <span>{{ constraints.minimumHeight }}px</span>
+                </div>
+                <div *ngIf="constraints.maximumWidth != null" [ngStyle]="constraintItemStyle">
+                    <span [ngStyle]="{ color: 'grey' }">Maximum Width: </span>
+                    <span>{{ constraints.maximumWidth }}px</span>
+                </div>
+                <div *ngIf="constraints.minimumWidth != null" [ngStyle]="constraintItemStyle">
+                    <span [ngStyle]="{ color: 'grey' }">Minimum Width: </span>
+                    <span>{{ constraints.minimumWidth }}px</span>
+                </div>
+            </div>
+        </div>
+    `,
+    standalone: true,
+    imports: [CommonModule]
+})
+export class DefaultPanelComponent implements OnInit, OnDestroy {
+    api: any;
+    constraints: any = null;
+    private destroy$ = new Subject<void>();
+
+    constraintItemStyle = {
+        border: '1px solid grey',
+        margin: '2px',
+        padding: '1px'
+    };
+
+    ngOnInit() {
+        if (this.api?.group?.api?.onDidConstraintsChange) {
+            this.api.group.api.onDidConstraintsChange((event: any) => {
+                this.constraints = event;
+            });
+        }
+    }
+
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
+    onClick() {
+        if (this.api?.group?.api?.setConstraints) {
+            this.api.group.api.setConstraints({
+                maximumWidth: 300,
+                maximumHeight: 300,
+            });
+        }
+    }
+}
+
+// Main app component  
+@Component({
+    selector: 'app-root',
+    template: `
+        <div style="height: 100vh;">
+            <dv-dockview
+                [components]="components"
+                className="dockview-theme-abyss"
+                (ready)="onReady($event)">
+            </dv-dockview>
+        </div>
+    `,
+    standalone: true,
+    imports: [DockviewAngularComponent]
+})
+export class AppComponent {
+    components: Record<string, Type<any>>;
+
+    constructor() {
+        this.components = {
+            default: DefaultPanelComponent,
+        };
+    }
+
+    onReady(event: any) {
+        const api = event.api;
+
+        const panel1 = api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const panel2 = api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: {
+                referencePanel: panel1,
+                direction: 'right',
+            },
+        });
+
+        const panel3 = api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: {
+                referencePanel: panel2,
+                direction: 'right',
+            },
+        });
+
+        const panel4 = api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            position: {
+                direction: 'below',
+            },
+        });
+    }
+}
+
+// Bootstrap the application
+bootstrapApplication(AppComponent).catch(err => console.error(err));