@felix wrote:
Hello,
I want to add a little bit of interface to my nodes. I have a general question of what's a good way to do this, and a specific question I was led to in my first attempt.
My data for one node looks like:
{ "title":"hello", "states":[ {"desc":"A1", "complicated":info1}, {"desc":"A2", "complicated":info2}, {"desc":"A3", "complicated":info3} ]
I want my nodes to essentially have two states, where > and < are buttons/elements with onClick events to toggle between the two:State 1 State 2 ------------- --------------------------------- | Title | | Title | A2 | | A1 > | | A1 > | info2a W | | A2 > | or | A2 < | info2b X | | A3 > | | A3 > | info2c Y | ------------- | | info2d Z | ---------------------------------I can imagine this is a common pattern.
Question 1. is there already have a sample that implements this, or a hook that I can use?, or could you please give some general design advice for this?In the meantime, this is what I was thinking:
I have set up the node template with two separate Tables, each with new go.Binding("itemArray","states"). One is vertical, and just contains the "desc" A1, A2, A3, .... The second table is a horizontal table of tables, each of which shows the complicated info for one state (above, example for state A2 with complicated info info2a, info2b, ...); all of these subtables are visible:false by default. When someone clicks on an ">", I can use the onClick event to find out that it was the i-th state which was clicked, then iterate over the components of the node until I find the i-th table (that contains the detailed breakdown for state i) and set visible:true. At the same time, I set visible:false on the expander ">" and visible:true on the collapser "<", and possibly do more.I actually have a function for the onClick event which comes very close. But it sets visible:true/false on the wrong components in the node. This lead me to the question:
Q2. Is there a convenient way to examine, in JS, the elements in the node, to find out what they consist of?
Currently I access node.elements, but this is a generator not an array, so I go over node.elements.iterator to check each element -- and these then have subelements, so I end up checking X.elements.iterator a few layers deep. But I'm basically blind -- in the debugger, I cannot tell what elements.iterator.value is referring to at all. Are there API functions to access the elements of a node/panel/part conveniently? So I get a list of elements, with a dictionary of their information, like "type":"TableRow" and "column":1 and "text":"info2b", and so on?
Posts: 7
Participants: 2