12212279903

Committed 07 Dec 2024 10:51AM UTC coverage: 76.031% (+0.7%) from 75.309%

Build # 12212279903

Build Type

push

github

Committed by

e7h4n

Commit Message

build: better lint / format / commit toolchain

- makes prettier & eslint works together
- use commitlint to check commit message
- reformat all existed sources
- add git action to check commit message

Run Details

161 of 170 branches covered (94.71%)

Branch coverage included in aggregate %.

53 of 103 new or added lines in 26 files covered. (51.46%)

6 existing lines in 4 files now uncovered.

521 of 727 relevant lines covered (71.66%)

118.53 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/devtools/src/hooks/useResizable.ts

import { useCallback, useRef, useState } from 'react';

export function useResizable(axis: 'x' | 'y', initialSize = '50%', containerSelector?: string) {
  const [size, setSize] = useState(initialSize);
  const isResizing = useRef(false);
  const startPos = useRef({ x: 0, y: 0 });
  const startSize = useRef(0);

  const handleMouseDown = useCallback(
    (e: MouseEvent) => {
      isResizing.current = true;
      startPos.current = { x: e.clientX, y: e.clientY };

      let container: Element | null;
      if (containerSelector) {
        container = document.querySelector(containerSelector);
      } else {
        container = (e.target as HTMLElement).parentElement;
      }
      if (!container) return;

      const rect = container.getBoundingClientRect();
      startSize.current = axis === 'x' ? rect.width : rect.height;

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    },
    [axis, containerSelector],
  );

  const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      if (!isResizing.current) return;

      let container: Element | null;
      if (containerSelector) {
        container = document.querySelector(containerSelector);
      } else {
        container = (e.target as HTMLElement).parentElement;
      }
      if (!container) return;

      const rect = container.getBoundingClientRect();
      const delta = axis === 'x' ? e.clientX - startPos.current.x : e.clientY - startPos.current.y;

      const containerSize = axis === 'x' ? rect.width : rect.height;
      const newSizePixels = startSize.current + delta;
      const newSizePercent = (newSizePixels / containerSize) * 100;

      setSize(`${String(Math.max(10, Math.min(90, newSizePercent)))}%`);
    },
    [axis, containerSelector],
  );

  const handleMouseUp = useCallback(() => {
    isResizing.current = false;
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  }, [handleMouseMove]);

  return {
    size,
    handleMouseDown: (e: React.MouseEvent) => {
      handleMouseDown(e as unknown as MouseEvent);
    },
  };
}

NEW 1	import { useCallback, useRef, useState } from 'react';	×
2
NEW 3	export function useResizable(axis: 'x' \| 'y', initialSize = '50%', containerSelector?: string) {	×
4	const [size, setSize] = useState(initialSize);	×
5	const isResizing = useRef(false);	×
6	const startPos = useRef({ x: 0, y: 0 });	×
7	const startSize = useRef(0);	×
8
9	const handleMouseDown = useCallback(	×
10	(e: MouseEvent) => {	×
11	isResizing.current = true;	×
12	startPos.current = { x: e.clientX, y: e.clientY };	×
13
14	let container: Element \| null;	×
15	if (containerSelector) {	×
16	container = document.querySelector(containerSelector);	×
17	} else {	×
18	container = (e.target as HTMLElement).parentElement;	×
19	}	×
20	if (!container) return;	×
21
22	const rect = container.getBoundingClientRect();	×
NEW 23	startSize.current = axis === 'x' ? rect.width : rect.height;	×
24
NEW 25	document.addEventListener('mousemove', handleMouseMove);	×
NEW 26	document.addEventListener('mouseup', handleMouseUp);	×
27	},	×
28	[axis, containerSelector],	×
29	);	×
30
31	const handleMouseMove = useCallback(	×
32	(e: MouseEvent) => {	×
33	if (!isResizing.current) return;	×
34
35	let container: Element \| null;	×
36	if (containerSelector) {	×
37	container = document.querySelector(containerSelector);	×
38	} else {	×
39	container = (e.target as HTMLElement).parentElement;	×
40	}	×
41	if (!container) return;	×
42
43	const rect = container.getBoundingClientRect();	×
NEW 44	const delta = axis === 'x' ? e.clientX - startPos.current.x : e.clientY - startPos.current.y;	×
45
NEW 46	const containerSize = axis === 'x' ? rect.width : rect.height;	×
47	const newSizePixels = startSize.current + delta;	×
48	const newSizePercent = (newSizePixels / containerSize) * 100;	×
49
50	setSize(`${String(Math.max(10, Math.min(90, newSizePercent)))}%`);	×
51	},	×
52	[axis, containerSelector],	×
53	);	×
54
55	const handleMouseUp = useCallback(() => {	×
56	isResizing.current = false;	×
NEW 57	document.removeEventListener('mousemove', handleMouseMove);	×
NEW 58	document.removeEventListener('mouseup', handleMouseUp);	×
UNCOV 59	}, [handleMouseMove]);	×
60
61	return {	×
62	size,	×
63	handleMouseDown: (e: React.MouseEvent) => {	×
64	handleMouseDown(e as unknown as MouseEvent);	×
65	},	×
66	};	×
67	}	×

e7h4n / rippling / 12212279903

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous