refactor: replace split-pane-react with the SplitPane component

henri-hulski · henri-hulski · commit 2233e1857065 · 2025-04-21T13:19:04.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,6 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-icons": "3.5.0",
-    "split-pane-react": "0.1.3",
     "svelte": "3.59.2",
     "tslib": "2.8.1",
     "vue": "3.5.13",
diff --git a/packages/overmind-devtools-client/src/components/Actions/index.tsx b/packages/overmind-devtools-client/src/components/Actions/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import SplitPane, { Pane } from 'split-pane-react'
+import SplitPane, { Pane } from '../common/SplitPane'
 import { useAppState, useActions } from '../../overmind'
 import ActionsList from '../ActionsList'
 import Action from '../Action'
@@ -20,17 +20,8 @@ const Actions: React.FunctionComponent = () => {
             split="vertical"
             sizes={[state.actionsSplitSize]}
             onChange={(size) => actions.updateActionsSplitSize(size[0])}
-            sashRender={() => (
-              <div
-                style={{
-                  cursor: 'col-resize',
-                  width: '5px',
-                  background: '#ccc',
-                }}
-              />
-            )}
           >
-            <Pane minSize={100}>
+            <Pane minSize={150}>
               <ActionsList />
             </Pane>
             <Pane>
diff --git a/packages/overmind-devtools-client/src/components/ActionsList/styles.ts b/packages/overmind-devtools-client/src/components/ActionsList/styles.ts
@@ -9,7 +9,7 @@ export const separator = css({
 })
 
 export const wrapper = css({
-  padding: '1rem',
+  padding: '0.3rem',
   height: '100%',
   overflowY: 'auto',
   boxSizing: 'border-box',
diff --git a/packages/overmind-devtools-client/src/components/Charts/index.tsx b/packages/overmind-devtools-client/src/components/Charts/index.tsx
@@ -1,6 +1,6 @@
 import { css } from 'emotion'
 import * as React from 'react'
-import SplitPane, { Pane } from 'split-pane-react'
+import SplitPane, { Pane } from '../common/SplitPane'
 
 import { useAppState, useActions } from '../../overmind'
 import { nameToColor } from '../../overmind/utils'
@@ -24,7 +24,7 @@ const Charts: React.FunctionComponent = () => {
             sizes={[state.chartsSplitSize]}
             onChange={(size) => actions.updateChartsSplitSize(size[0])}
           >
-            <Pane minSize={100}>
+            <Pane minSize={150}>
               <div className={styles.listWrapper}>
                 {chartKeys.map((path) => {
                   return (
diff --git a/packages/overmind-devtools-client/src/components/Charts/styles.ts b/packages/overmind-devtools-client/src/components/Charts/styles.ts
@@ -10,7 +10,7 @@ export const wrapper = css({
 })
 
 export const listWrapper = css({
-  padding: '1rem',
+  padding: '0.3rem',
 })
 
 export const centerWrapper = css({
diff --git a/packages/overmind-devtools-client/src/components/common/SplitPane/index.tsx b/packages/overmind-devtools-client/src/components/common/SplitPane/index.tsx
@@ -0,0 +1,158 @@
+import * as React from 'react'
+import { useRef, useEffect, useCallback } from 'react'
+import { useAppState, useActions, useEffects } from '../../../overmind'
+import * as styles from './styles'
+
+interface PaneProps {
+  minSize?: number
+  children: React.ReactNode
+  style?: React.CSSProperties
+}
+
+export const Pane: React.FC<PaneProps> = ({ minSize, children, style }) => {
+  return (
+    <div
+      className={styles.paneBase}
+      style={{
+        minWidth: minSize,
+        minHeight: minSize,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface SplitPaneProps {
+  split: 'vertical' | 'horizontal'
+  sizes: number[]
+  onChange?: (sizes: number[]) => void
+  children: React.ReactNode
+  sashRender?: () => React.ReactNode
+}
+
+const SplitPane: React.FC<SplitPaneProps> = ({
+  split,
+  sizes: initialSizes,
+  onChange,
+  children,
+  sashRender,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const state = useAppState()
+  const actions = useActions()
+  const effects = useEffects()
+
+  // Convert children to array
+  const childrenArray = React.Children.toArray(children)
+
+  // Extract minSize values from Pane children
+  const minSizes = childrenArray.map((child) => {
+    if (
+      React.isValidElement(child) &&
+      typeof child.type !== 'string' &&
+      child.props
+    ) {
+      const props = child.props as { minSize?: number }
+      return typeof props.minSize !== 'undefined' ? props.minSize : 0
+    }
+    return 0
+  })
+
+  // Initialize current sizes from initialSizes or use from Overmind state
+  const currentSizes =
+    state.splitPane.isDragging && state.splitPane.splitType === split
+      ? state.splitPane.currentSizes
+      : initialSizes
+
+  const isDragging =
+    state.splitPane.isDragging && state.splitPane.splitType === split
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault()
+    actions.startSplitPaneDrag({
+      startPos: split === 'vertical' ? e.clientX : e.clientY,
+      sizes: currentSizes,
+      split,
+      minSizes,
+    })
+  }
+
+  // Define handlers with useCallback to maintain reference equality
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!state.splitPane.isDragging || !containerRef.current) return
+
+      const containerRect = containerRef.current.getBoundingClientRect()
+      const containerSize =
+        split === 'vertical' ? containerRect.width : containerRect.height
+      const currentPos = split === 'vertical' ? e.clientX : e.clientY
+
+      actions.handleSplitPaneMove({
+        currentPos,
+        containerSize,
+        onChange,
+        minSizes,
+      })
+    },
+    [split, onChange, actions, state.splitPane.isDragging, minSizes]
+  )
+
+  const handleMouseUp = useCallback(() => {
+    actions.stopSplitPaneDrag()
+  }, [actions])
+
+  // Effect for attaching/detaching global event listeners
+  useEffect(() => {
+    if (state.splitPane.isDragging && state.splitPane.splitType === split) {
+      effects.splitPane.addDragListeners(handleMouseMove, handleMouseUp)
+    }
+
+    return () => {
+      if (state.splitPane.splitType === split) {
+        effects.splitPane.removeDragListeners(handleMouseMove, handleMouseUp)
+      }
+    }
+  }, [
+    state.splitPane.isDragging,
+    state.splitPane.splitType,
+    split,
+    handleMouseMove,
+    handleMouseUp,
+    effects.splitPane,
+  ])
+
+  // Effect to add VSCode-like body class when dragging
+  useEffect(() => {
+    if (isDragging) {
+      document.body.classList.add('react-split--disabled')
+    } else {
+      document.body.classList.remove('react-split--disabled')
+    }
+
+    return () => {
+      document.body.classList.remove('react-split--disabled')
+    }
+  }, [isDragging])
+
+  return (
+    <div
+      ref={containerRef}
+      className={`${styles.container(split)} ${isDragging ? 'dragging' : ''}`}
+    >
+      <div className={styles.paneFirst(currentSizes[0])}>
+        {childrenArray[0]}
+      </div>
+      <div
+        className={styles.divider(split, isDragging)}
+        onMouseDown={handleMouseDown}
+      >
+        {sashRender ? sashRender() : null}
+      </div>
+      <div className={styles.paneSecond}>{childrenArray[1]}</div>
+    </div>
+  )
+}
+
+export default SplitPane
diff --git a/packages/overmind-devtools-client/src/components/common/SplitPane/styles.ts b/packages/overmind-devtools-client/src/components/common/SplitPane/styles.ts
@@ -0,0 +1,75 @@
+import { css, injectGlobal } from 'emotion'
+import { colors } from '../../../theme'
+
+injectGlobal`
+  body.splitpane-dragging {
+    user-select: none;
+  }
+`
+
+export const container = (split: 'vertical' | 'horizontal') =>
+  css({
+    display: 'flex',
+    flexDirection: split === 'vertical' ? 'row' : 'column',
+    height: '100%',
+    width: '100%',
+    overflow: 'hidden',
+    position: 'relative',
+    '&.dragging': {
+      cursor: split === 'vertical' ? 'col-resize' : 'row-resize',
+      userSelect: 'none',
+    },
+  })
+
+export const paneFirst = (size: number) =>
+  css({
+    flex: `0 0 ${size}px`,
+    position: 'relative',
+    width: `${size}px`,
+    overflow: 'hidden',
+  })
+
+export const paneSecond = css({
+  flex: 1,
+  position: 'relative',
+})
+
+export const divider = (
+  split: 'vertical' | 'horizontal',
+  isDragging: boolean
+) =>
+  css({
+    flex: isDragging ? '0 0 3px' : '0 0 1px',
+    backgroundColor: isDragging ? '#175ede' : colors.border || '#8c8c8c',
+    cursor: split === 'vertical' ? 'col-resize' : 'row-resize',
+    userSelect: 'none',
+    position: 'relative',
+    transition: 'background-color 0.1s, flex 0.1s',
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      // Invisible overlay to make the divider easier to grab
+      width: split === 'vertical' ? '5px' : '100%',
+      height: split === 'vertical' ? '100%' : '5px',
+      transform: split === 'vertical' ? 'translateX(-2px)' : 'translateY(-2px)',
+      zIndex: 1,
+    },
+    '&:hover': {
+      backgroundColor: '#175ede',
+    },
+  })
+
+export const paneBase = css({
+  overflow: 'auto',
+  width: '100%',
+  height: '100%',
+  '& *': {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+  },
+})
diff --git a/packages/overmind-devtools-client/src/index.tsx b/packages/overmind-devtools-client/src/index.tsx
@@ -28,67 +28,6 @@ injectGlobal`
   #app {
     height: 100%;
   }
-
-
-  .react-split {
-    flex: 1;
-    height: 100%;
-    position: relative;
-    width: 100%;
-  }
-  .react-split__pane {
-    height: 100%;
-    position: absolute;
-    white-space: normal;
-    width: 100%;
-    overflow: hidden;
-  }
-  .react-split__sash {
-    height: 100%;
-    position: absolute;
-    top: 0;
-    transition: background-color 0.1s;
-    width: 100%;
-    z-index: 2;
-  }
-  .react-split__sash--disabled {
-    pointer-events: none;
-  }
-  .react-split__sash--vertical {
-    transition: opacity 0.5s ease;
-    cursor: col-resize;
-    background-color: var(--colors-border);
-    opacity: 0.8;
-  }
-  .react-split__sash--horizontal {
-    cursor: row-resize;
-  }
-  .react-split__sash-content {
-    width: 100%;
-    height: 100%;
-  }
-  .react-split__sash-content--active {
-    background-color: #175ede;
-  }
-  .react-split--dragging.react-split--vertical {
-    cursor: col-resize;
-  }
-  .react-split--dragging.react-split--horizontal {
-    cursor: row-resize;
-  }
-  
-  body.react-split--disabled {
-    user-select: none;
-  }
-  
-  .split-sash-content {
-    width: 100%;
-    height: 100%;
-  }
-  .split-sash-content.split-sash-content-vscode.split-sash-content-active {
-    background-color: var(--colors-border);
-    opacity: 1;
-  }
 `
 
 window.onerror = (_, _2, _3, _4, error) => {
diff --git a/packages/overmind-devtools-client/src/overmind/actions.ts b/packages/overmind-devtools-client/src/overmind/actions.ts
diff --git a/packages/overmind-devtools-client/src/overmind/effects.ts b/packages/overmind-devtools-client/src/overmind/effects.ts
diff --git a/packages/overmind-devtools-client/src/overmind/state.ts b/packages/overmind-devtools-client/src/overmind/state.ts
