update ruler
This commit is contained in:
parent
00d9bdeaf1
commit
74c58b570e
@ -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) => []);
|
||||||
|
Loading…
Reference in New Issue
Block a user