fix(splitter): percentage min max constraints scenario

Author: ddaribo

src/components/splitter/splitter.spec.ts

@@ -880,8 +880,7 @@ describe('Splitter', () => {
         expect(sizes.startSize + sizes.endSize).to.be.at.most(totalAvailable);
       });
 
-      // TODO: very broken scenario (same in Angular)
-      xit('should honor minSize and maxSize constraints when resizing, constraints in %', async () => {
+      it('should honor minSize and maxSize constraints when resizing, constraints in %', async () => {
         const constraintSplitter = await fixture<IgcSplitterComponent>(
           createTwoPanesWithSizesAndConstraints({
             startSize: '30%',
@@ -930,7 +929,7 @@ describe('Splitter', () => {
     });
 
     describe('Vertical orientation', () => {
-      it('should honor minSize and maxSize constraints when resizing - constraints in px', async () => {
+      it('should honor minSize and maxSize constraints when resizing - constraints in px - vertical', async () => {
         const mixedConstraintSplitter = await fixture<IgcSplitterComponent>(
           createTwoPanesWithSizesAndConstraints({
             orientation: 'vertical',
@@ -967,6 +966,54 @@ describe('Splitter', () => {
         sizes = getPanesSizes(mixedConstraintSplitter, 'height');
         expect(sizes.endSize).to.equal(300);
       });
+
+      it('should honor minSize and maxSize constraints when resizing, constraints in % - vertical', async () => {
+        const constraintSplitter = await fixture<IgcSplitterComponent>(
+          createTwoPanesWithSizesAndConstraints({
+            orientation: 'vertical',
+            startSize: '30%',
+            startMinSize: '10%',
+            startMaxSize: '80%',
+            endSize: '70%',
+            endMinSize: '20%',
+            endMaxSize: '90%',
+          })
+        );
+        await elementUpdated(constraintSplitter);
+
+        const bar = getSplitterPart(constraintSplitter, 'bar');
+        const barSize = bar.getBoundingClientRect().height;
+        const totalAvailable = 500 - barSize;
+        expect(totalAvailable).to.equal(495);
+
+        let deltaY = 1000;
+        await resize(constraintSplitter, 0, deltaY);
+
+        let sizes = getPanesSizes(constraintSplitter, 'height');
+        const expectedStartMax = Math.round((totalAvailable * 80) / 100);
+        expect(sizes.startSize).to.be.closeTo(expectedStartMax, 2);
+
+        deltaY = -1000;
+        await resize(constraintSplitter, 0, deltaY);
+
+        sizes = getPanesSizes(constraintSplitter, 'height');
+        const expectedStartMin = Math.round((totalAvailable * 10) / 100);
+        expect(sizes.startSize).to.be.closeTo(expectedStartMin, 2);
+
+        deltaY = 1000;
+        await resize(constraintSplitter, 0, deltaY);
+
+        sizes = getPanesSizes(constraintSplitter, 'height');
+        const expectedEndMin = Math.round((totalAvailable * 20) / 100);
+        expect(sizes.endSize).to.be.closeTo(expectedEndMin, 2);
+
+        deltaY = -1000;
+        await resize(constraintSplitter, 0, deltaY);
+
+        sizes = getPanesSizes(constraintSplitter, 'height');
+        const expectedEndMax = Math.round((totalAvailable * 90) / 100);
+        expect(sizes.endSize).to.be.closeTo(expectedEndMax, 2);
+      });
     });
 
     it('should result in % sizes after resize when the panes size is auto', () => {

src/components/splitter/splitter.ts

@@ -35,6 +35,8 @@ export interface IgcSplitterComponentEventMap {
 interface PaneResizeState {
   initialSize: number;
   isPercentageBased: boolean;
+  minSizePx?: number;
+  maxSizePx?: number;
 }
 
 interface SplitterResizeState {
@@ -438,9 +440,35 @@ export default class IgcSplitterComponent extends EventEmitterMixin<
     return {
       initialSize: size,
       isPercentageBased: this._isPercentageSize(pane) || this._isAutoSize(pane),
+      minSizePx: this._setMinMaxInPx(pane, 'min'),
+      maxSizePx: this._setMinMaxInPx(pane, 'max'),
     };
   }
 
+  private _setMinMaxInPx(
+    pane: 'start' | 'end',
+    type: 'min' | 'max'
+  ): number | undefined {
+    let value: string | undefined;
+    if (type === 'max') {
+      value = pane === 'start' ? this.startMaxSize : this.endMaxSize;
+    } else {
+      value = pane === 'start' ? this.startMinSize : this.endMinSize;
+    }
+    if (!value) {
+      return undefined;
+    }
+    const totalSize = this.getTotalSize();
+    let result: number;
+    if (value.indexOf('%') !== -1) {
+      const percentageValue = Number.parseInt(value ?? '0', 10) || 0;
+      result = (percentageValue / 100) * totalSize;
+    } else {
+      result = Number.parseInt(value ?? '0', 10) || 0;
+    }
+    return result;
+  }
+
   private _resizing(delta: number) {
     let [paneSize, siblingSize] = this._calcNewSizes(delta);
     const totalSize = this.getTotalSize();
@@ -523,15 +551,15 @@ export default class IgcSplitterComponent extends EventEmitterMixin<
     if (!this._resizeState) return [0, 0];
 
     let finalDelta: number;
-    const min = Number.parseInt(this.startMinSize ?? '0', 10) || 0;
-    const minSibling = Number.parseInt(this.endMinSize ?? '0', 10) || 0;
+    const min = this._resizeState.startPane.minSizePx || 0;
+    const minSibling = this._resizeState.endPane.minSizePx || 0;
     const max =
-      Number.parseInt(this.startMaxSize ?? '0', 10) ||
+      this._resizeState.startPane.maxSizePx ||
       this._resizeState.startPane.initialSize +
         this._resizeState.endPane.initialSize -
         minSibling;
     const maxSibling =
-      Number.parseInt(this.endMaxSize ?? '0', 10) ||
+      this._resizeState.endPane.maxSizePx ||
       this._resizeState.startPane.initialSize +
         this._resizeState.endPane.initialSize -
         min;

stories/splitter.stories.ts

@@ -103,7 +103,7 @@ interface IgcSplitterArgs {
 
 type Story = StoryObj<IgcSplitterArgs>;
 
-function changePaneMinMaxSizes() {
+function changePaneMinMaxSizesPx() {
   const splitter = document.querySelector('igc-splitter');
   if (!splitter) {
     return;
@@ -114,6 +114,19 @@ function changePaneMinMaxSizes() {
   splitter.endMaxSize = '300px';
 }
 
+function changePaneMinMaxSizesPercent() {
+  const splitter = document.querySelector('igc-splitter');
+  if (!splitter) {
+    return;
+  }
+  splitter.startMinSize = '10%';
+  splitter.startMaxSize = '80%';
+  splitter.endMinSize = '20%';
+  splitter.endMaxSize = '90%';
+  splitter.startSize = '30%';
+  splitter.endSize = '70%';
+}
+
 export const Default: Story = {
   render: ({
     orientation,
@@ -135,6 +148,7 @@ export const Default: Story = {
 
       .splitters {
         height: 400px;
+        /*width: 1000px;*/ /* useful for testing % values */
       }
     </style>
 
@@ -152,15 +166,44 @@ export const Default: Story = {
         .endMinSize=${endMinSize}
         .endMaxSize=${endMaxSize}
       >
-        <div slot="start" class="pane-content">Pane 1</div>
-        <div slot="end" class="pane-content">Pane 2</div>
+        <div slot="start" class="pane-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
+          scelerisque elementum ante, et tincidunt eros ultrices sit amet.
+          Mauris non consectetur nunc. In hac habitasse platea dictumst.
+          Pellentesque ornare et tellus sit amet varius. Nulla in augue rhoncus,
+          finibus mauris semper, tincidunt sem. Cras vitae semper neque, eget
+          tempus massa. Maecenas gravida turpis quis interdum bibendum. Nam quis
+          ultricies est. Fusce ante erat, iaculis quis iaculis ut, iaculis sed
+          nunc. Cras iaculis condimentum lacus nec tempus. Nam ex massa, mattis
+          vitae iaculis in, suscipit ut nibh.
+        </div>
+        <div slot="end" class="pane-content">
+          Maecenas sit amet ipsum non ipsum scelerisque varius. Maecenas
+          scelerisque nisl scelerisque nulla ultricies eleifend. Aliquam sit
+          amet velit mauris. Duis at nulla vitae risus condimentum semper. Nam
+          ornare arcu vitae euismod pharetra. Morbi facilisis tincidunt lorem at
+          consequat. Aliquam varius quam non eros suscipit, ac tincidunt sapien
+          porttitor. Sed sed lorem quam. Praesent blandit aliquam arcu a
+          vestibulum. Mauris porta faucibus ex in vehicula. Pellentesque ut
+          risus quis felis molestie facilisis eget et est. Proin interdum urna
+          vitae porttitor suscipit. Curabitur lobortis aliquet dolor sit amet
+          varius. Proin a semper velit, non molestie libero. Suspendisse
+          potenti. Aliquam vestibulum dui id lacus suscipit, eget posuere justo
+          venenatis. Vestibulum id velit ac dui posuere pretium.
+        </div>
       </igc-splitter>
     </div>
     <igc-button
       style="margin-top: 16px;"
       variant="outlined"
-      @click=${changePaneMinMaxSizes}
-      >Change All Panes Min/Max Sizes</igc-button
+      @click=${changePaneMinMaxSizesPx}
+      >Change All Panes Min/Max Sizes (px)</igc-button
+    >
+    <igc-button
+      style="margin-top: 16px;"
+      variant="outlined"
+      @click=${changePaneMinMaxSizesPercent}
+      >Change All Panes Min/Max Sizes (%)</igc-button
     >
   `,
 };