From 0f7a955317f79bc0f00bf514fdac45608d9b564b Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Wed, 13 Sep 2023 10:43:53 -0700 Subject: [PATCH 1/2] fix: horizontal resize working --- .../src/splitter/splitter.component.scss | 11 + .../src/splitter/splitter.component.ts | 346 +++++++++--------- 2 files changed, 189 insertions(+), 168 deletions(-) diff --git a/projects/components/src/splitter/splitter.component.scss b/projects/components/src/splitter/splitter.component.scss index fbee4500e..10ba4fae7 100644 --- a/projects/components/src/splitter/splitter.component.scss +++ b/projects/components/src/splitter/splitter.component.scss @@ -2,6 +2,7 @@ .splitter-container { @include m.fill-container(); + position: relative; display: flex; &.horizontal { @@ -12,6 +13,16 @@ flex-direction: column; } + .grid-lines { + height: 100%; + width: calc(100% + 16px); + position: absolute; + background: repeating-linear-gradient(90deg, m.$gray-2, m.$gray-2 2px, transparent 1px, transparent 6.25%); + border-right: 2px solid m.$gray-2; + margin: -8px; + pointer-events: none; + } + .splitter-content { display: flex; } diff --git a/projects/components/src/splitter/splitter.component.ts b/projects/components/src/splitter/splitter.component.ts index 5ad8e294c..5d6394cb9 100644 --- a/projects/components/src/splitter/splitter.component.ts +++ b/projects/components/src/splitter/splitter.component.ts @@ -1,3 +1,4 @@ +import { DOCUMENT } from '@angular/common'; import { AfterContentInit, ChangeDetectionStrategy, @@ -12,26 +13,24 @@ import { QueryList, Renderer2 } from '@angular/core'; -import { LayoutChangeService, TypedSimpleChanges, queryListAndChanges$ } from '@hypertrace/common'; +import { assertUnreachable, LayoutChangeService, queryListAndChanges$, TypedSimpleChanges } from '@hypertrace/common'; +import { debounce, isEmpty } from 'lodash-es'; import { EMPTY, Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { map, tap } from 'rxjs/operators'; import { SplitterDirection } from './splitter'; import { SplitterCellDimension, SplitterContentDirective } from './splitter-content.directive'; -import { DOCUMENT } from '@angular/common'; -import { debounce } from 'lodash-es'; @Component({ selector: 'ht-splitter', styleUrls: ['./splitter.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, template: ` -
+
@@ -43,21 +42,25 @@ import { debounce } from 'lodash-es'; [ngClass]="[this.direction | lowercase]" [ngStyle]="this.splitterSizeStyle" (mousedown)="this.onGutterMouseDown($event, index)" + (mouseup)="this.onGutterMouseUp($event)" >
+
` }) export class SplitterComponent implements OnChanges, AfterContentInit { + // private readonly GRID_COLUMNS_COUNT: number = 16; + @Input() public readonly direction?: SplitterDirection = SplitterDirection.Horizontal; @Input() - public readonly debounceTime: number = 20; + public readonly debounceTime: number = 4; @Input() public readonly splitterSize: number = 16; @@ -69,16 +72,25 @@ export class SplitterComponent implements OnChanges, AfterContentInit { private readonly contents!: QueryList; protected contents$!: Observable; + protected classes: string[] =[]; protected splitterSizeStyle?: Partial; + protected isShowGrid: boolean = true; + private mouseMoveListener?: () => void; private mouseUpListener?: () => void; - private size?: number; - private resizeColumnSize?: number; - private currentSplitterElement?: HTMLElement; - private startPos?: number; - private previous?: ContentWithMetadata; - private next?: ContentWithMetadata; + private normalizationParameters: NormalizationParameters = { + itemCount: 0, + pxPerItem: 0, + }; + + private resizeStartParameters: ResizeStartParameters = { + startPositionPx: 0, + prevContentStartSizePx: 0, + nextContentStartSizePx: 0, + }; + + private readonly debounceResize = debounce(this.resizeEnd, this.debounceTime); public constructor( @Inject(DOCUMENT) private readonly document: Document, @@ -87,213 +99,211 @@ export class SplitterComponent implements OnChanges, AfterContentInit { private readonly renderer: Renderer2 ) {} - public ngAfterContentInit(): void { - this.contents$ = queryListAndChanges$(this.contents ?? EMPTY).pipe(map(contents => contents.toArray())); - } - public ngOnChanges(changes: TypedSimpleChanges): void { if (changes.splitterSize || changes.direction) { this.setSplitterSizeStyle(); + this.classes = this.buildClasses(); } } - protected onGutterMouseDown(event: MouseEvent, index: number) { - this.resizeStart(event, index); - this.bindMouseListeners(); + private buildClasses(): string[] { + return [ + this.direction?.toLowerCase() ?? '', + ].filter(c => !isEmpty(c)) } - protected readonly getFlex = (dimension: SplitterCellDimension): string => { - if (dimension.unit === 'PX') { - return `1 1 ${dimension.value}${dimension.unit.toLowerCase()}`; - } else { - return `${dimension.value} ${dimension.value} 0`; - } - }; + public ngAfterContentInit(): void { + this.subscribeToQueryListChanges(); + } - protected readonly getMaxHeight = (dimension: SplitterCellDimension): string | undefined => { - if (dimension.unit === 'PX') { - return `${dimension.value}${dimension.unit.toLowerCase()}`; - } - }; + private buildNormalizationParams(contents: SplitterContentDirective[]): NormalizationParameters { + const totalAvailablePx = this.getElementSizePx(this.element.nativeElement); + const splitterPx = this.splitterSize * (contents.length - 1); + // const pxPerGridUnit = (totalAvailablePx - splitterPx) / this.GRID_COLUMNS_COUNT; + const pxPerItem = (totalAvailablePx - splitterPx) / contents.length; + + const totalContentPxs = contents + .filter(content => content.dimension.unit === 'PX') + .reduce((prev, curr) => prev + curr.dimension.value, 0); + + const totalContentFrs = contents + .filter(content => content.dimension.unit === 'FR') + .reduce((prev, curr) => prev + curr.dimension.value, 0); + + // const pxContentGridUnits = Math.floor(totalContentPxs / pxPerGridUnit); + // const frContentGridUnits = Math.floor(totalContentFrs - pxContentGridUnits); + + // const normalizedMultiple = Math.floor(this.GRID_COLUMNS_COUNT / (pxContentGridUnits + frContentGridUnits)); + + console.debug('buildNormalizationParams', { + totalAvailablePx: totalAvailablePx, + splitterPx: splitterPx, + // pxPerGridUnit: pxPerGridUnit, + totalContentPxs: totalContentPxs, + totalContentFrs: totalContentFrs, + // pxContentGridUnits: pxContentGridUnits, + // frContentGridUnits: frContentGridUnits, + // normalizedMultiple: normalizedMultiple, + itemCount: contents.length, + pxPerItem: pxPerItem + }) - protected horizontal() { - return this.direction === SplitterDirection.Horizontal; + return { + itemCount: contents.length, + pxPerItem: pxPerItem + // pxPerGridUnit: pxPerGridUnit, + // normalizedMultiple: normalizedMultiple + }; } - private setSplitterSizeStyle(): void { - if (this.direction === SplitterDirection.Vertical) { - this.splitterSizeStyle = { - height: `${this.splitterSize}px` - }; - } + private normalizeContentsDimensions(contents: SplitterContentDirective[]): SplitterContentDirective[] { + this.normalizationParameters = this.buildNormalizationParams(contents); - if (this.direction === SplitterDirection.Horizontal) { - this.splitterSizeStyle = { - width: `${this.splitterSize}px` - }; - } + return contents.map(content => this.normalizeContentDimension(content)); } - private bindMouseListeners() { - if (!this.mouseMoveListener) { - this.mouseMoveListener = this.renderer.listen(this.document, 'mousemove', event => { - this.debouncedOnResize(event); - }); + private normalizeContentDimension(content: SplitterContentDirective): SplitterContentDirective { + if (content.dimension.unit === 'FR') { + // Coerce FR content to nearest pixel + content.dimension = { + unit: 'PX', + value: content.dimension.value * this.normalizationParameters.pxPerItem + // value: content.dimension.value * this.normalizationParameters.pxPerGridUnit * this.normalizationParameters.normalizedMultiple + }; } - if (!this.mouseUpListener) { - this.mouseUpListener = this.renderer.listen(this.document, 'mouseup', () => { - this.resizeEnd(); - this.unbindMouseListeners(); - }); - } + return content; } - private unbindMouseListeners() { - this.mouseMoveListener?.(); - this.mouseMoveListener = undefined; - - this.mouseUpListener?.(); - this.mouseUpListener = undefined; + protected onGutterMouseDown(event: MouseEvent, index: number) { + this.resizeStart(event, index); + this.bindMouseListeners(); } - private resizeStart(event: MouseEvent, index: number) { - this.currentSplitterElement = event.currentTarget as HTMLElement; - this.size = this.getElementSize(this.element.nativeElement); - this.resizeColumnSize = this.horizontal() ? this.size / 12 : 1; - - this.startPos = this.horizontal() ? event.pageX : event.pageY; - - this.previous = this.buildPreviousContentWithMetaData(index, this.currentSplitterElement); - this.next = this.buildNextContentWithMetaData(index, this.currentSplitterElement); + protected onGutterMouseUp(event: MouseEvent) { + this.resizeEnd(event); + this.unbindMouseListeners(); } - private readonly debouncedOnResize: (event: MouseEvent) => void = debounce(this.onResize, 0); - - private onResize(event: MouseEvent): void { - let newPos; - - if ( - this.size !== undefined && - this.startPos !== undefined && - this.resizeColumnSize !== undefined && - this.previous !== undefined - ) { - let newPrevPanelSize = 0; - let newNextPanelSize = 0; - - if (this.horizontal()) { - newPos = event.pageX - this.startPos; - newPrevPanelSize = this.previous.size + newPos; - if (this.next) { - newNextPanelSize = this.next.size - newPos; - } - } else { - newPos = event.pageY - this.startPos; - newPrevPanelSize = this.previous.size + newPos; - if (this.next) { - newNextPanelSize = this.next.size; // Let the top container grow. - } - } - - if (this.validateResize(newPrevPanelSize, newNextPanelSize) && this.previous !== undefined) { - this.previous.content.dimension = { value: newPrevPanelSize, unit: 'PX' }; - - if (this.next) { - this.next.content.dimension = { value: newNextPanelSize, unit: 'PX' }; - } - - this.setStyle(); - } - } + private getClientPx(event: MouseEvent): number { + return this.isHorizontal() ? event.clientX : event.clientY; } - private resizeEnd() { - if (this.previous !== undefined && this.resizeColumnSize !== undefined && this.size !== undefined) { - if (this.horizontal()) { - this.previous.size = this.getElementSize(this.previous.element); + private resizeStart(startEvent: MouseEvent, index: number): void { + this.resizeStartParameters = this.buildResizeStartParameters(index, startEvent); + } - let previousPanelColumnWidth = Math.round(this.previous.size / this.resizeColumnSize); - this.previous.content.dimension = { value: previousPanelColumnWidth, unit: 'FR' }; + private resizeEnd(endEvent: MouseEvent): void { + const prev = this.resizeStartParameters.prevContent; + const next = this.resizeStartParameters.nextContent; - if (this.next) { - this.next.size = this.getElementSize(this.next.element); + const positionDiffPx = this.getClientPx(endEvent) - this.resizeStartParameters.startPositionPx; - let nextPanelColumnWidth = Math.round( - (this.next.size - (previousPanelColumnWidth * this.resizeColumnSize - this.previous.size)) / - this.resizeColumnSize - ); - this.next.content.dimension = { value: nextPanelColumnWidth, unit: 'FR' }; - } + if (prev) { + prev.dimension.value = this.resizeStartParameters.prevContentStartSizePx + positionDiffPx; + } - this.setStyle(); - } + if (next) { + next.dimension.value = this.resizeStartParameters.nextContentStartSizePx - positionDiffPx; } this.layoutChange.emit(this.contents.map(c => c.dimension)); this.layoutChangeService.publishLayoutChange(); - this.clear(); } - private buildPreviousContentWithMetaData(index: number, splitterElement: HTMLElement): ContentWithMetadata { - const element = splitterElement.previousElementSibling as HTMLElement; + private buildResizeStartParameters(index: number, startEvent: MouseEvent): ResizeStartParameters { + const prevContent = this.contents.get(index); + const nextContent = this.contents.get(index + 1); return { - content: this.contents.get(index)!, - index: index, - element: element, - size: this.getElementSize(element) + startPositionPx: this.getClientPx(startEvent), + prevContentStartSizePx: prevContent?.dimension.value ?? 0, + nextContentStartSizePx: nextContent?.dimension.value ?? 0, + prevContent: prevContent, + nextContent: nextContent, }; } - private buildNextContentWithMetaData(index: number, splitterElement: HTMLElement): ContentWithMetadata | undefined { - const element = splitterElement.nextElementSibling as HTMLElement | undefined; + private subscribeToQueryListChanges(): void { + this.contents$ = queryListAndChanges$(this.contents ?? EMPTY).pipe( + map(contents => contents.toArray()), + tap(contents => + console.debug('contents', contents.map(c => c.dimension.value)) + ), + map(contents => this.normalizeContentsDimensions(contents)), + tap(normalizedContents => + console.debug('normalizedContents', normalizedContents.map(c => c.dimension.value)) + ) + ); + } - if (!element) { - return undefined; + private bindMouseListeners() { + if (!this.mouseMoveListener) { + this.mouseMoveListener = this.renderer.listen(this.document, 'mousemove', event => + this.debounceResize(event) + ); } - return { - content: this.contents.get(index + 1)!, - index: index, - element: element, - size: this.getElementSize(element) - }; + if (!this.mouseUpListener) { + this.mouseUpListener = this.renderer.listen(this.document, 'mouseup', event => + this.resizeEnd(event) + ); + } } - private getElementSize(element: HTMLElement): number { - return this.horizontal() ? element.getBoundingClientRect().width : element.getBoundingClientRect().height; + private unbindMouseListeners() { + this.mouseMoveListener?.(); + this.mouseMoveListener = undefined; + + this.mouseUpListener?.(); + this.mouseUpListener = undefined; } - private validateResize(_newPrevPanelSize: number, _newNextPanelSize?: number): boolean { - /** - * Stub method to validate resize. For now, returning true - */ - return true; + private getElementSizePx(element: HTMLElement): number { + return this.isHorizontal() ? element.getBoundingClientRect().width : element.getBoundingClientRect().height; } - private setStyle(): void { - if (this.previous !== undefined) { - this.renderer.setStyle(this.previous.element, 'flex', this.getFlex(this.previous.content.dimension)); + private isHorizontal() { + return this.direction === SplitterDirection.Horizontal; + } - if (this.next) { - this.renderer.setStyle(this.next.element, 'flex', this.getFlex(this.next.content.dimension)); - } + private setSplitterSizeStyle(): void { + switch (this.direction) { + case SplitterDirection.Horizontal: + this.splitterSizeStyle = { + width: `${this.splitterSize}px` + }; + break; + case SplitterDirection.Vertical: + this.splitterSizeStyle = { + height: `${this.splitterSize}px` + }; + break; + case undefined: + break; + default: + assertUnreachable(this.direction); } } - private clear() { - this.size = undefined; - this.startPos = undefined; - this.previous = undefined; - this.next = undefined; - this.currentSplitterElement = undefined; - } + protected readonly buildFlex = (pixels: number): string => `1 1 ${pixels}px`; + + protected readonly buildMaxHeight = (pixels: number): string => this.isHorizontal() ? '' : `${pixels}px`; + + protected readonly buildMaxWidth = (pixels: number): string => this.isHorizontal() ? `${pixels}px` : ''; +} + +interface NormalizationParameters { + itemCount: number; + pxPerItem: number; + // pxPerGridUnit: number; + // normalizedMultiple: number; } -interface ContentWithMetadata { - content: SplitterContentDirective; - index: number; - element: HTMLElement; - size: number; +interface ResizeStartParameters { + startPositionPx: number; + prevContentStartSizePx: number; + nextContentStartSizePx: number; + prevContent?: SplitterContentDirective; + nextContent?: SplitterContentDirective; } From 50596482dea18ede804e7964a3f4e43c9c430e4a Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Wed, 13 Sep 2023 17:30:12 -0700 Subject: [PATCH 2/2] fix: cleanup --- .../src/splitter/splitter.component.scss | 10 -- .../src/splitter/splitter.component.ts | 98 +++++-------------- 2 files changed, 24 insertions(+), 84 deletions(-) diff --git a/projects/components/src/splitter/splitter.component.scss b/projects/components/src/splitter/splitter.component.scss index 10ba4fae7..ec59727a0 100644 --- a/projects/components/src/splitter/splitter.component.scss +++ b/projects/components/src/splitter/splitter.component.scss @@ -13,16 +13,6 @@ flex-direction: column; } - .grid-lines { - height: 100%; - width: calc(100% + 16px); - position: absolute; - background: repeating-linear-gradient(90deg, m.$gray-2, m.$gray-2 2px, transparent 1px, transparent 6.25%); - border-right: 2px solid m.$gray-2; - margin: -8px; - pointer-events: none; - } - .splitter-content { display: flex; } diff --git a/projects/components/src/splitter/splitter.component.ts b/projects/components/src/splitter/splitter.component.ts index 5d6394cb9..254f2e364 100644 --- a/projects/components/src/splitter/splitter.component.ts +++ b/projects/components/src/splitter/splitter.component.ts @@ -16,7 +16,7 @@ import { import { assertUnreachable, LayoutChangeService, queryListAndChanges$, TypedSimpleChanges } from '@hypertrace/common'; import { debounce, isEmpty } from 'lodash-es'; import { EMPTY, Observable } from 'rxjs'; -import { map, tap } from 'rxjs/operators'; +import { map } from 'rxjs/operators'; import { SplitterDirection } from './splitter'; import { SplitterCellDimension, SplitterContentDirective } from './splitter-content.directive'; @@ -49,18 +49,15 @@ import { SplitterCellDimension, SplitterContentDirective } from './splitter-cont
-
` }) export class SplitterComponent implements OnChanges, AfterContentInit { - // private readonly GRID_COLUMNS_COUNT: number = 16; - @Input() public readonly direction?: SplitterDirection = SplitterDirection.Horizontal; @Input() - public readonly debounceTime: number = 4; + public readonly debounceTime: number = 12; @Input() public readonly splitterSize: number = 16; @@ -72,25 +69,24 @@ export class SplitterComponent implements OnChanges, AfterContentInit { private readonly contents!: QueryList; protected contents$!: Observable; - protected classes: string[] =[]; + protected classes: string[] = []; protected splitterSizeStyle?: Partial; - protected isShowGrid: boolean = true; private mouseMoveListener?: () => void; private mouseUpListener?: () => void; private normalizationParameters: NormalizationParameters = { itemCount: 0, - pxPerItem: 0, + pxPerItem: 0 }; private resizeStartParameters: ResizeStartParameters = { startPositionPx: 0, prevContentStartSizePx: 0, - nextContentStartSizePx: 0, + nextContentStartSizePx: 0 }; - private readonly debounceResize = debounce(this.resizeEnd, this.debounceTime); + private readonly debounceResize = debounce(this.resize, this.debounceTime); public constructor( @Inject(DOCUMENT) private readonly document: Document, @@ -106,12 +102,6 @@ export class SplitterComponent implements OnChanges, AfterContentInit { } } - private buildClasses(): string[] { - return [ - this.direction?.toLowerCase() ?? '', - ].filter(c => !isEmpty(c)) - } - public ngAfterContentInit(): void { this.subscribeToQueryListChanges(); } @@ -119,40 +109,11 @@ export class SplitterComponent implements OnChanges, AfterContentInit { private buildNormalizationParams(contents: SplitterContentDirective[]): NormalizationParameters { const totalAvailablePx = this.getElementSizePx(this.element.nativeElement); const splitterPx = this.splitterSize * (contents.length - 1); - // const pxPerGridUnit = (totalAvailablePx - splitterPx) / this.GRID_COLUMNS_COUNT; const pxPerItem = (totalAvailablePx - splitterPx) / contents.length; - const totalContentPxs = contents - .filter(content => content.dimension.unit === 'PX') - .reduce((prev, curr) => prev + curr.dimension.value, 0); - - const totalContentFrs = contents - .filter(content => content.dimension.unit === 'FR') - .reduce((prev, curr) => prev + curr.dimension.value, 0); - - // const pxContentGridUnits = Math.floor(totalContentPxs / pxPerGridUnit); - // const frContentGridUnits = Math.floor(totalContentFrs - pxContentGridUnits); - - // const normalizedMultiple = Math.floor(this.GRID_COLUMNS_COUNT / (pxContentGridUnits + frContentGridUnits)); - - console.debug('buildNormalizationParams', { - totalAvailablePx: totalAvailablePx, - splitterPx: splitterPx, - // pxPerGridUnit: pxPerGridUnit, - totalContentPxs: totalContentPxs, - totalContentFrs: totalContentFrs, - // pxContentGridUnits: pxContentGridUnits, - // frContentGridUnits: frContentGridUnits, - // normalizedMultiple: normalizedMultiple, - itemCount: contents.length, - pxPerItem: pxPerItem - }) - return { itemCount: contents.length, pxPerItem: pxPerItem - // pxPerGridUnit: pxPerGridUnit, - // normalizedMultiple: normalizedMultiple }; } @@ -164,11 +125,9 @@ export class SplitterComponent implements OnChanges, AfterContentInit { private normalizeContentDimension(content: SplitterContentDirective): SplitterContentDirective { if (content.dimension.unit === 'FR') { - // Coerce FR content to nearest pixel content.dimension = { unit: 'PX', value: content.dimension.value * this.normalizationParameters.pxPerItem - // value: content.dimension.value * this.normalizationParameters.pxPerGridUnit * this.normalizationParameters.normalizedMultiple }; } @@ -181,23 +140,19 @@ export class SplitterComponent implements OnChanges, AfterContentInit { } protected onGutterMouseUp(event: MouseEvent) { - this.resizeEnd(event); + this.resize(event); this.unbindMouseListeners(); } - private getClientPx(event: MouseEvent): number { - return this.isHorizontal() ? event.clientX : event.clientY; - } - private resizeStart(startEvent: MouseEvent, index: number): void { this.resizeStartParameters = this.buildResizeStartParameters(index, startEvent); } - private resizeEnd(endEvent: MouseEvent): void { + private resize(endEvent: MouseEvent): void { const prev = this.resizeStartParameters.prevContent; const next = this.resizeStartParameters.nextContent; - const positionDiffPx = this.getClientPx(endEvent) - this.resizeStartParameters.startPositionPx; + const positionDiffPx = this.getClientPx(endEvent) - this.resizeStartParameters.startPositionPx; if (prev) { prev.dimension.value = this.resizeStartParameters.prevContentStartSizePx + positionDiffPx; @@ -220,34 +175,27 @@ export class SplitterComponent implements OnChanges, AfterContentInit { prevContentStartSizePx: prevContent?.dimension.value ?? 0, nextContentStartSizePx: nextContent?.dimension.value ?? 0, prevContent: prevContent, - nextContent: nextContent, + nextContent: nextContent }; } private subscribeToQueryListChanges(): void { this.contents$ = queryListAndChanges$(this.contents ?? EMPTY).pipe( map(contents => contents.toArray()), - tap(contents => - console.debug('contents', contents.map(c => c.dimension.value)) - ), - map(contents => this.normalizeContentsDimensions(contents)), - tap(normalizedContents => - console.debug('normalizedContents', normalizedContents.map(c => c.dimension.value)) - ) + map(contents => this.normalizeContentsDimensions(contents)) ); } private bindMouseListeners() { if (!this.mouseMoveListener) { - this.mouseMoveListener = this.renderer.listen(this.document, 'mousemove', event => - this.debounceResize(event) - ); + this.mouseMoveListener = this.renderer.listen(this.document, 'mousemove', event => this.debounceResize(event)); } if (!this.mouseUpListener) { - this.mouseUpListener = this.renderer.listen(this.document, 'mouseup', event => - this.resizeEnd(event) - ); + this.mouseUpListener = this.renderer.listen(this.document, 'mouseup', event => { + this.resize(event); + this.unbindMouseListeners(); + }); } } @@ -259,6 +207,10 @@ export class SplitterComponent implements OnChanges, AfterContentInit { this.mouseUpListener = undefined; } + private getClientPx(event: MouseEvent): number { + return this.isHorizontal() ? event.clientX : event.clientY; + } + private getElementSizePx(element: HTMLElement): number { return this.isHorizontal() ? element.getBoundingClientRect().width : element.getBoundingClientRect().height; } @@ -286,18 +238,16 @@ export class SplitterComponent implements OnChanges, AfterContentInit { } } - protected readonly buildFlex = (pixels: number): string => `1 1 ${pixels}px`; - - protected readonly buildMaxHeight = (pixels: number): string => this.isHorizontal() ? '' : `${pixels}px`; + private buildClasses(): string[] { + return [this.direction?.toLowerCase() ?? ''].filter(c => !isEmpty(c)); + } - protected readonly buildMaxWidth = (pixels: number): string => this.isHorizontal() ? `${pixels}px` : ''; + protected readonly buildFlex = (pixels: number): string => `1 1 ${pixels}px`; } interface NormalizationParameters { itemCount: number; pxPerItem: number; - // pxPerGridUnit: number; - // normalizedMultiple: number; } interface ResizeStartParameters {