fix(splitter): improving sizing calculations in percent splitter #13252 - master

projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts

@@ -190,9 +190,8 @@ export class IgxSplitterPaneComponent {
  */
  @HostBinding('style.flex')
  public get flex() {
- const isAuto = this.size === 'auto' && !this.dragSize;
- const grow = !isAuto ? 0 : 1;
  const size = this.dragSize || this.size;
+ const grow = this.isPercentageSize && !this.dragSize ? 1 : 0;
  return `${grow} ${grow} ${size}`;
  }
 

projects/igniteui-angular/src/lib/splitter/splitter.component.ts

@@ -217,16 +217,8 @@ export class IgxSplitterComponent implements AfterContentInit {
  * @param delta - The difference along the X (or Y) axis between the initial and the current point when dragging the bar.
  */
  public onMoving(delta: number) {
- const min = parseInt(this.pane.minSize, 10) || 0;
- const max = parseInt(this.pane.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
- const minSibling = parseInt(this.sibling.minSize, 10) || 0;
- const maxSibling = parseInt(this.sibling.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
+ const [ paneSize, siblingSize ] = this.calcNewSizes(delta);
 
- const paneSize = this.initialPaneSize - delta;
- const siblingSize = this.initialSiblingSize + delta;
- if (paneSize < min || paneSize > max || siblingSize < minSibling || siblingSize > maxSibling) {
- return;
- }
  this.pane.dragSize = paneSize + 'px';
  this.sibling.dragSize = siblingSize + 'px';
 
@@ -235,17 +227,8 @@ export class IgxSplitterComponent implements AfterContentInit {
  }
 
  public onMoveEnd(delta: number) {
- const min = parseInt(this.pane.minSize, 10) || 0;
- const max = parseInt(this.pane.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
- const minSibling = parseInt(this.sibling.minSize, 10) || 0;
- const maxSibling = parseInt(this.sibling.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
-
- const paneSize = this.initialPaneSize - delta;
- const siblingSize = this.initialSiblingSize + delta;
+ const [ paneSize, siblingSize ] = this.calcNewSizes(delta);
 
- if (paneSize < min || paneSize > max || siblingSize < minSibling || siblingSize > maxSibling) {
- return;
- }
  if (this.pane.isPercentageSize) {
  // handle % resizes
  const totalSize = this.getTotalSize();
@@ -338,6 +321,32 @@ export class IgxSplitterComponent implements AfterContentInit {
  k += 2;
  });
  }
+
+ /**
+ * @hidden @internal
+ * Calculates new sizes for the panes based on move delta and initial sizes
+ */
+ private calcNewSizes(delta: number): [number, number] {
+ const min = parseInt(this.pane.minSize, 10) || 0;
+ const minSibling = parseInt(this.sibling.minSize, 10) || 0;
+ const max = parseInt(this.pane.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize - minSibling;
+ const maxSibling = parseInt(this.sibling.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize - min;
+
+ if (delta < 0) {
+ const maxPossibleDelta = Math.min(
+ max - this.initialPaneSize,
+ this.initialSiblingSize - minSibling,
+ )
+ delta = Math.min(maxPossibleDelta, Math.abs(delta)) * -1;
+ } else {
+ const maxPossibleDelta = Math.min(
+ this.initialPaneSize - min,
+ maxSibling - this.initialSiblingSize
+ )
+ delta = Math.min(maxPossibleDelta, Math.abs(delta));
+ }
+ return [this.initialPaneSize - delta, this.initialSiblingSize + delta];
+ }
 }
 
 export const SPLITTER_INTERACTION_KEYS = new Set('right down left up arrowright arrowdown arrowleft arrowup'.split(' '));