Clearflags on new view

cypress/component-testing/context/resizable-panes-context.cy.tsx

@@ -0,0 +1,90 @@
+import {RCy} from '../../utils'
+import {noMinMax5PanesSet} from '../pane-model-config-sets'
+import {CK3, CK4, P0, P1, containerId} from '../fix-test-ids'
+import {CustomResizerFirst} from '../../components/custom-resizer'
+import React from 'react'
+import {RPTestWrapper} from '../../components/rp-test-wrapper'
+import {IResizableApi} from '../../../src/@types'
+
+describe('should test ResizableContext: clearflagsOnNewView', () => {
+  let resizableApi: IResizableApi
+  const rCy = new RCy({
+    containerId,
+    plainResizer: false,
+    resizerSize: 10
+  })
+  beforeEach(() => {
+    rCy.setViewPort()
+    cy.mount(
+      <RPTestWrapper
+        panesList={noMinMax5PanesSet}
+        resigerClass="bg-slate-500"
+        resizer={
+          <CustomResizerFirst size={10} />
+          }
+        resizerSize={10}
+
+        uniqueId={containerId}
+        vertical
+        zipping={false}
+
+        onReady={(api: IResizableApi) => {
+          resizableApi = api
+        }}
+      >
+      </RPTestWrapper>
+    )
+  })
+
+  it(`
+  - using api.setSize set P0 to MAX 
+  - hide P4, P3
+  - using api.setSize set P0 to MAX
+  - Result: It should allow P0 to set to current max (P3, P4 hidden)`, () => {
+    resizableApi.setSize(P0, 10000)
+    rCy.cyGet(CK4).click()
+    rCy.cyGet(CK3).click()
+
+    cy.wait(50)
+      .then(() => {
+        rCy.checkWidths(
+          [1020, 10, 0, 10, 0, 0, 0, 0, 0]
+        )
+
+        resizableApi.setSize(P0, 10000)
+        rCy.checkWidths(
+          [1020, 10, 0, 10, 0, 0, 0, 0, 0]
+        )
+      })
+  })
+
+  it.only(`
+  - using api.setSize set P0 to MAX 
+  - hide P4, P3
+  - using api.setSize set P0 to MAX
+  - Result: It should allow P0 to set to current max (P3, P4 hidden)`, () => {
+    rCy.cyGet(CK4).click()
+    cy.wait(50)
+      .then(() => {
+        resizableApi.setSize(P0, 10000)
+      })
+      .wait(50)
+      .then(() => {
+        rCy.cyGet(CK3).click()
+      })
+    // resizableApi.setSize(P0, 10000)
+    // resizableApi.restoreDefault()
+    // resizableApi.setSize(P1, 10000)
+    // cy.wait(50)
+    //   .then(() => {
+    //     rCy.checkWidths(
+    //       [1020, 10, 0, 10, 0, 0, 0, 0, 0]
+    //     )
+
+    //     resizableApi.setSize(P0, 10000)
+    //     rCy.checkWidths(
+    //       [1020, 10, 0, 10, 0, 0, 0, 0, 0]
+    //     )
+    //   })
+  })
+})

cypress/component-testing/models/pane-model.cy.tsx

@@ -4,7 +4,8 @@ import {RPTestWrapper} from '../../components/rp-test-wrapper'
 import {mix3PanesSet, noMinMax5PanesSet, withMinMaxWithMinMaxUnitPixel5PanesSet} from '../pane-model-config-sets'
 import {CK0, R0, R1, rScontainerId} from '../fix-test-ids'
 import {CustomResizerFirst} from '../../components/custom-resizer'
-import {ResizableComponentCustomPanesTestWrapper} from '../../components/rp-test-wrapper/resizable-component-custom-panes-test-wrapper'
+import {ResizableComponentCustomPanesTestWrapper}
+  from '../../components/rp-test-wrapper/resizable-component-custom-panes-test-wrapper'
 import {Pane} from '../../../src'
 import {Loading} from '../../components/Loading'
 

cypress/component-testing/resizable-api.cy.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {RCy} from '../utils'
 import {withMinMaxEqualSize5PanesSet} from './pane-model-config-sets'
 import {RPTestWrapper} from '../components/rp-test-wrapper'
-import {CK0, CK1, CK4, P0, P1, P2, P3, P4, P5, R0, R1, R2, R3, rScontainerId} from './fix-test-ids'
+import {CK0, CK1, CK4, P0, P1, P2, P3, P4, P5, R0, R1, R2, R3, containerId, rScontainerId} from './fix-test-ids'
 import {CustomResizerFirst} from '../components/custom-resizer'
 import {Pane, ResizablePanes} from '../../src'
 import {IGetState, IResizableApi} from '../../src/@types'
@@ -268,6 +268,63 @@ describe('Custom resizer:API: Method setSize', () => {
   })
 })
 
+describe('Custom resizer:API: Method setSize', () => {
+  const rCy = new RCy({
+    resizerSize: 10,
+    containerId: rScontainerId,
+    len: 5
+  })
+  let resizableApi: IResizableApi
+
+  beforeEach(() => {
+    rCy.setViewPort()
+    cy.mount(
+      <div className='h-300 w-100p'>
+        <ResizablePanes
+          resizer={
+            <CustomResizerFirst horizontal={false} size={10} />
+        }
+          resizerSize={10}
+          storageApi={localStorage}
+          uniqueId={rScontainerId}
+          vertical
+          onReady={(api: IResizableApi) => {
+            resizableApi = api
+          }}
+        >
+
+          <Pane className='bg-cyan-500' id={P0} minSize={0.1} size={1}>
+          </Pane>
+
+          <Pane className='bg-red-500' id={P1} maxSize={5} minSize={1} size={3}>
+          </Pane>
+          <Pane className='bg-cyan-500' id={P2} maxSize={4} minSize={0.5} size={2}>
+          </Pane>
+
+          <Pane className='bg-red-500' id={P3} maxSize={5} minSize={1} size={3}>
+          </Pane>
+          <Pane className='bg-cyan-500' id={P4} minSize={0} size={1} >
+          </Pane>
+
+        </ResizablePanes>
+      </div>
+    )
+    cy.wait(50)
+  })
+
+  // Edge
+  it('Should work for last Hidden Pane', () => {
+    rCy.move(R3, containerId, 'right')
+    cy.wait(50)
+      .then(() => {
+        resizableApi.setSize(P4, 400)
+        rCy.checkWidths(
+          [60, 10, 180, 10, 120, 10, 240, 10, 400]
+        )
+      })
+  })
+})
+
 describe('Plain resizer:API: Method setSize', () => {
   const rCy = new RCy({
     resizerSize: 10,

src/@types/basic-types.ts

@@ -14,3 +14,5 @@ export type IBooleanOrUndefined = boolean | undefined
 export type IStringOrUndefined = string | undefined
 
 export type IVisibilityState = 'zipped' | 'visible' | 'hidden'
+
+export type IClearFlagsParam = 'setSize' | 'ratio' | 'visibility' | ''

src/constant.ts

@@ -13,6 +13,7 @@ export const MINUS_ONE = -1
 // export const APP_NAME = 'react-split-pane'
 
 export const RATIO = 'ratio'
+export const SET_SIZE = 'setSize'
 
 export const RESIZER = 'resizer'
 

src/context/resizable-panes-context.ts

@@ -3,14 +3,16 @@ import {createMap, findById, findIndex} from '../utils/util'
 import {
   DIRECTIONS, LEFT, MAX_SIZE, MIN_SIZE,
   NONE,
-  RATIO, RIGHT, SIZE, VISIBILITY
+  RATIO, RIGHT, SET_SIZE, SIZE, VISIBILITY
 } from '../constant'
 import {
   createPaneModelListAndResizerModelList,
-  getPanesAndResizers, getVisibilityState, emitIfChangeInPartialHiddenState, restoreDefaultFn, setDownMaxLimits,
+  getPanesAndResizers, getVisibilityState,
+  emitIfChangeInPartialHiddenState, restoreDefaultFn, setDownMaxLimits,
   setUISizesFn, setUpMaxLimits, syncAxisSizesFn,
   getVisibleItems,
-  getPanesSizeSum
+  getPanesSizeSum,
+  safeSetVisibility
 } from '../utils/panes'
 import {
   calculateAxes, setVirtualOrderList, movingLogic, setCurrentMinMax,
@@ -20,6 +22,7 @@ import {
 import {getDirection, getSizeStyle, toArray} from '../utils/dom'
 import {ResizeStorage} from '../utils/storage'
 import {
+  IClearFlagsParam,
   IKeyToBoolMap, IResizableContext
   , IResizableEvent, IResizableItem, IResizablePaneProviderProps
 } from '../@types'
@@ -33,7 +36,8 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
     vertical, children, unit,
     uniqueId, storageApi,
     zipping,
-    onResizeStop, onChangeVisibility,
+    onResizeStop,
+    onChangeVisibility,
     onResize
   } = props
 
@@ -77,12 +81,6 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
       .register(api)
   }
 
-  // const clearflagsOnNewView = (except: 'setSizeKey') => {
-  //   resizable.newVisibilityModel = false
-  //   panesList.forEach((item) => item.syncRatioSizeToSize())
-  //   resizable.setSizeKey = null
-  // }
-
   const registerContainer = (getContainerRect: any) => {
     resizable.getContainerRect = getContainerRect
     let visibilityMap = props.visibility
@@ -107,6 +105,18 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
     syncAxisSizes()
   }
 
+  const clearflagsOnNewView = (except: IClearFlagsParam = '') => {
+    if (except !== RATIO) {
+      panesList.forEach((item) => item.syncRatioSizeToSize())
+    }
+    if (except !== VISIBILITY) {
+      resizable.newVisibilityModel = false
+    }
+    if (except !== SET_SIZE) {
+      resizable.setSizeKey = null
+    }
+  }
+
   const calculateAndSetHeight = (e: IResizableEvent) => {
     const {movement} = e
     if (resizable.isViewSizeChanged || !movement) {
@@ -120,8 +130,7 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
       movingLogic(e, resizable)
     }
     setUISizesFn(items, resizable.direction)
-    resizable.newVisibilityModel = false
-    panesList.forEach((item) => item.syncRatioSizeToSize())
+    clearflagsOnNewView()
     emitIfChangeInPartialHiddenState(panesList, emitChangeVisibility)
   }
 
@@ -175,6 +184,7 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
     emitResizeStop()
     emitChangeVisibility()
     storage.setStorage(resizable)
+    clearflagsOnNewView(VISIBILITY)
   }
 
   // It is getting default empty Object param
@@ -208,8 +218,8 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
   }
 
   const restoreDefault = () => {
-    restoreDefaultFn(resizable)
-    resizable.newVisibilityModel = false
+    restoreDefaultFn(resizable.items)
+    clearflagsOnNewView()
     emitResizeStop()
     emitChangeVisibility()
   }
@@ -248,10 +258,11 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
     // setting hiddenResizer state to NONE in final State
     if (pane.hiddenResizer === LEFT) {
       resizer = visibleItems[requestIndexInItems - 1]
-      resizer.setVisibility(true, false)
-      addOnSizeChange = resizer.resizerSize
     } else if (pane.hiddenResizer === RIGHT) {
       resizer = visibleItems[requestIndexInItems + 1]
+    }
+
+    if (resizer) {
       resizer.setVisibility(true, false)
       addOnSizeChange = resizer.resizerSize
     }
@@ -273,10 +284,11 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
       resizable.newVisibilityModel = false
       panesList.forEach((item) => item.syncRatioSizeToSize())
       emitIfChangeInPartialHiddenState(panesList, emitChangeVisibility)
+      clearflagsOnNewView(SET_SIZE)
       consoleGetSize(items)
     } else {
       visibleItems.forEach((item) => item.setPreSize())
-      resizer?.setVisibility(true, true)
+      safeSetVisibility(resizer, true, true)
       if (!isSecondAttemp) {
         const allowedChange = newSize - (nowSizeSum - initialSizeSum + addOnSizeChange)
         setSize(id, allowedChange, true)

src/utils/panes.ts

@@ -65,7 +65,7 @@ export const getMinSizeSum = (panesList: PaneModel[], start: number, end: number
   getSum(panesList, (pane) => pane.minSize, start, end)
 
 // Need to check for hidden element
-export const restoreDefaultFn = ({items}: any) => {
+export const restoreDefaultFn = (items: IResizableItem[]) => {
   items.forEach(pane => pane.restore())
   setUISizesFn(items, DIRECTIONS.NONE)
 }
@@ -92,6 +92,12 @@ export const setUpMaxLimits = (panesList: PaneModel[], index: number) => {
   }
 }
 
+export const safeSetVisibility = (item : IResizableItem, visibility: boolean, isPartiallyHidden: boolean) => {
+  if (item) {
+    item.setVisibility(visibility, isPartiallyHidden)
+  }
+}
+
 export const getItemsByIndexes = (items : IResizableItem[], indexes: number[]) => {
   const itemsByIndexes = items.filter((_, i) => indexes.includes(i))
   return itemsByIndexes