Flutter Connected Node/Graph of Widgets - flutter

What would be the best approach to get started on creating something like this:
I could probably get the second & fourth rows created as horizontally scrolled lists, with the first & third rows as just a row with two cards; but how does one draw a line between or connecting two widgets?

The only way i could think of creating such a view is a little complicated (may be iam wrong)Please enlighten me if someone know any packages or simple widgets or some other way to do it .
The core feature of flutter is reusability of code but sadly until now no one has created a GraphView the way i think of doing this is ... Iam not going to implement it here I'll certainly wouldve give it a try soon.
Although I will Share the way i think of implementing it and the steps required to do so.
1) You have to build a container or any widget to hold whatever data
there is in the node.
2) You have to find the coordinates of each of this nodes using a
function say getOffset(). To do this I found a good youtube tutorial
Video to find position and size of a widget. Its actually quite
simple(after i saw the tutorial) you have to create a key for each
node and pass it as the key parameter to the node widget and use the
initstate funtion to create a function which uses the _newBox =
_theKeyYouCreated.currentContext.findRenderObject() to find that object
3) Then use _newBox.localToGlobal(Offset.zero) to get the location
of the object.
4)Now say you got all the location of the containers now just use this
locations to draw some line between these container.If you want some
more beautiful right angled straight line you can first go to through
the y axis then draw the x axis(of course some extra distance to
compensate for the width and heights of widgets is to be used)
5)Drawing lines between two co-ordinates is a pretty straight forward
thing with
canvas.drawLine(p1, p2, paint);
6)Now if you manage to do this for all pairs of nodes You are done.
Seems like a pretty lot of work.I think there are no packages that do this .But its certainly Time to make one. If you manage to to do this just make it in a reusable form and publish it .I'll certainly give a try to implement this after my current project.

Related

How to position Canvas with agents in classical Agent-Based Modeling in AnyLogic

I'm new to AnyLogic and trying to figure out how Agent-based models should be set there. There is a famous Epidemic model, which I'm trying to reproduce. Most tutorials on classical ABM deal with old GUI settings.
For example, in version 8.5+, which is actual now, the Environment object (that was used for positioning of layouts) has been deprecated.
Now I see that new object Canvas is used to put the layout with agents on the page. But the structure of source code file is a bit unclear for me and I've failed to find relevant description how Canvas can be set for the purpose. (Besides I'm not sure that this is recommended way of doing this task.)
Question: I would love to learn the right way to arbitrary position the area with agents on the page. Below you may see what I get by default.
After some playing around, the 'minimalistic' functionality is as follows.
One should create some population with arbitrary name Person (population name people adds automatically).
The following structure of the Project is to be reproduced (arbitrary names are marked with yellow).
Comment: after adding a Canvas called mapCanvas one adds the function setCanvasCellColor with following body:
mapCanvas.fillCircle(person.getX(), person.getY(), 3, color);
It is clear that former two arguments stand for coordinates of a given point, then its size (i.e. 3) and color. Do not forget to add two arguments used in the body, namely, person as Person and color as Color.
From Entry Action of the statechart named state call the just made function. I've put black color here just for the sake of demonstration; chartreuse constant gets used instead in the Epidemic example.
main.setCanvasCellColor(this, black);
Finally, you may run the model to get the following picture.
Note
If one is reluctant to bother with Canvas, use Main - Presentation - xxx_presentation and click Draw agent with offset to this position checkbox.

How do I find the next widget in a given direction in GTK+?

I want to find out which widget is in a given direction in GTK+, i.e. doing what the "move-focus" signal does, but without actually changing the focus. What I have in mind is a function that takes a GtkWidget * and a GtkDirectionType and returns the GtkWidget in the given direction (if any).
What I want this for is to ultimately enumerate the widgets inside a specific GtkFrame in my UI definition, in order from left to right. I.e. basically create a list of widgets from leftmost to rightmost, inside my GtkFrame (or in the general case, inside any container).
I've tried to search the GTK documentation but haven't found anything that doesn't also change focus.
Failing any other approach, the way I'm going forward with is to copy a selected set of static functions from the library implementation of GtkContainer and put them in a file in my own application, modifying them to suit my needs.
More specifically, the function gtk_container_focus_sort_left_right() and any local functions that it depends on. This includes the GCompareFunc left_right_compare() and get_allocation_coords().
Assuming the directions you care about are "Forward" and "Backward", it sounds like you want to use gtk_container_get_focus_chain() on the frame: it does pretty much what it says on the tin: you get a list of widgets in order of focus when tabbing.

How can I sort widgets in GWT?

I have a list of widgets which needs to be sorted. I want to create a container for these list of widgets to re-sort them each time new widget is added. How can I do it?
I can see the following ways:
a straightforward way is place them into arraylist and sort via Comparator, but after a new element is added we have to remove all list from container and add them again, in a new order.
use some sorting container. i have found only CellTable for this. But actually I dont need its rich functionality - I have only one column, dont need to sort on user events, only when new element added or removed, - so is there something else I can utilize in my use case?
GWT 2.4
PS
Actually, I am looking for something, that can be expressed like "widget container backed by widget collection", i.e. I change collection - container changes its contents, how can I implement this, or where can I find it?
PPS
The widgets can be different, thats why I dont think I can use CellTable easily.
There is no straightforward way of re-sorting the elements in the DOM after you add a new widget.
When the widgets are attached you cannot just move them (change their position in the document structure) without detaching and re-attaching.
Well, with absolute positioning you can just change the left-top coordinates to move the items, if it is what you need.
I had a similar problem to solve when I had to sort TreeItem elements (no built-in sort method available). As a workaround, I read all the children into the list and remove them from the parent widget at the same time, then sort these items using Comparator and add them back to parent from the sorted list. Everything is in a single sort() method, which encapsulates all required functionality and kind of simplifies understanding of this code.
"widget container backed by widget collection"
I would like to learn about one like that that also can do sorting and re-attaching on the fly. But it still will be backed by the same detaching-attaching I assume. I would recommend you to write one yourself, that will fit your particular needs. Either you need a Tree or a FlowPanel or anything else - you can extend that and add sort() logic according to context. And override add() method accordingly. So, your first option looks like a possible solution to me.

remove polygon / polyline from a bing map

With the Bing v7 AJAX control, if it contains several polygons/polylines, and I want to remove all of them at once, how do I go about doing this? I suppose I can loop through the map.Entities collection and inspect each to see if it is a poly* object, but I was wondering if there is an easier way?
When there's a need to handle a group of elements easily I usually place them on an EntityCollection. Then, you can just hide/remove that layer.
Check out this example. It hides the entities instead of removing them, but the principle is the same.

CellTree suggestion - AsyncDataProvider add/remove/update

I have issues with GWT CellTree and at this point, I'm wondering if it's really ready for prime time. Maybe I'm not getting the default use-cases??
Most questions that have seen over the Web so far are related to CRUD operations with a CellTree but using a simple ListDataProvider such as GWT - Add and remove nodes in celltree.
In my case, I'm populating the nodes of a CellTree using an AsyncDataProvider.
The nodes are fetched on-demand using a RequestFactory service.
Given a selection, I would like to add child nodes, remove/update the current selection. The GWT TreeViewModel interface is way too basic in my opinion.
From my current understanding, the way to go would be to use a map of DataProviders, keep a reference of the underlying list returned by the remote call and likely a reference to the parent NodeInfo object.
For example to delete the current selection I'd probably do the following:
TreeViewModel model = cellTree.getTreeViewModel();
TreeViewModel.NodeInfo nodeInfo = model.getNodeInfo(selectionFromChangeListener);
CustomNodeInfo parent = ((CustomNodeInfo) nodeInfo).getParent();
parent.getUnderLyingNodeListFromDataProvider().remove(selectionFromChangeListener);
// maybe force refresh using dataProvider???
parent.getDataProvider().refreshDisplayAsInRepopulateData()
Any better suggestion? It looks like it's going to be a challenging task, unless I'm mistaken... It seems a bit overkill though. In Swing it would be very easy to achieve or even in most other Web Frameworks providing Tree widgets.
Would using the default Tree widget and replacing myself the icons with the "loading" image be a more straightforward thing? It looks like the basic Tree allows way more manipulations of nodes as TreeItems.
The CellTree widget seems to be based on the original code of FastTree.
The FastTree already have more or less what I need, without some kind of setUserObject method as in a Swing DefaultMutableTreeNode
For spinning icons, someone already investigated it in the past.
I guess that for now, I'll switch from CellTree to a customized version of FastTree and FastTreeItem.
Out of the box ability to have methods such as getParentItem, remove(current node or specific child node)?? Thank you very much sir...