Add optional node dragHandle prop as DraggableCore handle.

#1413
xyflow · Oct 4, 2021 · 0d497b6 · 0d497b6
1 parent 8c4fafa
commit 0d497b6
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
@@ -48,6 +48,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     snapGrid,
     isDragging,
     resizeObserver,
+    dragHandle,
   }: WrapNodeProps) => {
     const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
@@ -241,6 +242,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         nodeRef={nodeElement}
         grid={grid}
         enableUserSelectHack={false}
+        handle={dragHandle}
       >
         <div
           className={nodeClasses}
@@ -266,6 +268,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
               sourcePosition={sourcePosition}
               targetPosition={targetPosition}
               isDragging={isDragging}
+              dragHandle={dragHandle}
             />
           </Provider>
         </div>

diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
@@ -104,6 +104,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             isSelectable={isSelectable}
             isConnectable={isConnectable}
             resizeObserver={resizeObserver}
+            dragHandle={node.dragHandle}
           />
         );
       })}

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -49,6 +49,7 @@ export interface Node<T = any> {
   draggable?: boolean;
   selectable?: boolean;
   connectable?: boolean;
+  dragHandle?: string;
 }
 
 export enum ArrowHeadType {
@@ -186,6 +187,7 @@ export interface NodeProps<T = any> {
   targetPosition?: Position;
   sourcePosition?: Position;
   isDragging?: boolean;
+  dragHandle?: string;
 }
 
 export interface NodeComponentProps<T = any> {
@@ -210,6 +212,7 @@ export interface NodeComponentProps<T = any> {
   onNodeDragStop?: (node: Node) => void;
   style?: CSSProperties;
   isDragging?: boolean;
+  dragHandle?: string;
 }
 
 export interface WrapNodeProps<T = any> {
@@ -243,6 +246,7 @@ export interface WrapNodeProps<T = any> {
   snapGrid?: SnapGrid;
   isDragging?: boolean;
   resizeObserver: ResizeObserver | null;
+  dragHandle?: string;
 }
 
 export type FitViewParams = {