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

Merge pull request #3820 from xyflow/fix-selection-key

Browse Source 
Selection process is not interrupted by selectionKey being let go
This commit is contained in:
Moritz Klack
2024-01-23 15:25:21 +01:00
committed by GitHub
parent 2e1bfc35c0 33bf6b0e46
commit a6c03ffc9a
4 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/CHANGELOG.md
+1
View File
@@ -4,6 +4,7 @@
### Patch changes ### Patch changes
- selection box is not interrupted by selectionKey being let go
- fix `OnNodeDrag` type - fix `OnNodeDrag` type
- refactor(handles): do not use fallback handle if an id is being used #3409 - refactor(handles): do not use fallback handle if an id is being used #3409
packages/react/src/container/FlowRenderer/index.tsx
+5 -3
View File
@@ -28,7 +28,9 @@ export type FlowRendererProps = Omit<
children: ReactNode; children: ReactNode;
}; };
const selector = (s: ReactFlowState) => s.nodesSelectionActive; const selector = (s: ReactFlowState) => {
return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
};
const FlowRendererComponent = ({ const FlowRendererComponent = ({
children, children,
@@ -67,13 +69,13 @@ const FlowRendererComponent = ({
onViewportChange, onViewportChange,
isControlledViewport, isControlledViewport,
}: FlowRendererProps) => { }: FlowRendererProps) => {
const nodesSelectionActive = useStore(selector); const { nodesSelectionActive, userSelectionActive } = useStore(selector);
const selectionKeyPressed = useKeyPress(selectionKeyCode); const selectionKeyPressed = useKeyPress(selectionKeyCode);
const panActivationKeyPressed = useKeyPress(panActivationKeyCode); const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
const panOnDrag = panActivationKeyPressed || _panOnDrag; const panOnDrag = panActivationKeyPressed || _panOnDrag;
const panOnScroll = panActivationKeyPressed || _panOnScroll; const panOnScroll = panActivationKeyPressed || _panOnScroll;
const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true); const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true);
useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }); useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
packages/svelte/CHANGELOG.md
+1
View File
@@ -8,6 +8,7 @@
## Patch changes ## Patch changes
- selection box is not interrupted by selectionKey being let go
- Edge label has a default background and is clickable - Edge label has a default background and is clickable
- refactor(handles): do not use fallback handle if an id is being used #3409 - refactor(handles): do not use fallback handle if an id is being used #3409
packages/svelte/src/lib/container/Pane/Pane.svelte
+2 -1
View File
@@ -73,7 +73,8 @@
let selectedNodes: Node[] = []; let selectedNodes: Node[] = [];
$: _panOnDrag = $panActivationKeyPressed || panOnDrag; $: _panOnDrag = $panActivationKeyPressed || panOnDrag;
$: isSelecting = $selectionKeyPressed || (selectionOnDrag && _panOnDrag !== true); $: isSelecting =
$selectionKeyPressed || $selectionRect || (selectionOnDrag && _panOnDrag !== true);
$: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user'); $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
function onClick(event: MouseEvent | TouchEvent) { function onClick(event: MouseEvent | TouchEvent) {