From eee66bdc91c1805d6a90e2aaea2d09c4503af03a Mon Sep 17 00:00:00 2001 From: BipanKishore Date: Wed, 8 May 2024 19:44:04 +0530 Subject: [PATCH 1/4] removed changeSizeInRatio --- src/utils/set-size-helper.ts | 2 +- src/utils/visibility-helper.ts | 29 ++++++++++++++++++++++++++--- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/utils/set-size-helper.ts b/src/utils/set-size-helper.ts index fe8d46b..d78ceda 100644 --- a/src/utils/set-size-helper.ts +++ b/src/utils/set-size-helper.ts @@ -75,7 +75,7 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu remainingVisiblePanes.splice(requestIndex, 1) const newMaxPaneSizeAllowd = initialSizeSum - pane.size - addOnSizeChange - setSizesAfterVisibilityChange(remainingVisiblePanes, newMaxPaneSizeAllowd) + setSizesAfterVisibilityChange(remainingVisiblePanes, newMaxPaneSizeAllowd, remainingVisiblePanes) const nowSizeSum = getPanesSizeSum(visiblePanes) allowedChange = newSize - (nowSizeSum - initialSizeSum + addOnSizeChange) diff --git a/src/utils/visibility-helper.ts b/src/utils/visibility-helper.ts index 469e1cc..03a09fd 100644 --- a/src/utils/visibility-helper.ts +++ b/src/utils/visibility-helper.ts @@ -165,7 +165,7 @@ export const setVisibilityOfResizers = (resizable: ResizableModel) => { export const setSizesAfterVisibilityChange = ( allVisiblePanes: PaneModel[], maxPaneSize: number, - actionVisibleList: PaneModel[] = allVisiblePanes + actionVisibleList: PaneModel[] ) => { const currentPanesSize = getPanesSizeSum(allVisiblePanes) const sizeChange = maxPaneSize - currentPanesSize @@ -173,7 +173,30 @@ export const setSizesAfterVisibilityChange = ( if (sizeChange === 0 || actionVisibleList.length === 0) { return } - changeSizeInRatio(allVisiblePanes, actionVisibleList, sizeChange, maxPaneSize) + + const operation = sizeChange > 0 ? PLUS : MINUS + + const sizeChangeAbsolute = Math.abs(sizeChange) + + if (sizeChangeAbsolute <= actionVisibleList.length) { + change1PixelToPanes(actionVisibleList, sizeChangeAbsolute, operation) + return + } + + const ratioSum = getPanesSizeSum(actionVisibleList) + + const nextActionVisibleList: PaneModel[] = [] + actionVisibleList.forEach((pane) => { + const size = pane.getSize() + const newSize = Math.round(sizeChangeAbsolute * (size / ratioSum)) + + const remainingSize = pane.setVisibilitySize(newSize, operation) + if (remainingSize) { + nextActionVisibleList.push(pane) + } + }) + + setSizesAfterVisibilityChange(allVisiblePanes, maxPaneSize, nextActionVisibleList) } export const changeSizeInRatio = (allVisiblePanes: PaneModel[], actionVisibleList: PaneModel[], @@ -239,7 +262,7 @@ export const setVisibilityFn = (resizable: ResizableModel, idMap: IKeyToBoolMap) const {maxPaneSize} = getMaxContainerSizes(resizable) - setSizesAfterVisibilityChange(visiblePanes, maxPaneSize) + setSizesAfterVisibilityChange(visiblePanes, maxPaneSize, visiblePanes) consoleGetSize(items) } From bf4e9a4a4449f68ba945fa2901b87af2790f69c0 Mon Sep 17 00:00:00 2001 From: BipanKishore Date: Wed, 8 May 2024 19:45:28 +0530 Subject: [PATCH 2/4] removed --- src/utils/visibility-helper.ts | 27 --------------------------- 1 file changed, 27 deletions(-) diff --git a/src/utils/visibility-helper.ts b/src/utils/visibility-helper.ts index 03a09fd..d2598a3 100644 --- a/src/utils/visibility-helper.ts +++ b/src/utils/visibility-helper.ts @@ -199,33 +199,6 @@ export const setSizesAfterVisibilityChange = ( setSizesAfterVisibilityChange(allVisiblePanes, maxPaneSize, nextActionVisibleList) } -export const changeSizeInRatio = (allVisiblePanes: PaneModel[], actionVisibleList: PaneModel[], - sizeChange: number, maxPaneSize: number) => { - const operation = sizeChange > 0 ? PLUS : MINUS - - const sizeChangeAbsolute = Math.abs(sizeChange) - - if (sizeChangeAbsolute <= actionVisibleList.length) { - change1PixelToPanes(actionVisibleList, sizeChangeAbsolute, operation) - return - } - - const ratioSum = getPanesSizeSum(actionVisibleList) - - const nextActionVisibleList: PaneModel[] = [] - actionVisibleList.forEach((pane) => { - const size = pane.getSize() - const newSize = Math.round(sizeChangeAbsolute * (size / ratioSum)) - - const remainingSize = pane.setVisibilitySize(newSize, operation) - if (remainingSize) { - nextActionVisibleList.push(pane) - } - }) - - setSizesAfterVisibilityChange(allVisiblePanes, maxPaneSize, nextActionVisibleList) -} - export const setVisibilityFn = (resizable: ResizableModel, idMap: IKeyToBoolMap) => { const { panesList, items From a73e8867a9554456cc7cca1e6fe01b6377acd5ee Mon Sep 17 00:00:00 2001 From: BipanKishore Date: Wed, 8 May 2024 19:59:45 +0530 Subject: [PATCH 3/4] updateSizeInRatio --- src/utils/set-size-helper.ts | 12 ++++-------- src/utils/visibility-helper.ts | 6 +++--- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/utils/set-size-helper.ts b/src/utils/set-size-helper.ts index d78ceda..50a8869 100644 --- a/src/utils/set-size-helper.ts +++ b/src/utils/set-size-helper.ts @@ -9,7 +9,7 @@ import { } from './panes' import {getChangeInViewSize} from './resizable-pane' import {findIndex} from './util' -import {setSizesAfterVisibilityChange} from './visibility-helper' +import {updateSizeInRatio} from './visibility-helper' // eslint-disable-next-line complexity export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: number, @@ -40,7 +40,6 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu 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) { @@ -75,10 +74,7 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu remainingVisiblePanes.splice(requestIndex, 1) const newMaxPaneSizeAllowd = initialSizeSum - pane.size - addOnSizeChange - setSizesAfterVisibilityChange(remainingVisiblePanes, newMaxPaneSizeAllowd, remainingVisiblePanes) - - const nowSizeSum = getPanesSizeSum(visiblePanes) - allowedChange = newSize - (nowSizeSum - initialSizeSum + addOnSizeChange) + updateSizeInRatio(remainingVisiblePanes, newMaxPaneSizeAllowd, remainingVisiblePanes) } else if (behavior === BUTTOM_FIRST) { const firstInningItems = visibleItems.slice(requestIndexInVisibleItems + 2) const secondInningItems = visibleItems.slice(0, requestIndexInVisibleItems - 1).reverse() @@ -109,9 +105,9 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu secondInningItems.forEach(getActionOnItem(PLUS, DIRECTIONS.DOWN)) } } - const changeInView = getChangeInViewSize(resizable) - allowedChange = newSize + changeInView if (!isSecondAttemp) { + const changeInView = getChangeInViewSize(resizable) + const allowedChange = newSize + changeInView setSizeMethod(resizable, id, allowedChange, behavior, true) } } diff --git a/src/utils/visibility-helper.ts b/src/utils/visibility-helper.ts index d2598a3..24c5763 100644 --- a/src/utils/visibility-helper.ts +++ b/src/utils/visibility-helper.ts @@ -162,7 +162,7 @@ export const setVisibilityOfResizers = (resizable: ResizableModel) => { getItemsVisibleAndNoPartialHidden(items) } // actionList it can be removed -export const setSizesAfterVisibilityChange = ( +export const updateSizeInRatio = ( allVisiblePanes: PaneModel[], maxPaneSize: number, actionVisibleList: PaneModel[] @@ -196,7 +196,7 @@ export const setSizesAfterVisibilityChange = ( } }) - setSizesAfterVisibilityChange(allVisiblePanes, maxPaneSize, nextActionVisibleList) + updateSizeInRatio(allVisiblePanes, maxPaneSize, nextActionVisibleList) } export const setVisibilityFn = (resizable: ResizableModel, idMap: IKeyToBoolMap) => { @@ -235,7 +235,7 @@ export const setVisibilityFn = (resizable: ResizableModel, idMap: IKeyToBoolMap) const {maxPaneSize} = getMaxContainerSizes(resizable) - setSizesAfterVisibilityChange(visiblePanes, maxPaneSize, visiblePanes) + updateSizeInRatio(visiblePanes, maxPaneSize, visiblePanes) consoleGetSize(items) } From 29912803952539b679e857a1e6757d0d00341786 Mon Sep 17 00:00:00 2001 From: BipanKishore Date: Wed, 8 May 2024 20:42:09 +0530 Subject: [PATCH 4/4] setSizeTopAndBottom --- src/models/pane-model.ts | 1 - src/utils/resizable-pane.ts | 1 - src/utils/set-size-helper.ts | 81 +++++++++++++++++++--------------- src/utils/visibility-helper.ts | 3 -- 4 files changed, 45 insertions(+), 41 deletions(-) diff --git a/src/models/pane-model.ts b/src/models/pane-model.ts index 185df41..08de034 100644 --- a/src/models/pane-model.ts +++ b/src/models/pane-model.ts @@ -335,7 +335,6 @@ export class PaneModel { if (this.visibility) { this.size = this.minSize if (this.defaultMinSize === 0) { - console.log(this.id, this.size) this.setHiddenResizer(this.size, direction, 1) } } diff --git a/src/utils/resizable-pane.ts b/src/utils/resizable-pane.ts index 7bdef3b..cfcd56e 100644 --- a/src/utils/resizable-pane.ts +++ b/src/utils/resizable-pane.ts @@ -392,7 +392,6 @@ export const getChangeInViewSize = (resizable: ResizableModel) => { const {items} = resizable const {containerSize} = getMaxContainerSizes(resizable) const allItemsSum = getPanesSizeSum(items) - console.log('containerSize', containerSize, 'allItemsSum', allItemsSum) return containerSize - allItemsSum } diff --git a/src/utils/set-size-helper.ts b/src/utils/set-size-helper.ts index 50a8869..78d2574 100644 --- a/src/utils/set-size-helper.ts +++ b/src/utils/set-size-helper.ts @@ -11,6 +11,47 @@ import {getChangeInViewSize} from './resizable-pane' import {findIndex} from './util' import {updateSizeInRatio} from './visibility-helper' +export const setSizeTopAndBottom = ( + sizeChange: number, + behavior: ISetSizeBehaviour, + visibleItems: IResizableItem[], + requestIndexInVisibleItems: number +) => { + let firstInningItems : IResizableItem[] + let secondInningItems: IResizableItem[] + const getActionOnItem = (operation: addAndRemoveType, direction: number) => (item: IResizableItem) => { + item.syncAxisSize() + item.restoreLimits() + sizeChange = item.changeSize(sizeChange, operation, direction) + } + + const changeSizeOfFirstAndSecondInningsItems = (firstInningDirection: number, secondInningDirection: number) => { + if (sizeChange > 0) { // Need to reduce other + firstInningItems.forEach(getActionOnItem(MINUS, firstInningDirection)) + secondInningItems.forEach(getActionOnItem(MINUS, secondInningDirection)) + } + + if (sizeChange < 0) { // Need to increase other + sizeChange = Math.abs(sizeChange) + + firstInningItems.forEach(getActionOnItem(PLUS, firstInningDirection)) + secondInningItems.forEach(getActionOnItem(PLUS, secondInningDirection)) + } + } + + if (behavior === BUTTOM_FIRST) { + firstInningItems = visibleItems.slice(requestIndexInVisibleItems + 2) + secondInningItems = visibleItems.slice(0, requestIndexInVisibleItems - 1).reverse() + + changeSizeOfFirstAndSecondInningsItems(DIRECTIONS.DOWN, DIRECTIONS.UP) + } else if (behavior === TOP_FIRST) { + firstInningItems = visibleItems.slice(0, requestIndexInVisibleItems - 1).reverse() + secondInningItems = visibleItems.slice(requestIndexInVisibleItems + 2) + + changeSizeOfFirstAndSecondInningsItems(DIRECTIONS.UP, DIRECTIONS.DOWN) + } +} + // eslint-disable-next-line complexity export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: number, behavior: ISetSizeBehaviour = RATIO, isSecondAttemp = false) => { @@ -49,25 +90,19 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu let addOnSizeChange = 0 let resizer: IResizableItem - // setting hiddenResizer state to NONE in final State + if (pane.hiddenResizer === LEFT) { resizer = visibleItems[requestIndexInVisibleItems - 1] } else if (pane.hiddenResizer === RIGHT) { resizer = visibleItems[requestIndexInVisibleItems + 1] } + pane.hiddenResizer = NONE if (resizer) { resizer.setVisibility(true, false) addOnSizeChange = resizer.resizerSize sizeChange += addOnSizeChange } - pane.hiddenResizer = NONE - - const getActionOnItem = (operation: addAndRemoveType, direction: number) => (item: IResizableItem) => { - item.syncAxisSize() - item.restoreLimits() - sizeChange = item.changeSize(sizeChange, operation, direction) - } if (behavior === RATIO) { const remainingVisiblePanes = [...visiblePanes] @@ -75,36 +110,10 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu const newMaxPaneSizeAllowd = initialSizeSum - pane.size - addOnSizeChange updateSizeInRatio(remainingVisiblePanes, newMaxPaneSizeAllowd, remainingVisiblePanes) - } else if (behavior === BUTTOM_FIRST) { - const firstInningItems = visibleItems.slice(requestIndexInVisibleItems + 2) - const secondInningItems = visibleItems.slice(0, requestIndexInVisibleItems - 1).reverse() - - if (sizeChange > 0) { // Need to reduce other - firstInningItems.forEach(getActionOnItem(MINUS, DIRECTIONS.DOWN)) - secondInningItems.forEach(getActionOnItem(MINUS, DIRECTIONS.UP)) - } - if (sizeChange < 0) { // Need to increase other - sizeChange = Math.abs(sizeChange) - - firstInningItems.forEach(getActionOnItem(PLUS, DIRECTIONS.DOWN)) - secondInningItems.forEach(getActionOnItem(PLUS, DIRECTIONS.UP)) - } - } else if (behavior === TOP_FIRST) { - 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)) - secondInningItems.forEach(getActionOnItem(MINUS, DIRECTIONS.DOWN)) - } + } - if (sizeChange < 0) { // Need to increase other - sizeChange = Math.abs(sizeChange) + setSizeTopAndBottom(sizeChange, behavior, visibleItems, requestIndexInVisibleItems) - firstInningItems.forEach(getActionOnItem(PLUS, DIRECTIONS.UP)) - secondInningItems.forEach(getActionOnItem(PLUS, DIRECTIONS.DOWN)) - } - } if (!isSecondAttemp) { const changeInView = getChangeInViewSize(resizable) const allowedChange = newSize + changeInView diff --git a/src/utils/visibility-helper.ts b/src/utils/visibility-helper.ts index 24c5763..98432b3 100644 --- a/src/utils/visibility-helper.ts +++ b/src/utils/visibility-helper.ts @@ -1,7 +1,6 @@ import {IKeyToBoolMap, IResizableItem} from '../@types' import {LEFT, MINUS, NONE, PLUS, RIGHT} from '../constant' import {ResizableModel, PaneModel} from '../models' -import {consoleGetSize} from './development-util' import { change1PixelToPanes, getItemsByIndexes, getPanesSizeSum, getVisibleItems, @@ -236,6 +235,4 @@ export const setVisibilityFn = (resizable: ResizableModel, idMap: IKeyToBoolMap) const {maxPaneSize} = getMaxContainerSizes(resizable) updateSizeInRatio(visiblePanes, maxPaneSize, visiblePanes) - - consoleGetSize(items) }