Merge pull request #111 from BipanKishore/resizable-js-refactoring

Resizable js refactoring

package.json

@@ -12,6 +12,7 @@
   "dependencies": {},
   "devDependencies": {
     "lerna": "^8.1.2",
+
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.0.2",

packages/resizable-panes-js/package.json

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

packages/resizable-panes-js/src/@types/component-types.ts

@@ -1,4 +1,3 @@
-import {MouseEventHandler, ReactElement} from 'react'
 import {IKeyToBoolMap, IMapIdToSize} from './general-type'
 import {PaneModel} from '../../../resizable-core/src/models'
 import {
@@ -23,10 +22,6 @@ export interface IBoolMap {
   [key: string]: boolean;
 }
 
-export interface IVisibilityMap {
-  [key: string]: boolean;
-}
-
 export type IGetMaP = INumberMap | IBoolMap;
 
 interface IGetStateItem {
@@ -43,17 +38,12 @@ export interface IGetState {
 export interface IResizableApi {
   restore: () => void;
   setVisibilities: (map: IKeyToBoolMap) => void;
-  getVisibilities: () => IVisibilityMap;
+  getVisibilities: () => IBoolMap;
   getSizes: () => INumberMap;
   getState: () => IGetState;
   setSize: (id: string, size: number, behavior?: ISetSizeBehaviour) => void;
   setSizeRatio:(id: string, ratio: number, behavior?: ISetSizeBehaviour) => void;
 }
-export type onReadyType = (api: IResizableApi) => void;
-
-export interface IVisibilityOtherOptions {
-  accepted: boolean;
-}
 
 export interface IPane {
   id: string;
@@ -74,7 +64,7 @@ export interface IPane {
 }
 
 export interface IResizableOptions {
-  id: string;
+  uniqueId: string;
 
   resizerClass?: string;
   activeResizerClass?: string;
@@ -88,39 +78,11 @@ export interface IResizableOptions {
 
   onResize?: onResizeType;
   onResizeStop?: onResizeType;
-  onReady?: onReadyType;
+
   onChangeVisibility?: (map: IKeyToBoolMap) => void;
   onMinSize?: (id: string, minSize: number) => void;
   onMaxSize?: (id: string, maxSize: number) => void;
   onNormalSize?: (id: string) => void;
 
   panes: IPane[]
 }
-
-export interface IPaneRef {
-  setSize: (size: number) => void;
-}
-
-export interface IResizer {
-  id: string;
-  onMouseDown?: MouseEventHandler<HTMLDivElement>;
-  node?: any;
-  visibility?: boolean;
-  children?: ReactElement
-}
-
-export interface IStoreResizableItemsModel {
-  id: string;
-  visibility: boolean;
-  size: number;
-  defaultSize: number;
-  defaultMinSize: number;
-  defaultMaxSize: string | number;
-  storedSize: number;
-}
-
-export interface IStoreModel {
-  panes: IStoreResizableItemsModel[];
-  resizers: IStoreResizableItemsModel[];
-  containerSize?: number;
-}

packages/resizable-panes-js/src/resizable-provider.ts

@@ -1,6 +1,13 @@
 import {
   IResizableApi,
-  getDetectionService, getResizable
+  RATIO,
+  RESIZE_HTML_EVENT,
+  addDOMEvent,
+  attachDetectionCoordinate,
+  clearflagsOnNewView,
+  getDetectionService, getResizable,
+  removeDOMEvent,
+  toRatioModeAllPanes
 } from '../../resizable-core'
 import {IResizableOptions} from './@types'
 import {initializPane} from './pane'
@@ -9,9 +16,11 @@ import {initializeResizer} from './resizer'
 
 import {attachDefaultOptions} from './utils'
 
-export const getResizablePanes = (options: IResizableOptions): [IResizableApi, () => void, () => void] => {
+export type IGetResizablePanes = [resizableApi: IResizableApi, refreshResizable: () => void, clearResizable: () => void]
+
+export const getResizablePanes = (options: IResizableOptions):IGetResizablePanes => {
   const optionsWithDefaults = attachDefaultOptions(options) as any
-  const {panes, id} = optionsWithDefaults
+  const {panes, uniqueId, unit} = optionsWithDefaults
 
   const resizable = getResizable(optionsWithDefaults)
 
@@ -20,17 +29,37 @@ export const getResizablePanes = (options: IResizableOptions): [IResizableApi, (
   panes.forEach(({id}, index: number) => {
     initializPane(id, registerItem, optionsWithDefaults)
     if (index !== panes.length - 1) {
-      initializeResizer(id, registerItem, optionsWithDefaults)
+      initializeResizer(id, registerItem, resizable)
     }
   })
 
-  const containerNode = initializResizableContainer(id, registerContainer, optionsWithDefaults)
+  const onResize = () => {
+    if (unit === RATIO) {
+      toRatioModeAllPanes(resizable, true)
+      attachDetectionCoordinate(resizable)
+      clearflagsOnNewView(resizable)
+    }
+  }
+
+  addDOMEvent(window, onResize, RESIZE_HTML_EVENT)
+
+  const containerNode = initializResizableContainer(uniqueId, registerContainer, optionsWithDefaults)
 
   const [startDetectionService, clearDetectionService] = getDetectionService(resizable)
-  const startResizable = () => startDetectionService(containerNode)
-  const clearResizable = () => clearDetectionService(containerNode)
+  const refreshResizable = () => {
+    clearDetectionService(containerNode)
+    startDetectionService(containerNode)
+  }
+  const clearResizable = () => {
+    clearDetectionService(containerNode)
+    removeDOMEvent(window, onResize, RESIZE_HTML_EVENT)
+  }
+
+  refreshResizable()
 
-  startResizable()
+  // api.setVisibilities(visibility)
+  console.log('Vimal')
+  setTimeout(() => api.setVisibilities({P1: true}), 2000)
 
-  return [api, startResizable, clearResizable]
+  return [api, refreshResizable, clearResizable]
 }

packages/resizable-panes-js/src/resizer.ts

@@ -1,19 +1,20 @@
-import {getSetResizerSize, findIndex, getResizerId} from '../../resizable-core'
-import {getMouseDownOnResizer, getElementById} from './utils'
-import {IResizableOptions} from './@types'
+import {getSetResizerSize, findIndex, getResizerId, ResizableModel} from '../../resizable-core'
+import {getMouseDownOnResizer, getElementById, addClasses} from './utils'
 
-export const initializeResizer = (paneId: string, registerItem: any, options: IResizableOptions) => {
-  const {panes, vertical} = options
+export const initializeResizer = (paneId: string, registerItem: any, options: ResizableModel) => {
+  const {panesList, vertical} = options
 
-  const index = findIndex(panes, paneId)
+  const index = findIndex(panesList, paneId)
 
-  const {resizerClass, activeResizerClass} = panes[index]
+  const {resizerClass, activeResizerClass} = panesList[index].props
 
   const resizerId = getResizerId(paneId)
   const node = getElementById(resizerId)
   const setSize = getSetResizerSize(node, vertical)
-  const setMouseDownFlag = getMouseDownOnResizer(node, resizerId, resizerClass, activeResizerClass)
+  addClasses(node, 'overflow-hidden')
 
+  const setMouseDownFlag = getMouseDownOnResizer(node, resizerId, activeResizerClass, resizerClass)
+  setMouseDownFlag(resizerId, false)
   registerItem({
     setSize,
     setMouseDownFlag

packages/resizable-panes-js/src/utils/index.ts

@@ -54,14 +54,31 @@ export const getElementById = (id: string) => document.getElementById(id)
 
 export const INITIAL_CONFIG:IResizableOptions = {
   vertical: true,
-  id: 'container',
-  resizerSize: 2,
-  activeResizerClass: 'bg-slate-500',
-  storageApi: null,
+  uniqueId: 'container',
+  resizerSize: 10,
+  detectionRadius: 6,
+  resizerClass: 'bg-slate-500',
+  storageApi: sessionStorage,
+
+  visibility: {
+    P1: false
+  },
   panes: [
     {
       id: 'P0',
-      size: 100
+      size: 100,
+      minSize: 30,
+      maxSize: 150,
+      detectionRadius: 20,
+      onMaxSize: (id: string, size: number) => {
+        console.log('onMaxSize', id, size)
+      },
+      onMinSize: (id: string, size: number) => {
+        console.log('onMinSize', id, size)
+      },
+      onNormalSize: (id: string) => {
+        console.log('onNormalSize', id)
+      }
     },
     {
       id: 'P1',

packages/resizable-panes-react/package.json

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

packages/resizable-panes-react/src/components/resizable-pane-provider.tsx

@@ -75,10 +75,10 @@ export const ResizablePaneProvider = (props: IResizablePaneProviderProps) => {
     } else {
       ref.current = false
     }
-  }, [visibility, ref])
+  }, [visibility])
 
   return (
-    <ResizablePaneContext.Provider value={resizableRef.current}>
+    <ResizablePaneContext.Provider value={resizable}>
       <ResizablePanes {...currentProps} />
     </ResizablePaneContext.Provider>
   )