Facing issue in dragging scroll bar thumb

GoJS
1

Issue: I am successfully dragged scroll bar thumb but whenever I dragged Scroll bar thumb it drags the diagram as well and due to this node get vibrate.

Node Screenshot:

image
image1068×607 26.8 KB

Scroll Bar code:

$(go.Panel, “Vertical”,
{
width: 13,
row: 1, column: 1,
alignment: go.Spot.Right, alignmentFocus: go.Spot.Left,
margin: new go.Margin(1, 1, 1, 1),

          },
          new go.Binding("visible", "ruledetails", setScrollBarVisible),
          $("Button",
            {
              name: "UP", click: (e, obj) => {
                scroll(obj.part, -1);
              }, width: 20, height: 20
            },
            $(go.Shape, "TriangleUp", { width: 6, height: 10 })
          ),
          $(go.Panel, "Auto",
            {
              name: "SCROLLBAR",
              width: 13,
              height: 213  //213
            },
            $(go.Shape, { fill: "lightgray" }),  // Background for scrollbar
            $(go.Shape, "Rectangle",
              {
                name: "SCROLLBAR_THUMB",
                fill: "gray",
                width: 11,
                alignment: go.Spot.Top,
                alignmentFocus: go.Spot.Top,
                mouseEnter: (e: any, obj: any) => thumbClicked(obj),
              },
              new go.Binding("height","",setThumbHeight)
            )
          ),
          $("Button",
            {
              name: "DOWN", click: (e, obj) => {
                scroll(obj.part, 1);
              }, width: 20, height: 20
            },
            $(go.Shape, "TriangleDown", { width: 6, height: 10 })
          )
        )

Code used for dragging thumb:

this.myDiagram.addDiagramListener(“ViewportBoundsChanged”, function (e) {
Diagram.toolManager.panningTool.isEnabled = false;
var diagram = e.diagram;
diagram.toolManager.panningTool.isEnabled = false;
const d = diagram.lastInput;
const currentViewportPosition = e.diagram.viewportBounds.position;
if (d.left) {
const part = diagram.findPartAt(d.documentPoint, true);
var node = part?.findObject(“MainNode”);

    var thumb = part?.findObject("SCROLLBAR_THUMB");

    if (thumb) {
      var thumbPosition = thumb.getDocumentPoint(go.Spot.Center);
      console.log("Thumb Position: " + thumbPosition.toString());
      var mousePt = Diagram.lastInput.documentPoint;
      console.log("Mouse Position: " + mousePt.toString());

      if (mousePt.y > thumbPosition.y || mousePt.y < thumbPosition.y) {
        diagram.toolManager.draggingTool.isEnabled = false;
        Diagram.toolManager.panningTool.isEnabled = false;
        diagram.toolManager.panningTool.isEnabled = false;

        if (mousePt.y > thumbPosition.y) {
          scroll(part, 1 * scrollSpeedMultiplier);
        } else if (mousePt.y < thumbPosition.y) {
          scroll(part, -1 * scrollSpeedMultiplier);
          console.log("Thumb scrolled up");
        }

        previousViewportPosition = currentViewportPosition; // Update the previous position
      }

      if (node instanceof go.Node) {
        // @ts-ignore
        node.movable = true;
      }
      diagram.toolManager.draggingTool.isEnabled = true;
      Diagram.toolManager.panningTool.isEnabled = false;
      diagram.toolManager.panningTool.isEnabled = false;

    }
  }
},
);
2

When you drag the “thumb” in the Scrolling Table sample, Scrolling Table Panels with ScrollBars | GoJS Diagramming Library, do you get the undesirable behavior that you are complaining about?

If you don’t, I’m curious how the standard usage is different in your case.

3

Hi,
I am decided to go with scrolling table.
But I am not able to import Scrolling Table in my angular component.
On below path Scrolling table Ts file is present which I am try both path to import:
import * as ScrollingTable from ‘gojs/extensionsJSM/ScrollingTable’;
import * as ScrollingTable from ‘gojs/extensionsTS/ScrollingTable’;
but still I am not able to get reference of Scrolling Table.

4

Just do the import for side effect. “ScrollingTable” is the name of a GraphObject builder – it is not a JavaScript symbol.

import "gojs/extensionsJSM/ScrollingTable";

By the way, we have improved the implementation in recent versions, so you may want to use the latest ScrollingTable.js. Although if you have not updated to at least GoJS v2.3.17, you might need to adapt the code to work in an older library version.

5

Hi
I am using Gojs Version 3.0.1 But in this library extensionsJSM folder not present inside gojs folder.

image
image1260×510 20.9 KB

6

You can get the complete kit from Download | GoJS

If you are using npm, execute npm create gojs-kit.

7

Thanks, Walter it worked for me,
but in some cases, I want to hide/invisible the scroll bar of Scrolling table, which property I need to use.

Scrolling table I used:
.add(
new go.Shape(
{
}),
go.GraphObject.build(‘ScrollingTable’, {
name: ‘SCROLLER’,
‘TABLE.itemTemplate’: DetailsTemplate,
‘TABLE.defaultRowSeparatorStroke’: ‘gray’,
‘TABLE.defaultRowSeparatorStrokeWidth’: 0.5,
‘TABLE.defaultSeparatorPadding’: new go.Margin(1, 3, 0, 3),
‘TABLE.rowSizing’: go.Sizing.None,
},)
.bind(‘TABLE.itemArray’, ‘ruledetails’)
.bind(“height”, “ruledetails”, setPanelHeight)
// This swaps the columns of the scrollbar and table.
// If you look at the ScrollingTable extension source, the scrolling table itself
// is implemented as a table with the scrollbar column 1 and the table content in column 0.
// This simply switches them to make the scrollbar appear on the left.
.bind(‘TABLE.column’, ‘left’, left => left ? 2 : 0)
),

8

Set or bind the visible property of the Panel named “SCROLLBAR” that is in the “ScrollingTable” Panel.

When do you want to hide it? You’ll want to examine the code for the implementation of “ScrollingTable”. I recommend that you update to the latest version, since I believe we have updated the code since 3.0.1.