Skip to content

Commit e1db2c5

Browse files
CorvusYeCorvusYe
committed
feat(convert): cache the edge names and vertex tags in graph.
feat: support customize background.
1 parent 8542051 commit e1db2c5

15 files changed

+181
-26
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 0.0.1+8
2+
- feat(convert): cache the edge names and vertex tags in graph.
3+
- feat: support customize background.
4+
15
## 0.0.1+7
26
- feat: supported customize vertex ui.
37
- feat: supported customize edge ui.

‎README-CN.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@ void main() {
4848
{
4949
'id': 'node$i',
5050
'tag': 'tag${r.nextInt(9)}',
51+
'tags': [
52+
'tag${r.nextInt(4)}',
53+
if (r.nextBool()) 'tag${r.nextInt(4)}',
54+
if (r.nextBool()) 'tag${r.nextInt(8)}'
55+
],
5156
},
5257
);
5358
}
@@ -83,6 +88,15 @@ void main() {
8388
algorithm: ForceDirected(),
8489
convertor: MapConvertor(),
8590
options: Options()
91+
..graphStyle = (GraphStyle()
92+
// tagColor is prior to tagColorByIndex. use vertex.tags to get color
93+
..tagColor = {'tag3': Colors.purple}
94+
..tagColorByIndex = [
95+
Colors.blue,
96+
Colors.red,
97+
Colors.green,
98+
Colors.yellow,
99+
])
86100
..edgePanelBuilder = edgePanelBuilder
87101
..vertexPanelBuilder = vertexPanelBuilder
88102
..edgeShape = EdgeLineShape() // default is EdgeLineShape.

‎README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@ void main() {
4848
{
4949
'id': 'node$i',
5050
'tag': 'tag${r.nextInt(9)}',
51+
'tags': [
52+
'tag${r.nextInt(4)}',
53+
if (r.nextBool()) 'tag${r.nextInt(4)}',
54+
if (r.nextBool()) 'tag${r.nextInt(8)}'
55+
],
5156
},
5257
);
5358
}
@@ -83,6 +88,15 @@ void main() {
8388
algorithm: ForceDirected(),
8489
convertor: MapConvertor(),
8590
options: Options()
91+
..graphStyle = (GraphStyle()
92+
// tagColor is prior to tagColorByIndex. use vertex.tags to get color
93+
..tagColor = {'tag3': Colors.purple}
94+
..tagColorByIndex = [
95+
Colors.blue,
96+
Colors.red,
97+
Colors.green,
98+
Colors.yellow,
99+
])
86100
..edgePanelBuilder = edgePanelBuilder
87101
..vertexPanelBuilder = vertexPanelBuilder
88102
..edgeShape = EdgeLineShape() // default is EdgeLineShape.

‎example/lib/main.dart‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ void main() {
1515
{
1616
'id': 'node$i',
1717
'tag': 'tag${r.nextInt(9)}',
18+
'tags': [
19+
'tag${r.nextInt(4)}',
20+
if (r.nextBool()) 'tag${r.nextInt(4)}',
21+
if (r.nextBool()) 'tag${r.nextInt(8)}'
22+
],
1823
},
1924
);
2025
}
@@ -50,6 +55,15 @@ void main() {
5055
algorithm: ForceDirected(),
5156
convertor: MapConvertor(),
5257
options: Options()
58+
..graphStyle = (GraphStyle()
59+
// tagColor is prior to tagColorByIndex. use vertex.tags to get color
60+
..tagColor = {'tag3': Colors.purple}
61+
..tagColorByIndex = [
62+
Colors.blue,
63+
Colors.red,
64+
Colors.green,
65+
Colors.yellow,
66+
])
5367
..edgePanelBuilder = edgePanelBuilder
5468
..vertexPanelBuilder = vertexPanelBuilder
5569
..edgeShape = EdgeLineShape() // default is EdgeLineShape.

‎example/pubspec.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ packages:
7676
path: ".."
7777
relative: true
7878
source: path
79-
version: "0.0.1+7"
79+
version: "0.0.1+8"
8080
flutter_lints:
8181
dependency: "direct dev"
8282
description:

‎lib/core/data_convertor.dart‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@ abstract class DataConvertor<V, E> {
3030
void vertexAsGraphComponse(V v, Graph<dynamic> g, Vertex<dynamic> vertex) {
3131
vertex.data = v;
3232
g.keyCache[vertex.id] = vertex;
33+
34+
vertex.tags?.forEach((tag) {
35+
var absent = !g.allTags.contains(tag);
36+
if (absent) g.allTags.add(tag);
37+
});
3338
}
3439

3540
/// Create edge and graph relationship in memory.
@@ -45,5 +50,8 @@ abstract class DataConvertor<V, E> {
4550
}
4651
result.start.degree++;
4752
result.data = e;
53+
54+
var absent = !g.allEdgeNames.contains(result.edgeName);
55+
if (absent) g.allEdgeNames.add(result.edgeName);
4856
}
4957
}

‎lib/core/options.dart‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
//
33
// This source code is licensed under Apache 2.0 License.
44

5-
import 'package:flutter/cupertino.dart';
5+
import 'package:flutter/material.dart';
66
import 'package:flutter_graph_view/flutter_graph_view.dart';
77

88
/// The core api for Graph Options.
@@ -28,4 +28,13 @@ class Options {
2828
///
2929
/// 给边设置形状
3030
EdgeShape edgeShape = EdgeLineShape();
31+
32+
/// use for create background widget.
33+
///
34+
/// 用于创建背景
35+
Widget Function(BuildContext) backgroundBuilder = (context) => Container(
36+
color: Colors.black54,
37+
);
38+
39+
GraphStyle graphStyle = GraphStyle();
3140
}

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
//
33
// This source code is licensed under Apache 2.0 License.
44

5-
import 'dart:ui';
5+
import 'dart:ui' as ui;
66

77
import 'package:flame/collisions.dart';
8+
import 'package:flutter/material.dart';
89
import 'package:flutter_graph_view/flutter_graph_view.dart';
910

1011
/// The default shape impl.
@@ -48,22 +49,26 @@ class VertexCircleShape extends VertexShape {
4849
@override
4950
void setPaint(Vertex vertex) {
5051
var cpn = vertex.cpn!;
52+
var colors = vertex.colors;
53+
5154
if (isWeaken(vertex)) {
5255
cpn.paint = Paint()
53-
..shader = Gradient.radial(
56+
..shader = ui.Gradient.radial(
5457
Offset(vertex.radius, vertex.radius),
5558
vertex.radius,
5659
List.generate(
57-
vertex.colors.length,
58-
(index) => vertex.colors[index].withOpacity(.5),
60+
colors.length,
61+
(index) => colors[index].withOpacity(.5),
5962
),
63+
List.generate(colors.length, (index) => (index + 1) / colors.length),
6064
);
6165
} else {
6266
cpn.paint = Paint()
63-
..shader = Gradient.radial(
67+
..shader = ui.Gradient.radial(
6468
Offset(vertex.radius, vertex.radius),
6569
vertex.radius,
66-
vertex.colors,
70+
colors,
71+
List.generate(colors.length, (index) => (index + 1) / colors.length),
6772
);
6873
}
6974
}

‎lib/core/options/style/graph_style.dart‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
// Copyright (c) 2023- All flutter_graph_view authors. All rights reserved.
2+
//
3+
// This source code is licensed under Apache 2.0 License.
4+
5+
import 'dart:ui';
6+
import 'dart:math' as math;
7+
8+
import 'package:flutter_graph_view/flutter_graph_view.dart';
9+
10+
/// The graph style configuration.
11+
///
12+
/// 图的样式配置类。
13+
class GraphStyle {
14+
/// [tagColor] is prior to [tagColorByIndex]. use [Vertex.tags] to get color in [vertexColors]
15+
///
16+
/// [tagColor]的优先级比[tagColorByIndex]高。
17+
/// 在[vertexColors]方法中使用[Vertex.tags]属性获取颜色
18+
Map<String, Color>? tagColor;
19+
20+
/// [tagColor] is prior to [tagColorByIndex]. use [Vertex.tags] to get color in [vertexColors]
21+
///
22+
/// [tagColor]的优先级比[tagColorByIndex]高。
23+
/// 在[vertexColors]方法中使用[Vertex.tags]属性获取颜色
24+
late List<Color> tagColorByIndex = [];
25+
26+
/// set elements color in [graph]
27+
///
28+
/// 对[graph]中的元素设置颜色
29+
void graphColor(Graph graph) {
30+
for (var vertex in graph.vertexes) {
31+
vertex.colors = vertexColors(vertex);
32+
}
33+
// TODO set edge color
34+
}
35+
36+
/// get color list by [vertex]'s `tags`.
37+
///
38+
/// 通过[vertex]中的`tags`属性获取颜色列表
39+
List<Color> vertexColors(Vertex vertex) {
40+
var tags = vertex.tags;
41+
var allTags = vertex.cpn!.gameRef.graph.allTags;
42+
43+
if (tags == null) {
44+
return defaultColor();
45+
}
46+
List<Color> colors = [];
47+
48+
for (var tag in tags) {
49+
Color? color;
50+
if (tagColor != null) {
51+
color = tagColor![tag];
52+
}
53+
if (color == null) {
54+
var idx = allTags.indexOf(tag);
55+
if (idx < tagColorByIndex.length) color = tagColorByIndex[idx];
56+
}
57+
if (color != null) {
58+
colors.add(color);
59+
}
60+
}
61+
62+
if (colors.isEmpty) {
63+
return defaultColor();
64+
}
65+
return colors;
66+
}
67+
68+
/// when there is not color matched in [tagColor] on [tagColorByIndex], return random color.
69+
///
70+
/// 当在 [tagColor] 与 [tagColorByIndex] 中匹配不到颜色时，返回随机颜色
71+
var defaultColor = () {
72+
var r = math.Random();
73+
return [
74+
Color.fromRGBO(
75+
r.nextInt(160) + 80,
76+
r.nextInt(160) + 80,
77+
r.nextInt(160) + 80,
78+
1,
79+
),
80+
Color.fromRGBO(
81+
r.nextInt(160) + 80,
82+
r.nextInt(160) + 80,
83+
r.nextInt(160) + 80,
84+
1,
85+
),
86+
];
87+
};
88+
}

‎lib/flutter_graph_view.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ export 'core/algorithm/force_directed.dart';
3030
export 'core/options/shape/vertex/vertex_circle_shape.dart';
3131
export 'core/options/shape/edge/edge_line_shape.dart';
3232

33+
export 'core/options/style/graph_style.dart';
34+
3335
/// third party
3436
export 'package:flame/flame.dart';
3537
export 'package:flame/components.dart';

0 commit comments

Comments
 (0)