Need help tracing down an error

[iyaanbarry]

Hello,

I must say that you guys have done an excellent job in creating this library. I'm having an issue trying to trace down a crash I end up facing sometimes. I has to do something with the number of nodes and causes the application to crash after a few minutes.
Can someone please help me figure out the cause?

I get the following error:

_AssertionError ('dart:ui/painting.dart': Failed assertion: line 36 pos 10: '': Offset argument contained a NaN value.)

In this file:

// Copyright (c) 2023- All flutter_graph_view authors. All rights reserved.
//
// This source code is licensed under Apache 2.0 License.

import 'dart:math';
import 'dart:ui' as ui;

import 'package:flame/collisions.dart';
import 'package:flutter/material.dart';
import 'package:flutter_graph_view/core/util.dart';
import 'package:flutter_graph_view/flutter_graph_view.dart';

/// The default edge shape impl.
///
/// 默认使用 直线做边。
class EdgeLineShape extends EdgeShape {
@OverRide
render(Edge edge, Canvas canvas, Paint paint, List paintLayers) {
if (edge.isLoop) {
vertexSame(edge, canvas, paint);
} else {
vertexDifferent(edge, canvas, paint);
}
}

void vertexDifferent(Edge edge, ui.Canvas canvas, ui.Paint paint) {
var startPoint = Offset.zero;
var endPoint = Offset(len(edge), paint.strokeWidth);

var distance = Util.distance(edge.cpn!.position, edge.end!.position);

var edgesBetweenTwoVertex =
    edge.cpn?.graph.edgesFromTwoVertex(edge.start, edge.end) ?? [];

/// 法线点
var normalPoint = Vector2(
  distance / 2,
  edge.computeIndex * distance / edgesBetweenTwoVertex.length * 2,
);

Path path = Path();
path.cubicTo(
  startPoint.dx,
  startPoint.dy,
  normalPoint.x,
  normalPoint.y,
  endPoint.dx,
  endPoint.dy,
);
// path.extendWithPath(path, Offset(0, paint.strokeWidth));
edge.path = path;

canvas.drawPath(path, paint);

}

void vertexSame(Edge edge, ui.Canvas canvas, ui.Paint paint) {
Path path = loopPath(edge);
canvas.drawPath(path, paint);
edge.path = path;
}

Path loopPath(Edge edge, [double minusRadius = 0]) {
var idx = edge.edgeIdx;
var radius = (idx + 1) * edge.start.radius * 1.5;
Path path = Path();
path.addArc(
Rect.fromCircle(
center: Offset(radius, 0),
radius: radius - minusRadius / edge.cpn!.game.camera.viewfinder.zoom),
0,
-2 * pi,
);

return path;

}

@OverRide
void setPaint(Edge edge) {
var paint = edge.cpn!.paint;
paint.strokeWidth = edge.isHovered ? 4 : 1.2;
paint.strokeWidth /= edge.cpn!.game.camera.viewfinder.zoom;
paint.style = PaintingStyle.stroke;
var startPoint = Offset.zero;
var endPoint = Offset(len(edge), paint.strokeWidth);
var hoverOpacity = edge.cpn?.gameRef.options.graphStyle.hoverOpacity ?? .5;
if (isWeaken(edge)) {
paint.shader = ui.Gradient.linear(
startPoint,
endPoint,
List.generate(
2,
(index) => [
(edge.start.colors.last).withOpacity(hoverOpacity),
(edge.end?.colors.last ?? Colors.white).withOpacity(hoverOpacity)
][index],
),
);
} else {
paint.shader = ui.Gradient.linear(
startPoint,
endPoint,
List.generate(
2,
(index) => [
edge.start.colors.last,
(edge.end?.colors.last ?? Colors.white)
][index],
),
);
}
}

@OverRide
double height(Edge edge) {
return 3.0;
}

@OverRide
ShapeHitbox? hitBox(Edge edge, EdgeComponent edgeComponent) {
return null;
}

@OverRide
bool? hoverTest(Vector2 point, Edge edge, EdgeComponent edgeComponent) {
var offset = Offset(point.x, point.y);
var hoverStrokeWidth = (edge.isHovered ? 2.0 : 1.2);
if (edge.isLoop) {
return edge.path!.contains(offset) &&
!loopPath(edge, hoverStrokeWidth).contains(offset);
} else {
if (edge.computeIndex == 0) {
return null;
}
Path? minusArea = edge.path?.shift(Offset(
0,
edge.computeIndex > 0 ? -hoverStrokeWidth : hoverStrokeWidth,
));
return ((edge.path?.contains(offset) ?? false) &&
(!(minusArea?.contains(offset) ?? true)));
}
}
}

[CorvusYe]

Hello, @iyaanbarry

This is also the problem I have been trying to find out. It seems like I missed some details about the flame somewhere, causing a situation similar to dividing by 0 to occur.

[iyaanbarry]

Hi @CorvusYe,

Thanks for the quick response. Do you have any idea when the issue could be resolved?

[CorvusYe]

As you know, reproducing is not easy.
I have a related product in use and I hope this issue can be resolved in a timely manner to improve the user experience.
However, it may require some luck.

[iyaanbarry]

I may be able to help with that. The main file below, results in the crash on macOS after a few minutes.

import 'package:flutter/material.dart';
import 'package:flutter_graph_view/flutter_graph_view.dart';


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Decorator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DecoratorDemo(),
    );
  }
}


class DecoratorDemo extends StatelessWidget {
  const DecoratorDemo({super.key});

  @override
  Widget build(BuildContext context) {
    // Manually create the list of vertices
    var vertexes = <Map>[
      {'id': 'node1', 'tag': 'tag1', 'tags': ['tag1', 'tag2', 'tag6', 'tag7', 'tag8', 'tag9', 'tag10']},
      {'id': 'node2', 'tag': 'tag2', 'tags': ['tag2', 'tag3']},
      {'id': 'node3', 'tag': 'tag3', 'tags': ['tag3', 'tag4']},
      // Add more vertices as needed
    ];

    // Manually create the list of edges
    var edges = <Map>[
      {'srcId': 'node1', 'dstId': 'node2', 'edgeName': 'edge1', 'ranking': 1},
      {'srcId': 'node2', 'dstId': 'node3', 'edgeName': 'edge2', 'ranking': 2},
      // Add more edges as needed
    ];

    var data = {
      'vertexes': vertexes,
      'edges': edges,
    };

    // Add this: Button to show data
    return Scaffold(
      appBar: AppBar(
        title: const Text('Decorator Demo'),
        actions: [
          IconButton(
            icon: const Icon(Icons.info_outline),
            onPressed: () => _showDataDialog(context, data),
          ),
        ],
      ),
      body: FlutterGraphWidget(
        data: data,
        algorithm: RandomAlgorithm(
          decorators: [
            CoulombDecorator(),
            // HookeBorderDecorator(),
            HookeDecorator(),
            CoulombCenterDecorator(),
            HookeCenterDecorator(),
            ForceDecorator(),
            ForceMotionDecorator(),
            TimeCounterDecorator(),
          ],
        ),
        convertor: MapConvertor(),
        options: Options()
          ..enableHit = false
          ..panelDelay = const Duration(milliseconds: 500)
          ..graphStyle = (GraphStyle()
            // tagColor is prior to tagColorByIndex. use vertex.tags to get color
            ..tagColor = {'tag8': Colors.orangeAccent.shade200}
            ..tagColorByIndex = [
              Colors.red.shade200,
              Colors.blue.shade200,
              Colors.green.shade200,
              Colors.yellow.shade200,
              Colors.purple.shade200,
              Colors.orange.shade200,
              Colors.pink.shade200,
              Colors.brown.shade200,
              Colors.grey.shade200,
              Colors.lime.shade200,
            ])
          ..useLegend = true // default true
          ..edgePanelBuilder = edgePanelBuilder
          ..vertexPanelBuilder = vertexPanelBuilder
          ..edgeShape = EdgeLineShape() // default is EdgeLineShape.
          ..vertexShape = VertexCircleShape(), // default is VertexCircleShape.
      ),
    );
  }

  // Update this method
  void _showDataDialog(BuildContext context, Map<String, dynamic> data) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Generated Data'),
          content: SizedBox(
            width: double.maxFinite,
            child: ListView(
              shrinkWrap: true,
              children: [
                _buildDataSection('Vertices', data['vertexes'] as List<Map>),
                const Divider(),
                _buildDataSection('Edges', data['edges'] as List<Map>),
              ],
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: const Text('Close'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  // Update this method
  Widget _buildDataSection(String title, List<Map> items) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(title, style: const TextStyle(fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        ...items.map((item) => Text(item.toString())),
      ],
    );
  }

  Widget edgePanelBuilder(Edge edge, Viewfinder viewfinder) {
    var c = viewfinder.localToGlobal(edge.position);

    return Stack(
      children: [
        Positioned(
          left: c.x + 5,
          top: c.y,
          child: SizedBox(
            width: 200,
            child: ColoredBox(
              color: Colors.grey.shade900.withAlpha(200),
              child: ListTile(
                title: Text(
                    '${edge.edgeName} @${edge.ranking}\nDelay controlled by \noptions.panelDelay\ndefault to 300ms'),
              ),
            ),
          ),
        )
      ],
    );
  }

  Widget vertexPanelBuilder(hoverVertex, Viewfinder viewfinder) {
    var c = viewfinder.localToGlobal(hoverVertex.cpn!.position);
    return Stack(
      children: [
        Positioned(
          left: c.x + hoverVertex.radius + 5,
          top: c.y - 20,
          child: SizedBox(
            width: 120,
            child: ColoredBox(
              color: Colors.grey.shade900.withAlpha(200),
              child: ListTile(
                title: Text(
                  'Id: ${hoverVertex.id}',
                ),
                subtitle: Text(
                    'Tag: ${hoverVertex.data['tag']}\nDegree: ${hoverVertex.degree} ${hoverVertex.prevVertex?.id}'),
              ),
            ),
          ),
        )
      ],
    );
  }
}

[CorvusYe]

Okay, I have reproduced the problem you encountered.
I will try my best to fix it as soon as possible.
Do you have any important time points in your project.

[iyaanbarry]

Thank you so much for looking into the issue. I’ll really appreciate it if it can be resolved by next Monday.

…

On Sun, Oct 13, 2024 at 5:27 PM 大叶 ***@***.***> wrote: *EXTERNAL EMAIL : *Exercise caution when responding, opening links, or opening attachments. Okay, I have reproduced the problem you encountered. I will try my best to fix it as soon as possible. Do you have any important time points in your project. — Reply to this email directly, view it on GitHub <#16 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5UIMJVOH6HJ7RXYFY4M3H3Z3LQT5AVCNFSM6AAAAABP3X5LCGVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAOJTGA4DANA> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[CorvusYe]

I have completed the push. https://pub.dev/packages/flutter_graph_view
Have fun ~

[iyaanbarry]

I just implemented it, works great. Thank you!
Unrelated question, but is there a way to change the font properties of the legend?

[CorvusYe]

Maybe the CHANGELOG.md 1.1.2 will help you.

[iyaanbarry]

Will have a look, thank you!

[CorvusYe]

You're welcome.