feat: add legend in graph.

Author: CorvusYe

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## 0.0.1+9
 - feat: create random color for tag.
+- feat: add legend in graph.
 
 ## 0.0.1+8
 - feat(convert): cache the edge names and vertex tags in graph.

lib/widgets/graph_component.dart

@@ -47,7 +47,7 @@ class GraphComponent extends FlameGame
     graph = convertor.convertGraph(data);
     graph.vertexes = graph.vertexes.toSet().toList()
       ..sort((key1, key2) => key1.degree - key2.degree > 0 ? -1 : 1);
-
+    setDefaultVertexColor();
     for (var edge in graph.edges) {
       var ec = EdgeComponent(edge, graph, context)..scaleNotifier = scale;
       edge.cpn = ec;
@@ -59,9 +59,19 @@ class GraphComponent extends FlameGame
       vertex.cpn = vc;
       add(vc);
     }
+
+    createLegend();
     options.graphStyle.graphColor(graph);
   }
 
+  setDefaultVertexColor() {
+    var tagColorByIndex = options.graphStyle.tagColorByIndex;
+    var needCount = graph.allTags.length - tagColorByIndex.length;
+    for (var i = 0; i < needCount; i++) {
+      tagColorByIndex.add(options.graphStyle.defaultColor()[0]);
+    }
+  }
+
   updateViewport(x, y) {
     camera.viewport = FixedResolutionViewport(Vector2(x, y));
   }
@@ -102,4 +112,24 @@ class GraphComponent extends FlameGame
       algorithm.onZoomEdge(edge, pointLocation!, delta);
     }
   }
+
+  void createLegend() {
+    for (var i = 0; i < graph.allTags.length; i++) {
+      var tag = graph.allTags[i];
+
+      add(
+        RectangleComponent.fromRect(
+            Rect.fromLTWH(
+              40,
+              50.0 + 30 * i,
+              30,
+              18,
+            ),
+            paint: Paint()
+              ..color = options.graphStyle.colorByTag(tag, graph.allTags)!),
+      );
+
+      add(TextComponent(text: tag, position: Vector2(40 + 40, 44.0 + 30 * i)));
+    }
+  }
 }