@hrnec06/react_utils 1.2.4 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.2.4",
+  "version": "1.2.7",
   "description": "A debugger component for react.",
   "exports": {
     ".": "./src/index.tsx"
@@ -26,7 +26,7 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
-    "@hrnec06/util": "^1.4.14",
+    "@hrnec06/util": "^1.4.21",
     "clsx": "^2.1.1",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",

package/src/debugger/parser/DebugParserSimple.tsx

@@ -31,7 +31,7 @@ export default function ParseValueSimple({
 				if ((decimals = parts[1].substring(0, MAX_LENGTH - short.length - 1)) && decimals.length > 0)
 					short += '.' + decimals;
 
-				return <ValueKeyword value={short} />;
+				return <ValueNumber value={short} />;
 			}
 
 			return <ValueNumber value={value} />

package/src/debugger/parser/ValueFunction.tsx

@@ -17,7 +17,7 @@ export default function ValueFunction({
 			<span className="text-[#f2824a]">
 				{'ƒ '}
 			</span>
-			<span>
+			<span className="text-white">
 				{`${value.name}(${args})`}
 			</span>
 		</>

package/src/debugger/parser/ValueNumber.tsx

@@ -1,5 +1,5 @@
 interface ValueNumberProps {
-	value: number | bigint
+	value: number | bigint | string
 }
 export default function ValueNumber({
 	value

package/src/debugger/parser/ValueSymbol.tsx

@@ -11,7 +11,7 @@ export default function ValueSymbol({
 		<>
 			<ValueKeyword value="Symbol" />
 			<Char_Bracket text="(" />
-			<span>
+			<span className="text-white">
 				{value.description}
 			</span>
 			<Char_Bracket text=")" />

package/src/index.tsx

@@ -4,7 +4,9 @@ import useUpdatedRef from "./hooks/useUpdatedRef";
 import useUpdateEffect from "./hooks/useUpdateEffect";
 import useWindowSize from "./hooks/useWindowSize";
 import useSignal from "./hooks/useSignal";
+
 import Debugger from './debugger/Debugger';
+import ResizeableBox from "./ui/ResizeableBox";
 
 export {
 	useKeyListener,
@@ -13,5 +15,6 @@ export {
 	useUpdateEffect,
 	useWindowSize,
 	useSignal,
-	Debugger
+	Debugger,
+	ResizeableBox
 };

package/src/ui/ResizeableBox.tsx

@@ -0,0 +1,351 @@
+import { addVector2, cloneVector2, match, matchBool, matchMouseEvent, MouseButton, Nullable, Optional, Vector2 } from "@hrnec06/util";
+import clsx from "clsx";
+import { createContext, useContext, useEffect, useState } from "react";
+import useSignal, { Signal } from "../hooks/useSignal";
+import useListener from "../hooks/useListener";
+import { useUpdatedRef } from "..";
+
+// Type definitions
+type DragAreaSize = 'small' | 'medium' | 'big';
+type DragSide = 'top' | 'right' | 'bottom' | 'left';
+type ResizeEvent = (size: Vector2, offset: Vector2) => void;
+type StartEvent = () => void;
+type EndEvent = () => void;
+
+type RepositionMode = boolean | 'x' | 'y';
+type MouseMoveHandler = (offset: Vector2) => Vector2
+
+interface DragState {
+	originalSize?: Vector2,
+	originalOffset?: Vector2,
+
+	dragOrigin: Vector2,
+	applyReposition: RepositionMode,
+	mouseMove: MouseMoveHandler
+}
+
+// Context
+interface ResizeableBoxContext {
+	size?: Vector2,
+	offset?: Vector2,
+
+	options: {
+		insetAreas: boolean,
+		dragAreaSize: DragAreaSize,
+		allowedSides: DragSide[],
+		allowCorners: boolean | Vector2<DragSide>[],
+	},
+
+	drag: Signal<Nullable<DragState>>,
+}
+const ResizeableBoxContext = createContext<Optional<ResizeableBoxContext>>(undefined);
+
+function useResizeableBox()
+{
+	const ctx = useContext(ResizeableBoxContext);
+
+	if (!ctx)
+		throw new Error("useResizeableBox may be used only within ResizeableBoxContext.Provider!");
+
+	return ctx;
+}
+
+// Component
+
+interface ResizeableBoxProps extends React.HTMLProps<HTMLDivElement>
+{
+	$size?: Vector2,
+	$offset?: Vector2,
+
+	$dragAreaSize?: DragAreaSize,
+	$allowedSides?: DragSide[],
+	$allowCorners?: boolean | Vector2<DragSide>[],
+	$insetAreas?: boolean,
+
+	$onResize?: ResizeEvent,
+	$onStart?: StartEvent,
+	$onEnd?: EndEvent,
+}
+export default function ResizeableBox({
+	$size,
+	$offset,
+
+	$dragAreaSize = "medium",
+	$allowedSides = ['top', 'right', 'bottom', 'left'],
+	$allowCorners = true,
+	$insetAreas = true,
+
+	$onResize,
+	$onStart,
+	$onEnd,
+
+	...props
+}: ResizeableBoxProps)
+{
+	const drag = useSignal<Nullable<DragState>>(null);
+
+	const onResizeRef = useUpdatedRef($onResize);
+
+	useEffect(() => {
+		if (drag.value === null)
+			$onEnd && $onEnd();
+		else
+			$onStart && $onStart();
+	}, [drag.value]);
+
+	useListener(document, 'mouseup', (e) => {
+		if (drag.value === null || !matchMouseEvent(e, MouseButton.Left))
+			return;
+
+		e.preventDefault();
+		e.stopPropagation();
+
+		drag.value = null;
+	}, [drag.value === null]);
+
+	useListener(document, 'mousemove', (e) => {
+		if (drag.value === null || !onResizeRef.current)
+			return;
+
+		e.preventDefault();
+		e.stopPropagation();
+
+		const offset: Vector2 = [
+			e.clientX - drag.value.dragOrigin[0],
+			e.clientY - drag.value.dragOrigin[1],
+		];
+
+		const sizeOffset = drag.value.mouseMove(offset);
+		const positionOffset: Vector2 = [0, 0];
+		
+		if (drag.value.applyReposition !== false)
+		{
+			const offset: Vector2 = cloneVector2(sizeOffset);
+
+			positionOffset[0] = (drag.value.applyReposition === true || drag.value.applyReposition === 'x') ? -offset[0] : 0;
+			positionOffset[1] = (drag.value.applyReposition === true || drag.value.applyReposition === 'y') ? -offset[1] : 0;
+		}
+
+		if (drag.value.originalSize)
+			addVector2(sizeOffset, drag.value.originalSize);
+
+		if (drag.value.originalOffset)
+			addVector2(positionOffset, drag.value.originalOffset);
+
+		onResizeRef.current(sizeOffset, positionOffset);
+	}, [drag.value === null]);
+
+	return (
+		<ResizeableBoxContext.Provider
+			value={{
+				size: $size,
+				offset: $offset,
+
+				options: {
+					dragAreaSize: $dragAreaSize,
+					allowedSides: $allowedSides,
+					allowCorners: $allowCorners,
+					insetAreas: $insetAreas,
+				},
+
+				drag: drag
+			}}
+		>
+			<div
+				{...props}
+
+				className={clsx(
+					props.className,
+					"relative w-full h-full"
+				)}
+			>
+				<DragAreas />
+
+				{props.children}
+			</div>
+		</ResizeableBoxContext.Provider>
+	)
+}
+
+interface DragAreasProps {
+
+}
+function DragAreas({
+
+}: DragAreasProps)
+{
+	return (
+		<>
+			<DragArea
+				spanHorizontal
+				top
+
+				applyReposition={'y'}
+				onMove={([, y]) => [0, -y]}
+			/>
+
+			<DragArea
+				spanVertical
+				right
+				
+				onMove={([x]) => [x, 0]}
+			/>
+
+			<DragArea
+				spanHorizontal
+				bottom
+
+				onMove={([, y]) => [0, y]}
+			/>
+
+			<DragArea
+				spanVertical
+				left
+
+				applyReposition={'x'}
+				onMove={([x]) => [-x, 0]}
+			/>
+
+			{/* Corners */}
+
+			<DragArea
+				isCorner
+				left
+				top
+
+				applyReposition={true}
+				onMove={([x, y]) => [-x, -y]}
+			/>
+
+			<DragArea
+				isCorner
+				right
+				top
+
+				applyReposition={'y'}
+				onMove={([x, y]) => [x, -y]}
+			/>
+
+			<DragArea
+				isCorner
+				left
+				bottom
+
+				applyReposition={'x'}
+				onMove={([x, y]) => [-x, y]}
+			/>
+
+			<DragArea
+				isCorner
+				right
+				bottom
+
+				onMove={([x, y]) => [x, y]}
+			/>
+		</>
+	);
+}
+
+interface DragAreaProps {
+	isCorner?: boolean,
+
+	spanVertical?: boolean,
+	spanHorizontal?: boolean,
+
+	onMove: (offset: Vector2) => Vector2,
+	applyReposition?: RepositionMode,
+
+	top?: boolean,
+	right?: boolean,
+	bottom?: boolean,
+	left?: boolean
+}
+function DragArea({
+	isCorner,
+
+	spanVertical,
+	spanHorizontal,
+
+	onMove,
+	applyReposition = false,
+
+	...enabledSides
+}: DragAreaProps)
+{
+	const box = useResizeableBox();
+
+	const isAllowed = (side: DragSide) => box.options.allowedSides.includes(side);
+
+	if (isCorner && !box.options.allowCorners)
+		return undefined;
+
+	if (
+		(enabledSides.top && !isAllowed('top')) ||
+		(enabledSides.right && !isAllowed('right')) ||
+		(enabledSides.bottom && !isAllowed('bottom')) ||
+		(enabledSides.left && !isAllowed('left'))
+	)
+		return undefined;
+
+	if (isCorner && Array.isArray(box.options.allowCorners))
+	{
+		if (!box.options.allowCorners.some((combo) => enabledSides[combo[0]] && enabledSides[combo[1]]))
+			return undefined;
+	}
+
+	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		if (box.drag.value !== null || !matchMouseEvent(e.nativeEvent, MouseButton.Left))
+			return;
+
+		e.preventDefault();
+		e.stopPropagation();
+
+		box.drag.value = {
+			originalSize: box.size,
+			originalOffset: box.offset,
+			dragOrigin: [e.clientX, e.clientY],
+			mouseMove: onMove,
+			applyReposition: applyReposition,
+		};
+	}
+
+	return (
+		<div
+			onMouseDown={handleMouseDown}
+
+			className={clsx(
+				"absolute",
+				"select-none",
+
+				spanVertical ? 'h-full' : clsx(
+					box.options.dragAreaSize === 'small' 	&& 'h-2',
+					box.options.dragAreaSize === 'medium'	&& 'h-4',
+					box.options.dragAreaSize === 'big'		&& 'h-6'
+				),
+
+				spanHorizontal ? 'w-full' : clsx(
+					box.options.dragAreaSize === 'small' 	&& 'w-2',
+					box.options.dragAreaSize === 'medium'	&& 'w-4',
+					box.options.dragAreaSize === 'big'		&& 'w-6'
+				),
+
+				enabledSides.top 		&& clsx('bottom-full', box.options.insetAreas && 'translate-y-1/2'),
+				enabledSides.right 	&& clsx('left-full', box.options.insetAreas && '-translate-x-1/2'),
+				enabledSides.bottom	&& clsx('top-full', box.options.insetAreas && '-translate-y-1/2'),
+				enabledSides.left		&& clsx('right-full', box.options.insetAreas && 'translate-x-1/2'),
+
+				matchBool({
+					"cursor-nw-resize": enabledSides.top && enabledSides.left,
+					"cursor-ne-resize": enabledSides.top && enabledSides.right,
+					"cursor-se-resize": enabledSides.bottom && enabledSides.right,
+					"cursor-sw-resize": enabledSides.bottom && enabledSides.left,
+
+					"cursor-n-resize": enabledSides.top,
+					"cursor-e-resize": enabledSides.right,
+					"cursor-s-resize": enabledSides.bottom,
+					"cursor-w-resize": enabledSides.left
+				}),
+			)}
+		/>
+	);
+}