feat: add legend in graph.

graph-cn · Feb 1, 2023 · 4990221 · 4990221
1 parent dc0dc02
commit 4990221
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 32 deletions.
diff --git a/README-CN.md b/README-CN.md
@@ -6,6 +6,22 @@
  -->
 
 # Flutter Graph View
+
+<p align="center">
+  <a title="Pub" href="https://flame-engine.org" >
+      <img src="https://img.shields.io/badge/Powered%20by-%F0%9F%94%A5-orange.svg" />
+  </a>
+  <a title="Powered by Flame" href="https://pub.dev/packages/flutter_graph_view" >
+      <img src="https://img.shields.io/badge/Pub-v0.0.1+x-red?style=popout" />
+  </a>
+  <a href="https://github.com/dudu-ltd/flutter_graph_view/stargazers">
+      <img src="https://img.shields.io/github/stars/dudu-ltd/flutter_graph_view" alt="GitHub stars" />
+  </a>
+  <a href="https://github.com/dudu-ltd/flutter_graph_view/network/members">
+      <img src="https://img.shields.io/github/forks/dudu-ltd/flutter_graph_view" alt="GitHub forks" />
+  </a>
+</p>
+
 致力于图数据的可视化组件
 
 ![demo](https://foruda.gitee.com/images/1674684822685415888/5033481e_1043207.png)
@@ -19,7 +35,7 @@ TODO:
   - [x] 力导向图法，雏形已实现
     - [x] 节点碰撞检测 
 - [x] 提供数据面板的嵌入
-- [ ] 提供样式配置
+- [x] 提供样式配置
 - [ ] 提供更多交互能力
 
 ## Getting started
@@ -49,7 +65,7 @@ void main() {
         'id': 'node$i',
         'tag': 'tag${r.nextInt(9)}',
         'tags': [
-          'tag${r.nextInt(4)}',
+          'tag${r.nextInt(9)}',
           if (r.nextBool()) 'tag${r.nextInt(4)}',
           if (r.nextBool()) 'tag${r.nextInt(8)}'
         ],
@@ -90,13 +106,20 @@ void main() {
         options: Options()
           ..graphStyle = (GraphStyle()
             // tagColor is prior to tagColorByIndex. use vertex.tags to get color
-            ..tagColor = {'tag3': Colors.purple}
+            ..tagColor = {'tag8': Colors.orangeAccent.shade200}
             ..tagColorByIndex = [
-              Colors.blue,
-              Colors.red,
-              Colors.green,
-              Colors.yellow,
+              Colors.red.shade200,
+              Colors.orange.shade200,
+              Colors.yellow.shade200,
+              Colors.green.shade200,
+              Colors.blue.shade200,
+              Colors.blueAccent.shade200,
+              Colors.purple.shade200,
+              Colors.pink.shade200,
+              Colors.blueGrey.shade200,
+              Colors.deepOrange.shade200,
             ])
+          ..useLegend = true // default true
           ..edgePanelBuilder = edgePanelBuilder
           ..vertexPanelBuilder = vertexPanelBuilder
           ..edgeShape = EdgeLineShape() // default is EdgeLineShape.

diff --git a/README.md b/README.md
@@ -4,10 +4,28 @@
   This source code is licensed under Apache 2.0 License.
  -->
 
-# Flutter Graph View
+<h1 align="center"> Flutter Graph View </h1>
+
+
+<p align="center">
+  <a title="Pub" href="https://flame-engine.org" >
+      <img src="https://img.shields.io/badge/Powered%20by-%F0%9F%94%A5-orange.svg" />
+  </a>
+  <a title="Powered by Flame" href="https://pub.dev/packages/flutter_graph_view" >
+      <img src="https://img.shields.io/badge/Pub-v0.0.1+x-red?style=popout" />
+  </a>
+  <a href="https://github.com/dudu-ltd/flutter_graph_view/stargazers">
+      <img src="https://img.shields.io/github/stars/dudu-ltd/flutter_graph_view" alt="GitHub stars" />
+  </a>
+  <a href="https://github.com/dudu-ltd/flutter_graph_view/network/members">
+      <img src="https://img.shields.io/github/forks/dudu-ltd/flutter_graph_view" alt="GitHub forks" />
+  </a>
+</p>
+
 Widgets for beautiful graphic data structures, such as force-oriented diagrams. (Under development.)
 
-![image](https://user-images.githubusercontent.com/15630211/214703510-17ccfe4d-e3f6-49b9-9bc1-6ce84bd825a8.png)
+![image](https://user-images.githubusercontent.com/15630211/216155004-0d6dc826-c589-41cf-bf7c-a51685582c05.png)
+
 
 https://user-images.githubusercontent.com/15630211/214360687-93a3683c-0935-46bd-9584-5cb997d518b8.mp4
 
@@ -19,7 +37,7 @@ TODO:
   - [x] Force directed algorithm.
   - [x] Random algorithm (In example folder).
 - [x] Data panel embedding.
-- [ ] Style configuration.
+- [x] Style configuration.
 - [ ] More graphical interactions.
 
 ## Getting started
@@ -49,7 +67,7 @@ void main() {
         'id': 'node$i',
         'tag': 'tag${r.nextInt(9)}',
         'tags': [
-          'tag${r.nextInt(4)}',
+          'tag${r.nextInt(9)}',
           if (r.nextBool()) 'tag${r.nextInt(4)}',
           if (r.nextBool()) 'tag${r.nextInt(8)}'
         ],
@@ -90,13 +108,20 @@ void main() {
         options: Options()
           ..graphStyle = (GraphStyle()
             // tagColor is prior to tagColorByIndex. use vertex.tags to get color
-            ..tagColor = {'tag3': Colors.purple}
+            ..tagColor = {'tag8': Colors.orangeAccent.shade200}
             ..tagColorByIndex = [
-              Colors.blue,
-              Colors.red,
-              Colors.green,
-              Colors.yellow,
+              Colors.red.shade200,
+              Colors.orange.shade200,
+              Colors.yellow.shade200,
+              Colors.green.shade200,
+              Colors.blue.shade200,
+              Colors.blueAccent.shade200,
+              Colors.purple.shade200,
+              Colors.pink.shade200,
+              Colors.blueGrey.shade200,
+              Colors.deepOrange.shade200,
             ])
+          ..useLegend = true // default true
           ..edgePanelBuilder = edgePanelBuilder
           ..vertexPanelBuilder = vertexPanelBuilder
           ..edgeShape = EdgeLineShape() // default is EdgeLineShape.

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -16,7 +16,7 @@ void main() {
         'id': 'node$i',
         'tag': 'tag${r.nextInt(9)}',
         'tags': [
-          'tag${r.nextInt(4)}',
+          'tag${r.nextInt(9)}',
           if (r.nextBool()) 'tag${r.nextInt(4)}',
           if (r.nextBool()) 'tag${r.nextInt(8)}'
         ],
@@ -57,13 +57,20 @@ void main() {
         options: Options()
           ..graphStyle = (GraphStyle()
             // tagColor is prior to tagColorByIndex. use vertex.tags to get color
-            ..tagColor = {'tag3': Colors.purple}
+            ..tagColor = {'tag8': Colors.orangeAccent.shade200}
             ..tagColorByIndex = [
-              Colors.blue,
-              Colors.red,
-              Colors.green,
-              Colors.yellow,
+              Colors.red.shade200,
+              Colors.orange.shade200,
+              Colors.yellow.shade200,
+              Colors.green.shade200,
+              Colors.blue.shade200,
+              Colors.blueAccent.shade200,
+              Colors.purple.shade200,
+              Colors.pink.shade200,
+              Colors.blueGrey.shade200,
+              Colors.deepOrange.shade200,
             ])
+          ..useLegend = true // default true
           ..edgePanelBuilder = edgePanelBuilder
           ..vertexPanelBuilder = vertexPanelBuilder
           ..edgeShape = EdgeLineShape() // default is EdgeLineShape.

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -76,7 +76,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.1+8"
+    version: "0.0.1+9"
   flutter_lints:
     dependency: "direct dev"
     description:

diff --git a/lib/core/options.dart b/lib/core/options.dart
@@ -37,4 +37,9 @@ class Options {
       );
 
   GraphStyle graphStyle = GraphStyle();
+
+  /// if render legend in canvas.
+  ///
+  /// 是否展示图例
+  bool useLegend = true;
 }
diff --git a/lib/widgets/graph_component.dart b/lib/widgets/graph_component.dart
@@ -114,19 +114,16 @@ class GraphComponent extends FlameGame
   }
 
   void createLegend() {
+    if (!options.useLegend) return;
+    var graphStyle = options.graphStyle;
     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)!),
+          Rect.fromLTWH(40, 50.0 + 30 * i, 30, 18),
+          paint: Paint()..color = graphStyle.colorByTag(tag, graph.allTags)!,
+        ),
       );
 
       add(TextComponent(text: tag, position: Vector2(40 + 40, 44.0 + 30 * i)));

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: flutter_graph_view
 description: Widgets for beautiful graphic data structures, such as force-oriented diagrams.
-version: 0.0.1+8
+version: 0.0.1+9
 homepage: https://github.com/dudu-ltd/flutter_graph_view
 
 environment: