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.
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.
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
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:
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 ?
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:
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));
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.
Oh, that’s right – you have set Diagram.scrollMode to go.Diagram.InfiniteScroll.
But as you have read at GoJS Coordinate Systems-- Northwoods Software, you could set Diagram.positionComputation to keep the Diagram.position y value within the range that you want, even while the x value changes dramatically.