update ruler

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

@@ -4,16 +4,17 @@ 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 x = e.clientX;
-			setLeft(x + 'px');
+			const v = isVertical ? e.clientX : e.clientY;
+			isVertical ? setLeft(v + 'px') : setTop(v + 'px');
 		},
 		[dragging],
 	);
@@ -37,12 +38,12 @@ function Ruler(props) {
 			ref={ruler}
 			className="ruler-line"
 			style={{
-				position: 'relative',
-				top: 0,
-				left: left,
+				position: 'fixed',
+				top: isVertical ? 0 : top,
+				left: isVertical ? left : 0,
 				overflow: 'visible',
-				height: '100vh',
-				width: '1px',
+				height: isVertical ? '100vh' : '1px',
+				width: isVertical ? '1px' : '100vw',
 				cursor: 'pointer',
 				userSelect: 'none',
 				background: props.background || '#ccc',
@@ -53,8 +54,8 @@ function Ruler(props) {
 				className="ruler-tooltip"
 				style={{
 					position: 'absolute',
-					top: '200px',
-					right: '-132px',
+					top: isVertical ? '200px' : '20px',
+					right: isVertical ? '-132px' : '50px',
 					width: '128px',
 					border: '1px solid #0008',
 					padding: '0 12px',
@@ -62,7 +63,7 @@ function Ruler(props) {
 					color: '#0008',
 				}}
 			>
-				left: <b>{left}</b>
+				{isVertical ? `left: ${left}` : `top: ${top}`}
 			</div>
 		</motion.div>
 	);
@@ -71,17 +72,25 @@ function Ruler(props) {
 function RulerContainer(props) {
 	const [rulers, setRulers] = useState([]);
 
-	const rulerCfg = {
-		width: '2px',
-		height: '100vh',
-		background: '#ccc',
-	};
-
 	// 监听事件
 	useEffect(() => {
 		let fn = (e) => {
 			if (e.shiftKey && e.key === 'R') {
-				setRulers((rulers) => [...rulers, rulerCfg]);
+				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) => []);