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

feat(core): allow setting edges updatable to bool, source or target

Browse Source
This commit is contained in:
braks
2023-03-24 22:42:09 +01:00
parent 82ee1415ef
commit b06629e75e
3 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Edges/wrapEdge.tsx
+22 -22
View File
@@ -55,6 +55,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
rfId, rfId,
ariaLabel, ariaLabel,
isFocusable, isFocusable,
isUpdatable,
pathOptions, pathOptions,
interactionWidth, interactionWidth,
}: WrapEdgeProps): JSX.Element | null => { }: WrapEdgeProps): JSX.Element | null => {
@@ -138,7 +139,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const onEdgeUpdaterMouseOut = () => setUpdateHover(false); const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
const inactive = !elementsSelectable && !onClick; const inactive = !elementsSelectable && !onClick;
const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined';
const onKeyDown = (event: KeyboardEvent) => { const onKeyDown = (event: KeyboardEvent) => {
if (elementSelectionKeys.includes(event.key) && elementsSelectable) { if (elementSelectionKeys.includes(event.key) && elementsSelectable) {
@@ -205,28 +205,28 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
interactionWidth={interactionWidth} interactionWidth={interactionWidth}
/> />
)} )}
{handleEdgeUpdate && ( {isUpdatable && (
<> <>
<EdgeAnchor {isUpdatable === 'source' && <EdgeAnchor
position={sourcePosition} position={sourcePosition}
centerX={sourceX} centerX={sourceX}
centerY={sourceY} centerY={sourceY}
radius={edgeUpdaterRadius} radius={edgeUpdaterRadius}
onMouseDown={onEdgeUpdaterSourceMouseDown} onMouseDown={onEdgeUpdaterSourceMouseDown}
onMouseEnter={onEdgeUpdaterMouseEnter} onMouseEnter={onEdgeUpdaterMouseEnter}
onMouseOut={onEdgeUpdaterMouseOut} onMouseOut={onEdgeUpdaterMouseOut}
type="source" type="source"
/> />}
<EdgeAnchor {isUpdatable === 'target' && <EdgeAnchor
position={targetPosition} position={targetPosition}
centerX={targetX} centerX={targetX}
centerY={targetY} centerY={targetY}
radius={edgeUpdaterRadius} radius={edgeUpdaterRadius}
onMouseDown={onEdgeUpdaterTargetMouseDown} onMouseDown={onEdgeUpdaterTargetMouseDown}
onMouseEnter={onEdgeUpdaterMouseEnter} onMouseEnter={onEdgeUpdaterMouseEnter}
onMouseOut={onEdgeUpdaterMouseOut} onMouseOut={onEdgeUpdaterMouseOut}
type="target" type="target"
/> />}
</> </>
)} )}
</g> </g>
packages/core/src/container/EdgeRenderer/index.tsx
+4 -1
View File
@@ -39,6 +39,7 @@ type EdgeRendererProps = Pick<
const selector = (s: ReactFlowState) => ({ const selector = (s: ReactFlowState) => ({
nodesConnectable: s.nodesConnectable, nodesConnectable: s.nodesConnectable,
edgesFocusable: s.edgesFocusable, edgesFocusable: s.edgesFocusable,
edgesUpdatable: s.edgesUpdatable,
elementsSelectable: s.elementsSelectable, elementsSelectable: s.elementsSelectable,
width: s.width, width: s.width,
height: s.height, height: s.height,
@@ -66,7 +67,7 @@ const EdgeRenderer = ({
onEdgeUpdateEnd, onEdgeUpdateEnd,
children, children,
}: EdgeRendererProps) => { }: EdgeRendererProps) => {
const { edgesFocusable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore( const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore(
selector, selector,
shallow shallow
); );
@@ -114,6 +115,7 @@ const EdgeRenderer = ({
const sourcePosition = sourceHandle?.position || Position.Bottom; const sourcePosition = sourceHandle?.position || Position.Bottom;
const targetPosition = targetHandle?.position || Position.Top; const targetPosition = targetHandle?.position || Position.Top;
const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
const isUpdatable = edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined');
if (!sourceHandle || !targetHandle) { if (!sourceHandle || !targetHandle) {
onError?.('008', errorMessages['error008'](sourceHandle, edge)); onError?.('008', errorMessages['error008'](sourceHandle, edge));
@@ -173,6 +175,7 @@ const EdgeRenderer = ({
rfId={rfId} rfId={rfId}
ariaLabel={edge.ariaLabel} ariaLabel={edge.ariaLabel}
isFocusable={isFocusable} isFocusable={isFocusable}
isUpdatable={isUpdatable}
pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined} pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
interactionWidth={edge.interactionWidth} interactionWidth={edge.interactionWidth}
/> />
packages/core/src/types/edges.ts
+1
View File
@@ -91,6 +91,7 @@ export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandl
onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void; onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
rfId?: string; rfId?: string;
isFocusable: boolean; isFocusable: boolean;
isUpdatable: EdgeUpdatable;
pathOptions?: BezierPathOptions | SmoothStepPathOptions; pathOptions?: BezierPathOptions | SmoothStepPathOptions;
}; };