Something went wrong. Try again.
[mirror] A local-first desktop markdown writer with grammar checking, at proto integration, and more github.com/stormlightlabs/writer/releases
atproto codemirror markdown tauri rust react
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677import { useCallback, useEffect, useRef, useState } from "react";
type ResizeAxis = "x" | "y";
type UseResizableOptions = { initialSize: number; minSize: number; maxSize: number; axis?: ResizeAxis; direction?: 1 | -1;};
type DragState = { pointerStart: number; sizeStart: number };
type UseResizableResult = { size: number; isResizing: boolean; startResizing: (pointerPosition: number) => void; setSize: (nextSize: number) => void;};
const clamp = (value: number, min: number, max: number): number => Math.min(max, Math.max(min, value));
export function useResizable( { initialSize, minSize, maxSize, axis = "x", direction = 1 }: UseResizableOptions,): UseResizableResult { const [size, setSizeState] = useState(() => clamp(initialSize, minSize, maxSize)); const [isResizing, setIsResizing] = useState(false);
const dragStateRef = useRef<DragState | null>(null); const sizeRef = useRef(size);
useEffect(() => { sizeRef.current = size; }, [size]);
const setSize = useCallback((nextSize: number) => { setSizeState(clamp(nextSize, minSize, maxSize)); }, [minSize, maxSize]);
const handlePointerMove = useCallback((event: PointerEvent) => { const dragState = dragStateRef.current; if (!dragState) { return; }
const pointerValue = axis === "x" ? event.clientX : event.clientY; const delta = (pointerValue - dragState.pointerStart) * direction; setSize(dragState.sizeStart + delta); }, [axis, direction, setSize]);
const handlePointerUp = useCallback(() => { dragStateRef.current = null; setIsResizing(false); }, []);
useEffect(() => { if (!isResizing) { return; }
globalThis.addEventListener("pointermove", handlePointerMove); globalThis.addEventListener("pointerup", handlePointerUp); return () => { globalThis.removeEventListener("pointermove", handlePointerMove); globalThis.removeEventListener("pointerup", handlePointerUp); }; }, [isResizing, handlePointerMove, handlePointerUp]);
const startResizing = useCallback((pointerPosition: number) => { dragStateRef.current = { pointerStart: pointerPosition, sizeStart: sizeRef.current }; setIsResizing(true); }, []);
return { size, isResizing, startResizing, setSize };}