Merge branch 'master' of https://github.com/BipanKishore/resizable-panes

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",

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)

packages/resizable-core/src/models/resizable-model.ts

@@ -14,17 +14,13 @@ export class ResizableModel {
   direction: number
   axisCoordinate: number
 
-  // Index of virtualOrderListm handleId Index
   index: number
   topAxis: number
   bottomAxis: number
 
   handleId: string
 
   items: IResizableItem[]
-  virtualOrderList: IResizableItem[]
-  decreasingItems: IResizableItem[]
-  increasingItems: IResizableItem[]
 
   panesList: PaneModel[]
   resizersList: IResizableItem[]

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) => {
@@ -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'))
-}

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)
     }
   }
 }

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) => {

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",

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",