Skip to content

Commit e4b7d74

Browse files
Jason-chen-coderJason-chen-coder
committed
fix:完成优化节点渲染逻辑
1 parent 6fdeb61 commit e4b7d74

File tree

7 files changed

+118
-137
lines changed

7 files changed

+118
-137
lines changed

‎lib/flow_chart/dashboard.dart

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -172,14 +172,6 @@ class Dashboard extends ChangeNotifier {
172172

173173
get allElementsDraggable => _allElementsDraggable;
174174

175-
/// 画布是否正在放大缩小
176-
bool _dashboardScaling = false;
177-
178-
get dashboardScaling => _dashboardScaling;
179-
setDashboardScaling(bool value) {
180-
_dashboardScaling = value;
181-
}
182-
183175
double _oldScaleUpdateDelta = 0;
184176
get oldScaleUpdateDelta => _oldScaleUpdateDelta;
185177

@@ -310,18 +302,14 @@ class Dashboard extends ChangeNotifier {
310302
}
311303
// 计算所有元素的包围区域
312304
RectangleBounds boundingBoxSize = calculateBoundingBox(elements);
313-
print("boundingBoxSize.size:${boundingBoxSize.size}");
314305
// 屏幕中心点
315306
final center = Offset(dashboardSize.width / 2, dashboardSize.height / 2) +
316307
_dashboardPosition;
317308
gridBackgroundParams.offset = center;
318309
// 区域偏移
319310
final currentDeviation = boundingBoxSize.center - center;
320-
print(
321-
"calculateScale(boundingBoxSize.size, dashboardSize)==>${calculateScale(boundingBoxSize.size, dashboardSize)}");
322311
double newZoomFactor = calculateScale(boundingBoxSize.size, dashboardSize) +
323312
_oldScaleUpdateDelta;
324-
print("=setFullView=======>newZoomFactor:${newZoomFactor}");
325313
for (final element in elements) {
326314
element.position -= currentDeviation;
327315
for (final next in element.next) {
@@ -1010,7 +998,7 @@ class Dashboard extends ChangeNotifier {
1010998
return null;
1011999
}
10121000

1013-
void moveAllElements(Offset offset, {bool notify = true}) {
1001+
void moveAllElements(Offset offset) {
10141002
for (var i = 0; i < elements.length; i++) {
10151003
elements[i].position += offset;
10161004
for (final conn in elements[i].next) {
@@ -1019,7 +1007,6 @@ class Dashboard extends ChangeNotifier {
10191007
}
10201008
}
10211009
}
1022-
if (notify) notifyListeners();
10231010
}
10241011

10251012
/// 移除所有节点
@@ -1279,12 +1266,8 @@ class Dashboard extends ChangeNotifier {
12791266
.where((ele) => ele.parentId == removedElement.parentId)
12801267
.toList();
12811268
final groupRowLayoutData = getGroupRowLayoutData(childElements.toList());
1282-
// final groupColumnLayoutData =
1283-
// getGroupColumnLayoutData(childElements.toList());
12841269
final diffElementRows =
12851270
groupRowLayoutData.length - lastGroupRowLayoutData.length;
1286-
// final diffElementColumn =
1287-
// groupColumnLayoutData.length - lastGroupColumnLayoutData.length;
12881271
if (sourceElement != null) {
12891272
final sourceElementBottomHandlerPos =
12901273
sourceElement.getHandlerPosition(Alignment.bottomCenter);

‎lib/flow_chart/elements/flow_element.dart

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -151,14 +151,14 @@ class FlowElement extends ChangeNotifier {
151151
///
152152
factory FlowElement.fromMap(Map<String, dynamic> map) {
153153
final e = FlowElement(
154-
size: Size(map['size.width'] as double, map['size.height'] as double),
154+
size: Size(map['size.width'].toDouble(), map['size.height'].toDouble()),
155155
text: map['text'] as String,
156156
textColor: Color(map['textColor'] as int),
157157
subTitleText: map['subTitleText'] as String,
158158
fontFamily: map['fontFamily'] as String?,
159-
textSize: map['textSize'] as double,
160-
subTitleTextSize: map['subTitleTextSize'] as double,
161-
iconSize: map['iconSize'] as double,
159+
textSize: map['textSize'].toDouble(),
160+
subTitleTextSize: map['subTitleTextSize'].toDouble(),
161+
iconSize: map['iconSize'].toDouble(),
162162
parentId: map['parentId'] as String,
163163
textIsBold: map['textIsBold'] as bool,
164164
kind: ElementKind.values[map['kind'] as int],
@@ -167,13 +167,13 @@ class FlowElement extends ChangeNotifier {
167167
(x) => Handler.values[x as int],
168168
),
169169
),
170-
handlerSize: map['handlerSize'] as double,
170+
handlerSize: map['handlerSize'].toDouble(),
171171
backgroundColor: Color(map['backgroundColor'] as int),
172-
borderRadius: map['borderRadius'] as double,
172+
borderRadius: map['borderRadius'].toDouble(),
173173
taskType: TaskType.values[map['taskType'] as int],
174174
borderColor: Color(map['borderColor'] as int),
175-
borderThickness: map['borderThickness'] as double,
176-
elevation: map['elevation'] as double,
175+
borderThickness: map['borderThickness'].toDouble(),
176+
elevation: map['elevation'].toDouble(),
177177
next: (map['next'] as List).isNotEmpty
178178
? List<ConnectionParams>.from(
179179
(map['next'] as List<dynamic>).map<dynamic>(
@@ -188,8 +188,8 @@ class FlowElement extends ChangeNotifier {
188188
)
189189
..setId(map['id'] as String)
190190
..position = Offset(
191-
map['positionDx'] as double,
192-
map['positionDy'] as double,
191+
map['positionDx'].toDouble(),
192+
map['positionDy'].toDouble(),
193193
)
194194
..serializedData = map['data'] as String?;
195195
return e;
@@ -499,7 +499,7 @@ class FlowElement extends ChangeNotifier {
499499
'handlerSize': handlerSize,
500500
'backgroundColor': backgroundColor.value,
501501
'borderRadius': borderRadius,
502-
'taskType': taskType.toStringValue,
502+
'taskType': taskType.index,
503503
'borderColor': borderColor.value,
504504
'borderThickness': borderThickness,
505505
'elevation': elevation,

‎lib/flow_chart/flow_chart.dart

Lines changed: 53 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import 'package:flutter/foundation.dart';
22
import 'package:flutter/material.dart';
33
import 'package:flutter/services.dart';
44
import 'package:flutter_easy_flow/flow_chart/ui/draw_group_column_plus.dart';
5+
import 'package:flutter_easy_flow/flow_chart/ui/draw_plus.dart';
56
import 'package:flutter_easy_flow/flow_chart/ui/element_widget.dart';
67

78
import './dashboard.dart';
89
import './elements/flow_element.dart';
910
import './ui/draw_arrow.dart';
10-
import './ui/draw_plus.dart';
1111
import './ui/grid_background.dart';
1212
import './ui/segment_handler.dart';
1313

@@ -162,6 +162,7 @@ class FlowChart extends StatefulWidget {
162162
}
163163

164164
class _FlowChartState extends State<FlowChart> {
165+
bool scaling = false;
165166
@override
166167
void initState() {
167168
super.initState();
@@ -264,7 +265,6 @@ class _FlowChartState extends State<FlowChart> {
264265
factor,
265266
focalPoint: details.focalPoint,
266267
);
267-
widget.dashboard.setDashboardScaling(true);
268268
}
269269
// 拖动画布
270270
/// 设置网格相对位置
@@ -273,34 +273,28 @@ class _FlowChartState extends State<FlowChart> {
273273
// );
274274

275275
/// 设置节点的位置
276-
// widget.dashboard
277-
// .moveAllElements(details.focalPointDelta, notify: false);
278-
for (var i = 0; i < widget.dashboard.elements.length; i++) {
279-
widget.dashboard.elements[i].position +=
280-
details.focalPointDelta;
281-
for (final conn in widget.dashboard.elements[i].next) {
282-
for (final pivot in conn.pivots) {
283-
pivot.pivot += details.focalPointDelta;
284-
}
285-
}
286-
}
276+
widget.dashboard.moveAllElements(details.focalPointDelta);
277+
287278
widget.dashboard.gridBackgroundParams.offset =
288279
details.focalPointDelta;
289-
setState(() {});
280+
setState(() {
281+
scaling = true;
282+
});
290283
},
291284
onScaleEnd: (details) {
292285
widget.dashboard.setOldScaleUpdateDelta(
293286
widget.dashboard.zoomFactor - 1);
294-
widget.dashboard.setDashboardScaling(false);
287+
setState(() {
288+
scaling = false;
289+
});
295290
},
296291
child: GridBackground(
297292
key: gridKey,
298293
params: widget.dashboard.gridBackgroundParams,
299294
),
300295
),
301296
),
302-
// 合并遍历
303-
for (int i = 0; i < widget.dashboard.elements.length; i++) ...[
297+
for (int i = 0; i < widget.dashboard.elements.length; i++)
304298
// 绘制 elements
305299
ElementWidget(
306300
key: UniqueKey(),
@@ -391,6 +385,8 @@ class _FlowChartState extends State<FlowChart> {
391385
element,
392386
),
393387
),
388+
// 合并遍历
389+
for (int i = 0; i < widget.dashboard.elements.length; i++) ...[
394390
for (int n = 0;
395391
n < widget.dashboard.elements[i].next.length;
396392
n++) ...[
@@ -406,61 +402,51 @@ class _FlowChartState extends State<FlowChart> {
406402
.elements[widget.dashboard.findElementIndexById(
407403
widget.dashboard.elements[i].next[n].destElementId,
408404
)],
405+
scaling: scaling,
409406
),
410407
// 绘制连线之间的加号
411-
DrawPlus(
412-
dashboard: widget.dashboard,
413-
arrowParams:
414-
widget.dashboard.elements[i].next[n].arrowParams,
415-
pivots: widget.dashboard.elements[i].next[n].pivots,
416-
key: UniqueKey(),
417-
srcElement: widget.dashboard.elements[i],
418-
destElement: widget.dashboard
419-
.elements[widget.dashboard.findElementIndexById(
420-
widget.dashboard.elements[i].next[n].destElementId,
421-
)],
422-
onPlusNodePressed: (context, position) {
423-
if (widget.onPlusNodePressed != null) {
424-
widget.onPlusNodePressed!(
425-
context,
426-
position,
427-
widget.dashboard.elements[i],
428-
widget.dashboard.elements[
429-
widget.dashboard.findElementIndexById(
430-
widget.dashboard.elements[i].next[n]
431-
.destElementId,
432-
)]);
433-
}
434-
}),
435-
// 绘制线段中转的点
436-
if (widget.dashboard.elements[i].next[n].arrowParams.style ==
437-
ArrowStyle.segmented)
438-
for (int j = 0;
439-
j < widget.dashboard.elements[i].next[n].pivots.length;
440-
j++)
441-
SegmentHandler(
442-
key: UniqueKey(),
443-
pivot: widget.dashboard.elements[i].next[n].pivots[j],
408+
if (!scaling)
409+
DrawPlus(
444410
dashboard: widget.dashboard,
445-
onPivotPressed: widget.onPivotPressed,
446-
onPivotSecondaryPressed: widget.onPivotSecondaryPressed,
447-
),
411+
arrowParams:
412+
widget.dashboard.elements[i].next[n].arrowParams,
413+
pivots: widget.dashboard.elements[i].next[n].pivots,
414+
key: UniqueKey(),
415+
srcElement: widget.dashboard.elements[i],
416+
destElement: widget.dashboard
417+
.elements[widget.dashboard.findElementIndexById(
418+
widget.dashboard.elements[i].next[n].destElementId,
419+
)],
420+
onPlusNodePressed: (context, position) {
421+
if (widget.onPlusNodePressed != null) {
422+
widget.onPlusNodePressed!(
423+
context,
424+
position,
425+
widget.dashboard.elements[i],
426+
widget.dashboard.elements[
427+
widget.dashboard.findElementIndexById(
428+
widget.dashboard.elements[i].next[n]
429+
.destElementId,
430+
)]);
431+
}
432+
}),
448433
],
449434
],
450-
// 绘制组节点的加号
451-
for (var groupLayoutData
452-
in widget.dashboard.allGroupsLayoutData.values)
453-
for (var columnElements in groupLayoutData.rowsLayoutData)
454-
DrawGroupColumnPlus(
455-
dashboard: widget.dashboard,
456-
key: UniqueKey(),
457-
srcElement: columnElements.last,
458-
onGroupColumnPlusNodePressed: (context, position) {
459-
if (widget.onGroupColumnPlusNodePressed != null) {
460-
widget.onGroupColumnPlusNodePressed!(
461-
context, position, columnElements.last);
462-
}
463-
}),
435+
// 绘制组节点每一列最下面的加号
436+
if (!scaling)
437+
for (var groupLayoutData
438+
in widget.dashboard.allGroupsLayoutData.values)
439+
for (var columnElements in groupLayoutData.columnsLayoutData)
440+
DrawGroupColumnPlus(
441+
dashboard: widget.dashboard,
442+
key: UniqueKey(),
443+
srcElement: columnElements.last,
444+
onGroupColumnPlusNodePressed: (context, position) {
445+
if (widget.onGroupColumnPlusNodePressed != null) {
446+
widget.onGroupColumnPlusNodePressed!(
447+
context, position, columnElements.last);
448+
}
449+
}),
464450
// 绘制用户正在连接时的预览线
465451
DrawingArrowWidget(
466452
style: widget.dashboard.defaultArrowStyle,

‎lib/flow_chart/objects/task_widget.dart

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -143,17 +143,17 @@ class TaskWidget extends StatelessWidget {
143143
right: 10 * element.zoom,
144144
child: Row(
145145
children: [
146-
Container(
147-
width: toolbarIconWrapperSize,
148-
height: toolbarIconWrapperSize,
149-
decoration: BoxDecoration(
150-
color: const Color(0xFF4f5158),
151-
borderRadius:
152-
BorderRadius.circular(toolbarIconWrapperSize / 2),
153-
),
154-
child: Icon(Icons.edit,
155-
color: Colors.white, size: toolbarIconSize),
156-
),
146+
// Container(
147+
// width: toolbarIconWrapperSize,
148+
// height: toolbarIconWrapperSize,
149+
// decoration: BoxDecoration(
150+
// color: const Color(0xFF4f5158),
151+
// borderRadius:
152+
// BorderRadius.circular(toolbarIconWrapperSize / 2),
153+
// ),
154+
// child: Icon(Icons.edit,
155+
// color: Colors.white, size: toolbarIconSize),
156+
// ),
157157
SizedBox(
158158
width: 8 * element.zoom,
159159
),

‎lib/flow_chart/ui/draw_arrow.dart

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,9 @@ class DrawArrow extends StatefulWidget {
197197
required List<Pivot> pivots,
198198
super.key,
199199
ArrowParams? arrowParams,
200+
bool? scaling,
200201
}) : arrowParams = arrowParams ?? ArrowParams(),
202+
scaling = scaling ?? false,
201203
pivots = PivotsNotifier(pivots);
202204

203205
///
@@ -206,6 +208,8 @@ class DrawArrow extends StatefulWidget {
206208
///
207209
final ArrowParams arrowParams;
208210

211+
final bool scaling;
212+
209213
///
210214
final FlowElement srcElement;
211215

@@ -279,6 +283,7 @@ class _DrawArrowState extends State<DrawArrow> {
279283
from: from,
280284
to: to,
281285
pivots: widget.pivots.value,
286+
scaling: widget.scaling,
282287
),
283288
child: SizedBox(),
284289
);
@@ -300,7 +305,9 @@ class ArrowPainter extends CustomPainter {
300305
List<Pivot>? pivots,
301306
FlowElement? srcElement,
302307
FlowElement? destElement,
308+
bool? scaling,
303309
}) : pivots = pivots ?? [],
310+
scaling = scaling ?? false,
304311
srcElement = srcElement ?? FlowElement(),
305312
destElement = destElement ?? FlowElement();
306313

@@ -310,6 +317,8 @@ class ArrowPainter extends CustomPainter {
310317
///
311318
final Offset from;
312319

320+
final bool scaling;
321+
313322
///
314323
final Offset to;
315324

@@ -386,7 +395,7 @@ class ArrowPainter extends CustomPainter {
386395
final fillPaint = Paint()
387396
..strokeWidth = params.thickness
388397
..color = const Color(0xFF4f5158);
389-
canvas.drawCircle(position, params.headRadius, borderPaint);
398+
if (!scaling) canvas.drawCircle(position, params.headRadius, borderPaint);
390399
canvas.drawCircle(position, params.headRadius, fillPaint);
391400
}
392401

‎lib/flow_chart/ui/handler_widget.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ class HandlerWidget extends StatelessWidget {
3838
Radius.circular(width),
3939
),
4040
border: Border.all(
41-
width: width ==0 ? 0 :1,
41+
width: width == 0 ? 0 : 1,
4242
color: borderColor,
4343
),
4444
),

0 commit comments

Comments
 (0)