Skip to content

Commit

Permalink
fix: cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@jake-bassett
jake-bassett committed Sep 14, 2023
1 parent 09f828f commit 5059648
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 84 deletions.
10 changes: 0 additions & 10 deletions projects/components/src/splitter/splitter.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
98 changes: 24 additions & 74 deletions projects/components/src/splitter/splitter.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -49,18 +49,15 @@ import { SplitterCellDimension, SplitterContentDirective } from './splitter-cont
</div>
</div>
</ng-container>
<div *ngIf="this.isShowGrid" class="grid-lines"></div>
</div>
`
})
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;
Expand All @@ -72,25 +69,24 @@ export class SplitterComponent implements OnChanges, AfterContentInit {
private readonly contents!: QueryList<SplitterContentDirective>;
protected contents$!: Observable<SplitterContentDirective[]>;

protected classes: string[] =[];
protected classes: string[] = [];
protected splitterSizeStyle?: Partial<CSSStyleDeclaration>;
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,
Expand All @@ -106,53 +102,18 @@ export class SplitterComponent implements OnChanges, AfterContentInit {
}
}

private buildClasses(): string[] {
return [
this.direction?.toLowerCase() ?? '',
].filter(c => !isEmpty(c))
}

public ngAfterContentInit(): void {
this.subscribeToQueryListChanges();
}

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
};
}

Expand All @@ -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
};
}

Expand All @@ -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;
Expand All @@ -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();

Check warning on line 197 in projects/components/src/splitter/splitter.component.ts

View check run for this annotation

Codecov / codecov/patch

projects/components/src/splitter/splitter.component.ts#L196-L197 

Added lines #L196 - L197 were not covered by tests
});
}
}

Expand All @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 5059648

Please sign in to comment.