feat(node): handle nodrag class

xyflow · Oct 24, 2019 · 5030f7d · 5030f7d
1 parent 70ab31b
commit 5030f7d
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 84 deletions.
diff --git a/dist/ReactFlow.esm.js b/dist/ReactFlow.esm.js
diff --git a/dist/ReactFlow.esm.js.map b/dist/ReactFlow.esm.js.map
diff --git a/dist/ReactFlow.js b/dist/ReactFlow.js
diff --git a/dist/ReactFlow.js.map b/dist/ReactFlow.js.map
diff --git a/example/src/CustomNode/ColorSelectorNode.js b/example/src/CustomNode/ColorSelectorNode.js
@@ -14,7 +14,7 @@ export default ({ data, styles }) => {
         onConnect={params => console.log('handle onConnect', params)}
       />
       <div>Custom Color Picker Node: <strong>{data.color}</strong></div>
-      <input type="color" onChange={data.onChange} defaultValue={data.color}/>
+      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color}/>
       <Handle
         type="source"
         position="right"

diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
@@ -1,7 +1,6 @@
-import React, { memo, MouseEvent, ComponentType } from 'react';
+import React, { memo, ComponentType } from 'react';
 import cx from 'classnames';
 
-import { isInputDOMNode } from '../../utils';
 import store from '../../store';
 import { ElementId, Edge, EdgeCompProps } from '../../types';
 
@@ -20,8 +19,8 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
   const EdgeWrapper = memo(
     ({ id, source, target, type, animated, selected, onClick, isInteractive, ...rest }: EdgeWrapperProps) => {
       const edgeClasses = cx('react-flow__edge', { selected, animated });
-      const onEdgeClick = (evt: MouseEvent): void => {
-        if (isInputDOMNode(evt) || !isInteractive) {
+      const onEdgeClick = (): void => {
+        if (!isInteractive) {
           return;
         }
 

diff --git a/src/components/Handle/BaseHandle.tsx b/src/components/Handle/BaseHandle.tsx
@@ -1,14 +1,7 @@
 import React, { memo, MouseEvent as ReactMouseEvent } from 'react';
 import cx from 'classnames';
 
-import {
-  HandleType,
-  ElementId,
-  Position,
-  XYPosition,
-  OnConnectFunc,
-  Connection,
-} from '../../types';
+import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection } from '../../types';
 
 type ValidConnectionFunc = (connection: Connection) => boolean;
 type SetSourceIdFunc = (nodeId: ElementId | null) => void;
@@ -76,11 +69,7 @@ function onMouseDown(
       isHoveringHandle: false,
     };
 
-    if (
-      elementBelow &&
-      (elementBelow.classList.contains('target') ||
-        elementBelow.classList.contains('source'))
-    ) {
+    if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
       let connection: Connection = { source: null, target: null };
 
       if (isTarget) {
@@ -107,12 +96,7 @@ function onMouseDown(
       y: evt.clientY - containerBounds.top,
     });
 
-    const {
-      connection,
-      elementBelow,
-      isValid,
-      isHoveringHandle,
-    } = checkElementBelowIsValid(evt);
+    const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(evt);
 
     if (!isHoveringHandle) {
       return resetRecentHandle();
@@ -159,7 +143,7 @@ const BaseHandle = memo(
     ...rest
   }: BaseHandleProps) => {
     const isTarget = type === 'target';
-    const handleClasses = cx('react-flow__handle', className, position, {
+    const handleClasses = cx('react-flow__handle', 'nodrag', className, position, {
       source: !isTarget,
       target: isTarget,
     });
@@ -172,15 +156,7 @@ const BaseHandle = memo(
         data-handlepos={position}
         className={handleClasses}
         onMouseDown={evt =>
-          onMouseDown(
-            evt,
-            nodeIdWithHandleId,
-            setSourceId,
-            setPosition,
-            onConnect,
-            isTarget,
-            isValidConnection
-          )
+          onMouseDown(evt, nodeIdWithHandleId, setSourceId, setPosition, onConnect, isTarget, isValidConnection)
         }
         {...rest}
       />

diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState, memo, ComponentType } from 'react';
-import { DraggableCore, DraggableEvent } from 'react-draggable';
+import { DraggableCore } from 'react-draggable';
 import cx from 'classnames';
 import { ResizeObserver } from 'resize-observer';
 
-import { getDimensions, isInputDOMNode } from '../../utils';
+import { getDimensions } from '../../utils';
 import { Provider } from '../../contexts/NodeIdContext';
 import store from '../../store';
 import {
@@ -17,16 +17,6 @@ import {
   WrapNodeProps,
 } from '../../types';
 
-const isHandle = (evt: MouseEvent | DraggableEvent) => {
-  const target = evt.target as HTMLElement;
-
-  return (
-    target.className &&
-    target.className.includes &&
-    (target.className.includes('source') || target.className.includes('target'))
-  );
-};
-
 const getHandleBounds = (
   selector: string,
   nodeElement: HTMLDivElement,
@@ -76,10 +66,6 @@ const onStart = (
   transform: Transform,
   position: XYPosition
 ): false | void => {
-  if (isInputDOMNode(evt) || isHandle(evt)) {
-    return false;
-  }
-
   const scaledClient: XYPosition = {
     x: evt.clientX * (1 / transform[2]),
     y: evt.clientY * (1 / transform[2]),
@@ -207,6 +193,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           onStop={() => onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data)}
           scale={transform[2]}
           disabled={!isInteractive}
+          cancel=".nodrag"
         >
           <div className={nodeClasses} ref={nodeElement} style={nodeStyle}>
             <Provider value={id}>