Change cursor if scrolling is enabled

GoJS
1

I’m using GoJS 1.7.5
I have a diagram with TreeLayout, on some outer interaction, the model of my diagram is changed.
My goal is to change cursor:
If diagram has any of the scrolls, then the cursor should be ‘drag’, otherwise ‘auto’

I’ve made some implementation with this

this.myDiagram.addDiagramListener('ViewportBoundsChanged', () => {
  // allow scroll bar when documentBounds bigger than view space.
  this.myDiagram.allowHorizontalScroll = this.myDiagram.documentBounds.width > this.myDiagram.viewportBounds.width;
  this.myDiagram.hasHorizontalScrollbar = this.myDiagram.allowHorizontalScroll;
  this.myDiagram.allowVerticalScroll = this.myDiagram.documentBounds.height > this.myDiagram.viewportBounds.height;
  this.myDiagram.hasVerticalScrollbar = this.myDiagram.allowVerticalScroll;
  this.myDiagram.defaultCursor = this.myDiagram.hasHorizontalScrollbar || this.myDiagram.hasVerticalScrollbar ? 'drag' : 'auto';
  this.myDiagram.currentCursor = this.myDiagram.hasHorizontalScrollbar || this.myDiagram.hasVerticalScrollbar ? 'drag' : 'auto';
  this.myDiagram.contentAlignment = go.Spot.Center;
   // when drag scroll bar the pop up do not lost focus.So set the focus by code.
  this.myDiagram.focus();
});

But the thing is, when I load a new model, and my diagram has any of the scroll, the cursor is still ‘auto’, only after I start to drag, the cursor becomes ‘drag’ and doesn’t change back.
In opposite way, it works perfect, when I load model, that no scroll is needed, the cursor is ‘auto’ at the beginning.
How can I achieve it for the ‘drag’ cursor?

Here is what I did

You can click on “Switch model” to see the differences

2

“drag” is not a valid predefined CSS cursor name: cursor - CSS: Cascading Style Sheets | MDN

This worked for me:

    $(go.Diagram, . . .,
      {
        . . . ,
        "ViewportBoundsChanged": function(e) {
          var d = e.diagram;
          var oldskips = d.skipsUndoManager;
          d.skipsUndoManager = true;
          var hs = d.documentBounds.width > d.viewportBounds.width;
          d.allowHorizontalScroll = hs;
          d.hasHorizontalScrollbar = hs;
          var vs = d.documentBounds.height > d.viewportBounds.height;
          d.allowVerticalScroll = vs;
          d.hasVerticalScrollbar = vs;
          var c = (hs || vs) ? "move" : "auto";
          d.defaultCursor = c;
          d.currentCursor = c;
          d.skipsUndoManager = oldskips;
        },
        . . .
      });
1 Like
3

You’re right.
Don’t believe I felt on this.
Thanks.

Do I need skipsUndoManager?
Cause it seems working without it.

4

Presumably you don’t want to record those changes in the UndoManager, do you?

5

No, in my case, the diagram is not changeable