diff --git a/README-CN.md b/README-CN.md
index 883578e..f62daec 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -6,6 +6,22 @@
-->
# Flutter Graph View
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
致力于图数据的可视化组件
@@ -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
index 34559e7..402de20 100644
--- a/README.md
+++ b/README.md
@@ -4,10 +4,28 @@
This source code is licensed under Apache 2.0 License.
-->
-# Flutter Graph View
+ Flutter Graph View
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Widgets for beautiful graphic data structures, such as force-oriented diagrams. (Under development.)
-
+
+
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
index 6bf684b..cf763a4 100644
--- 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
index 40ac374..8080082 100644
--- 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
index 3e54159..1944ab0 100644
--- 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
index 3cb1ba4..64ee0fb 100644
--- 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
index f82dce9..756aec1 100644
--- 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: