merg main

examples/react/src/examples/Basic/index.tsx

@@ -11,6 +11,7 @@ import {
   useReactFlow,
   Panel,
   OnNodeDrag,
+  FitViewOptions,
 } from '@xyflow/react';
 
 const onNodeDrag: OnNodeDrag = (_, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
@@ -54,6 +55,9 @@ const initialEdges: Edge[] = [
 ];
 
 const defaultEdgeOptions = {};
+const fitViewOptions: FitViewOptions = {
+  padding: { top: '100px', left: '0%', right: '10%', bottom: 0.1 },
+};
 
 const BasicFlow = () => {
   const {
@@ -135,6 +139,7 @@ const BasicFlow = () => {
     <ReactFlow
       defaultNodes={initialNodes}
       defaultEdges={initialEdges}
+      onNodesChange={console.log}
       onNodeClick={onNodeClick}
       onNodeDragStop={onNodeDragStop}
       onNodeDragStart={onNodeDragStart}
@@ -146,9 +151,7 @@ const BasicFlow = () => {
       minZoom={0.2}
       maxZoom={4}
       fitView
-      fitViewOptions={{
-        padding: { top: '100px', left: '0%', right: '10%', bottom: 0.1 },
-      }}
+      fitViewOptions={fitViewOptions}
       defaultEdgeOptions={defaultEdgeOptions}
       selectNodesOnDrag={false}
       elevateEdgesOnSelect

examples/react/src/examples/NodeResizer/BottomRightResizer.tsx

@@ -0,0 +1,21 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps, NodeResizeControl, ResizeControlVariant } from '@xyflow/react';
+
+const CustomResizerNode: FC<NodeProps> = ({ data }) => {
+  return (
+    <>
+      <NodeResizeControl
+        variant={ResizeControlVariant.Handle}
+        position="bottom-right"
+        resizeDirection="horizontal"
+        minWidth={100}
+        maxWidth={500}
+      />
+      <Handle type="target" position={Position.Left} />
+      <div>{data.label}</div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(CustomResizerNode);

examples/react/src/examples/NodeResizer/index.tsx

@@ -15,12 +15,14 @@ import DefaultResizer from './DefaultResizer';
 import CustomResizer from './CustomResizer';
 import VerticalResizer from './VerticalResizer';
 import HorizontalResizer from './HorizontalResizer';
+import BottomRightResizer from './BottomRightResizer';
 
 const nodeTypes = {
   defaultResizer: DefaultResizer,
   customResizer: CustomResizer,
   verticalResizer: VerticalResizer,
   horizontalResizer: HorizontalResizer,
+  bottomRightResizer: BottomRightResizer,
 };
 
 const nodeStyle = {
@@ -166,6 +168,13 @@ const initialNodes: Node[] = [
     expandParent: true,
     style: { ...nodeStyle },
   },
+  {
+    id: '6',
+    type: 'bottomRightResizer',
+    data: { label: 'Bottom Right with horizontal direction' },
+    position: { x: 500, y: 500 },
+    style: { ...nodeStyle },
+  },
 ];
 
 const CustomNodeFlow = () => {

examples/react/src/examples/UseOnSelectionChange/index.tsx

@@ -10,6 +10,7 @@ import {
   useEdgesState,
   useOnSelectionChange,
   OnSelectionChangeParams,
+  Panel,
 } from '@xyflow/react';
 
 const initialNodes: Node[] = [
@@ -51,6 +52,12 @@ const Flow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
+  const [elementsSelectable, setElementsSelectable] = useState<boolean>(true);
+  const [secondLoggerActive, setSecondLoggerActive] = useState<boolean>(true);
+
+  const toggleSecondLogger = () => {
+    setSecondLoggerActive(!secondLoggerActive);
+  };
 
   return (
     <ReactFlow
@@ -59,27 +66,17 @@ const Flow = () => {
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onConnect={onConnect}
-    />
-  );
-};
+      elementsSelectable={elementsSelectable}
+    >
+      <Panel>
+        <button onClick={toggleSecondLogger}>{secondLoggerActive ? 'Disable' : 'Enable'} Logger 2</button>
+        <button onClick={() => setElementsSelectable((s) => !s)}>toggle selectable</button>
+      </Panel>
 
-const WrappedFlow = () => {
-  const [secondLoggerActive, setSecondLoggerActive] = useState<boolean>(true);
-
-  const toggleSecondLogger = () => {
-    setSecondLoggerActive(!secondLoggerActive);
-  };
-
-  return (
-    <ReactFlowProvider>
-      <Flow />
       <SelectionLogger id="Logger 1" />
       {secondLoggerActive && <SelectionLogger id="Logger 2" />}
-      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
-        <button onClick={toggleSecondLogger}>{secondLoggerActive ? 'Disable' : 'Enable'} Logger 2</button>
-      </div>
-    </ReactFlowProvider>
+    </ReactFlow>
   );
 };
 
-export default WrappedFlow;
+export default Flow;