alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(edges): hide edge while updating closes #2285

Browse Source
This commit is contained in:
moklick
2022-08-30 16:36:58 +02:00
parent e59307bbc1
commit 276aad98fb
1 changed files with 37 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Edges/wrapEdge.tsx
+37 -31
View File
@@ -54,6 +54,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
disableKeyboardA11y, disableKeyboardA11y,
}: WrapEdgeProps): JSX.Element | null => { }: WrapEdgeProps): JSX.Element | null => {
const edgeRef = useRef<SVGGElement>(null); const edgeRef = useRef<SVGGElement>(null);
const [updateHover, setUpdateHover] = useState<boolean>(false);
const [updating, setUpdating] = useState<boolean>(false); const [updating, setUpdating] = useState<boolean>(false);
const store = useStoreApi(); const store = useStoreApi();
@@ -92,11 +93,13 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const isTarget = isSourceHandle; const isTarget = isSourceHandle;
const edge = store.getState().edges.find((e) => e.id === id)!; const edge = store.getState().edges.find((e) => e.id === id)!;
setUpdating(true);
onEdgeUpdateStart?.(event, edge, handleType); onEdgeUpdateStart?.(event, edge, handleType);
const _onEdgeUpdateEnd = onEdgeUpdateEnd const _onEdgeUpdateEnd = (evt: MouseEvent) => {
? (evt: MouseEvent): void => onEdgeUpdateEnd(evt, edge, handleType) setUpdating(false);
: undefined; onEdgeUpdateEnd?.(evt, edge, handleType);
};
const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection); const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection);
@@ -119,8 +122,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const onEdgeUpdaterTargetMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => const onEdgeUpdaterTargetMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
handleEdgeUpdater(event, false); handleEdgeUpdater(event, false);
const onEdgeUpdaterMouseEnter = () => setUpdating(true); const onEdgeUpdaterMouseEnter = () => setUpdateHover(true);
const onEdgeUpdaterMouseOut = () => setUpdating(false); const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
const inactive = !elementsSelectable && !onClick; const inactive = !elementsSelectable && !onClick;
const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined'; const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined';
@@ -128,7 +131,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
'react-flow__edge', 'react-flow__edge',
`react-flow__edge-${type}`, `react-flow__edge-${type}`,
className, className,
{ selected, animated, inactive, updating }, { selected, animated, inactive, updating: updateHover },
]); ]);
const onKeyDown = (event: KeyboardEvent) => { const onKeyDown = (event: KeyboardEvent) => {
@@ -161,31 +164,34 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_EDGE_DESC_KEY}-${rfId}`} aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_EDGE_DESC_KEY}-${rfId}`}
ref={edgeRef} ref={edgeRef}
> >
<EdgeComponent {!updating && (
id={id} <EdgeComponent
source={source} id={id}
target={target} source={source}
selected={selected} target={target}
animated={animated} selected={selected}
label={label} animated={animated}
labelStyle={labelStyle} label={label}
labelShowBg={labelShowBg} labelStyle={labelStyle}
labelBgStyle={labelBgStyle} labelShowBg={labelShowBg}
labelBgPadding={labelBgPadding} labelBgStyle={labelBgStyle}
labelBgBorderRadius={labelBgBorderRadius} labelBgPadding={labelBgPadding}
data={data} labelBgBorderRadius={labelBgBorderRadius}
style={style} data={data}
sourceX={sourceX} style={style}
sourceY={sourceY} sourceX={sourceX}
targetX={targetX} sourceY={sourceY}
targetY={targetY} targetX={targetX}
sourcePosition={sourcePosition} targetY={targetY}
targetPosition={targetPosition} sourcePosition={sourcePosition}
sourceHandleId={sourceHandleId} targetPosition={targetPosition}
targetHandleId={targetHandleId} sourceHandleId={sourceHandleId}
markerStart={markerStartUrl} targetHandleId={targetHandleId}
markerEnd={markerEndUrl} markerStart={markerStartUrl}
/> markerEnd={markerEndUrl}
/>
)}
{handleEdgeUpdate && ( {handleEdgeUpdate && (
<g <g
onMouseDown={onEdgeUpdaterSourceMouseDown} onMouseDown={onEdgeUpdaterSourceMouseDown}