From 2cfb45274492105fa8b6eb0a891aa888ecc55f7b Mon Sep 17 00:00:00 2001 From: BipanKishore Date: Sun, 19 May 2024 15:53:31 +0530 Subject: [PATCH 1/3] removed-setVirtualOrderList --- .../src/context/resizable-panes-context.ts | 6 +- .../src/models/resizable-model.ts | 4 - .../src/utils/development-util/index.ts | 9 -- packages/resizable-core/src/utils/panes.ts | 9 +- .../src/utils/resizable-pane.ts | 108 +++++------------- 5 files changed, 38 insertions(+), 98 deletions(-) diff --git a/packages/resizable-core/src/context/resizable-panes-context.ts b/packages/resizable-core/src/context/resizable-panes-context.ts index 6b70c12..f9dce56 100644 --- a/packages/resizable-core/src/context/resizable-panes-context.ts +++ b/packages/resizable-core/src/context/resizable-panes-context.ts @@ -19,7 +19,7 @@ import { } from '../utils/panes' import { calculateAxes, - setVirtualOrderList, + getHandleIndex, movingLogic, setCurrentMinMax, toRatioModeAllPanes, @@ -130,7 +130,9 @@ export const getResizable = ( } resizable.onMouseDown = ([mouseCoordinate]: IResizableEvent, handleId: string) => { + const index = getHandleIndex(items, handleId) resizable.register({ + index, handleId, direction: DIRECTIONS.NONE, axisCoordinate: mouseCoordinate @@ -173,8 +175,6 @@ export const getResizable = ( const directionChangeActions = (mouseCoordinate: number) => { resizable.axisCoordinate = mouseCoordinate - setVirtualOrderList(resizable) - syncAxisSizes() setCurrentMinMax(resizable) calculateAxes(resizable) diff --git a/packages/resizable-core/src/models/resizable-model.ts b/packages/resizable-core/src/models/resizable-model.ts index e1fe6d6..1b6cc72 100644 --- a/packages/resizable-core/src/models/resizable-model.ts +++ b/packages/resizable-core/src/models/resizable-model.ts @@ -14,7 +14,6 @@ export class ResizableModel { direction: number axisCoordinate: number - // Index of virtualOrderListm handleId Index index: number topAxis: number bottomAxis: number @@ -22,9 +21,6 @@ export class ResizableModel { handleId: string items: IResizableItem[] - virtualOrderList: IResizableItem[] - decreasingItems: IResizableItem[] - increasingItems: IResizableItem[] panesList: PaneModel[] resizersList: IResizableItem[] diff --git a/packages/resizable-core/src/utils/development-util/index.ts b/packages/resizable-core/src/utils/development-util/index.ts index f3555db..ecdb137 100644 --- a/packages/resizable-core/src/utils/development-util/index.ts +++ b/packages/resizable-core/src/utils/development-util/index.ts @@ -59,12 +59,3 @@ export const consoleResizerLimitCrossedUp = () => { export const consoleResizerLimitCrossedDown = () => { console.error('setDownMaxLimits setDownMaxLimits') } - -export const consoleVirtualOrder = (resizable: ResizableModel) => { - console.log( - 'visibleActiveIndex', resizable.index - ) - console.log('increasingItems', getList((resizable.increasingItems), 'id')) - console.log('decreasingItems', getList(resizable.decreasingItems, 'id')) - console.log('virtualOrderList', getList(resizable.virtualOrderList, 'id')) -} diff --git a/packages/resizable-core/src/utils/panes.ts b/packages/resizable-core/src/utils/panes.ts index 354014d..6cac50a 100644 --- a/packages/resizable-core/src/utils/panes.ts +++ b/packages/resizable-core/src/utils/panes.ts @@ -55,13 +55,14 @@ export const restoreFn = (items: IResizableItem[]) => { // It is used when we rapidly move out of axis export const setMaxLimits = (resizable: ResizableModel, firstInningMethod: any, secondInningMethod: any, direction: number) => { - const {virtualOrderList, index} = resizable + const {items, index} = resizable + const visibleItems = getVisibleItems(items) - for (let i = 0; i < virtualOrderList.length; i++) { + for (let i = 0; i < visibleItems.length; i++) { if (i <= index) { - firstInningMethod(virtualOrderList[i], direction) + firstInningMethod(visibleItems[i], direction) } else { - secondInningMethod(virtualOrderList[i], direction) + secondInningMethod(visibleItems[i], direction) } } } diff --git a/packages/resizable-core/src/utils/resizable-pane.ts b/packages/resizable-core/src/utils/resizable-pane.ts index 85647b9..54951bb 100644 --- a/packages/resizable-core/src/utils/resizable-pane.ts +++ b/packages/resizable-core/src/utils/resizable-pane.ts @@ -10,24 +10,29 @@ import { getItemsSizeSum, getRatioSizeSum, getVisibleItems, setUISizesFn, synPanesMaxToSize, synPanesMinToSize } from './panes' -import {filterEmpty, findIndex, isItUp, reverse} from './util' - -export const movingLogic = (mouseCoordinate: number, { - axisCoordinate, - decreasingItems, - increasingItems, - direction -}: ResizableModel) => { +import {findIndex, isItUp, reverse} from './util' + +export const movingLogic = (mouseCoordinate: number, resizable: ResizableModel) => { let sizeChange: number - let decreasingItemsLocal = decreasingItems - let increasingItemsLocal = increasingItems + + const {items, direction, index, axisCoordinate} = resizable + + const visibleItems = getVisibleItems(items) + + let decreasingItems: IResizableItem[] + let increasingItems: IResizableItem [] + + const firstHalf = reverse(visibleItems.slice(0, index + 1)) + const secondHalf = visibleItems.slice(index + 1) + if (isItUp(direction)) { sizeChange = axisCoordinate - mouseCoordinate - decreasingItemsLocal = reverse(decreasingItems) + increasingItems = secondHalf + decreasingItems = firstHalf } else { sizeChange = mouseCoordinate - axisCoordinate - - increasingItemsLocal = reverse(increasingItems) + increasingItems = firstHalf + decreasingItems = secondHalf } if (sizeChange < 0) { @@ -38,91 +43,38 @@ export const movingLogic = (mouseCoordinate: number, { let reverseSizeChange = sizeChange - decreasingItemsLocal.forEach(item => { + decreasingItems.forEach(item => { sizeChange = changePaneSize(item, sizeChange, CHANGE.REMOVE) }) reverseSizeChange -= sizeChange - increasingItemsLocal.forEach(item => { + increasingItems.forEach(item => { reverseSizeChange = changePaneSize(item, reverseSizeChange, CHANGE.ADD) }) } -// eslint-disable-next-line complexity -export const setVirtualOrderList = (resizable: ResizableModel) => { - const {items, direction, handleId} = resizable - +export const getHandleIndex = (items: IResizableItem[], handleId: string) => { const visibleItems = getVisibleItems(items) const handleIndex = findIndex(visibleItems, handleId) - - const decreasingItems: (IResizableItem | undefined)[] = [] - let increasingItems: (IResizableItem | undefined)[] = [] - let virtualOrderList: (IResizableItem)[] - - const logicForIncreasingList = (i: number, attachedIndex: number) => { - const pane = visibleItems[i] - // i - Pane - // i + 1 - Resizer - if (pane.size) { - increasingItems[i] = pane - increasingItems[i + attachedIndex] = visibleItems[i + attachedIndex] // it is pane - } else { - increasingItems[i] = visibleItems[i + attachedIndex] - increasingItems[i + attachedIndex] = pane // it is pane - } - } - - if (isItUp(direction)) { - for (let i = handleIndex - 1; i > -1; i -= 2) { - decreasingItems.push(visibleItems[i], visibleItems[i - 1]) - } - decreasingItems.reverse() - - increasingItems = [visibleItems[handleIndex]] - - for (let i = handleIndex + 1; i < visibleItems.length; i += 2) { - logicForIncreasingList(i, 1) - } - - virtualOrderList = [...decreasingItems, ...increasingItems] - } else { - increasingItems = [visibleItems[0]] - - for (let i = handleIndex - 1; i > 0; i -= 2) { - logicForIncreasingList(i, -1) - } - - increasingItems.push(visibleItems[handleIndex]) - - for (let i = handleIndex + 1; i < visibleItems.length; i += 2) { - decreasingItems.push(visibleItems[i], visibleItems[i + 1]) - } - - virtualOrderList = [...increasingItems, ...decreasingItems] - } - - resizable.virtualOrderList = filterEmpty(virtualOrderList) - resizable.increasingItems = filterEmpty(increasingItems) - resizable.decreasingItems = filterEmpty(decreasingItems) - - resizable.index = findIndex(resizable.virtualOrderList, handleId) + return handleIndex } export const setCurrentMinMax = (resizable: ResizableModel) => { const {containerSize} = getMaxContainerSizes(resizable) - const {virtualOrderList, index} = resizable + const {items, index} = resizable + const visibleItems = getVisibleItems(items) const nextIdx = index + 1 - const aMaxChangeUp = getMinDiff(virtualOrderList[index]) - const bMaxChangeUp = getMaxDiff(virtualOrderList[nextIdx]) + const aMaxChangeUp = getMinDiff(visibleItems[index]) + const bMaxChangeUp = getMaxDiff(visibleItems[nextIdx]) - minMaxLogicUp(virtualOrderList, aMaxChangeUp - bMaxChangeUp, index, nextIdx, 0, containerSize) + minMaxLogicUp(visibleItems, aMaxChangeUp - bMaxChangeUp, index, nextIdx, 0, containerSize) - const aMaxChangeDown = getMinDiff(virtualOrderList[nextIdx]) - const bMaxChangeDown = getMaxDiff(virtualOrderList[index]) - minMaxLogicDown(virtualOrderList, bMaxChangeDown - aMaxChangeDown, index, nextIdx, 0, containerSize) + const aMaxChangeDown = getMinDiff(visibleItems[nextIdx]) + const bMaxChangeDown = getMaxDiff(visibleItems[index]) + minMaxLogicDown(visibleItems, bMaxChangeDown - aMaxChangeDown, index, nextIdx, 0, containerSize) } export const calculateAxes = (resizable: ResizableModel) => { From c25a1c646b321d08ba29eb43e7e6eb0e16580862 Mon Sep 17 00:00:00 2001 From: BipanKishore Date: Sun, 19 May 2024 15:54:39 +0530 Subject: [PATCH 2/3] patch --- packages/resizable-core/package.json | 2 +- packages/resizable-panes-js/package.json | 2 +- packages/resizable-panes-next/package.json | 2 +- packages/resizable-panes-react/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/resizable-core/package.json b/packages/resizable-core/package.json index 031a7d5..602718f 100644 --- a/packages/resizable-core/package.json +++ b/packages/resizable-core/package.json @@ -1,6 +1,6 @@ { "name": "resizable-core", - "version": "6.0.11", + "version": "6.0.12", "description": "A straightforward library that enables dynamic resizing of layouts and saves the layout configurations.", "module": "./lib/esm/index.esm.js", "main": "./lib/cjs/index.cjs.js", diff --git a/packages/resizable-panes-js/package.json b/packages/resizable-panes-js/package.json index 368dda6..76a1162 100644 --- a/packages/resizable-panes-js/package.json +++ b/packages/resizable-panes-js/package.json @@ -1,6 +1,6 @@ { "name": "resizable-panes-js", - "version": "6.0.23", + "version": "6.0.24", "description": "A straightforward library that enables dynamic resizing of layouts and saves the layout configurations.", "module": "./lib/esm/index.esm.js", "main": "./lib/cjs/index.cjs.js", diff --git a/packages/resizable-panes-next/package.json b/packages/resizable-panes-next/package.json index 75e29c8..56fd855 100644 --- a/packages/resizable-panes-next/package.json +++ b/packages/resizable-panes-next/package.json @@ -1,6 +1,6 @@ { "name": "resizable-panes-next", - "version": "6.0.25", + "version": "6.0.26", "description": "A straightforward library that enables dynamic resizing of layouts and saves the layout configurations.", "module": "./lib/esm/index.esm.js", "main": "./lib/cjs/index.cjs.js", diff --git a/packages/resizable-panes-react/package.json b/packages/resizable-panes-react/package.json index 4eeca92..a4edfcd 100644 --- a/packages/resizable-panes-react/package.json +++ b/packages/resizable-panes-react/package.json @@ -1,6 +1,6 @@ { "name": "resizable-panes-react", - "version": "6.0.23", + "version": "6.0.24", "description": "A straightforward library that enables dynamic resizing of layouts and saves the layout configurations.", "module": "./lib/esm/index.esm.js", "main": "./lib/cjs/index.cjs.js", From 432a4197a827b6af498d6d68d6f1511adcf2c744 Mon Sep 17 00:00:00 2001 From: BipanKishore Date: Sun, 19 May 2024 15:58:15 +0530 Subject: [PATCH 3/3] lint fix --- packages/resizable-core/src/utils/development-util/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/resizable-core/src/utils/development-util/index.ts b/packages/resizable-core/src/utils/development-util/index.ts index ecdb137..90e52ab 100644 --- a/packages/resizable-core/src/utils/development-util/index.ts +++ b/packages/resizable-core/src/utils/development-util/index.ts @@ -1,5 +1,5 @@ import {DIRECTIONS} from '../constant' -import {ResizableModel, PaneModel} from '../../models' +import {PaneModel} from '../../models' import {getSize} from '../../models/pane' export const localConsole = (obj: any, key : string) => {