Merge pull request #2964 from wbkd/refactor/add-resizer

refactor(reactflow): add node resizer package

.changeset/yellow-students-think.md

@@ -0,0 +1,5 @@
+---
+'reactflow': minor
+---
+
+add node-resizer to reactflow package

examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx

@@ -1,8 +1,6 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
+import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
 
-import { NodeResizeControl } from '@reactflow/node-resizer';
-import '@reactflow/node-resizer/dist/style.css';
 import ResizeIcon from './ResizeIcon';
 
 const controlStyle = {

examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx

@@ -1,8 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
-import { NodeResizer } from '@reactflow/node-resizer';
-
-import '@reactflow/node-resizer/dist/style.css';
+import { Handle, Position, NodeProps, NodeResizer } from 'reactflow';
 
 const DefaultResizerNode: FC<NodeProps> = ({ data, selected }) => {
   return (

examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx

@@ -1,8 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
-import { NodeResizeControl } from '@reactflow/node-resizer';
-
-import '@reactflow/node-resizer/dist/style.css';
+import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
 
 const HorizontalResizerNode: FC<NodeProps> = ({ data }) => {
   return (

examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx

@@ -1,8 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
-
-import { NodeResizeControl } from '@reactflow/node-resizer';
-import '@reactflow/node-resizer/dist/style.css';
+import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (

examples/vite-app/src/examples/NodeResizer/index.tsx

@@ -6,6 +6,8 @@ import CustomResizer from './CustomResizer';
 import VerticalResizer from './VerticalResizer';
 import HorizontalResizer from './HorizontalResizer';
 
+import 'reactflow/dist/style.css';
+
 const nodeTypes = {
   defaultResizer: DefaultResizer,
   customResizer: CustomResizer,

packages/reactflow/package.json

@@ -39,6 +39,7 @@
     "@reactflow/controls": "workspace:*",
     "@reactflow/core": "workspace:*",
     "@reactflow/minimap": "workspace:*",
+    "@reactflow/node-resizer": "workspace:*",
     "@reactflow/node-toolbar": "workspace:*"
   },
   "peerDependencies": {

packages/reactflow/src/base.css

@@ -1,3 +1,4 @@
 @import '@reactflow/core/dist/base.css';
 @import '@reactflow/controls/dist/style.css';
 @import '@reactflow/minimap/dist/style.css';
+@import '@reactflow/node-resizer/dist/style.css';

packages/reactflow/src/index.ts

@@ -3,5 +3,6 @@ export * from '@reactflow/minimap';
 export * from '@reactflow/controls';
 export * from '@reactflow/background';
 export * from '@reactflow/node-toolbar';
+export * from '@reactflow/node-resizer';
 
 export { ReactFlow as default } from '@reactflow/core';

packages/reactflow/src/style.css

@@ -1,3 +1,4 @@
 @import '@reactflow/core/dist/style.css';
 @import '@reactflow/controls/dist/style.css';
 @import '@reactflow/minimap/dist/style.css';
+@import '@reactflow/node-resizer/dist/style.css';

pnpm-lock.yaml

@@ -284,6 +284,7 @@ importers:
       '@reactflow/core': workspace:*
       '@reactflow/eslint-config': workspace:*
       '@reactflow/minimap': workspace:*
+      '@reactflow/node-resizer': workspace:^2.1.0
       '@reactflow/node-toolbar': workspace:*
       '@reactflow/rollup-config': workspace:*
       '@reactflow/tsconfig': workspace:*
@@ -296,6 +297,7 @@ importers:
       '@reactflow/controls': link:../controls
       '@reactflow/core': link:../core
       '@reactflow/minimap': link:../minimap
+      '@reactflow/node-resizer': link:../node-resizer
       '@reactflow/node-toolbar': link:../node-toolbar
     devDependencies:
       '@reactflow/eslint-config': link:../../tooling/eslint-config