feat(convert): cache the edge names and vertex tags in graph.

feat: support customize background.

Author: CorvusYe

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.1+8
+- feat(convert): cache the edge names and vertex tags in graph.
+- feat: support customize background.
+
 ## 0.0.1+7
 - feat: supported customize vertex ui.
 - feat: supported customize edge ui.

README-CN.md

@@ -48,6 +48,11 @@ void main() {
       {
         'id': 'node$i',
         'tag': 'tag${r.nextInt(9)}',
+        'tags': [
+          'tag${r.nextInt(4)}',
+          if (r.nextBool()) 'tag${r.nextInt(4)}',
+          if (r.nextBool()) 'tag${r.nextInt(8)}'
+        ],
       },
     );
   }
@@ -83,6 +88,15 @@ void main() {
         algorithm: ForceDirected(),
         convertor: MapConvertor(),
         options: Options()
+          ..graphStyle = (GraphStyle()
+            // tagColor is prior to tagColorByIndex. use vertex.tags to get color
+            ..tagColor = {'tag3': Colors.purple}
+            ..tagColorByIndex = [
+              Colors.blue,
+              Colors.red,
+              Colors.green,
+              Colors.yellow,
+            ])
           ..edgePanelBuilder = edgePanelBuilder
           ..vertexPanelBuilder = vertexPanelBuilder
           ..edgeShape = EdgeLineShape() // default is EdgeLineShape.

README.md

@@ -48,6 +48,11 @@ void main() {
       {
         'id': 'node$i',
         'tag': 'tag${r.nextInt(9)}',
+        'tags': [
+          'tag${r.nextInt(4)}',
+          if (r.nextBool()) 'tag${r.nextInt(4)}',
+          if (r.nextBool()) 'tag${r.nextInt(8)}'
+        ],
       },
     );
   }
@@ -83,6 +88,15 @@ void main() {
         algorithm: ForceDirected(),
         convertor: MapConvertor(),
         options: Options()
+          ..graphStyle = (GraphStyle()
+            // tagColor is prior to tagColorByIndex. use vertex.tags to get color
+            ..tagColor = {'tag3': Colors.purple}
+            ..tagColorByIndex = [
+              Colors.blue,
+              Colors.red,
+              Colors.green,
+              Colors.yellow,
+            ])
           ..edgePanelBuilder = edgePanelBuilder
           ..vertexPanelBuilder = vertexPanelBuilder
           ..edgeShape = EdgeLineShape() // default is EdgeLineShape.

example/lib/main.dart

@@ -15,6 +15,11 @@ void main() {
       {
         'id': 'node$i',
         'tag': 'tag${r.nextInt(9)}',
+        'tags': [
+          'tag${r.nextInt(4)}',
+          if (r.nextBool()) 'tag${r.nextInt(4)}',
+          if (r.nextBool()) 'tag${r.nextInt(8)}'
+        ],
       },
     );
   }
@@ -50,6 +55,15 @@ void main() {
         algorithm: ForceDirected(),
         convertor: MapConvertor(),
         options: Options()
+          ..graphStyle = (GraphStyle()
+            // tagColor is prior to tagColorByIndex. use vertex.tags to get color
+            ..tagColor = {'tag3': Colors.purple}
+            ..tagColorByIndex = [
+              Colors.blue,
+              Colors.red,
+              Colors.green,
+              Colors.yellow,
+            ])
           ..edgePanelBuilder = edgePanelBuilder
           ..vertexPanelBuilder = vertexPanelBuilder
           ..edgeShape = EdgeLineShape() // default is EdgeLineShape.

example/pubspec.lock

@@ -76,7 +76,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.1+7"
+    version: "0.0.1+8"
   flutter_lints:
     dependency: "direct dev"
     description:

lib/core/data_convertor.dart

@@ -30,6 +30,11 @@ abstract class DataConvertor<V, E> {
   void vertexAsGraphComponse(V v, Graph<dynamic> g, Vertex<dynamic> vertex) {
     vertex.data = v;
     g.keyCache[vertex.id] = vertex;
+
+    vertex.tags?.forEach((tag) {
+      var absent = !g.allTags.contains(tag);
+      if (absent) g.allTags.add(tag);
+    });
   }
 
   /// Create edge and graph relationship in memory.
@@ -45,5 +50,8 @@ abstract class DataConvertor<V, E> {
     }
     result.start.degree++;
     result.data = e;
+
+    var absent = !g.allEdgeNames.contains(result.edgeName);
+    if (absent) g.allEdgeNames.add(result.edgeName);
   }
 }

lib/core/options.dart

@@ -2,7 +2,7 @@
 //
 // This source code is licensed under Apache 2.0 License.
 
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_graph_view/flutter_graph_view.dart';
 
 /// The core api for Graph Options.
@@ -28,4 +28,13 @@ class Options {
   ///
   /// 给边设置形状
   EdgeShape edgeShape = EdgeLineShape();
+
+  /// use for create background widget.
+  ///
+  /// 用于创建背景
+  Widget Function(BuildContext) backgroundBuilder = (context) => Container(
+        color: Colors.black54,
+      );
+
+  GraphStyle graphStyle = GraphStyle();
 }

lib/core/options/shape/vertex/vertex_circle_shape.dart

@@ -2,9 +2,10 @@
 //
 // This source code is licensed under Apache 2.0 License.
 
-import 'dart:ui';
+import 'dart:ui' as ui;
 
 import 'package:flame/collisions.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_graph_view/flutter_graph_view.dart';
 
 /// The default shape impl.
@@ -48,22 +49,26 @@ class VertexCircleShape extends VertexShape {
   @override
   void setPaint(Vertex vertex) {
     var cpn = vertex.cpn!;
+    var colors = vertex.colors;
+
     if (isWeaken(vertex)) {
       cpn.paint = Paint()
-        ..shader = Gradient.radial(
+        ..shader = ui.Gradient.radial(
           Offset(vertex.radius, vertex.radius),
           vertex.radius,
           List.generate(
-            vertex.colors.length,
-            (index) => vertex.colors[index].withOpacity(.5),
+            colors.length,
+            (index) => colors[index].withOpacity(.5),
           ),
+          List.generate(colors.length, (index) => (index + 1) / colors.length),
         );
     } else {
       cpn.paint = Paint()
-        ..shader = Gradient.radial(
+        ..shader = ui.Gradient.radial(
           Offset(vertex.radius, vertex.radius),
           vertex.radius,
-          vertex.colors,
+          colors,
+          List.generate(colors.length, (index) => (index + 1) / colors.length),
         );
     }
   }

lib/core/options/style/graph_style.dart

@@ -0,0 +1,88 @@
+// Copyright (c) 2023- All flutter_graph_view authors. All rights reserved.
+//
+// This source code is licensed under Apache 2.0 License.
+
+import 'dart:ui';
+import 'dart:math' as math;
+
+import 'package:flutter_graph_view/flutter_graph_view.dart';
+
+/// The graph style configuration.
+///
+/// 图的样式配置类。
+class GraphStyle {
+  /// [tagColor] is prior to [tagColorByIndex]. use [Vertex.tags] to get color in [vertexColors]
+  ///
+  /// [tagColor]的优先级比[tagColorByIndex]高。
+  /// 在[vertexColors]方法中使用[Vertex.tags]属性获取颜色
+  Map<String, Color>? tagColor;
+
+  /// [tagColor] is prior to [tagColorByIndex]. use [Vertex.tags] to get color in [vertexColors]
+  ///
+  /// [tagColor]的优先级比[tagColorByIndex]高。
+  /// 在[vertexColors]方法中使用[Vertex.tags]属性获取颜色
+  late List<Color> tagColorByIndex = [];
+
+  /// set elements color in [graph]
+  ///
+  /// 对[graph]中的元素设置颜色
+  void graphColor(Graph graph) {
+    for (var vertex in graph.vertexes) {
+      vertex.colors = vertexColors(vertex);
+    }
+    // TODO set edge color
+  }
+
+  /// get color list by [vertex]'s `tags`.
+  ///
+  /// 通过[vertex]中的`tags`属性获取颜色列表
+  List<Color> vertexColors(Vertex vertex) {
+    var tags = vertex.tags;
+    var allTags = vertex.cpn!.gameRef.graph.allTags;
+
+    if (tags == null) {
+      return defaultColor();
+    }
+    List<Color> colors = [];
+
+    for (var tag in tags) {
+      Color? color;
+      if (tagColor != null) {
+        color = tagColor![tag];
+      }
+      if (color == null) {
+        var idx = allTags.indexOf(tag);
+        if (idx < tagColorByIndex.length) color = tagColorByIndex[idx];
+      }
+      if (color != null) {
+        colors.add(color);
+      }
+    }
+
+    if (colors.isEmpty) {
+      return defaultColor();
+    }
+    return colors;
+  }
+
+  /// when there is not color matched in [tagColor] on [tagColorByIndex], return random color.
+  ///
+  /// 当在 [tagColor] 与 [tagColorByIndex] 中匹配不到颜色时，返回随机颜色
+  var defaultColor = () {
+    var r = math.Random();
+    return [
+      Color.fromRGBO(
+        r.nextInt(160) + 80,
+        r.nextInt(160) + 80,
+        r.nextInt(160) + 80,
+        1,
+      ),
+      Color.fromRGBO(
+        r.nextInt(160) + 80,
+        r.nextInt(160) + 80,
+        r.nextInt(160) + 80,
+        1,
+      ),
+    ];
+  };
+}

lib/flutter_graph_view.dart

@@ -30,6 +30,8 @@ export 'core/algorithm/force_directed.dart';
 export 'core/options/shape/vertex/vertex_circle_shape.dart';
 export 'core/options/shape/edge/edge_line_shape.dart';
 
+export 'core/options/style/graph_style.dart';
+
 /// third party
 export 'package:flame/flame.dart';
 export 'package:flame/components.dart';

lib/flutter_graph_widget.dart

@@ -79,14 +79,13 @@ class _FlutterGraphWidgetState extends State<FlutterGraphWidget> {
   @override
   Widget build(BuildContext context) {
     return GameWidget(
-      backgroundBuilder: (context) => Container(
-        color: Colors.black54,
-      ),
+      backgroundBuilder: widget.options?.backgroundBuilder,
       overlayBuilderMap: overlayBuilderMap2,
       game: graphCpn = GraphComponent(
         data: widget.data,
         convertor: widget.convertor,
         algorithm: widget.algorithm,
+        options: widget.options,
         context: context,
       ),
     );

lib/model/graph.dart

@@ -37,4 +37,14 @@ class Graph<ID> {
   /// The origin business data of graph.
   /// 图的原始业务数据。
   dynamic data;
+
+  /// cache the all tags of vertexes.
+  ///
+  /// 缓存所有的节点标签
+  List<String> allTags = [];
+
+  /// cache the all edge name
+  ///
+  /// 缓存所有的边类型
+  List<String> allEdgeNames = [];
 }

lib/model/vertex.dart

@@ -69,20 +69,7 @@ class Vertex<I> {
 
   int deep = 1;
 
-  late List<Color> colors = [
-    Color.fromRGBO(
-      math.Random().nextInt(160) + 80,
-      math.Random().nextInt(160) + 80,
-      math.Random().nextInt(160) + 80,
-      1,
-    ),
-    Color.fromRGBO(
-      math.Random().nextInt(160) + 80,
-      math.Random().nextInt(160) + 80,
-      math.Random().nextInt(160) + 80,
-      1,
-    ),
-  ];
+  List<Color> colors = [];
 
   /// Default position of current vertex in graph.
   /// 节点在图中的默认位置。

lib/widgets/graph_component.dart

@@ -59,6 +59,7 @@ class GraphComponent extends FlameGame
       vertex.cpn = vc;
       add(vc);
     }
+    options.graphStyle.graphColor(graph);
   }
 
   updateViewport(x, y) {

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+7
+version: 0.0.1+8
 homepage: https://github.com/dudu-ltd/flutter_graph_view
 
 environment: