How to bring a “foreground” node in front of another “foreground” node
Continuing working on the diagram created in the following topic:
I have added nodes in the same diagram which now looks as follows:
Pink and Grey color nodes are “ForeGround” Nodes, while Light Green color nodes are “BackGround” Nodes.
Grey color node is the static node.
My requirement is, when i drag the diagram (Pink/Light Green color Nodes) from Right to Left, the part of these nodes (In Blue box) should not be visible on Static Grey color Node.
My Actually Requirement is to create a diagram which looks like as follows:
Here, Static Box on the Left have “Node Names”. This static box remains visible every time even when the diagram is scrolled left to right, but scroll up-down along with the timeline diagram.
Timeline diagram have the Pink and Light Green nodes. This part of diagram can be scroll up-down and left-right using “Vertical scroller” at the right and “Horizontal Scroller” at the bottom.
@walter, Could you please help!
Yes, Using this link ( GoJS Legends and Titles -- Northwoods Software ) only, i had created the static(Grey Node on left Side) node.
But problem is that, Pink and Light Green colored nodes gets overlapped with this Grey color node on left side when i drag these nodes towards left as shown in first diagram.
The Introduction page about Layers and z-ordering talks about two different ways to do what you want: either use Layers (probably the easiest in your case) or to use Part.zOrder.
https://gojs.net/latest/intro/layers.html
Thanks @walter, zOrder worked for me with layering.
How can i implement “Horizontal” and “Vertical” Scrolling ?
Your code explicitly disabled vertical scrolling. And infinite horizontal scrolling was working well in your code too.
Yes, but that is default scrolling, but, Is there any way to use “Scroll bars - Horizontal and Vertical” which works over and above default scrolling only on a particular part of a diagram ( Included in Red colored box) in the following diagram:
Yes, use two separate Diagrams. Then you don’t need to worry about layers either.
I’m Afraid! I can’t use multiple diagrams here :(
No need to be afraid. You can set up the Diagram on the left showing only the things that you want to show there. Set up “ViewportBoundsChanged” DiagramEvent listeners on each Diagram in order to modify the other Diagram.position. Both diagrams can share the same model, if you want.
But, In that case, will it be possible to “scroll up-down” both the diagrams together, the left side diagram which holds the name of the node on the right side (timeline) diagram ?
Yes, and I had just told you how by implementing “ViewportBoundsChanged” DiagramEvent listeners on each Diagram.
https://gojs.net/extras/synchronizedDiagrams.html
https://gojs.net/latest/intro/viewport.html
Hey @walter! Can i use “ScrollingTable” ( Scrolling Table ) for adding scroll bars in my following diagram, where “Red” box is a table which holds “Task 5”, “Task 6” and “Task 7” in the 1st column of the table and Pink/Green Nodes (overlapping nodes) within the Cells in the 2nd column of the table:
Also, can i have overlapping nodes (Pink and Green colored) inside the Table Cells? if yes, could you please suggest, how!
So far, i have achieved this much with overlapping nodes, but, currently i am not using Table/ScrollingTable:
Thanks.
No, “ScrollingTable” can only scroll a whole GraphObject.
It really is easy to use two Diagrams, and then there would be real scrollbars that look and behave like all other scrollbars on the platform.
If you are using TableLayout, some Nodes can have GraphObject.rowSpan greater than 1.
But I see no reason why you need to use TableLayout – just create the nodes the height that you want.
Hi @walter!
I tried to use the “synchronized diagrams” which you provided Minimal GoJS Sample
It is working for me. Thanks!
But, here, i want to restrict my vertical scrolling in a way like:
1. No vertical scrolling allowed, when there is no row “out of the view”.
2. No scrolling up allowed, when top (first) row is reached (visible).
3. No scrolling down allowed, when last row is visible.
How can this be achieved using the following scrolling listener which you provided:
function scrollerFor(diag) {
return function(e) {
if (myScrolling) return;
myScrolling = true;
// only synchronize vertical scrolling
var pos = diag.position;
if (pos.isReal()) diag.position = new go.Point(pos.x, e.diagram.position.y);
myScrolling = false;
}
}
var myScrolling = false; // synchronizing flag
myDiagram.addDiagramListener("ViewportBoundsChanged", scrollerFor(myDiagram2));
myDiagram2.addDiagramListener("ViewportBoundsChanged", scrollerFor(myDiagram));
Thanks.
OK, I’m assuming that the Diagram.documentBounds height is the same in both diagrams.
I believe you already get #2 and #3 as standard behavior.
The only issue is that when the Diagram.documentBounds height is less than the Diagram.viewportBounds height, scrolling is still permitted. I think you can get what you want by setting Diagram.contentAlignment to some “Top” Spot.
$(go.Diagram, . . .,
{
contentAlignment: go.Spot.Top,
. . .
})
No, am not getting #2 and #3 as standard behavior. At the moment, i am able to drag infinitely up and down.