perf: replace setTimeout drag with optimised RAF split engine

src/components/Layout.jsx

@@ -277,6 +277,7 @@ function Layout(props) {
                   display={display}
                   compactMode={compactMode}
                   containerWidth={ganttWidth}
+                  containerRef={layoutRef}
                   onMove={(value) => setGridWidth(value)}
                   onDisplayChange={(display) => setDisplay(display)}
                 />

src/components/Resizer.jsx

@@ -1,5 +1,6 @@
-import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useWritableProp } from '@svar-ui/lib-react';
+import { useDragEngine } from './splitEngine/useDragEngine';
 import './Resizer.css';
 
 function Resizer(props) {
@@ -13,114 +14,48 @@ function Resizer(props) {
     containerWidth = 0,
     leftThreshold = 50,
     rightThreshold = 50,
+    containerRef,
   } = props;
 
-  const [value, setValue] = useWritableProp(props.value ?? 0);
+  const [value] = useWritableProp(props.value ?? 0);
   const [display, setDisplay] = useWritableProp(props.display ?? 'all');
 
-  function getBox(val) {
-    let offset = 0;
-    if (position == 'center') offset = size / 2;
-    else if (position == 'before') offset = size;
-
-    const box = {
-      size: [size + 'px', 'auto'],
-      p: [val - offset + 'px', '0px'],
-      p2: ['auto', '0px'],
-    };
-
-    if (dir != 'x') {
-      for (let name in box) box[name] = box[name].reverse();
-    }
-    return box;
-  }
-
-  const [active, setActive] = useState(false);
   const [initialPosition, setInitialPosition] = useState(null);
-
-  const startRef = useRef(0);
-  const posRef = useRef();
-  const timeoutRef = useRef();
-  const displayRef = useRef(display);
-
-  useEffect(() => {
-    displayRef.current = display;
-  }, [display]);
+  const [fps, setFps] = useState(null);
 
   useEffect(() => {
     if (initialPosition === null && value > 0) {
       setInitialPosition(value);
     }
   }, [initialPosition, value]);
 
-  function getEventPos(ev) {
-    return dir == 'x' ? ev.clientX : ev.clientY;
-  }
-
-  const move = useCallback(
-    (ev) => {
-      const newPos = posRef.current + getEventPos(ev) - startRef.current;
-
-      setValue(newPos);
-      let nextDisplay;
-
-      if (newPos <= leftThreshold) {
-        nextDisplay = 'chart';
-      } else if (containerWidth - newPos <= rightThreshold) {
-        nextDisplay = 'grid';
-      } else {
-        nextDisplay = 'all';
-      }
-
-      if (displayRef.current !== nextDisplay) {
-        setDisplay(nextDisplay);
-        displayRef.current = nextDisplay;
-      }
-
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => onMove && onMove(newPos), 100);
-    },
-    [containerWidth, leftThreshold, rightThreshold, onMove],
-  );
-
-  const up = useCallback(() => {
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
-    setActive(false);
-    window.removeEventListener('mousemove', move);
-    window.removeEventListener('mouseup', up);
-  }, [move]);
-
-  const cursor = useMemo(
-    () => (display !== 'all' ? 'auto' : dir == 'x' ? 'ew-resize' : 'ns-resize'),
-    [display, dir],
-  );
-
-  const down = useCallback(
-    (ev) => {
-      // Prevent dragging when in normal mode and only one view is visible
-      if (!compactMode && (display === 'grid' || display === 'chart')) {
-        return;
-      }
-
-      startRef.current = getEventPos(ev);
-
-      posRef.current = value;
-      setActive(true);
-
-      document.body.style.cursor = cursor;
-      document.body.style.userSelect = 'none';
-
-      window.addEventListener('mousemove', move);
-      window.addEventListener('mouseup', up);
+  // ── New RAF-based drag engine ────────────────────────────────────────
+  const { active, onPointerDown } = useDragEngine({
+    value,
+    containerWidth,
+    leftThreshold,
+    rightThreshold,
+    onMove,
+    onDisplayChange: (nextDisplay) => {
+      setDisplay(nextDisplay);
+      onDisplayChange && onDisplayChange(nextDisplay);
     },
-    [cursor, move, up, value, compactMode, display],
-  );
+    onFps: import.meta.env.DEV ? setFps : undefined,
+    containerRef,
+  });
+
+  // Guard: prevent drag when collapsed in non-compact mode
+  const handlePointerDown = (e) => {
+    if (!compactMode && (display === 'grid' || display === 'chart')) {
+      return;
+    }
+    onPointerDown(e);
+  };
 
+  // ── Expand / Collapse button handlers (UNCHANGED) ────────────────────
   function resetToInitial() {
     setDisplay('all');
     if (initialPosition !== null) {
-      setValue(initialPosition);
       if (onMove) onMove(initialPosition);
     }
   }
@@ -150,8 +85,32 @@ function Resizer(props) {
     handleExpand('right');
   }
 
+  // ── Sizing / cursor (UNCHANGED) ──────────────────────────────────────
+  function getBox(val) {
+    let offset = 0;
+    if (position == 'center') offset = size / 2;
+    else if (position == 'before') offset = size;
+
+    const box = {
+      size: [size + 'px', 'auto'],
+      p: [val - offset + 'px', '0px'],
+      p2: ['auto', '0px'],
+    };
+
+    if (dir != 'x') {
+      for (let name in box) box[name] = box[name].reverse();
+    }
+    return box;
+  }
+
+  const cursor = useMemo(
+    () => (display !== 'all' ? 'auto' : dir == 'x' ? 'ew-resize' : 'ns-resize'),
+    [display, dir],
+  );
+
   const b = useMemo(() => getBox(value), [value, position, size, dir]);
 
+  // ── Render (UNCHANGED JSX structure) ────────────────────────────────
   const rootClassName = [
     'wx-resizer',
     `wx-resizer-${dir}`,
@@ -164,7 +123,7 @@ function Resizer(props) {
   return (
     <div
       className={'wx-pFykzMlT ' + rootClassName}
-      onMouseDown={down}
+      onPointerDown={handlePointerDown}
       style={{ width: b.size[0], height: b.size[1], cursor }}
     >
       <div className="wx-pFykzMlT wx-button-expand-box">
@@ -182,6 +141,24 @@ function Resizer(props) {
         </div>
       </div>
       <div className="wx-pFykzMlT wx-resizer-line"></div>
+      {import.meta.env.DEV && active && fps !== null && (
+        <div style={{
+          position: 'fixed',
+          bottom: 8,
+          right: 8,
+          background: 'rgba(0,0,0,0.75)',
+          color: '#0f0',
+          fontSize: 11,
+          fontFamily: 'monospace',
+          padding: '2px 6px',
+          borderRadius: 4,
+          pointerEvents: 'none',
+          whiteSpace: 'nowrap',
+          zIndex: 9999,
+        }}>
+          {fps} fps
+        </div>
+      )}
     </div>
   );
 }

src/components/splitEngine/clamp.js

@@ -0,0 +1 @@
+export const clamp = (v, min, max) => (v < min ? min : v > max ? max : v);

src/components/splitEngine/useDragEngine.js

@@ -0,0 +1,168 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { clamp } from './clamp';
+
+/**
+ * RAF-based drag engine — V8/browser optimised.
+ *
+ * Optimisations applied:
+ * 1. CSS variable bypass   — writes flex directly to the Grid DOM node during
+ *                            drag; React only reconciles once on pointerup.
+ * 2. Stable hidden class   — `drag` object is never null; V8 keeps one IC forever.
+ * 3. setPointerCapture     — browser skips hit-testing on every pointermove.
+ * 4. getCoalescedEvents()  — uses the last coalesced position so no sub-frame
+ *                            input is silently discarded.
+ * 5. Closure-free hot path — all values live in engineRef; handleMove has zero
+ *                            deps and is never re-JIT'd by V8.
+ */
+export function useDragEngine({
+  value,
+  containerWidth,
+  leftThreshold = 50,
+  rightThreshold = 50,
+  onMove,
+  onDisplayChange,
+  onFps,
+  containerRef, // ref to .wx-layout DOM node for direct CSS writes
+}) {
+  // Optimization 2: always-allocated drag shape — V8 holds one hidden class
+  const engineRef = useRef({
+    pos: value,
+    drag: { active: false, startPos: 0, startValue: 0 },
+    raf: 0,
+    lastFrameTime: 0,
+    display: 'all',
+    // Optimization 5: hot-path values stored here, not in closure deps
+    containerWidth,
+    leftThreshold,
+    rightThreshold,
+    onMove,
+    onDisplayChange,
+    onFps,
+    containerRef,
+  });
+
+  // Sync hot-path values on every render without recreating closures
+  const eng = engineRef.current;
+  eng.containerWidth = containerWidth;
+  eng.leftThreshold = leftThreshold;
+  eng.rightThreshold = rightThreshold;
+  eng.onMove = onMove;
+  eng.onDisplayChange = onDisplayChange;
+  eng.onFps = onFps;
+  eng.containerRef = containerRef;
+
+  const [active, setActive] = useState(false);
+
+  // Keep engine pos in sync with external value when not dragging
+  useEffect(() => {
+    if (!engineRef.current.drag.active) {
+      engineRef.current.pos = value;
+    }
+  }, [value]);
+
+  // ── Move handler — stable closure, zero deps (optimization 5) ────────
+  const handleMove = useCallback((e) => {
+    const eng = engineRef.current;
+    if (!eng.drag.active) return;
+
+    if (eng.raf) cancelAnimationFrame(eng.raf);
+
+    // Optimization 4: getCoalescedEvents — use latest sub-frame position
+    const events = e.getCoalescedEvents?.() ?? [e];
+    const clientX = events[events.length - 1].clientX;
+
+    eng.raf = requestAnimationFrame((timestamp) => {
+      const d = eng.drag;
+      if (!d.active) return;
+
+      if (eng.onFps && eng.lastFrameTime) {
+        eng.onFps(Math.round(1000 / (timestamp - eng.lastFrameTime)));
+      }
+      eng.lastFrameTime = timestamp;
+
+      const newPos = clamp(
+        d.startValue + (clientX - d.startPos),
+        eng.leftThreshold,
+        eng.containerWidth - eng.rightThreshold,
+      );
+
+      if (Math.abs(newPos - eng.pos) < 0.5) return;
+      eng.pos = newPos;
+
+      // Optimization 1: direct DOM write — zero React involvement during drag
+      const layoutEl = eng.containerRef?.current;
+      if (layoutEl) {
+        const gridEl = layoutEl.querySelector('.wx-table-container');
+        if (gridEl) gridEl.style.flex = `0 0 ${newPos}px`;
+      }
+
+      // Display threshold check
+      let nextDisplay;
+      if (newPos <= eng.leftThreshold) nextDisplay = 'chart';
+      else if (eng.containerWidth - newPos <= eng.rightThreshold)
+        nextDisplay = 'grid';
+      else nextDisplay = 'all';
+
+      if (eng.display !== nextDisplay) {
+        eng.display = nextDisplay;
+        eng.onDisplayChange?.(nextDisplay);
+      }
+    });
+  }, []); // stable for component lifetime — reads everything from engineRef
+
+  // ── Up handler ───────────────────────────────────────────────────────
+  const handleUp = useCallback(() => {
+    const eng = engineRef.current;
+    if (eng.raf) cancelAnimationFrame(eng.raf);
+    eng.drag.active = false;
+    eng.lastFrameTime = 0;
+
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+
+    setActive(false);
+
+    // Clear inline CSS override — let React state take over
+    const layoutEl = eng.containerRef?.current;
+    if (layoutEl) {
+      const gridEl = layoutEl.querySelector('.wx-table-container');
+      if (gridEl) gridEl.style.flex = '';
+    }
+
+    // Optimization 1: one React commit on drop, not 60 per second
+    eng.onMove?.(eng.pos);
+  }, []);
+
+  // ── Event wiring ──────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!active) return;
+
+    document.addEventListener('pointermove', handleMove, { passive: true });
+    document.addEventListener('pointerup', handleUp);
+    document.addEventListener('pointercancel', handleUp);
+
+    return () => {
+      document.removeEventListener('pointermove', handleMove);
+      document.removeEventListener('pointerup', handleUp);
+      document.removeEventListener('pointercancel', handleUp);
+    };
+  }, [active, handleMove, handleUp]);
+
+  // ── Start handler ────────────────────────────────────────────────────
+  const onPointerDown = useCallback((e) => {
+    const eng = engineRef.current;
+    eng.drag.active = true;
+    eng.drag.startPos = e.clientX;
+    eng.drag.startValue = eng.pos;
+    eng.lastFrameTime = 0;
+
+    // Optimization 3: setPointerCapture — browser skips hit-testing on every move
+    e.currentTarget.setPointerCapture(e.pointerId);
+
+    setActive(true);
+    document.body.style.cursor = 'ew-resize';
+    document.body.style.userSelect = 'none';
+  }, []);
+
+  return { active, onPointerDown };
+}