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/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}