refactor(resizer): export resize control, add line control, styling

packages/node-resizer/src/NodeResizer.tsx

@@ -1,179 +1,25 @@
-import { useRef, useEffect } from 'react';
-import cc from 'classcat';
-import { drag } from 'd3-drag';
-import { select } from 'd3-selection';
-import {
-  useStoreApi,
-  useGetPointerPosition,
-  NodeChange,
-  NodePositionChange,
-  NodeDimensionChange,
-} from '@reactflow/core';
-import type { Dimensions, Node, XYPosition } from '@reactflow/core';
-import type { D3DragEvent, SubjectPosition } from 'd3';
+import ResizeControl from './ResizeControl';
+import type { NodeResizerProps } from './types';
 
-type NodeResizerProps = {
-  nodeId: string;
-};
-
-type ResizeHandleProps = {
-  nodeId: string;
-  invertX?: boolean;
-  invertY?: boolean;
-  enableX?: boolean;
-  enableY?: boolean;
-  top?: number | string;
-  left?: number | string;
-  className?: string;
-};
-
-type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
-
-function ResizeHandle({
-  top = 0,
-  left = 0,
-  invertX = false,
-  invertY = false,
-  enableX = false,
-  enableY = false,
+export default function NodeResizer({
   nodeId,
-  className,
-}: ResizeHandleProps) {
-  const store = useStoreApi();
-  const resizeHandleRef = useRef<HTMLDivElement>(null);
-  const initialDimensionsRef = useRef<Dimensions & XYPosition & { nodeX: number; nodeY: number }>({
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0,
-    nodeX: 0,
-    nodeY: 0,
-  });
-  const nodeElementRef = useRef<HTMLDivElement | null>(null);
-  const getPointerPosition = useGetPointerPosition();
-
-  useEffect(() => {
-    if (!resizeHandleRef.current) {
-      return;
-    }
-
-    const selection = select(resizeHandleRef.current);
-    const dragHandler = drag<HTMLDivElement, unknown>()
-      .on('start', (event: ResizeDragEvent) => {
-        const node = store.getState().nodeInternals.get(nodeId);
-        const pointerPos = getPointerPosition(event);
-
-        initialDimensionsRef.current = {
-          width: node?.width ?? 0,
-          height: node?.height ?? 0,
-          nodeX: node?.position.x ?? 0,
-          nodeY: node?.position.y ?? 0,
-          x: pointerPos.xSnapped,
-          y: pointerPos.ySnapped,
-        };
-        nodeElementRef.current = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLDivElement;
-      })
-      .on('drag', (event: ResizeDragEvent) => {
-        const { updateNodePositions, nodeInternals, onNodesChange } = store.getState();
-        const pointerPos = getPointerPosition(event);
-        const nodeEl = nodeElementRef.current;
-        const node = nodeInternals.get(nodeId);
-
-        if (nodeEl && node) {
-          const changes: NodeChange[] = [];
-          const distX = enableX ? pointerPos.xSnapped - initialDimensionsRef.current.x : 0;
-          const distY = enableY ? pointerPos.ySnapped - initialDimensionsRef.current.y : 0;
-          const width = initialDimensionsRef.current.width + (invertX ? -distX : distX);
-          const height = initialDimensionsRef.current.height + (invertY ? -distY : distY);
-
-          if (invertX || invertY) {
-            const x = invertX ? initialDimensionsRef.current.nodeX + distX : initialDimensionsRef.current.nodeX;
-            const y = invertY ? initialDimensionsRef.current.nodeY + distY : initialDimensionsRef.current.nodeY;
-
-            if (x !== node.position.x || y !== node.position.y) {
-              const positionChanges: NodePositionChange[] | null = updateNodePositions(
-                [
-                  {
-                    id: nodeId,
-                    position: { x, y },
-                  } as Node,
-                ],
-                true,
-                false,
-                false
-              );
-
-              if (positionChanges?.length) {
-                changes.push(positionChanges[0]);
-              }
-            }
-          }
-
-          if (width !== node.width || height !== node.height) {
-            const dimensionChange: NodeDimensionChange = {
-              id: nodeId,
-              type: 'dimensions',
-              updateStyle: true,
-              dimensions: {
-                width: width !== node.width ? width : node.width,
-                height: height !== node.height ? height : node.height,
-              },
-            };
-            changes.push(dimensionChange);
-          }
-
-          if (changes.length) {
-            onNodesChange?.(changes);
-          }
-        }
-      });
-
-    selection.call(dragHandler);
-
-    return () => {
-      selection.on('.drag', null);
-    };
-  }, [nodeId]);
-
-  return (
-    <div
-      className={cc([className, 'nodrag'])}
-      ref={resizeHandleRef}
-      style={{
-        position: 'absolute',
-        left,
-        top,
-        width: 10,
-        height: 10,
-        background: 'red',
-        opacity: 0.7,
-        borderRadius: '50%',
-        transform: 'translate(-50%, -50%)',
-      }}
-    />
-  );
-}
-
-export default function NodeResizer({ nodeId }: NodeResizerProps) {
+  handleClassName,
+  handleStyle,
+  lineClassName,
+  lineStyle,
+}: NodeResizerProps) {
   return (
     <>
-      <ResizeHandle
-        className="react-flow__node-resizer"
-        nodeId={nodeId}
-        top={0}
-        left={0}
-        enableX
-        enableY
-        invertX
-        invertY
-      />
-      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top="50%" left={0} enableX invertX />
-      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top="100%" left={0} enableX enableY />
-      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top={0} left="50%" enableY invertY />
-      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top={0} left="100%" enableX enableY invertY />
-      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top="50%" left="100%" enableX />
-      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top="100%" left="100%" enableX enableY />
-      <ResizeHandle className="react-flow__node-resizer" nodeId={nodeId} top="100%" left="50%" enableY />
+      <ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="top-left" />
+      <ResizeControl className={lineClassName} variant="line" style={lineStyle} nodeId={nodeId} position="top" />
+      <ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="top-right" />
+
+      <ResizeControl className={lineClassName} variant="line" style={lineStyle} nodeId={nodeId} position="left" />
+
+      <ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="bottom-left" />
+      <ResizeControl className={lineClassName} variant="line" style={lineStyle} nodeId={nodeId} position="right" />
+      <ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="bottom-right" />
+      <ResizeControl className={lineClassName} variant="line" position="bottom" style={lineStyle} nodeId={nodeId} />
     </>
   );
 }

packages/node-resizer/src/ResizeControl.tsx

@@ -0,0 +1,141 @@
+import { useRef, useEffect } from 'react';
+import cc from 'classcat';
+import { drag } from 'd3-drag';
+import { select } from 'd3-selection';
+import {
+  useStoreApi,
+  useGetPointerPosition,
+  NodeChange,
+  NodePositionChange,
+  NodeDimensionChange,
+} from '@reactflow/core';
+import type { Dimensions, Node, XYPosition } from '@reactflow/core';
+
+import type { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps } from './types';
+
+function ResizeControl({
+  nodeId,
+  position = 'bottom-right',
+  variant = 'handle',
+  className,
+  style = {},
+  children,
+}: ResizeControlProps) {
+  const store = useStoreApi();
+  const resizeHandleRef = useRef<HTMLDivElement>(null);
+  const initialDimensionsRef = useRef<Dimensions & XYPosition & { nodeX: number; nodeY: number }>({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    nodeX: 0,
+    nodeY: 0,
+  });
+  const nodeElementRef = useRef<HTMLDivElement | null>(null);
+  const getPointerPosition = useGetPointerPosition();
+
+  useEffect(() => {
+    if (!resizeHandleRef.current) {
+      return;
+    }
+
+    const selection = select(resizeHandleRef.current);
+    const dragHandler = drag<HTMLDivElement, unknown>()
+      .on('start', (event: ResizeDragEvent) => {
+        const node = store.getState().nodeInternals.get(nodeId);
+        const pointerPos = getPointerPosition(event);
+
+        initialDimensionsRef.current = {
+          width: node?.width ?? 0,
+          height: node?.height ?? 0,
+          nodeX: node?.position.x ?? 0,
+          nodeY: node?.position.y ?? 0,
+          x: pointerPos.xSnapped,
+          y: pointerPos.ySnapped,
+        };
+        nodeElementRef.current = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLDivElement;
+      })
+      .on('drag', (event: ResizeDragEvent) => {
+        const { updateNodePositions, nodeInternals, onNodesChange } = store.getState();
+        const pointerPos = getPointerPosition(event);
+        const nodeEl = nodeElementRef.current;
+        const node = nodeInternals.get(nodeId);
+        const enableX = position.includes('right') || position.includes('left');
+        const enableY = position.includes('bottom') || position.includes('top');
+        const invertX = position.includes('left');
+        const invertY = position.includes('top');
+
+        if (nodeEl && node) {
+          const changes: NodeChange[] = [];
+          const distX = enableX ? pointerPos.xSnapped - initialDimensionsRef.current.x : 0;
+          const distY = enableY ? pointerPos.ySnapped - initialDimensionsRef.current.y : 0;
+          const width = initialDimensionsRef.current.width + (invertX ? -distX : distX);
+          const height = initialDimensionsRef.current.height + (invertY ? -distY : distY);
+
+          if (invertX || invertY) {
+            const x = invertX ? initialDimensionsRef.current.nodeX + distX : initialDimensionsRef.current.nodeX;
+            const y = invertY ? initialDimensionsRef.current.nodeY + distY : initialDimensionsRef.current.nodeY;
+
+            if (x !== node.position.x || y !== node.position.y) {
+              const positionChanges: NodePositionChange[] | null = updateNodePositions(
+                [
+                  {
+                    id: nodeId,
+                    position: { x, y },
+                  } as Node,
+                ],
+                true,
+                false,
+                false
+              );
+
+              if (positionChanges?.length) {
+                changes.push(positionChanges[0]);
+              }
+            }
+          }
+
+          if (width !== node.width || height !== node.height) {
+            const dimensionChange: NodeDimensionChange = {
+              id: nodeId,
+              type: 'dimensions',
+              updateStyle: true,
+              dimensions: {
+                width: width !== node.width ? width : node.width,
+                height: height !== node.height ? height : node.height,
+              },
+            };
+            changes.push(dimensionChange);
+          }
+
+          if (changes.length) {
+            onNodesChange?.(changes);
+          }
+        }
+      });
+
+    selection.call(dragHandler);
+
+    return () => {
+      selection.on('.drag', null);
+    };
+  }, [nodeId, position, getPointerPosition]);
+
+  const positionClassNames = position.split('-');
+
+  return (
+    <div
+      className={cc([className, ...positionClassNames, variant, 'react-flow__resize-control', 'nodrag'])}
+      ref={resizeHandleRef}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ResizeControlLine(props: ResizeControlLineProps) {
+  return <ResizeControl {...props} variant="line" />;
+}
+
+export default ResizeControl;

packages/node-resizer/src/index.tsx

@@ -1,2 +1,4 @@
 export { default as NodeResizer } from './NodeResizer';
+export { default as NodeResizeControl } from './ResizeControl';
+
 export * from './types';

packages/node-resizer/src/style.css

@@ -0,0 +1,100 @@
+.react-flow__resize-control {
+  position: absolute;
+  background-color: rgba(195, 195, 195, 1);
+  border: 1px solid white;
+  width: 4px;
+  height: 4px;
+}
+
+.react-flow__resize-control.left,
+.react-flow__resize-control.right {
+  cursor: ew-resize;
+}
+
+.react-flow__resize-control.top,
+.react-flow__resize-control.bottom {
+  cursor: ns-resize;
+}
+
+.react-flow__resize-control.top.left,
+.react-flow__resize-control.bottom.right {
+  cursor: nwse-resize;
+}
+
+.react-flow__resize-control.bottom.left,
+.react-flow__resize-control.top.right {
+  cursor: nesw-resize;
+}
+
+/* handle styles */
+.react-flow__resize-control.handle {
+  transform: translate(-50%, -50%);
+}
+
+.react-flow__resize-control.handle.left {
+  left: 0;
+  top: 50%;
+}
+.react-flow__resize-control.handle.right {
+  left: 100%;
+  top: 50%;
+}
+.react-flow__resize-control.handle.top {
+  left: 50%;
+  top: 0;
+}
+.react-flow__resize-control.handle.bottom {
+  left: 50%;
+  top: 100%;
+}
+.react-flow__resize-control.handle.top.left {
+  left: 0;
+}
+.react-flow__resize-control.handle.bottom.left {
+  left: 0;
+}
+.react-flow__resize-control.handle.top.right {
+  left: 100%;
+}
+.react-flow__resize-control.handle.bottom.right {
+  left: 100%;
+}
+
+/* line styles */
+.react-flow__resize-control.line {
+  border: none;
+  background: none;
+}
+.react-flow__resize-control.line.left,
+.react-flow__resize-control.line.right {
+  width: 1px;
+  transform: translate(-50%, 0);
+  top: 0;
+  height: 100%;
+}
+
+.react-flow__resize-control.line.left {
+  left: 0;
+  border-left: 1px solid rgba(195, 195, 195, 1);
+}
+.react-flow__resize-control.line.right {
+  left: 100%;
+  border-right: 1px solid rgba(195, 195, 195, 1);
+}
+
+.react-flow__resize-control.line.top,
+.react-flow__resize-control.line.bottom {
+  height: 1px;
+  transform: translate(0, -50%);
+  left: 0;
+  width: 100%;
+}
+
+.react-flow__resize-control.line.top {
+  top: 0;
+  border-top: 1px solid rgba(195, 195, 195, 1);
+}
+.react-flow__resize-control.line.bottom {
+  border-bottom: 1px solid rgba(195, 195, 195, 1);
+  top: 100%;
+}

packages/node-resizer/src/types.ts

@@ -1,9 +1,29 @@
-import { Position } from '@reactflow/core';
-import type { HTMLAttributes } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { D3DragEvent, SubjectPosition } from 'd3-drag';
 
-export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
+export type NodeResizerProps = {
   nodeId: string;
-  isVisible?: boolean;
-  position?: Position;
-  offset?: number;
+  handleClassName?: string;
+  handleStyle?: CSSProperties;
+  lineClassName?: string;
+  lineStyle?: CSSProperties;
 };
+
+export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
+
+export type ControlPosition = ControlLinePosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export type ResizeControlProps = {
+  nodeId: string;
+  position: ControlPosition;
+  variant?: 'line' | 'handle';
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+};
+
+export type ResizeControlLineProps = ResizeControlProps & {
+  position: ControlLinePosition;
+};
+
+export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;