feats: enable decorator for vertex, custom properties in VertexComponent

dependency: upgrade flame to 1.7.0
graph-cn · Apr 5, 2023 · 0ef767b · 0ef767b
1 parent 5452655
commit 0ef767b
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 74 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,19 @@
+## 0.0.2
+- feat: enable decorator for vertex.
+    - Remove the breath effect. To use the breath effect, please pass in BreatheDecorator() when creating the GraphAlgorithm object, such as:
+    ```dart
+    FlutterGraphWidget(
+        ...
+        algorithm: ForceDirected(BreatheDecorator()),
+        ...
+    )
+    ```
+    
+- feat: adding custom properties to vertex components helps the algorithm create more effects.
+<!-- 将对flame的依赖升级到最新版本 -->
+- dependency: upgrade flame from 1.6.0 to 1.7.0
+
+
 ## 0.0.1+10
 - feat:  support multi line between two vertexes.
 - enhance: optimized edge experience. 

diff --git a/README-CN.md b/README-CN.md
@@ -28,25 +28,25 @@
 
 ![多边节点](https://foruda.gitee.com/images/1675837598136195029/03b27259_1043207.png "屏幕截图")
 
-## Features
+## 特性
 
-TODO: 
 - [x] 数据转换器：用于将业务数据转换成组件可以接收的数据格式
 - [x] 节点定位：用于将节点合理排布在界面上
   - [x] 随机定位法 (example 中已给出样例).
   - [x] 力导向图法，雏形已实现
-    - [x] 节点碰撞检测 
+  - [x] 支持定位算法装饰器
+    - [x] 提供呼吸效果的自定义装饰器（可选特性）
 - [x] 提供数据面板的嵌入
 - [x] 提供样式配置
 - [ ] 提供更多交互能力
 
-## Getting started
+## 如何开始
 
 ```sh
 flutter pub add flutter_graph_view
 ```
 
-## Usage
+## 用法
 
 ```dart
 // Copyright (c) 2023- All flutter_graph_view authors. All rights reserved.
@@ -85,10 +85,10 @@ void main() {
     });
   }
 
-  for (var i = 0; i < 20; i++) {
+  for (var i = 0; i < 50; i++) {
     edges.add({
-      'srcId': 'node${r.nextInt(vertexes.length)}',
-      'dstId': 'node${r.nextInt(vertexes.length)}',
+      'srcId': 'node1',
+      'dstId': 'node2',
       'edgeName': 'edge${r.nextInt(3)}',
       'ranking': r.nextInt(DateTime.now().millisecond),
     });
@@ -103,7 +103,7 @@ void main() {
     home: Scaffold(
       body: FlutterGraphWidget(
         data: data,
-        algorithm: ForceDirected(),
+        algorithm: ForceDirected(BreatheDecorator()),
         convertor: MapConvertor(),
         options: Options()
           ..graphStyle = (GraphStyle()

diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@
   </a>
 </p>
 
-Widgets for beautiful graphic data structures, such as force-oriented diagrams. (Under development.)
+Widgets for beautiful graphic data structures, such as force-oriented diagrams.
 
 ![image](https://user-images.githubusercontent.com/15630211/216155004-0d6dc826-c589-41cf-bf7c-a51685582c05.png)
 
@@ -32,11 +32,12 @@ https://user-images.githubusercontent.com/15630211/214360687-93a3683c-0935-46bd-
 
 ## Features
 
-TODO: 
 - [x] Data converter: convert business data into graphic view data.
 - [x] Algorithm: calculate vertex layout.
   - [x] Force directed algorithm.
   - [x] Random algorithm (In example folder).
+  - [x] Support algorithm decorator.
+    - [x] Breathe decorator (optional).
 - [x] Data panel embedding.
 - [x] Style configuration.
 - [ ] More graphical interactions.
@@ -86,10 +87,10 @@ void main() {
     });
   }
 
-  for (var i = 0; i < 20; i++) {
+  for (var i = 0; i < 50; i++) {
     edges.add({
-      'srcId': 'node${r.nextInt(vertexes.length)}',
-      'dstId': 'node${r.nextInt(vertexes.length)}',
+      'srcId': 'node1',
+      'dstId': 'node2',
       'edgeName': 'edge${r.nextInt(3)}',
       'ranking': r.nextInt(DateTime.now().millisecond),
     });
@@ -104,7 +105,7 @@ void main() {
     home: Scaffold(
       body: FlutterGraphWidget(
         data: data,
-        algorithm: ForceDirected(),
+        algorithm: ForceDirected(BreatheDecorator()),
         convertor: MapConvertor(),
         options: Options()
           ..graphStyle = (GraphStyle()

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -52,7 +52,7 @@ void main() {
     home: Scaffold(
       body: FlutterGraphWidget(
         data: data,
-        algorithm: ForceDirected(),
+        algorithm: ForceDirected(BreatheDecorator()),
         convertor: MapConvertor(),
         options: Options()
           ..graphStyle = (GraphStyle()

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -6,65 +6,65 @@ packages:
     description:
       name: async
       sha256: bfe67ef28df125b7dddcea62755991f807aa39a2492a23e1550161692950bbe0
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.10.0"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       sha256: "6cfb5af12253eaf2b368f07bacc5a80d1301a071c73360d746b7f2e32d762c66"
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.1.1"
   characters:
     dependency: transitive
     description:
       name: characters
       sha256: e6a326c8af69605aec75ed6c187d06b349707a27fbff8222ca9cc2cff167975c
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.2.1"
   clock:
     dependency: transitive
     description:
       name: clock
       sha256: cb6d7f03e1de671e34607e909a7213e31d7752be4fb66a86d29fe1eb14bfb5cf
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.1.1"
   collection:
     dependency: transitive
     description:
       name: collection
       sha256: cfc915e6923fe5ce6e153b0723c753045de46de1b4d63771530504004a45fae0
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.17.0"
   cupertino_icons:
     dependency: "direct main"
     description:
       name: cupertino_icons
       sha256: e35129dc44c9118cee2a5603506d823bab99c68393879edb440e0090d07586be
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.0.5"
   fake_async:
     dependency: transitive
     description:
       name: fake_async
       sha256: "511392330127add0b769b75a987850d136345d9227c6b94c96a04cf4a391bf78"
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.3.1"
   flame:
     dependency: transitive
     description:
       name: flame
-      sha256: "0c55f8d704f09536125c811a19d9aab7407dce245b2bfb507e84296c1c996202"
-      url: "https://pub.dev"
+      sha256: "2e9545698e75534e2bf79d542df604f6fb8de0184825ea5a5e1f781449054d70"
+      url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "1.6.0"
+    version: "1.7.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -76,13 +76,13 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.1+10"
+    version: "0.0.2"
   flutter_lints:
     dependency: "direct dev"
     description:
       name: flutter_lints
       sha256: aeb0b80a8b3709709c9cc496cdc027c5b3216796bc0af0ce1007eaf24464fd4c
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.0.1"
   flutter_test:
@@ -95,55 +95,55 @@ packages:
     description:
       name: js
       sha256: "5528c2f391ededb7775ec1daa69e65a2d61276f7552de2b5f7b8d34ee9fd4ab7"
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "0.6.5"
   lints:
     dependency: transitive
     description:
       name: lints
       sha256: "5e4a9cd06d447758280a8ac2405101e0e2094d2a1dbdd3756aec3fe7775ba593"
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.0.1"
   matcher:
     dependency: transitive
     description:
       name: matcher
       sha256: "16db949ceee371e9b99d22f88fa3a73c4e59fd0afed0bd25fc336eb76c198b72"
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "0.12.13"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
       sha256: d92141dc6fe1dad30722f9aa826c7fbc896d021d792f80678280601aff8cf724
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "0.2.0"
   meta:
     dependency: transitive
     description:
       name: meta
       sha256: "6c268b42ed578a53088d834796959e4a1814b5e9e164f147f580a386e5decf42"
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.8.0"
   ordered_set:
     dependency: transitive
     description:
       name: ordered_set
       sha256: "74b0454418f58c34c8e527d91fb1ef571297dbcd5d3b4e5f983dc884e39cdf85"
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "5.0.0"
   path:
     dependency: transitive
     description:
       name: path
       sha256: db9d4f58c908a4ba5953fcee2ae317c94889433e5024c27ce74a37f94267945b
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.8.2"
   sky_engine:
@@ -156,55 +156,55 @@ packages:
     description:
       name: source_span
       sha256: dd904f795d4b4f3b870833847c461801f6750a9fa8e61ea5ac53f9422b31f250
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.9.1"
   stack_trace:
     dependency: transitive
     description:
       name: stack_trace
       sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.11.0"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
       sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8"
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.1.1"
   string_scanner:
     dependency: transitive
     description:
       name: string_scanner
       sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde"
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.2.0"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
       sha256: a29248a84fbb7c79282b40b8c72a1209db169a2e0542bce341da992fe1bc7e84
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.2.1"
   test_api:
     dependency: transitive
     description:
       name: test_api
       sha256: ad540f65f92caa91bf21dfc8ffb8c589d6e4dc0c2267818b4cc2792857706206
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "0.4.16"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
       sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803"
-      url: "https://pub.dev"
+      url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.1.4"
 sdks:

diff --git a/lib/core/algorithm/breathe_decorator.dart b/lib/core/algorithm/breathe_decorator.dart
@@ -0,0 +1,36 @@
+import 'package:flutter_graph_view/core/graph_algorithm.dart';
+import 'package:flutter_graph_view/model/vertex.dart';
+import 'package:flutter_graph_view/model/graph.dart';
+import 'dart:math' as math;
+
+/// Breathe Decorator
+/// 呼吸特效装饰器
+class BreatheDecorator extends GraphAlgorithm {
+  BreatheDecorator([decorate]) : super(decorate);
+  @override
+  void onLoad(Vertex v) {
+    v.cpn?.properties.putIfAbsent('breatheCount', () => 0);
+    v.cpn?.properties.putIfAbsent('breatheDirect', math.Random().nextBool);
+    v.cpn?.properties.putIfAbsent('breatheOffsetY', () => 0);
+  }
+
+  setBreatheCount(Vertex v, int value) =>
+      v.cpn!.properties['breatheCount'] = value;
+  setBreatheDirect(Vertex v, bool value) =>
+      v.cpn!.properties['breatheDirect'] = value;
+  setBreatheOffsetY(Vertex v, int value) =>
+      v.cpn!.properties['breatheOffsetY'] = value;
+
+  @override
+  void compute(Vertex v, Graph graph) {
+    if (v.cpn!.properties['breatheCount'] % 150 == 0) {
+      v.cpn!.properties['breatheDirect'] = !v.cpn!.properties['breatheDirect'];
+      v.cpn!.properties['breatheOffsetY'] =
+          (v.cpn!.properties['breatheDirect'] ? 1 : -1) * .1;
+    }
+    if (v != graph.hoverVertex) {
+      v.position.y += v.cpn!.properties['breatheOffsetY'];
+    }
+    v.cpn!.properties['breatheCount'] += 1;
+  }
+}
diff --git a/lib/core/algorithm/force_directed.dart b/lib/core/algorithm/force_directed.dart
@@ -13,7 +13,7 @@ import 'package:flutter_graph_view/flutter_graph_view.dart';
 /// 力导向图布局算法
 ///
 class ForceDirected extends GraphAlgorithm {
-  ForceDirected([decorate]) : super(decorate);
+  ForceDirected([decorator]) : super(decorator);
 
   @override
   void compute(