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

Merge branch 'main' into migrate/svelte5

Browse Source
This commit is contained in:
peterkogo
2024-12-09 15:59:30 +01:00
parent 1d321ebcd6 1e1eb06f2a
commit 9199cbd278
21 changed files with 159 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/components/Edges/BaseEdge.tsx
+2 -14
View File
@@ -5,7 +5,6 @@ import { EdgeText } from './EdgeText';
import type { BaseEdgeProps } from '../../types';
export function BaseEdge({
id,
path,
labelX,
labelY,
@@ -15,23 +14,12 @@ export function BaseEdge({
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
className,
interactionWidth = 20,
...props
}: BaseEdgeProps) {
return (
<>
<path
id={id}
style={style}
d={path}
fill="none"
className={cc(['react-flow__edge-path', className])}
markerEnd={markerEnd}
markerStart={markerStart}
/>
<path {...props} d={path} fill="none" className={cc(['react-flow__edge-path', props.className])} />
{interactionWidth && (
<path
d={path}
packages/react/src/components/NodeWrapper/index.tsx
+3
View File
@@ -138,6 +138,9 @@ export function NodeWrapper<NodeType extends Node>({
nodeRef,
});
} else if (isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
// prevent default scrolling behavior on arrow key press when node is moved
event.preventDefault();
store.setState({
ariaLiveMessage: `Moved selected node ${event.key
.replace('Arrow', '')
packages/react/src/components/NodesSelection/index.tsx
+2
View File
@@ -68,6 +68,8 @@ export function NodesSelection<NodeType extends Node>({
const onKeyDown = (event: KeyboardEvent) => {
if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
event.preventDefault();
moveSelectedNodes({
direction: arrowKeyDiffs[event.key],
factor: event.shiftKey ? 4 : 1,
packages/react/src/components/Panel/index.tsx
+17 -14
View File
@@ -1,4 +1,4 @@
import type { HTMLAttributes, ReactNode } from 'react';
import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
import cc from 'classcat';
import type { PanelPosition } from '@xyflow/system';
@@ -15,17 +15,20 @@ export type PanelProps = HTMLAttributes<HTMLDivElement> & {
const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');
export function Panel({ position = 'top-left', children, className, style, ...rest }: PanelProps) {
const pointerEvents = useStore(selector);
const positionClasses = `${position}`.split('-');
export const Panel = forwardRef<HTMLDivElement, PanelProps>(
({ position = 'top-left', children, className, style, ...rest }, ref) => {
const pointerEvents = useStore(selector);
const positionClasses = `${position}`.split('-');
return (
<div
className={cc(['react-flow__panel', className, ...positionClasses])}
style={{ ...style, pointerEvents }}
{...rest}
>
{children}
</div>
);
}
return (
<div
className={cc(['react-flow__panel', className, ...positionClasses])}
style={{ ...style, pointerEvents }}
ref={ref}
{...rest}
>
{children}
</div>
);
}
);
packages/react/src/container/ReactFlow/index.tsx
+1 -1
View File
@@ -153,11 +153,11 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
return (
<div
data-testid="rf__wrapper"
{...rest}
style={{ ...style, ...wrapperStyle }}
ref={ref}
className={cc(['react-flow', className, colorModeClassName])}
data-testid="rf__wrapper"
id={id}
>
<Wrapper
packages/react/src/store/index.ts
+10 -6
View File
@@ -148,26 +148,30 @@ const createStore = ({
const changes = [];
for (const [id, dragItem] of nodeDragItems) {
const expandParent = !!(dragItem?.expandParent && dragItem?.parentId && dragItem?.position);
const change: NodeChange = {
id,
type: 'position',
position: dragItem.position,
position: expandParent
? {
x: Math.max(0, dragItem.position.x),
y: Math.max(0, dragItem.position.y),
}
: dragItem.position,
dragging,
};
if (dragItem?.expandParent && dragItem?.parentId && change.position) {
if (expandParent) {
parentExpandChildren.push({
id,
parentId: dragItem.parentId,
parentId: dragItem.parentId!,
rect: {
...dragItem.internals.positionAbsolute,
width: dragItem.measured.width!,
height: dragItem.measured.height!,
},
});
change.position.x = Math.max(0, change.position.x);
change.position.y = Math.max(0, change.position.y);
}
changes.push(change);
packages/react/src/types/component-props.ts
+1 -1
View File
@@ -499,7 +499,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
* If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons.
* @default (connection: Connection) => true
*/
isValidConnection?: IsValidConnection;
isValidConnection?: IsValidConnection<EdgeType>;
/** With a threshold greater than zero you can control the distinction between node drag and click events.
*
* If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
packages/react/src/types/edges.ts
+13 -25
View File
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { CSSProperties, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent, ComponentType } from 'react';
import type { CSSProperties, SVGAttributes, ReactNode, MouseEvent as ReactMouseEvent, ComponentType } from 'react';
import type {
EdgeBase,
BezierPathOptions,
@@ -14,7 +14,6 @@ import type {
EdgePosition,
StepPathOptions,
OnError,
ConnectionState,
FinalConnectionState,
} from '@xyflow/system';
@@ -94,7 +93,7 @@ export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
export type EdgeTextProps = HTMLAttributes<SVGElement> &
export type EdgeTextProps = SVGAttributes<SVGElement> &
EdgeLabelOptions & {
x: number;
y: number;
@@ -123,28 +122,17 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
* BaseEdge component props
* @public
*/
export type BaseEdgeProps = EdgeLabelOptions & {
/** Unique id of edge */
id?: string;
/** Additional padding where interacting with an edge is still possible */
interactionWidth?: number;
className?: string;
/** The x position of edge label */
labelX?: number;
/** The y position of edge label */
labelY?: number;
/** Marker at start of edge
* @example 'url(#arrow)'
*/
markerStart?: string;
/** Marker at end of edge
* @example 'url(#arrow)'
*/
markerEnd?: string;
/** SVG path of the edge */
path: string;
style?: CSSProperties;
};
export type BaseEdgeProps = Omit<SVGAttributes<SVGPathElement>, 'd'> &
EdgeLabelOptions & {
/** Additional padding where interacting with an edge is still possible */
interactionWidth?: number;
/** The x position of edge label */
labelX?: number;
/** The y position of edge label */
labelY?: number;
/** SVG path of the edge */
path: string;
};
/**
* Helper type for edge components that get exported by the library
packages/react/src/types/nodes.ts
+3 -1
View File
@@ -56,6 +56,8 @@ export type NodeWrapperProps<NodeType extends Node> = {
nodeClickDistance?: number;
};
export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;
export type BuiltInNode =
| Node<{ label: string }, 'input' | 'output' | 'default'>
| Node<Record<string, never>, 'group'>;
export type NodeProps<NodeType extends Node = Node> = NodePropsBase<NodeType>;
packages/svelte/src/lib/types/nodes.ts
+3 -1
View File
@@ -42,7 +42,9 @@ export type NodeTypes = Record<
export type DefaultNodeOptions = Partial<Omit<Node, 'id'>>;
export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;
export type BuiltInNode =
| Node<{ label: string }, 'input' | 'output' | 'default'>
| Node<Record<string, never>, 'group'>;
// TODO SVELTE5 remove this
export type NodeEventMap = {