Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix: use afterRender and host #514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 30, 2025
Merged

fix: use afterRender and host #514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2e868f2
fix: user afterrender and host
SanderElias May 29, 2025
529fa50
fix: use read phase
SanderElias May 29, 2025
534c065
fix: prevent excessive CD
SanderElias May 30, 2025
b91b989
fix: add explainatory comment
SanderElias May 30, 2025
9b24e55
fix: add explainatory comment, and move to write phase
SanderElias May 30, 2025
6b4418b
fix: remove stale comment
SanderElias May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 28 additions & 24 deletions projects/angular-split/src/lib/split/split.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
import { DOCUMENT, NgStyle, NgTemplateOutlet } from '@angular/common'
import {
ChangeDetectionStrategy,
Component,
ElementRef,
HostBinding,
InjectionToken,
NgZone,
Renderer2,
afterRenderEffect,
booleanAttribute,
computed,
contentChild,
contentChildren,
effect,
inject,
input,
isDevMode,
output,
signal,
} from '@angular/core'
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
import type { SplitAreaComponent } from '../split-area/split-area.component'
import {
Subject,
filter,
Expand All @@ -33,26 +32,26 @@ import {
takeUntil,
tap,
} from 'rxjs'
import { ANGULAR_SPLIT_DEFAULT_OPTIONS } from '../angular-split-config.token'
import { SplitGutterDynamicInjectorDirective } from '../gutter/split-gutter-dynamic-injector.directive'
import { SplitGutterDirective } from '../gutter/split-gutter.directive'
import { SplitAreaSize, SplitGutterInteractionEvent } from '../models'
import type { SplitAreaComponent } from '../split-area/split-area.component'
import { SplitCustomEventsBehaviorDirective } from '../split-custom-events-behavior.directive'
import {
ClientPoint,
assertUnreachable,
createClassesString,
gutterEventsEqualWithDelta,
fromMouseMoveEvent,
fromMouseUpEvent,
getPointFromEvent,
gutterEventsEqualWithDelta,
leaveNgZone,
numberAttributeWithFallback,
sum,
toRecord,
assertUnreachable,
} from '../utils'
import { DOCUMENT, NgStyle, NgTemplateOutlet } from '@angular/common'
import { SplitGutterInteractionEvent, SplitAreaSize } from '../models'
import { SplitCustomEventsBehaviorDirective } from '../split-custom-events-behavior.directive'
import { areAreasValid } from '../validations'
import { SplitGutterDirective } from '../gutter/split-gutter.directive'
import { SplitGutterDynamicInjectorDirective } from '../gutter/split-gutter-dynamic-injector.directive'
import { ANGULAR_SPLIT_DEFAULT_OPTIONS } from '../angular-split-config.token'

interface MouseDownContext {
mouseDownEvent: MouseEvent | TouchEvent
Expand Down Expand Up @@ -88,7 +87,6 @@ export const SPLIT_AREA_CONTRACT = new InjectionToken<SplitAreaComponent>('Split
})
export class SplitComponent {
private readonly document = inject(DOCUMENT)
private readonly renderer = inject(Renderer2)
private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef)
private readonly ngZone = inject(NgZone)
private readonly defaultOptions = inject(ANGULAR_SPLIT_DEFAULT_OPTIONS)
Expand Down Expand Up @@ -164,22 +162,28 @@ export class SplitComponent {
constructor() {
if (isDevMode()) {
// Logs warnings to console when the provided areas sizes are invalid
effect(() => {
// Special mode when no size input was declared which is a valid mode
if (this.unit() === 'percent' && this._visibleAreas().every((area) => area.size() === 'auto')) {
return
}
afterRenderEffect({
// we use the afterRender read phase here,
// because we want to run this after all processing is done.
// and we are not updating anything in the DOM
read: () => {
// Special mode when no size input was declared which is a valid mode
if (this.unit() === 'percent' && this._visibleAreas().every((area) => area.size() === 'auto')) {
return
}

areAreasValid(this._visibleAreas(), this.unit(), true)
areAreasValid(this._visibleAreas(), this.unit(), true)
},
})
}

// Responsible for updating grid template style. Must be this way and not based on HostBinding
// as change detection for host binding is bound to the parent component and this style
// is updated on every mouse move. Doing it this way will prevent change detection cycles in parent.
effect(() => {
const gridTemplateColumnsStyle = this.gridTemplateColumnsStyle()
this.renderer.setStyle(this.elementRef.nativeElement, 'grid-template', gridTemplateColumnsStyle)
// we are running this after Angular has completed its CD loop
// as we are updating the style of the host, and we don't want to re-trigger the CD loop
// doing this in the host of the component would retrigger the CD too many times
afterRenderEffect({
write: () => {
this.elementRef.nativeElement.style.gridTemplate = this.gridTemplateColumnsStyle()
},
})

this.gutterMouseDownSubject
Expand Down
2 changes: 1 addition & 1 deletion src/app/examples/split-transitions/split-transitions.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ export class SplitTransitionsComponent extends AComponent {
setTimeout(() => {
const logsEl = this.logsEl()
if (logsEl.nativeElement.scroll) {
;(<HTMLElement>logsEl.nativeElement).scroll({ top: this.logMessages.length * 30 })
(<HTMLElement>logsEl.nativeElement).scroll({ top: this.logMessages.length * 30 })
}
})
}
Expand Down