Function usePanelDrag

src/hooks/usePanelDrag.ts:362–890

(config: {
  grids: PanelDragGrid[];
  getPanelGeometry: (panelId: string, containerIdx: number) => PanelGeometry;
  onTransfer?: (
    panelId: string,
    fromIdx: number,
    toIdx: number,
    newFromOrder: string[],
    newToOrder: string[],
  ) => void;
  onDragStateChange?: (dragging: boolean) => void;
})

}

export function usePanelDrag(config: {
  grids: PanelDragGrid[];
  getPanelGeometry: (panelId: string, containerIdx: number) => PanelGeometry;
  onTransfer?: (
    panelId: string,
    fromIdx: number,
    toIdx: number,
    newFromOrder: string[],
    newToOrder: string[],
  ) => void;
  onDragStateChange?: (dragging: boolean) => void;
}) {
  const configRef = useRef(config);
  const dragStateRef = useRef<DragRuntimeState>({
    activeId: null,
    sourceContainerIdx: -1,
    preferredContainerIdx: -1,
    latestClientX: 0,
    latestClientY: 0,
    projectedVisibleOrders: null,
    lastTargetKey: "none",
  });
  const scrollCleanupRef = useRef<(() => void) | null>(null);
  const overlayPointerRef = useRef<OverlayPointerState>({
    active: false,
    startClientX: 0,
    startClientY: 0,
    originLeft: 0,
    originTop: 0,
    anchorX: OVERLAY_CURSOR_MIN_MARGIN_PX,
    anchorY: OVERLAY_CURSOR_MIN_MARGIN_PX,
    scrollDeltaX: 0,
    scrollDeltaY: 0,
    initialScrollPositions: [],
  });
  const [activeId, setActiveId] = useState<string | null>(null);
  const [overlay, setOverlay] = useState<PanelDragOverlayData | null>(null);
  const [projectedVisibleOrders, setProjectedVisibleOrders] = useState<string[][] | null>(null);
  const [disableTransforms, setDisableTransforms] = useState(false);
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: { distance: DRAG_THRESHOLD },
    }),
  );
  const overlayModifiers = useMemo<Modifier[]>(() => [
    ({ transform }) => {
      const pointer = overlayPointerRef.current;
      if (!pointer.active) return transform;
      return {
        ...transform,
        x: pointer.startClientX + transform.x - pointer.originLeft - pointer.anchorX,
        y: pointer.startClientY + transform.y - pointer.originTop - pointer.anchorY,
      };
    },
  ], []);

  useEffect(() => {
    configRef.current = config;