Angular Splitter组件拖拽偏移异常问题排查

我正在用@angular/cdk/portals开发Angular的Splitter组件，其他功能都正常，但拖拽分割条时，面板的偏移速度会毫无理由地比鼠标移动速度快。

组件核心结构（Flexbox布局） #

组件的模板结构如下：

<div class="d-flex w-100" [class]="splitter-horizontal">
    <ng-content></ng-content>
    <ng-container *ngFor="let panel of (panels$ | async); let index = index; let last = last">
        <ng-container *bsLet="(widthStyles$ | async) as widthStyles">
            <div class="split-panel overflow-hidden" #splitPanel [style.width]="widthStyles | bsElementAt:index">
                <ng-template [cdkPortalOutlet]="panel.portal"></ng-template>
            </div>
        </ng-container>
        <div class="divider" (mousedown)="startResize($event, index, index + 1)" *ngIf="!last"></div>
    </ng-container>
</div>

核心逻辑代码 #

1. 初始化面板尺寸（startResize方法）
   鼠标按下分割条时，计算当前面板的渲染宽度，将默认的width:100%替换为具体像素值：

const sizes = this.splitPanels
    .map((sp) => {
        const styles = window.getComputedStyle(sp.nativeElement);
        return styles.width;
    })
    .map((size) => size.slice(0, -2))
    .map((size) => parseFloat(size));

this.previewSizes$.next(sizes);

2. 生成宽度样式（widthStyles$）
   通过组合多个Observable生成面板的宽度样式数组：

this.widthStyles$ = combineLatest([this.orientation$, this.previewSizes$, this.panels$])
    .pipe(map(([orientation, previewSizes, panels]) => {
        if (previewSizes) {
            return [...Array(panels.length).keys()].map((v, i) => {
                if (i < previewSizes.length) {
                    return previewSizes[i] + 'px';
                } else {
                    return '100%'; // 未指定尺寸时使用等宽
                }
            });
        } else {
            return Array(panels.length).map((v, i) => '100%');
        }
    }));

3. 监听鼠标移动事件
   通过HostListener监听文档级别的鼠标移动，更新鼠标位置的BehaviorSubject：

@HostListener('document:mousemove', ['$event'])
onMouseMove(ev: MouseEvent) {
    this.mousePosition$.next({ x: ev.offsetX, y: ev.offsetY });
}

4. 拖拽时更新面板尺寸
   在startResize中订阅鼠标位置变化，计算偏移量并更新面板尺寸：

this.mousePosition$.pipe(delay(5), takeUntil(this.stopResize$)).subscribe((mousePosition) => {
    const deltaX = mousePosition!.x - this.operation.startPosition.x;
    const sx = Array.from(this.operation.sizes);
    sx[this.operation.indexBefore] = this.operation.sizes[this.operation.indexBefore] + deltaX;
    sx[this.operation.indexAfter] = this.operation.sizes[this.operation.indexAfter] - deltaX;
    this.previewSizes$.next(sx);
});

问题原因与修复方案 #

核心问题点

1. 鼠标位置计算错误：使用ev.offsetX是取鼠标相对于当前元素（分割条）的偏移量，但拖拽过程中分割条会随着面板宽度变化而移动，导致offsetX的参考基准不断变化，计算出的deltaX被重复累加，最终面板增速远超鼠标移动速度。
2. 偏移量累加逻辑错误：每次更新尺寸时都基于上一次的operation.sizes累加deltaX，如果事件堆积（比如delay(5)导致的批量处理），会重复应用偏移量。
3. 不必要的延迟操作：delay(5)会导致鼠标移动事件堆积，一次性触发多次尺寸更新，加剧增速问题。

修复步骤

1. 改用全局鼠标位置计算偏移量
   将ev.offsetX替换为全局位置ev.clientX，同时在startResize时记录全局起始位置：

// startResize中记录全局起始位置
this.operation.startPosition = { x: ev.clientX, y: ev.clientY };

// onMouseMove中更新全局位置
@HostListener('document:mousemove', ['$event'])
onMouseMove(ev: MouseEvent) {
    this.mousePosition$.next({ x: ev.clientX, y: ev.clientY });
}

2. 基于初始尺寸计算当前尺寸
   保存拖拽开始时的初始尺寸快照，避免重复累加偏移量：

// startResize中保存初始尺寸
this.operation.initialSizes = [...sizes];

// 订阅鼠标移动时的计算逻辑
this.mousePosition$.pipe(takeUntil(this.stopResize$)).subscribe((mousePosition) => {
    const deltaX = mousePosition!.x - this.operation.startPosition.x;
    const sx = [...this.operation.initialSizes];
    sx[this.operation.indexBefore] = this.operation.initialSizes[this.operation.indexBefore] + deltaX;
    sx[this.operation.indexAfter] = this.operation.initialSizes[this.operation.indexAfter] - deltaX;
    // 可选：添加最小宽度限制，防止面板被拖到消失
    sx[this.operation.indexBefore] = Math.max(sx[this.operation.indexBefore], 50);
    sx[this.operation.indexAfter] = Math.max(sx[this.operation.indexAfter], 50);
    this.previewSizes$.next(sx);
});

3. 移除不必要的delay操作
   直接删除delay(5)，避免事件堆积导致的批量更新。

内容的提问来源于stack exchange，提问作者Pieterjan