style(flow): new default styles

src/additional-components/Background/index.tsx

@@ -15,13 +15,13 @@ interface BackgroundProps extends HTMLAttributes<SVGElement> {
 }
 
 const defaultColors = {
-  [BackgroundVariant.Dots]: '#999',
+  [BackgroundVariant.Dots]: '#81818a',
   [BackgroundVariant.Lines]: '#eee',
 };
 
 const Background = ({
   variant = BackgroundVariant.Dots,
-  gap = 24,
+  gap = 15,
   size = 0.5,
   color,
   style,

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -6,13 +6,14 @@ interface MiniMapNodeProps {
   y: number;
   width: number;
   height: number;
-  color: string;
-  className: string;
   borderRadius: number;
+  className: string;
+  color: string;
+  strokeColor: string;
   style?: CSSProperties;
 }
 
-const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadius }: MiniMapNodeProps) => {
+const MiniMapNode = ({ x, y, width, height, style, color, strokeColor, className, borderRadius }: MiniMapNodeProps) => {
   const { background, backgroundColor } = style || {};
   const fill = (color || background || backgroundColor) as string;
 
@@ -26,6 +27,8 @@ const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadiu
       width={width}
       height={height}
       fill={fill}
+      stroke={strokeColor}
+      strokeWidth={2}
     />
   );
 };

src/additional-components/MiniMap/index.tsx

@@ -12,6 +12,7 @@ type StringFunc = (node: Node) => string;
 
 interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
   nodeColor?: string | StringFunc;
+  nodeStrokeColor?: string | StringFunc;
   nodeClassName?: string | StringFunc;
   nodeBorderRadius?: number;
   maskColor?: string;
@@ -21,12 +22,13 @@ const defaultWidth = 200;
 const defaultHeight = 150;
 
 const MiniMap = ({
-  style = { backgroundColor: '#f8f8f8' },
+  style = { backgroundColor: '#fff' },
   className,
-  nodeColor = '#ddd',
+  nodeStrokeColor = '#555',
+  nodeColor = '#fff',
   nodeClassName = '',
   nodeBorderRadius = 5,
-  maskColor = 'rgba(10, 10, 10, .25)',
+  maskColor = '#F0F2F3',
 }: MiniMapProps) => {
   const containerWidth = useStoreState((s) => s.width);
   const containerHeight = useStoreState((s) => s.height);
@@ -37,6 +39,9 @@ const MiniMap = ({
   const elementWidth = (style.width || defaultWidth)! as number;
   const elementHeight = (style.height || defaultHeight)! as number;
   const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
+  const nodeStrokeColorFunc = (nodeStrokeColor instanceof Function
+    ? nodeStrokeColor
+    : () => nodeStrokeColor) as StringFunc;
   const nodeClassNameFunc = (nodeClassName instanceof Function ? nodeClassName : () => nodeClassName) as StringFunc;
   const hasNodes = nodes && nodes.length;
   const bb = getRectOfNodes(nodes);
@@ -79,6 +84,7 @@ const MiniMap = ({
             className={nodeClassNameFunc(node)}
             color={nodeColorFunc(node)}
             borderRadius={nodeBorderRadius}
+            strokeColor={nodeStrokeColorFunc(node)}
           />
         ))}
       <path

src/container/ReactFlow/index.tsx

@@ -224,7 +224,7 @@ ReactFlow.defaultProps = {
   deleteKeyCode: 8,
   selectionKeyCode: 16,
   snapToGrid: false,
-  snapGrid: [16, 16],
+  snapGrid: [15, 15],
   onlyRenderVisibleNodes: true,
   nodesDraggable: true,
   nodesConnectable: true,
@@ -235,7 +235,7 @@ ReactFlow.defaultProps = {
   maxZoom: 2,
   defaultZoom: 1,
   defaultPosition: [0, 0],
-  arrowHeadColor: '#bbb',
+  arrowHeadColor: '#b1b1b7',
   zoomOnScroll: true,
   zoomOnDoubleClick: true,
 };

src/style.css

@@ -62,12 +62,12 @@
 
 .react-flow__edge-path {
   fill: none;
-  stroke: #bbb;
-  stroke-width: 1.5;
+  stroke: #b1b1b7;
+  stroke-width: 1;
 }
 
 .react-flow__edge-text {
-  font-size: 12px;
+  font-size: 10px;
   pointer-events: none;
   user-select: none;
 }
@@ -87,8 +87,8 @@
 
 .react-flow__connection-path {
   fill: none;
-  stroke: #ddd;
-  stroke-width: 1.5;
+  stroke: #b1b1b7;
+  stroke-width: 1;
 }
 
 .react-flow__nodes {
@@ -117,32 +117,58 @@
   font-size: 12px;
   color: #222;
   text-align: center;
+  border-width: 1px;
+  border-style: solid;
 }
 
 .react-flow__node-default.selectable,
 .react-flow__node-input.selectable,
 .react-flow__node-output.selectable {
-
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 1px #333;
-  }
-
   &:hover {
-    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   }
 }
 
 .react-flow__node-input {
-  background: #9999ff;
+  background: #fff;
+  border-color: #0041d0;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 0.5px #0041d0;
+  }
+
+  .react-flow__handle {
+    background: #0041d0;
+  }
 }
 
 .react-flow__node-default {
-  background: #ff6060;
+  background: #fff;
+  border-color: #1a192b;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 0.5px #1a192b;
+  }
+
+  .react-flow__handle {
+    background: #1a192b;
+  }
 }
 
 .react-flow__node-output {
-  background: #79c9b7;
+  background: #fff;
+  border-color: #ff0072;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 0.5px #ff0072;
+  }
+
+  .react-flow__handle {
+    background: #ff0072;
+  }
 }
 
 .react-flow__nodesselection {
@@ -165,10 +191,12 @@
 
 .react-flow__handle {
   position: absolute;
-  width: 10px;
-  height: 8px;
-  background: rgba(255, 255, 255, 0.4);
+  width: 6px;
+  height: 6px;
+  background: #555;
+  border: 1px solid white;
   pointer-events: none;
+  border-radius: 100%;
 
   &.connectable {
     pointer-events: all;
@@ -179,24 +207,24 @@
 .react-flow__handle-bottom {
   top: auto;
   left: 50%;
-  bottom: 0;
+  bottom: -4px;
   transform: translate(-50%, 0);
 }
 
 .react-flow__handle-top {
   left: 50%;
-  top: 0;
+  top: -4px;
   transform: translate(-50%, 0);
 }
 
 .react-flow__handle-left {
   top: 50%;
-  left: 0;
+  left: -4px;
   transform: translate(0, -50%);
 }
 
 .react-flow__handle-right {
-  right: 0;
+  right: -4px;
   top: 50%;
   transform: translate(0, -50%);
-}
+}