lempiy / flutter_graphite Goto Github PK

View Code? Open in Web Editor NEW

154.0 4.0 31.0 10.54 MB

Flutter widget to draw interactive direct graphs (flowcharts) of any complexity in a tile rectangular manner.

License: MIT License

Dart 74.50% Kotlin 0.07% Swift 0.67% Objective-C 0.02% CMake 10.79% C++ 12.08% C 0.82% HTML 1.05%

flutter flow graph widget grid arrows flowchart

flutter_graphite's Introduction

Graphite

➡️ 🔲 Flutter widget to draw direct graphs, trees, flowcharts in rectanglar manner.

Support the author 💛 💙

The only reason why the latest release of Graphite become possible is because of Armed Forces Of Ukraine. Ukrainian defenders are those who saved the author's life last spring and currently continue fighting with absolute evil in my country. If you liked this lib and want to support future releases I would be grateful for your donations to Come Back Alive Charity which directly supports UA Army with equipment.

Thank you.

Example of usage:

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

void main() => runApp(MyApp());
const list = '['
    '{"id":"A","next":[{"outcome":"B"}]},'
    '{"id":"B","next":[{"outcome":"C"},{"outcome":"D"},{"outcome":"E"}]},'
    '{"id":"C","next":[{"outcome":"F"}]},'
    '{"id":"D","next":[{"outcome":"J"}]},{"id":"E","next":[{"outcome":"J"}]},'
    '{"id":"J","next":[{"outcome":"I"}]},'
    '{"id":"I","next":[{"outcome":"H"}]},{"id":"F","next":[{"outcome":"K"}]},'
    '{"id":"K","next":[{"outcome":"L"}]},'
    '{"id":"H","next":[{"outcome":"L"}]},{"id":"L","next":[{"outcome":"P"}]},'
    '{"id":"P","next":[{"outcome":"M"},{"outcome":"N"}]},'
    '{"id":"M","next":[]},{"id":"N","next":[]}'
    ']';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Graphite',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InteractiveViewer(
        constrained: false,
        child: DirectGraph(
          list: nodeInputFromJson(list),
          defaultCellSize: const Size(100.0, 100.0),
          cellPadding: const EdgeInsets.all(20),
          orientation: MatrixOrientation.Vertical,
       ),
      )
    );
  }
}

Features

Nodes and edge gesture events.
Ability provide graph building direction (horizontal or vertical).
Ability to provide custom builder to node widget.
Ability to add overlays.
Ability to add edge text or Widget labels.
Ability to provide custom paint builder to graph edges.
Ability to customize arrows.

License

MIT © lempiy

flutter_graphite's People

Contributors

Stargazers

Watchers

flutter_graphite's Issues

max iteration reached

can you help me solve this issue.
I have more than 1000 nodes in DirectGraph then it says max iteration reached.

How can i reduce card height?

Hi,
How can I reduce card height? Because I need a rectangle shape.

Large complex list poor performance

I have been testing size and complexity with Graphite. It's very performant up to a certain point, and it depends on the complexity of the edge connections. Have you run into any stress testing limits?

Hover detection on the Edge?

This package is vary useful and customisable. With node builder and mouse region we can detect hover for the any node and we can show the customised node based on that. I want to change color of the edge when user hover it. It is possible with this package? If yes, Then how?

Null Safety

Is there some ongoing work for null safety?
Anything I can contribute to?

Size each individual node

There is a cellWidth attribute that sets the horizontal dimension and somehow that influences the height too, but is there an option to size each node separately? If you use the builder attribute, you can have it return a Container or SizedBox, but whatever dimensions you pass there are ignored.

InteractiveView error

Launching lib\main.dart on SM G920F in debug mode...
Running Gradle task 'assembleDebug'...

Compiler message:
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/graphite-0.2.3/lib/graphite_edges.dart:99:18: Error: The method 'InteractiveViewer' isn't defined for the class '_GraphiteEdgesState'.

'_GraphiteEdgesState' is from 'package:graphite/graphite_edges.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/graphite-0.2.3/lib/graphite_edges.dart').
Try correcting the name to the name of an existing method, or defining a method named 'InteractiveViewer'.
child: InteractiveViewer(
^^^^^^^^^^^^^^^^^

Compiler message:
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/graphite-0.2.3/lib/graphite_edges.dart:99:18: Error: The method 'InteractiveViewer' isn't defined for the class '_GraphiteEdgesState'.

'_GraphiteEdgesState' is from 'package:graphite/graphite_edges.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/graphite-0.2.3/lib/graphite_edges.dart').
Try correcting the name to the name of an existing method, or defining a method named 'InteractiveViewer'.
child: InteractiveViewer(
^^^^^^^^^^^^^^^^^
Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
build failed.

InteractiveViewer

Is there a way to change the settings on the underlying InteractiveViewer? In the web, InteractiveViewer doesn't scale properly. It would be great if we could set the InteractiveViewer scaleEnabled = false.

btw, great job on this!!!

Add a new field to NodeInput class for displayed text

For my use case, I would like to have a third field in NodeInput for the displayed text, possibly 'displayText'. The unique identifier, 'id' would be used to identify the Node. The 'displayText' would be displayed in the graph. For backwards compatibility, it could fall back to displaying the 'id' as the displayed text if 'displayText' is not populated.

Would you be open to a pull request with this change?

Order nodes are built

I am creating a DirectGraph, and am using this list:

1
1.001
1.001.001
1.001.002
1.002
1.003

but, when the list is being built (nodeBuilder: (ctx, node) { print('line 78 ${node.id}'); ... the order is changed:

line 78 1
line 78 1.001
line 78 1.002
line 78 1.003
line 78 1.001.002
line 78 1.001.001

Note the last two are reversed. How can I change that?

New diagram as a subway map

Would be really nice we have a diagram as a subway map like this:

https://www.pads.rwth-aachen.de/global/show_picture.asp?id=aaaaaaaabswgyrs&w=842&q=77

Elements similar UML Activity diagram

Requirements:

Activity element
Relationship element
Decision element
Start/End element
Interation with elements (mouse click)
Create new relationship when interate on diagram, creating new relationship between activities

Feature request: positioning nodes between children nodes

Hi there! Thanks for sharing this awesome library. I wonder how to get the matrix that would place "parent" nodes in between "children" nodes.

Take a look at the example UI:

I would like the node Filelinks Standard... to be placed in the middle as pointed by arrow.
In other words the output matrix should look like:

const expectTest = '''
A-B│ A │A-D│
B  | C |D  |
''';

Alignment of Nodes (Parent and children vertically)

Hi thanks for this awesome package. I have little concern regarding alignment of the Nodes. I am creating a family Tree, I want to align the nodes at center so that two children nodes align accordingly to top node , I tired to show them visually here.
Brackets [ ] represent the nodes, there childres nodes

Please guide me through the right path, it is doable.

Just a regular click on the edge

I see all the gestures you can make on a mobile device, but I'm just looking to click on the edge from the web app. Is there a way to do that?

scale factor

how to implement scale on direct graph, i want to zoom in and zoom out.

InteractiveViewer(
                  scaleEnabled: true,
                  scaleFactor: 3,
                  constrained: false,
                  child: IntrinsicHeight(
                    child: IntrinsicWidth(
                      child: AbsorbPointer(
                        child: Container(
                          padding: EdgeInsets.only(left: 2.w,right: 2.w,bottom: 7.w),
                          child: DirectGraph(
                              list: list,
                              cellWidth: 100.0,
                              cellPadding: 8.0,
                              minScale: 0.25,
                              maxScale: 3.5,
                              onNodeTapUp: (details,node){

                                print("tapped");
                              },
                              orientation: MatrixOrientation.Vertical,
                              builder: (ctx, node) {
 return Container(
                             child:Text("node");
                              },
                              paintBuilder: (edge) {
                                var p = Paint()
                                  ..color = Colors.blueAccent
                                  ..style = PaintingStyle.stroke
                                  ..strokeCap = StrokeCap.round
                                  ..strokeJoin = StrokeJoin.round
                                  ..strokeWidth = 3;
                                return p;
                              },
                            ),
                        ),
                      ),
                    ),
                  ),
                ),

you can see i am using absorb pointer to allow intereactiveViewer to function otherwise interactiveViewer dont function and if i use absorb pointer onNodeTapUp dont function.

DirectGraph.onEdgeTapDown doesn't work for some edges

I am running Graphite 0.3.0, Flutter 2.2.3
I have a graph:
{id: Step 1, next: [Step 2, Step 2a]}
{id: Step 2, next: [Step 3]}
{id: Step 3, next: []}
{id: Step 2a, next: [Step 3]}

Here is my DirectGraph Widget:
DirectGraph(
list: graphData.nodeInputs,
cellWidth: 136.0,
cellPadding: 24.0,
contactEdgesDistance: 10.0,
orientation: MatrixOrientation.Vertical,
onNodeTapDown: (, MatrixNode node) => print("Node tap"),
onEdgeSecondaryTapDown: (, Edge edge) => print("Edge tap"),
onEdgeTapDown: (_, Edge edge) => print("Edge tap"),
)

The graph renders successfully, but the "onEdgeTapDown" does not fire on most taps. In my example, the edge from "Step 1" to "Step 2" and "Step 2" to "Step 3" never fires. Sometimes it fires on the edge from "Step 1" to "Step 2a" and "Step 2a" to "Step 3".

Let me know if there is additional information I can provide.

Double-headed edges

Is there an easy way to maybe pass a flag to the graph, that if you had an edge x -> y and an edge y -> x it would be drawn as single double-headed edge, rather than two edges?

Also, is there a possibility to label edges with text?

Or do I have to provide whole EdgePaintBuilder/EdgePathBuilder, which seems rather complicated?