mirror/FossFLOW
1
0
Fork 0
mirror of https://github.com/stan-smith/FossFLOW.git synced 2025-12-24 23:19:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: improves UX when dragging rectangle anchor

Browse Source
This commit is contained in:
Mark Mankarious
2023-10-31 09:42:37 +00:00
parent 0bace0bc5f
commit 5feca66326
2 changed files with 2 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/TransformControlsManager/RectangleTransformControls.tsx
View File

@@ -20,7 +20,7 @@ export const RectangleTransformControls = ({ id }: Props) => {
type: 'RECTANGLE.TRANSFORM',
id: rectangle.id,
selectedAnchor: key,
showCursor: false
showCursor: true
});
},
[rectangle.id, uiStateActions]

29
src/components/TransformControlsManager/TransformAnchor.tsx
View File

@@ -1,10 +1,8 @@
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { produce } from 'immer';
import React, { useState } from 'react';
import { Coords } from 'src/types';
import { useTheme, Box } from '@mui/material';
import { getIsoProjectionCss } from 'src/utils';
import { Svg } from 'src/components/Svg/Svg';
import { useUiStateStore } from 'src/stores/uiStateStore';
import { TRANSFORM_ANCHOR_SIZE, TRANSFORM_CONTROLS_COLOR } from 'src/config';
interface Props {
@@ -15,34 +13,9 @@ interface Props {
const strokeWidth = 2;
export const TransformAnchor = ({ position, onMouseDown }: Props) => {
const prevIsHoveredStateRef = useRef(false);
const [isHovered, setIsHovered] = useState(false);
const mode = useUiStateStore((state) => {
return state.mode;
});
const uiActions = useUiStateStore((state) => {
return state.actions;
});
const theme = useTheme();
const toggleCursor = useCallback(
(state: boolean) => {
const newMode = produce(mode, (draft) => {
draft.showCursor = state;
});
uiActions.setMode(newMode);
},
[mode, uiActions]
);
useEffect(() => {
if (prevIsHoveredStateRef.current !== isHovered) {
prevIsHoveredStateRef.current = isHovered;
toggleCursor(!isHovered);
}
}, [isHovered, toggleCursor]);
return (
<Box
onMouseOver={() => {