From 75a13e87bc99fa01936f3f3e85d85c9bcda1148a Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 30 Jan 2023 11:39:19 +0100 Subject: [PATCH 01/38] refactor(handle): first check element below then connection radius --- examples/vite-app/src/App/index.tsx | 6 ++ .../EasyConnect/CustomConnectionLine.tsx | 19 ++++ .../src/examples/EasyConnect/CustomNode.tsx | 27 +++++ .../src/examples/EasyConnect/FloatingEdge.tsx | 26 +++++ .../src/examples/EasyConnect/index.tsx | 85 +++++++++++++++ .../src/examples/EasyConnect/style.css | 54 ++++++++++ .../src/examples/EasyConnect/utils.tsx | 102 ++++++++++++++++++ .../src/examples/Validation/index.tsx | 19 ++-- .../core/src/components/Handle/handler.ts | 2 + packages/core/src/components/Handle/index.tsx | 1 + packages/core/src/components/Handle/utils.ts | 26 +++-- 11 files changed, 348 insertions(+), 19 deletions(-) create mode 100644 examples/vite-app/src/examples/EasyConnect/CustomConnectionLine.tsx create mode 100644 examples/vite-app/src/examples/EasyConnect/CustomNode.tsx create mode 100644 examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx create mode 100644 examples/vite-app/src/examples/EasyConnect/index.tsx create mode 100644 examples/vite-app/src/examples/EasyConnect/style.css create mode 100644 examples/vite-app/src/examples/EasyConnect/utils.tsx diff --git a/examples/vite-app/src/App/index.tsx b/examples/vite-app/src/App/index.tsx index 33347757..02eaac1e 100644 --- a/examples/vite-app/src/App/index.tsx +++ b/examples/vite-app/src/App/index.tsx @@ -9,6 +9,7 @@ import CustomNode from '../examples/CustomNode'; import DefaultNodes from '../examples/DefaultNodes'; import DragHandle from '../examples/DragHandle'; import DragNDrop from '../examples/DragNDrop'; +import EasyConnect from '../examples/EasyConnect'; import Edges from '../examples/Edges'; import EdgeRenderer from '../examples/EdgeRenderer'; import EdgeTypes from '../examples/EdgeTypes'; @@ -96,6 +97,11 @@ const routes: IRoute[] = [ path: '/dragndrop', component: DragNDrop, }, + { + name: 'EasyConnect', + path: '/easy-connect', + component: EasyConnect, + }, { name: 'Edges', path: '/edges', diff --git a/examples/vite-app/src/examples/EasyConnect/CustomConnectionLine.tsx b/examples/vite-app/src/examples/EasyConnect/CustomConnectionLine.tsx new file mode 100644 index 00000000..ea671570 --- /dev/null +++ b/examples/vite-app/src/examples/EasyConnect/CustomConnectionLine.tsx @@ -0,0 +1,19 @@ +import { ConnectionLineComponentProps, getStraightPath } from 'reactflow'; + +function CustomConnectionLine({ fromX, fromY, toX, toY, connectionLineStyle }: ConnectionLineComponentProps) { + const [edgePath] = getStraightPath({ + sourceX: fromX, + sourceY: fromY, + targetX: toX, + targetY: toY, + }); + + return ( + + + + + ); +} + +export default CustomConnectionLine; diff --git a/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx b/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx new file mode 100644 index 00000000..49c1adb9 --- /dev/null +++ b/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx @@ -0,0 +1,27 @@ +import { Handle, NodeProps, Position, ReactFlowState, useStore } from 'reactflow'; + +const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionNodeId; + +export default function CustomNode({ id }: NodeProps) { + const connectionNodeId = useStore(connectionNodeIdSelector); + const isTarget = connectionNodeId && connectionNodeId !== id; + + const targetHandleStyle = { zIndex: isTarget ? 3 : 1 }; + const label = isTarget ? 'Drop here' : 'Drag to connect'; + + return ( +
+
+ + + {label} +
+
+ ); +} diff --git a/examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx b/examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx new file mode 100644 index 00000000..4b1038f0 --- /dev/null +++ b/examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx @@ -0,0 +1,26 @@ +import { useCallback } from 'react'; +import { useStore, getStraightPath, EdgeProps } from 'reactflow'; + +import { getEdgeParams } from './utils.js'; + +function FloatingEdge({ id, source, target, markerEnd, style }: EdgeProps) { + const sourceNode = useStore(useCallback((store) => store.nodeInternals.get(source), [source])); + const targetNode = useStore(useCallback((store) => store.nodeInternals.get(target), [target])); + + if (!sourceNode || !targetNode) { + return null; + } + + const { sx, sy, tx, ty } = getEdgeParams(sourceNode, targetNode); + + const [edgePath] = getStraightPath({ + sourceX: sx, + sourceY: sy, + targetX: tx, + targetY: ty, + }); + + return ; +} + +export default FloatingEdge; diff --git a/examples/vite-app/src/examples/EasyConnect/index.tsx b/examples/vite-app/src/examples/EasyConnect/index.tsx new file mode 100644 index 00000000..1e26ae3d --- /dev/null +++ b/examples/vite-app/src/examples/EasyConnect/index.tsx @@ -0,0 +1,85 @@ +import { useCallback } from 'react'; +import ReactFlow, { Node, Edge, addEdge, useNodesState, useEdgesState, MarkerType, OnConnect } from 'reactflow'; + +import CustomNode from './CustomNode'; +import FloatingEdge from './FloatingEdge'; +import CustomConnectionLine from './CustomConnectionLine'; + +import 'reactflow/dist/style.css'; +import './style.css'; + +const initialNodes: Node[] = [ + { + id: '1', + type: 'custom', + position: { x: 0, y: 0 }, + data: {}, + }, + { + id: '2', + type: 'custom', + position: { x: 250, y: 320 }, + data: {}, + }, + { + id: '3', + type: 'custom', + position: { x: 40, y: 300 }, + data: {}, + }, + { + id: '4', + type: 'custom', + position: { x: 300, y: 0 }, + data: {}, + }, +]; + +const initialEdges: Edge[] = []; + +const connectionLineStyle = { + strokeWidth: 3, + stroke: 'black', +}; + +const nodeTypes = { + custom: CustomNode, +}; + +const edgeTypes = { + floating: FloatingEdge, +}; + +const defaultEdgeOptions = { + style: { strokeWidth: 3, stroke: 'black' }, + type: 'floating', + markerEnd: { + type: MarkerType.ArrowClosed, + color: 'black', + }, +}; + +const EasyConnectExample = () => { + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + + const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]); + + return ( + + ); +}; + +export default EasyConnectExample; diff --git a/examples/vite-app/src/examples/EasyConnect/style.css b/examples/vite-app/src/examples/EasyConnect/style.css new file mode 100644 index 00000000..c2ebc0a2 --- /dev/null +++ b/examples/vite-app/src/examples/EasyConnect/style.css @@ -0,0 +1,54 @@ +.customNodeBody { + width: 150px; + height: 80px; + border: 3px solid black; + position: relative; + overflow: hidden; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; +} + +.customNode:before { + content: ''; + position: absolute; + top: -10px; + left: 50%; + height: 20px; + width: 40px; + transform: translate(-50%, 0); + background: #d6d5e6; + z-index: 1000; + line-height: 1; + border-radius: 4px; + color: #fff; + font-size: 9px; + border: 2px solid #222138; +} + +div.sourceHandle { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + border-radius: 0; + transform: none; + border: none; + opacity: 0; +} + +div.targetHandle { + width: 100%; + height: 100%; + background: blue; + position: absolute; + top: 0; + left: 0; + border-radius: 0; + transform: none; + border: none; + opacity: 0; +} diff --git a/examples/vite-app/src/examples/EasyConnect/utils.tsx b/examples/vite-app/src/examples/EasyConnect/utils.tsx new file mode 100644 index 00000000..02bf2eaf --- /dev/null +++ b/examples/vite-app/src/examples/EasyConnect/utils.tsx @@ -0,0 +1,102 @@ +import { Node, Position, MarkerType, XYPosition } from 'reactflow'; + +// this helper function returns the intersection point +// of the line between the center of the intersectionNode and the target node +function getNodeIntersection(intersectionNode: Node, targetNode: Node) { + // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a + const { + width: intersectionNodeWidth, + height: intersectionNodeHeight, + positionAbsolute: intersectionNodePosition, + } = intersectionNode; + const targetPosition = targetNode.positionAbsolute!; + + const w = intersectionNodeWidth! / 2; + const h = intersectionNodeHeight! / 2; + + const x2 = intersectionNodePosition!.x + w; + const y2 = intersectionNodePosition!.y + h; + const x1 = targetPosition.x + w; + const y1 = targetPosition.y + h; + + const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h); + const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h); + const a = 1 / (Math.abs(xx1) + Math.abs(yy1)); + const xx3 = a * xx1; + const yy3 = a * yy1; + const x = w * (xx3 + yy3) + x2; + const y = h * (-xx3 + yy3) + y2; + + return { x, y }; +} + +// returns the position (top,right,bottom or right) passed node compared to the intersection point +function getEdgePosition(node: Node, intersectionPoint: XYPosition) { + const n = { ...node.positionAbsolute, ...node }; + const nx = Math.round(n.x!); + const ny = Math.round(n.y!); + const px = Math.round(intersectionPoint.x); + const py = Math.round(intersectionPoint.y); + + if (px <= nx + 1) { + return Position.Left; + } + if (px >= nx + n.width! - 1) { + return Position.Right; + } + if (py <= ny + 1) { + return Position.Top; + } + if (py >= n.y! + n.height! - 1) { + return Position.Bottom; + } + + return Position.Top; +} + +// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge +export function getEdgeParams(source: Node, target: Node) { + const sourceIntersectionPoint = getNodeIntersection(source, target); + const targetIntersectionPoint = getNodeIntersection(target, source); + + const sourcePos = getEdgePosition(source, sourceIntersectionPoint); + const targetPos = getEdgePosition(target, targetIntersectionPoint); + + return { + sx: sourceIntersectionPoint.x, + sy: sourceIntersectionPoint.y, + tx: targetIntersectionPoint.x, + ty: targetIntersectionPoint.y, + sourcePos, + targetPos, + }; +} + +export function createNodesAndEdges() { + const nodes = []; + const edges = []; + const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; + + nodes.push({ id: 'target', data: { label: 'Target' }, position: center }); + + for (let i = 0; i < 8; i++) { + const degrees = i * (360 / 8); + const radians = degrees * (Math.PI / 180); + const x = 250 * Math.cos(radians) + center.x; + const y = 250 * Math.sin(radians) + center.y; + + nodes.push({ id: `${i}`, data: { label: 'Source' }, position: { x, y } }); + + edges.push({ + id: `edge-${i}`, + target: 'target', + source: `${i}`, + type: 'floating', + markerEnd: { + type: MarkerType.Arrow, + }, + }); + } + + return { nodes, edges }; +} diff --git a/examples/vite-app/src/examples/Validation/index.tsx b/examples/vite-app/src/examples/Validation/index.tsx index b11c1f92..1488b48c 100644 --- a/examples/vite-app/src/examples/Validation/index.tsx +++ b/examples/vite-app/src/examples/Validation/index.tsx @@ -1,16 +1,17 @@ -import React, { FC, useCallback, useState } from 'react'; +import { FC, useCallback, useState } from 'react'; import ReactFlow, { addEdge, Handle, Connection, Position, Node, - Edge, NodeProps, NodeTypes, useNodesState, useEdgesState, - OnConnectStartParams, + OnConnectStart, + OnConnectEnd, + OnConnect, } from 'reactflow'; import styles from './validation.module.css'; @@ -49,24 +50,24 @@ const ValidationFlow = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState([]); - const onConnectStart = useCallback( - (event: React.MouseEvent, params: OnConnectStartParams) => { + const onConnectStart: OnConnectStart = useCallback( + (event, params) => { console.log('on connect start', params, event, value); setValue(1); }, [value] ); - const onConnect = useCallback( - (params: Connection | Edge) => { + const onConnect: OnConnect = useCallback( + (params) => { console.log('on connect', params); setEdges((eds) => addEdge(params, eds)); }, [setEdges] ); - const onConnectEnd = useCallback( - (event: MouseEvent) => { + const onConnectEnd: OnConnectEnd = useCallback( + (event) => { console.log('on connect end', event, value); setValue(0); }, diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 180b6027..03bf698c 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -125,6 +125,7 @@ export function handlePointerDown({ } const { connection, handleDomNode, isValid } = isValidHandle( + event, prevClosestHandle, connectionMode, nodeId, @@ -148,6 +149,7 @@ export function handlePointerDown({ if (prevClosestHandle) { const { connection, isValid } = isValidHandle( + event, prevClosestHandle, connectionMode, nodeId, diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index 59d2bd7f..dab16653 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -102,6 +102,7 @@ const Handle = forwardRef( const doc = getHostForElement(event.target as HTMLElement); const { connection, isValid } = isValidHandle( + event, { nodeId, id: handleId, diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts index 439ccc7a..0b391e37 100644 --- a/packages/core/src/components/Handle/utils.ts +++ b/packages/core/src/components/Handle/utils.ts @@ -1,5 +1,7 @@ +import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react'; + import { ConnectionMode } from '../../types'; -import { internalsSymbol } from '../../utils'; +import { getEventPosition, internalsSymbol } from '../../utils'; import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types'; export type ConnectionHandle = { @@ -61,6 +63,7 @@ type Result = { // checks if and returns connection in fom of an object { source: 123, target: 312 } export function isValidHandle( + event: MouseEvent | TouchEvent | ReactMouseEvent | ReactTouchEvent, handle: Pick, connectionMode: ConnectionMode, fromNodeId: string, @@ -73,23 +76,26 @@ export function isValidHandle( const handleDomNode = doc.querySelector( `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]` ); + const { x, y } = getEventPosition(event); + const handleBelow = doc.elementFromPoint(x, y); + const handleToCheck = handleBelow?.classList.contains('react-flow__handle') ? handleBelow : handleDomNode; + const result: Result = { - handleDomNode, + handleDomNode: handleToCheck, isValid: false, connection: { source: null, target: null, sourceHandle: null, targetHandle: null }, }; - if (handleDomNode) { - const handleIsTarget = handle.type === 'target'; - const handleIsSource = handle.type === 'source'; - const handleNodeId = handleDomNode.getAttribute('data-nodeid'); - const handleId = handleDomNode.getAttribute('data-handleid'); + if (handleToCheck) { + const handleType = getHandleType(undefined, handleToCheck); + const handleNodeId = handleToCheck.getAttribute('data-nodeid'); + const handleId = handleToCheck.getAttribute('data-handleid'); const connection: Connection = { source: isTarget ? handle.nodeId : fromNodeId, - sourceHandle: isTarget ? handle.id : fromHandleId, + sourceHandle: isTarget ? handleId : fromHandleId, target: isTarget ? fromNodeId : handle.nodeId, - targetHandle: isTarget ? fromHandleId : handle.id, + targetHandle: isTarget ? fromHandleId : handleId, }; result.connection = connection; @@ -97,7 +103,7 @@ export function isValidHandle( // in strict mode we don't allow target to target or source to source connections const isValid = connectionMode === ConnectionMode.Strict - ? (isTarget && handleIsSource) || (!isTarget && handleIsTarget) + ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target') : handleNodeId !== fromNodeId || handleId !== fromHandleId; if (isValid) { From 7115353418ebc7f7c81ab0e861200972bbf7dbd5 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 30 Jan 2023 11:42:57 +0100 Subject: [PATCH 02/38] chore(changeset): add --- .changeset/shaggy-suits-watch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/shaggy-suits-watch.md diff --git a/.changeset/shaggy-suits-watch.md b/.changeset/shaggy-suits-watch.md new file mode 100644 index 00000000..2d14d801 --- /dev/null +++ b/.changeset/shaggy-suits-watch.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +connections: check handle below mouse before using connection radius From c4d0802e4cfbdab998d4749d4d7bfb18b89a9289 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 30 Jan 2023 11:53:50 +0100 Subject: [PATCH 03/38] chore(pacakges): bump --- .changeset/shaggy-suits-watch.md | 5 ----- packages/background/CHANGELOG.md | 7 +++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 7 +++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 17 ++++++++++++----- packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 7 +++++++ packages/minimap/package.json | 2 +- packages/node-toolbar/CHANGELOG.md | 7 +++++++ packages/node-toolbar/package.json | 4 ++-- packages/reactflow/CHANGELOG.md | 25 ++++++++++++++++++++----- packages/reactflow/package.json | 2 +- 13 files changed, 67 insertions(+), 22 deletions(-) delete mode 100644 .changeset/shaggy-suits-watch.md diff --git a/.changeset/shaggy-suits-watch.md b/.changeset/shaggy-suits-watch.md deleted file mode 100644 index 2d14d801..00000000 --- a/.changeset/shaggy-suits-watch.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -connections: check handle below mouse before using connection radius diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index f2393bec..cea0e140 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/background +## 11.1.4 + +### Patch Changes + +- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]: + - @reactflow/core@11.5.1 + ## 11.1.3 ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index 2865139e..159d178f 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.1.3", + "version": "11.1.4", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index 7f2d9b92..805064ca 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/controls +## 11.1.4 + +### Patch Changes + +- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]: + - @reactflow/core@11.5.1 + ## 11.1.3 ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index 7bc80d2d..ff673326 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.1.3", + "version": "11.1.4", "description": "Component to control the viewport of a React Flow instance", "keywords": [ "react", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index cd591566..c9aa9662 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,11 @@ # @reactflow/core +## 11.5.1 + +### Patch Changes + +- [#2783](https://github.com/wbkd/react-flow/pull/2783) [`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5) - connections: check handle below mouse before using connection radius + ## 11.5.0 Lot's of improvements are coming with this release! @@ -8,23 +14,24 @@ Lot's of improvements are coming with this release! - **Auto pan**: When you drag a node, a selection or the connection line to the border of the pane, it will pan into that direction. That makes it easier to connect far away nodes for example. If you don't like it you can set `autoPnaOnNodeDrag` and `autoPanOnConnect` to false. - **Touch devices**: It's finally possibleto connect nodes with the connection line on touch devices. In combination with the new auto pan and connection radius the overall UX is way better. - **Errors**: We added an `onError` prop to get notified when an error like "couldn't find source handle" happens. This is useful if you want to log errors for example. -- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param: +- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param: + ```ts -type MyCustomNode = Node +type MyCustomNode = Node; ``` + This makes it easier to work with different custom nodes and data types. ### Minor Changes -- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694) - Add auto pan for connecting and node dragging and `connectionRadius` +- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694) - Add auto pan for connecting and node dragging and `connectionRadius` - [#2773](https://github.com/wbkd/react-flow/pull/2773) - Add `onError` prop to get notified when an error happens ### Patch Changes -- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52) - Connecting nodes: Enable connections on touch devices +- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52) - Connecting nodes: Enable connections on touch devices - [#2620](https://github.com/wbkd/react-flow/pull/2620) - Thanks [RichSchulz](https://github.com/RichSchulz)! - Types: improve typing for node type - ## 11.4.2 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 8529d098..2c33c3e3 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.5.0", + "version": "11.5.1", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md index 58e60248..bb90acb4 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/minimap +## 11.3.4 + +### Patch Changes + +- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]: + - @reactflow/core@11.5.1 + ## 11.3.3 ### Patch Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index f9e8e4e7..27d0b8fc 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.3.3", + "version": "11.3.4", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md index e4abf4de..158645f0 100644 --- a/packages/node-toolbar/CHANGELOG.md +++ b/packages/node-toolbar/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/node-toolbar +## 1.1.4 + +### Patch Changes + +- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]: + - @reactflow/core@11.5.1 + ## 1.1.3 ### Patch Changes diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index 3d85c85f..4aedc34e 100644 --- a/packages/node-toolbar/package.json +++ b/packages/node-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-toolbar", - "version": "1.1.3", + "version": "1.1.4", "description": "A toolbar component for React Flow that can be attached to a node.", "keywords": [ "react", @@ -36,7 +36,7 @@ "typecheck": "tsc --noEmit" }, "dependencies": { - "@reactflow/core": "workspace:^11.3.3", + "@reactflow/core": "workspace:*", "classcat": "^5.0.3", "zustand": "^4.3.1" }, diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index b804b880..1f8112dd 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,18 @@ # reactflow +## 11.5.2 + +### Patch Changes + +- [#2783](https://github.com/wbkd/react-flow/pull/2783) [`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5) - connections: check handle below mouse before using connection radius + +- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]: + - @reactflow/core@11.5.1 + - @reactflow/background@11.1.4 + - @reactflow/controls@11.1.4 + - @reactflow/minimap@11.3.4 + - @reactflow/node-toolbar@1.1.4 + ## 11.5.1 ### Minor Changes @@ -8,26 +21,28 @@ ## 11.5.0 -Lot's of improvements are coming with this release! +Lot's of improvements are coming with this release! - **Connecting radius**: No need to drop a connection line on top of handle anymore. You only need to be close to the handle. That radius can be configured with the `connectionRadius` prop. - **Auto pan**: When you drag a node, a selection or the connection line to the border of the pane, it will pan into that direction. That makes it easier to connect far away nodes for example. If you don't like it you can set `autoPnaOnNodeDrag` and `autoPanOnConnect` to false. - **Touch devices**: It's finally possibleto connect nodes with the connection line on touch devices. In combination with the new auto pan and connection radius the overall UX is way better. - **Errors**: We added an `onError` prop to get notified when an error like "couldn't find source handle" happens. This is useful if you want to log errors for example. -- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param: +- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param: + ```ts -type MyCustomNode = Node +type MyCustomNode = Node; ``` + This makes it easier to work with different custom nodes and data types. ### Minor Changes -- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694) - Add auto pan for connecting and node dragging and `connectionRadius` +- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694) - Add auto pan for connecting and node dragging and `connectionRadius` - [#2773](https://github.com/wbkd/react-flow/pull/2773) - Add `onError` prop to get notified when an error happens ### Patch Changes -- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52) - Connecting nodes: Enable connections on touch devices +- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52) - Connecting nodes: Enable connections on touch devices - [#2620](https://github.com/wbkd/react-flow/pull/2620) - Thanks [RichSchulz](https://github.com/RichSchulz)! - Types: improve typing for node type - Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]: diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 1e1b4e60..254c56dd 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.5.1", + "version": "11.5.2", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From 499d1ae8a83a5a215e12752af00b77c4bdccaa6e Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 1 Feb 2023 12:23:45 +0100 Subject: [PATCH 04/38] fix(devDeps): accept react17 types --- packages/background/package.json | 2 +- packages/controls/package.json | 2 +- packages/core/package.json | 4 +- packages/minimap/package.json | 2 +- packages/node-resizer/package.json | 4 +- packages/node-toolbar/package.json | 4 +- packages/reactflow/package.json | 2 +- pnpm-lock.yaml | 131 +++++++++++++++-------------- 8 files changed, 76 insertions(+), 75 deletions(-) diff --git a/packages/background/package.json b/packages/background/package.json index 159d178f..f3cecab7 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -46,7 +46,7 @@ "@reactflow/rollup-config": "workspace:*", "@reactflow/tsconfig": "workspace:*", "@types/node": "^18.7.16", - "@types/react": "^18.0.19", + "@types/react": ">=17", "react": "^18.2.0", "typescript": "^4.9.4" }, diff --git a/packages/controls/package.json b/packages/controls/package.json index ff673326..8f5e716a 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -50,7 +50,7 @@ "@reactflow/rollup-config": "workspace:*", "@reactflow/tsconfig": "workspace:*", "@types/node": "^18.7.16", - "@types/react": "^18.0.19", + "@types/react": ">=17", "typescript": "^4.9.4" }, "rollup": { diff --git a/packages/core/package.json b/packages/core/package.json index 2c33c3e3..d73c8927 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -57,8 +57,8 @@ "@reactflow/rollup-config": "workspace:*", "@reactflow/tsconfig": "workspace:*", "@types/node": "^18.7.16", - "@types/react": "^18.0.17", - "@types/react-dom": "^18.0.6", + "@types/react": ">=17", + "@types/react-dom": ">=17", "react": "^18.2.0", "typescript": "^4.9.4" }, diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 27d0b8fc..ceb55b78 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -55,7 +55,7 @@ "@reactflow/rollup-config": "workspace:*", "@reactflow/tsconfig": "workspace:*", "@types/node": "^18.7.16", - "@types/react": "^18.0.19", + "@types/react": ">=17", "react": "^18.2.0", "typescript": "^4.9.4" }, diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json index 03112528..64763830 100644 --- a/packages/node-resizer/package.json +++ b/packages/node-resizer/package.json @@ -55,8 +55,8 @@ "@types/d3-drag": "^3.0.1", "@types/d3-selection": "^3.0.3", "@types/node": "^18.7.16", - "@types/react": "^18.0.19", - "@types/react-dom": "^18.0.6", + "@types/react": ">=17", + "@types/react-dom": ">=17", "react": "^18.2.0", "typescript": "^4.9.4" }, diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index 4aedc34e..a4fc3163 100644 --- a/packages/node-toolbar/package.json +++ b/packages/node-toolbar/package.json @@ -49,8 +49,8 @@ "@reactflow/rollup-config": "workspace:*", "@reactflow/tsconfig": "workspace:*", "@types/node": "^18.7.16", - "@types/react": "^18.0.19", - "@types/react-dom": "^18.0.6", + "@types/react": ">=17", + "@types/react-dom": ">=17", "react": "^18.2.0", "typescript": "^4.9.4" }, diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 254c56dd..ceba0a21 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -50,7 +50,7 @@ "@reactflow/rollup-config": "workspace:*", "@reactflow/tsconfig": "workspace:*", "@types/node": "^18.7.16", - "@types/react": "^18.0.19", + "@types/react": ">=17", "react": "^18.2.0", "typescript": "^4.9.4" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 67e8812a..1d0a2c3a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,15 +32,15 @@ importers: '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7 '@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0 '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1 - '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.49.0_equgvmdpavr6nminvx2krii6h4 - '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.49.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.50.0_nexu6jj2st6zpwrttn4g5lruue + '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.50.0_id2eilsndvzhjjktb64trvy3gu autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.21 concurrently: registry.npmjs.org/concurrently/7.6.0 cypress: registry.npmjs.org/cypress/10.7.0 eslint: registry.npmjs.org/eslint/8.23.1 eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1 eslint-plugin-prettier: registry.npmjs.org/eslint-plugin-prettier/4.2.1_cabrci5exjdaojcvd6xoxgeowu - eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.1_eslint@8.23.1 + eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.2_eslint@8.23.1 postcss: registry.npmjs.org/postcss/8.4.21 postcss-cli: registry.npmjs.org/postcss-cli/10.1.0_postcss@8.4.21 postcss-combine-duplicated-selectors: registry.npmjs.org/postcss-combine-duplicated-selectors/10.0.3_postcss@8.4.21 @@ -100,7 +100,7 @@ importers: '@reactflow/rollup-config': workspace:* '@reactflow/tsconfig': workspace:* '@types/node': ^18.7.16 - '@types/react': ^18.0.19 + '@types/react': '>=17' classcat: ^5.0.3 react: ^18.2.0 typescript: ^4.9.4 @@ -125,7 +125,7 @@ importers: '@reactflow/rollup-config': workspace:* '@reactflow/tsconfig': workspace:* '@types/node': ^18.7.16 - '@types/react': ^18.0.19 + '@types/react': '>=17' classcat: ^5.0.3 typescript: ^4.9.4 dependencies: @@ -149,8 +149,8 @@ importers: '@types/d3-selection': ^3.0.3 '@types/d3-zoom': ^3.0.1 '@types/node': ^18.7.16 - '@types/react': ^18.0.17 - '@types/react-dom': ^18.0.6 + '@types/react': '>=17' + '@types/react-dom': '>=17' classcat: ^5.0.3 d3-drag: ^3.0.0 d3-selection: ^3.0.0 @@ -187,7 +187,7 @@ importers: '@types/d3-selection': ^3.0.3 '@types/d3-zoom': ^3.0.1 '@types/node': ^18.7.16 - '@types/react': ^18.0.19 + '@types/react': '>=17' classcat: ^5.0.3 d3-selection: ^3.0.0 d3-zoom: ^3.0.0 @@ -220,8 +220,8 @@ importers: '@types/d3-drag': ^3.0.1 '@types/d3-selection': ^3.0.3 '@types/node': ^18.7.16 - '@types/react': ^18.0.19 - '@types/react-dom': ^18.0.6 + '@types/react': '>=17' + '@types/react-dom': '>=17' classcat: ^5.0.4 d3-drag: ^3.0.0 d3-selection: ^3.0.0 @@ -248,13 +248,13 @@ importers: packages/node-toolbar: specifiers: - '@reactflow/core': workspace:^11.3.3 + '@reactflow/core': workspace:* '@reactflow/eslint-config': workspace:* '@reactflow/rollup-config': workspace:* '@reactflow/tsconfig': workspace:* '@types/node': ^18.7.16 - '@types/react': ^18.0.19 - '@types/react-dom': ^18.0.6 + '@types/react': '>=17' + '@types/react-dom': '>=17' classcat: ^5.0.3 react: ^18.2.0 typescript: ^4.9.4 @@ -284,7 +284,7 @@ importers: '@reactflow/rollup-config': workspace:* '@reactflow/tsconfig': workspace:* '@types/node': ^18.7.16 - '@types/react': ^18.0.19 + '@types/react': '>=17' react: ^18.2.0 typescript: ^4.9.4 dependencies: @@ -312,7 +312,7 @@ importers: eslint: registry.npmjs.org/eslint/8.23.1 eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1 eslint-config-turbo: registry.npmjs.org/eslint-config-turbo/0.0.7_eslint@8.23.1 - eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.1_eslint@8.23.1 + eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.32.2_eslint@8.23.1 tooling/rollup-config: specifiers: @@ -2186,11 +2186,11 @@ packages: dev: true optional: true - registry.npmjs.org/@typescript-eslint/eslint-plugin/5.49.0_equgvmdpavr6nminvx2krii6h4: - resolution: {integrity: sha512-IhxabIpcf++TBaBa1h7jtOWyon80SXPRLDq0dVz5SLFC/eW6tofkw/O7Ar3lkx5z5U6wzbKDrl2larprp5kk5Q==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.49.0.tgz} - id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.49.0 + registry.npmjs.org/@typescript-eslint/eslint-plugin/5.50.0_nexu6jj2st6zpwrttn4g5lruue: + resolution: {integrity: sha512-vwksQWSFZiUhgq3Kv7o1Jcj0DUNylwnIlGvKvLLYsq8pAWha6/WCnXUeaSoNNha/K7QSf2+jvmkxggC1u3pIwQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.50.0.tgz} + id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.50.0 name: '@typescript-eslint/eslint-plugin' - version: 5.49.0 + version: 5.50.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: '@typescript-eslint/parser': ^5.0.0 @@ -2200,12 +2200,13 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.49.0_id2eilsndvzhjjktb64trvy3gu - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.49.0 - '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.49.0_id2eilsndvzhjjktb64trvy3gu - '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.49.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.50.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.50.0 + '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.50.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.50.0_id2eilsndvzhjjktb64trvy3gu debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 + grapheme-splitter: registry.npmjs.org/grapheme-splitter/1.0.4 ignore: registry.npmjs.org/ignore/5.2.4 natural-compare-lite: registry.npmjs.org/natural-compare-lite/1.4.0 regexpp: registry.npmjs.org/regexpp/3.2.0 @@ -2216,11 +2217,11 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/parser/5.49.0_id2eilsndvzhjjktb64trvy3gu: - resolution: {integrity: sha512-veDlZN9mUhGqU31Qiv2qEp+XrJj5fgZpJ8PW30sHU+j/8/e5ruAhLaVDAeznS7A7i4ucb/s8IozpDtt9NqCkZg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.49.0.tgz} - id: registry.npmjs.org/@typescript-eslint/parser/5.49.0 + registry.npmjs.org/@typescript-eslint/parser/5.50.0_id2eilsndvzhjjktb64trvy3gu: + resolution: {integrity: sha512-KCcSyNaogUDftK2G9RXfQyOCt51uB5yqC6pkUYqhYh8Kgt+DwR5M0EwEAxGPy/+DH6hnmKeGsNhiZRQxjH71uQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.50.0.tgz} + id: registry.npmjs.org/@typescript-eslint/parser/5.50.0 name: '@typescript-eslint/parser' - version: 5.49.0 + version: 5.50.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -2229,9 +2230,9 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.49.0 - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.49.0 - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.49.0_typescript@4.9.4 + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.50.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.50.0 + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.50.0_typescript@4.9.4 debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 typescript: registry.npmjs.org/typescript/4.9.4 @@ -2239,21 +2240,21 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/scope-manager/5.49.0: - resolution: {integrity: sha512-clpROBOiMIzpbWNxCe1xDK14uPZh35u4QaZO1GddilEzoCLAEz4szb51rBpdgurs5k2YzPtJeTEN3qVbG+LRUQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.49.0.tgz} + registry.npmjs.org/@typescript-eslint/scope-manager/5.50.0: + resolution: {integrity: sha512-rt03kaX+iZrhssaT974BCmoUikYtZI24Vp/kwTSy841XhiYShlqoshRFDvN1FKKvU2S3gK+kcBW1EA7kNUrogg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.50.0.tgz} name: '@typescript-eslint/scope-manager' - version: 5.49.0 + version: 5.50.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.49.0 - '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.49.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.50.0 + '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.50.0 dev: true - registry.npmjs.org/@typescript-eslint/type-utils/5.49.0_id2eilsndvzhjjktb64trvy3gu: - resolution: {integrity: sha512-eUgLTYq0tR0FGU5g1YHm4rt5H/+V2IPVkP0cBmbhRyEmyGe4XvJ2YJ6sYTmONfjmdMqyMLad7SB8GvblbeESZA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.49.0.tgz} - id: registry.npmjs.org/@typescript-eslint/type-utils/5.49.0 + registry.npmjs.org/@typescript-eslint/type-utils/5.50.0_id2eilsndvzhjjktb64trvy3gu: + resolution: {integrity: sha512-dcnXfZ6OGrNCO7E5UY/i0ktHb7Yx1fV6fnQGGrlnfDhilcs6n19eIRcvLBqx6OQkrPaFlDPk3OJ0WlzQfrV0bQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.50.0.tgz} + id: registry.npmjs.org/@typescript-eslint/type-utils/5.50.0 name: '@typescript-eslint/type-utils' - version: 5.49.0 + version: 5.50.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: '*' @@ -2262,8 +2263,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.49.0_typescript@4.9.4 - '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.49.0_id2eilsndvzhjjktb64trvy3gu + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.50.0_typescript@4.9.4 + '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.50.0_id2eilsndvzhjjktb64trvy3gu debug: registry.npmjs.org/debug/4.3.4 eslint: registry.npmjs.org/eslint/8.23.1 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.9.4 @@ -2272,18 +2273,18 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/types/5.49.0: - resolution: {integrity: sha512-7If46kusG+sSnEpu0yOz2xFv5nRz158nzEXnJFCGVEHWnuzolXKwrH5Bsf9zsNlOQkyZuk0BZKKoJQI+1JPBBg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.49.0.tgz} + registry.npmjs.org/@typescript-eslint/types/5.50.0: + resolution: {integrity: sha512-atruOuJpir4OtyNdKahiHZobPKFvZnBnfDiyEaBf6d9vy9visE7gDjlmhl+y29uxZ2ZDgvXijcungGFjGGex7w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.50.0.tgz} name: '@typescript-eslint/types' - version: 5.49.0 + version: 5.50.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - registry.npmjs.org/@typescript-eslint/typescript-estree/5.49.0_typescript@4.9.4: - resolution: {integrity: sha512-PBdx+V7deZT/3GjNYPVQv1Nc0U46dAHbIuOG8AZ3on3vuEKiPDwFE/lG1snN2eUB9IhF7EyF7K1hmTcLztNIsA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.49.0.tgz} - id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.49.0 + registry.npmjs.org/@typescript-eslint/typescript-estree/5.50.0_typescript@4.9.4: + resolution: {integrity: sha512-Gq4zapso+OtIZlv8YNAStFtT6d05zyVCK7Fx3h5inlLBx2hWuc/0465C2mg/EQDDU2LKe52+/jN4f0g9bd+kow==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.50.0.tgz} + id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.50.0 name: '@typescript-eslint/typescript-estree' - version: 5.49.0 + version: 5.50.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: typescript: '*' @@ -2291,8 +2292,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.49.0 - '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.49.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.50.0 + '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.50.0 debug: registry.npmjs.org/debug/4.3.4 globby: registry.npmjs.org/globby/11.1.0 is-glob: registry.npmjs.org/is-glob/4.0.3 @@ -2303,20 +2304,20 @@ packages: - supports-color dev: true - registry.npmjs.org/@typescript-eslint/utils/5.49.0_id2eilsndvzhjjktb64trvy3gu: - resolution: {integrity: sha512-cPJue/4Si25FViIb74sHCLtM4nTSBXtLx1d3/QT6mirQ/c65bV8arBEebBJJizfq8W2YyMoPI/WWPFWitmNqnQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.49.0.tgz} - id: registry.npmjs.org/@typescript-eslint/utils/5.49.0 + registry.npmjs.org/@typescript-eslint/utils/5.50.0_id2eilsndvzhjjktb64trvy3gu: + resolution: {integrity: sha512-v/AnUFImmh8G4PH0NDkf6wA8hujNNcrwtecqW4vtQ1UOSNBaZl49zP1SHoZ/06e+UiwzHpgb5zP5+hwlYYWYAw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.50.0.tgz} + id: registry.npmjs.org/@typescript-eslint/utils/5.50.0 name: '@typescript-eslint/utils' - version: 5.49.0 + version: 5.50.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: '@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11 '@types/semver': registry.npmjs.org/@types/semver/7.3.13 - '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.49.0 - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.49.0 - '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.49.0_typescript@4.9.4 + '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.50.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.50.0 + '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.50.0_typescript@4.9.4 eslint: registry.npmjs.org/eslint/8.23.1 eslint-scope: registry.npmjs.org/eslint-scope/5.1.1 eslint-utils: registry.npmjs.org/eslint-utils/3.0.0_eslint@8.23.1 @@ -2326,13 +2327,13 @@ packages: - typescript dev: true - registry.npmjs.org/@typescript-eslint/visitor-keys/5.49.0: - resolution: {integrity: sha512-v9jBMjpNWyn8B6k/Mjt6VbUS4J1GvUlR4x3Y+ibnP1z7y7V4n0WRz+50DY6+Myj0UaXVSuUlHohO+eZ8IJEnkg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.49.0.tgz} + registry.npmjs.org/@typescript-eslint/visitor-keys/5.50.0: + resolution: {integrity: sha512-cdMeD9HGu6EXIeGOh2yVW6oGf9wq8asBgZx7nsR/D36gTfQ0odE5kcRYe5M81vjEFAcPeugXrHg78Imu55F6gg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.50.0.tgz} name: '@typescript-eslint/visitor-keys' - version: 5.49.0 + version: 5.50.0 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.49.0 + '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.50.0 eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0 dev: true @@ -3723,11 +3724,11 @@ packages: prettier-linter-helpers: registry.npmjs.org/prettier-linter-helpers/1.0.0 dev: true - registry.npmjs.org/eslint-plugin-react/7.32.1_eslint@8.23.1: - resolution: {integrity: sha512-vOjdgyd0ZHBXNsmvU+785xY8Bfe57EFbTYYk8XrROzWpr9QBvpjITvAXt9xqcE6+8cjR/g1+mfumPToxsl1www==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.1.tgz} - id: registry.npmjs.org/eslint-plugin-react/7.32.1 + registry.npmjs.org/eslint-plugin-react/7.32.2_eslint@8.23.1: + resolution: {integrity: sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz} + id: registry.npmjs.org/eslint-plugin-react/7.32.2 name: eslint-plugin-react - version: 7.32.1 + version: 7.32.2 engines: {node: '>=4'} peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 From d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 1 Feb 2023 12:25:11 +0100 Subject: [PATCH 05/38] chore(changeset): add --- .changeset/slimy-emus-jump.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .changeset/slimy-emus-jump.md diff --git a/.changeset/slimy-emus-jump.md b/.changeset/slimy-emus-jump.md new file mode 100644 index 00000000..8f3f0bc7 --- /dev/null +++ b/.changeset/slimy-emus-jump.md @@ -0,0 +1,11 @@ +--- +'@reactflow/background': patch +'@reactflow/controls': patch +'@reactflow/core': patch +'@reactflow/minimap': patch +'@reactflow/node-resizer': patch +'@reactflow/node-toolbar': patch +'reactflow': patch +--- + +Accept React 17 types as dev dependency From 9228802969a64e7e575fec5df32c66366738b4be Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 1 Feb 2023 12:29:09 +0100 Subject: [PATCH 06/38] chore(packages): bump --- .changeset/slimy-emus-jump.md | 11 ----------- packages/background/CHANGELOG.md | 9 +++++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 9 +++++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 6 ++++++ packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 9 +++++++++ packages/minimap/package.json | 2 +- packages/node-resizer/CHANGELOG.md | 9 +++++++++ packages/node-resizer/package.json | 2 +- packages/node-toolbar/CHANGELOG.md | 9 +++++++++ packages/node-toolbar/package.json | 2 +- packages/reactflow/CHANGELOG.md | 13 +++++++++++++ packages/reactflow/package.json | 2 +- 15 files changed, 71 insertions(+), 18 deletions(-) delete mode 100644 .changeset/slimy-emus-jump.md diff --git a/.changeset/slimy-emus-jump.md b/.changeset/slimy-emus-jump.md deleted file mode 100644 index 8f3f0bc7..00000000 --- a/.changeset/slimy-emus-jump.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -'@reactflow/background': patch -'@reactflow/controls': patch -'@reactflow/core': patch -'@reactflow/minimap': patch -'@reactflow/node-resizer': patch -'@reactflow/node-toolbar': patch -'reactflow': patch ---- - -Accept React 17 types as dev dependency diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index cea0e140..faa7accb 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/background +## 11.1.5 + +### Patch Changes + +- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency + +- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: + - @reactflow/core@11.5.2 + ## 11.1.4 ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index f3cecab7..dc8213f2 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.1.4", + "version": "11.1.5", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index 805064ca..64f29130 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/controls +## 11.1.5 + +### Patch Changes + +- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency + +- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: + - @reactflow/core@11.5.2 + ## 11.1.4 ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index 8f5e716a..dd7d69ad 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.1.4", + "version": "11.1.5", "description": "Component to control the viewport of a React Flow instance", "keywords": [ "react", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index c9aa9662..742ac7c0 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,11 @@ # @reactflow/core +## 11.5.2 + +### Patch Changes + +- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency + ## 11.5.1 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index d73c8927..db3f7b1a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.5.1", + "version": "11.5.2", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md index bb90acb4..503661bc 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/minimap +## 11.3.5 + +### Patch Changes + +- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency + +- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: + - @reactflow/core@11.5.2 + ## 11.3.4 ### Patch Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index ceb55b78..b0a99560 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.3.4", + "version": "11.3.5", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/node-resizer/CHANGELOG.md b/packages/node-resizer/CHANGELOG.md index 2d95372e..9d7870b5 100644 --- a/packages/node-resizer/CHANGELOG.md +++ b/packages/node-resizer/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/node-resizer +## 2.0.1 + +### Patch Changes + +- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency + +- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: + - @reactflow/core@11.5.2 + ## 2.0.0 After this update it should be easier to update the node resizer (no need to update the reactflow package anymore). diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json index 64763830..6bbc73e4 100644 --- a/packages/node-resizer/package.json +++ b/packages/node-resizer/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-resizer", - "version": "2.0.0", + "version": "2.0.1", "description": "A helper component for resizing nodes.", "keywords": [ "react", diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md index 158645f0..4160a858 100644 --- a/packages/node-toolbar/CHANGELOG.md +++ b/packages/node-toolbar/CHANGELOG.md @@ -1,5 +1,14 @@ # @reactflow/node-toolbar +## 1.1.5 + +### Patch Changes + +- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency + +- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: + - @reactflow/core@11.5.2 + ## 1.1.4 ### Patch Changes diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index a4fc3163..993e3909 100644 --- a/packages/node-toolbar/package.json +++ b/packages/node-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-toolbar", - "version": "1.1.4", + "version": "1.1.5", "description": "A toolbar component for React Flow that can be attached to a node.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index 1f8112dd..3e83a008 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,18 @@ # reactflow +## 11.5.3 + +### Patch Changes + +- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency + +- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]: + - @reactflow/background@11.1.5 + - @reactflow/controls@11.1.5 + - @reactflow/core@11.5.2 + - @reactflow/minimap@11.3.5 + - @reactflow/node-toolbar@1.1.5 + ## 11.5.2 ### Patch Changes diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index ceba0a21..f2e35e8c 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.5.2", + "version": "11.5.3", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From 1ba3c0e91f01b8d5f23822b790e5cfaf3f1cb3b2 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 3 Feb 2023 19:08:10 +0100 Subject: [PATCH 07/38] fix(nodes): if draggable equals false node is also not draggable with selection --- examples/vite-app/src/examples/Basic/index.tsx | 1 + packages/core/src/hooks/useDrag/index.ts | 5 +++-- packages/core/src/hooks/useDrag/utils.ts | 14 ++++++++++++-- packages/core/src/hooks/useUpdateNodePositions.ts | 6 ++++-- 4 files changed, 20 insertions(+), 6 deletions(-) diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx index 52d22025..67bbc0fd 100644 --- a/examples/vite-app/src/examples/Basic/index.tsx +++ b/examples/vite-app/src/examples/Basic/index.tsx @@ -22,6 +22,7 @@ const initialNodes: Node[] = [ data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light', + draggable: false, }, { id: '2', diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts index c6f3d269..22d06daf 100644 --- a/packages/core/src/hooks/useDrag/index.ts +++ b/packages/core/src/hooks/useDrag/index.ts @@ -133,10 +133,11 @@ function useDrag({ const { nodeInternals, multiSelectionActive, + domNode, + nodesDraggable, unselectNodesAndEdges, onNodeDragStart, onSelectionDragStart, - domNode, } = store.getState(); const onStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart); @@ -157,7 +158,7 @@ function useDrag({ const pointerPos = getPointerPosition(event); lastPos.current = pointerPos; - dragItems.current = getDragItems(nodeInternals, pointerPos, nodeId); + dragItems.current = getDragItems(nodeInternals, nodesDraggable, pointerPos, nodeId); if (onStart && dragItems.current) { const [currentNode, nodes] = getEventHandlerParams({ diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts index ed40053b..5ef3b3b2 100644 --- a/packages/core/src/hooks/useDrag/utils.ts +++ b/packages/core/src/hooks/useDrag/utils.ts @@ -36,9 +36,19 @@ export function hasSelector(target: Element, selector: string, nodeRef: RefObjec } // looks for all selected nodes and created a NodeDragItem for each of them -export function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition, nodeId?: string): NodeDragItem[] { +export function getDragItems( + nodeInternals: NodeInternals, + nodesDraggable: boolean, + mousePos: XYPosition, + nodeId?: string +): NodeDragItem[] { return Array.from(nodeInternals.values()) - .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, nodeInternals))) + .filter( + (n) => + (n.selected || n.id === nodeId) && + (!n.parentNode || !isParentSelected(n, nodeInternals)) && + (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined')) + ) .map((n) => ({ id: n.id, position: n.position || { x: 0, y: 0 }, diff --git a/packages/core/src/hooks/useUpdateNodePositions.ts b/packages/core/src/hooks/useUpdateNodePositions.ts index 131f85cd..0ab89157 100644 --- a/packages/core/src/hooks/useUpdateNodePositions.ts +++ b/packages/core/src/hooks/useUpdateNodePositions.ts @@ -7,9 +7,11 @@ function useUpdateNodePositions() { const store = useStoreApi(); const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => { - const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError } = + const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError, nodesDraggable } = store.getState(); - const selectedNodes = getNodes().filter((n) => n.selected); + const selectedNodes = getNodes().filter( + (n) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined')) + ); // by default a node moves 5px on each key press, or 20px if shift is pressed // if snap grid is enabled, we use that for the velocity. const xVelo = snapToGrid ? snapGrid[0] : 5; From be8097acadca3054c3b236ce4296fc516010ef8c Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 3 Feb 2023 19:14:04 +0100 Subject: [PATCH 08/38] chore(changeset): add --- .changeset/fast-chefs-explode.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fast-chefs-explode.md diff --git a/.changeset/fast-chefs-explode.md b/.changeset/fast-chefs-explode.md new file mode 100644 index 00000000..4866ec9e --- /dev/null +++ b/.changeset/fast-chefs-explode.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +When node is not draggable, you can't move it with a selection either From c48efe969f7b964a3713aff321b9fa4946b31ca2 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 3 Feb 2023 20:40:32 +0100 Subject: [PATCH 09/38] fix(ios): connection error + dont snap invalid connection lines --- .../examples/Validation/validation.module.css | 4 +- .../core/src/components/Handle/handler.ts | 71 +++++++++---------- packages/core/src/components/Handle/utils.ts | 17 +++-- 3 files changed, 48 insertions(+), 44 deletions(-) diff --git a/examples/vite-app/src/examples/Validation/validation.module.css b/examples/vite-app/src/examples/Validation/validation.module.css index 4ffc8b0b..37333aae 100644 --- a/examples/vite-app/src/examples/Validation/validation.module.css +++ b/examples/vite-app/src/examples/Validation/validation.module.css @@ -24,10 +24,10 @@ background: #fff; } -.validationflow :global .react-flow__handle-connecting { +.validationflow :global .connecting { background: #ff6060; } -.validationflow :global .react-flow__handle-valid { +.validationflow :global .valid { background: #55dd99; } diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 03bf698c..5c35e48a 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -2,7 +2,7 @@ import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } fro import { StoreApi } from 'zustand'; import { getHostForElement, calcAutoPan, getEventPosition } from '../../utils'; -import type { OnConnect, HandleType, ReactFlowState } from '../../types'; +import type { OnConnect, HandleType, ReactFlowState, Connection } from '../../types'; import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph'; import { ConnectionHandle, @@ -65,6 +65,8 @@ export function handlePointerDown({ let prevActiveHandle: Element; let connectionPosition = getEventPosition(event, containerBounds); let autoPanStarted = false; + let connection: Connection | null = null; + let isValid = false; const handleLookup = getHandleLookup({ nodes: getNodes(), @@ -108,23 +110,7 @@ export function handlePointerDown({ autoPanStarted = true; } - setState({ - connectionPosition: prevClosestHandle - ? rendererPointToPoint( - { - x: prevClosestHandle.x, - y: prevClosestHandle.y, - }, - transform - ) - : connectionPosition, - }); - - if (!prevClosestHandle) { - return resetRecentHandle(prevActiveHandle); - } - - const { connection, handleDomNode, isValid } = isValidHandle( + const { handleDomNode, ...result } = isValidHandle( event, prevClosestHandle, connectionMode, @@ -135,33 +121,39 @@ export function handlePointerDown({ doc ); + setState({ + connectionPosition: + prevClosestHandle && isValid + ? rendererPointToPoint( + { + x: prevClosestHandle.x, + y: prevClosestHandle.y, + }, + transform + ) + : connectionPosition, + }); + + if (!prevClosestHandle) { + return resetRecentHandle(prevActiveHandle); + } + + connection = result.connection; + isValid = result.isValid; + if (connection.source !== connection.target && handleDomNode) { resetRecentHandle(prevActiveHandle); prevActiveHandle = handleDomNode; - handleDomNode.classList.add('react-flow__handle-connecting'); + // @todo: remove the old class names "react-flow__handle-" in the next major version + handleDomNode.classList.add('connecting', 'react-flow__handle-connecting'); + handleDomNode.classList.toggle('valid', isValid); handleDomNode.classList.toggle('react-flow__handle-valid', isValid); } } function onPointerUp(event: MouseEvent | TouchEvent) { - cancelAnimationFrame(autoPanId); - autoPanStarted = false; - - if (prevClosestHandle) { - const { connection, isValid } = isValidHandle( - event, - prevClosestHandle, - connectionMode, - nodeId, - handleId, - isTarget ? 'target' : 'source', - isValidConnection, - doc - ); - - if (isValid) { - onConnect?.(connection); - } + if (connection && isValid) { + onConnect?.(connection); } onConnectEnd?.(event); @@ -171,8 +163,11 @@ export function handlePointerDown({ } resetRecentHandle(prevActiveHandle); - cancelConnection(); + cancelAnimationFrame(autoPanId); + autoPanStarted = false; + isValid = false; + connection = null; doc.removeEventListener('mousemove', onPointerMove as EventListener); doc.removeEventListener('mouseup', onPointerUp as EventListener); diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts index 0b391e37..235abc92 100644 --- a/packages/core/src/components/Handle/utils.ts +++ b/packages/core/src/components/Handle/utils.ts @@ -61,10 +61,12 @@ type Result = { connection: Connection; }; +const nullConnection: Connection = { source: null, target: null, sourceHandle: null, targetHandle: null }; + // checks if and returns connection in fom of an object { source: 123, target: 312 } export function isValidHandle( event: MouseEvent | TouchEvent | ReactMouseEvent | ReactTouchEvent, - handle: Pick, + handle: Pick | null, connectionMode: ConnectionMode, fromNodeId: string, fromHandleId: string | null, @@ -72,6 +74,14 @@ export function isValidHandle( isValidConnection: ValidConnectionFunc, doc: Document | ShadowRoot ) { + if (!handle) { + return { + handleDomNode: null, + isValid: false, + connection: nullConnection, + }; + } + const isTarget = fromType === 'target'; const handleDomNode = doc.querySelector( `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]` @@ -83,7 +93,7 @@ export function isValidHandle( const result: Result = { handleDomNode: handleToCheck, isValid: false, - connection: { source: null, target: null, sourceHandle: null, targetHandle: null }, + connection: nullConnection, }; if (handleToCheck) { @@ -155,6 +165,5 @@ export function getHandleType( } export function resetRecentHandle(handleDomNode: Element): void { - handleDomNode?.classList.remove('react-flow__handle-valid'); - handleDomNode?.classList.remove('react-flow__handle-connecting'); + handleDomNode?.classList.remove('valid', 'connecting', 'react-flow__handle-valid', 'react-flow__handle-connecting'); } From 3b6348a8d1573afb39576327318bc172e33393c2 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 3 Feb 2023 20:43:08 +0100 Subject: [PATCH 10/38] chore(changeset): add --- .changeset/sour-impalas-admire.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sour-impalas-admire.md diff --git a/.changeset/sour-impalas-admire.md b/.changeset/sour-impalas-admire.md new file mode 100644 index 00000000..598f8049 --- /dev/null +++ b/.changeset/sour-impalas-admire.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +fix(ios): connection error + dont snap invalid connection lines From 23d1e65a72c00450ba790f1a0edb2902166ad8a2 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 3 Feb 2023 21:10:44 +0100 Subject: [PATCH 11/38] feat(connection-line): add status class (valid or invalid) while in connection radius --- .../examples/Validation/validation.module.css | 8 ++++++ .../src/components/ConnectionLine/index.tsx | 26 ++++++++++++++++--- .../core/src/components/Handle/handler.ts | 7 +++-- packages/core/src/components/Handle/utils.ts | 14 +++++++++- packages/core/src/store/index.ts | 1 + packages/core/src/store/initialState.ts | 1 + packages/core/src/types/edges.ts | 3 ++- packages/core/src/types/general.ts | 3 +++ 8 files changed, 55 insertions(+), 8 deletions(-) diff --git a/examples/vite-app/src/examples/Validation/validation.module.css b/examples/vite-app/src/examples/Validation/validation.module.css index 37333aae..63d58eee 100644 --- a/examples/vite-app/src/examples/Validation/validation.module.css +++ b/examples/vite-app/src/examples/Validation/validation.module.css @@ -31,3 +31,11 @@ .validationflow :global .valid { background: #55dd99; } + +.validationflow :global .valid .react-flow__connection-path { + stroke: #55dd99; +} + +.validationflow :global .invalid .react-flow__connection-path { + stroke: #ff6060; +} diff --git a/packages/core/src/components/ConnectionLine/index.tsx b/packages/core/src/components/ConnectionLine/index.tsx index fae0c3b1..45ec7937 100644 --- a/packages/core/src/components/ConnectionLine/index.tsx +++ b/packages/core/src/components/ConnectionLine/index.tsx @@ -1,12 +1,19 @@ import { CSSProperties, useCallback } from 'react'; import { shallow } from 'zustand/shallow'; +import cc from 'classcat'; import { useStore } from '../../hooks/useStore'; import { getBezierPath } from '../Edges/BezierEdge'; import { getSmoothStepPath } from '../Edges/SmoothStepEdge'; import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'; import { internalsSymbol } from '../../utils'; -import type { ConnectionLineComponent, HandleType, ReactFlowState, ReactFlowStore } from '../../types'; +import type { + ConnectionLineComponent, + ConnectionStatus, + HandleType, + ReactFlowState, + ReactFlowStore, +} from '../../types'; import { Position, ConnectionLineType, ConnectionMode } from '../../types'; type ConnectionLineProps = { @@ -15,6 +22,7 @@ type ConnectionLineProps = { type: ConnectionLineType; style?: CSSProperties; CustomComponent?: ConnectionLineComponent; + connectionStatus: ConnectionStatus | null; }; const oppositePosition = { @@ -30,6 +38,7 @@ const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, + connectionStatus, }: ConnectionLineProps) => { const { fromNode, handleId, toX, toY, connectionMode } = useStore( useCallback( @@ -80,6 +89,7 @@ const ConnectionLine = ({ toY={toY} fromPosition={fromPosition} toPosition={toPosition} + connectionStatus={connectionStatus} /> ); } @@ -127,12 +137,13 @@ const selector = (s: ReactFlowState) => ({ nodeId: s.connectionNodeId, handleType: s.connectionHandleType, nodesConnectable: s.nodesConnectable, + connectionStatus: s.connectionStatus, width: s.width, height: s.height, }); function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) { - const { nodeId, handleType, nodesConnectable, width, height } = useStore(selector, shallow); + const { nodeId, handleType, nodesConnectable, width, height, connectionStatus } = useStore(selector, shallow); const isValid = !!(nodeId && handleType && width && nodesConnectable); if (!isValid) { @@ -146,8 +157,15 @@ function ConnectionLineWrapper({ containerStyle, style, type, component }: Conne height={height} className="react-flow__edges react-flow__connectionline react-flow__container" > - - + + ); diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 5c35e48a..5c54118f 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -2,11 +2,12 @@ import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } fro import { StoreApi } from 'zustand'; import { getHostForElement, calcAutoPan, getEventPosition } from '../../utils'; -import type { OnConnect, HandleType, ReactFlowState, Connection } from '../../types'; +import type { OnConnect, HandleType, ReactFlowState, Connection, ConnectionStatus } from '../../types'; import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph'; import { ConnectionHandle, getClosestHandle, + getConnectionStatus, getHandleLookup, getHandleType, isValidHandle, @@ -91,6 +92,7 @@ export function handlePointerDown({ connectionNodeId: nodeId, connectionHandleId: handleId, connectionHandleType: handleType, + connectionStatus: null, }); onConnectStart?.(event, { nodeId, handleId, handleType }); @@ -123,7 +125,7 @@ export function handlePointerDown({ setState({ connectionPosition: - prevClosestHandle && isValid + prevClosestHandle && result.isValid ? rendererPointToPoint( { x: prevClosestHandle.x, @@ -132,6 +134,7 @@ export function handlePointerDown({ transform ) : connectionPosition, + connectionStatus: getConnectionStatus(!!prevClosestHandle, result.isValid), }); if (!prevClosestHandle) { diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts index 235abc92..89e58c49 100644 --- a/packages/core/src/components/Handle/utils.ts +++ b/packages/core/src/components/Handle/utils.ts @@ -1,6 +1,6 @@ import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react'; -import { ConnectionMode } from '../../types'; +import { ConnectionMode, ConnectionStatus } from '../../types'; import { getEventPosition, internalsSymbol } from '../../utils'; import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types'; @@ -167,3 +167,15 @@ export function getHandleType( export function resetRecentHandle(handleDomNode: Element): void { handleDomNode?.classList.remove('valid', 'connecting', 'react-flow__handle-valid', 'react-flow__handle-connecting'); } + +export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) { + let connectionStatus = null; + + if (isHandleValid) { + connectionStatus = 'valid'; + } else if (isInsideConnectionRadius && !isHandleValid) { + connectionStatus = 'invalid'; + } + + return connectionStatus as ConnectionStatus; +} diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 8b17111c..c85225db 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -274,6 +274,7 @@ const createRFStore = () => connectionNodeId: initialState.connectionNodeId, connectionHandleId: initialState.connectionHandleId, connectionHandleType: initialState.connectionHandleType, + connectionStatus: initialState.connectionStatus, }), reset: () => set({ ...initialState }), })); diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index afccec2b..99e9d298 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -32,6 +32,7 @@ const initialState: ReactFlowStore = { connectionHandleId: null, connectionHandleType: 'source', connectionPosition: { x: 0, y: 0 }, + connectionStatus: null, connectionMode: ConnectionMode.Strict, domNode: null, paneDragging: false, diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts index c2202788..143c7fa6 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/core/src/types/edges.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type { CSSProperties, ComponentType, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent } from 'react'; -import { Position } from '.'; +import { ConnectionStatus, Position } from '.'; import type { Connection, HandleElement, HandleType, Node } from '.'; type EdgeLabelOptions = { @@ -155,6 +155,7 @@ export type ConnectionLineComponentProps = { toY: number; fromPosition: Position; toPosition: Position; + connectionStatus: ConnectionStatus | null; }; export type ConnectionLineComponent = ComponentType; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 9dbd3dce..4abfa405 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -61,6 +61,8 @@ export interface Connection { targetHandle: string | null; } +export type ConnectionStatus = 'valid' | 'invalid'; + export enum ConnectionMode { Strict = 'strict', Loose = 'loose', @@ -166,6 +168,7 @@ export type ReactFlowStore = { connectionHandleId: string | null; connectionHandleType: HandleType | null; connectionPosition: XYPosition; + connectionStatus: ConnectionStatus | null; connectionMode: ConnectionMode; snapToGrid: boolean; From 1527795d18c3af38c8ec7059436ea0fbf6c27bbd Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 3 Feb 2023 21:13:35 +0100 Subject: [PATCH 12/38] chore(changeset): add --- .changeset/silent-suits-smell.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silent-suits-smell.md diff --git a/.changeset/silent-suits-smell.md b/.changeset/silent-suits-smell.md new file mode 100644 index 00000000..d7cff697 --- /dev/null +++ b/.changeset/silent-suits-smell.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +connection: add status class (valid or invalid) while in connection radius From 7a652fc17c61a16057d0207cf9189834d90a24bd Mon Sep 17 00:00:00 2001 From: moklick Date: Sun, 5 Feb 2023 21:58:30 +0100 Subject: [PATCH 13/38] chore(connections): get fresh ref of onConnectEnd --- packages/core/src/components/Handle/handler.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 5c54118f..6c484edb 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -2,7 +2,7 @@ import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } fro import { StoreApi } from 'zustand'; import { getHostForElement, calcAutoPan, getEventPosition } from '../../utils'; -import type { OnConnect, HandleType, ReactFlowState, Connection, ConnectionStatus } from '../../types'; +import type { OnConnect, HandleType, ReactFlowState, Connection } from '../../types'; import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph'; import { ConnectionHandle, @@ -46,7 +46,6 @@ export function handlePointerDown({ autoPanOnConnect, connectionRadius, onConnectStart, - onConnectEnd, panBy, getNodes, cancelConnection, @@ -159,7 +158,9 @@ export function handlePointerDown({ onConnect?.(connection); } - onConnectEnd?.(event); + // it's important to get a fresh reference from the store here + // in order to get the latest state of onConnectEnd + getState().onConnectEnd?.(event); if (edgeUpdaterType) { onEdgeUpdateEnd?.(event); From b07d940daccb8f8517de856dfd4890635333231e Mon Sep 17 00:00:00 2001 From: moklick Date: Sun, 5 Feb 2023 22:04:02 +0100 Subject: [PATCH 14/38] chore(connections): check if handle + connection radius --- packages/core/src/components/Handle/handler.ts | 2 +- packages/core/src/components/Handle/utils.ts | 12 ++---------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 6c484edb..9b8855a3 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -136,7 +136,7 @@ export function handlePointerDown({ connectionStatus: getConnectionStatus(!!prevClosestHandle, result.isValid), }); - if (!prevClosestHandle) { + if (!prevClosestHandle && !result.isValid) { return resetRecentHandle(prevActiveHandle); } diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts index 89e58c49..58263781 100644 --- a/packages/core/src/components/Handle/utils.ts +++ b/packages/core/src/components/Handle/utils.ts @@ -74,14 +74,6 @@ export function isValidHandle( isValidConnection: ValidConnectionFunc, doc: Document | ShadowRoot ) { - if (!handle) { - return { - handleDomNode: null, - isValid: false, - connection: nullConnection, - }; - } - const isTarget = fromType === 'target'; const handleDomNode = doc.querySelector( `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]` @@ -102,9 +94,9 @@ export function isValidHandle( const handleId = handleToCheck.getAttribute('data-handleid'); const connection: Connection = { - source: isTarget ? handle.nodeId : fromNodeId, + source: isTarget ? handleNodeId : fromNodeId, sourceHandle: isTarget ? handleId : fromHandleId, - target: isTarget ? fromNodeId : handle.nodeId, + target: isTarget ? fromNodeId : handleNodeId, targetHandle: isTarget ? fromHandleId : handleId, }; From ecf5ccbb5c865aa039f634e5109b18c1eade876d Mon Sep 17 00:00:00 2001 From: moklick Date: Sun, 5 Feb 2023 22:14:03 +0100 Subject: [PATCH 15/38] chore(packages): bump --- .changeset/fast-chefs-explode.md | 5 ----- .changeset/silent-suits-smell.md | 5 ----- .changeset/sour-impalas-admire.md | 5 ----- packages/background/CHANGELOG.md | 7 +++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 7 +++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 10 ++++++++++ packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 7 +++++++ packages/minimap/package.json | 2 +- packages/node-toolbar/CHANGELOG.md | 7 +++++++ packages/node-toolbar/package.json | 2 +- packages/reactflow/CHANGELOG.md | 17 +++++++++++++++++ packages/reactflow/package.json | 2 +- 15 files changed, 61 insertions(+), 21 deletions(-) delete mode 100644 .changeset/fast-chefs-explode.md delete mode 100644 .changeset/silent-suits-smell.md delete mode 100644 .changeset/sour-impalas-admire.md diff --git a/.changeset/fast-chefs-explode.md b/.changeset/fast-chefs-explode.md deleted file mode 100644 index 4866ec9e..00000000 --- a/.changeset/fast-chefs-explode.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -When node is not draggable, you can't move it with a selection either diff --git a/.changeset/silent-suits-smell.md b/.changeset/silent-suits-smell.md deleted file mode 100644 index d7cff697..00000000 --- a/.changeset/silent-suits-smell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -connection: add status class (valid or invalid) while in connection radius diff --git a/.changeset/sour-impalas-admire.md b/.changeset/sour-impalas-admire.md deleted file mode 100644 index 598f8049..00000000 --- a/.changeset/sour-impalas-admire.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -fix(ios): connection error + dont snap invalid connection lines diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index faa7accb..1f12e5b2 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/background +## 11.1.6 + +### Patch Changes + +- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: + - @reactflow/core@11.5.3 + ## 11.1.5 ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index dc8213f2..e840a1ae 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.1.5", + "version": "11.1.6", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index 64f29130..acf969a7 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/controls +## 11.1.6 + +### Patch Changes + +- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: + - @reactflow/core@11.5.3 + ## 11.1.5 ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index dd7d69ad..dd8008f8 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.1.5", + "version": "11.1.6", "description": "Component to control the viewport of a React Flow instance", "keywords": [ "react", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 742ac7c0..7f5e7d0b 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,15 @@ # @reactflow/core +## 11.5.3 + +This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS. + +### Patch Changes + +- [#2800](https://github.com/wbkd/react-flow/pull/2800) [`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c) - When node is not draggable, you can't move it with a selection either +- [#2803](https://github.com/wbkd/react-flow/pull/2803) [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd) - connection: add status class (valid or invalid) while in connection radius +- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius + ## 11.5.2 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index db3f7b1a..9171521e 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.5.2", + "version": "11.5.3", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md index 503661bc..f3b94881 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/minimap +## 11.3.6 + +### Patch Changes + +- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: + - @reactflow/core@11.5.3 + ## 11.3.5 ### Patch Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index b0a99560..08d9c59a 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.3.5", + "version": "11.3.6", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md index 4160a858..4c15ad33 100644 --- a/packages/node-toolbar/CHANGELOG.md +++ b/packages/node-toolbar/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/node-toolbar +## 1.1.6 + +### Patch Changes + +- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: + - @reactflow/core@11.5.3 + ## 1.1.5 ### Patch Changes diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index 993e3909..3788fd33 100644 --- a/packages/node-toolbar/package.json +++ b/packages/node-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-toolbar", - "version": "1.1.5", + "version": "1.1.6", "description": "A toolbar component for React Flow that can be attached to a node.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index 3e83a008..4201ed0b 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,22 @@ # reactflow +## 11.5.4 + +This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS. + +### Patch Changes + +- [#2800](https://github.com/wbkd/react-flow/pull/2800) [`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c) - When node is not draggable, you can't move it with a selection either +- [#2803](https://github.com/wbkd/react-flow/pull/2803) [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd) - connection: add status class (valid or invalid) while in connection radius +- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius + +- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: + - @reactflow/core@11.5.3 + - @reactflow/background@11.1.6 + - @reactflow/controls@11.1.6 + - @reactflow/minimap@11.3.6 + - @reactflow/node-toolbar@1.1.6 + ## 11.5.3 ### Patch Changes diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index f2e35e8c..593e37b1 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.5.3", + "version": "11.5.4", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From 1d3126e4feee26f5983c213cb7b010ebc3ff1386 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Feb 2023 00:56:23 +0100 Subject: [PATCH 16/38] fix(core): check if `prevClosestHandle` exists in `onPointerUp` --- packages/core/src/components/Handle/handler.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 9b8855a3..a0c2e935 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -154,8 +154,10 @@ export function handlePointerDown({ } function onPointerUp(event: MouseEvent | TouchEvent) { - if (connection && isValid) { - onConnect?.(connection); + if (prevClosestHandle) { + if (connection && isValid) { + onConnect?.(connection); + } } // it's important to get a fresh reference from the store here From 383a074aeae6dbec8437fa08c7c8d8240838a84e Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Feb 2023 00:57:49 +0100 Subject: [PATCH 17/38] chore(changeset): add --- .changeset/new-guests-attend.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/new-guests-attend.md diff --git a/.changeset/new-guests-attend.md b/.changeset/new-guests-attend.md new file mode 100644 index 00000000..89d6660c --- /dev/null +++ b/.changeset/new-guests-attend.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius From 230106da73b8d235a76f2de9cd75fe9091bde921 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 6 Feb 2023 02:00:35 +0100 Subject: [PATCH 18/38] chore(connction-handler): cleanup --- packages/core/src/components/Handle/handler.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index a0c2e935..caed0dd3 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -154,10 +154,8 @@ export function handlePointerDown({ } function onPointerUp(event: MouseEvent | TouchEvent) { - if (prevClosestHandle) { - if (connection && isValid) { - onConnect?.(connection); - } + if (prevClosestHandle && connection && isValid) { + onConnect?.(connection); } // it's important to get a fresh reference from the store here From a7a011f050fea71a59acb3d8e128aeb36ebea3fb Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 6 Feb 2023 02:02:57 +0100 Subject: [PATCH 19/38] chore(packages): bump --- .changeset/new-guests-attend.md | 5 ----- packages/background/CHANGELOG.md | 7 +++++++ packages/background/package.json | 2 +- packages/controls/CHANGELOG.md | 7 +++++++ packages/controls/package.json | 2 +- packages/core/CHANGELOG.md | 8 +++++++- packages/core/package.json | 2 +- packages/minimap/CHANGELOG.md | 7 +++++++ packages/minimap/package.json | 2 +- packages/node-toolbar/CHANGELOG.md | 7 +++++++ packages/node-toolbar/package.json | 2 +- packages/reactflow/CHANGELOG.md | 15 ++++++++++++++- packages/reactflow/package.json | 2 +- 13 files changed, 55 insertions(+), 13 deletions(-) delete mode 100644 .changeset/new-guests-attend.md diff --git a/.changeset/new-guests-attend.md b/.changeset/new-guests-attend.md deleted file mode 100644 index 89d6660c..00000000 --- a/.changeset/new-guests-attend.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@reactflow/core': patch ---- - -Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md index 1f12e5b2..bbe4b76f 100644 --- a/packages/background/CHANGELOG.md +++ b/packages/background/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/background +## 11.1.7 + +### Patch Changes + +- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]: + - @reactflow/core@11.5.4 + ## 11.1.6 ### Patch Changes diff --git a/packages/background/package.json b/packages/background/package.json index e840a1ae..2a2b01ef 100644 --- a/packages/background/package.json +++ b/packages/background/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/background", - "version": "11.1.6", + "version": "11.1.7", "description": "Background component with different variants for React Flow", "keywords": [ "react", diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md index acf969a7..530d990b 100644 --- a/packages/controls/CHANGELOG.md +++ b/packages/controls/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/controls +## 11.1.7 + +### Patch Changes + +- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]: + - @reactflow/core@11.5.4 + ## 11.1.6 ### Patch Changes diff --git a/packages/controls/package.json b/packages/controls/package.json index dd8008f8..00abf604 100644 --- a/packages/controls/package.json +++ b/packages/controls/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/controls", - "version": "11.1.6", + "version": "11.1.7", "description": "Component to control the viewport of a React Flow instance", "keywords": [ "react", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 7f5e7d0b..23447822 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,11 @@ # @reactflow/core +## 11.5.4 + +### Patch Changes + +- [`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius + ## 11.5.3 This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS. @@ -8,7 +14,7 @@ This release fixes some issues with the newly introduced connection radius featu - [#2800](https://github.com/wbkd/react-flow/pull/2800) [`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c) - When node is not draggable, you can't move it with a selection either - [#2803](https://github.com/wbkd/react-flow/pull/2803) [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd) - connection: add status class (valid or invalid) while in connection radius -- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius +- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius ## 11.5.2 diff --git a/packages/core/package.json b/packages/core/package.json index 9171521e..eaec3cc8 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/core", - "version": "11.5.3", + "version": "11.5.4", "description": "Core components and util functions of React Flow.", "keywords": [ "react", diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md index f3b94881..c710e303 100644 --- a/packages/minimap/CHANGELOG.md +++ b/packages/minimap/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/minimap +## 11.3.7 + +### Patch Changes + +- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]: + - @reactflow/core@11.5.4 + ## 11.3.6 ### Patch Changes diff --git a/packages/minimap/package.json b/packages/minimap/package.json index 08d9c59a..56f47a75 100644 --- a/packages/minimap/package.json +++ b/packages/minimap/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/minimap", - "version": "11.3.6", + "version": "11.3.7", "description": "Minimap component for React Flow.", "keywords": [ "react", diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md index 4c15ad33..030ddb6d 100644 --- a/packages/node-toolbar/CHANGELOG.md +++ b/packages/node-toolbar/CHANGELOG.md @@ -1,5 +1,12 @@ # @reactflow/node-toolbar +## 1.1.7 + +### Patch Changes + +- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]: + - @reactflow/core@11.5.4 + ## 1.1.6 ### Patch Changes diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json index 3788fd33..e2fe31f3 100644 --- a/packages/node-toolbar/package.json +++ b/packages/node-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@reactflow/node-toolbar", - "version": "1.1.6", + "version": "1.1.7", "description": "A toolbar component for React Flow that can be attached to a node.", "keywords": [ "react", diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md index 4201ed0b..4d6beef7 100644 --- a/packages/reactflow/CHANGELOG.md +++ b/packages/reactflow/CHANGELOG.md @@ -1,5 +1,18 @@ # reactflow +## 11.5.5 + +### Patch Changes + +- [`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius + +- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]: + - @reactflow/core@11.5.4 + - @reactflow/background@11.1.7 + - @reactflow/controls@11.1.7 + - @reactflow/minimap@11.3.7 + - @reactflow/node-toolbar@1.1.7 + ## 11.5.4 This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS. @@ -8,7 +21,7 @@ This release fixes some issues with the newly introduced connection radius featu - [#2800](https://github.com/wbkd/react-flow/pull/2800) [`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c) - When node is not draggable, you can't move it with a selection either - [#2803](https://github.com/wbkd/react-flow/pull/2803) [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd) - connection: add status class (valid or invalid) while in connection radius -- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius +- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius - Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]: - @reactflow/core@11.5.3 diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json index 593e37b1..c305313f 100644 --- a/packages/reactflow/package.json +++ b/packages/reactflow/package.json @@ -1,6 +1,6 @@ { "name": "reactflow", - "version": "11.5.4", + "version": "11.5.5", "description": "A highly customizable React library for building node-based editors and interactive flow charts", "keywords": [ "react", From 806c1dfa7725d956e912c75778f5e459bd03b9c9 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Feb 2023 11:13:33 +0100 Subject: [PATCH 20/38] feat(core): add `nodes` option to `fitView` # What's changed? - Add `nodes` option to `fitView` - Allows `fitView` to only fit around a certain set of specified nodeIds --- packages/core/src/store/utils.ts | 6 +++++- packages/core/src/types/general.ts | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index caf860af..d7944141 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -141,7 +141,11 @@ export function fitView(get: StoreApi['getState'], options: Inte if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) { if (d3Zoom && d3Selection) { - const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); + let nodes: Node[] = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); + + if (options.nodes?.length) { + nodes = nodes.filter((n) => options.nodes?.includes(n.id)) + } const nodesInitialized = nodes.every((n) => n.width && n.height); diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 4abfa405..3c1dd4a8 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -76,6 +76,7 @@ export type FitViewOptions = { minZoom?: number; maxZoom?: number; duration?: number; + nodes?: string[]; }; export type OnConnectStartParams = { From 23424ea6750f092210f83df17a00c89adb910d96 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Feb 2023 11:14:27 +0100 Subject: [PATCH 21/38] chore(changeset): add --- .changeset/witty-actors-clap.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/witty-actors-clap.md diff --git a/.changeset/witty-actors-clap.md b/.changeset/witty-actors-clap.md new file mode 100644 index 00000000..29fa7498 --- /dev/null +++ b/.changeset/witty-actors-clap.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Add `nodes` to fit view options to allow fitting view only around specified set of nodes From 3d65627de57249d976a74b744371788c62a5b304 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Feb 2023 14:02:46 +0100 Subject: [PATCH 22/38] chore(core): cleanup node filter fn --- packages/core/src/store/utils.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index d7944141..0023db71 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -141,11 +141,16 @@ export function fitView(get: StoreApi['getState'], options: Inte if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) { if (d3Zoom && d3Selection) { - let nodes: Node[] = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); + const nodes = getNodes().filter((n) => { + const isVisible = (options.includeHiddenNodes ? n.width && n.height : !n.hidden); + let shouldInclude = true; - if (options.nodes?.length) { - nodes = nodes.filter((n) => options.nodes?.includes(n.id)) - } + if (options.nodes?.length) { + shouldInclude = options.nodes.includes(n.id); + } + + return isVisible && shouldInclude; + }); const nodesInitialized = nodes.every((n) => n.width && n.height); From 54509aa5629a7e11913bb29d74ee2f6c6ec9cc83 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 7 Feb 2023 12:58:24 +0100 Subject: [PATCH 23/38] fix(core): avoid edge update if not using left mouse btn --- packages/core/src/components/Edges/wrapEdge.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index d53044f7..80a6be7d 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/core/src/components/Edges/wrapEdge.tsx @@ -89,6 +89,11 @@ export default (EdgeComponent: ComponentType) => { const onEdgeMouseLeave = getMouseHandler(id, store.getState, onMouseLeave); const handleEdgeUpdater = (event: React.MouseEvent, isSourceHandle: boolean) => { + // avoid triggering edge updater if mouse btn is not left + if (event.button !== 0) { + return; + } + const nodeId = isSourceHandle ? target : source; const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null; const handleType = isSourceHandle ? 'target' : 'source'; From 0d259b028558aab650546f3371a85f3bce45252f Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 7 Feb 2023 12:59:07 +0100 Subject: [PATCH 24/38] chore(changeset): add --- .changeset/gold-pans-appear.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gold-pans-appear.md diff --git a/.changeset/gold-pans-appear.md b/.changeset/gold-pans-appear.md new file mode 100644 index 00000000..fd5b5c79 --- /dev/null +++ b/.changeset/gold-pans-appear.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Avoid triggering edge update if not using left mouse button From 64c7887a0ec210d5deef4823120fecd0eb71170b Mon Sep 17 00:00:00 2001 From: Totoro-moroku Date: Wed, 8 Feb 2023 21:57:41 +0900 Subject: [PATCH 25/38] typescript: fitView return type #2823 --- packages/core/src/types/general.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 4abfa405..d9808e57 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -30,7 +30,7 @@ export type NodeTypesWrapped = { [key: string]: MemoExoticComponent }; export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent> }; -export type FitView = (fitViewOptions?: FitViewOptions) => void; +export type FitView = (fitViewOptions?: FitViewOptions) => boolean; export type Project = (position: XYPosition) => XYPosition; From c180527239ef6fbf76c40f1740b55055395c8d6a Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 12:17:43 +0100 Subject: [PATCH 26/38] chore(fitview): cleanup --- packages/core/src/hooks/useViewportHelper.ts | 6 +-- packages/core/src/store/utils.ts | 44 ++++++++++---------- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/core/src/hooks/useViewportHelper.ts b/packages/core/src/hooks/useViewportHelper.ts index ef151aa3..522d6ac8 100644 --- a/packages/core/src/hooks/useViewportHelper.ts +++ b/packages/core/src/hooks/useViewportHelper.ts @@ -4,7 +4,7 @@ import { shallow } from 'zustand/shallow'; import { useStoreApi, useStore } from '../hooks/useStore'; import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph'; -import { fitView as fitViewStore } from '../store/utils'; +import { fitView } from '../store/utils'; import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types'; // eslint-disable-next-line @typescript-eslint/no-empty-function @@ -17,7 +17,7 @@ const initialViewportHelper: ViewportHelperFunctions = { getZoom: () => 1, setViewport: noop, getViewport: () => ({ x: 0, y: 0, zoom: 1 }), - fitView: noop, + fitView: () => false, setCenter: noop, fitBounds: noop, project: (position: XYPosition) => position, @@ -51,7 +51,7 @@ const useViewportHelper = (): ViewportHelperFunctions => { const [x, y, zoom] = store.getState().transform; return { x, y, zoom }; }, - fitView: (options) => fitViewStore(store.getState, options), + fitView: (options) => fitView(store.getState, options), setCenter: (x, y, options) => { const { width, height, maxZoom } = store.getState(); const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom; diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index caf860af..6be6bae7 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -138,35 +138,35 @@ export function fitView(get: StoreApi['getState'], options: Inte fitViewOnInit, nodeOrigin, } = get(); + const isInitialFitView = options.initial && !fitViewOnInitDone && fitViewOnInit; + const d3initialized = d3Zoom && d3Selection; - if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) { - if (d3Zoom && d3Selection) { - const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); + if (d3initialized && (isInitialFitView || !options.initial)) { + const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden)); - const nodesInitialized = nodes.every((n) => n.width && n.height); + const nodesInitialized = nodes.every((n) => n.width && n.height); - if (nodes.length > 0 && nodesInitialized) { - const bounds = getRectOfNodes(nodes, nodeOrigin); + if (nodes.length > 0 && nodesInitialized) { + const bounds = getRectOfNodes(nodes, nodeOrigin); - const [x, y, zoom] = getTransformForBounds( - bounds, - width, - height, - options.minZoom ?? minZoom, - options.maxZoom ?? maxZoom, - options.padding ?? 0.1 - ); + const [x, y, zoom] = getTransformForBounds( + bounds, + width, + height, + options.minZoom ?? minZoom, + options.maxZoom ?? maxZoom, + options.padding ?? 0.1 + ); - const nextTransform = zoomIdentity.translate(x, y).scale(zoom); + const nextTransform = zoomIdentity.translate(x, y).scale(zoom); - if (typeof options.duration === 'number' && options.duration > 0) { - d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform); - } else { - d3Zoom.transform(d3Selection, nextTransform); - } - - return true; + if (typeof options.duration === 'number' && options.duration > 0) { + d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform); + } else { + d3Zoom.transform(d3Selection, nextTransform); } + + return true; } } From f3de9335af6cd96cd77dc77f24a944eef85384e5 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 12:18:37 +0100 Subject: [PATCH 27/38] chore(changeset): add --- .changeset/perfect-meals-confess.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/perfect-meals-confess.md diff --git a/.changeset/perfect-meals-confess.md b/.changeset/perfect-meals-confess.md new file mode 100644 index 00000000..152ecf8a --- /dev/null +++ b/.changeset/perfect-meals-confess.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +fitView: return type boolean From a501f9a6436d2d95e86b1dd3b98d8a788844dafa Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 12:42:22 +0100 Subject: [PATCH 28/38] refactor(fitview-nodes): cleanup --- .../vite-app/src/examples/Layouting/index.tsx | 53 ++++++++++--------- .../examples/Layouting/layouting.module.css | 7 --- packages/core/src/store/utils.ts | 7 ++- packages/core/src/types/general.ts | 2 +- 4 files changed, 32 insertions(+), 37 deletions(-) diff --git a/examples/vite-app/src/examples/Layouting/index.tsx b/examples/vite-app/src/examples/Layouting/index.tsx index 6e607551..9a9ed122 100644 --- a/examples/vite-app/src/examples/Layouting/index.tsx +++ b/examples/vite-app/src/examples/Layouting/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import ReactFlow, { Controls, ReactFlowProvider, @@ -10,6 +10,8 @@ import ReactFlow, { useEdgesState, MarkerType, EdgeMarker, + Panel, + useReactFlow, } from 'reactflow'; import dagre from 'dagre'; @@ -29,6 +31,7 @@ const nodeExtent: CoordinateExtent = [ const LayoutFlow = () => { const [nodes, setNodes, onNodesChange] = useNodesState(initialItems.nodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialItems.edges); + const { fitView } = useReactFlow(); const onConnect = useCallback( (connection: Connection) => { @@ -85,31 +88,31 @@ const LayoutFlow = () => { return (
- - onLayout('TB')} - onNodesChange={onNodesChange} - onEdgesChange={onEdgesChange} - > - - -
- - - - -
- + onLayout('TB')} + onNodesChange={onNodesChange} + onEdgesChange={onEdgesChange} + > + + + + + + + + + +
); }; -export default LayoutFlow; +export default () => ( + + + +); diff --git a/examples/vite-app/src/examples/Layouting/layouting.module.css b/examples/vite-app/src/examples/Layouting/layouting.module.css index b22c5ad9..28a4b5e6 100644 --- a/examples/vite-app/src/examples/Layouting/layouting.module.css +++ b/examples/vite-app/src/examples/Layouting/layouting.module.css @@ -2,10 +2,3 @@ flex-grow: 1; position: relative; } - -.controls { - position: absolute; - right: 10px; - top: 10px; - z-index: 10; -} diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index 9b5a4228..994fbf20 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -143,14 +143,13 @@ export function fitView(get: StoreApi['getState'], options: Inte if (d3initialized && (isInitialFitView || !options.initial)) { const nodes = getNodes().filter((n) => { - const isVisible = (options.includeHiddenNodes ? n.width && n.height : !n.hidden); - let shouldInclude = true; + const isVisible = options.includeHiddenNodes ? n.width && n.height : !n.hidden; if (options.nodes?.length) { - shouldInclude = options.nodes.includes(n.id); + return isVisible && options.nodes.some((optionNode) => optionNode.id === n.id); } - return isVisible && shouldInclude; + return isVisible; }); const nodesInitialized = nodes.every((n) => n.width && n.height); diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index bf9a779f..f628727e 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -76,7 +76,7 @@ export type FitViewOptions = { minZoom?: number; maxZoom?: number; duration?: number; - nodes?: string[]; + nodes?: (Partial & { id: Node['id'] })[]; }; export type OnConnectStartParams = { From 9bc76d19bb41cde4556e14a8a34538983fb73f30 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:03:11 +0100 Subject: [PATCH 29/38] fix(connections): fix connections with handles bigger than connec radius closes #2814 --- .../core/src/components/Handle/handler.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index caed0dd3..46cc64e9 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/packages/core/src/components/Handle/handler.ts @@ -67,6 +67,7 @@ export function handlePointerDown({ let autoPanStarted = false; let connection: Connection | null = null; let isValid = false; + let handleDomNode: Element | null = null; const handleLookup = getHandleLookup({ nodes: getNodes(), @@ -111,7 +112,7 @@ export function handlePointerDown({ autoPanStarted = true; } - const { handleDomNode, ...result } = isValidHandle( + const result = isValidHandle( event, prevClosestHandle, connectionMode, @@ -122,9 +123,13 @@ export function handlePointerDown({ doc ); + handleDomNode = result.handleDomNode; + connection = result.connection; + isValid = result.isValid; + setState({ connectionPosition: - prevClosestHandle && result.isValid + prevClosestHandle && isValid ? rendererPointToPoint( { x: prevClosestHandle.x, @@ -133,16 +138,13 @@ export function handlePointerDown({ transform ) : connectionPosition, - connectionStatus: getConnectionStatus(!!prevClosestHandle, result.isValid), + connectionStatus: getConnectionStatus(!!prevClosestHandle, isValid), }); - if (!prevClosestHandle && !result.isValid) { + if (!prevClosestHandle && !isValid && !handleDomNode) { return resetRecentHandle(prevActiveHandle); } - connection = result.connection; - isValid = result.isValid; - if (connection.source !== connection.target && handleDomNode) { resetRecentHandle(prevActiveHandle); prevActiveHandle = handleDomNode; @@ -154,7 +156,7 @@ export function handlePointerDown({ } function onPointerUp(event: MouseEvent | TouchEvent) { - if (prevClosestHandle && connection && isValid) { + if ((prevClosestHandle || handleDomNode) && connection && isValid) { onConnect?.(connection); } @@ -172,6 +174,7 @@ export function handlePointerDown({ autoPanStarted = false; isValid = false; connection = null; + handleDomNode = null; doc.removeEventListener('mousemove', onPointerMove as EventListener); doc.removeEventListener('mouseup', onPointerUp as EventListener); From 959b111448bba4686040473e46988be9e7befbe6 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:04:38 +0100 Subject: [PATCH 30/38] chore(changeset): add --- .changeset/four-dancers-call.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/four-dancers-call.md diff --git a/.changeset/four-dancers-call.md b/.changeset/four-dancers-call.md new file mode 100644 index 00000000..08058951 --- /dev/null +++ b/.changeset/four-dancers-call.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Fix: connections for handles with bigger handles than connection radius From 0dc307769f824d733cf2ce09faa35fe28bbdd595 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:16:24 +0100 Subject: [PATCH 31/38] refactor(safari): no user selection for edge label renderer --- packages/core/src/styles/init.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css index 9cecc294..790dcaff 100644 --- a/packages/core/src/styles/init.css +++ b/packages/core/src/styles/init.css @@ -230,4 +230,5 @@ width: 100%; height: 100%; pointer-events: none; + user-select: none; } From 7e6f5be656bbf5297097d55b9f401587923e68c0 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:48:26 +0100 Subject: [PATCH 32/38] refactor(use-key-press): handle modifier keys + inputs --- packages/core/src/utils/index.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index f1021bfb..2d801d05 100644 --- a/packages/core/src/utils/index.ts +++ b/packages/core/src/utils/index.ts @@ -103,17 +103,12 @@ export function isInputDOMNode(event: KeyboardEvent | ReactKeyboardEvent): boole // using composed path for handling shadow dom const target = (kbEvent.composedPath?.()?.[0] || event.target) as HTMLElement; + const isInput = ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable'); // we want to be able to do a multi selection event if we are in an input field - if (event.ctrlKey || event.metaKey || event.shiftKey) { - return false; - } + const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey; // when an input field is focused we don't want to trigger deletion or movement of nodes - return ( - ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || - target?.hasAttribute('contenteditable') || - !!target?.closest('.nokey') - ); + return (isInput && !isModifierKey) || !!target?.closest('.nokey'); } export const isMouseEvent = ( From 021f5a9210f47a968e50446cd2f9dae1f97880a4 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 13:49:54 +0100 Subject: [PATCH 33/38] chore(changeset): add --- .changeset/witty-eagles-type.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/witty-eagles-type.md diff --git a/.changeset/witty-eagles-type.md b/.changeset/witty-eagles-type.md new file mode 100644 index 00000000..36b86d8f --- /dev/null +++ b/.changeset/witty-eagles-type.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +refactor: use key press handle modifier keys + input From 0ad8333834c23a452a89c8601aaf9e4434dce7dd Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 13 Feb 2023 15:33:57 +0100 Subject: [PATCH 34/38] chore(examples): cleanup --- examples/vite-app/package.json | 1 + .../src/examples/Backgrounds/index.tsx | 2 +- .../vite-app/src/examples/Basic/index.tsx | 4 +-- .../examples/CustomConnectionLine/index.tsx | 2 +- .../src/examples/CustomNode/index.tsx | 2 +- .../src/examples/DefaultNodes/index.tsx | 26 ++++++++++--------- .../src/examples/DragHandle/index.tsx | 2 +- .../src/examples/DragNDrop/Sidebar.tsx | 17 +++++------- .../vite-app/src/examples/DragNDrop/index.tsx | 2 +- .../src/examples/EdgeRenderer/index.tsx | 2 +- .../vite-app/src/examples/EdgeTypes/index.tsx | 5 +--- .../vite-app/src/examples/Edges/index.tsx | 2 +- .../vite-app/src/examples/Empty/index.tsx | 2 +- .../src/examples/FloatingEdges/index.tsx | 2 +- .../vite-app/src/examples/Hidden/index.tsx | 2 +- .../src/examples/Interaction/index.tsx | 2 +- .../vite-app/src/examples/Layouting/index.tsx | 3 +-- .../src/examples/MultiFlows/index.tsx | 2 +- .../src/examples/NestedNodes/index.tsx | 2 +- .../src/examples/NodeTypeChange/index.tsx | 3 +-- .../examples/NodeTypesObjectChange/index.tsx | 2 +- .../vite-app/src/examples/Overview/index.tsx | 2 +- .../vite-app/src/examples/Provider/index.tsx | 2 +- .../src/examples/SaveRestore/index.tsx | 3 ++- .../vite-app/src/examples/Stress/index.tsx | 2 +- .../vite-app/src/examples/Subflow/index.tsx | 3 +-- .../src/examples/TouchDevice/index.tsx | 2 +- .../src/examples/Undirectional/index.tsx | 11 ++++---- .../src/examples/UpdatableEdge/index.tsx | 10 +++---- .../src/examples/UpdateNode/index.tsx | 2 +- .../src/examples/UseReactFlow/index.tsx | 19 +++++++------- pnpm-lock.yaml | 8 ++++++ 32 files changed, 76 insertions(+), 75 deletions(-) diff --git a/examples/vite-app/package.json b/examples/vite-app/package.json index 2fecdc49..7a87f510 100644 --- a/examples/vite-app/package.json +++ b/examples/vite-app/package.json @@ -25,6 +25,7 @@ }, "devDependencies": { "@cypress/skip-test": "^2.6.1", + "@types/dagre": "^0.7.48", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", "@vitejs/plugin-react": "^3.0.1", diff --git a/examples/vite-app/src/examples/Backgrounds/index.tsx b/examples/vite-app/src/examples/Backgrounds/index.tsx index bda36161..c7783b00 100644 --- a/examples/vite-app/src/examples/Backgrounds/index.tsx +++ b/examples/vite-app/src/examples/Backgrounds/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import { FC } from 'react'; import ReactFlow, { Node, diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx index 67bbc0fd..970aac57 100644 --- a/examples/vite-app/src/examples/Basic/index.tsx +++ b/examples/vite-app/src/examples/Basic/index.tsx @@ -1,4 +1,4 @@ -import React, { MouseEvent } from 'react'; +import { MouseEvent } from 'react'; import ReactFlow, { MiniMap, Background, @@ -8,7 +8,6 @@ import ReactFlow, { Node, Edge, useReactFlow, - NodeOrigin, } from 'reactflow'; const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node); @@ -22,7 +21,6 @@ const initialNodes: Node[] = [ data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light', - draggable: false, }, { id: '2', diff --git a/examples/vite-app/src/examples/CustomConnectionLine/index.tsx b/examples/vite-app/src/examples/CustomConnectionLine/index.tsx index e2cb53e8..669ec17b 100644 --- a/examples/vite-app/src/examples/CustomConnectionLine/index.tsx +++ b/examples/vite-app/src/examples/CustomConnectionLine/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import ReactFlow, { Node, addEdge, diff --git a/examples/vite-app/src/examples/CustomNode/index.tsx b/examples/vite-app/src/examples/CustomNode/index.tsx index 92553087..27fab297 100644 --- a/examples/vite-app/src/examples/CustomNode/index.tsx +++ b/examples/vite-app/src/examples/CustomNode/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react'; +import { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react'; import ReactFlow, { MiniMap, Controls, diff --git a/examples/vite-app/src/examples/DefaultNodes/index.tsx b/examples/vite-app/src/examples/DefaultNodes/index.tsx index 7590f8b9..affd4ce7 100644 --- a/examples/vite-app/src/examples/DefaultNodes/index.tsx +++ b/examples/vite-app/src/examples/DefaultNodes/index.tsx @@ -1,4 +1,12 @@ -import ReactFlow, { useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow'; +import ReactFlow, { + useReactFlow, + Node, + Edge, + ReactFlowProvider, + Background, + BackgroundVariant, + Panel, +} from 'reactflow'; const defaultNodes: Node[] = [ { @@ -72,18 +80,12 @@ const DefaultNodes = () => { -
- - - + + + + -
+ ); }; diff --git a/examples/vite-app/src/examples/DragHandle/index.tsx b/examples/vite-app/src/examples/DragHandle/index.tsx index b0f87e94..8e6bbf98 100644 --- a/examples/vite-app/src/examples/DragHandle/index.tsx +++ b/examples/vite-app/src/examples/DragHandle/index.tsx @@ -1,4 +1,4 @@ -import React, { MouseEvent } from 'react'; +import { MouseEvent } from 'react'; import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow'; import DragHandleNode from './DragHandleNode'; diff --git a/examples/vite-app/src/examples/DragNDrop/Sidebar.tsx b/examples/vite-app/src/examples/DragNDrop/Sidebar.tsx index 76147544..fc1eec3b 100644 --- a/examples/vite-app/src/examples/DragNDrop/Sidebar.tsx +++ b/examples/vite-app/src/examples/DragNDrop/Sidebar.tsx @@ -1,4 +1,5 @@ -import React, { DragEvent } from 'react'; +import { DragEvent } from 'react'; + import styles from './dnd.module.css'; const onDragStart = (event: DragEvent, nodeType: string) => { @@ -9,25 +10,19 @@ const onDragStart = (event: DragEvent, nodeType: string) => { const Sidebar = () => { return (