Horizontal scrolling

GoJS
1

Hi,

if i have a single node(there is no graph on the left or right side) and try to horizontal scroll , the node scrolls to the end of left side , i want the scrolling to take place only if there is graph that is not displayed in the view port , how can i achieve this

in the flowchart example Flowchart , i had a single node and tried horizontal scroll , the node flies in the direction even thought there is nothing more to show

2

I suppose setting Diagram | GoJS API to go.Spot.Center might be what you are looking for.

3

that worked thanks :)

4

Hi,

setting the content alignment as center , always tries to center the diagram , i dont prefer that , i would like it to be left aligned. I aslo dont prefer node flying to a direction as well.

my diagram code :
fg(go.Diagram, divId, {
initialContentAlignment: go.Spot.TopCenter,
contentAlignment:go.Spot.TopLeft,
position: new go.Point(0,0),
autoScrollRegion: new go.Margin(20, 20, 20, 20),
“LinkDrawn”: createLinkViaRelink, //NO I18n
“animationManager.isEnabled”: false, //NO I18n
“undoManager.isEnabled”: true, //NO I18n
“maxSelectionCount”:1, //NO I18n
“allowClipboard”:false//NO I18n

        });

my diagram is initially left aligned eventhough my initial content alignment is center.plz advise

I am displaying some diagram content initially which i want to display in the center of the view port , after that if i scroll, i dont want the diagram flying to the direction , i need to scroll only if there is content to shown. I dont want it to be center aligned so that if i change something , the diagram doesnt center align itself

5

You have conflicting content alignments. Diagram.contentAlignment takes precedence, since it applies at every transaction, including the initial one.

I suggest that you remove that prooerty.

By the way, JavaScript does not require quoting property names if they are valid identifiers. So you do not need to quote “LinkDrawn”, for example.

6

thanks for pointing that out . if i remove contentAlignment , my node flies when scrolling I dont want this effect

7

I’m sorry, but I don’t know what you mean by “flying”.

Why not set Diagram.contentAlignment to go.Spot.TopLeft? And there’s no need for initialContentAlignment.

8

if i set initialcontentalignment to left , i am not able to position the initial diagram in the middle of the viewport , kind of a deadlock

just to clarify what i want :slight_smile:

I want to load a diagram from json in the middle of the view port and not make it fly to a side when scrolled and realign itself to the center when edited , i want it to just stay there

9

I would like some help with this

10

I suggested that you not set Diagram.initialContentAlignment and that you do set Diagram.contentAlignment. Doing so seemed to satisfy your requirements, according to your own post of April 19.

So how have your requirements changed? Could you show several screenshots for before-and-after behavior displaying the current behavior and also some screenshots for what you want instead?

11

I started the thread again on april 28 :)

https://docs.zoho.com/file/yroyr554d19c13de848f6af21e2897ab0081d

let me know if you can view the video .

1)video represents the flying of a node to the end eventhough there is nothing to display on either side.

  1. setting content alignment to center , negates this effect but centers the diagram each time

  2. I dont want to center the diagram (contentalignment:center) so that each time i change something graph center aligns itself

  3. setting contentalignment to left negates the center aligning , but brings back the flying effect.

12

I see the video, but I don’t see anything wrong per se. It just looks like you are scrolling.

What does it mean for a node to be “flying”?

This is probably happening because of a layout. What happens if you set isGoing: false on the layout? Or change the Node’s layoutConditions?

13

what I mean by flying is that the node moves when scrolled , i want the scroll to happen only if there is some nodes that are not shown in the viewport like when you center align the diagram

sorry but could you share me a link on layouts and isGoing ?

14

Oops I meant isOngoing, not isGoing. Several samples use this, such as page flow.

I want the scroll to happen only if there is some nodes that are not shown in the viewport

But this is generally the purpose of contentAlignment. If you really don’t want to use that, you could create a Diagram changed listener that checks for the existence of scrollbars. If they exist, it allows the user to scroll. Something like this:

myDiagram.addDiagramListener('ViewportBoundsChanged', function(e) {
  var vpb = myDiagram.viewportBounds;
  var db = myDiagram.documentBounds;

  var oldskip = myDiagram.skipsUndoManager;
  myDiagram.skipsUndoManager = true;
  myDiagram.startTransaction('change scroll');
  myDiagram.allowHorizontalScroll = vpb.width < db.width;
  myDiagram.allowVerticalScroll = vpb.height < db.height;
  myDiagram.startTransaction('change scroll');
  myDiagram.skipsUndoManager = oldskip;
});

It should work, though it may require some experimentation to get exactly what you want.