From 30f944123fcb7748432d3e1b7104e18f8b4722c1 Mon Sep 17 00:00:00 2001 From: Hadi Khazaee Asl Date: Sat, 29 Aug 2026 17:22:55 +0330 Subject: [PATCH] last works for handle card sizing ... --- .../src/lib/classes/x-size.model..ts | 4 + .../src/lib/x-card/x-card.component.html | 9 +- .../src/lib/x-card/x-card.component.ts | 166 +++++++++++++++++- .../src/lib/x-chart/x-chart.component.html | 1 + .../src/lib/x-chart/x-chart.component.ts | 112 ++++++------ 5 files changed, 231 insertions(+), 61 deletions(-) create mode 100644 projects/x-framework-components/src/lib/classes/x-size.model..ts diff --git a/projects/x-framework-components/src/lib/classes/x-size.model..ts b/projects/x-framework-components/src/lib/classes/x-size.model..ts new file mode 100644 index 0000000..aec6ed4 --- /dev/null +++ b/projects/x-framework-components/src/lib/classes/x-size.model..ts @@ -0,0 +1,4 @@ +export interface XSizeModel { + width?: number; + height?: number; +} \ No newline at end of file diff --git a/projects/x-framework-components/src/lib/x-card/x-card.component.html b/projects/x-framework-components/src/lib/x-card/x-card.component.html index 7b2ac3f..797b9a0 100644 --- a/projects/x-framework-components/src/lib/x-card/x-card.component.html +++ b/projects/x-framework-components/src/lib/x-card/x-card.component.html @@ -9,7 +9,7 @@ [class.fullscreen]="getValue(isFullscreen) | async" > - +
- + - + diff --git a/projects/x-framework-components/src/lib/x-card/x-card.component.ts b/projects/x-framework-components/src/lib/x-card/x-card.component.ts index c70c8a1..7933066 100644 --- a/projects/x-framework-components/src/lib/x-card/x-card.component.ts +++ b/projects/x-framework-components/src/lib/x-card/x-card.component.ts @@ -5,8 +5,9 @@ import { } from './x-card.typings'; import { Subject, Subscription } from 'rxjs'; import { concatMap, map } from 'rxjs/operators'; -import { nameof, isNullOrEmptyString } from 'x-framework-core'; -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { XSizeModel } from '../classes/x-size.model.'; +import { nameof, isNullOrEmptyString, isNullOrUndefined } from 'x-framework-core'; +import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core'; @Component({ // tslint:disable-next-line:component-selector @@ -21,17 +22,71 @@ export class XCardComponent extends XCardContainerComponent { // private ACTION_PROVIDER_SUBSCRIPTION: Subscription; + // + //#region Card Elements .... + private CARD_IMAGE: ElementRef = undefined; + private CARD_HEADER: ElementRef = undefined; + private CARD_FOOTER: ElementRef = undefined; + private CARD_CONTENT: ElementRef = undefined; + private CARD_ACTIONS: ElementRef = undefined; + + @ViewChild('cardImage', { static: false }) + set cardImage(v: ElementRef) { + this.CARD_IMAGE = v; + } + + @ViewChild('cardHeader', { static: false }) + set cardHeader(v: ElementRef) { + this.CARD_HEADER = v; + } + + @ViewChild('cardFooter', { static: false }) + set cardFooter(v: ElementRef) { + this.CARD_FOOTER = v; + } + + @ViewChild('cardContent', { static: false }) + set cardContent(v: ElementRef) { + this.CARD_CONTENT = v; + } + + @ViewChild('cardActions', { static: false }) + set cardActions(v: ElementRef) { + this.CARD_ACTIONS = v; + } + + get cardImage() { + return this.CARD_IMAGE; + } + + get cardHeader() { + return this.CARD_HEADER; + } + + get cardFooter() { + return this.CARD_FOOTER; + } + + get cardContent() { + return this.CARD_CONTENT; + } + + get cardActions() { + return this.CARD_ACTIONS; + } + //#endregion + // //#region Full Screen ... private IS_FULLSCREEN: boolean = false; - public set isFullscreen(v: boolean) { + set isFullscreen(v: boolean) { // const isChanged = v != this.IS_FULLSCREEN; // this.IS_FULLSCREEN = v; } - public get isFullscreen() { + get isFullscreen() { return this.IS_FULLSCREEN; } //#endregion @@ -167,6 +222,109 @@ export class XCardComponent extends XCardContainerComponent { await this.enterFullscreen(); } } + + // + //#region Size Calculating ... + public calculateImageSize() { + // + let result: XSizeModel = undefined; + + // + // Validate ... + if (isNullOrUndefined(this.CARD_IMAGE) || isNullOrUndefined(this.CARD_IMAGE.nativeElement)) { + return result; + } + + // + result = { + width: this.CARD_IMAGE.nativeElement.offsetWidth, + height: this.CARD_IMAGE.nativeElement.offsetHeight + }; + + // + return result; + } + + public calculateHeaderSize() { + // + let result: XSizeModel = undefined; + + // + // Validate ... + if (isNullOrUndefined(this.CARD_HEADER) || isNullOrUndefined(this.CARD_HEADER.nativeElement)) { + return result; + } + + // + result = { + width: this.CARD_HEADER.nativeElement.offsetWidth, + height: this.CARD_HEADER.nativeElement.offsetHeight + }; + + // + return result; + } + + public calculateFooterSize() { + // + let result: XSizeModel = undefined; + + // + // Validate ... + if (isNullOrUndefined(this.CARD_FOOTER) || isNullOrUndefined(this.CARD_FOOTER.nativeElement)) { + return result; + } + + // + result = { + width: this.CARD_FOOTER.nativeElement.offsetWidth, + height: this.CARD_FOOTER.nativeElement.offsetHeight + }; + + // + return result; + } + + public calculateContentSize() { + // + let result: XSizeModel = undefined; + + // + // Validate ... + if (isNullOrUndefined(this.CARD_CONTENT) || isNullOrUndefined(this.CARD_CONTENT.nativeElement)) { + return result; + } + + // + result = { + width: this.CARD_CONTENT.nativeElement.offsetWidth, + height: this.CARD_CONTENT.nativeElement.offsetHeight + }; + + // + return result; + } + + public calculateActionsSize() { + // + let result: XSizeModel = undefined; + + // + // Validate ... + if (isNullOrUndefined(this.CARD_ACTIONS) || isNullOrUndefined(this.CARD_ACTIONS.nativeElement)) { + return result; + } + + // + result = { + width: this.CARD_ACTIONS.nativeElement.offsetWidth, + height: this.CARD_ACTIONS.nativeElement.offsetHeight + }; + + // + return result; + } + //#endregion //#endregion // diff --git a/projects/x-framework-components/src/lib/x-chart/x-chart.component.html b/projects/x-framework-components/src/lib/x-chart/x-chart.component.html index ce82a43..f23664f 100644 --- a/projects/x-framework-components/src/lib/x-chart/x-chart.component.html +++ b/projects/x-framework-components/src/lib/x-chart/x-chart.component.html @@ -1,6 +1,7 @@ = undefined; - // - // TODO: Complete this ... - // this.chartInstance.updateOptions(); + @ViewChild('chartCard', { static: false }) + set chartCard(el: ElementRef) { + this.CHART_CARD = el; } + + get chartCard() { + return this.CHART_CARD;; + } + + // + private RESIZE_SUBJECT = new Subject(); // private CHART_OPTIONS: XChartOptions = null; @@ -105,6 +109,7 @@ export class XChartComponent extends XChartContainerComponent { // await this.initializeComponent(); + this.registerResizeHandler(); } async onChange(changeKeys: string[]) { @@ -337,6 +342,10 @@ export class XChartComponent extends XChartContainerComponent { onDestroy() { super.onDestroy(); + // + this.RESIZE_SUBJECT.next(); + this.RESIZE_SUBJECT.complete(); + // this.destroyComponent(); this.unregisterActionProvider(); @@ -658,7 +667,7 @@ export class XChartComponent extends XChartContainerComponent { printWindow.document.close(); } } - } catch (error) {} + } catch (error) { } } async handleToggleFullscreen() { @@ -672,47 +681,8 @@ export class XChartComponent extends XChartContainerComponent { } // + // Handle Fullscreen Toggle using Card ... this.cardActionProvider.next({ action: XCardAction.ToggleFullScreen }); - - // - return; - - // - const chartWrapper = this.chartContainer.nativeElement; - const doc = document as any; - - // - // Check if the chart wrapper is currently in fullscreen mode - const isFullscreen = - doc.fullscreenElement === chartWrapper || - doc.msFullscreenElement === chartWrapper || - doc.mozFullScreenElement === chartWrapper || - doc.webkitFullscreenElement === chartWrapper; - if (!isFullscreen) { - // - // Enter Fullscreen - if (chartWrapper.requestFullscreen) { - await chartWrapper.requestFullscreen(); - } else if (chartWrapper.webkitRequestFullscreen) { - await chartWrapper.webkitRequestFullscreen(); - } else if (chartWrapper.mozRequestFullScreen) { - await chartWrapper.mozRequestFullScreen(); - } else if (chartWrapper.msRequestFullscreen) { - await chartWrapper.msRequestFullscreen(); - } - } else { - // - // Exit Fullscreen - if (doc.exitFullscreen) { - await doc.exitFullscreen(); - } else if (doc.webkitExitFullscreen) { - await doc.webkitExitFullscreen(); - } else if (doc.mozCancelFullScreen) { - await doc.mozCancelFullScreen(); - } else if (doc.msExitFullscreen) { - await doc.msExitFullscreen(); - } - } } //#endregion @@ -2075,6 +2045,42 @@ export class XChartComponent extends XChartContainerComponent { this.chartInstance = null; } + private registerResizeHandler() { + // + fromEvent(window, 'resize') + .pipe( + debounceTime(200), + takeUntil(this.RESIZE_SUBJECT) + ) + .subscribe(() => { + // + if (isNullOrUndefined(this.chartInstance) || isNullOrUndefined(this.chartCard) || isNullOrUndefined(this.chartCard.nativeElement) || !this.chartCard.nativeElement.isFullscreen) { + return; + } + + // + var height = this.chartCard.nativeElement.calculateContentSize(); + + // + // Reading Height ... + this.CHART_OPTIONS = { + ...this.CHART_OPTIONS, + chart: { + height: `${height}px` + } + }; + + // + // TODO: + // Only Apply when Full Screen Mode ... + // Add FullScreen Event Handler in XCard Component ... + console.log('chart resize: ', height); + + // + this.chartInstance.updateOptions(this.CHART_OPTIONS, false, false); + }); + } + private registerActionProvider() { // this.unregisterActionProvider();