Merge pull request #65 from ts-graphviz/cluster-common-attributes

Add cluster common attributes

Author: kamiazya

example/example.tsx

@@ -2,7 +2,17 @@ import React, { FC } from 'react';
 import { Digraph, Node, Subgraph, renderToDot, Edge, DOT } from '../src';
 
 const Example: FC = () => (
-  <Digraph dpi={150}>
+  <Digraph
+    dpi={150}
+    rankdir="TB"
+    edge={{
+      color: 'blue',
+      fontcolor: 'blue',
+    }}
+    node={{
+      shape: 'none',
+    }}
+  >
     <Node
       id="nodeA"
       shape="none"

src/hooks/use-cluster-attributes.ts

@@ -0,0 +1,33 @@
+import { EdgeAttributes, NodeAttributes, ClusterSubgraphAttributes, ICluster, AttributesObject } from 'ts-graphviz';
+import { useEffect } from 'react';
+
+export type ClusterAttributesProps = {
+  edge?: EdgeAttributes;
+  node?: NodeAttributes;
+  graph?: ClusterSubgraphAttributes;
+};
+
+export const useClusterAttributes = <T extends string>(
+  cluster: ICluster<T>,
+  attributes: AttributesObject<T>,
+  { edge, node, graph }: ClusterAttributesProps,
+): void => {
+  useEffect(() => {
+    cluster.clear();
+    cluster.apply(attributes);
+  }, [cluster, attributes]);
+  useEffect(() => {
+    cluster.attributes.node.clear();
+    cluster.attributes.node.apply(node ?? {});
+  }, [cluster, node]);
+
+  useEffect(() => {
+    cluster.attributes.edge.clear();
+    cluster.attributes.edge.apply(edge ?? {});
+  }, [cluster, edge]);
+
+  useEffect(() => {
+    cluster.attributes.graph.clear();
+    cluster.attributes.graph.apply(graph ?? {});
+  }, [cluster, graph]);
+};

src/hooks/use-comment.ts

@@ -0,0 +1,8 @@
+import { IHasComment } from 'ts-graphviz';
+import { useEffect } from 'react';
+
+export const useHasComment = (target: IHasComment, comment?: string): void =>
+  useEffect(() => {
+    // eslint-disable-next-line no-param-reassign
+    target.comment = comment;
+  }, [target, comment]);

src/hooks/use-digraph.ts

@@ -1,33 +1,32 @@
 import { useMemo, useEffect } from 'react';
 import { Digraph, RootClusterAttributes } from 'ts-graphviz';
 import { useGraphvizContext } from './use-graphviz-context';
+import { useClusterAttributes, ClusterAttributesProps } from './use-cluster-attributes';
+import { useHasComment } from './use-comment';
 
 export type DigraphProps = {
   id?: string;
   comment?: string;
-} & RootClusterAttributes;
+} & RootClusterAttributes &
+  ClusterAttributesProps;
 
-export const useDigraph = ({ id, comment, ...attributes }: DigraphProps = {}): Digraph => {
+export const useDigraph = ({ id, comment, edge, node, graph, ...attributes }: DigraphProps = {}): Digraph => {
   const context = useGraphvizContext();
   const digraph = useMemo(() => {
     const g = new Digraph(context, id);
     g.comment = comment;
     g.apply(attributes);
+    g.attributes.node.apply(node ?? {});
+    g.attributes.edge.apply(edge ?? {});
+    g.attributes.graph.apply(graph ?? {});
     return g;
-  }, [context, id, comment, attributes]);
+  }, [context, id, comment, edge, node, graph, attributes]);
+  useHasComment(digraph, comment);
+  useClusterAttributes(digraph, attributes, { edge, node, graph });
   useEffect(() => {
     return (): void => {
       context.root = undefined;
     };
   }, [context]);
-
-  useEffect(() => {
-    digraph.clear();
-    digraph.apply(attributes);
-  }, [digraph, attributes]);
-
-  useEffect(() => {
-    digraph.comment = comment;
-  }, [digraph, comment]);
   return digraph;
 };

src/hooks/use-edge.ts

@@ -2,6 +2,8 @@ import { useEffect, useMemo } from 'react';
 import { EdgeTargetLike, IEdge, EdgeAttributes } from 'ts-graphviz';
 import { useCluster } from './use-cluster';
 import { EdgeTargetLengthErrorMessage } from '../utils/errors';
+import { useHasComment } from './use-comment';
+import { useHasAttributes } from './use-has-attributes';
 
 export type EdgeProps = {
   targets: EdgeTargetLike[];
@@ -19,15 +21,8 @@ export const useEdge = ({ targets, comment, ...attributes }: EdgeProps): IEdge =
     e.attributes.apply(attributes);
     return e;
   }, [cluster, targets, comment, attributes]);
-  useEffect(() => {
-    edge.attributes.clear();
-    edge.attributes.apply(attributes);
-  }, [edge, attributes]);
-
-  useEffect(() => {
-    edge.comment = comment;
-  }, [edge, comment]);
-
+  useHasComment(edge, comment);
+  useHasAttributes(edge, attributes);
   useEffect(() => {
     return (): void => {
       cluster.removeEdge(edge);

src/hooks/use-graph.ts

@@ -1,33 +1,35 @@
 import { useMemo, useEffect } from 'react';
-import { Graph, RootClusterAttributes } from 'ts-graphviz';
+import { Graph, RootClusterAttributes, NodeAttributes, EdgeAttributes, ClusterSubgraphAttributes } from 'ts-graphviz';
 import { useGraphvizContext } from './use-graphviz-context';
+import { ClusterAttributesProps, useClusterAttributes } from './use-cluster-attributes';
+import { useHasComment } from './use-comment';
 
 export type GraphProps = {
   id?: string;
   comment?: string;
-} & RootClusterAttributes;
+  edge?: EdgeAttributes;
+  node?: NodeAttributes;
+  graph?: ClusterSubgraphAttributes;
+} & RootClusterAttributes &
+  ClusterAttributesProps;
 
-export const useGraph = ({ id, comment, ...attributes }: GraphProps = {}): Graph => {
+export const useGraph = ({ id, comment, edge, node, graph, ...attributes }: GraphProps = {}): Graph => {
   const context = useGraphvizContext();
-  const graph = useMemo(() => {
+  const memoGraph = useMemo(() => {
     const g = new Graph(context, id);
     g.comment = comment;
     g.apply(attributes);
+    g.attributes.node.apply(node ?? {});
+    g.attributes.edge.apply(edge ?? {});
+    g.attributes.graph.apply(graph ?? {});
     return g;
-  }, [context, id, comment, attributes]);
+  }, [context, id, comment, edge, node, graph, attributes]);
+  useHasComment(memoGraph, comment);
+  useClusterAttributes(memoGraph, attributes, { edge, node, graph });
   useEffect(() => {
     return (): void => {
       context.root = undefined;
     };
   }, [context]);
-
-  useEffect(() => {
-    graph.clear();
-    graph.apply(attributes);
-  }, [graph, attributes]);
-
-  useEffect(() => {
-    graph.comment = comment;
-  }, [graph, comment]);
-  return graph;
+  return memoGraph;
 };

src/hooks/use-has-attributes.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+import { IHasAttributes, AttributesObject } from 'ts-graphviz';
+
+export const useHasAttributes = <T extends string>(target: IHasAttributes<T>, attributes: AttributesObject<T>): void =>
+  useEffect(() => {
+    target.attributes.clear();
+    target.attributes.apply(attributes);
+  }, [target, attributes]);

src/hooks/use-node.ts

@@ -1,6 +1,8 @@
 import { useEffect, useMemo } from 'react';
 import { INode, NodeAttributes } from 'ts-graphviz';
 import { useCluster } from './use-cluster';
+import { useHasComment } from './use-comment';
+import { useHasAttributes } from './use-has-attributes';
 
 export type NodeProps = {
   id: string;
@@ -15,14 +17,8 @@ export const useNode = ({ id, comment, ...attributes }: NodeProps): INode => {
     n.comment = comment;
     return n;
   }, [cluster, id, attributes, comment]);
-  useEffect(() => {
-    node.attributes.clear();
-    node.attributes.apply(attributes);
-  }, [node, attributes]);
-
-  useEffect(() => {
-    node.comment = comment;
-  }, [node, comment]);
+  useHasComment(node, comment);
+  useHasAttributes(node, attributes);
   useEffect(() => {
     return (): void => {
       cluster.removeNode(node);

src/hooks/use-subgraph.ts

@@ -1,36 +1,32 @@
 import { useMemo, useEffect } from 'react';
 import { ISubgraph, ClusterSubgraphAttributes } from 'ts-graphviz';
 import { useCluster } from './use-cluster';
+import { useClusterAttributes, ClusterAttributesProps } from './use-cluster-attributes';
+import { useHasComment } from './use-comment';
 
 export type SubgraphProps = {
   id?: string;
   comment?: string;
-} & ClusterSubgraphAttributes;
+} & ClusterSubgraphAttributes &
+  ClusterAttributesProps;
 
-export const useSubgraph = ({ id, comment, ...attributes }: SubgraphProps = {}): ISubgraph => {
+export const useSubgraph = ({ id, comment, edge, node, graph, ...attributes }: SubgraphProps = {}): ISubgraph => {
   const cluster = useCluster();
   const subgraph = useMemo(() => {
     const g = cluster.createSubgraph(id);
     g.comment = comment;
     g.apply(attributes);
+    g.attributes.node.apply(node ?? {});
+    g.attributes.edge.apply(edge ?? {});
+    g.attributes.graph.apply(graph ?? {});
     return g;
-  }, [cluster, id, comment, attributes]);
+  }, [cluster, id, comment, edge, node, graph, attributes]);
+  useHasComment(subgraph, comment);
+  useClusterAttributes(subgraph, attributes, { edge, node, graph });
   useEffect(() => {
     return (): void => {
       cluster.removeSubgraph(subgraph);
     };
   }, [cluster, subgraph]);
-  useEffect(() => {
-    subgraph.id = id;
-  }, [subgraph, id]);
-
-  useEffect(() => {
-    subgraph.clear();
-    subgraph.apply(attributes);
-  }, [subgraph, attributes]);
-
-  useEffect(() => {
-    subgraph.comment = comment;
-  }, [subgraph, comment]);
   return subgraph;
 };