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

Merge pull request #4383 from xyflow/next

Browse Source 
React Flow 12.0.0-next.22 and Svelte Flow 0.1.7
This commit is contained in:
Moritz Klack
2024-06-20 13:45:18 +02:00
committed by GitHub
parent d2fdea4ab2 d0e166d4a8
commit b2b4d5121d
50 changed files with 1263 additions and 850 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/App/routes.ts
+4 -4
View File
@@ -34,7 +34,7 @@ import Subflow from '../examples/Subflow';
import SwitchFlow from '../examples/Switch';
import TouchDevice from '../examples/TouchDevice';
import Undirectional from '../examples/Undirectional';
import UpdatableEdge from '../examples/UpdatableEdge';
import ReconnectEdge from '../examples/ReconnectEdge';
import UpdateNode from '../examples/UpdateNode';
import UseUpdateNodeInternals from '../examples/UseUpdateNodeInternals';
import UseReactFlow from '../examples/UseReactFlow';
@@ -271,9 +271,9 @@ const routes: IRoute[] = [
component: Undirectional,
},
{
name: 'Updatable Edge',
path: 'updatable-edge',
component: UpdatableEdge,
name: 'Reconnect Edge',
path: 'reconnect-edge',
component: ReconnectEdge,
},
{
name: 'Update Node',
examples/react/src/examples/DefaultNodes/index.tsx
+1
View File
@@ -25,6 +25,7 @@ const defaultNodes: Node[] = [
},
{
id: '3',
type: 'output',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
className: 'light',
examples/react/src/examples/NodeTypesObjectChange/index.tsx
+9
View File
@@ -28,6 +28,14 @@ const initialNodes: Node[] = [
data: { label: 'A Node' },
position: { x: 250, y: 0 },
},
{
id: '3',
type: 'b',
sourcePosition: Position.Right,
targetPosition: Position.Left,
data: { label: 'B Node' },
position: { x: 350, y: 0 },
},
];
const buttonStyle: CSSProperties = {
@@ -78,6 +86,7 @@ const NodeTypeChangeFlow = () => {
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodeTypes={nodeTypesObjects[nodeTypesId]}
fitView
>
<button onClick={changeType} style={buttonStyle}>
change type
examples/react/src/examples/UpdatableEdge/index.tsx → examples/react/src/examples/ReconnectEdge/index.tsx
+12 -12
View File
@@ -2,7 +2,7 @@ import { useState, useCallback, MouseEvent as ReactMouseEvent } from 'react';
import {
ReactFlow,
Controls,
updateEdge,
reconnectEdge,
addEdge,
applyNodeChanges,
applyEdgeChanges,
@@ -91,21 +91,21 @@ const initialNodes: Node[] = [
];
const initialEdges: Edge[] = [
{ id: 'e1-3', source: '1', target: '3', label: 'This edge can only be updated from source', updatable: 'source' },
{ id: 'e2-4', source: '2', target: '4', label: 'This edge can only be updated from target', updatable: 'target' },
{ id: 'e1-3', source: '1', target: '3', label: 'This edge can only be updated from source', reconnectable: 'source' },
{ id: 'e2-4', source: '2', target: '4', label: 'This edge can only be updated from target', reconnectable: 'target' },
{ id: 'e5-6', source: '5', target: '6', label: 'This edge can be updated from both sides' },
];
const onEdgeUpdateStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) =>
const onReconnectStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) =>
console.log(`start update ${handleType} handle`, edge);
const onEdgeUpdateEnd = (_: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) =>
const onReconnectEnd = (_: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) =>
console.log(`end update ${handleType} handle`, edge);
const UpdatableEdge = () => {
const ReconnectEdge = () => {
const [nodes, setNodes] = useState<Node[]>(initialNodes);
const [edges, setEdges] = useState<Edge[]>(initialEdges);
const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
setEdges((els) => updateEdge(oldEdge, newConnection, els));
const onReconnect = (oldEdge: Edge, newConnection: Connection) =>
setEdges((els) => reconnectEdge(oldEdge, newConnection, els));
const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
const onNodesChange = useCallback((changes: NodeChange[]) => {
@@ -123,10 +123,10 @@ const UpdatableEdge = () => {
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
snapToGrid={true}
onEdgeUpdate={onEdgeUpdate}
onReconnect={onReconnect}
onConnect={onConnect}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
onReconnectStart={onReconnectStart}
onReconnectEnd={onReconnectEnd}
fitView
>
<Controls />
@@ -134,4 +134,4 @@ const UpdatableEdge = () => {
);
};
export default UpdatableEdge;
export default ReconnectEdge;
examples/react/src/examples/Undirectional/index.tsx
+13 -13
View File
@@ -10,7 +10,7 @@ import {
Edge,
ConnectionLineType,
ConnectionMode,
updateEdge,
reconnectEdge,
useNodesState,
useEdgesState,
} from '@xyflow/react';
@@ -22,55 +22,55 @@ const initialNodes: Node[] = [
id: '00',
type: 'custom',
position: { x: 300, y: 250 },
data: null,
data: {},
},
{
id: '01',
type: 'custom',
position: { x: 100, y: 50 },
data: null,
data: {},
},
{
id: '02',
type: 'custom',
position: { x: 500, y: 50 },
data: null,
data: {},
},
{
id: '03',
type: 'custom',
position: { x: 500, y: 500 },
data: null,
data: {},
},
{
id: '04',
type: 'custom',
position: { x: 100, y: 500 },
data: null,
data: {},
},
{
id: '10',
type: 'custom',
position: { x: 300, y: 5 },
data: null,
data: {},
},
{
id: '20',
type: 'custom',
position: { x: 600, y: 250 },
data: null,
data: {},
},
{
id: '30',
type: 'custom',
position: { x: 300, y: 600 },
data: null,
data: {},
},
{
id: '40',
type: 'custom',
position: { x: 5, y: 250 },
data: null,
data: {},
},
];
@@ -186,8 +186,8 @@ const UpdateNodeInternalsFlow = () => {
const { screenToFlowPosition } = useReactFlow();
const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
const onEdgeUpdate = useCallback(
(oldEdge: Edge, newConnection: Connection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)),
const onReconnect = useCallback(
(oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),
[]
);
@@ -215,7 +215,7 @@ const UpdateNodeInternalsFlow = () => {
onPaneClick={onPaneClick}
connectionLineType={ConnectionLineType.Bezier}
connectionMode={ConnectionMode.Loose}
onEdgeUpdate={onEdgeUpdate}
onReconnect={onReconnect}
/>
);
};
examples/react/src/examples/UseKeyPress/index.tsx
+4 -1
View File
@@ -1,9 +1,12 @@
import { useKeyPress } from '@xyflow/react';
import { useEffect } from 'react';
const UseKeyPressComponent = () => {
const metaPressed = useKeyPress(['Meta']);
console.log({ metaPressed });
useEffect(() => {
console.log({ metaPressed });
}, [metaPressed]);
return <div />;
};
examples/react/src/examples/Validation/index.tsx
+9 -9
View File
@@ -13,7 +13,7 @@ import {
OnConnectStart,
OnConnectEnd,
OnConnect,
updateEdge,
reconnectEdge,
Edge,
IsValidConnection,
OnBeforeDelete,
@@ -24,10 +24,10 @@ import ConnectionStatus from './ConnectionStatus';
import styles from './validation.module.css';
const initialNodes: Node[] = [
{ id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: null },
{ id: 'A', type: 'customnode', position: { x: 250, y: 0 }, data: null },
{ id: 'B', type: 'customnode', position: { x: 250, y: 150 }, data: null },
{ id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: null },
{ id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: {} },
{ id: 'A', type: 'customnode', position: { x: 250, y: 0 }, data: {} },
{ id: 'B', type: 'customnode', position: { x: 250, y: 150 }, data: {} },
{ id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: {} },
];
const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';
@@ -41,7 +41,7 @@ const CustomInput: FC<NodeProps> = () => (
const CustomNode: FC<NodeProps> = ({ id }) => (
<>
<Handle type="target" position={Position.Left} isConnectableStart={false} />
<Handle type="target" position={Position.Top} isConnectableStart={false} />
<div>{id}</div>
<Handle type="source" position={Position.Right} />
</>
@@ -81,8 +81,8 @@ const ValidationFlow = () => {
[value]
);
const onEdgeUpdate = useCallback(
(oldEdge: Edge, newConnection: Connection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)),
const onReconnect = useCallback(
(oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),
[setEdges]
);
@@ -102,7 +102,7 @@ const ValidationFlow = () => {
nodeTypes={nodeTypes}
onConnectStart={onConnectStart}
onConnectEnd={onConnectEnd}
onEdgeUpdate={onEdgeUpdate}
onReconnect={onReconnect}
isValidConnection={isValidConnection}
onBeforeDelete={onBeforeDelete}
fitView
examples/react/src/generic-tests/edges/general.ts
+1 -1
View File
@@ -149,7 +149,7 @@ export default {
// source: '9',
// target: '11',
// label: 'focusable',
// updatable: true
// reconnectable: true
// },
// {
// id: 'not-focusable',
examples/svelte/src/generic-tests/edges/general.ts
+1 -1
View File
@@ -146,7 +146,7 @@ export default {
// source: '9',
// target: '11',
// label: 'focusable',
// updatable: true
// reconnectable: true
// },
// {
// id: 'not-focusable',
examples/svelte/src/routes/examples/validation/+page.svelte
+2 -2
View File
@@ -24,8 +24,8 @@
data: { label: 'only connectable with B' },
...nodeDefaults
},
{ id: 'A', position: { x: 250, y: 0 }, data: { label: 'A' }, ...nodeDefaults },
{ id: 'B', position: { x: 250, y: 150 }, data: { label: 'B' }, ...nodeDefaults },
{ id: 'A', position: { x: 250, y: 0 }, data: { label: 'A' } },
{ id: 'B', position: { x: 250, y: 150 }, data: { label: 'B' } },
{ id: 'C', position: { x: 250, y: 300 }, data: { label: 'C' }, ...nodeDefaults }
]);
package.json
+8 -7
View File
@@ -14,10 +14,10 @@
"test:svelte:ui": "pnpm --filter=playwright run test:svelte:ui",
"test:react": "pnpm --filter=playwright run test:react",
"test:react:ui": "pnpm --filter=playwright run test:react:ui",
"build": "turbo run build",
"test": "turbo run test",
"lint": "turbo run lint",
"typecheck": "turbo run typecheck",
"build:all": "turbo run build",
"build": "turbo run build --filter=./packages/**",
"lint": "turbo run lint --filter=./packages/**",
"typecheck": "turbo run typecheck --filter=./packages/**",
"release": "changeset publish",
"clean": "pnpm -r --parallel exec rimraf dist .turbo node_modules"
},
@@ -35,8 +35,9 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^3.0.2",
"rollup": "^3.23.0",
"turbo": "^1.10.0",
"rollup": "^4.18.0",
"turbo": "^2.0.3",
"typescript": "5.1.3"
}
},
"packageManager": "pnpm@9.2.0"
}
packages/react/CHANGELOG.md
+7
View File
@@ -1,5 +1,12 @@
# @xyflow/react
## 12.0.0-next.22
- ⚠️ rename `updateEdge` to `reconnectEdge` and realted APIs [#4373](https://github.com/xyflow/xyflow/pull/4373)
- revise selection usability (capture while dragging out of the flow)
- use correct end handle position when drawing a connection lines
- determine correct end positions for connection lines
## 12.0.0-next.21
- fix node origin bug
packages/react/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@xyflow/react",
"version": "12.0.0-next.21",
"version": "12.0.0-next.22",
"description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
"keywords": [
"react",
packages/react/src/components/ConnectionLine/index.tsx
+5 -2
View File
@@ -39,7 +39,7 @@ const ConnectionLine = ({
CustomComponent,
connectionStatus,
}: ConnectionLineProps) => {
const { fromNode, handleId, toX, toY, connectionMode } = useStore(
const { fromNode, handleId, toX, toY, connectionMode, endPosition, isValid } = useStore(
useCallback(
(s: ReactFlowStore) => ({
fromNode: s.nodeLookup.get(nodeId),
@@ -47,11 +47,14 @@ const ConnectionLine = ({
toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
connectionMode: s.connectionMode,
endPosition: s.connectionEndHandle?.position,
isValid: s.connectionStatus === 'valid',
}),
[nodeId]
),
shallow
);
const fromHandleBounds = fromNode?.internals.handleBounds;
let handleBounds = fromHandleBounds?.[handleType];
@@ -69,7 +72,7 @@ const ConnectionLine = ({
const fromX = fromNode.internals.positionAbsolute.x + fromHandleX;
const fromY = fromNode.internals.positionAbsolute.y + fromHandleY;
const fromPosition = fromHandle?.position;
const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
const toPosition = isValid && endPosition ? endPosition : fromPosition ? oppositePosition[fromPosition] : null;
if (!fromPosition || !toPosition) {
return null;
packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx
+34 -34
View File
@@ -1,4 +1,4 @@
// Updatable edges have a anchors around their handles to update the edge.
// Reconnectable edges have a anchors around their handles to reconnect the edge.
import { XYHandle, type Connection, EdgePosition } from '@xyflow/system';
import { EdgeAnchor } from '../Edges/EdgeAnchor';
@@ -7,20 +7,20 @@ import { useStoreApi } from '../../hooks/useStore';
type EdgeUpdateAnchorsProps<EdgeType extends Edge = Edge> = {
edge: EdgeType;
isUpdatable: boolean | 'source' | 'target';
edgeUpdaterRadius: EdgeWrapperProps['edgeUpdaterRadius'];
isReconnectable: boolean | 'source' | 'target';
reconnectRadius: EdgeWrapperProps['reconnectRadius'];
sourceHandleId: Edge['sourceHandle'];
targetHandleId: Edge['targetHandle'];
onEdgeUpdate: EdgeWrapperProps<EdgeType>['onEdgeUpdate'];
onEdgeUpdateStart: EdgeWrapperProps<EdgeType>['onEdgeUpdateStart'];
onEdgeUpdateEnd: EdgeWrapperProps<EdgeType>['onEdgeUpdateEnd'];
onReconnect: EdgeWrapperProps<EdgeType>['onReconnect'];
onReconnectStart: EdgeWrapperProps<EdgeType>['onReconnectStart'];
onReconnectEnd: EdgeWrapperProps<EdgeType>['onReconnectEnd'];
setUpdateHover: (hover: boolean) => void;
setUpdating: (updating: boolean) => void;
setReconnecting: (updating: boolean) => void;
} & EdgePosition;
export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
isUpdatable,
edgeUpdaterRadius,
isReconnectable,
reconnectRadius,
edge,
targetHandleId,
sourceHandleId,
@@ -30,10 +30,10 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
targetY,
sourcePosition,
targetPosition,
onEdgeUpdate,
onEdgeUpdateStart,
onEdgeUpdateEnd,
setUpdating,
onReconnect,
onReconnectStart,
onReconnectEnd,
setReconnecting,
setUpdateHover,
}: EdgeUpdateAnchorsProps<EdgeType>) {
const store = useStoreApi();
@@ -65,15 +65,15 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
const isTarget = isSourceHandle;
setUpdating(true);
onEdgeUpdateStart?.(event, edge, handleType);
setReconnecting(true);
onReconnectStart?.(event, edge, handleType);
const _onEdgeUpdateEnd = (evt: MouseEvent | TouchEvent) => {
setUpdating(false);
onEdgeUpdateEnd?.(evt, edge, handleType);
const _onReconnectEnd = (evt: MouseEvent | TouchEvent) => {
setReconnecting(false);
onReconnectEnd?.(evt, edge, handleType);
};
const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection);
const onConnectEdge = (connection: Connection) => onReconnect?.(edge, connection);
XYHandle.onPointerDown(event.nativeEvent, {
autoPanOnConnect,
@@ -93,43 +93,43 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
onConnect: onConnectEdge,
onConnectStart,
onConnectEnd,
onEdgeUpdateEnd: _onEdgeUpdateEnd,
onReconnectEnd: _onReconnectEnd,
updateConnection,
getTransform: () => store.getState().transform,
getConnectionStartHandle: () => store.getState().connectionStartHandle,
});
};
const onEdgeUpdaterSourceMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
const onReconnectSourceMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
handleEdgeUpdater(event, true);
const onEdgeUpdaterTargetMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
const onReconnectTargetMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
handleEdgeUpdater(event, false);
const onEdgeUpdaterMouseEnter = () => setUpdateHover(true);
const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
const onReconnectMouseEnter = () => setUpdateHover(true);
const onReconnectMouseOut = () => setUpdateHover(false);
return (
<>
{(isUpdatable === 'source' || isUpdatable === true) && (
{(isReconnectable === 'source' || isReconnectable === true) && (
<EdgeAnchor
position={sourcePosition}
centerX={sourceX}
centerY={sourceY}
radius={edgeUpdaterRadius}
onMouseDown={onEdgeUpdaterSourceMouseDown}
onMouseEnter={onEdgeUpdaterMouseEnter}
onMouseOut={onEdgeUpdaterMouseOut}
radius={reconnectRadius}
onMouseDown={onReconnectSourceMouseDown}
onMouseEnter={onReconnectMouseEnter}
onMouseOut={onReconnectMouseOut}
type="source"
/>
)}
{(isUpdatable === 'target' || isUpdatable === true) && (
{(isReconnectable === 'target' || isReconnectable === true) && (
<EdgeAnchor
position={targetPosition}
centerX={targetX}
centerY={targetY}
radius={edgeUpdaterRadius}
onMouseDown={onEdgeUpdaterTargetMouseDown}
onMouseEnter={onEdgeUpdaterMouseEnter}
onMouseOut={onEdgeUpdaterMouseOut}
radius={reconnectRadius}
onMouseDown={onReconnectTargetMouseDown}
onMouseEnter={onReconnectMouseEnter}
onMouseOut={onReconnectMouseOut}
type="target"
/>
)}
packages/react/src/components/EdgeWrapper/index.tsx
+17 -17
View File
@@ -18,7 +18,7 @@ import type { Edge, EdgeWrapperProps } from '../../types';
export function EdgeWrapper<EdgeType extends Edge = Edge>({
id,
edgesFocusable,
edgesUpdatable,
edgesReconnectable,
elementsSelectable,
onClick,
onDoubleClick,
@@ -26,10 +26,10 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
onMouseEnter,
onMouseMove,
onMouseLeave,
edgeUpdaterRadius,
onEdgeUpdate,
onEdgeUpdateStart,
onEdgeUpdateEnd,
reconnectRadius,
onReconnect,
onReconnectStart,
onReconnectEnd,
rfId,
edgeTypes,
noPanClassName,
@@ -50,14 +50,14 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
}
const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
const isUpdatable =
typeof onEdgeUpdate !== 'undefined' &&
(edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
const isReconnectable =
typeof onReconnect !== 'undefined' &&
(edge.reconnectable || (edgesReconnectable && typeof edge.reconnectable === 'undefined'));
const isSelectable = !!(edge.selectable || (elementsSelectable && typeof edge.selectable === 'undefined'));
const edgeRef = useRef<SVGGElement>(null);
const [updateHover, setUpdateHover] = useState<boolean>(false);
const [updating, setUpdating] = useState<boolean>(false);
const [reconnecting, setReconnecting] = useState<boolean>(false);
const store = useStoreApi();
const { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore(
@@ -207,7 +207,7 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined}
ref={edgeRef}
>
{!updating && (
{!reconnecting && (
<EdgeComponent
id={id}
source={edge.source}
@@ -239,14 +239,14 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
interactionWidth={edge.interactionWidth}
/>
)}
{isUpdatable && (
{isReconnectable && (
<EdgeUpdateAnchors<EdgeType>
edge={edge}
isUpdatable={isUpdatable}
edgeUpdaterRadius={edgeUpdaterRadius}
onEdgeUpdate={onEdgeUpdate}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
isReconnectable={isReconnectable}
reconnectRadius={reconnectRadius}
onReconnect={onReconnect}
onReconnectStart={onReconnectStart}
onReconnectEnd={onReconnectEnd}
sourceX={sourceX}
sourceY={sourceY}
targetX={targetX}
@@ -254,7 +254,7 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
sourcePosition={sourcePosition}
targetPosition={targetPosition}
setUpdateHover={setUpdateHover}
setUpdating={setUpdating}
setReconnecting={setReconnecting}
sourceHandleId={edge.sourceHandle}
targetHandleId={edge.targetHandle}
/>
packages/react/src/components/StoreUpdater/index.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ const reactFlowFieldsToTrack = [
'nodesConnectable',
'nodesFocusable',
'edgesFocusable',
'edgesUpdatable',
'edgesReconnectable',
'elevateNodesOnSelect',
'elevateEdgesOnSelect',
'minZoom',
packages/react/src/container/EdgeRenderer/index.tsx
+15 -15
View File
@@ -14,14 +14,14 @@ type EdgeRendererProps<EdgeType extends Edge = Edge> = Pick<
| 'onEdgeDoubleClick'
| 'defaultMarkerColor'
| 'onlyRenderVisibleElements'
| 'onEdgeUpdate'
| 'onReconnect'
| 'onEdgeContextMenu'
| 'onEdgeMouseEnter'
| 'onEdgeMouseMove'
| 'onEdgeMouseLeave'
| 'onEdgeUpdateStart'
| 'onEdgeUpdateEnd'
| 'edgeUpdaterRadius'
| 'onReconnectStart'
| 'onReconnectEnd'
| 'reconnectRadius'
| 'noPanClassName'
| 'rfId'
| 'disableKeyboardA11y'
@@ -34,7 +34,7 @@ const selector = (s: ReactFlowState) => ({
width: s.width,
height: s.height,
edgesFocusable: s.edgesFocusable,
edgesUpdatable: s.edgesUpdatable,
edgesReconnectable: s.edgesReconnectable,
elementsSelectable: s.elementsSelectable,
connectionMode: s.connectionMode,
onError: s.onError,
@@ -46,19 +46,19 @@ function EdgeRendererComponent<EdgeType extends Edge = Edge>({
rfId,
edgeTypes,
noPanClassName,
onEdgeUpdate,
onReconnect,
onEdgeContextMenu,
onEdgeMouseEnter,
onEdgeMouseMove,
onEdgeMouseLeave,
onEdgeClick,
edgeUpdaterRadius,
reconnectRadius,
onEdgeDoubleClick,
onEdgeUpdateStart,
onEdgeUpdateEnd,
onReconnectStart,
onReconnectEnd,
disableKeyboardA11y,
}: EdgeRendererProps<EdgeType>) {
const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector, shallow);
const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
return (
@@ -71,19 +71,19 @@ function EdgeRendererComponent<EdgeType extends Edge = Edge>({
key={id}
id={id}
edgesFocusable={edgesFocusable}
edgesUpdatable={edgesUpdatable}
edgesReconnectable={edgesReconnectable}
elementsSelectable={elementsSelectable}
noPanClassName={noPanClassName}
onEdgeUpdate={onEdgeUpdate}
onReconnect={onReconnect}
onContextMenu={onEdgeContextMenu}
onMouseEnter={onEdgeMouseEnter}
onMouseMove={onEdgeMouseMove}
onMouseLeave={onEdgeMouseLeave}
onClick={onEdgeClick}
edgeUpdaterRadius={edgeUpdaterRadius}
reconnectRadius={reconnectRadius}
onDoubleClick={onEdgeDoubleClick}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
onReconnectStart={onReconnectStart}
onReconnectEnd={onReconnectEnd}
rfId={rfId}
onError={onError}
edgeTypes={edgeTypes}
packages/react/src/container/FlowRenderer/index.tsx
+3 -2
View File
@@ -70,8 +70,8 @@ function FlowRendererComponent<NodeType extends Node = Node>({
isControlledViewport,
}: FlowRendererProps<NodeType>) {
const { nodesSelectionActive, userSelectionActive } = useStore(selector);
const selectionKeyPressed = useKeyPress(selectionKeyCode);
const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: window });
const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: window });
const panOnDrag = panActivationKeyPressed || _panOnDrag;
const panOnScroll = panActivationKeyPressed || _panOnScroll;
@@ -113,6 +113,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
panOnDrag={panOnDrag}
isSelecting={!!isSelecting}
selectionMode={selectionMode}
selectionKeyPressed={selectionKeyPressed}
>
{children}
{nodesSelectionActive && (
packages/react/src/container/GraphView/index.tsx
+8 -8
View File
@@ -85,14 +85,14 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
onPaneMouseLeave,
onPaneScroll,
onPaneContextMenu,
onEdgeUpdate,
onEdgeContextMenu,
onEdgeMouseEnter,
onEdgeMouseMove,
onEdgeMouseLeave,
edgeUpdaterRadius,
onEdgeUpdateStart,
onEdgeUpdateEnd,
reconnectRadius,
onReconnect,
onReconnectStart,
onReconnectEnd,
noDragClassName,
noWheelClassName,
noPanClassName,
@@ -153,15 +153,15 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
edgeTypes={edgeTypes}
onEdgeClick={onEdgeClick}
onEdgeDoubleClick={onEdgeDoubleClick}
onEdgeUpdate={onEdgeUpdate}
onReconnect={onReconnect}
onReconnectStart={onReconnectStart}
onReconnectEnd={onReconnectEnd}
onlyRenderVisibleElements={onlyRenderVisibleElements}
onEdgeContextMenu={onEdgeContextMenu}
onEdgeMouseEnter={onEdgeMouseEnter}
onEdgeMouseMove={onEdgeMouseMove}
onEdgeMouseLeave={onEdgeMouseLeave}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
edgeUpdaterRadius={edgeUpdaterRadius}
reconnectRadius={reconnectRadius}
defaultMarkerColor={defaultMarkerColor}
noPanClassName={noPanClassName}
disableKeyboardA11y={disableKeyboardA11y}
packages/react/src/container/Pane/index.tsx
+35 -19
View File
@@ -2,7 +2,12 @@
* The user selection rectangle gets displayed when a user drags the mouse while pressing shift
*/
import { useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
import {
useRef,
type MouseEvent as ReactMouseEvent,
type PointerEvent as ReactPointerEvent,
type ReactNode,
} from 'react';
import { shallow } from 'zustand/shallow';
import cc from 'classcat';
import { getNodesInside, getEventPosition, SelectionMode, type NodeChange, type EdgeChange } from '@xyflow/system';
@@ -15,6 +20,7 @@ import type { ReactFlowProps, ReactFlowState } from '../../types';
type PaneProps = {
isSelecting: boolean;
selectionKeyPressed: boolean;
children: ReactNode;
} & Partial<
Pick<
@@ -52,6 +58,7 @@ const selector = (s: ReactFlowState) => ({
export function Pane({
isSelecting,
selectionKeyPressed,
selectionMode = SelectionMode.Full,
panOnDrag,
onSelectionStart,
@@ -72,6 +79,10 @@ export function Pane({
const edgeIdLookup = useRef<Map<string, Set<string>>>(new Map());
const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow);
const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
// Used to prevent click events when the user lets go of the selectionKey during a selection
const selectionInProgress = useRef<boolean>(false);
const resetUserSelection = () => {
store.setState({ userSelectionActive: false, userSelectionRect: null });
@@ -81,6 +92,12 @@ export function Pane({
};
const onClick = (event: ReactMouseEvent) => {
// We prevent click events when the user let go of the selectionKey during a selection
if (selectionInProgress.current) {
selectionInProgress.current = false;
return;
}
onPaneClick?.(event);
store.getState().resetSelectedElements();
store.setState({ nodesSelectionActive: false });
@@ -97,9 +114,10 @@ export function Pane({
const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined;
const onMouseDown = (event: ReactMouseEvent): void => {
const onPointerDown = (event: ReactPointerEvent): void => {
const { resetSelectedElements, domNode, edgeLookup } = store.getState();
containerBounds.current = domNode?.getBoundingClientRect();
container.current?.setPointerCapture(event.pointerId);
if (
!elementsSelectable ||
@@ -136,14 +154,16 @@ export function Pane({
onSelectionStart?.(event);
};
const onMouseMove = (event: ReactMouseEvent): void => {
const onPointerMove = (event: ReactPointerEvent): void => {
const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
store.getState();
if (!isSelecting || !containerBounds.current || !userSelectionRect) {
if (!containerBounds.current || !userSelectionRect) {
return;
}
selectionInProgress.current = true;
const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
const { startX, startY } = userSelectionRect;
@@ -199,10 +219,11 @@ export function Pane({
});
};
const onMouseUp = (event: ReactMouseEvent) => {
const onPointerUp = (event: ReactPointerEvent) => {
if (event.button !== 0) {
return;
}
container.current?.releasePointerCapture(event.pointerId);
const { userSelectionRect } = store.getState();
// We only want to trigger click functions when in selection mode if
// the user did not move the mouse.
@@ -214,30 +235,25 @@ export function Pane({
resetUserSelection();
onSelectionEnd?.(event);
};
const onMouseLeave = (event: ReactMouseEvent) => {
if (userSelectionActive) {
store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 });
onSelectionEnd?.(event);
// If the user kept holding the selectionKey during the selection,
// we need to reset the selectionInProgress, so the next click event is not prevented
if (selectionKeyPressed) {
selectionInProgress.current = false;
}
resetUserSelection();
};
const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
return (
<div
className={cc(['react-flow__pane', { draggable: panOnDrag, dragging, selection: isSelecting }])}
onClick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
onContextMenu={wrapHandler(onContextMenu, container)}
onWheel={wrapHandler(onWheel, container)}
onMouseEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
onMouseDown={hasActiveSelection ? onMouseDown : undefined}
onMouseMove={hasActiveSelection ? onMouseMove : onPaneMouseMove}
onMouseUp={hasActiveSelection ? onMouseUp : undefined}
onMouseLeave={hasActiveSelection ? onMouseLeave : onPaneMouseLeave}
onPointerEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
onPointerDown={hasActiveSelection ? onPointerDown : onPaneMouseMove}
onPointerMove={hasActiveSelection ? onPointerMove : onPaneMouseMove}
onPointerUp={hasActiveSelection ? onPointerUp : undefined}
onPointerLeave={onPaneMouseLeave}
ref={container}
style={containerStyle}
>
packages/react/src/container/ReactFlow/index.tsx
+10 -10
View File
@@ -81,7 +81,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
nodesFocusable,
nodeOrigin = defaultNodeOrigin,
edgesFocusable,
edgesUpdatable,
edgesReconnectable,
elementsSelectable = true,
defaultViewport = initViewport,
minZoom = 0.5,
@@ -104,15 +104,15 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
onPaneScroll,
onPaneContextMenu,
children,
onEdgeUpdate,
onReconnect,
onReconnectStart,
onReconnectEnd,
onEdgeContextMenu,
onEdgeDoubleClick,
onEdgeMouseEnter,
onEdgeMouseMove,
onEdgeMouseLeave,
onEdgeUpdateStart,
onEdgeUpdateEnd,
edgeUpdaterRadius = 10,
reconnectRadius = 10,
onNodesChange,
onEdgesChange,
noDragClassName = 'nodrag',
@@ -202,15 +202,15 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
onSelectionContextMenu={onSelectionContextMenu}
onSelectionStart={onSelectionStart}
onSelectionEnd={onSelectionEnd}
onEdgeUpdate={onEdgeUpdate}
onReconnect={onReconnect}
onReconnectStart={onReconnectStart}
onReconnectEnd={onReconnectEnd}
onEdgeContextMenu={onEdgeContextMenu}
onEdgeDoubleClick={onEdgeDoubleClick}
onEdgeMouseEnter={onEdgeMouseEnter}
onEdgeMouseMove={onEdgeMouseMove}
onEdgeMouseLeave={onEdgeMouseLeave}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
edgeUpdaterRadius={edgeUpdaterRadius}
reconnectRadius={reconnectRadius}
defaultMarkerColor={defaultMarkerColor}
noDragClassName={noDragClassName}
noWheelClassName={noWheelClassName}
@@ -236,7 +236,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
nodesConnectable={nodesConnectable}
nodesFocusable={nodesFocusable}
edgesFocusable={edgesFocusable}
edgesUpdatable={edgesUpdatable}
edgesReconnectable={edgesReconnectable}
elementsSelectable={elementsSelectable}
elevateNodesOnSelect={elevateNodesOnSelect}
elevateEdgesOnSelect={elevateEdgesOnSelect}
packages/react/src/hooks/useGlobalKeyHandler.ts
+1 -1
View File
@@ -26,7 +26,7 @@ export function useGlobalKeyHandler({
const { deleteElements } = useReactFlow();
const deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions);
const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, { target: window });
useEffect(() => {
if (deleteKeyPressed) {
packages/react/src/index.ts
+1 -1
View File
@@ -116,6 +116,6 @@ export {
getIncomers,
getOutgoers,
addEdge,
updateEdge,
reconnectEdge,
getConnectedEdges,
} from '@xyflow/system';
packages/react/src/store/initialState.ts
+1 -1
View File
@@ -92,7 +92,7 @@ const getInitialState = ({
nodesConnectable: true,
nodesFocusable: true,
edgesFocusable: true,
edgesUpdatable: true,
edgesReconnectable: true,
elementsSelectable: true,
elevateNodesOnSelect: true,
elevateEdgesOnSelect: false,
packages/react/src/types/component-props.ts
+6 -6
View File
@@ -29,7 +29,7 @@ import type {
Node,
Edge,
ConnectionLineComponent,
OnEdgeUpdateFunc,
OnReconnect,
OnInit,
DefaultEdgeOptions,
FitViewOptions,
@@ -129,9 +129,9 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
onEdgeMouseLeave?: EdgeMouseHandler<EdgeType>;
/** This event handler is called when a user double clicks on an edge */
onEdgeDoubleClick?: EdgeMouseHandler<EdgeType>;
onEdgeUpdateStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
onEdgeUpdate?: OnEdgeUpdateFunc<EdgeType>;
onReconnect?: OnReconnect<EdgeType>;
onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
/** This event handler is called when a Node is updated
* @example // Use NodesState hook to create edges and get onNodesChange handler
* import ReactFlow, { useNodesState } from '@xyflow/react';
@@ -330,7 +330,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
/** Controls if all edges should be updateable
* @default true
*/
edgesUpdatable?: boolean;
edgesReconnectable?: boolean;
/** Controls if all elements should (nodes & edges) be selectable
* @default true
*/
@@ -413,7 +413,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
panOnScrollMode?: PanOnScrollMode;
/** Controls if the viewport should zoom by double clicking somewhere on the flow */
zoomOnDoubleClick?: boolean;
edgeUpdaterRadius?: number;
reconnectRadius?: number;
noDragClassName?: string;
noWheelClassName?: string;
noPanClassName?: string;
packages/react/src/types/edges.ts
+7 -9
View File
@@ -28,8 +28,6 @@ export type EdgeLabelOptions = {
labelBgBorderRadius?: number;
};
export type EdgeUpdatable = boolean | HandleType;
/**
* The Edge type is mainly used for the `edges` that get passed to the ReactFlow component
* @public
@@ -41,7 +39,7 @@ export type Edge<
EdgeLabelOptions & {
style?: CSSProperties;
className?: string;
updatable?: EdgeUpdatable;
reconnectable?: boolean | HandleType;
focusable?: boolean;
};
@@ -69,19 +67,19 @@ export type EdgeMouseHandler<EdgeType extends Edge = Edge> = (event: ReactMouseE
export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
id: string;
edgesFocusable: boolean;
edgesUpdatable: boolean;
edgesReconnectable: boolean;
elementsSelectable: boolean;
noPanClassName: string;
onClick?: EdgeMouseHandler<EdgeType>;
onDoubleClick?: EdgeMouseHandler<EdgeType>;
onEdgeUpdate?: OnEdgeUpdateFunc<EdgeType>;
onReconnect?: OnReconnect<EdgeType>;
onContextMenu?: EdgeMouseHandler<EdgeType>;
onMouseEnter?: EdgeMouseHandler<EdgeType>;
onMouseMove?: EdgeMouseHandler<EdgeType>;
onMouseLeave?: EdgeMouseHandler<EdgeType>;
edgeUpdaterRadius?: number;
onEdgeUpdateStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
reconnectRadius?: number;
onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
rfId?: string;
edgeTypes?: EdgeTypes;
onError?: OnError;
@@ -191,7 +189,7 @@ export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'tar
*/
export type SimpleBezierEdgeProps = EdgeComponentProps;
export type OnEdgeUpdateFunc<EdgeType extends Edge = Edge> = (oldEdge: EdgeType, newConnection: Connection) => void;
export type OnReconnect<EdgeType extends Edge = Edge> = (oldEdge: EdgeType, newConnection: Connection) => void;
export type ConnectionLineComponentProps = {
connectionLineStyle?: CSSProperties;
packages/react/src/types/store.ts
+1 -1
View File
@@ -89,7 +89,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
nodesConnectable: boolean;
nodesFocusable: boolean;
edgesFocusable: boolean;
edgesUpdatable: boolean;
edgesReconnectable: boolean;
elementsSelectable: boolean;
elevateNodesOnSelect: boolean;
elevateEdgesOnSelect: boolean;
packages/svelte/CHANGELOG.md
+11 -4
View File
@@ -1,5 +1,12 @@
# @xyflow/svelte
## 0.1.7
- revise selection usability (capture while dragging out of the flow)
- only prevent shift scrolling when selection is actually in progress
- use correct end handle position when drawing a connection lines
- determine correct end positions for connection lines
## 0.1.6
- fix node origin bug
@@ -18,7 +25,7 @@
- add `on:edgemouseenter` and `on:edgemouseleave` event handler
- fix deselection of edges
- remove pointer events from panel when user selection is active
- fix viewport initialization with user viewport
- fix viewport initialization with user viewport
- fix parent node lookup in `evaluateAbsolutePosition`- thanks @lcsfort
## 0.1.3
@@ -42,16 +49,16 @@ This is a bigger update for Svelte Flow to keep up with the latest changes we ma
- rename `node.computed` to `node.measured` - this attribute only includes `width` and `height` and no `positionAbsolute` anymore. For this we added the helpers `getInternalNode` and `useInternalNode`
- rename `node.parentNode` to `node.parentId`
### More updates:
### More updates:
- add `isValidConnection` for `<Handle />` component
- add `fitViewOptions` for `<Controls />` component
- add `getInternalNode` to `useSvelteFlow`
- add `useInternalNode` hook
- don't reset nodes and edges when svelte flow unmounts - thanks @darabos
- don't reset nodes and edges when svelte flow unmounts - thanks @darabos
- fix node event types - thanks @RedPhoenixQ
- make handleId and isTarget reactive - thanks @darabos
- fix MiniMap interaction for touch devices
- fix MiniMap interaction for touch devices
- fix pane: pinch zoom on windows
- fix nodes: return user node in node event handlers
packages/svelte/package.json
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@xyflow/svelte",
"version": "0.1.6",
"version": "0.1.7",
"description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
"keywords": [
"svelte",
@@ -18,8 +18,8 @@
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config --dir dist",
"css-watch": "pnpm css --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write .",
"lint": "prettier --check . && eslint ./src",
"format": "prettier --write .",
"typecheck": "pnpm check"
},
"type": "module",
packages/svelte/src/lib/components/nodes/GroupNode.svelte
+1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import type { NodeProps } from '$lib/types';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface $$Props extends NodeProps {}
// this is a workaround for suppressing the warning about unused props
packages/svelte/src/lib/container/Pane/Pane.svelte
+28 -18
View File
@@ -75,15 +75,24 @@
$selectionKeyPressed || $selectionRect || (selectionOnDrag && _panOnDrag !== true);
$: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
function onClick(event: MouseEvent | TouchEvent) {
dispatch('paneclick', { event });
// Used to prevent click events when the user lets go of the selectionKey during a selection
let selectionInProgress = false;
function onClick(event: MouseEvent | TouchEvent) {
// We prevent click events when the user let go of the selectionKey during a selection
if (selectionInProgress) {
selectionInProgress = false;
return;
}
dispatch('paneclick', { event });
unselectNodesAndEdges();
selectionRectMode.set(null);
}
function onMouseDown(event: MouseEvent) {
function onPointerDown(event: PointerEvent) {
containerBounds = container.getBoundingClientRect();
container.setPointerCapture(event.pointerId);
if (
!elementsSelectable ||
@@ -111,10 +120,13 @@
// onSelectionStart?.(event);
}
function onMouseMove(event: MouseEvent) {
function onPointerMove(event: PointerEvent) {
if (!isSelecting || !containerBounds || !$selectionRect) {
return;
}
selectionInProgress = true;
const mousePos = getEventPosition(event, containerBounds);
const startX = $selectionRect.startX ?? 0;
const startY = $selectionRect.startY ?? 0;
@@ -157,11 +169,13 @@
selectionRect.set(nextUserSelectRect);
}
function onMouseUp(event: MouseEvent) {
function onPointerUp(event: PointerEvent) {
if (event.button !== 0) {
return;
}
container.releasePointerCapture(event.pointerId);
// We only want to trigger click functions when in selection mode if
// the user did not move the mouse.
if (!isSelecting && $selectionRectMode === 'user' && event.target === container) {
@@ -173,17 +187,14 @@
$selectionRectMode = 'nodes';
}
// onSelectionEnd?.(event);
}
const onMouseLeave = () => {
if ($selectionRectMode === 'user') {
selectionRectMode.set(selectedNodes.length > 0 ? 'nodes' : null);
// onSelectionEnd?.(event);
// If the user kept holding the selectionKey during the selection,
// we need to reset the selectionInProgress, so the next click event is not prevented
if ($selectionKeyPressed) {
selectionInProgress = false;
}
selectionRect.set(null);
};
// onSelectionEnd?.(event);
}
const onContextMenu = (event: MouseEvent) => {
if (Array.isArray(_panOnDrag) && _panOnDrag?.includes(2)) {
@@ -204,10 +215,9 @@
class:dragging={$dragging}
class:selection={isSelecting}
on:click={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
on:mousedown={hasActiveSelection ? onMouseDown : undefined}
on:mousemove={hasActiveSelection ? onMouseMove : undefined}
on:mouseup={hasActiveSelection ? onMouseUp : undefined}
on:mouseleave={hasActiveSelection ? onMouseLeave : undefined}
on:pointerdown={hasActiveSelection ? onPointerDown : undefined}
on:pointermove={hasActiveSelection ? onPointerMove : undefined}
on:pointerup={hasActiveSelection ? onPointerUp : undefined}
on:contextmenu={wrapHandler(onContextMenu, container)}
>
<slot />
packages/svelte/src/lib/container/Zoom/Zoom.svelte
+2 -2
View File
@@ -23,7 +23,7 @@
const {
viewport,
panZoom,
selectionKeyPressed,
selectionRect,
minZoom,
maxZoom,
dragging,
@@ -66,7 +66,7 @@
preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
noPanClassName: 'nopan',
noWheelClassName: 'nowheel',
userSelectionActive: $selectionKeyPressed,
userSelectionActive: !!$selectionRect,
translateExtent: $translateExtent,
lib: $lib
}}
packages/svelte/src/lib/index.ts
+1 -2
View File
@@ -124,6 +124,5 @@ export {
getIncomers,
getOutgoers,
getConnectedEdges,
addEdge,
updateEdge
addEdge
} from '@xyflow/system';
packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { getContext } from 'svelte';
import { getNodesBounds, Position, type Rect, getNodeToolbarTransform } from '@xyflow/system';
import { getNodesBounds, Position, getNodeToolbarTransform } from '@xyflow/system';
import portal from '$lib/actions/portal';
import type { InternalNode } from '$lib/types';
import { useStore } from '$lib/store';
packages/svelte/src/lib/store/derived-connection-props.ts
+3 -1
View File
@@ -88,7 +88,9 @@ export function getDerivedConnectionProps(
const fromX = (fromNode?.internals.positionAbsolute.x ?? 0) + fromHandleX;
const fromY = (fromNode?.internals.positionAbsolute.y ?? 0) + fromHandleY;
const fromPosition = fromHandle?.position;
const toPosition = fromPosition ? oppositePosition[fromPosition] : undefined;
const toPosition =
connection.connectionEndHandle?.position ??
(fromPosition ? oppositePosition[fromPosition] : undefined);
const pathParams = {
sourceX: fromX,
packages/system/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@xyflow/system",
"version": "0.0.29",
"version": "0.0.30",
"description": "xyflow core system that powers React Flow and Svelte Flow.",
"keywords": [
"node-based UI",
packages/system/src/types/handles.ts
+1
View File
@@ -16,6 +16,7 @@ export type ConnectingHandle = {
nodeId: string;
type: HandleType;
handleId?: string | null;
position?: Position | null;
};
export type ConnectionHandle = {
packages/system/src/utils/edges/general.ts
+4 -4
View File
@@ -132,23 +132,23 @@ export const addEdge = <EdgeType extends EdgeBase>(
return edges.concat(edge);
};
export type UpdateEdgeOptions = {
export type ReconnectEdgeOptions = {
shouldReplaceId?: boolean;
};
/**
* A handy utility to update an existing Edge with new properties
* A handy utility to reconnect an existing edge with new properties
* @param oldEdge - The edge you want to update
* @param newConnection - The new connection you want to update the edge with
* @param edges - The array of all current edges
* @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
* @returns the updated edges array
*/
export const updateEdge = <EdgeType extends EdgeBase>(
export const reconnectEdge = <EdgeType extends EdgeBase>(
oldEdge: EdgeType,
newConnection: Connection,
edges: EdgeType[],
options: UpdateEdgeOptions = { shouldReplaceId: true }
options: ReconnectEdgeOptions = { shouldReplaceId: true }
): EdgeType[] => {
const { id: oldEdgeId, ...rest } = oldEdge;
packages/system/src/utils/edges/positions.ts
+10 -5
View File
@@ -42,8 +42,6 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
: (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []),
params.targetHandle
);
const sourcePosition = sourceHandle?.position || Position.Bottom;
const targetPosition = targetHandle?.position || Position.Top;
if (!sourceHandle || !targetHandle) {
params.onError?.(
@@ -58,8 +56,10 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
return null;
}
const [sourceX, sourceY] = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
const [targetX, targetY] = getHandlePosition(targetPosition, targetNode, targetHandle);
const sourcePosition = sourceHandle?.position || Position.Bottom;
const targetPosition = targetHandle?.position || Position.Top;
const [sourceX, sourceY] = getHandlePosition(sourceNode, sourceHandle, sourcePosition);
const [targetX, targetY] = getHandlePosition(targetNode, targetHandle, targetPosition);
return {
sourceX,
@@ -96,10 +96,15 @@ function toHandleBounds(handles?: NodeHandle[]) {
};
}
function getHandlePosition(position: Position, node: InternalNodeBase, handle: HandleElement | null = null): number[] {
export function getHandlePosition(
node: InternalNodeBase,
handle: HandleElement | null,
fallbackPosition: Position = Position.Left
): number[] {
const x = (handle?.x ?? 0) + node.internals.positionAbsolute.x;
const y = (handle?.y ?? 0) + node.internals.positionAbsolute.y;
const { width, height } = handle ?? getNodeDimensions(node);
const position = handle?.position ?? fallbackPosition;
switch (position) {
case Position.Top:
packages/system/src/xyhandle/XYHandle.ts
+12 -12
View File
@@ -13,6 +13,7 @@ import {
type IsValidConnection,
type ConnectionHandle,
NodeLookup,
Position,
} from '../types';
import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType } from './utils';
@@ -36,7 +37,7 @@ export type OnPointerDownParams = {
onConnect?: OnConnect;
onConnectEnd?: OnConnectEnd;
isValidConnection?: IsValidConnection;
onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
onReconnectEnd?: (evt: MouseEvent | TouchEvent) => void;
getTransform: () => Transform;
getConnectionStartHandle: () => ConnectingHandle | null;
};
@@ -89,7 +90,7 @@ function onPointerDown(
onConnect,
onConnectEnd,
isValidConnection = alwaysValid,
onEdgeUpdateEnd,
onReconnectEnd,
updateConnection,
getTransform,
getConnectionStartHandle,
@@ -138,12 +139,12 @@ function onPointerDown(
nodeId,
handleId,
type: handleType,
position: (clickedHandle?.getAttribute('data-handlepos') as Position) || Position.Top,
};
updateConnection({
connectionPosition,
connectionStatus: null,
// connectionNodeId etc will be removed in the next major in favor of connectionStartHandle
connectionStartHandle,
connectionEndHandle: null,
});
@@ -211,7 +212,7 @@ function onPointerDown(
onConnectEnd?.(event);
if (edgeUpdaterType) {
onEdgeUpdateEnd?.(event);
onReconnectEnd?.(event);
}
cancelConnection();
@@ -297,15 +298,14 @@ function isValidHandle(
? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
: handleNodeId !== fromNodeId || handleId !== fromHandleId);
if (isValid) {
result.endHandle = {
nodeId: handleNodeId as string,
handleId,
type: handleType as HandleType,
};
result.isValid = isValid && isValidConnection(connection);
result.isValid = isValidConnection(connection);
}
result.endHandle = {
nodeId: handleNodeId as string,
handleId,
type: handleType as HandleType,
position: handleToCheck.getAttribute('data-handlepos') as Position,
};
}
return result;
packages/system/src/xyhandle/utils.ts
+7 -5
View File
@@ -1,3 +1,4 @@
import { getHandlePosition } from '../utils';
import {
ConnectionStatus,
type HandleType,
@@ -16,14 +17,15 @@ export function getHandles(
type: HandleType,
currentHandle: string
): ConnectionHandle[] {
return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
if (`${node.id}-${h.id}-${type}` !== currentHandle) {
return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, handle) => {
if (`${node.id}-${handle.id}-${type}` !== currentHandle) {
const [x, y] = getHandlePosition(node, handle);
res.push({
id: h.id || null,
id: handle.id || null,
type,
nodeId: node.id,
x: node.internals.positionAbsolute.x + h.x + h.width / 2,
y: node.internals.positionAbsolute.y + h.y + h.height / 2,
x,
y,
});
}
return res;
packages/system/src/xyminimap/index.ts
+5
View File
@@ -38,6 +38,7 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
zoomable = true,
inversePan = false,
}: XYMinimapUpdate) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const zoomHandler = (event: D3ZoomEvent<SVGSVGElement, any>) => {
const transform = getTransform();
@@ -55,6 +56,7 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
};
let panStart = [0, 0];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const panStartHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (event.sourceEvent.type === 'mousedown' || event.sourceEvent.type === 'touchstart') {
panStart = [
@@ -64,6 +66,7 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
}
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
const transform = getTransform();
@@ -101,8 +104,10 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
const zoomAndPanHandler = zoom()
.on('start', panStartHandler)
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
.on('zoom', pannable ? panHandler : null)
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
.on('zoom.wheel', zoomable ? zoomHandler : null);
pnpm-lock.yaml
Generated
+316 -225
View File
File diff suppressed because it is too large Load Diff
tests/playwright/e2e/node-toolbar.spec.ts
+4 -3
View File
@@ -32,14 +32,14 @@ test.describe('Node Toolbar', async () => {
});
test('all toolbars are positioned correctly', async ({ page }) => {
permutations.forEach(async (permutation) => {
const tests = permutations.map((permutation) => async () => {
const toolbar = page
.locator(`[data-id="${permutation.id}"]`)
.and(page.locator(`.${FRAMEWORK}-flow__node-toolbar`));
const node = page.locator(`[data-id="${permutation.id}"]`).and(page.locator(`.${FRAMEWORK}-flow__node`));
await expect(toolbar).toBeAttached();
await expect(node).toBeAttached();
await expect(toolbar).toBeAttached({ timeout: 5000 });
await expect(node).toBeAttached({ timeout: 5000 });
const toolbarBox = await toolbar.boundingBox();
const nodeBox = await node.boundingBox();
@@ -78,6 +78,7 @@ test.describe('Node Toolbar', async () => {
break;
}
});
await Promise.all(tests.map((t) => t()));
});
test('toolbar default behaviour', async ({ page }) => {
tests/playwright/package-lock.json
Generated
+622 -372
View File
File diff suppressed because it is too large Load Diff
tests/playwright/package.json
+8 -8
View File
@@ -13,15 +13,15 @@
"author": "",
"license": "ISC",
"devDependencies": {
"@playwright/test": "^1.42.1",
"@types/node": "^18.7.16"
"@playwright/test": "^1.44.1",
"@types/node": "^20.14.6"
},
"dependencies": {
"@playwright/experimental-ct-react": "^1.42.1",
"@types/react": "^18.2.31",
"@types/react-dom": "^18.2.14",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.2.2"
"@playwright/experimental-ct-react": "^1.44.1",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"typescript": "^5.4.5"
}
}
tests/playwright/playwright.shared.config.ts
+1 -1
View File
@@ -17,7 +17,7 @@ export function sharedConfigWithPort({ port, framework }: ConfigParams): Playwri
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
reporter: process.env.CI ? 'dot' : 'list',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
tooling/eslint-config/package.json
+2 -2
View File
@@ -7,7 +7,7 @@
"devDependencies": {
"eslint": "^8.22.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-turbo": "latest",
"eslint-plugin-react": "latest"
"eslint-config-turbo": "^2.0.3",
"eslint-plugin-react": "^7.33.2"
}
}
turbo.json
+3 -3
View File
@@ -1,6 +1,7 @@
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"globalEnv": ["NODE_ENV"],
"tasks": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
@@ -20,6 +21,5 @@
"dependsOn": ["^build"],
"outputs": []
}
},
"globalEnv": ["NODE_ENV"]
}
}