init commit

src/components/工具组件/Ruler.jsx

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+
+function Ruler(props) {
+	const ruler = useRef(null);
+	const [left, setLeft] = useState(props.left || '100px');
+	const [top, setTop] = useState(props.top || '100px');
+	const [dragging, setDragging] = useState(false);
+	const isVertical = props.type == 'vertical';
+	const handleUp = useCallback(() => {
+		setDragging(false);
+	}, []);
+	const handleMove = useCallback(
+		(e) => {
+			if (!dragging) return;
+			const v = isVertical ? e.clientX : e.clientY;
+			isVertical ? setLeft(v + 'px') : setTop(v + 'px');
+		},
+		[dragging],
+	);
+
+	useEffect(() => {
+		document.addEventListener('mouseup', handleUp);
+		document.addEventListener('mousemove', handleMove);
+
+		return () => {
+			document.removeEventListener('mouseup', handleUp);
+			document.removeEventListener('mousemove', handleMove);
+		};
+	}, [dragging]);
+
+	function handleMouseDown() {
+		setDragging(true);
+	}
+
+	return (
+		<motion.div
+			ref={ruler}
+			className="ruler-line"
+			style={{
+				position: 'fixed',
+				top: isVertical ? 0 : top,
+				left: isVertical ? left : 0,
+				overflow: 'visible',
+				height: isVertical ? '100vh' : '1px',
+				width: isVertical ? '1px' : '100vw',
+				cursor: 'pointer',
+				userSelect: 'none',
+				background: props.background || '#ccc',
+			}}
+			onMouseDown={handleMouseDown}
+		>
+			<div
+				className="ruler-tooltip"
+				style={{
+					position: 'absolute',
+					top: isVertical ? '200px' : '20px',
+					right: isVertical ? '-132px' : '50px',
+					width: '128px',
+					border: '1px solid #0008',
+					padding: '0 12px',
+					background: '#ecc100',
+					color: '#0008',
+				}}
+			>
+				{isVertical ? `left: ${left}` : `top: ${top}`}
+			</div>
+		</motion.div>
+	);
+}
+
+function RulerContainer(props) {
+	const [rulers, setRulers] = useState([]);
+
+	// 监听事件
+	useEffect(() => {
+		let fn = (e) => {
+			if (e.shiftKey && e.key === 'R') {
+				setRulers((rulers) => [
+					...rulers,
+					{
+						width: '1px',
+						height: '100vh',
+						background: '#ccc',
+						type: 'vertical',
+					},
+				]);
+			}
+			if (e.shiftKey && e.key === 'H') {
+				setRulers((rulers) => [
+					...rulers,
+					{ width: '100vw', height: '1px', background: '#ccc' },
+				]);
+			}
+			if (e.shiftKey && e.key === 'Q') {
+				setRulers((rulers) => []);
+			}
+		};
+
+		document.addEventListener('keydown', fn);
+	}, []);
+
+	return (
+		<div
+			id="ruler-container"
+			style={{ position: 'fixed', top: 0, left: 0, width: 0, height: 0 }}
+		>
+			{rulers.map((ruler) => (
+				<Ruler key={Math.random()} {...ruler} />
+			))}
+		</div>
+	);
+}
+
+export default RulerContainer;