feature/COMPASS-9629 expose onNodeClick and nodeDragThreshold component props (#101)

Author: gribnoysup

src/components/canvas/canvas.tsx

@@ -54,6 +54,7 @@ export const Canvas = ({
   onNodeDrag,
   onNodeDragStop,
   onEdgeClick,
+  onNodeClick,
   onSelectionDragStop,
   onSelectionContextMenu,
   onSelectionChange,
@@ -110,6 +111,13 @@ export const Canvas = ({
     [onEdgeClick],
   );
 
+  const _onNodeClick = useCallback(
+    (event: MouseEvent, node: InternalNode) => {
+      onNodeClick?.(event, convertToExternalNode(node));
+    },
+    [onNodeClick],
+  );
+
   const _onSelectionContextMenu = useCallback(
     (event: MouseEvent, nodes: InternalNode[]) => {
       onSelectionContextMenu?.(event, convertToExternalNodes(nodes));
@@ -149,6 +157,7 @@ export const Canvas = ({
         onNodeDragStop={_onNodeDragStop}
         onSelectionDragStop={_onSelectionDragStop}
         onEdgeClick={_onEdgeClick}
+        onNodeClick={_onNodeClick}
         onSelectionContextMenu={_onSelectionContextMenu}
         onSelectionChange={_onSelectionChange}
         {...rest}

src/types/component-props.ts

@@ -19,6 +19,11 @@ export type OnPaneClickHandler = (event: ReactMouseEvent) => void;
  */
 export type OnEdgeClickHandler = (event: ReactMouseEvent, edge: EdgeProps) => void;
 
+/**
+ * Called when a node is clicked.
+ */
+export type OnNodeClickHandler = (event: ReactMouseEvent, edge: NodeProps) => void;
+
 /**
  * Called when a node is right-clicked.
  */
@@ -103,6 +108,11 @@ export interface DiagramProps {
    */
   onEdgeClick?: OnEdgeClickHandler;
 
+  /**
+   * Callback when the user clicks on a node.
+   */
+  onNodeClick?: OnNodeClickHandler;
+
   /**
    * Callback when the user right-clicks on a node.
    */
@@ -181,7 +191,15 @@ export interface DiagramProps {
   /**
    * Whether to only render elements that are currently visible in the viewport.
    * This can improve performance for large diagrams.
-   * @defaults true
+   * @default true
    */
   onlyRenderVisibleElements?: boolean;
+
+  /**
+   * With a threshold greater than zero you can delay node drag events. If
+   * threshold equals 1, you need to drag the node 1 pixel before a drag event
+   * is fired. 1 is the default value, so that clicks don’t trigger drag events.
+   * @default 1
+   */
+  nodeDragThreshold?: number;
 }