refactor(styling): use css for default styles (#259)

* refactor(minimap): use css for default styles

* refactor(controls): use css for default styles

* refactor(background): use css for default styles

* refactor(edges): add edge type class name

* refactor(nodes): use css for default styles

* refactor(outputnode): add display name

* refactor(wrapnode): cleanup

* refactor(rollup): minimize css for prod build

* refactor(additional-comps): extract css

* test(graphs): adjust for new markup

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"

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) => (

src/additional-components/MiniMap/style.css

@@ -0,0 +1,6 @@
+.react-flow__minimap {
+  position: absolute;
+  z-index: 5;
+  bottom: 10px;
+  right: 10px;
+}