@hrnec06/react_utils 1.1.0 → 1.2.0

package/src/debugger/Debugger.tsx

@@ -0,0 +1,297 @@
+import { minmax, Nullable, Vector2 } from "@hrnec06/util";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {DebuggerContext} from "./DebuggerContext";
+import clsx from "clsx";
+import ResizeBorder from "./DebuggerWindowResize";
+import ParseValue from "./DebugParser";
+import ScrollBar from "./DebuggerScrollBar";
+import useKeyListener from "../hooks/useKeyListener";
+import useUpdateEffect from "../hooks/useUpdateEffect";
+import useUpdatedRef from "../hooks/useUpdatedRef";
+
+interface DebugProps {
+	value: unknown,
+	openPaths?: string[],
+	excludePaths?: string[],
+	size?: 'normal' | 'big' | 'tiny',
+	compactArrays?: number,
+	autoHeight?: boolean,
+	openRoot?: boolean
+}
+export default function Debug({
+	value,
+	openPaths,
+	excludePaths,
+	size = 'normal',
+	compactArrays = 1,
+	autoHeight = false,
+	openRoot = true
+}: DebugProps) {
+	// Config
+	const LS_POS_KEY = 'debugger_position';
+	const LS_SIZE_KEY = 'debugger_size';
+	const LS_EXPAND_KEY = 'debugger_expanded';
+
+	// Keybinds
+	const f9_pressed = useKeyListener('F9');
+
+	// Position
+	const [position, setPosition] = useState<Vector2>([0, 0]);
+	const [grab, setGrab] = useState<Nullable<{
+		windowOrigin: Vector2,
+		positionOrigin: Vector2
+	}>>(null);
+	const [grabOffset, setGrabOffset] = useState<Nullable<Vector2>>(null);
+
+	// Resize
+	const [windowSize, setWindowSize] = useState<Vector2>([500, 500]);
+
+	// Scroll
+	const [scrollHeight, setScrollHeight] = useState(0);
+	const [containerHeight, setContainerHeight] = useState(0);
+	const [scrollProgress, setScrollProgress] = useState(0);
+
+	const font = useMemo(() => {
+		switch (size) {
+			case 'tiny': return { fontSize: 12, lineHeight: 16 };
+			case 'normal': return { fontSize: 14, lineHeight: 20 };
+			case 'big': return { fontSize: 16, lineHeight: 24 };
+		}
+	}, [size]);
+
+	// HTML Refs
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	// Drag handler
+	useEffect(() => {
+		const mouseUp = (e: MouseEvent) => {
+			if (!grab) return;
+
+			setPosition(finalPositionRef.current);
+			setGrab(null);
+			setGrabOffset(null);
+		}
+
+		const mouseMove = (e: MouseEvent) => {
+			if (!grab) return;
+
+			setGrabOffset([
+				e.clientX - grab.windowOrigin[0],
+				e.clientY - grab.windowOrigin[1]
+			]);
+		}
+
+		document.addEventListener('mouseup', mouseUp);
+		document.addEventListener('mousemove', mouseMove);
+
+		return () => {
+			document.removeEventListener('mouseup', mouseUp);
+			document.removeEventListener('mousemove', mouseMove);
+		}
+	}, [grab]);
+
+	// Scrolling
+	useLayoutEffect(() => {
+		updateScrollHeight();
+	}, [windowSize, value, size, containerRef]);
+
+	const isScrollable = useMemo(() => scrollHeight > 0, [scrollHeight]);
+
+	// Load saved position
+	useEffect(() => {
+		try {
+			const saved_position = localStorage.getItem(LS_POS_KEY);
+			if (saved_position) {
+				const [v1, v2] = saved_position.split(',');
+
+				if (v1 === undefined || v2 === undefined)
+					throw new Error('Invalid vector: ' + saved_position);
+
+				const [v1_p, v2_p] = [parseInt(v1), parseInt(v2)];
+
+				if (isNaN(v1_p) || isNaN(v2_p))
+					throw new Error('Invalid vector values: ' + saved_position);
+
+				setPosition([v1_p, v2_p]);
+			}
+		} catch (error) {
+			console.error(`Error loading saved position: `, error);
+
+			localStorage.removeItem(LS_POS_KEY);
+		}
+	}, []);
+
+	// Load saved size
+	useEffect(() => {
+		try {
+			const saved_size = localStorage.getItem(LS_SIZE_KEY);
+			if (saved_size) {
+				const [v1, v2] = saved_size.split(',');
+
+				if (v1 === undefined || v2 === undefined)
+					throw new Error('Invalid vector: ' + saved_size);
+
+				const [v1_p, v2_p] = [parseInt(v1), parseInt(v2)];
+
+				if (isNaN(v1_p) || isNaN(v2_p))
+					throw new Error('Invalid vector values: ' + saved_size);
+
+				setWindowSize([v1_p, v2_p]);
+			}
+		} catch (error) {
+			console.error(`Error loading saved size: `, error);
+
+			localStorage.removeItem(LS_POS_KEY);
+		}
+	}, []);
+
+	// Save saved position
+	useUpdateEffect(() => {
+		localStorage.setItem(LS_POS_KEY, `${position[0]},${position[1]}`);
+	}, [position]);
+
+	// Save saved size
+	useUpdateEffect(() => {
+		localStorage.setItem(LS_SIZE_KEY, `${windowSize[0]},${windowSize[1]}`);
+	}, [windowSize]);
+
+	// Reset position
+	useEffect(() => {
+		if (!f9_pressed)
+			return;
+
+		setPosition([0, 0]);
+	}, [f9_pressed]);
+
+	// Compute window position
+	const finalPosition: Vector2 = useMemo(() => {
+		return [
+			position[0] + (grabOffset?.[0] ?? 0),
+			position[1] + (grabOffset?.[1] ?? 0),
+		]
+	}, [position, grabOffset]);
+	const finalPositionRef = useUpdatedRef(finalPosition);
+
+	// Logic
+
+	const calculateContainerHeight = () => {
+		if (!containerRef.current) return 0;
+
+		return containerRef.current.clientHeight;
+	}
+
+	const calculateScrollHeight = () => {
+		if (!containerRef.current) return 0;
+	
+		return containerRef.current.scrollHeight - calculateContainerHeight();
+	}
+
+	const updateScrollHeight = () => {
+		if (!containerRef.current) return;
+
+		setScrollHeight(calculateScrollHeight());
+		setContainerHeight(calculateContainerHeight());
+	}
+
+	// Handlers
+	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.preventDefault();
+
+		setGrab({
+			positionOrigin: position,
+			windowOrigin: [e.clientX, e.clientY]
+		});
+	}
+
+	const handleExpandChange = (path: string[], state: boolean) => {
+		if (!containerRef.current) return;
+
+		setScrollProgress(minmax((scrollProgress * scrollHeight) / calculateScrollHeight(), 0, 1));
+
+		updateScrollHeight();
+	}
+
+	const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
+		const moveByPX = font.lineHeight * 3;
+
+		let addProgress = moveByPX / scrollHeight;
+
+		if (e.deltaY < 0)
+			addProgress *= -1;
+
+		setScrollProgress(p => minmax(p + addProgress, 0, 1));
+	}
+
+	return (
+		<DebuggerContext.Provider
+			value={{
+				paths: {
+					exclude: excludePaths ?? [],
+					open: openPaths ?? []
+				},
+				options: {
+					compactArrays: compactArrays,
+					autoHeight: autoHeight,
+					openRoot: openRoot
+				},
+				window: {
+					resize: setWindowSize,
+					size: windowSize
+				},
+				placement: {
+					reposition: setPosition,
+					position: position
+				},
+				event: {
+					expand: handleExpandChange
+				},
+				scroll: {
+					setProgress: setScrollProgress,
+					progress: scrollProgress,
+					isScrollable: isScrollable
+				}
+			}}
+		>
+			<div className="fixed pointer-events-none w-full h-full left-0 top-0 overflow-hidden">
+				<div
+					className={clsx(
+						"absolute font-jetbrains pointer-events-auto",
+						size === 'tiny' && 'text-xs',
+						size === 'normal' && 'text-sm',
+						size === 'big' && 'text-base'
+					)}
+					style={{
+						left: finalPosition[0],
+						top: finalPosition[1],
+						width: windowSize[0],
+						height: windowSize[1],
+					}}
+				>
+					<ResizeBorder />
+
+					<div
+						onWheel={handleWheel}
+						className="bg-[#1f1f1f] shadow-lg rounded-md border border-primary-400 w-full h-full overflow-hidden flex"
+					>
+						<div
+							ref={containerRef}
+							onMouseDown={handleMouseDown}
+							className=" cursor-grab w-full"
+							style={{
+								transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
+							}}
+						>
+							<div className="p-3 pl-5">
+								<ParseValue value={value} />
+							</div>
+						</div>
+						<ScrollBar
+							containerHeight={containerHeight}
+							scrollHeight={scrollHeight}
+						/>
+					</div>
+				</div>
+			</div>
+		</DebuggerContext.Provider>
+	);
+}

package/src/debugger/DebuggerContext.ts

@@ -0,0 +1,41 @@
+import { Optional, ReactUtils, Vector2 } from "@hrnec06/util";
+import { createContext, useContext } from "react";
+
+interface DebuggerContext {
+	paths: {
+		open: string[],
+		exclude: string[]
+	},
+	options: {
+		compactArrays: number,
+		autoHeight: boolean,
+		openRoot: boolean
+	},
+	window: {
+		resize: ReactUtils.SetState<Vector2>,
+		size: Vector2
+	},
+	placement: {
+		reposition: ReactUtils.SetState<Vector2>,
+		position: Vector2
+	},
+	event: {
+		expand: (path: string[], state: boolean) => void
+	},
+	scroll: {
+		setProgress: ReactUtils.SetState<number>,
+		progress: number,
+		isScrollable: boolean
+	}
+}
+
+export const DebuggerContext = createContext<Optional<DebuggerContext>>(undefined);
+
+export default function useDebugger() {
+	const ctx = useContext(DebuggerContext);
+
+	if (!ctx)
+		throw new Error(`useDebugger may be used only within DebuggerContext.Provider!`);
+
+	return ctx;
+}

package/src/debugger/DebuggerLogic.ts

@@ -0,0 +1,30 @@
+export function matchPath(_path: string[], openPaths: string[]) {
+	for (const openPath of openPaths) {
+		const matchers = openPath.split('.');
+		const path = [..._path];
+
+		let passed = true;
+
+		while (path.length && passed) {
+			const pathItem = path.shift();
+			const matcher = matchers.shift();
+
+			if (matcher === '**')
+				return true;
+
+			if (matcher === '*') {
+				if (path.length > 1)
+					passed = false;
+				continue;
+			}
+			
+			if (pathItem !== matcher)
+				passed = false;
+		}
+
+		if (path.length === 0 && passed)
+			return true;
+	}
+
+	return false;
+}

package/src/debugger/DebuggerScrollBar.tsx

@@ -0,0 +1,108 @@
+import { minmax, Nullable, Vector2 } from "@hrnec06/util";
+import { useEffect, useMemo, useRef, useState } from "react";
+import useDebugger from "./DebuggerContext";
+import useListener from "../hooks/useListener";
+
+interface ScrollBarProps {
+	containerHeight: number,
+	scrollHeight: number
+}
+export default function ScrollBar({
+	containerHeight,
+	scrollHeight
+}: ScrollBarProps) {
+	const debug = useDebugger();
+
+	const [wrapperHeight, setWrapperHeight] = useState(0);
+
+	const barHeight = (containerHeight / (scrollHeight + containerHeight)) * wrapperHeight;
+	const barTop = ((wrapperHeight - barHeight) * debug.scroll.progress);
+
+	const [grab, setGrab] = useState<Nullable<{
+			windowOrigin: number,
+			positionOrigin: number
+		}>>(null);
+	const [grabOffset, setGrabOffset] = useState<Nullable<number>>(null);
+
+	const wrapperRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!wrapperRef.current) return;
+
+		const observer = new ResizeObserver(() => updateWrapperHeight());
+
+		observer.observe(wrapperRef.current);
+
+		updateWrapperHeight();
+
+		return () => {
+			observer.disconnect();
+		}
+	}, [wrapperRef]);
+
+	useListener(document, 'mouseup', (event) => {
+		if (!grab) return;
+
+		setGrab(null);
+		setGrabOffset(null);
+	}, [grab]);
+
+	useListener(document, 'mousemove', (event) => {
+		if (!grab) return;
+
+		setGrabOffset(event.clientY - (grab.windowOrigin - grab.positionOrigin * (wrapperHeight - barHeight)));
+	}, [grab]);
+
+	useEffect(() => {
+		if (grabOffset === null) return;
+
+		const fixedOffset = minmax(grabOffset, 0, wrapperHeight - barHeight) / (wrapperHeight - barHeight);
+
+		debug.scroll.setProgress(fixedOffset);
+	}, [grabOffset]);
+
+	const updateWrapperHeight = () => {
+		if (!wrapperRef.current) return;
+
+		setWrapperHeight(wrapperRef.current.clientHeight);
+	}
+
+	const handleWraperMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.preventDefault();
+
+		if (grab) return;
+	}
+
+	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.preventDefault();
+
+		if (grab) return;
+
+		setGrab({
+			positionOrigin: debug.scroll.progress,
+			windowOrigin: e.clientY
+		});
+	}
+
+	return (
+		<div className="p-1 border-l border-l-primary-600">
+			<div
+				onMouseDown={handleWraperMouseDown}
+				ref={wrapperRef}
+				className="h-full flex-shrink-0"
+			>
+				{debug.scroll.isScrollable && wrapperHeight > 0 && (
+					<div
+						onMouseDown={handleMouseDown}
+
+						className="bg-primary-500 hover:bg-primary-400 w-2 rounded-lg"
+						style={{
+							transform: `translateY(${barTop}px)`,
+							height: `${barHeight}px`
+						}}
+					/>
+				)}
+			</div>
+		</div>
+	)
+}

package/src/debugger/DebuggerSymbols.tsx

@@ -0,0 +1,63 @@
+import clsx from "clsx";
+import { ChevronDown } from "lucide-react";
+
+export function Char_Colon() {
+	return (
+		<span className="text-[#ccccab]">
+			{': '}
+		</span>
+	);
+}
+
+export function Char_Comma() {
+	return (
+		<span className="text-[#ccccab]">
+			{', '}
+		</span>
+	);
+}
+
+interface Char_Bracket_Props {
+	text: string
+}
+export function Char_Bracket({
+	text
+}: Char_Bracket_Props) {
+	return (
+		<span className="text-[#da70d6]">
+			{text}
+		</span>
+	);
+}
+
+interface Chevron_Toggle_Props {
+	expanded: boolean,
+	onToggle?: (expanded: boolean) => void,
+}
+export function Chevron_Toggle({
+	expanded,
+	onToggle
+}: Chevron_Toggle_Props) {
+	const handleClick = () => {
+		onToggle?.(!expanded);
+	}
+
+	return (
+		<button
+			onClick={handleClick}
+			className={clsx(
+				"absolute",
+				'left-1 translate-y-0.5'
+			)}
+		>
+			{
+				<ChevronDown
+					className={clsx(
+						"size-4 text-primary-400 hover:text-zinc-500",
+						!expanded && '-rotate-90'
+					)}
+				/>
+			}
+		</button>
+	);
+}

package/src/debugger/DebuggerWindowResize.tsx

@@ -0,0 +1,136 @@
+import { cloneVector2, Nullable, removeVector2, Vector2 } from "@hrnec06/util";
+import { useEffect, useState } from "react";
+import useDebugger from "./DebuggerContext";
+import clsx from "clsx";
+
+export default function ResizeBorder() {
+	return (
+		<>
+			<ResizeBar
+				className="-top-1.5 h-3 w-full cursor-ns-resize"
+				applyReposition
+				onMove={([, y]) => [0, y]}
+			/>
+			<ResizeBar
+				className="-right-1.5 h-full w-3 cursor-ew-resize"
+				onMove={([x]) => [-x, 0]}
+			/>
+			<ResizeBar
+				className="-bottom-1.5 h-3 w-full cursor-ns-resize"
+				onMove={([, y]) => [0, -y]}
+			/>
+			<ResizeBar
+				className="-left-1.5 h-full w-3 cursor-ew-resize"
+				applyReposition
+				onMove={([x,]) => [x, 0]}
+			/>
+
+			<ResizeBar
+				className="-top-1.5 -left-1.5 size-3 cursor-nwse-resize"
+				applyReposition
+				onMove={([x, y]) => [x, y]}
+			/>
+			<ResizeBar
+				className="-top-1.5 -right-1.5 size-3 cursor-nesw-resize"
+				applyReposition={'y'}
+				onMove={([x, y]) => [-x, y]}
+			/>
+			<ResizeBar
+				className="-bottom-1.5 -right-1.5 size-3 cursor-nwse-resize"
+				onMove={([x, y]) => [-x, -y]}
+			/>
+			<ResizeBar
+				className="-bottom-1.5 -left-1.5 size-3 cursor-nesw-resize"
+				applyReposition={'x'}
+				onMove={([x, y]) => [x, -y]}
+			/>
+		</>
+	)
+}
+
+interface ResizeBarProps {
+	className: string,
+	applyReposition?: boolean | 'x' | 'y',
+
+	onMove: (offset: Vector2, originalSize: Vector2, originalPosition: Vector2) => Vector2
+}
+function ResizeBar({
+	className,
+	applyReposition = false,
+
+	onMove
+}: ResizeBarProps) {
+	const debug = useDebugger();
+
+	const [drag, setDrag] = useState<Nullable<{
+		dragOrigin: Vector2,
+		originalSize: Vector2,
+		originalPosition: Vector2
+	}>>(null);
+
+	useEffect(() => {
+		const mouseUp = () => {
+			if (!drag) return;
+
+			setDrag(null);
+		}
+
+		const mouseMove = (e: MouseEvent) => {
+			if (!drag) return;
+
+			const offset: Vector2 = [
+				e.clientX - drag.dragOrigin[0],
+				e.clientY - drag.dragOrigin[1],
+			];
+
+			const newSize = onMove(
+				offset,
+				drag.originalSize,
+				drag.originalPosition
+			);
+
+			newSize[0] = drag.originalSize[0] - newSize[0];
+			newSize[1] = drag.originalSize[1] - newSize[1];
+
+			if (applyReposition !== false) {
+				const repositionOffset = cloneVector2(newSize);
+				removeVector2(repositionOffset, drag.originalSize);
+
+				debug.placement.reposition([
+					drag.originalPosition[0] - ((applyReposition === true || applyReposition === 'x') ? repositionOffset[0] : 0),
+					drag.originalPosition[1] - ((applyReposition === true || applyReposition === 'y') ? repositionOffset[1] : 0)
+				]);
+			}
+
+			debug.window.resize(newSize);
+		}
+
+		document.addEventListener('mouseup', mouseUp);
+		document.addEventListener('mousemove', mouseMove);
+
+		return () => {
+			document.removeEventListener('mouseup', mouseUp);
+			document.removeEventListener('mousemove', mouseMove);
+		}
+	}, [drag]);
+
+	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.preventDefault();
+
+		setDrag({
+			dragOrigin: [e.clientX, e.clientY],
+			originalSize: debug.window.size,
+			originalPosition: debug.placement.position
+		});
+	}
+
+	return (
+		<div
+			onMouseDown={handleMouseDown}
+			className={clsx(
+				'absolute',
+				className,
+			)}
+		/>
+	);
+}