Skip to content

Commit 8542051

Browse files
CorvusYeCorvusYe
committed
feat/refact: supported customize edge/vertex ui.
1 parent 80dab4c commit 8542051

16 files changed

+207
-75
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
## 0.0.1+7
22
- feat: supported customize vertex ui.
3+
- feat: supported customize edge ui.
34

45
## 0.0.1+6
56
- Data panel embedding. ( For edge )

‎README-CN.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,9 @@ void main() {
8484
convertor: MapConvertor(),
8585
options: Options()
8686
..edgePanelBuilder = edgePanelBuilder
87-
..vertexPanelBuilder = vertexPanelBuilder,
87+
..vertexPanelBuilder = vertexPanelBuilder
88+
..edgeShape = EdgeLineShape() // default is EdgeLineShape.
89+
..vertexShape = VertexCircleShape(), // default is VertexCircleShape.
8890
),
8991
),
9092
));
@@ -115,7 +117,7 @@ Widget vertexPanelBuilder(hoverVertex) {
115117
return Stack(
116118
children: [
117119
Positioned(
118-
left: hoverVertex.cpn!.position.x + hoverVertex.cpn!.radius + 5,
120+
left: hoverVertex.cpn!.position.x + hoverVertex.radius + 5,
119121
top: hoverVertex.cpn!.position.y - 20,
120122
child: SizedBox(
121123
width: 120,

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,9 @@ void main() {
8484
convertor: MapConvertor(),
8585
options: Options()
8686
..edgePanelBuilder = edgePanelBuilder
87-
..vertexPanelBuilder = vertexPanelBuilder,
87+
..vertexPanelBuilder = vertexPanelBuilder
88+
..edgeShape = EdgeLineShape() // default is EdgeLineShape.
89+
..vertexShape = VertexCircleShape(), // default is VertexCircleShape.
8890
),
8991
),
9092
));
@@ -115,7 +117,7 @@ Widget vertexPanelBuilder(hoverVertex) {
115117
return Stack(
116118
children: [
117119
Positioned(
118-
left: hoverVertex.cpn!.position.x + hoverVertex.cpn!.radius + 5,
120+
left: hoverVertex.cpn!.position.x + hoverVertex.radius + 5,
119121
top: hoverVertex.cpn!.position.y - 20,
120122
child: SizedBox(
121123
width: 120,

‎example/lib/main.dart‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ void main() {
5252
options: Options()
5353
..edgePanelBuilder = edgePanelBuilder
5454
..vertexPanelBuilder = vertexPanelBuilder
55-
..shape = CircleShape(), // default is CircleShape.
55+
..edgeShape = EdgeLineShape() // default is EdgeLineShape.
56+
..vertexShape = VertexCircleShape(), // default is VertexCircleShape.
5657
),
5758
),
5859
));

‎lib/core/algorithm/force_directed.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ class ForceDirected extends GraphAlgorithm {
3535
}
3636

3737
// Keep children vertexes around the parent vertex.
38-
if (v.prevVertex != null && !v.hover) {
38+
if (v.prevVertex != null && !v.isHovered) {
3939
if (Util.distance(v.position, v.prevVertex!.position) <
4040
5 * v.prevVertex!.radius) {
4141
v.position += (v.position - v.prevVertex!.position) / 100;

‎lib/core/options.dart‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,13 @@ class Options {
1919
/// 边数据面板的构建器，鼠标悬停到对应节点时触发。
2020
Widget Function(Edge hoverVertex)? edgePanelBuilder;
2121

22-
/// set shape strategy for components of vertex or edge.
22+
/// set shape strategy for components of vertex.
2323
///
24-
/// 给点跟边设置形状
25-
OptionShape shape = CircleShape();
24+
/// 给点设置形状
25+
VertexShape vertexShape = VertexCircleShape();
26+
27+
/// set shape strategy for components of edge.
28+
///
29+
/// 给边设置形状
30+
EdgeShape edgeShape = EdgeLineShape();
2631
}

‎lib/core/options/shape/edge/edge_line_shape.dart‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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 'package:flutter/material.dart';
6+
import 'package:flutter_graph_view/flutter_graph_view.dart';
7+
8+
/// The default edge shape impl.
9+
///
10+
/// 默认使用 直线做边。
11+
class EdgeLineShape extends EdgeShape {
12+
@override
13+
render(Edge edge, Canvas canvas, Paint paint, List<Paint> paintLayers) {
14+
paint.strokeWidth = edge.isHovered ? 3 : 1;
15+
16+
var startPoint = Offset.zero;
17+
var endPoint = Offset(len(edge), 0);
18+
canvas.drawLine(startPoint, endPoint, paint);
19+
}
20+
21+
@override
22+
void setPaint(Edge edge) {
23+
if (isWeaken(edge)) {
24+
edge.cpn!.paint = Paint()..color = Colors.white.withOpacity(0);
25+
} else {
26+
edge.cpn!.paint = Paint()..color = Colors.white;
27+
}
28+
}
29+
30+
@override
31+
double height(Edge edge) {
32+
return 1.0;
33+
}
34+
}

‎lib/core/options/shape/edge_shape.dart‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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+
7+
import 'package:flutter_graph_view/core/util.dart';
8+
import 'package:flutter_graph_view/flutter_graph_view.dart';
9+
10+
/// Used to customize the edge UI.
11+
///
12+
/// 用于自定义边的UI
13+
abstract class EdgeShape {
14+
/// render the edge shape to canvas by data.
15+
///
16+
/// 通过边数据将自定义的图形绘制到画布中。
17+
render(Edge edge, Canvas canvas, Paint paint, List<Paint> paintLayers);
18+
19+
/// compute the width of the shape from data, used for overlap and mouse event judgment.
20+
///
21+
/// 通过数据来计算形状的宽，用于重叠与鼠标事件判断。
22+
double width(Edge edge) {
23+
return len(edge);
24+
}
25+
26+
/// compute the height of the shape from data, used for overlap and mouse event judgment.
27+
///
28+
/// 通过数据计算形状的高，用于重叠与鼠标事件判断。
29+
double height(Edge edge);
30+
31+
/// compute the size of the shape from data, used for overlap and mouse event judgment.
32+
///
33+
/// 通过数据计算形状的尺寸，用于重叠与鼠标事件判断。
34+
Vector2 size(Edge edge) {
35+
return Vector2(width(edge), height(edge));
36+
}
37+
38+
/// update the paint from data.
39+
///
40+
/// 根据数据更新画笔属性。
41+
void setPaint(Edge edge);
42+
43+
/// When some elements are activated and do not contain the current element.
44+
///
45+
/// 当一些元素被激活且不包含当前元素
46+
bool isWeaken(Edge edge) {
47+
var graph = edge.cpn!.gameRef.graph;
48+
return graph.hoverVertex != null &&
49+
!graph.hoverVertex!.neighborEdges.contains(edge);
50+
}
51+
52+
/// Compute the line length by two vertex.
53+
///
54+
/// 通过两个节点的坐标，计算线的长度。
55+
double len(Edge edge) =>
56+
edge.end == null || edge.start.cpn == null || edge.end!.cpn == null
57+
? 10
58+
: Util.distance(edge.start.cpn!.position, edge.end!.cpn!.position);
59+
60+
/// Compute the shape angle by two vertex.
61+
///
62+
/// 通过两个节点的坐标，获取线的旋转角度
63+
double angle(Edge edge) {
64+
Offset offset = Offset(
65+
(edge.end == null
66+
? edge.start.cpn!.position.x
67+
: edge.end!.cpn!.position.x) -
68+
(edge.start.cpn!.position.x),
69+
(edge.end == null
70+
? edge.start.cpn!.position.y
71+
: edge.end!.cpn!.position.y) -
72+
(edge.start.cpn!.position.y),
73+
);
74+
75+
return offset.direction;
76+
}
77+
}

‎lib/core/shape/circle_shape.dart‎ renamed to ‎lib/core/options/shape/vertex/vertex_circle_shape.dart‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import 'package:flutter_graph_view/flutter_graph_view.dart';
1010
/// The default shape impl.
1111
///
1212
/// 默认使用 圆型做节点。
13-
class CircleShape implements OptionShape {
13+
class VertexCircleShape extends VertexShape {
1414
@override
1515
render(Vertex vertex, Canvas canvas, paint, paintLayers) {
1616
canvas.drawCircle(
@@ -48,10 +48,7 @@ class CircleShape implements OptionShape {
4848
@override
4949
void setPaint(Vertex vertex) {
5050
var cpn = vertex.cpn!;
51-
var graph = cpn.gameRef.graph;
52-
if (graph.hoverVertex != null &&
53-
(vertex != graph.hoverVertex &&
54-
!graph.hoverVertex!.neighbors.contains(vertex))) {
51+
if (isWeaken(vertex)) {
5552
cpn.paint = Paint()
5653
..shader = Gradient.radial(
5754
Offset(vertex.radius, vertex.radius),

‎lib/core/option_shape.dart‎ renamed to ‎lib/core/options/shape/vertex_shape.dart‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import 'dart:ui';
77
import 'package:flame/collisions.dart';
88
import 'package:flutter_graph_view/flutter_graph_view.dart';
99

10-
/// Used to customize the vertex UI. Maybe the UI of the edge will also use this.
10+
/// Used to customize the vertex UI.
1111
///
12-
/// 用于自定义节点的UI，可能边的定制也会用这个接口，待定。
13-
abstract class OptionShape {
14-
/// render the shape by canvas.
12+
/// 用于自定义节点的UI。
13+
abstract class VertexShape {
14+
/// render the vertex shape to canvas by data.
1515
///
16-
/// 通过Canvas绘制自定义的图形。
16+
/// 通过节点数据将自定义的图形绘制到画布中。
1717
render(Vertex vertex, Canvas canvas, Paint paint, List<Paint> paintLayers);
1818

1919
/// compute the width of the shape from data, used for overlap and mouse event judgment.
@@ -26,6 +26,13 @@ abstract class OptionShape {
2626
/// 通过数据计算形状的高，用于重叠与鼠标事件判断。
2727
double height(Vertex vertex);
2828

29+
/// compute the size of the shape from data, used for overlap and mouse event judgment.
30+
///
31+
/// 通过数据计算形状的尺寸，用于重叠与鼠标事件判断。
32+
Vector2 size(Vertex vertex) {
33+
return Vector2(width(vertex), height(vertex));
34+
}
35+
2936
/// create a hit box, used for overlap judgment.
3037
///
3138
/// 创建一个碰撞容器，用于碰撞检测，解决重叠问题。
@@ -40,4 +47,15 @@ abstract class OptionShape {
4047
///
4148
/// 根据数据更新画笔属性。
4249
void setPaint(Vertex vertex);
50+
51+
/// When some elements are activated and do not contain the current element.
52+
///
53+
/// 当一些元素被激活且不包含当前元素
54+
bool isWeaken(Vertex vertex) {
55+
var cpn = vertex.cpn!;
56+
var graph = cpn.gameRef.graph;
57+
return graph.hoverVertex != null &&
58+
(vertex != graph.hoverVertex &&
59+
!graph.hoverVertex!.neighbors.contains(vertex));
60+
}
4361
}

0 commit comments

Comments
 (0)