@dragonworks/ngx-dashboard 20.0.4 → 20.0.6

package/src/lib/services/dashboard-bridge.service.ts

@@ -0,0 +1,155 @@
+// dashboard-bridge.service.ts
+import { Injectable, computed, signal } from '@angular/core';
+import { DashboardStore } from '../store/dashboard-store';
+import { DragData } from '../models';
+
+interface DashboardInstance {
+  store: InstanceType<typeof DashboardStore>;
+  dimensions: () => { width: number; height: number };
+}
+
+/**
+ * Internal bridge service that coordinates between component-scoped DashboardStore instances
+ * and standalone components like WidgetListComponent.
+ * 
+ * This service is NOT part of the public API and should remain internal to the library.
+ */
+@Injectable({ providedIn: 'root' })
+export class DashboardBridgeService {
+  // Map of registered dashboard instances with their reactive dimensions
+  private readonly dashboards = signal(new Map<string, DashboardInstance>());
+  
+  /**
+   * Register a dashboard store instance using its dashboard ID
+   */
+  registerDashboard(store: InstanceType<typeof DashboardStore>): void {
+    const dashboardId = store.dashboardId();
+    
+    // If dashboard ID is not set yet, we'll register later when it's available
+    if (!dashboardId) {
+      return;
+    }
+    
+    this.dashboards.update(dashboards => {
+      const newMap = new Map(dashboards);
+      newMap.set(dashboardId, {
+        store,
+        dimensions: store.gridCellDimensions
+      });
+      return newMap;
+    });
+  }
+  
+  /**
+   * Unregister a dashboard store instance
+   */
+  unregisterDashboard(store: InstanceType<typeof DashboardStore>): void {
+    const dashboardId = store.dashboardId();
+    if (!dashboardId) {
+      return;
+    }
+    
+    this.dashboards.update(dashboards => {
+      const newMap = new Map(dashboards);
+      newMap.delete(dashboardId);
+      return newMap;
+    });
+  }
+  
+  /**
+   * Get cell dimensions for a specific dashboard instance
+   */
+  getDashboardDimensions(dashboardId: string): { width: number; height: number } {
+    const dashboard = this.dashboards().get(dashboardId);
+    return dashboard?.dimensions() || { width: 100, height: 100 };
+  }
+  
+  /**
+   * Get all available dashboard dimensions (for widget lists to choose from)
+   * Returns the first available dashboard's dimensions as fallback
+   */
+  readonly availableDimensions = computed(() => {
+    const dashboardEntries = Array.from(this.dashboards().values());
+    if (dashboardEntries.length === 0) {
+      return { width: 100, height: 100 }; // fallback
+    }
+    
+    // Return dimensions from first available dashboard with fallback for undefined
+    return dashboardEntries[0].dimensions() || { width: 100, height: 100 };
+  });
+  
+  /**
+   * Start drag operation on the first available dashboard
+   * (Widget lists need some dashboard to coordinate with during drag)
+   */
+  startDrag(dragData: DragData): void {
+    const dashboardEntries = Array.from(this.dashboards().values());
+    if (dashboardEntries.length > 0) {
+      dashboardEntries[0].store.startDrag(dragData);
+    }
+  }
+  
+  /**
+   * End drag operation on all dashboards
+   * (Safer to notify all in case drag state got distributed)
+   */
+  endDrag(): void {
+    for (const dashboard of this.dashboards().values()) {
+      dashboard.store.endDrag();
+    }
+  }
+  
+  /**
+   * Get all registered dashboard IDs
+   */
+  readonly registeredDashboards = computed(() => Array.from(this.dashboards().keys()));
+  
+  /**
+   * Get the number of registered dashboards
+   */
+  readonly dashboardCount = computed(() => this.dashboards().size);
+  
+  /**
+   * Check if any dashboards are registered
+   */
+  readonly hasDashboards = computed(() => this.dashboards().size > 0);
+  
+  /**
+   * Update registration for a dashboard store when its ID becomes available
+   */
+  updateDashboardRegistration(store: InstanceType<typeof DashboardStore>): void {
+    this.registerDashboard(store);
+  }
+
+  /**
+   * Get grid configuration for a specific dashboard
+   */
+  getDashboardGridConfig(dashboardId: string): { rows: number; columns: number; gutterSize: string } | null {
+    const dashboard = this.dashboards().get(dashboardId);
+    if (!dashboard) {
+      return null;
+    }
+    
+    const store = dashboard.store;
+    return {
+      rows: store.rows(),
+      columns: store.columns(),
+      gutterSize: store.gutterSize()
+    };
+  }
+
+  /**
+   * Get the store instance for a specific dashboard ID
+   */
+  getDashboardStore(dashboardId: string): InstanceType<typeof DashboardStore> | null {
+    const dashboard = this.dashboards().get(dashboardId);
+    return dashboard?.store || null;
+  }
+
+  /**
+   * Get all registered dashboards (for viewport service integration)
+   */
+  getAllDashboards(): Map<string, DashboardInstance> {
+    return this.dashboards();
+  }
+}

package/src/lib/services/dashboard-viewport.service.ts

@@ -0,0 +1,148 @@
+import { Injectable, computed, signal, inject, DestroyRef, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { DashboardStore } from '../store/dashboard-store';
+import { ReservedSpace, DEFAULT_RESERVED_SPACE } from '../models/reserved-space';
+
+export interface ViewportSize {
+  width: number;
+  height: number;
+}
+
+export interface DashboardConstraints {
+  maxWidth: number;
+  maxHeight: number;
+  constrainedBy: 'width' | 'height' | 'none';
+}
+
+/**
+ * Internal component-scoped service that provides viewport-aware constraints for a single dashboard.
+ * Each dashboard component gets its own instance of this service.
+ * 
+ * This service is NOT part of the public API and should remain internal to the library.
+ */
+@Injectable()
+export class DashboardViewportService {
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly store = inject(DashboardStore);
+  
+  private readonly viewportSize = signal<ViewportSize>({ width: 0, height: 0 });
+  private readonly reservedSpace = signal<ReservedSpace>(DEFAULT_RESERVED_SPACE);
+  private resizeObserver: ResizeObserver | null = null;
+
+  constructor() {
+    if (isPlatformBrowser(this.platformId)) {
+      this.initializeViewportTracking();
+    }
+  }
+
+  /**
+   * Initialize viewport size tracking using ResizeObserver on the window
+   */
+  private initializeViewportTracking(): void {
+    // Use ResizeObserver on document.documentElement for accurate viewport tracking
+    this.resizeObserver = new ResizeObserver((entries) => {
+      if (entries.length > 0) {
+        const entry = entries[0];
+        const { inlineSize, blockSize } = entry.contentBoxSize[0];
+        this.viewportSize.set({
+          width: inlineSize,
+          height: blockSize
+        });
+      }
+    });
+
+    this.resizeObserver.observe(document.documentElement);
+
+    // Initial size
+    this.viewportSize.set({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+
+    // Cleanup on destroy
+    this.destroyRef.onDestroy(() => {
+      this.resizeObserver?.disconnect();
+    });
+  }
+
+  /**
+   * Set reserved space that should be excluded from dashboard calculations
+   * (e.g., toolbar height, widget list width, padding)
+   */
+  setReservedSpace(space: ReservedSpace): void {
+    this.reservedSpace.set(space);
+  }
+
+  /**
+   * Get current viewport size
+   */
+  readonly currentViewportSize = this.viewportSize.asReadonly();
+
+  /**
+   * Get current reserved space
+   */
+  readonly currentReservedSpace = this.reservedSpace.asReadonly();
+
+  /**
+   * Calculate available space for dashboard after accounting for reserved areas
+   */
+  readonly availableSpace = computed((): ViewportSize => {
+    const viewport = this.viewportSize();
+    const reserved = this.reservedSpace();
+    
+    return {
+      width: Math.max(0, viewport.width - reserved.left - reserved.right),
+      height: Math.max(0, viewport.height - reserved.top - reserved.bottom)
+    };
+  });
+
+  /**
+   * Calculate dashboard constraints for this dashboard instance
+   */
+  readonly constraints = computed((): DashboardConstraints => {
+    const availableSize = this.availableSpace();
+    
+    // Get grid configuration from our component's store
+    const rows = this.store.rows();
+    const columns = this.store.columns();
+    
+    if (rows === 0 || columns === 0) {
+      return {
+        maxWidth: availableSize.width,
+        maxHeight: availableSize.height,
+        constrainedBy: 'none'
+      };
+    }
+
+    // Calculate aspect ratio
+    const aspectRatio = columns / rows;
+    
+    // Calculate maximum size that fits within available space
+    const maxWidthFromHeight = availableSize.height * aspectRatio;
+    const maxHeightFromWidth = availableSize.width / aspectRatio;
+    
+    let maxWidth: number;
+    let maxHeight: number;
+    let constrainedBy: 'width' | 'height';
+    
+    if (maxWidthFromHeight <= availableSize.width) {
+      // Height is the limiting factor
+      maxWidth = maxWidthFromHeight;
+      maxHeight = availableSize.height;
+      constrainedBy = 'height';
+    } else {
+      // Width is the limiting factor
+      maxWidth = availableSize.width;
+      maxHeight = maxHeightFromWidth;
+      constrainedBy = 'width';
+    }
+
+    return {
+      maxWidth: Math.max(0, maxWidth),
+      maxHeight: Math.max(0, maxHeight),
+      constrainedBy
+    };
+  });
+
+}

package/src/lib/services/dashboard.service.ts

@@ -0,0 +1,62 @@
+// dashboard.service.ts
+import { Injectable, signal } from '@angular/core';
+import {
+  createFactoryFromComponent,
+  WidgetComponentClass,
+  WidgetFactory,
+} from '../models';
+import { UnknownWidgetComponent } from '../internal-widgets/unknown-widget/unknown-widget.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DashboardService {
+  readonly #widgetTypes = signal<WidgetComponentClass[]>([]);
+  readonly #widgetFactoryMap = new Map<string, WidgetFactory>();
+  readonly #unknownWidgetFactory = createFactoryFromComponent(UnknownWidgetComponent);
+  readonly widgetTypes = this.#widgetTypes.asReadonly(); // make the widget list available as a readonly signal
+
+  registerWidgetType(widget: WidgetComponentClass) {
+    if (
+      this.#widgetTypes().some(
+        (w) => w.metadata.widgetTypeid === widget.metadata.widgetTypeid
+      )
+    ) {
+      throw new Error(
+        `Widget type '${widget.metadata.widgetTypeid}' is already registered`
+      );
+    }
+
+    this.#widgetFactoryMap.set(
+      widget.metadata.widgetTypeid,
+      createFactoryFromComponent(widget)
+    );
+
+    this.#widgetTypes.set([...this.#widgetTypes(), widget]);
+  }
+
+  getFactory(widgetTypeid: string): WidgetFactory {
+    const factory = this.#widgetFactoryMap.get(widgetTypeid);
+
+    if (factory) {
+      return factory;
+    }
+
+    // Return fallback factory for unknown widget types
+    console.warn(
+      `Unknown widget type: ${widgetTypeid}, using fallback error widget`
+    );
+    
+    // Create a custom factory that preserves the original widget type ID in state
+    return {
+      ...this.#unknownWidgetFactory,
+      createInstance: (container, state) => {
+        const ref = this.#unknownWidgetFactory.createInstance(container, {
+          originalWidgetTypeid: widgetTypeid,
+          ...((state as any) || {}),
+        });
+        return ref;
+      },
+    };
+  }
+}