Angular动态水平拆分组件反向缩放逻辑实现问询

一、修改现有代码支持反向缩放 #

你当前已实现「放大当前面板→挤压后续面板」的逻辑，要实现反向的「缩小当前面板到最小→挤压前序面板」，可通过新增前序面板处理函数、修改鼠标移动逻辑完成。

1. 新增前序面板调整函数 #

添加adjustPreviousSiblings函数，从当前面板的前序兄弟中获取可用宽度（面板当前宽度减去最小宽度的部分），直到凑够所需宽度或前序面板都达最小宽度：

adjustPreviousSiblings(currentIndex: number, neededWidth: number, widths: number[], minWidths: number[]): number {
  let remaining = neededWidth;
  // 从紧邻当前面板的前一个开始向前遍历
  for (let i = currentIndex - 1; i >= 0 && remaining > 0; i--) {
    const availableWidth = widths[i] - minWidths[i];
    if (availableWidth <= 0) continue;

    // 取可用宽度和剩余需求的较小值
    const takeWidth = Math.min(availableWidth, remaining);
    widths[i] -= takeWidth;
    remaining -= takeWidth;
  }
  // 返回未凑齐的宽度（如果前序面板都已到最小）
  return remaining;
}

2. 修改鼠标移动事件处理逻辑 #

在mouseMove中区分缩小当前面板的场景，当当前面板即将小于最小宽度时，调用adjustPreviousSiblings从前面取宽度，保持当前面板为最小宽度，并将剩余偏移量分配给后续面板：

onMouseMove(event: MouseEvent) {
  if (!this.isResizing) return;

  const deltaX = event.clientX - this.startX;
  const currentIndex = this.currentPanelIndex;
  const currentWidth = this.panelWidths[currentIndex];
  const minWidth = this.minWidths[currentIndex];
  const newWidth = currentWidth + deltaX;

  if (deltaX < 0) {
    // 处理缩小当前面板的操作
    if (newWidth < minWidth) {
      // 当前面板已达最小，计算需要从前面获取的宽度
      const needed = minWidth - newWidth;
      // 从前面面板取宽度
      this.adjustPreviousSiblings(currentIndex, needed, this.panelWidths, this.minWidths);
      // 保持当前面板为最小宽度
      this.panelWidths[currentIndex] = minWidth;
      // 将剩余偏移量分配给后续面板（放大后续面板）
      const extraDelta = deltaX - (minWidth - currentWidth);
      if (extraDelta !== 0) {
        this.adjustNextSiblings(currentIndex + 1, -extraDelta, this.panelWidths, this.minWidths);
      }
    } else {
      // 正常缩小当前面板，同时放大后续面板
      this.panelWidths[currentIndex] = newWidth;
      this.adjustNextSiblings(currentIndex + 1, -deltaX, this.panelWidths, this.minWidths);
    }
  } else {
    // 原有放大当前面板的逻辑（保持不变）
    const maxWidth = this.containerWidth - this.minWidths.slice(currentIndex + 1).reduce((a, b) => a + b, 0);
    if (newWidth > maxWidth) {
      this.panelWidths[currentIndex] = maxWidth;
      const extraDelta = newWidth - maxWidth;
      this.adjustNextSiblings(currentIndex + 1, extraDelta, this.panelWidths, this.minWidths);
    } else {
      this.panelWidths[currentIndex] = newWidth;
      this.adjustNextSiblings(currentIndex + 1, deltaX, this.panelWidths, this.minWidths);
    }
  }

  this.startX = event.clientX;
  this.updatePanelWidths();
}

二、更通用的实现方式 #

为避免前序/后续逻辑重复，可抽象通用的兄弟面板调整函数，统一处理不同方向的宽度分配：

1. 抽象通用调整函数 #

adjustSiblings(
  startIndex: number,
  delta: number,
  widths: number[],
  minWidths: number[],
  direction: 'forward' | 'backward'
): number {
  let remaining = delta;
  const step = direction === 'forward' ? 1 : -1;
  let currentIndex = startIndex;

  while (remaining !== 0 && currentIndex >= 0 && currentIndex < widths.length) {
    const available = widths[currentIndex] - minWidths[currentIndex];
    if (available <= 0) {
      currentIndex += step;
      continue;
    }

    if (delta > 0) {
      // 从兄弟面板取宽度（用于放大当前面板或从前面借宽度）
      const take = Math.min(available, remaining);
      widths[currentIndex] -= take;
      remaining -= take;
    } else {
      // 给兄弟面板分配宽度（用于缩小当前面板时放大后续）
      const give = Math.min(-remaining, Infinity);
      widths[currentIndex] += give;
      remaining += give;
    }

    currentIndex += step;
  }
  return remaining;
}

2. 简化前序/后续调整函数 #

基于通用函数重构原有函数：

adjustNextSiblings(startIndex: number, delta: number, widths: number[], minWidths: number[]): number {
  return this.adjustSiblings(startIndex, delta, widths, minWidths, 'forward');
}

adjustPreviousSiblings(startIndex: number, delta: number, widths: number[], minWidths: number[]): number {
  return this.adjustSiblings(startIndex - 1, delta, widths, minWidths, 'backward');
}

3. 维护容器宽度一致性 #

每次调整后校验所有面板宽度之和是否等于容器总宽度，避免出现空隙：

updatePanelWidths() {
  const totalWidth = this.panelWidths.reduce((sum, width) => sum + width, 0);
  if (totalWidth !== this.containerWidth) {
    const diff = this.containerWidth - totalWidth;
    // 调整最后一个面板的宽度补全差值
    this.panelWidths[this.panelWidths.length - 1] += diff;
  }
  // 触发视图更新（根据你的组件绑定方式调整）
  this.panelWidthsChange.emit([...this.panelWidths]);
}

三、关键细节 #

• 确保每个面板的最小宽度配置正确，调整过程中不会低于该值；
• 在mouseUp事件中及时移除mouseMove监听，避免内存泄漏；
• 若面板数量较多，可使用ChangeDetectorRef手动触发变更检测，减少不必要的性能消耗。

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