feature/MIG-6673 Expose handlers and other props to the diagram (#31)

* feature/MIG-6673 Expose handlers

* feature/MIG-6673 Default to false for connectable prop

* feature/MIG-6673 Enforce markers

Author: lchans

src/components/canvas/canvas.tsx

@@ -1,5 +1,14 @@
 import styled from '@emotion/styled';
-import { Background, ProOptions, ReactFlow, ReactFlowProps, useEdgesState, useNodesState } from '@xyflow/react';
+import {
+  Background,
+  ConnectionMode,
+  ProOptions,
+  ReactFlow,
+  ReactFlowProps,
+  SelectionMode,
+  useEdgesState,
+  useNodesState,
+} from '@xyflow/react';
 import { useEffect } from 'react';
 
 import { MiniMap } from '@/components/controls/mini-map';
@@ -66,8 +75,11 @@ export const Canvas = ({ title, nodes: externalNodes, edges: externalEdges, onCo
         onlyRenderVisibleElements={true}
         edges={edges}
         connectionLineComponent={ConnectionLine}
+        connectionMode={ConnectionMode.Loose}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
+        selectionMode={SelectionMode.Partial}
+        nodesDraggable={true}
         onConnect={onConnect}
         {...rest}
       >

src/components/canvas/use-canvas.test.tsx

@@ -16,6 +16,7 @@ describe('use-canvas', () => {
           y: 100,
         },
         draggable: false,
+        connectable: false,
         measured: {
           height: 36,
           width: 244,
@@ -42,6 +43,7 @@ describe('use-canvas', () => {
           width: 244,
         },
         draggable: true,
+        connectable: false,
         data: {
           disabled: undefined,
           borderVariant: undefined,

src/components/canvas/use-canvas.tsx

@@ -7,10 +7,11 @@ export const useCanvas = (externalNodes: ExternalNode[], externalEdges: EdgeProp
   const initialNodes: InternalNode[] = useMemo(
     () =>
       externalNodes.map(node => {
-        const { title, fields, borderVariant, disabled, ...rest } = node;
+        const { title, fields, borderVariant, disabled, connectable, ...rest } = node;
         return {
           ...rest,
           draggable: !disabled,
+          connectable: connectable || false,
           data: {
             title,
             disabled,

src/index.ts

@@ -2,3 +2,4 @@ export * from '@/components/diagram';
 export * from '@/utilities/apply-layout';
 export * from '@/utilities/add-nodes-within-bounds';
 export * from '@/types';
+export { ReactFlowProvider as DiagramProvider, useReactFlow as useDiagram, useOnSelectionChange } from '@xyflow/react';

src/types/component-props.ts

@@ -2,8 +2,32 @@ import { ReactFlowProps } from '@xyflow/react';
 
 import { EdgeProps } from '@/types/edge';
 import { NodeProps } from '@/types/node';
+import { InternalEdge, InternalNode } from '@/types/internal';
 
-type BaseProps = Pick<ReactFlowProps, 'title' | 'onConnect' | 'onPaneClick'>;
+type BaseProps = Pick<
+  ReactFlowProps<InternalNode, InternalEdge>,
+  | 'title'
+  | 'id'
+  | 'className'
+  | 'onConnect'
+  | 'onPaneClick'
+  | 'onEdgeClick'
+  | 'onNodeContextMenu'
+  | 'onSelectionContextMenu'
+  | 'onSelectionChange'
+  | 'onSelectionDragStop'
+  | 'onNodeDrag'
+  | 'onNodeDragStop'
+  | 'onConnectStart'
+  | 'panOnDrag'
+  | 'fitViewOptions'
+  | 'selectionKeyCode'
+  | 'multiSelectionKeyCode'
+  | 'zoomOnPinch'
+  | 'zoomOnScroll'
+  | 'maxZoom'
+  | 'minZoom'
+>;
 
 export interface DiagramProps extends BaseProps {
   isDarkMode?: boolean;