Merge pull request #260 from wbkd/develop

Develop
2020-05-30 20:27:19 +02:00
parent 8bbe578555 0558ff86c4
commit 115ba4fd3c
31 changed files with 192 additions and 164 deletions
--- a/README.md
+++ b/README.md
@@ -188,6 +188,7 @@ const targetHandleWithValidation = (
 - `onConnect`: function that gets triggered on connect
 - `isValidConnection`: function receives a connection `{ target: 'some-id', source: 'another-id' }` as param, returns a boolean - true by default
 - `style`: css properties
+- `className`: additional class name

 #### Multiple Handles

--- a/assets/icons/unlock.svg
+++ b/assets/icons/unlock.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="m376,187l-20,0l0,-40c0,-55 -45,-100 -100,-100c-54.002,23.996 -17.999,27.998 4,31.998c21.999,4 58.002,33.998 58.002,68.002l-0.002,0l0,40l-182,0c-22.002,0 -40,17.998 -40,40l0,200c0,22.002 17.998,40 40,40l240,0c22.002,0 40,-17.998 40,-40l0,-200c0,-22.002 -17.998,-40 -40,-40zm-120,182c-22.002,0 -40,-17.998 -40,-40s17.998,-40 40,-40s40,17.998 40,40s-17.998,40 -40,40z"/></svg>
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m376 187h-20v-40c0-55-45-100-100-100-54.002 23.996-17.999 27.998 4 31.998s58.002 33.998 58.002 68.002h-.002v40h-182c-22.002 0-40 17.998-40 40v200c0 22.002 17.998 40 40 40h240c22.002 0 40-17.998 40-40v-200c0-22.002-17.998-40-40-40zm-120 182c-22.002 0-40-17.998-40-40s17.998-40 40-40 40 17.998 40 40-17.998 40-40 40z"/></svg>
--- a/cypress/integration/flow/basic.spec.js
+++ b/cypress/integration/flow/basic.spec.js
@@ -6,7 +6,7 @@ describe('Basic Graph Rendering', () => {
    cy.get('.react-flow-basic-example'); // check if className prop works
    cy.get('.react-flow__node').should('have.length', 4);
    cy.get('.react-flow__edge').should('have.length', 2);
-    cy.get('.react-flow__node').children('div').children('.react-flow__handle');
+    cy.get('.react-flow__node').children('.react-flow__handle');
  });

  it('renders a grid', () => {
--- a/cypress/integration/flow/inactive.spec.js
+++ b/cypress/integration/flow/inactive.spec.js
@@ -5,7 +5,7 @@ describe('Inactive Graph Rendering', () => {
    cy.get('.react-flow__renderer');
    cy.get('.react-flow__node').should('have.length', 4);
    cy.get('.react-flow__edge').should('have.length', 2);
-    cy.get('.react-flow__node').children('div').children('.react-flow__handle');
+    cy.get('.react-flow__node').children('.react-flow__handle');
  });

  it('tries to select a node by click', () => {
--- a/example/src/CustomNode/ColorSelectorNode.js
+++ b/example/src/CustomNode/ColorSelectorNode.js
@@ -2,11 +2,9 @@ import React from 'react';

 import { Handle } from 'react-flow-renderer';

-export default ({ data, styles }) => {
+export default ({ data }) => {
  return (
-    <div
-      style={{ background: '#eee', border: '1px solid #ddd', padding: 10, borderRadius: 5, ...styles }}
-    >
+    <>
      <Handle
        type="target"
        position="left"
@@ -27,6 +25,6 @@ export default ({ data, styles }) => {
        id="b"
        style={{ bottom: 10, top: 'auto', background: '#fff' }}
      />
-    </div>
+    </>
  );
 };
--- a/example/src/CustomNode/index.js
+++ b/example/src/CustomNode/index.js
@@ -37,7 +37,7 @@ const CustomNodeFlow = () => {

    setElements([
      { id: '1', type: 'input', data: { label: 'An input node' }, position: { x: 0, y: 50 }, sourcePosition: 'right' },
-      { id: '2', type: 'selectorNode', data: { onChange: onChange, color: initBgColor }, position: { x: 250, y: 50 } },
+      { id: '2', type: 'selectorNode', data: { onChange: onChange, color: initBgColor }, style: { border: '1px solid #777' }, position: { x: 250, y: 50 } },
      { id: '3', type: 'output', data: { label: 'Output A' }, position: { x: 550, y: 25 }, targetPosition: 'left' },
      { id: '4', type: 'output', data: { label: 'Output B' }, position: { x: 550, y: 100 }, targetPosition: 'left' },

--- a/example/src/Horizontal/index.js
+++ b/example/src/Horizontal/index.js
@@ -9,11 +9,20 @@ const onLoad = (graph) => {
 const initialElements = [
  { id: '1', sourcePosition: 'right', type: 'input', className: 'dark-node', data: { label: 'Input' }, position: { x: 0, y: 80 } },
  { id: '2', sourcePosition: 'right', targetPosition: 'left', data: { label: 'A Node' }, position: { x: 250, y: 0 } },
-  { id: '3', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Another node' }, position: { x: 250, y: 160 } },
-  { id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 80 } },
+  { id: '3', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 3' }, position: { x: 250, y: 160 } },
+  { id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 0 } },
+  { id: '5', sourcePosition: 'top', targetPosition: 'bottom', data: { label: 'Node 5' }, position: { x: 500, y: 100 } },
+  { id: '6', sourcePosition: 'bottom', targetPosition: 'top', data: { label: 'Node 6' }, position: { x: 500, y: 230 } },
+  { id: '7', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 7' }, position: { x: 750, y: 50 } },
+  { id: '8', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 8' }, position: { x: 750, y: 300 } },
+
  { id: 'e1-2', source: '1', target: '2', animated: true,  },
  { id: 'e1-3', source: '1', target: '3', animated: true, },
-  { id: 'e1-4', source: '2', target: '4', label: 'edge label' }
+  { id: 'e1-4', source: '2', target: '4', label: 'edge label' },
+  { id: 'e3-5', source: '3', target: '5', animated: true },
+  { id: 'e3-6', source: '3', target: '6', animated: true },
+  { id: 'e5-7', source: '5', target: '7', animated: true },
+  { id: 'e6-8', source: '6', target: '8', animated: true },
 ];

 const HorizontalFlow = () => {
--- a/example/src/index.css
+++ b/example/src/index.css
@@ -136,9 +136,9 @@ nav a.active:before {
  color: #111;
 }

-.dark-node>div {
-  background: #333 !important;
-  color: #f8f8f8 !important;
+.dark-node {
+  background: #333;
+  color: #f8f8f8;
 }

@media screen and (min-width: 768px) {
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -37,7 +37,9 @@ export default [
    ],
    plugins: [
      bundleSize(),
-      postcss(),
+      postcss({
+        minimize: isProd,
+      }),
      babel({
        exclude: 'node_modules/**',
      }),
--- a/src/additional-components/Background/index.tsx
+++ b/src/additional-components/Background/index.tsx
@@ -1,10 +1,12 @@
-import React, { memo, HTMLAttributes, CSSProperties } from 'react';
+import React, { memo, HTMLAttributes } from 'react';
 import classnames from 'classnames';

 import { useStoreState } from '../../store/hooks';
 import { BackgroundVariant } from '../../types';
 import { createGridLinesPath, createGridDotsPath } from './utils';

+import './style.css';
+
 interface BackgroundProps extends HTMLAttributes<SVGElement> {
  variant?: BackgroundVariant;
  gap?: number;
@@ -12,19 +14,13 @@ interface BackgroundProps extends HTMLAttributes<SVGElement> {
  size?: number;
 }

-const baseStyles: CSSProperties = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-};
-
 const defaultColors = {
  [BackgroundVariant.Dots]: '#999',
  [BackgroundVariant.Lines]: '#eee',
 };

 const Background = memo(
-  ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style = {}, className = '' }: BackgroundProps) => {
+  ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style, className }: BackgroundProps) => {
    const width = useStoreState((s) => s.width);
    const height = useStoreState((s) => s.height);
    const [x, y, scale] = useStoreState((s) => s.transform);
@@ -42,7 +38,7 @@ const Background = memo(
    const stroke = isLines ? bgColor : 'none';

    return (
-      <svg width={width} height={height} style={{ ...baseStyles, ...style }} className={bgClasses}>
+      <svg width={width} height={height} style={style} className={bgClasses}>
        <path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
      </svg>
    );
--- a/src/additional-components/Background/style.css
+++ b/src/additional-components/Background/style.css
@@ -0,0 +1,5 @@
+.react-flow__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
--- a/src/additional-components/Controls/index.tsx
+++ b/src/additional-components/Controls/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import classnames from 'classnames';

 import { fitView, zoomIn, zoomOut } from '../../utils/graph';
@@ -10,12 +10,7 @@ import FitviewIcon from '../../../assets/icons/fitview.svg';
 import LockIcon from '../../../assets/icons/lock.svg';
 import UnlockIcon from '../../../assets/icons/unlock.svg';

-const baseStyle: CSSProperties = {
-  position: 'absolute',
-  zIndex: 5,
-  bottom: 10,
-  left: 10,
-};
+import './style.css';

 interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
  showZoom?: boolean;
@@ -26,16 +21,10 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
 const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
  const setInteractive = useStoreActions((actions) => actions.setInteractive);
  const isInteractive = useStoreState((s) => s.isInteractive);
-  const mapClasses: string = classnames('react-flow__controls', className);
+  const mapClasses = classnames('react-flow__controls', className);

  return (
-    <div
-      className={mapClasses}
-      style={{
-        ...baseStyle,
-        ...style,
-      }}
-    >
+    <div className={mapClasses} style={style}>
      {showZoom && (
        <>
          <div className="react-flow__controls-button react-flow__controls-zoomin" onClick={zoomIn}>
--- a/src/additional-components/Controls/style.css
+++ b/src/additional-components/Controls/style.css
@@ -0,0 +1,28 @@
+.react-flow__controls {
+  position: absolute;
+  z-index: 5;
+  bottom: 10px;
+  left: 10px;
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  &-button {
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+
+    svg {
+      width: 100%;
+    }
+
+    &:hover {
+      background: #f4f4f4;
+    }
+  }
+}
--- a/src/additional-components/MiniMap/MiniMapNode.tsx
+++ b/src/additional-components/MiniMap/MiniMapNode.tsx
@@ -16,6 +16,7 @@ const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
  } = node.__rg;
  const { background, backgroundColor } = node.style || {};
  const fill = (background || backgroundColor || color) as string;
+
  return (
    <rect
      className="react-flow__minimap-node"
--- a/src/additional-components/MiniMap/index.tsx
+++ b/src/additional-components/MiniMap/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import classnames from 'classnames';

 import { useStoreState } from '../../store/hooks';
@@ -6,6 +6,8 @@ import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
 import { Node, Rect } from '../../types';
 import MiniMapNode from './MiniMapNode';

+import './style.css';
+
 type StringFunc = (node: Node) => string;

 interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
@@ -14,14 +16,8 @@ interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
  maskColor?: string;
 }

-const baseStyle: CSSProperties = {
-  position: 'absolute',
-  zIndex: 5,
-  bottom: 10,
-  right: 10,
-  width: 200,
-  height: 150,
-};
+const defaultWidth = 200;
+const defaultHeight = 150;

 const MiniMap = ({
  style = { backgroundColor: '#f8f8f8' },
@@ -36,11 +32,10 @@ const MiniMap = ({
  const nodes = useStoreState((s) => s.nodes);

  const mapClasses = classnames('react-flow__minimap', className);
-  const elementWidth = (style.width || baseStyle.width)! as number;
-  const elementHeight = (style.height || baseStyle.height)! as number;
+  const elementWidth = (style.width || defaultWidth)! as number;
+  const elementHeight = (style.height || defaultHeight)! as number;
  const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
  const hasNodes = nodes && nodes.length;
-
  const bb = getRectOfNodes(nodes);
  const viewBB: Rect = {
    x: -tX / tScale,
@@ -48,17 +43,13 @@ const MiniMap = ({
    width: containerWidth / tScale,
    height: containerHeight / tScale,
  };
-
  const boundingRect = hasNodes ? getBoundsofRects(bb, viewBB) : viewBB;
-
  const scaledWidth = boundingRect.width / elementWidth;
  const scaledHeight = boundingRect.height / elementHeight;
  const viewScale = Math.max(scaledWidth, scaledHeight);
  const viewWidth = viewScale * elementWidth;
  const viewHeight = viewScale * elementHeight;
-
  const offset = 5 * viewScale;
-
  const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
  const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
  const width = viewWidth + offset * 2;
@@ -69,10 +60,7 @@ const MiniMap = ({
      width={elementWidth}
      height={elementHeight}
      viewBox={`${x} ${y} ${width} ${height}`}
-      style={{
-        ...baseStyle,
-        ...style,
-      }}
+      style={style}
      className={mapClasses}
    >
      {nodes.map((node) => (
--- a/src/additional-components/MiniMap/style.css
+++ b/src/additional-components/MiniMap/style.css
@@ -0,0 +1,6 @@
+.react-flow__minimap {
+  position: absolute;
+  z-index: 5;
+  bottom: 10px;
+  right: 10px;
+}
--- a/src/components/ConnectionLine/index.tsx
+++ b/src/components/ConnectionLine/index.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState, CSSProperties } from 'react';
 import cx from 'classnames';

-import { ElementId, Node, Transform, HandleElement, Position } from '../../types';
+import { ElementId, Node, Transform, HandleElement, Position, ConnectionLineType } from '../../types';

 interface ConnectionLineProps {
  connectionSourceId: ElementId;
  connectionPositionX: number;
  connectionPositionY: number;
-  connectionLineType?: string | null;
+  connectionLineType: ConnectionLineType;
  nodes: Node[];
  transform: Transform;
  isInteractive: boolean;
@@ -17,10 +17,10 @@ interface ConnectionLineProps {

 export default ({
  connectionSourceId,
-  connectionLineStyle = {},
+  connectionLineStyle,
  connectionPositionX,
  connectionPositionY,
-  connectionLineType,
+  connectionLineType = ConnectionLineType.Bezier,
  nodes = [],
  className,
  transform,
@@ -60,7 +60,7 @@ export default ({

  let dAttr: string = '';

-  if (connectionLineType === 'bezier') {
+  if (connectionLineType === ConnectionLineType.Bezier) {
    if (sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right) {
      const xOffset = Math.abs(targetX - sourceX) / 2;
      const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
--- a/src/components/Edges/BezierEdge.tsx
+++ b/src/components/Edges/BezierEdge.tsx
@@ -15,7 +15,7 @@ export default memo(
    labelStyle,
    labelShowBg,
    labelBgStyle,
-    style = {},
+    style,
  }: EdgeBezierProps) => {
    const yOffset = Math.abs(targetY - sourceY) / 2;
    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
@@ -26,10 +26,13 @@ export default memo(
    let dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;

    const leftAndRight = [Position.Left, Position.Right];
+
    if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
      dAttr = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
-    } else if (leftAndRight.includes(sourcePosition) || leftAndRight.includes(targetPosition)) {
+    } else if (leftAndRight.includes(targetPosition)) {
      dAttr = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
+    } else if (leftAndRight.includes(sourcePosition)) {
+      dAttr = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`;
    }

    const text = label ? (
--- a/src/components/Edges/StepEdge.tsx
+++ b/src/components/Edges/StepEdge.tsx
@@ -4,7 +4,7 @@ import EdgeText from './EdgeText';
 import { EdgeProps } from '../../types';

 export default memo(
-  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style = {} }: EdgeProps) => {
+  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style }: EdgeProps) => {
    const yOffset = Math.abs(targetY - sourceY) / 2;
    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;

--- a/src/components/Edges/StraightEdge.tsx
+++ b/src/components/Edges/StraightEdge.tsx
@@ -4,7 +4,7 @@ import EdgeText from './EdgeText';
 import { EdgeProps } from '../../types';

 export default memo(
-  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style = {} }: EdgeProps) => {
+  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style }: EdgeProps) => {
    const yOffset = Math.abs(targetY - sourceY) / 2;
    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;

--- a/src/components/Edges/wrapEdge.tsx
+++ b/src/components/Edges/wrapEdge.tsx
@@ -13,8 +13,9 @@ interface EdgeWrapperProps {
  labelStyle?: CSSProperties;
  labelShowBg?: boolean;
  labelBgStyle: CSSProperties;
+  className?: string;
  onClick?: (edge: Edge) => void;
-  animated: boolean;
+  animated?: boolean;
  selected: boolean;
  isInteractive: boolean;
 }
@@ -34,9 +35,10 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
      labelStyle,
      labelShowBg,
      labelBgStyle,
+      className,
      ...rest
    }: EdgeWrapperProps) => {
-      const edgeClasses = cx('react-flow__edge', { selected, animated });
+      const edgeClasses = cx('react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated });
      const edgeGroupStyle: CSSProperties = {
        pointerEvents: isInteractive ? 'all' : 'none',
      };
--- a/src/components/Handle/index.tsx
+++ b/src/components/Handle/index.tsx
@@ -12,7 +12,9 @@ const Handle = memo(
    position = Position.Top,
    onConnect = () => {},
    isValidConnection = () => true,
-    ...rest
+    style,
+    className,
+    id,
  }: HandleProps) => {
    const nodeId = useContext(NodeIdContext) as ElementId;
    const setPosition = useStoreActions((a) => a.setConnectionPosition);
@@ -32,7 +34,9 @@ const Handle = memo(
        type={type}
        position={position}
        isValidConnection={isValidConnection}
-        {...rest}
+        style={style}
+        className={className}
+        id={id}
      />
    );
  }
--- a/src/components/Nodes/DefaultNode.tsx
+++ b/src/components/Nodes/DefaultNode.tsx
@@ -1,19 +1,16 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';

 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

-const nodeStyles: CSSProperties = {
-  background: '#ff6060',
-  padding: 10,
-  borderRadius: 5,
-  width: 150,
-};
-
-export default ({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom, style }: NodeProps) => (
-  <div style={{ ...nodeStyles, ...style }}>
+const DefaultNode = ({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
+  <>
    <Handle type="target" position={targetPosition} />
    {data.label}
    <Handle type="source" position={sourcePosition} />
-  </div>
+  </>
 );
+
+DefaultNode.displayName = 'DefaultNode';
+
+export default DefaultNode;
--- a/src/components/Nodes/InputNode.tsx
+++ b/src/components/Nodes/InputNode.tsx
@@ -1,18 +1,15 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';

 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

-const nodeStyles: CSSProperties = {
-  background: '#9999ff',
-  padding: 10,
-  borderRadius: 5,
-  width: 150,
-};
-
-export default ({ data, style, sourcePosition = Position.Bottom }: NodeProps) => (
-  <div style={{ ...nodeStyles, ...style }}>
+const InputNode = ({ data, sourcePosition = Position.Bottom }: NodeProps) => (
+  <>
    {data.label}
    <Handle type="source" position={sourcePosition} />
-  </div>
+  </>
 );
+
+InputNode.displayName = 'InputNode';
+
+export default InputNode;
--- a/src/components/Nodes/OutputNode.tsx
+++ b/src/components/Nodes/OutputNode.tsx
@@ -1,18 +1,15 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';

 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

-const nodeStyles: CSSProperties = {
-  background: '#55dd99',
-  padding: 10,
-  borderRadius: 5,
-  width: 150,
-};
-
-export default ({ data, style, targetPosition = Position.Top }: NodeProps) => (
-  <div style={{ ...nodeStyles, ...style }}>
+const OutputNode = ({ data, targetPosition = Position.Top }: NodeProps) => (
+  <>
    <Handle type="target" position={targetPosition} />
    {data.label}
-  </div>
+  </>
 );
+
+OutputNode.displayName = 'OutputNode';
+
+export default OutputNode;
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -158,23 +158,16 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
        zIndex: selected ? 10 : 3,
        transform: `translate(${xPos}px,${yPos}px)`,
        pointerEvents: isInteractive ? 'all' : 'none',
-      };
-
-      const updateNode = (): void => {
-        if (!nodeElement.current) {
-          return;
-        }
-
-        store.dispatch.updateNodeDimensions({ id, nodeElement: nodeElement.current });
+        ...style,
      };

      useEffect(() => {
        if (nodeElement.current) {
-          updateNode();
+          store.dispatch.updateNodeDimensions({ id, nodeElement: nodeElement.current });

          const resizeObserver = new ResizeObserver((entries) => {
            for (let _ of entries) {
-              updateNode();
+              store.dispatch.updateNodeDimensions({ id, nodeElement: nodeElement.current! });
            }
          });

@@ -188,7 +181,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
        }

        return;
-      }, []);
+      }, [id]);

      return (
        <DraggableCore
@@ -219,7 +212,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
                id={id}
                data={data}
                type={type}
-                style={style}
                selected={selected}
                sourcePosition={sourcePosition}
                targetPosition={targetPosition}
--- a/src/container/EdgeRenderer/index.tsx
+++ b/src/container/EdgeRenderer/index.tsx
@@ -3,14 +3,14 @@ import React, { memo, CSSProperties } from 'react';
 import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
-import { XYPosition, Position, Edge, Node, ElementId, HandleElement, Elements } from '../../types';
+import { XYPosition, Position, Edge, Node, ElementId, HandleElement, Elements, ConnectionLineType } from '../../types';

 interface EdgeRendererProps {
  width: number;
  height: number;
  edgeTypes: any;
+  connectionLineType: ConnectionLineType;
  connectionLineStyle?: CSSProperties;
-  connectionLineType?: string;
  onElementClick?: (element: Node | Edge) => void;
 }

--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -12,7 +12,16 @@ import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
 import { getDimensions } from '../../utils';
 import { fitView, zoomIn, zoomOut, project } from '../../utils/graph';
-import { Elements, NodeTypesType, EdgeTypesType, OnLoadFunc, Node, Edge, Connection } from '../../types';
+import {
+  Elements,
+  NodeTypesType,
+  EdgeTypesType,
+  OnLoadFunc,
+  Node,
+  Edge,
+  Connection,
+  ConnectionLineType,
+} from '../../types';

 export interface GraphViewProps {
  elements: Elements;
@@ -26,8 +35,8 @@ export interface GraphViewProps {
  selectionKeyCode: number;
  nodeTypes: NodeTypesType;
  edgeTypes: EdgeTypesType;
-  connectionLineType: string;
-  connectionLineStyle: CSSProperties;
+  connectionLineType: ConnectionLineType;
+  connectionLineStyle?: CSSProperties;
  deleteKeyCode: number;
  snapToGrid: boolean;
  snapGrid: [number, number];
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -20,7 +20,16 @@ import StraightEdge from '../../components/Edges/StraightEdge';
 import StepEdge from '../../components/Edges/StepEdge';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import store from '../../store';
-import { Elements, NodeTypesType, EdgeTypesType, OnLoadFunc, Node, Edge, Connection } from '../../types';
+import {
+  Elements,
+  NodeTypesType,
+  EdgeTypesType,
+  OnLoadFunc,
+  Node,
+  Edge,
+  Connection,
+  ConnectionLineType,
+} from '../../types';

 import '../../style.css';

@@ -36,8 +45,8 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
  onSelectionChange?: (elements: Elements | null) => void;
  nodeTypes: NodeTypesType;
  edgeTypes: EdgeTypesType;
-  connectionLineType: string;
-  connectionLineStyle: CSSProperties;
+  connectionLineType: ConnectionLineType;
+  connectionLineStyle?: CSSProperties;
  deleteKeyCode: number;
  selectionKeyCode: number;
  snapToGrid: boolean;
@@ -119,8 +128,7 @@ ReactFlow.defaultProps = {
    straight: StraightEdge,
    step: StepEdge,
  },
-  connectionLineType: 'bezier',
-  connectionLineStyle: {},
+  connectionLineType: ConnectionLineType.Bezier,
  deleteKeyCode: 8,
  selectionKeyCode: 16,
  snapToGrid: false,
--- a/src/style.css
+++ b/src/style.css
@@ -60,6 +60,12 @@
  }
 }

+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+
 .react-flow__connection {
  pointer-events: none;
 }
@@ -85,12 +91,6 @@
  fill: white;
 }

-@keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-
 .react-flow__nodes {
  width: 100%;
  height: 100%;
@@ -110,13 +110,17 @@
  pointer-events: all;
  transform-origin: 0 0;
  cursor: grab;
+  padding: 10px;
+  border-radius: 5px;
+  width: 150px;
+  background: #eee;

-  &.selected > *,
-  &.selected:hover > * {
+  &.selected,
+  &.selected:hover {
    box-shadow: 0 0 0 2px #555;
  }

-  &:hover > * {
+  &:hover {
    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
  }

@@ -125,6 +129,18 @@
  }
 }

+.react-flow__node-default {
+  background: #ff6060;
+}
+
+.react-flow__node-input {
+  background: #9999ff;
+}
+
+.react-flow__node-output {
+  background: #55dd99;
+}
+
 .react-flow__handle {
  position: absolute;
  width: 10px;
@@ -173,29 +189,4 @@
    border: 1px dotted rgba(0, 89, 220, 0.8);
    pointer-events: all;
  }
-}
-
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-
-  &-button {
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    user-select: none;
-    padding: 5px;
-
-    svg {
-      width: 100%;
-    }
-
-    &:hover {
-      background: #f4f4f4;
-    }
-  }
-}
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -96,7 +96,6 @@ export interface NodeProps {
  selected: boolean;
  targetPosition?: Position;
  sourcePosition?: Position;
-  style?: CSSProperties;
 }

 export interface NodeComponentProps {
@@ -154,6 +153,11 @@ export interface Connection {
  target: ElementId | null;
 }

+export enum ConnectionLineType {
+  Bezier = 'bezier',
+  Straight = 'straight',
+}
+
 export type OnConnectFunc = (connection: Connection) => void;

 export interface HandleElement extends XYPosition, Dimensions {
@@ -168,6 +172,7 @@ export interface HandleProps {
  isValidConnection?: (connection: Connection) => boolean;
  id?: string;
  style?: CSSProperties;
+  className?: string;
 }

 export interface EdgeCompProps {