From e03d6c23ec4353b84ee41892f88105ee0683dc27 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 16 Jun 2022 11:59:52 +0200 Subject: [PATCH 1/4] fix(selection): only calculate selection box if selected nodes > 0 --- example/src/Layouting/index.tsx | 9 ++++++++- src/utils/graph.ts | 4 ++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/example/src/Layouting/index.tsx b/example/src/Layouting/index.tsx index 88170feb..8e4ce5bf 100644 --- a/example/src/Layouting/index.tsx +++ b/example/src/Layouting/index.tsx @@ -59,6 +59,10 @@ const LayoutFlow = () => { setNodes(layoutedNodes); }; + const unselect = () => { + setNodes((nds) => nds.map((n) => ({ ...n, selected: false }))); + }; + return (
@@ -77,7 +81,10 @@ const LayoutFlow = () => { - + +
diff --git a/src/utils/graph.ts b/src/utils/graph.ts index 37765a01..a426baed 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -141,6 +141,10 @@ export const pointToRendererPoint = ( }; export const getRectOfNodes = (nodes: Node[]): Rect => { + if (nodes.length === 0) { + return { x: 0, y: 0, width: 0, height: 0 }; + } + const box = nodes.reduce( (currBox, { positionAbsolute, position, width, height }) => getBoundsOfBoxes( From d6de9c2c12a2e1307793957e7045efe8102477e2 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 16 Jun 2022 12:10:46 +0200 Subject: [PATCH 2/4] style(handles): put position in default styles closes #2193 --- src/style.css | 1 + src/theme-default.css | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index 88fab950..b78ee614 100644 --- a/src/style.css +++ b/src/style.css @@ -106,6 +106,7 @@ } .react-flow__handle { + position: absolute; pointer-events: none; &.connectable { diff --git a/src/theme-default.css b/src/theme-default.css index 3df0b997..07a2e70b 100644 --- a/src/theme-default.css +++ b/src/theme-default.css @@ -88,7 +88,6 @@ } .react-flow__handle { - position: absolute; width: 6px; height: 6px; background: #555; From 7cddc81d866a3d1c3e9ff2b1fea053b3dc498474 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 16 Jun 2022 12:27:07 +0200 Subject: [PATCH 3/4] refactor(zoomActivationKeyCode): accept null, cleanup types cloeses #2211 --- src/container/FlowRenderer/index.tsx | 29 +++++++++++++-------------- src/container/ZoomPane/index.tsx | 30 +++++++--------------------- src/types/component-props.ts | 2 +- 3 files changed, 22 insertions(+), 39 deletions(-) diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx index faae8f49..33fb920d 100644 --- a/src/container/FlowRenderer/index.tsx +++ b/src/container/FlowRenderer/index.tsx @@ -11,22 +11,21 @@ import NodesSelection from '../../components/NodesSelection'; import { ReactFlowState } from '../../types'; -interface FlowRendererProps - extends Omit< - GraphViewProps, - | 'snapToGrid' - | 'nodeTypes' - | 'edgeTypes' - | 'snapGrid' - | 'connectionLineType' - | 'connectionLineContainerStyle' - | 'arrowHeadColor' - | 'onlyRenderVisibleElements' - | 'selectNodesOnDrag' - | 'defaultMarkerColor' - > { +export type FlowRendererProps = Omit< + GraphViewProps, + | 'snapToGrid' + | 'nodeTypes' + | 'edgeTypes' + | 'snapGrid' + | 'connectionLineType' + | 'connectionLineContainerStyle' + | 'arrowHeadColor' + | 'onlyRenderVisibleElements' + | 'selectNodesOnDrag' + | 'defaultMarkerColor' +> & { children: ReactNode; -} +}; const selector = (s: ReactFlowState) => ({ resetSelectedElements: s.resetSelectedElements, diff --git a/src/container/ZoomPane/index.tsx b/src/container/ZoomPane/index.tsx index 9f17226f..57a1c8a5 100644 --- a/src/container/ZoomPane/index.tsx +++ b/src/container/ZoomPane/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, ReactNode } from 'react'; +import React, { useEffect, useRef } from 'react'; import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom'; import { select, pointer } from 'd3-selection'; import shallow from 'zustand/shallow'; @@ -7,29 +7,13 @@ import { clamp } from '../../utils'; import useKeyPress from '../../hooks/useKeyPress'; import useResizeHandler from '../../hooks/useResizeHandler'; import { useStore, useStoreApi } from '../../store'; -import { Viewport, PanOnScrollMode, KeyCode, ReactFlowState, OnMove, OnMoveStart, OnMoveEnd } from '../../types'; +import { Viewport, PanOnScrollMode, ReactFlowState } from '../../types'; +import { FlowRendererProps } from '../FlowRenderer'; -interface ZoomPaneProps { - selectionKeyPressed: boolean; - elementsSelectable?: boolean; - zoomOnScroll?: boolean; - zoomOnPinch?: boolean; - panOnScroll?: boolean; - panOnScrollSpeed?: number; - panOnScrollMode?: PanOnScrollMode; - zoomOnDoubleClick?: boolean; - panOnDrag?: boolean; - defaultPosition?: [number, number]; - defaultZoom?: number; - onMove?: OnMove; - onMoveStart?: OnMoveStart; - onMoveEnd?: OnMoveEnd; - zoomActivationKeyCode?: KeyCode; - preventScrolling?: boolean; - children: ReactNode; - noWheelClassName: string; - noPanClassName: string; -} +type ZoomPaneProps = Omit< + FlowRendererProps, + 'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName' +> & { selectionKeyPressed: boolean }; const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean => prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k; diff --git a/src/types/component-props.ts b/src/types/component-props.ts index 309ba580..200495eb 100644 --- a/src/types/component-props.ts +++ b/src/types/component-props.ts @@ -90,7 +90,7 @@ export interface ReactFlowProps extends HTMLAttributes { deleteKeyCode?: KeyCode | null; selectionKeyCode?: KeyCode | null; multiSelectionKeyCode?: KeyCode | null; - zoomActivationKeyCode?: KeyCode; + zoomActivationKeyCode?: KeyCode | null; snapToGrid?: boolean; snapGrid?: [number, number]; onlyRenderVisibleElements?: boolean; From aae202388f6b2424b22e6c28a66e9bb15925319c Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 16 Jun 2022 13:35:45 +0200 Subject: [PATCH 4/4] refactor(drag-handler): allow multiselection with ctrl #2203 --- src/hooks/useDrag/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/useDrag/index.ts b/src/hooks/useDrag/index.ts index 01f1c48c..15d365f8 100644 --- a/src/hooks/useDrag/index.ts +++ b/src/hooks/useDrag/index.ts @@ -131,7 +131,6 @@ function useDrag({ .filter((event: MouseEvent) => { const target = event.target as HTMLDivElement; const isDraggable = - !event.ctrlKey && !event.button && (!noDragClassName || !hasSelector(target, `.${noDragClassName}`, nodeRef)) && (!handleSelector || hasSelector(target, handleSelector, nodeRef));