Merge pull request #73 from BipanKishore/new-setSizeKey-for-issue-in-…

…setsize-in-same-direction

New set size key for issue in setsize in same direction

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

@@ -162,7 +162,7 @@ describe('Test Pane Model', () => {
         })
     })
 
-    it.only('destoryOnHide: false at Pane level', () => {
+    it('destoryOnHide: false at Pane level', () => {
       cy.viewport(1000, 1000)
       cy.mount(
         <ResizableComponentCustomPanesTestWrapper
@@ -186,7 +186,7 @@ describe('Test Pane Model', () => {
         })
     })
 
-    it.only('destoryOnHide: true at Pane level', () => {
+    it('destoryOnHide: true at Pane level', () => {
       cy.viewport(1000, 1000)
       cy.mount(
         <ResizableComponentCustomPanesTestWrapper

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

@@ -5,7 +5,10 @@ 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, containerId, rScontainerId} from './fix-test-ids'
+import {
+  CK0, CK1, CK4, P0, P1, P2, P3, P4, 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'
@@ -225,7 +228,7 @@ describe('Custom resizer:API: Method setSize', () => {
     )
   })
 
-  it(`setSize of Pane to Infinity have maxSize = Infinity 
+  it(`setSize of Pane to Infinity have maxSize = Infinity
   should only allow max possible depending on others`, () => {
     resizableApi.setSize(P0, 5000)
 
@@ -646,6 +649,75 @@ describe('setSize should work in bottom_first behaviour', () => {
       [10, 10, 500, 10, 96, 10, 262, 10, 96]
     )
   })
+
+  // Edge
+  it(`
+  -- setSize in TOP_FIRST
+  -- setSize in BUTTOM_FIRST with same size
+  -- Result it should change size second time if there is no change in size
+  `, () => {
+    resizableApi.setSize(P2, 300, TOP_FIRST)
+    const currentSize = resizableApi.getSizesMap()
+
+    resizableApi.setSize(P2, 300, BUTTOM_FIRST)
+    rCy.checkWidths(
+      currentSize
+    )
+  })
+
+  // Edge
+  it(`
+    -- setSize in TOP_FIRST
+    -- setSize in TOP_FIRST with same size
+    -- Result it should change size second time
+    `, () => {
+    resizableApi.setSize(P2, 300, TOP_FIRST)
+
+    const currentSize = resizableApi.getSizesMap()
+
+    resizableApi.setSize(P2, 300, TOP_FIRST)
+    rCy.checkWidths(
+      currentSize
+    )
+  })
+
+  // Edge
+  it(`
+    -- decrease x amount using setSize in TOP_FIRST
+    -- increase x amount using setSize in BUTTOM_FIRST
+    -- Result it should behave as it has moved down
+    `, () => {
+    const X = 93
+
+    const p2SizeStep1 = resizableApi.getSizesMap()[P2]
+    resizableApi.setSize(P2, p2SizeStep1 - X, TOP_FIRST)
+
+    const p2SizeStep2 = resizableApi.getSizesMap()[P2]
+    resizableApi.setSize(P2, p2SizeStep2 + X, BUTTOM_FIRST)
+
+    rCy.checkWidths(
+      [97, 10, 382, 10, 193, 10, 196, 10, 96]
+    )
+  })
+
+  // Edge
+  it(`
+    -- decrease x amount using setSize in BUTTOM_FIRST
+    -- increase x amount using setSize in TOP_FIRST
+    -- Result it should behave as it has moved Up
+    `, () => {
+    const X = 93
+
+    const p2SizeStep1 = resizableApi.getSizesMap()[P2]
+    resizableApi.setSize(P2, p2SizeStep1 - X, BUTTOM_FIRST)
+
+    const p2SizeStep2 = resizableApi.getSizesMap()[P2]
+    resizableApi.setSize(P2, p2SizeStep2 + X, TOP_FIRST)
+
+    rCy.checkWidths(
+      [97, 10, 196, 10, 193, 10, 382, 10, 96]
+    )
+  })
 })
 
 describe('setSize should work in TOP_FIRST & BUTTOM_FIRST', () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "resizable-panes-react",
-  "version": "4.0.34",
+  "version": "4.0.36",
   "description": "A simple library for resizing elements in the browser",
   "module": "./lib/esm/index.esm.js",
   "main": "./lib/cjs/index.cjs.js",

src/utils/set-size-helper.ts

@@ -1,5 +1,8 @@
 import {ISetSizeBehaviour, IResizableItem, addAndRemoveType} from '../@types'
-import {RATIO, LEFT, RIGHT, BUTTOM_FIRST, MINUS, DIRECTIONS, NONE, PLUS, TOP_FIRST} from '../constant'
+import {
+  RATIO, LEFT, RIGHT, BUTTOM_FIRST,
+  MINUS, DIRECTIONS, NONE, PLUS, TOP_FIRST
+} from '../constant'
 import {ResizableModel} from '../models'
 import {
   getVisibleItems, getPanesSizeSum
@@ -21,16 +24,29 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu
     return
   }
 
-  if (resizable.setSizeKey === id) {
+  const currentSetSizeKey = `${id}-${behavior}`
+  if (resizable.setSizeKey === currentSetSizeKey) {
     panesList.forEach((pane) => pane.restoreBeforeSetSize())
   } else {
     panesList.forEach((pane) => pane.storeForNewSetSizeKey())
-    resizable.setSizeKey = id
+    resizable.setSizeKey = currentSetSizeKey
   }
 
   const initialSizeSum = getPanesSizeSum(visiblePanes)
 
   const pane = visiblePanes[requestIndex]
+  pane.restoreLimits()
+  const preSize = pane.size
+  pane.changeSizeAndReturnRemaing(newSize)
+
+  const acceptableNewSize = pane.size
+  let allowedChange: number // Task it has only two condition, It (can be calc) smaller or greater than container Size
+  let sizeChange = acceptableNewSize - preSize
+
+  if (!sizeChange) {
+    return
+  }
+
   const requestIndexInVisibleItems = findIndex(visibleItems, id)
 
   let addOnSizeChange = 0
@@ -45,17 +61,9 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu
   if (resizer) {
     resizer.setVisibility(true, false)
     addOnSizeChange = resizer.resizerSize
+    pane.hiddenResizer = NONE
   }
 
-  pane.restoreLimits()
-  const preSize = pane.size
-  pane.changeSizeAndReturnRemaing(newSize)
-
-  const acceptableNewSize = pane.size
-  let allowedChange: number // Task it has only two condition, It (can be calc) smaller or greater than container Size
-  let sizeChange = acceptableNewSize - preSize
-  pane.hiddenResizer = NONE
-
   const getActionOnItem = (operation: addAndRemoveType, direction: number) => (item: IResizableItem) => {
     item.syncAxisSize()
     item.restoreLimits()
@@ -92,8 +100,8 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu
       allowedChange = acceptableNewSize + changeInView
     }
   } else if (behavior === TOP_FIRST) {
-    const secondInningItems = visibleItems.slice(requestIndexInVisibleItems + 2)
     const firstInningItems = visibleItems.slice(0, requestIndexInVisibleItems - 1).reverse()
+    const secondInningItems = visibleItems.slice(requestIndexInVisibleItems + 2)
 
     if (sizeChange > 0) { // Need to reduce other
       firstInningItems.forEach(getActionOnItem(MINUS, DIRECTIONS.UP))