lempiy / flutter_graphite Goto Github PK
View Code? Open in Web Editor NEWFlutter widget to draw interactive direct graphs (flowcharts) of any complexity in a tile rectangular manner.
License: MIT License
Flutter widget to draw interactive direct graphs (flowcharts) of any complexity in a tile rectangular manner.
License: MIT License
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 |
''';
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'.
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'.
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?
Hi,
How can I reduce card height? Because I need a rectangle shape.
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!!!
Is there some ongoing work for null safety?
Anything I can contribute to?
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.
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?
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?
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?
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.
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.
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?
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?
Problem to my usage is I am using centered view for my graph but it still initially viewed as non centered graph.
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.
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.