mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update ruler

Browse Source
This commit is contained in:
lb 2023-11-07 14:37:00 +08:00
parent 00d9bdeaf1
commit 74c58b570e
1 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/工具组件/Ruler.jsx
View File

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