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

fix(react/svelte): select nodes on click when nodeDragThreshold > 0

Browse Source
This commit is contained in:
moklick
2023-10-09 15:22:58 +02:00
parent 5313a9bfcc
commit 6f9ebbf609
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/components/Nodes/wrapNode.tsx
+3 -2
View File
@@ -67,8 +67,9 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
const onContextMenuHandler = getMouseHandler(id, store.getState, onContextMenu); const onContextMenuHandler = getMouseHandler(id, store.getState, onContextMenu);
const onDoubleClickHandler = getMouseHandler(id, store.getState, onDoubleClick); const onDoubleClickHandler = getMouseHandler(id, store.getState, onDoubleClick);
const onSelectNodeHandler = (event: MouseEvent) => { const onSelectNodeHandler = (event: MouseEvent) => {
const { selectNodesOnDrag } = store.getState(); const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
if (isSelectable && (!selectNodesOnDrag || !isDraggable)) {
if (isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0)) {
// this handler gets called within the drag start event when selectNodesOnDrag=true // this handler gets called within the drag start event when selectNodesOnDrag=true
handleNodeClick({ handleNodeClick({
id, id,
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+3 -3
View File
@@ -9,13 +9,13 @@
type ComponentType type ComponentType
} from 'svelte'; } from 'svelte';
import cc from 'classcat'; import cc from 'classcat';
import { get, writable } from 'svelte/store';
import { errorMessages, type NodeProps } from '@xyflow/system'; import { errorMessages, type NodeProps } from '@xyflow/system';
import drag from '$lib/actions/drag'; import drag from '$lib/actions/drag';
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte'; import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
import type { NodeWrapperProps } from './types'; import type { NodeWrapperProps } from './types';
import { writable } from 'svelte/store';
interface $$Props extends NodeWrapperProps {} interface $$Props extends NodeWrapperProps {}
@@ -42,7 +42,7 @@
export { className as class }; export { className as class };
const store = useStore(); const store = useStore();
const { nodeTypes, addSelectedNodes } = store; const { nodeTypes, nodeDragThreshold, addSelectedNodes } = store;
let nodeRef: HTMLDivElement; let nodeRef: HTMLDivElement;
const nodeTypeValid = !!$nodeTypes[type!]; const nodeTypeValid = !!$nodeTypes[type!];
@@ -73,7 +73,7 @@
}); });
function onSelectNodeHandler(event: MouseEvent | TouchEvent) { function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
if (selectable && (!selectNodesOnDrag || !draggable)) { if (selectable && (!selectNodesOnDrag || !draggable || get(nodeDragThreshold) > 0)) {
// this handler gets called within the drag start event when selectNodesOnDrag=true // this handler gets called within the drag start event when selectNodesOnDrag=true
addSelectedNodes([id]); addSelectedNodes([id]);
} }